diff --git a/index.html b/index.html index ab0f5d739f7e7161264a1e3f952b779384e16126..8982b4c6282d8327c944ee92f1d395cffdd7fbdb 100644 --- a/index.html +++ b/index.html @@ -58,7 +58,10 @@ <p> 반드시 <b>서버 환경</b>에서 실행하세요!<br /> - <b>Web server for Chrome</b> 확장 프로그램을 추천합니다. + <b>Web server for Chrome</b> 확장 프로그램을 추천합니다...<br /> + 라고 한때 말씀드렸었으나 이제는 지원되지 않습니다.<br /> + 따라서 다른 방법으로 서버를 열거나, 아니면 시연 없이 튜토리얼만 보셔도 됩니다.<br /> + 저는 Visual Studio의 node.js를 사용했습니다. </p> <p> 프로그램 제어: <button id="pause_button" type="button">Pause</button> @@ -101,7 +104,7 @@ <h3>1.1 주제</h3> <p> - 제가 선정한 주제는 <b>라이트 셰프트(Light Shaft) 효과</b>로, 오브젝트 사이로 스며들어오는 빛 줄기의 구현입니다.<br /> + 제가 선정한 주제는 <b>라이트 셰프트(Light Shaft) 효과</b>로, 광원 주변의 오브젝트 사이로 스며들어오는 빛 줄기의 구현입니다.<br /> 기존 Three.js 예제에서 수정한 결과물은 아니지만 비슷한 예제로 <b>Godrays</b>가 있습니다.<br /> 다만 <b>Godrays</b> 예제의 경우 셰이더 패스가 많고 과정이 복잡하여 필요없는 부분(<em><u>FakeSun 패스, Combine 패스</u></em>)을 빼고, 셰이더 코드도 더 쉽도록 새로 만들었습니다.<br /> 즉, 백지 스크립트에서 제작되었으며 튜토리얼 또한 백지 스크립트에서 시작합니다.<br /> @@ -128,8 +131,8 @@ <details> <summary><b>2장 튜토리얼 (펼치기/접기)</b></summary> <p> - 2장에서는 <b>베이스 프로그램</b>을 만들건데요.<br /> - <code>index.html</code>의 경우 내용이 적고 자바스크립트가 아니므로 따로 해설을 하진 않고 첨부만 하겠습니다.<br /> + 2장에서는 <b>베이스 프로그램</b>을 만들겁니다.<br /> + <code>index.html</code>의 경우 내용이 적고 자바스크립트가 아니므로 따로 해설을 하지는 않고 파일 첨부만 하겠습니다.<br /> 추가로 저처럼 <code>node.js</code>로 서버를 여시는 분들을 위해 <code>server.js</code> 파일도 함께 제공하겠습니다. </p> @@ -142,9 +145,9 @@ <p> 자, 이제 본격적으로 <code>script.js</code> 파일을 만들어 봅시다.<br /> 기본적인 장면만 구성해볼 건데요.<br /> - 대충 바닥 있고 나무 몇 개 있고 라이트 좀 있는 그런 장면을 말하는 겁니다.<br /> - 대부분이 수업에 나온 내용이므로 가볍게 따라와주시면 되겠습니다.<br /> - 빈 <code>script.js</code> 파일을 준비해주세요. + 대충 바닥 있고 나무 몇 개 있고 라이트 좀 있는 그런 장면을 만들도록 하겠습니다.<br /> + 대부분이 수업에 나온 내용이므로 가볍게 따라올 수 있을 겁니다.<br /> + 먼저 빈 <code>script.js</code> 파일을 준비해주세요. </p> <h3>2.2 모듈</h3> @@ -171,14 +174,14 @@ 수업에서 배우지는 않았지만 이걸 사용하면 결과물의 왼쪽 상단에 프레임, 루프 소요 시간, 메모리 등의 정보를 보여줍니다.<br /> 필수는 아니지만 만들고 있는 프로그램의 사양을 파악할 수 있으므로 넣어봅시다.<br /> 넷째 줄은 <b>오브젝트 로더</b>입니다.<br /> - 이걸 이용해서 기본 모델 중 하나인 <code>tree.obj</code> 파일을 불러올 계획입니다. + 이걸 이용해서 기본 모델 중 하나인 <code>tree.obj</code> 파일을 불러올 겁니다. </p> <h3>2.3 상수</h3> <p> 다음으로 할 일은 프로그램에서 사용할 <b>상수</b>의 정의입니다.<br /> - <b>C언어</b>로 치자면 <code>#define</code> 같은 것이죠.<br /> - 예상 외로 많지만 일단 따라 쳐보도록 합시다. + <b>C언어</b>로 치자면 <code>#define</code> 같은 것들이죠.<br /> + 조금 많지만 일단은 따라서 타이핑해보도록 합시다. </p> <!-- 2장 상수 코드 1 --> @@ -202,8 +205,8 @@ </tr> </table> <p> - 하나하나 설명하기엔 간단해서 주석으로 대신합니다.<br /> - 기본 장면이지만 대부분의 상수가 기본 값이기 때문에 많이 들어가는군요. + 하나하나 설명하기엔 간단해서 주석으로 설명을 대신합니다.<br /> + 기본 장면이지만 대부분의 상수가 기본 값이기 때문에 많이 들어가네요. </p> <h3>2.4 실행 함수</h3> @@ -260,7 +263,7 @@ </table> <p> 그리고 <b>렌더러</b>, <b>카메라</b>, <b>앰비언트 라이트</b>, <b>디렉셔널 라이트</b>, <b>태양 오브젝트</b>를 선언해둡니다.<br /> - 지금 당장 생성하지 않을 오브젝트들이므로 <code>let</code>으로 선언합니다. + 지금 당장 생성하지 않을 오브젝트들이므로 일단 <code>let</code> 키워드로 선언합니다. </p> <h3>2.5 렌더러</h3> @@ -313,7 +316,7 @@ 그리고 픽셀 비율, 영역 크기, 바탕색을 설정합니다.<br /> 영역 크기는 창의 내부 크기로 각각 설정해주면 됩니다.<br /> 바탕색의 경우 앞서 정의했던 <code>constants</code>의 렌더러 기본 바탕색을 사용해주도록 합시다.<br /> - 뒤의 <code>1</code> 은 알파 값으로서, 바탕색이 투명하면 안 되므로 <code>1</code>로 해줍니다. + 뒤의 <code>1</code> 은 알파 값(불투명도)으로서, 바탕색이 투명하면 안 되므로 <code>1</code>로 해줍니다. </p> <!-- 2장 렌더러 코드 1-3 --> @@ -331,7 +334,7 @@ <h3>2.6 카메라</h3> <p> <b>카메라</b>를 생성해봅시다.<br /> - 마찬가지로 함수로 분리합니다. + 이전처럼 함수로 분리합니다. </p> <!-- 2장 카메라 코드 1 --> @@ -361,8 +364,7 @@ </table> <p> 카메라는 <b>Perspective</b> 카메라로 준비합니다.<br /> - 수업을 열심히 들으셨다면 각각의 인자가 무엇을 뜻하는지 아시겠죠?<br /> - 시야각, 종횡비, near, far입니다.<br /> + 각각의 인자는 시야각, 종횡비, near, far입니다.<br /> 시야각의 경우 역시 <code>constants</code>를 사용합니다. </p> @@ -377,7 +379,7 @@ </table> <p> 그리고 카메라 위치와 타겟 위치를 설정합니다.<br /> - <code>constants</code>의 값을 보시면 아시겠지만 약간 위를 바라보는 각도입니다. + <code>constants</code>의 값을 보면 아시겠지만 약간 위를 바라보는 각도입니다. </p> <!-- 2장 카메라 코드 1-3 --> @@ -425,8 +427,8 @@ </table> <p> 앰비언트 라이트의 경우 생성할 때 색상만 지정해주면 끝입니다.<br /> - 위치의 영향을 받지 않는 라이트니까요.<br /> - 색상은 <code>constants</code>의 기본 색상을 이용하고 생성 후 바로 씬에 넣습니다. + 위치의 영향을 받지 않는 조명이니까요.<br /> + 색상은 <code>constants</code>의 기본 색상을 이용하고, 생성 후 바로 씬에 넣습니다. </p> <!-- 2장 라이트 코드 1-2 --> @@ -441,7 +443,7 @@ </table> <p> 디렉셔널 라이트도 생성은 앰비언트 라이트와 같습니다.<br /> - 하지만 이 친구는 위치를 지정해줘야합니다.<br /> + 하지만 이 조명은 위치를 지정해줘야합니다.<br /> 앞서 정의했던 <code>constants</code>에서 최대 거리 값을 넣어줍니다.<br /> 씬에 넣는것도 잊지 마시고요. </p> @@ -504,9 +506,8 @@ </table> <p> 먼저 <code>loader</code>라는 오브젝트 로더를 생성합니다.<br /> - <code>import</code>할 때 추가한 거 기억하시죠?<br /> 그리고 흰색 재질을 생성하는데요, <code>THREE.MeshLambertMaterial()</code> 함수를 이용합니다.<br /> - <b>램버트 재질</b>로 해야 빛을 받으니까요.<br /> + <b>램버트 재질</b>로 해야 빛(난반사광)을 받을 수 있습니다.<br /> 색상도 흰색이니 <code>0xffffff</code>로 설정합니다. </p> @@ -525,9 +526,9 @@ 바닥 오브젝트는 흰색 재질을 이용할 것이므로 지오메트리만 만들면 됩니다.<br /> <code>PlaneGeometry()</code> 함수를 이용해 크기가 <code>1000x1000</code>인 <b>평면 지오메트리</b>를 생성합니다.<br /> 그리고 나서 지오메트리와 재질을 이용해 평면 오브젝트를 만듭니다.<br /> - 만들고 나면 기본적으로 바닥에 깔린 모양이 아니라 <b><code>z</code>의 양방향</b>을 바라보는 서 있는 모습이 됩니다.<br /> - 따라서 <code>x</code>축으로 <code>-90</code>도 돌려줘야 합니다(<code>90</code>도를 생각했다면 오른손/왼손 좌표계를 공부하고 오세요!).<br /> - 돌릴 때에는 <b>라디안 단위</b>를 사용하므로 <code>THREE.MathUtils.degToRad()</code> 함수를 사용해야 합니다.<br /> + 만들고 나면 기본적으로 바닥에 깔린 모양이 아니라 <b><code>z</code>축의 (+)방향</b>을 바라보고 서 있는 모습이 됩니다.<br /> + 따라서 <code>x</code>축으로 <code>-90</code>도 돌려줘야 합니다.<br /> + 돌릴 때에는 <b>라디안 단위</b>를 사용하므로 <code>THREE.MathUtils.degToRad()</code> 함수를 사용해 도 단위로 변환해야 합니다.<br /> 그리고 씬에 넣어주면 바닥 완성입니다. </p> @@ -547,8 +548,8 @@ <p> 태양 오브젝트는 <code>constants</code>에서 정의한 기본 지오메트리 및 재질을 사용합니다.<br /> 보시면 램버트가 아닌 <b>베이직 재질</b>임을 알 수 있습니다.<br /> - 이유는 당연히 태양이 디렉셔널 라이트의 영향을 받으면 어두워지기 때문입니다.<br /> - 따라서 태양을 항상 원하는 색으로 지정하기 위해 베이직 재질을 사용합니다.<br /> + 이유는 당연히 태양이 디렉셔널 라이트의 영향을 받아버리면 빛을 못 받은 특정 부분이 어두워지기 때문입니다.<br /> + 따라서 태양을 항상 원하는 색으로 보이기 위해 베이직 재질을 사용합니다.<br /> 위치는 디렉셔널 라이트와 같은 위치로 합니다(<b>태양 = 디렉셔널 라이트</b>).<br /> 크기는 너무 작으면 안 되므로 <code>x</code>, <code>y</code>, <code>z</code> 모든 요소에 <code>40</code>을 곱해줍니다.<br /> 그리고 씬에 넣어주면 태양 오브젝트 완성입니다. @@ -575,8 +576,8 @@ </table> <p> 나무는 <code>for</code>문을 이용해서 만들어줍니다. 반복 수는 <code>constants</code>에서 설정한 나무 개수입니다.<br /> - 먼저 오브젝트 파일을 로드해야 하는데요, 먼저 <code>load()</code> 함수에 대해 알아봅시다.<br /> - <code>load()</code> 함수는 4개의 인자를 받는데요. + 이를 위해서는 먼저 오브젝트 파일을 로드해야 하는데, 먼저 <code>load()</code> 함수에 대해 알아봅시다.<br /> + <code>load()</code> 함수는 4개의 인자를 받습니다. </p> <ol> @@ -590,7 +591,7 @@ 우리는 1번과 2번만 사용하면 되므로 3번 4번은 무시하셔도 됩니다.<br /> 2번 함수의 경우 인자로 <code>tree</code>를 받죠? 이게 생성된 오브젝트입니다.<br /> 그런데 우리는 흰색 재질을 나무에 적용시키고 싶으므로 함수 내부에서 값을 수정해줍니다.<br /> - 위치는 x의 경우 <b>스마트</b>하게 머릿속으로 계산해낸 공식을 사용하시면 되고요.<br /> + 위치는 <code>x</code>의 경우 <b>스마트</b>하게 머릿속으로 계산해낸 공식을 사용하시면 되고요.<br /> <code>y</code>는 그대로 <code>0</code>, <code>z</code>는 <code>-100~100</code> 범위의 랜덤 값을 지정해줍니다(<code>Math.random()</code> 함수는 <code>-1~1</code> 범위의 랜덤 값을 반환합니다).<br /> 각도도 <code>y</code>축으로 <code>0~360</code>도 범위의 랜덤 값으로 지정합니다.<br /> 크기는 <code>100</code>을 곱해줍니다.<br /> @@ -600,8 +601,8 @@ <h3>2.9 업데이트 & 렌더 함수</h3> <p> - 그리고 실행을 위해 마지막으로 해줘야 할 것이 있죠. 바로 <code>animate()</code> 함수입니다.<br /> - 매 프레임마다 호출되는 그거요. + 그리고 실행을 위해 마지막으로 해줘야 할 것이 있죠.<br /> + 바로 매 프레임마다 호출되는 <code>animate()</code> 함수입니다. </p> <!-- 2장 업데이트 & 렌더 함수 코드 1 --> @@ -643,7 +644,7 @@ </table> <p> 업데이트 함수에서 스탯의 업데이트를 호출해줍시다.<br /> - 그래야 스탯이 매 프레임마다 정보를 보여줄 수 있습니다. + 그래야 스탯 영역에 매 프레임마다 정보를 보여줄 수 있습니다. </p> <!-- 2장 업데이트 & 렌더 함수 코드 1-2 --> @@ -658,7 +659,6 @@ </table> <p> 렌더 함수에서는 장면을 렌더합니다.<br /> - 간단하죠?<br /> <code>run()</code> 함수에서 생성 함수 호출 부분 바로 아래에 <code>animate()</code> 함수를 호출해주도록 합시다. </p> @@ -721,7 +721,7 @@ 3장에서는 <b>카메라 조작</b>을 구현하고, <b>GUI</b>를 추가해서 세부적인 사항을 조절할 수 있도록 할 겁니다.<br /> 사실 카메라의 경우 Three.js에서 <code>OrbitControls</code>라는 <del>날로먹는</del> 모듈을 제공해주기 때문에 굉장히 짧고 쉬울 예정입니다.<br /> <code>OrbitControls</code>에 대해 간단히 설명드리자면, 생성해서 카메라만 넣어주면 마우스로 카메라를 아주 손쉽게 조작할 수 있게 해주는 모듈입니다.<br /> - 피봇(<b>LookAt 위치</b>)을 중심으로 카메라를 이동시키므로 <code>OrbitControls</code>라는 이름이 붙은 듯 합니다. + 피봇(<b>LookAt 위치</b>)을 중심으로 궤도를 돌듯 카메라를 이동시키므로 <code>OrbitControls</code>라는 이름이 붙은 듯 합니다. </p> <h3>3.1 모듈</h3> @@ -744,7 +744,7 @@ <h3>3.2 상수와 GUI 변수</h3> <p> - 오르빗 컨트롤에 필요한 <b>상수</b>도 조금 추가해보도록 하겠습니다. + OrbitControls에 필요한 <b>상수</b>도 조금 추가해보도록 하겠습니다. </p> <!-- 3장 상수와 GUI 변수 코드 1 --> @@ -765,7 +765,7 @@ 이 셋을 아무 곳에나 추가해줍니다.<br /> 먼저 <code>orbitControlsMinDistance</code>는 최대한 가까이 갈 수 있는 카메라와 피봇 간의 거리입니다.<br /> <code>orbitControlsMaxDistance</code>는 반대로 최대한 멀리 갈 수 있는 카메라와 피봇 간의 거리입니다.<br /> - <code>defaultSunColor</code>는 이름만 봐도 알 수 있듯 태양 오브젝트의 색상입니다(<b>빛 색상과 혼동하지 말 것!</b>). + <code>defaultSunColor</code>는 이름만 봐도 알 수 있듯 태양 오브젝트의 색상입니다(<b>태양이 뿜어내는 빛 색상과 혼동하지 말 것!</b>). </p> <p> 다음으로 해야할 일은 GUI에 사용할 <b>변수</b>를 등록하는 겁니다.<br /> @@ -799,13 +799,13 @@ 각각이 무엇을 뜻하는지는 주석을 참고하세요. </p> - <h3>3.3 오르빗 컨트롤 생성</h3> + <h3>3.3 OrbitControls 생성</h3> <p> - 먼저 <b>오르빗 컨트롤</b>을 먼저 생성하고 GUI를 만들도록 하겠습니다.<br /> + 먼저 <b>OrbitControls</b>를 먼저 생성하고 GUI를 만들도록 하겠습니다.<br /> 가장 먼저 해야할 것은 역시 선언이겠죠? </p> - <!-- 3장 오르빗 컨트롤 생성 코드 1 --> + <!-- 3장 OrbitControls 생성 코드 1 --> <table> <tr> <td> @@ -819,7 +819,7 @@ 2장에서 했던 것처럼 생성 함수를 하나 만들어줍니다. </p> - <!-- 3장 오르빗 컨트롤 생성 코드 2 --> + <!-- 3장 OrbitControls 생성 코드 2 --> <table> <tr> <td> @@ -837,12 +837,12 @@ <p> 생성 시 카메라와 렌더러를 받습니다.<br /> 생성한 후에는 방금 전 <code>constants</code>에 추가한 두 상수를 각각의 최소 거리와 최대 거리에 대입해줍니다.<br /> - <code>enabled</code>는 오르빗 컨트롤을 사용할지 여부인데 저는 기본 값으로 <code>false</code>를 주었습니다.<br /> + <code>enabled</code>는 OrbitControls을 사용할지 여부인데 저는 기본 값으로 <code>false</code>를 주었습니다.<br /> 시작했을 땐 위를 바라보게 하기 위함입니다.<br /> - 여기서 중요한 부분이 있는데, 오르빗 컨트롤을 활성화하면 카메라는 반드시 오르빗 컨트롤에서 지정한 별도의 LookAt의 위치를 바라보게 됩니다.<br /> - 즉, 우리는 기본 값으로 <code>(0, 70, 0)</code>을 지정했지만 오르빗 컨트롤을 생성했기 때문에 카메라의 LookAt 값은 자동으로 <code>(0, 0, 0)</code>으로 바뀌어버렸습니다.<br /> + 여기서 중요한 부분이 있는데, OrbitControls을 활성화하면 카메라는 반드시 OrbitControls에서 지정한 별도의 LookAt의 위치를 바라보게 됩니다.<br /> + 즉, 우리는 기본 값으로 <code>(0, 70, 0)</code>을 지정했지만 OrbitControls을 생성했기 때문에 카메라의 LookAt 값은 자동으로 <code>(0, 0, 0)</code>으로 바뀌어버립니다.<br /> 그러므로 카메라의 LookAt 위치를 다시 기본 값으로 수정합니다.<br /> - 추가로 <code>createCamera()</code> 함수 내에서 LookAt 위치를 설정하는 구분은 지우셔도 됩니다. + 추가로 <code>createCamera()</code> 함수 내에서 LookAt 위치를 설정하는 구분은 이제 지우셔도 됩니다. </p> <h3>3.4 GUI 생성</h3> @@ -883,7 +883,7 @@ </table> <p> 뭔가 복잡하죠?<br /> - 세 가지의 명령을 한 번에 실행해서 그렇습니다. 한 번 나눠보죠. + 세 가지의 명령을 한 번에 실행해서 그렇습니다. 한 번 나눠봅시다. </p> <!-- 3장 GUI 생성 코드 3 --> @@ -897,7 +897,7 @@ <p> 이건 <code>General</code> 폴더에 색상을 설정할 수 있는 항목을 넣겠다는 뜻입니다.<br /> 인자로 <code>controls</code>와 <code>'backgroundColor'</code>를 넣은 것은 <code>controls.backgroundColor</code> 값이 여기에 영향을 받을 것이라는 의미입니다.<br /> - 이름을 꼭 똑같이 넣어줘야 에러가 나지 않습니다! + 참고로 이름을 꼭 똑같이 넣어줘야 에러가 나지 않습니다! </p> <!-- 3장 GUI 생성 코드 4 --> @@ -1011,11 +1011,11 @@ </table> <p> 카메라는 항목이 두 개입니다.<br /> - 먼저 <code>freeMove</code>인데요. 이걸 활성화하면 오르빗 컨트롤이 활성화됩니다.<br /> - 활성화라고 하니 당연히 체크박스겠죠? 체크박스는 슬라이더에서 최솟값과 최댓값 자리를 비우면 만들 수 있습니다.<br /> + 먼저 <code>freeMove</code>인데요. 이걸 활성화하면 OrbitControls이 활성화됩니다.<br /> + 활성화를 표현하기 위해서는 체크박스가 필요하고, 체크박스는 슬라이더에서 최솟값과 최댓값 자리를 비우면 만들 수 있습니다.<br /> 내용을 보면 일단 <code>true/false</code> 상관 없이 카메라의 위치를 기본 위치로 바꿉니다.<br /> 그리고 <code>true</code>라면 <b>LookAt 위치</b>를 원점으로, <code>false</code>라면 기본 위치로 바꿉니다.<br /> - 끝으로 오르빗 컨트롤의 <code>enabled</code> 값을 <code>value</code>로 설정해주면 끝!<br /> + 끝으로 OrbitControls의 <code>enabled</code> 값을 <code>value</code>로 설정해주면 끝입니다!<br /> 시야각의 경우 <code>40~80</code> 범위를 갖는 슬라이더이며 카메라의 <code>fov</code> 값 수정 후 <code>updateProjectionMatrix()</code> 함수를 호출해줍니다.<br /> 이걸 해 주지 않으면 바꿔도 변화가 없으므로 주의하세요.<br /> 이제 GUI도 끝났습니다. @@ -1051,13 +1051,13 @@ 영상 처리란 오브젝트를 전부 그린 버퍼를 <b>후처리(Post-processing)</b>하는 작업을 말합니다.<br /> 예를 들어 장면 전체를 흑백 화면으로 모니터에 출력하려면 어떻게 하면 될까요?<br /> 모든 오브젝트의 재질 색을 흑백으로 바꾸는 건 현명하지 않겠죠?<br /> - 그럼 그냥 컬러로 모든 오브젝트를 그리고 이후 그 렌더 타겟을 따로 빼서 흑백 처리를 해주면 어떨까요.<br /> - 그럼 더 효율적이겠죠? 이것이 영상 처리 기법입니다. + 그럼 그냥 컬러로 모든 오브젝트를 그리고, 이후 그 렌더 타겟을 따로 빼서 흑백 처리를 해주면 됩니다.<br /> + 이러한 일종의 이미지 필터링/가공 작업을 영상 처리라고 부릅니다. </p> <p> 라이트 셰프트를 구현하기 위해서는 장면의 모든 오브젝트가 그려진 렌더 타겟에서, 오브젝트가 없는 부분을 추출해야만 합니다.<br /> - 왜인지는 복잡하므로 지금 설명하지 않겠습니다. 6장까지 보시면 알 수 있습니다.<br /> - 따라서 우리는 새로운 렌더 타겟을 하나 만들고 거기에 모든 오브젝트를 그려야 합니다. + 왜인지는 빛 줄기를 표현하는 원리에서 알 수 있는데, 복잡하므로 지금은 설명하지 않겠습니다. 천천히 6장까지 보시면 알 수 있습니다.<br /> + 따라서 일단은 새로운 렌더 타겟을 하나 만들고 거기에 모든 오브젝트를 그려보는 것에 집중해 봅시다. </p> <h3>4.2 렌더 타겟 생성</h3> @@ -1102,14 +1102,14 @@ 깊이를 저장할 것이므로 형식은 <code>THREE.DepthFormat</code>으로 해줍니다.<br /> 타입은 버퍼의 자료형을 말합니다. 버퍼는 하나의 배열이므로 한 칸의 크기를 지정해줘야 합니다.<br /> 하지만 깊이는 별 거 없죠? 본래 <code>0~1</code> 범위의 값이므로 2바이트면 충분할 겁니다. 따라서 <code>THREE.UnsignedShortType</code>을 지정해줍니다.<br /> - 렌더 타겟이 완성되었습니다!<br /> + 이제 렌더 타겟이 완성되었습니다!<br /> 이 함수를 호출하는 것을 잊지 마세요. <code>createLights()</code> 함수 바로 아래에서 호출해주시면 됩니다.<br /> 그럼 이제 장면을 여기에 렌더하도록 바꿔봅시다. </p> <h3>4.3 렌더 타겟 변경</h3> <p> - 변경하는 방법도 엄청 쉽습니다.<br /> + 렌더 타겟을 변경하는 방법도 엄청 쉽습니다.<br /> <code>animate()</code> 함수의 <code>render()</code> 함수로 가봅시다. </p> @@ -1128,7 +1128,7 @@ <p> <code>render()</code> 함수 위 아래에 <code>setRenderTarget()</code> 함수를 호출해주면 됩니다.<br /> 인자는 각각 <code>originalRT</code>와 <code>null</code>인데요.<br /> - <code>originalRT</code>는 방금 만든 렌더 타겟이고, <code>null</code>은 기본 렌더 타겟입니다(알아서 그렇게 인식합니다).<br /> + <code>originalRT</code>는 방금 만든 렌더 타겟이고, <code>null</code>은 기본 렌더 타겟입니다(null을 넣어주면 알아서 그렇게 바꿔줍니다).<br /> 즉, <code>originalRT</code>에 렌더하고 렌더 후 기본 렌더 타겟으로 다시 되돌려놓는 겁니다.<br /> 되돌려 놓는 것이 필수는 아니지만 그렇게 해놓으면 깔끔하고 좋습니다. </p> @@ -1157,8 +1157,8 @@ <p> 맨 아래에 <code>originalRT</code>의 크기를 업데이트하도록 해주면 됩니다.<br /> 그럼 이제 실행해볼까요?<br /> - 네, 하나도 안 보이면 <b>정상</b>입니다!<br /> - 우린 방금 기본 렌더 타겟인 화면이 아닌 <code>originalRT</code>에 렌더링 했으니까요.<br /> + 네, 하나도 안 보이면 정상입니다.<br /> + 우린 방금 기본 렌더 타겟인 화면이 아닌 <code>originalRT</code>에 렌더링 했기 때문입니다.<br /> 궁금하면 <code>render()</code> 함수에서 <code>originalRT</code>로 렌더 타겟을 변경하는 줄을 주석 처리해보세요.<br /> 다시 잘 보이죠? </p> @@ -1181,7 +1181,7 @@ <summary><b>5장 튜토리얼 (펼치기/접기)</b></summary> <p> 5장부터는 꽤 어려워지기 시작합니다.<br /> - 아마 모르거나 처음 보는 내용이 많을 거예요.<br /> + 아마 모르거나 처음 보는 내용이 많을 겁니다.<br /> 일단 모듈부터 추가해보죠. </p> @@ -1203,28 +1203,28 @@ 첫 번재 것은 <b>이펙트 컴포저</b>라고하는 것인데요. 한 번에 여러 <b>패스</b>를 사용할 수 있도록 해줍니다.<br /> 여기서 잠깐, 패스부터 설명하겠습니다. 패스란 한 번의 <b>렌더링</b>을 뜻합니다.<br /> 예를 들어 4장에서 봤던 흑백 효과 적용을 예로 들어봅시다.<br /> - 이 경우 전체 장면을 <code>originalRT</code>같은 곳에 그리는 <b>1번 패스</b>가 있습니다.<br /> - 그 다음엔 <code>originalRT</code>를 요리조리 바꿔서 흑백으로 만드는 <b>2번 패스</b>가 있겠죠.<br /> - 이펙트 컴포저는 여기서 1번 패스 2번 패스를 이펙트 컴포저에 <b>등록한 순으로 실행</b>해주는 친구입니다.<br /> - 사실 여러 패스가 아니라 단일 패스더라도 이펙트 컴포저가 없으면 <code>ShaderPass</code>를 렌더하기 어렵습니다.<br /> + 이 경우 전체 장면을 <code>originalRT</code>에 그리는 <b>1번 패스</b>가 있습니다.<br /> + 그 다음엔 <code>originalRT</code>에 저장된 값을 요리조리 바꿔서 흑백으로 만드는 <b>2번 패스</b>가 있겠죠.<br /> + 이펙트 컴포저는 여기서 1번 패스 2번 패스를 이펙트 컴포저에 <b>등록한 순으로 실행</b>해주는 클래스입니다.<br /> + 사실 여러 패스가 아니라 단일 패스더라도 이펙트 컴포저가 없으면 <code>ShaderPass</code>를 렌더하기 번거롭고 어렵습니다.<br /> 두 번째 것은 <b>셰이더 패스</b>입니다. 정확히는 영상 처리용 패스라고 보는 것이 좋습니다.<br /> 여기서 또 다른 의문점이 해결됩니다. 위에서 언급한 흑백 효과를 잘 적용했다고 칩시다.<br /> - 그럼 그 <code>originalRT</code>에 흑백이 적용된 내용을 기본 렌더 타겟에 제대로 렌더해줘야 하지 않겠어요?<br /> - 하지만 어떻게 하죠? <code>originalRT</code>는 하나의 평면입니다. 삼각형 두 개가 만나있는 그 간단한 평면입니다.<br /> - 이걸 어떻게 해야 카메라 면전에 딱 맞게 들이밀 수 있을까요?<br /> - 바로 <b>화면에 정렬된 평면(Screen-aligned quad)</b>를 이용하는 겁니다.<br /> - 그 전에 먼저 <b>프로젝션 공간</b>을 이해해야 합니다. 사실 이해라 할 것도 없어요. + 그럼 그 <code>originalRT</code>에 흑백이 적용된 내용을 기본 렌더 타겟에 제대로 렌더해줘야 하지 않겠어요? 그래야 화면에 나오니까요.<br /> + 하지만 어떻게 할까요. <code>originalRT</code>는 텍스처로 사용할 수 있으니 삼각형 두 개가 만나있는 직사각형 오브젝트를 사용하면 될 듯 합니다.<br /> + 그런데 이걸 어떻게 해야 카메라의 시야에 딱 맞게 끼울 수 있을까요?<br /> + 정답은 <b>화면에 정렬된 평면(Screen-aligned quad)</b>를 이용하는 겁니다.<br /> + 그 전에 먼저 <b>프로젝션 공간</b>을 이해해야 합니다. </p> <p><img src="https://git.ajou.ac.kr/shh1473/cg-tutorial/-/raw/main/tutorial_data/pictures/references/projection_vs_uv.png" alt="Projection vs UV" title="Projection vs UV"></p> <p> 그림을 보면 아시다시피 프로젝션 공간은 왼쪽과 아래쪽 끝이 <code>-1</code>이고, 오른쪽과 위쪽 끝이 <code>1</code>입니다.<br /> - 그리고 버텍스 셰이더에서는 기본적으로 <b>월드 공간</b>에 있는 버텍스를 <b>프로젝션 공간</b>으로 변환시키죠.<br /> - 그럼 그냥 월드 공간의 위치가 <code>-1~1</code>로 된 평면을 버텍스 셰이더에서 뷰 행렬 및 프로젝션 행렬을 곱하지 않고 다이렉트로 넘기면 되는 거 아닐까요?<br /> - 그럼 월드 공간에서 <code>-1~1</code>이었던 버텍스가 프로젝션 공간에서도 그대로 <code>-1~1</code>이게 되고, 이건 화면에 꼭 맞는 평면인 거죠!<br /> - 예... 그래서 그걸 직접 하실 필요는 없고요. 우리 믿음직한 셰이더 패스 친구가 다 해준답니다.<br /> - 참고로 그림에 있는 <b>UV 공간</b>도 기억해두시기 바랍니다. 얘는 <code>-1</code>이 아니라 <code>0</code>부터 시작합니다. 6장에서 분명 다시 보게 될 거예요. + 그리고 버텍스 셰이더에서는 기본적으로 <b>로컬 공간</b>에 있는 버텍스를 <b>프로젝션 공간</b>으로 변환시키죠.<br /> + 그럼 그냥 로컬 공간의 위치가 <code>-1~1</code>로 된 평면을 버텍스 셰이더에서 뷰 행렬 및 프로젝션 행렬을 곱하지 않고 다이렉트로 넘기면 되는 거 아닐까요?<br /> + 그럼 로컬 공간에서 <code>-1~1</code>이었던 버텍스가 프로젝션 공간에서도 그대로 <code>-1~1</code>이게 되고, 이건 화면에 꼭 맞는 평면이 됩니다.<br /> + 물론 이걸 직접 할 필요는 없습니다. 방금은 원리를 설명한 것이고, 사실 셰이더 패스 클래스가 내부적으로 다 해줍니다.<br /> + 참고로 그림에 있는 <b>UV 공간</b>도 기억해두시기 바랍니다. 이건 <code>-1</code>이 아니라 <code>0</code>부터 시작합니다. 6장에서 다시 보게 될 겁니다. </p> <h3>5.2 가중치 렌더 타겟 생성</h3> @@ -1270,20 +1270,22 @@ 이제 5장에서 가장 어려운 파트입니다.<br /> <b>셰이더</b>를 직접 짜보는 것이죠.<br /> 만들 셰이더는 <code>originalRT</code>의 깊이 텍스처를 가지고 가중치를 계산하는 겁니다.<br /> - 대체 뭔 가중치일까요? 바로 <b>라이트 셰프트의 강도 가중치</b>입니다.<br /> - 이 가중치를 바탕으로 그 픽셀에 들어갈 라이트 셰프트의 강도가 정해집니다.<br /> - 그럼 이거부터 알아야겠네요. 장면의 어느 부분이 가장 가중치가 높을까요? 정답은 <b>오브젝트가 없는 부분</b>입니다.<br /> - 게임이나 현실에서 빛 줄기를 보면 어떻죠? 오브젝트가 없으면 완전 진하다가 오브젝트에 닿으면 점점 감쇄가 되죠?<br /> - 그래서 빛 줄기가 오브젝트가 없는 곳으로는 쭉 뻗어나가는 거죠. 오브젝트가 있다면 점점 감쇄되다가 이내 사라집니다.<br /> - 즉, 오브젝트가 없는 부분엔 특정 가중치를 주고, 없는 부분은 <code>0</code> 값이나 넣어버리면 되는 겁니다.<br /> - 어... 그러면 오브젝트가 있는지 없는지는 어떻게 알까요? <code>originalRT</code>를 보고 검은색은 오브젝트가 없다!로 치면 될까요?<br /> - 아니죠, 그러면 검은색을 가진 오브젝트는 있음에도 불구하고 없는 것으로 처리되고 맙니다.<br /> - 따라서 색상이 아닌 다른 무언가를 보고 오브젝트가 있는지 없는지를 판단해야해요.<br /> - 답은 바로 <b>깊이</b>입니다.<br /> + 이 가중치는 <b>라이트 셰프트의 강도</b>를 의미합니다.<br /> + 이를 바탕으로 그 픽셀에 들어갈 라이트 셰프트의 강도가 정해집니다.<br /> + 그럼 이제 장면의 어느 부분이 가장 가중치가 높을 지를 생각해 봅시다. 정답은 <b>오브젝트가 없는 부분</b>입니다.<br /> + 게임이나 현실에서 빛 줄기를 보면, 오브젝트가 없으면 완전 진하다가 오브젝트에 닿으면 점점 감쇄가 되는 걸 확인할 수 있습니다.<br /> + 그래서 빛 줄기는 오브젝트가 없는 곳으로는 쭉 뻗어나가게 됩니다. 가중치가 1에 가깝기 때문에 곱해도 본연의 값을 유지하기 때문입니다.<br /> + 그러다가 오브젝트를 만나면 점점 감쇄되다가 이내 사라집니다.<br /> + 즉, 오브젝트가 없는 부분엔 특정 가중치를 주고, 없는 부분은 <code>0</code>에 가까운 값으로 넣어버리면 됩니다.<br /> + 그러면 오브젝트가 있는지 없는지는 어떻게 알아낼까요? <code>originalRT</code>를 보고 검은색은 오브젝트가 없는 것으로 보면 될 듯 하지만 틀렸습니다.<br /> + 그런다면 검은색을 가진 오브젝트는 분명 존재함에도 불구하고 없는 것으로 처리되고 말 겁니다.<br /> + 따라서 색상이 아닌 다른 무언가를 보고 오브젝트가 있는지 없는지를 판단해야 합니다.<br /> + 그래서 우리가 사용할 값은 <b>깊이</b>입니다.<br /> 깊이 텍스처는 색상에 관계없이 오브젝트가 없으면 <code>1</code>, 있으면 카메라에 얼마나 가깝냐에 따라 <code>0~1</code>까지의 값을 넣어줍니다.<br /> - 이제 어떻게 해야할지 아시겠지요?<br /> - <code>originalRT</code>의 깊이 텍스처를 몰래 염탐해서 <code>1</code>이면 가중치를(흰색 또는 회색) 그리고, <code>1</code>이 아니면 <code>0</code>을(검은색)을 그려주면 됩니다.<br /> - 설명은 이만하고 코드부터 봅시다. + 카메라에 가까울수록 값은 <code>0</code>에 가까워집니다. 그럼 이제 어떻게 해야할지 아시겠나요?<br /> + <code>originalRT</code>의 깊이 텍스처 값을 추출해서 <code>1</code>이면 가중치를 그리고, <code>1</code>이 아니면 <code>0</code>을(검은색)을 그려주면 됩니다.<br /> + 그렇게 하면 가중치가 있는 부분은 오브젝트가 없는 것으로 표현할 수 있습니다.<br /> + 이제 설명은 그만하고 코드를 봅시다. </p> <!-- 5장 가중치 추출 셰이더 코드 1 --> @@ -1319,7 +1321,7 @@ </tr> </table> <p> - 문법은 엄청 복잡하지는 않습니다. 천천히 보도록 하죠. + 문법은 엄청 복잡하지는 않습니다. 천천히 보도록 하겠습니다. </p> <!-- 5장 가중치 추출 셰이더 코드 1-1 --> @@ -1334,7 +1336,7 @@ </table> <p> 먼저 <code>uniforms</code> 리스트는 <b>프로그램으로부터 받아올 오브젝트들의 모음집</b>입니다.<br /> - 셰이더는 GPU에서 실행되므로 이렇게 <code>uniforms</code>라는 가방에 담아서 넘겨줘야 셰이더 내에서 사용할 수 있습니다.<br /> + 셰이더는 GPU에서 실행되므로 이렇게 <code>uniforms</code>라는 구조에 담아서 넘겨줘야 셰이더 내에서 사용할 수 있습니다.<br /> 지금같은 경우는 <code>originalRT</code>의 깊이 텍스처인 <code>depthMap</code>을 넘겨줍니다. <code>value</code>는 값을 설정하지 않았을 때의 기본 값입니다. </p> @@ -1354,13 +1356,12 @@ </table> <p> 다음은 <b>버텍스 셰이더</b>입니다.<br /> - 아까 셰이더 패스가 알아서 화면에 꼭 맞는 평면을 준비해준다고 했죠?<br /> - 그러므로 여기서 할 일은 없습니다.<br /> - 포지션에 뷰/프로젝션 행렬을 곱해줄 필요가 없다는 뜻입니다. 그대로 <code>gl_Position</code>에 4차원 벡터화해서 대입해줍니다.<br /> + 아까 셰이더 패스가 알아서 화면에 꼭 맞는 평면을 준비해준다고 했기 때문에, 여기서 할 일은 딱히 없습니다.<br /> + 포지션에 뷰/프로젝션 행렬을 곱해줄 필요가 없다는 뜻입니다. 그러므로 그대로 <code>gl_Position</code>으로 4차원 벡터로 변환해 대입해줍니다.<br /> 다만 프래그먼트 셰이더에서 <code>depthMap</code>을 추출해야하므로 <code>texCoord</code>라는 UV 값도 그대로 넘겨줍니다.<br /> <code>texCoord</code>의 앞에 <code>varying</code> 키워드가 있어야 프래그먼트 셰이더로 값을 넘겨줄 수 있습니다.<br /> - 프래그먼트 셰이더로 값이 넘어간다는 말은, 그 값은 반드시 <b>래스터라이제이션</b>이 된다는 의미입니다.<br /> - 즉, 이제 픽셀(프래그먼트) 하나하나가 버텍스에 따라 보간된 <b>고유한 <code>texCoord</code> 값</b>을 갖게 됩니다. + 프래그먼트 셰이더로 값이 넘어간다는 말은, 그 값은 반드시 <b>래스터화</b>가 된다는 의미입니다.<br /> + 즉, 이제 프래그먼트 하나하나가 버텍스에 따라 보간된 <b>고유한 <code>texCoord</code> 값</b>을 갖게 됩니다. </p> <!-- 5장 가중치 추출 셰이더 코드 1-3 --> @@ -1387,14 +1388,14 @@ 추가로 <code>uniforms</code>에서 왔다는 의미로 <code>uniform</code> 키워드를 붙여서 선언해야 합니다.<br /> 함수를 보면 간단합니다. <code>texture2D()</code> 함수를 이용해 깊이 텍스처로부터 값을 추출합니다.<br /> 추출한 결과의 자료형은 RGBA를 모두 갖고 있으므로 <code>vec4</code>가 됩니다.<br /> - 하지만 우리가 필요한 것은 흰색이냐 아니냐죠? 아까 오브젝트가 없는 부분이 흰색이라고 했으니까요.<br /> - 그렇다면 굳이 RGBA 값을 다 볼 필요가 없죠? 흰색이면 RGB 값이 모두 똑같으니 말이죠.<br /> + 하지만 우리에게 필요한 것은 흰색이냐 아니냐입니다. 아까 오브젝트가 없는 부분이 흰색이라고 했기 때문입니다.<br /> + 그렇다면 굳이 RGBA 값을 다 볼 필요가 없습니다. 흰색이면 RGB 값이 모두 똑같기 때문에 하나만 봐도 됩니다.<br /> 그러므로 <code>.x</code>를 붙여서 빨간색만 가져옵시다. <code>vec4</code>가 <code>float</code>으로 줄었으니 편하군요.<br /> 이제 추출한 <code>depth</code> 값이 <code>1</code>인지 검사합니다. 삼항 연산자를 사용하면 좋습니다.<br /> 저는 오브젝트가 없다면 <code>0.3</code>을 주었습니다.<br /> - 예상 외로 조금 약하죠? 하지만 이보다 커지면 라이트 셰프트가 너무 강해지게 됩니다.<br /> - 마지막으로 <code>gl_FragColor</code>에 <code>weight</code> 값으로 이뤄진 <code>vec4</code>를 던져주면 됩니다.<br /> - 아마 검은색과 어두운 회색이 섞인 느낌의 텍스처가 탄생할 듯 합니다.<br /> + 조금 약한 듯 싶지만, 이보다 커지면 라이트 셰프트가 너무 강해지게 됩니다.<br /> + 마지막으로 <code>gl_FragColor</code>에 <code>weight</code> 값으로 이뤄진 <code>vec4</code>를 대입하면 됩니다.<br /> + 아마 검은색과 어두운 회색이 섞인 느낌의 텍스처가 탄생할 겁니다.<br /> 조금 힘들었지만 어떻게든 셰이더를 짜냈습니다!<br /> 이제 이걸 사용해줄 패스와 이펙트 컴포저를 생성하러 가봅시다. </p> @@ -1440,10 +1441,10 @@ 먼저 <b>이펙트 컴포저</b>부터 만듭니다.<br /> 인자로 렌더러와 렌더 타겟을 받습니다. 만약 렌더 타겟을 넣지 않는다면 기본 렌더 타겟으로 설정됩니다.<br /> 정확히는 <code>renderToScreen</code>을 <code>false</code>로 해줘야만 <code>weightRT</code>에 렌더하게 됩니다.<br /> - 이걸 <code>false</code>로 하지 않으면 <b>무조건 기본 렌더 타겟에 렌더</b>하므로 주의하세요!<br /> + 이걸 <code>false</code>로 하지 않으면 <b>무조건 기본 렌더 타겟에 렌더</b>하므로 주의하기 바랍니다.<br /> 다음은 <b>패스</b>입니다. 셰이더 패스는 인자로 <b>셰이더 코드</b>를 받습니다.<br /> - 우리가 정성스레 빚은 셰이더 코드를 전해줍시다.<br /> - 이후 <code>uniforms</code>도 채워줘야 합니다. 아까 제가 셰이더에 들고갈 가방이라고 말했죠?<br /> + 우리가 정성스레 쓴 셰이더 코드를 전해줍시다.<br /> + 이후 <code>uniforms</code>도 채워줘야 합니다. 여기에 넣은 값은 셰이더에 전달되어 그대로 사용됩니다.<br /> <code>depthMap</code>에 <code>originalRT</code>의 깊이 텍스처를 넣어주면 됩니다.<br /> 그리고 이펙트 컴포저에 패스를 추가하면 끝입니다.<br /> 이 함수는 <code>createRenderTargets()</code> 함수 아래에서 호출하도록 해주시면 되겠습니다. @@ -1471,12 +1472,11 @@ </tr> </table> <p> - 맨 아래에 <code>weightComposer</code>의 크기를 업데이트하도록 만들어주세요.<br /> + 맨 아래에 <code>weightComposer</code>의 크기를 업데이트하도록 만들어줘야 합니다.<br /> <code>weightRT</code>를 직접 조절하지 않아도 <code>weightComposer</code>의 <code>setSize()</code> 함수를 사용하면 알아서 크기가 바뀝니다.<br /> - 이제 실행하면 어떻게 될까요?<br /> - 역시나 아무것도 보이지 않습니다. 어떻게 볼 수 있는 방법이 있을까요?<br /> - 답은 아주 간단합니다. 이펙트 컴포저 생성 부분에서 <code>renderToScreen</code>을 <code>false</code>로 하는 줄을 <b>주석</b>처리하면 됩니다.<br /> - 그럼 이제 가중치 텍스처를 볼 수 있습니다! + 실행해보면, 역시나 아무것도 보이지 않습니다. 어떻게든 볼 수 있는 방법이 있을까요?<br /> + 보고 싶다면 이펙트 컴포저 생성 부분에서 <code>renderToScreen</code>을 <code>false</code>로 하는 줄을 <b>주석</b>처리하면 됩니다.<br /> + 그럼 이제 가중치 텍스처를 볼 수 있게 됩니다. </p> <p> 확인했으면 4장 처럼 다시 되돌리는 것을 잊지 맙시다.<br /> @@ -1519,7 +1519,7 @@ </tr> </table> <p> - 이렇게 세 개를 넣어주세요.<br /> + 이렇게 세 개를 넣어줍시다.<br /> 빛 줄기의 길이와 색, 길이 배수입니다.<br /> 길이 배수는 나중에 설명하도록 하겠습니다.<br /> 다음은 <b>컨트롤 변수</b>를 추가합시다. @@ -1553,14 +1553,14 @@ <p> 보면 태양으로부터 멀어질수록, 특히 오브젝트에 가려질수록 빛 줄기가 약해집니다.<br /> - 빛 줄기의 강도는 당연히 프래그먼트 셰이더에서 계산해야겠지요?<br /> - 그런데 프래그먼트 셰이더의 호출 단위는 프래그먼트, 즉 화면의 <b>픽셀당 한 번씩 실행</b>된다고 보시면 됩니다.<br /> + 빛 줄기의 강도는 당연히 프래그먼트 셰이더에서 계산해야 합니다.<br /> + 그런데 프래그먼트 셰이더의 호출 단위는 프래그먼트, 즉 화면의 <b>픽셀당 한 번씩 실행</b>된다고 보면 됩니다.<br /> 그럼 맨 아래쪽에 빛 줄기가 거의 닿지 않는 나무 부분을 봅시다.<br /> - 이 녀석은 어떻게 자기가 자신보다 위에 있는 나뭇가지에 가려져있다는 사실을 알까요?<br /> - 답은 바로 <b>현재 픽셀로부터 태양까지의 거리 벡터</b>를 이용하는 겁니다.<br /> - 그 다음 구한 거리 벡터를 일정한 양으로 나눠서 그 나눠진 수만큼 각각 가중치 맵에서 가중치를 꺼냅니다.<br /> + 이 프래그먼트는 어떻게 자기가 자신보다 위에 있는 나뭇가지에 가려져있다는 사실을 알까요?<br /> + 이는 <b>현재 픽셀로부터 태양까지의 거리 벡터</b>를 이용하면 됩니다.<br /> + 그 다음 구한 거리 벡터를 일정한 양으로 나눈 뒤, 그 나눠진 수만큼 각각 가중치 맵에서 가중치를 꺼냅니다.<br /> 그렇게 꺼낸 각각의 가중치에 점점 커지는 감쇄를 적용한 후, 그 값들을 모두 더해버리면 그게 그 픽셀의 빛 줄기의 양이 됩니다.<br /> - 예...말로 설명하면 확실히 이해하기 난해하죠.<br /> + 역시 말로 설명하면 이해하기 난해하죠.<br /> 그래서 또 그림을 준비해봤습니다. </p> @@ -1570,8 +1570,7 @@ 자, 여러분이 추출한 <b>가중치 텍스처</b>입니다.<br /> <code>stepCount</code>는 방금 말했던 픽셀로부터 태양까지의 나눠진 수를 의미합니다.<br /> 그리고 그 스텝마다 가중치를 뽑아서 조금씩 늘어나는 감쇄량을 적용한 뒤 누적합니다.<br /> - 슬슬 이해가 되시나요?<br /> - 그럼 이제 셰이더를 작성해봅시다! + 슬슬 이해가 되시는지 모르겠지만, 일단 셰이더를 작성해봅시다. </p> <!-- 6장 라이트 셰프트 셰이더 코드 1 --> @@ -1643,8 +1642,8 @@ </tr> </table> <p> - 꽤 길죠?<br /> - 하나하나 살펴봅시다. + 꽤 깁니다.<br /> + 하나하나 차근차근 살펴봅시다. </p> <!-- 6장 라이트 셰프트 셰이더 코드 1-1 --> @@ -1666,7 +1665,7 @@ <code>origianlRTMap</code>은 계산한 빛 줄기와 <b>실제 렌더된 장면</b>을 합치기 위해 필요합니다.<br /> <code>weightRTMap</code>은 빛 줄기의 강도를 계산할 때 사용할 <b>가중치</b> 텍스처입니다.<br /> <code>lightPosition</code>은 <b>태양의 UV 공간 위치</b>입니다. 태양과 픽셀 사이의 벡터를 따라 가중치 텍스처를 추출하려면 꼭 필요합니다.<br /> - <code>rayColor</code>는 <b>빛 줄기의 색상</b>이고요.<br /> + <code>rayColor</code>는 <b>빛 줄기의 색상</b>입니다.<br /> <code>stepCount</code>는 위에서 말한 벡터의 <b>분할 횟수</b>입니다. </p> @@ -1685,7 +1684,7 @@ </tr> </table> <p> - 휴, 그나마 버텍스 셰이더는 이전이랑 똑같습니다. + 그나마 버텍스 셰이더는 이전이랑 똑같습니다. </p> <!-- 6장 라이트 셰프트 셰이더 코드 1-3 --> @@ -1755,8 +1754,8 @@ </table> <p> 먼저 픽셀로부터 태양까지의 벡터를 구하는데요.<br /> - 미리 <code>lightPosition</code>을 <b>UV 공간으로 변환</b>시켜서 넣어줬기 때문에 같은 공간에 있는 <code>texCoord</code>와 빼기 연산을 통해 거리 벡터를 구할 수가 있습니다.<br /> - 사실 아직 <code>lightPosition</code>을 변환하는 코드는 작성하지 않았죠? 나중에 작성하면 됩니다.<br /> + 미리 <code>lightPosition</code>을 <b>UV 공간으로 변환</b>시켜서 넣어줬기 때문에 같은 공간에 있는 <code>texCoord</code>와 빼기 연산을 통해 거리 벡터를 구할 수 있습니다.<br /> + 사실 아직 <code>lightPosition</code>을 변환하는 코드는 작성하지 않았습니다. 이는 나중에 작성하면 됩니다.<br /> <code>lengthToLight</code> 값을 <code>length()</code> 함수를 통해 구합니다. 이 함수는 GLSL에서 기본으로 제공하는 함수입니다.<br /> <code>dirToLight /= lengthToLight</code>는 <code>dirToLight</code> 벡터를 <b>정규화(normalization)</b>합니다. </p> @@ -1770,19 +1769,17 @@ </tr> </table> <p> - 다음은 <code>deltaLength</code>인데요.<br /> - 일단 <code>float(stepCount - 1)</code>에서 <code>1</code>을 빼주는 이유가 뭘까요?<br /> - 왜냐하면 추출은 <b>픽셀의 위치부터 시작</b>하기 때문입니다.<br /> - 예를 들어 <code>stepCount</code>가 16일 때, 추출은 16번 반복하겠죠?<br /> + 다음은 <code>deltaLength</code>입니다.<br /> + 일단 <code>float(stepCount - 1)</code>에서 <code>1</code>을 빼주는 이유는, 추출은 <b>픽셀의 위치부터 시작</b>하기 때문입니다.<br /> + 예를 들어 <code>stepCount</code>가 16일 때, 추출은 16번 반복할 겁니다.<br /> 그럼 원점을 추출하면 반복 수가 <code>15</code>번이 남게 됩니다.<br /> 여기서 <code>1</code>을 빼지 않은 16으로 벡터를 나누게 되면, 반복당 <code>1/16</code>만큼 앞으로 나아가게 됩니다.<br /> - 그럼 남은 15번의 반복을 끝냈을 때 최종 위치가 <code>16/16</code>이 아닌 <code>15/16</code>이 되어버리고 말아요.<br /> + 그럼 남은 15번의 반복을 끝냈을 때 최종 위치가 <code>16/16</code>이 아닌 <code>15/16</code>이 되어버리고 맙니다.<br /> 따라서 태양의 위치까지 닿으려면 <code>1</code>을 빼주는 것이 맞습니다.<br /> - 그 다음으로는 <code>min()</code> 함수가 보이네요.<br /> - 왜 굳이 <code>0.005</code>보다 크면 <code>0.005</code>로 고정시켜주는 걸까요?<br /> + 그 다음으로는 <code>min()</code> 함수가 보이는데, 왜 굳이 <code>0.005</code>보다 크면 <code>0.005</code>로 고정시켜주는 걸까요?<br /> 왜냐하면 추출 간격이 너무 넓어지면(<code>stepCount</code> 값이 너무 작아지면) <b>빛 줄기의 강도가 퍼지기 때문</b>입니다.<br /> 그래서 최소한의 간격으로 <code>0.005</code>를 지정해주었습니다.<br /> - 이렇게 하면 태양까지 닿지 않을 수도 있지만, 빛 줄기가 퍼져서 이상한 모습을 보는 일은 없습니다.<br /> + 이렇게 하면 태양까지 닿지 않을 수도 있지만, 적어도 빛 줄기가 퍼져서 이상한 모습을 보는 일은 없습니다.<br /> 추가로 <code>float(stepCount - 1)</code> 없이 그냥 <code>0.005</code>로 고정시켜버리면 어떻게 될까요?<br /> 태양과 너무 가까운 거리에 있는 픽셀도 <code>0.005</code>라는 큰 숫자를 받기 때문에 태양 위치에서 <b>빛이 모이는 듯한 현상</b>이 일어납니다.<br /> 따라서 <code>min()</code> 함수를 사용한 이유는 태양과의 거리에 따라 <b>적당히 좋은</b> 간격을 지정해주기 위함이라고 생각하시면 편합니다. @@ -1809,9 +1806,9 @@ <code>texCoord</code> 값을 수정하면 현재 픽셀이 아닌 다른 픽셀 위치에도 접근할 수 있다는 사실을 기억하세요.<br /> 마찬가지로 가중치 값은 흑백이기 때문에 RGB 값이 모두 같아서 <code>x</code>값만 가져옵니다.<br /> 이후엔 다음 지점으로 가고, 누적하고, 감쇄량을 업데이트합니다.<br /> - 여기서 잠깐, 감쇄량의 기본 값을 보면 <code>0.2</code>죠?<br /> + 여기서 잠깐, 감쇄량의 기본 값을 보면 <code>0.2</code>입니다.<br /> 즉, 계산된 강도의 <code>20%</code>만 누적하겠다는 뜻입니다.<br /> - 분명 가중치도 <code>0.3</code>으로 지정했으니 곱하면 <code>0.06</code>씩 누적되겠군요. 상당히 작습니다.<br /> + 분명 가중치도 <code>0.3</code>으로 지정했으니 곱하면 <code>0.06</code>씩 누적될 겁니다. 상당히 작습니다.<br /> 근데 최종 감쇄 증가량을 보면 <code>0.8</code>입니다. <code>0.2</code>보다 큰 이유는 태양과의 거리에 따라 감쇄 추가량이 달라지기 때문입니다.<br /> 쓰고 보니 조금 복잡한데, 일단은 기본 감쇄량이 <code>0.2</code>이고 최종 감쇄량이 <code>0.8</code>일 때 제일 좋은 결과가 나와서 저는 그렇게 고정했습니다. </p> @@ -1830,7 +1827,7 @@ 그리고 원래 장면에 더하는데요, 곱하지 않고 더하는 이유가 뭘까요?<br /> 빛 줄기는 원래 장면에 추가되어 씌워지는 값이기 때문입니다.<br /> 이 경우 값이 <code>1.0</code>을 넘어갈 수 있기 때문에 <code>clamp()</code> 함수로 <code>0~1</code> 범위로 맞춰줍니다.<br /> - 이후 최종 결과 값을 출력하면 셰이더 완성! + 이후 최종 결과 값을 출력하면 셰이더가 완성됩니다! </p> <h3>6.3 패스 생성</h3> @@ -1850,9 +1847,8 @@ </table> <p> 이렇게 두 개를 추가해줍니다.<br /> - 어, <code>weightComposer</code>에 <code>lightShaftPass</code>를 추가해주면 안 될까요?<br /> - 안 됩니다. 컴포저는 <b>하나의 렌더 타겟</b>만 받는 것 같더라고요.<br /> - 가중치 추출할 때 보셨겠지만 렌더 타겟이 <code>weightRT</code>였죠?<br /> + <code>weightComposer</code>에 <code>lightShaftPass</code>를 추가해주는 건 안 됩니다.<br /> + 해보니 컴포저는 <b>하나의 렌더 타겟</b>만 받는 것 같습니다.<br /> <code>lightShaftPass</code>는 기본 렌더 타겟에 그릴 것이기 때문에 따로 컴포저를 만들어줘야 합니다.<br /> 이제 <code>createPasses()</code> 함수로 갑니다. </p> @@ -1881,7 +1877,8 @@ <code>uniforms</code>의 요소를 넣어주는 걸 보면 <code>lightPosition</code>의 경우 그냥 영벡터를 넣어줍니다.<br /> 이유는 어차피 <b>매 프레임마다 바꿔줘야하기 때문</b>입니다.<br /> 태양의 UV 공간 위치는 카메라가 움직일 때, 태양 자체를 움직일 때 등 여러 변수에 의해 바뀔 수 있으니까요.<br /> - <code>stepCount</code>는 상수에서 정의한 기본 빛 줄기 길이 배수를 곱한 다음 반올림해서 넘겨줍니다. 셰이더에서 사용하는 <code>stepCount</code>는 <code>int</code>형이니까요.<br /> + <code>stepCount</code>는 상수에서 정의한 기본 빛 줄기 길이 배수를 곱한 다음 반올림해서 넘겨줍니다.<br /> + 셰이더에서 사용하는 <code>stepCount</code>는 <code>int</code>형이니까요.<br /> 다 끝나면 역시 이펙트 컴포저에 추가해줍니다. </p> @@ -1933,14 +1930,13 @@ 디렉셔널 라이트의 위치를 복사한 <code>uvSunPosition</code> 벡터의 <code>project()</code> 함수를 실행해줍니다.<br /> 그러면 이제 <code>uvSunPosition</code> 벡터는 프로젝션 공간인 <code>-1~1</code> 범위에 위치하게 됩니다.<br /> 하지만 <b>UV 공간</b>으로 보내는 과제가 남았습니다. 어떻게 하면 될까요?<br /> - 머릿속으로도 계산 가능할만큼 간단합니다.<br /> - 각 요소에 <code>1</code> 더하고 반으로 나누면 땡입니다. 그럼 알아서 <code>0~1</code> 범위로 맞춰지겠죠?<br /> + 각 요소에 <code>1</code> 더하고 반으로 나누면 끝입니다. 그럼 알아서 <code>0~1</code> 범위로 맞춰집니다.<br /> 이후 <code>uniforms</code>에 직접 수정해주면 완성입니다. </p> <h3>6.5 렌더 순서</h3> <p> - 그럼 <code>render()</code> 함수도 손 좀 봐야겠죠? + 그럼 <code>render()</code> 함수도 조금 고쳐봅시다. </p> <!-- 6장 렌더 순서 코드 1 --> @@ -1962,7 +1958,7 @@ 맨 밑줄에 <code>lightShaftComposer.render(scene, camera);</code>를 추가해주면 됩니다.<br /> 순서가 굉장히 중요하다는 점 꼭 기억해두시기 바랍니다.<br /> <code>weightComposer</code>는 <code>originalRT</code> 깊이 텍스처가 필요하고<br /> - <code>lightShaftComposer</code>는 <code>originalRT</code>와 <code>weightRT</code>가 모두 필요합니다! + <code>lightShaftComposer</code>는 <code>originalRT</code>와 <code>weightRT</code>가 모두 필요합니다. </p> <h3>6.6 GUI 추가</h3> @@ -1989,7 +1985,6 @@ </table> <p> 이렇게 <code>createGUI()</code> 함수에 추가해주세요.<br /> - 의미는 설명 안 해도 알겠죠? </p> <h3>6.7 자동 크기 조절</h3> @@ -2015,7 +2010,7 @@ </table> <p> 맨 아랫줄에 추가해주세요.<br /> - 휴... 드디어 다 했습니다. 실행하셔도 됩니다. + 드디어 다 했습니다. 이제 실행하셔도 됩니다. </p> <p> 빛 줄기가 잘 보이나요?<br /> @@ -2035,8 +2030,8 @@ <details> <summary><b>7장 튜토리얼 (펼치기/접기)</b></summary> <p> - 자, 7장부터는 옵션입니다.<br /> - 그러니까 해도 되고 안 해도 됩니다.<br /> + 7장부터는 옵션입니다.<br /> + 그러므로 해도 되고 안 해도 됩니다.<br /> 추가할 기능은 다음과 같습니다. </p> @@ -2093,7 +2088,7 @@ <h3>7.2 움직임 GUI 추가</h3> <p> <b>체크박스</b>를 만들어봅시다.<br /> - 바꿔줄 게 딱히 없어서 코드가 매우 짧아요. + 바꿔줄 게 딱히 없어서 코드가 매우 짧습니다. </p> <!-- 7장 움직임 GUI 추가 코드 1 --> @@ -2111,19 +2106,17 @@ </table> <p> 이렇게 두 줄만 넣어주시면 됩니다.<br /> - <code>onChange()</code> 함수도 필요 없어요. + <code>onChange()</code> 함수도 필요 없습니다. </p> <h3>7.3 움직임 로직 구현</h3> <p> - 자, 이제 <code>update()</code> 함수에 로직을 넣어봅시다.<br /> - 왔다갔다 하는 데 가장 좋은 함수는 역시 <code>sin()</code> 함수겠죠?<br /> - 그럼 안에 넣을 누적 각도 값이 필요합니다.<br /> - 누적 없이 그냥 넣으면 컴퓨터 성능에 따라 이동 속도가 천차만별이 되어버려요.<br /> - 그럼 컴퓨터 사양에 관계없이 일정한 것은 무엇일까요? 바로 시간입니다.<br /> + 이제 <code>update()</code> 함수에 로직을 넣어봅시다.<br /> + 왔다갔다 하는 데 가장 좋은 함수는 역시 <code>sin()</code> 함수입니다.<br /> + 그럼 안에 넣을 누적 각도 값이 필요한데, 누적 없이 그냥 넣으면 컴퓨터 성능에 따라 이동 속도가 천차만별이 되어버립니다.<br /> <code>const clock = new THREE.Clock();</code> - <code>run()</code> 함수 위에 이렇게 추가해주세요.<br /> - 이게 있으면 이제 시간을 잴 수 있습니다. + <code>run()</code> 함수 위에 이렇게 추가합시다.<br /> + 이게 있으면 이제 시간을 잴 수 있고, 컴퓨터 성능에 상관없이 시간을 이용해 속도를 조절할 수 있습니다. </p> <!-- 7장 움직임 로직 구현 코드 1 --> @@ -2136,7 +2129,7 @@ </tr> </table> <p> - 누적 시간 변수도 추가해주시고요.<br /> + 누적 시간 변수도 추가해줍시다.<br /> 이제 <code>update()</code> 함수로 갑니다. </p> @@ -2181,13 +2174,13 @@ </tr> </table> <p> - 먼저 보이는 건 이거군요. <code>getDelta()</code> 함수가 뭘까요?<br /> + 먼저 보이는 <code>getDelta()</code> 함수는 뭘까요?<br /> <code>getDelta()</code> 함수는 마지막으로 <code>getDelta()</code> 함수가 실행됐을 때부터 방금 호출한 때까지의 <b>걸린 시간</b>을 반환합니다.<br /> - 즉, 지금 이 친구가 반환하는 값은 이전 프레임으로부터 지금 프레임까지의 걸린 시간이 되겠군요!<br /> - 이걸 왜 쓸까요? 이게 있어야 <b>컴퓨터 사양에 관계없이 동일한 속도</b>로 오브젝트를 움직일 수 있기 때문입니다.<br /> + 즉, 지금 이 함수가 반환하는 값은 이전 프레임으로부터 지금 프레임까지의 걸린 시간입니다.<br /> + 이게 있어야 <b>컴퓨터 사양에 관계없이 동일한 속도</b>로 오브젝트를 움직일 수 있습니다.<br /> 예를 들어 1초 동안 <code>getDelta()</code> 함수의 값을 누적했다고 합시다.<br /> A의 컴퓨터는 그 1초 동안 60프레임이, B의 컴퓨터는 30프레임이 나왔습니다.<br /> - 하지만 누적 값은 같습니다. A는 1/60 값이 60번 더해졌을 것이고, B는 1/30 값이 30번 더해졌을 테니까요.<br /> + 하지만 누적 값은 같습니다. A는 1/60 값이 60번 더해졌을 것이고, B는 1/30 값이 30번 더해졌을 것이기 때문입니다.<br /> 지금은 이해가 안 간다고 해도 직접 쓰는 걸 보면 이해가 갈 겁니다. </p> @@ -2210,10 +2203,10 @@ <p> <code>autoSunMove</code>가 활성화되었을 때만 작동합니다.<br /> 그리고 <code>x</code>위치 값을<code>Math.sin(sunTime)</code>에<code>500</code>을 곱해서 설정합니다.<br /> - 이러면 이제 <code>x</code>위치 값은<code>-500~500</code> 범위를 왔다갔다 하겠죠?<br /> - 이후엔 <code>sunTime</code>에<code>deltaTime</code>을 더합니다. 추가로 속도 값을 곱해서요.<br /> - 이러면 <code>sunTime</code>값은 실제 시간 1초가 지났을 때 무조건<code>1</code>이 됩니다. 10초가 지나면<code>10</code>이 되고요.<br /> - 하지만 라디안은 <code>PI * 2</code>부터 다시 원점으로 돌아오죠?<br /> + 이러면 이제 <code>x</code>위치 값은<code>-500~500</code> 범위를 왔다갔다 할 겁니다.<br /> + 이후엔 <code>sunTime</code>에<code>deltaTime</code>을 더합니다(추가로 속도 값을 곱합니다).<br /> + 이러면 <code>sunTime</code>값은 실제 시간 1초가 지났을 때 무조건<code>1</code>이 됩니다. 10초가 지나면<code>10</code>이 됩니다.<br /> + 하지만 라디안은 <code>PI * 2</code>부터 다시 원점으로 돌아온다는 특징이 있습니다.<br /> 그래서 삼항 연산자를 사용해 <code>0~(PI * 2)</code> 범위에 있도록 만들어줬습니다. </p> @@ -2237,13 +2230,13 @@ </p> <p> 이제 실행해보세요.<br /> - 체크박스를 조작하면 태양과 카메라가 잘 움직이나요? + 체크박스를 조작하면 태양과 카메라가 잘 움직일 겁니다. </p> <h3>7.4 프리셋 GUI 추가</h3> <p> 이제 프리셋 기능을 만들어봅시다.<br /> - 먼저 변수 하나를 넣어줘야해요. + 먼저 변수 하나를 넣어줘야합니다. </p> <!-- 7장 프리셋 GUI 추가 코드 1 --> @@ -2373,8 +2366,7 @@ </table> <p> 이제 GUI 항목을 각각 추가해주세요.<br /> - 많죠? 제가 다 하나하나 정한 값들입니다.<br /> - 이걸 보면 <code>changePreset()</code> 함수 만들길 잘했다는 생각이 들 겁니다. + 색상 값들은 제가 다 하나하나 정한 값들입니다.<br /> </p> <h3>7.5 프리셋 로직 구현</h3> @@ -2412,14 +2404,14 @@ </table> <p> 태양 움직이는 로직하고 약간 비슷하면서 다릅니다.<br /> - <code>cos()</code> 함수의 결과에 <code>1</code>을 더하는군요. 그럼 범위가 <code>0~2</code>가 되겠죠?<br /> + <code>cos()</code> 함수의 결과에 <code>1</code>을 더합니다. 그럼 범위가 <code>0~2</code>가 됩니다.<br /> 이걸 반으로 나누면 다시 <code>0~1</code> 범위로 좁혀집니다.<br /> - 색상의 경우 <b>음수로 떨어질 수 없기 때문</b>에 이렇게 한 거예요.<br /> + 색상의 경우 <b>음수로 떨어질 수 없기 때문</b>에 이렇게 한 겁니다.<br /> 그렇게 나온 값을 색상의 각 요소에 곱하면 끝입니다.<br /> - 나머지는 움직임 로직과 같아요. 다만 속도를 지정하지 않아서 <code>PI * 2</code>초마다 한 싸이클이 반복됩니다. + 나머지는 움직임 로직과 같습니다. 다만 속도를 지정하지 않아서 <code>PI * 2</code>초마다 한 싸이클이 반복됩니다. </p> <p> - 이제 실행해보세요. 잘 되나요? + 이제 실행해봅시다. </p> <h3>7.6 태양 오브젝트 GUI 추가</h3> @@ -2497,8 +2489,8 @@ <p> 저는 <code>직접 그린 태양</code>과 <code>직접 그린 고양이</code>로 정했습니다.<br /> 재질에 텍스처를 적용하는 내용은 수업에서 배운 텍스처 적용과 동일하므로 아실 거라 믿습니다.<br /> - 아, <code>alphaTest</code> 값은 알파 클립 값을 나타냅니다. 즉, 저 값보다 작은 알파 값은 투명한 것으로 처리합니다.<br /> - 저걸 설정해주지 않으면 투명도가 없는 것으로 처리되니 꼭 넣어주세요!<br /> + 참고로 <code>alphaTest</code> 값은 알파 클립 값을 나타냅니다. 즉, 저 값보다 작은 알파 값은 투명한 것으로 처리합니다.<br /> + 저걸 설정해주지 않으면 투명도가 없는 것으로 처리되니 꼭 넣어주시기 바랍니다.<br /> 이걸로 꾸미기까지 모두 완성입니다. </p> <p> @@ -2531,4 +2523,4 @@ </ul> </div> </body> -</html> \ No newline at end of file +</html>