diff --git a/readme.md b/readme.md
index 7058087fa4565cedcf4f3cbd5eac6fa7f2bcdad8..9a88c1c9e8b83c4e53bc600db4b0bc725e2f3123 100644
--- a/readme.md
+++ b/readme.md
@@ -16,15 +16,16 @@
**8장**. Source & Referrence
## 안내
-**Visual Studio 2022**의 **node.js 프로젝트**에서 개발되었습니다.
-실행은 반드시 Three.js 패키지가 설치된 **서버 환경**에서 해주세요.
+**Visual Studio 2022**의 **node.js 프로젝트**에서 개발되었습니다.
+실행은 반드시 **Three.js 패키지가 설치된 서버 환경**에서 해주세요.
로컬 환경에서 실행하면 브라우저 보안상의 이유로 로컬 파일을 불러올 수 없습니다(*텍스처*, *모델* 등).
+
<mark>본 문서는 교수님의 요청에 따라 **'친근한 강의'** 느낌으로 제작되었음을 알립니다.</mark>
## 1장: 주제 및 목표
### 1.1 주제
-제가 선정한 주제는 **라이트 셰프트(Light Shaft) 효과**로, 간단한 레이 트레이싱 기법을 활용한 빛 줄기의 구현입니다.
+제가 선정한 주제는 **라이트 셰프트(Light Shaft) 효과**로, 오브젝트 사이로 스며들어오는 빛 줄기의 구현입니다.
기존 Three.js 예제에서 수정한 결과물은 아니지만 비슷한 예제로 **Godrays**가 있습니다.
다만 **Godrays** 예제의 경우 셰이더 패스가 많고 과정이 복잡해서 필요없는 부분(*FakeSun 패스*, *Combine 패스*)을 빼고, 셰이더 코드도 더 쉽게 새로 만들었습니다.
세부적인 원리에 관한 설명은 2장부터 시작하는 실습에서부터 천천히 설명하도록 하겠습니다.
@@ -36,11 +37,10 @@
**4.** EffectComposer와 ShaderPass 사용법 이해하기
**5.** GLSL 프로그래밍 과정 및 문법 이해하기
**6.** 깊이 텍스처로부터 가중치 추출하기
-**7.** 레이 트레이싱으로 라이트 셰프트 만들기
-**8.** 결과물을 바라보며 자아도취에 빠지기
+**7.** 라이트 셰프트 셰이더 만들기
## 2장: 기본 장면 렌더링
-
+
<details>
@@ -307,7 +307,7 @@ scene.add(sunObject);
```
for (let i = 0; i < constants.treeCount; ++i) {
- loader.load('models/obj/tree.obj', function (tree) {
+ loader.load('models/tree.obj', function (tree) {
tree.material = whiteMaterial;
tree.position.set(
(i * constants.treeOffset) - (constants.treeOffset * (constants.treeCount / 2) - (constants.treeOffset / 2)),
@@ -409,10 +409,10 @@ window.addEventListener('resize', onWindowResize);
</details>
-<mark>2장의 전체 스크립트는 [**여기**](https://git.ajou.ac.kr/shh1473/cg_course/-/blob/main/TutorialSources/script_2.js "Light shaft chapter 2 source code")에 있습니다.</mark>
+<mark>2장의 전체 스크립트는 [**여기**](https://git.ajou.ac.kr/shh1473/cg-tutorial/-/blob/main/tutorial_data/scripts/script_2.js "Light shaft chapter 2 source code")에 있습니다.</mark>
## 3장: 카메라와 GUI 조작
-
+
<details>
@@ -634,14 +634,14 @@ cameraFolder.add(controls, 'fieldOfView', 40, 80).listen().onChange(function (va
</details>
-<mark>3장의 전체 스크립트는 [**여기**](https://git.ajou.ac.kr/shh1473/cg_course/-/blob/main/TutorialSources/script_3.js "Light shaft chapter 3 source code")에 있습니다.</mark>
+<mark>3장의 전체 스크립트는 [**여기**](https://git.ajou.ac.kr/shh1473/cg-tutorial/-/blob/main/tutorial_data/scripts/script_3.js "Light shaft chapter 3 source code")에 있습니다.</mark>
## 4장: 렌더 타겟
-
+
<details>
-<summary>4장 튜토리얼 (펼치기/접기)</summary>
+<summary><b>4장 튜토리얼 (펼치기/접기)</b></summary>
### 4.1 렌더 타겟이란?
이제부터 약간의 원리 이해가 필요합니다.
@@ -741,14 +741,14 @@ function onWindowResize() {
</details>
-<mark>4장의 전체 스크립트는 [**여기**](https://git.ajou.ac.kr/shh1473/cg_course/-/blob/main/TutorialSources/script_4.js "Light shaft chapter 4 source code")에 있습니다.</mark>
+<mark>4장의 전체 스크립트는 [**여기**](https://git.ajou.ac.kr/shh1473/cg-tutorial/-/blob/main/tutorial_data/scripts/script_4.js "Light shaft chapter 4 source code")에 있습니다.</mark>
## 5장: 가중치 추출
-
+
<details>
-<summary>5장 튜토리얼 (펼치기/접기)</summary>
+<summary><b>5장 튜토리얼 (펼치기/접기)</b></summary>
5장부터는 꽤 어려워지기 시작합니다.
아마 모르거나 처음 보는 내용이 많을 거예요.
@@ -777,7 +777,7 @@ import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
바로 **화면에 정렬된 평면(Screen-aligned quad)**를 이용하는 겁니다.
그 전에 먼저 **프로젝션 공간**을 이해해야 합니다. 사실 이해라 할 것도 없어요.
-
+
그냥 직접 그려보았습니다.
그림을 보면 아시다시피 프로젝션 공간은 왼쪽과 아래쪽 끝이 `-1`이고, 오른쪽과 위쪽 끝이 `1`입니다.
@@ -980,14 +980,14 @@ function onWindowResize() {
</details>
-<mark>5장의 전체 스크립트는 [**여기**](https://git.ajou.ac.kr/shh1473/cg_course/-/blob/main/TutorialSources/script_5.js "Light shaft chapter 5 source code")에 있습니다.</mark>
+<mark>5장의 전체 스크립트는 [**여기**](https://git.ajou.ac.kr/shh1473/cg-tutorial/-/blob/main/tutorial_data/scripts/script_5.js "Light shaft chapter 5 source code")에 있습니다.</mark>
## 6장: 라이트 셰프트
-
+
<details>
-<summary>6장 튜토리얼 (펼치기/접기)</summary>
+<summary><b>6장 튜토리얼 (펼치기/접기)</b></summary>
이제 **라이트 셰프트**를 완성할 차례입니다.
@@ -1024,7 +1024,7 @@ const controls = {
일단 이걸 이해하려면 어떻게 빛 줄기를 만드는지 알아야 합니다.
먼저 그림부터 보도록 합시다.
-
+
보면 태양으로부터 멀어질수록, 특히 오브젝트에 가려질수록 빛 줄기가 약해집니다.
빛 줄기의 강도는 당연히 프래그먼트 셰이더에서 계산해야겠지요?
@@ -1037,14 +1037,12 @@ const controls = {
예...말로 설명하면 확실히 이해하기 난해하죠.
그래서 그림을 준비해봤습니다.
-
+
자, 여러분이 추출한 **가중치 텍스처**입니다.
`stepCount`는 방금 말했던 픽셀로부터 태양까지의 나눠진 수를 의미합니다.
그리고 그 스텝마다 가중치를 뽑아서 조금씩 늘어나는 감쇄량을 적용한 뒤 누적합니다.
슬슬 이해가 되시나요?
-참고로 이건 **레이 트레이싱**이라고 불리는 기법입니다.
-물론 정확한 레이 트레이싱은 아니고요. 그냥 아주 간단한 흉내라고 보시면 됩니다.
그럼 이제 셰이더를 작성해봅시다!
@@ -1213,7 +1211,6 @@ float deltaLength = min(0.005, lengthToLight * 1.0 / float(stepCount - 1)); //
그 다음으로는 `min()` 함수가 보이네요.
왜 굳이 `0.005`보다 크면 `0.005`로 고정시켜주는 걸까요?
왜냐하면 추출 간격이 너무 넓어지면(`stepCount` 값이 너무 작아지면) **빛 줄기의 강도가 퍼지기 때문**입니다.
-원래 레이 트레이싱의 샘플 값이 낮으면 품질이 좋지 않죠. 같은 이유입니다.
그래서 최소한의 간격으로 `0.005`를 지정해주었습니다.
이렇게 하면 태양까지 닿지 않을 수도 있지만, 빛 줄기가 퍼져서 이상한 모습을 보는 일은 없습니다.
추가로 `float(stepCount - 1)` 없이 그냥 `0.005`로 고정시켜버리면 어떻게 될까요?
@@ -1387,14 +1384,14 @@ function onWindowResize() {
</details>
-<mark>6장의 전체 스크립트는 [**여기**](https://git.ajou.ac.kr/shh1473/cg_course/-/blob/main/TutorialSources/script_6.js "Light shaft chapter 6 source code")에 있습니다.</mark>
+<mark>6장의 전체 스크립트는 [**여기**](https://git.ajou.ac.kr/shh1473/cg-tutorial/-/blob/main/tutorial_data/scripts/script_6.js "Light shaft chapter 6 source code")에 있습니다.</mark>
## 7장: 꾸미기
-
+
<details>
-<summary>7장 튜토리얼 (펼치기/접기)</summary>
+<summary><b>7장 튜토리얼 (펼치기/접기)</b></summary>
자, 7장부터는 옵션입니다.
그러니까 하셔도 되고 안 하셔도 됩니다.
@@ -1760,14 +1757,14 @@ function createGUI() {
괜찮아요 저는 재밌었거든요!!
-
+
**Three.js를 통한 WebGL**은 처음이었지만
예전에 **다이렉트3D**를 공부한 적이 있어서 쉬울 줄 알았습니다만...
**헉~~~**
-
+
**이거 GLSL은 어떻게 쓰는거야??**
@@ -1777,19 +1774,19 @@ function createGUI() {
안 물어봤다고요???
-
+
괜찮아요!! 여러분이 궁금하셨다는 거 다 알고 있어요~~
그럼 저는 1도 공부 안 한 **알고리즘**을 공부하러 이만!!
-
+
**@))))))))** (툭)
</details>
-<mark>7장의 전체 스크립트는 [**여기**](https://git.ajou.ac.kr/shh1473/cg_course/-/blob/main/TutorialSources/script_7.js "Light shaft chapter 7 source code")에 있습니다.</mark>
+<mark>7장의 전체 스크립트는 [**여기**](https://git.ajou.ac.kr/shh1473/cg-tutorial/-/blob/main/tutorial_data/scripts/script_7.js "Light shaft chapter 7 source code")에 있습니다.</mark>
## Source & Referrence
@@ -1802,5 +1799,4 @@ function createGUI() {
### 참고문헌
* Pope Kim. 셰이더 프로그래밍 입문. 한빛미디어, 2012
* Feinstein, Doron. HLSL Development Cookbook. Packt, 2013
-* Dirksen, Jos. Learning Three.js - the JavaScript 3D Library for WebGL (Second Edition). Packt, 2015
-
+* Dirksen, Jos. Learning Three.js - the JavaScript 3D Library for WebGL (Second Edition). Packt, 2015
\ No newline at end of file
diff --git a/tutorial_data/pictures/references/ray_example.png b/tutorial_data/pictures/references/ray_example.png
new file mode 100644
index 0000000000000000000000000000000000000000..eb06ea6bd3871f0dbbe4e5a89f2a5b11b9dcfb09
Binary files /dev/null and b/tutorial_data/pictures/references/ray_example.png differ