Skip to content
Snippets Groups Projects
Commit abc8f425 authored by Suhyeon Han's avatar Suhyeon Han
Browse files

Merge branch 'main' of https://git.ajou.ac.kr/shh1473/cg-tutorial

parents 0bebfb97 ef2e9766
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
readme.md
+ 30
− 34
View file @ abc8f425
......@@ -17,14 +17,15 @@
## 안내
**Visual Studio 2022**의 **node.js 프로젝트**에서 개발되었습니다.
실행은 반드시 Three.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장: 기본 장면 렌더링
![Chapter 2 result](https://git.ajou.ac.kr/shh1473/cg_course/-/raw/main/Pictures/Chapter_2.png "Chapter 2 result")
![Chapter 2 result](https://git.ajou.ac.kr/shh1473/cg-tutorial/-/raw/main/tutorial_data/pictures/chapter_results/chapter_2.png "Chapter 2 result")
<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 조작
![Chapter 3 result](https://git.ajou.ac.kr/shh1473/cg_course/-/raw/main/Pictures/Chapter_3.png "Chapter 3 result")
![Chapter 3 result](https://git.ajou.ac.kr/shh1473/cg-tutorial/-/raw/main/tutorial_data/pictures/chapter_results/chapter_3.png "Chapter 3 result")
<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장: 렌더 타겟
![Chapter 4 result](https://git.ajou.ac.kr/shh1473/cg_course/-/raw/main/Pictures/Chapter_4.png "Chapter 4 result")
![Chapter 4 result](https://git.ajou.ac.kr/shh1473/cg-tutorial/-/raw/main/tutorial_data/pictures/chapter_results/chapter_4.png "Chapter 4 result")
<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장: 가중치 추출
![Chapter 5 result](https://git.ajou.ac.kr/shh1473/cg_course/-/raw/main/Pictures/Chapter_5.png "Chapter 5 result")
![Chapter 5 result](https://git.ajou.ac.kr/shh1473/cg-tutorial/-/raw/main/tutorial_data/pictures/chapter_results/chapter_5.png "Chapter 5 result")
<details>
<summary>5장 튜토리얼 (펼치기/접기)</summary>
<summary><b>5장 튜토리얼 (펼치기/접기)</b></summary>
5장부터는 꽤 어려워지기 시작합니다.
아마 모르거나 처음 보는 내용이 많을 거예요.
......@@ -777,7 +777,7 @@ import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
바로 **화면에 정렬된 평면(Screen-aligned quad)**를 이용하는 겁니다.
그 전에 먼저 **프로젝션 공간**을 이해해야 합니다. 사실 이해라 할 것도 없어요.
![Projection vs UV](https://git.ajou.ac.kr/shh1473/cg_course/-/raw/main/Pictures/projection_uv.png "Projection vs UV")
![Projection vs UV](https://git.ajou.ac.kr/shh1473/cg-tutorial/-/raw/main/tutorial_data/pictures/references/projection_vs_uv.png "Projection vs UV")
그냥 직접 그려보았습니다.
그림을 보면 아시다시피 프로젝션 공간은 왼쪽과 아래쪽 끝이 `-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장: 라이트 셰프트
![Chapter 6 result](https://git.ajou.ac.kr/shh1473/cg_course/-/raw/main/Pictures/Chapter_6.png "Chapter 6 result")
![Chapter 6 result](https://git.ajou.ac.kr/shh1473/cg-tutorial/-/raw/main/tutorial_data/pictures/chapter_results/chapter_6.png "Chapter 6 result")
<details>
<summary>6장 튜토리얼 (펼치기/접기)</summary>
<summary><b>6장 튜토리얼 (펼치기/접기)</b></summary>
이제 **라이트 셰프트**를 완성할 차례입니다.
......@@ -1024,7 +1024,7 @@ const controls = {
일단 이걸 이해하려면 어떻게 빛 줄기를 만드는지 알아야 합니다.
먼저 그림부터 보도록 합시다.
![Ray example](https://git.ajou.ac.kr/shh1473/cg_course/-/raw/main/Pictures/ray_example.png "Ray example")
![Ray example](https://git.ajou.ac.kr/shh1473/cg-tutorial/-/raw/main/tutorial_data/pictures/references/ray_example.png "Ray example")
보면 태양으로부터 멀어질수록, 특히 오브젝트에 가려질수록 빛 줄기가 약해집니다.
빛 줄기의 강도는 당연히 프래그먼트 셰이더에서 계산해야겠지요?
......@@ -1037,14 +1037,12 @@ const controls = {
예...말로 설명하면 확실히 이해하기 난해하죠.
그래서 그림을 준비해봤습니다.
![Light Ray](https://git.ajou.ac.kr/shh1473/cg_course/-/raw/main/Pictures/lightray.png "Light Ray")
![Light Ray](https://git.ajou.ac.kr/shh1473/cg-tutorial/-/raw/main/tutorial_data/pictures/references/light_shaft.png "Light Ray")
자, 여러분이 추출한 **가중치 텍스처**입니다.
`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장: 꾸미기
![Chapter 7 result](https://git.ajou.ac.kr/shh1473/cg_course/-/raw/main/Pictures/Chapter_7.png "Chapter 7 result")
![Chapter 7 result](https://git.ajou.ac.kr/shh1473/cg-tutorial/-/raw/main/tutorial_data/pictures/chapter_results/chapter_7.png "Chapter 7 result")
<details>
<summary>7장 튜토리얼 (펼치기/접기)</summary>
<summary><b>7장 튜토리얼 (펼치기/접기)</b></summary>
자, 7장부터는 옵션입니다.
그러니까 하셔도 되고 안 하셔도 됩니다.
......@@ -1760,14 +1757,14 @@ function createGUI() {
괜찮아요 저는 재밌었거든요!!
![Naver blog emoji 1](https://git.ajou.ac.kr/shh1473/cg_course/-/raw/main/Pictures/emoji_1.png "Naver blog emoji 1")
![Naver blog emoji 1](https://git.ajou.ac.kr/shh1473/cg-tutorial/-/raw/main/tutorial_data/pictures/emojis/emoji_1.png "Naver blog emoji 1")
**Three.js를 통한 WebGL**은 처음이었지만
예전에 **다이렉트3D**를 공부한 적이 있어서 쉬울 줄 알았습니다만...
**헉~~~**
![Naver blog emoji 4](https://git.ajou.ac.kr/shh1473/cg_course/-/raw/main/Pictures/emoji_4.png "Naver blog emoji 4")
![Naver blog emoji 4](https://git.ajou.ac.kr/shh1473/cg-tutorial/-/raw/main/tutorial_data/pictures/emojis/emoji_2.png "Naver blog emoji 4")
**이거 GLSL은 어떻게 쓰는거야??**
......@@ -1777,19 +1774,19 @@ function createGUI() {
안 물어봤다고요???
![Naver blog emoji 2](https://git.ajou.ac.kr/shh1473/cg_course/-/raw/main/Pictures/emoji_2.png "Naver blog emoji 2")
![Naver blog emoji 2](https://git.ajou.ac.kr/shh1473/cg-tutorial/-/raw/main/tutorial_data/pictures/emojis/emoji_3.png "Naver blog emoji 2")
괜찮아요!! 여러분이 궁금하셨다는 거 다 알고 있어요~~
그럼 저는 1도 공부 안 한 **알고리즘**을 공부하러 이만!!
![Naver blog emoji 3](https://git.ajou.ac.kr/shh1473/cg_course/-/raw/main/Pictures/emoji_3.png "Naver blog emoji 3")
![Naver blog emoji 3](https://git.ajou.ac.kr/shh1473/cg-tutorial/-/raw/main/tutorial_data/pictures/emojis/emoji_4.png "Naver blog emoji 3")
**@))))))))** (툭)
</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
......@@ -1803,4 +1800,3 @@ 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
\ No newline at end of file
tutorial_data/pictures/references/ray_example.png 0 → 100644
+ 0
− 0
View file @ abc8f425
tutorial_data/pictures/references/ray_example.png

196 KiB

0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

feedback to tooltime@ajou.ac.kr or hwan@ajou.ac.kr