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

Completed readme.md

parent ad49ab75
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 27 additions and 26 deletions
readme.md
+ 27
− 26
View file @ 5dde55ad
......@@ -17,8 +17,9 @@
## 안내
**Visual Studio 2022**의 **node.js 프로젝트**에서 개발되었습니다.
실행은 반드시 Three.js 패키지가 설치된 **서버 환경**에서 해주세요.
실행은 반드시 **Three.js 패키지가 설치된 서버 환경**에서 해주세요.
로컬 환경에서 실행하면 브라우저 보안상의 이유로 로컬 파일을 불러올 수 없습니다(*텍스처*, *모델* 등).
<mark>본 문서는 교수님의 요청에 따라 **'친근한 강의'** 느낌으로 제작되었음을 알립니다.</mark>
## 1장: 주제 및 목표
......@@ -40,7 +41,7 @@
**8.** 결과물을 바라보며 자아도취에 빠지기
## 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 +308,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 +410,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 +635,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 +742,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 +778,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 +981,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 +1025,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,7 +1038,7 @@ 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`는 방금 말했던 픽셀로부터 태양까지의 나눠진 수를 의미합니다.
......@@ -1387,14 +1388,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 +1761,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 +1778,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
......
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