123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269 |
- <!DOCTYPE html><html lang="ko"><head>
- <meta charset="utf-8">
- <title>안개(Fog)</title>
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
- <meta name="twitter:card" content="summary_large_image">
- <meta name="twitter:site" content="@threejs">
- <meta name="twitter:title" content="Three.js – 안개(Fog)">
- <meta property="og:image" content="https://threejs.org/files/share.png">
- <link rel="shortcut icon" href="../../files/favicon_white.ico" media="(prefers-color-scheme: dark)">
- <link rel="shortcut icon" href="../../files/favicon.ico" media="(prefers-color-scheme: light)">
- <link rel="stylesheet" href="../resources/lesson.css">
- <link rel="stylesheet" href="../resources/lang.css">
- <script type="importmap">
- {
- "imports": {
- "three": "../../build/three.module.js"
- }
- }
- </script>
- <link rel="stylesheet" href="/manual/ko/lang.css">
- </head>
- <body>
- <div class="container">
- <div class="lesson-title">
- <h1>안개(Fog)</h1>
- </div>
- <div class="lesson">
- <div class="lesson-main">
- <p>※ 이 글은 Three.js의 튜토리얼 시리즈로서,
- 먼저 <a href="fundamentals.html">Three.js의 기본 구조에 관한 글</a>을
- 읽고 오길 권장합니다.</p>
- <p>※ 카메라에 대해 잘 모른다면, 먼저 <a href="cameras.html">카메라에 관한 글</a>을
- 먼저 읽기 바랍니다.</p>
- <p>3D 엔진에서 안개란, 일반적으로 카메라로부터의 거리에 따라 특정 색상으로
- 점차 변화하는 것을 말합니다. Three.js에서는 <a href="/docs/#api/ko/scenes/Fog"><code class="notranslate" translate="no">Fog</code></a>나 <a href="/docs/#api/ko/scenes/FogExp2"><code class="notranslate" translate="no">FogExp2</code></a> 객체를
- 생성한 뒤, 장면(scene)의 <a href="/docs/#api/ko/scenes/Scene#fog"><code class="notranslate" translate="no">fog</code></a> 속성에 지정해 안개를 사용합니다.</p>
- <p><a href="/docs/#api/ko/scenes/Fog"><code class="notranslate" translate="no">Fog</code></a>는 인자로 <code class="notranslate" translate="no">near</code>와 <code class="notranslate" translate="no">far</code>값을 받는데, 이는 카메라로부터의 거리값입니다.
- <code class="notranslate" translate="no">near</code>값보다 가까운 공간은 안개의 영향이 전혀 없고, <code class="notranslate" translate="no">far</code>값보다 먼 공간은
- 완전히 안개에 뒤덮입니다. <code class="notranslate" translate="no">near</code>와 <code class="notranslate" translate="no">far</code> 사이의 공간에 있는 물체 또는 물체의
- 일부는 점차 안개의 색으로 변화하죠.</p>
- <p><a href="/docs/#api/ko/scenes/FogExp2"><code class="notranslate" translate="no">FogExp2</code></a>는 카메라에서 멀어질수록 안개의 강도가 강해집니다.</p>
- <p>두 가지 안개 모두 마찬가지로, 안개를 사용하려면 장면의 속성에 지정해야 합니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const scene = new THREE.Scene();
- {
- const color = 0xFFFFFF; // 하양
- const near = 10;
- const far = 100;
- scene.fog = new THREE.Fog(color, near, far);
- }
- </pre>
- <p><a href="/docs/#api/ko/scenes/FogExp2"><code class="notranslate" translate="no">FogExp2</code></a>의 경우는 다음처럼 쓸 수 있죠.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const scene = new THREE.Scene();
- {
- const color = 0xFFFFFF;
- const density = 0.1;
- scene.fog = new THREE.FogExp2(color, density);
- }
- </pre>
- <p><a href="/docs/#api/ko/scenes/FogExp2"><code class="notranslate" translate="no">FogExp2</code></a>가 더 현실적이긴 하나, 보통 안개의 범위를 특정하기 쉬운
- <a href="/docs/#api/ko/scenes/Fog"><code class="notranslate" translate="no">Fog</code></a>를 더 많이 사용합니다.</p>
- <div class="spread">
- <div>
- <div data-diagram="fog"></div>
- <div class="code">THREE.Fog</div>
- </div>
- <div>
- <div data-diagram="fogExp2"></div>
- <div class="code">THREE.FogExp2</div>
- </div>
- </div>
- <p>한 가지 알아둬야 하는 건 안개는 <em>렌더링되는 물체</em>라는 점입니다.
- 안개는 물체의 픽셀을 렌더링할 때 같이 렌더링되는데, 이 말은 장면에
- 특정 색상의 안개 효과를 주려면 안개와 배경색 <strong>둘 다</strong> 같은 색으로
- 지정해야 한다는 겁니다. 배경색은 <a href="/docs/#api/ko/scenes/Scene#background"><code class="notranslate" translate="no">scene.background</code></a>
- 속성을 <a href="/docs/#api/ko/math/Color"><code class="notranslate" translate="no">THREE.Color</code></a> 인스턴스로 지정해 바꿀 수 있습니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">scene.background = new THREE.Color('#F00'); // 빨강
- </pre>
- <div class="spread">
- <div>
- <div data-diagram="fogBlueBackgroundRed" style="height:300px" class="border"></div>
- <div class="code">파란 안개, 빨간 배경</div>
- </div>
- <div>
- <div data-diagram="fogBlueBackgroundBlue" style="height:300px" class="border"></div>
- <div class="code">파란 안개, 파란 배경</div>
- </div>
- </div>
- <p>아래는 이전에 사용했던 예제에 안개를 추가한 것입니다. 장면을 생성한 뒤
- 안개를 추가하고, 장면의 배경색을 바꾸기만 했죠.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const scene = new THREE.Scene();
- +{
- + const near = 1;
- + const far = 2;
- + const color = 'lightblue';
- + scene.fog = new THREE.Fog(color, near, far);
- + scene.background = new THREE.Color(color);
- +}
- </pre>
- <p>아래 예제의 카메라는 <code class="notranslate" translate="no">near</code>값이 0.1, <code class="notranslate" translate="no">far</code>값이 5입니다. 카메라의 위치는
- <code class="notranslate" translate="no">z = 2</code>이죠. 정육면체의 크기는 1칸이고, z축의 원점에 있습니다. 여기서
- 안개를 <code class="notranslate" translate="no">near = 1</code>, <code class="notranslate" translate="no">far = 2</code>로 설정하면 정육면체가 중간부터 사라지기
- 시작하겠죠.</p>
- <p></p><div translate="no" class="threejs_example_container notranslate">
- <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/fog.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/fog.html" target="_blank">새 탭에서 보기</a>
- </div>
- <p></p>
- <p>인터페이스를 추가해 안개를 조정할 수 있도록 하겠습니다. 이번에도 <a href="https://github.com/georgealways/lil-gui">lil-gui</a>를
- 사용할 거예요. lil-gui는 객체와 객체의 속성 키값을 받아 자동으로 인터페이스를
- 생성합니다. 단순히 안개의 <code class="notranslate" translate="no">near</code>와 <code class="notranslate" translate="no">far</code> 제어하도록 설정할 수도 있지만, <code class="notranslate" translate="no">near</code>값이
- <code class="notranslate" translate="no">far</code>값보다 큰 경우는 없기에 헬퍼를 만들어 <code class="notranslate" translate="no">near</code>값을 항상 <code class="notranslate" translate="no">far</code>보다 같거나
- 작게, <code class="notranslate" translate="no">far</code>값을 항상 <code class="notranslate" translate="no">near</code>보다 같거나 크게 설정하도록 하겠습니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">/**
- * 이 클래스의 인스턴스를 lil-gui에 넘겨
- * near나 far 속성을 조정할 때 항상
- * near는 never >= far, far는 never <= near가 되도록 합니다
- **/
- class FogGUIHelper {
- constructor(fog) {
- this.fog = fog;
- }
- get near() {
- return this.fog.near;
- }
- set near(v) {
- this.fog.near = v;
- this.fog.far = Math.max(this.fog.far, v);
- }
- get far() {
- return this.fog.far;
- }
- set far(v) {
- this.fog.far = v;
- this.fog.near = Math.min(this.fog.near, v);
- }
- }
- </pre>
- <p>방금 만든 클래스를 아래처럼 활용합니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">{
- const near = 1;
- const far = 2;
- const color = 'lightblue';
- scene.fog = new THREE.Fog(color, near, far);
- scene.background = new THREE.Color(color);
- +
- + const fogGUIHelper = new FogGUIHelper(scene.fog);
- + gui.add(fogGUIHelper, 'near', near, far).listen();
- + gui.add(fogGUIHelper, 'far', near, far).listen();
- }
- </pre>
- <p><code class="notranslate" translate="no">near</code>와 <code class="notranslate" translate="no">far</code> 인자는 각 안개 속성의 최솟값과 최댓값입니다.</p>
- <p>마지막 2줄의 <code class="notranslate" translate="no">.listen()</code> 메서드를 호출하면 lil-gui가 변화를 <em>감지</em>합니다.
- <code class="notranslate" translate="no">near</code> 속성을 바꿀 때 동시에 <code class="notranslate" translate="no">far</code> 속성을 재할당하고, <code class="notranslate" translate="no">far</code> 속성을 바꿀 때도
- 동시에 <code class="notranslate" translate="no">near</code>를 재할당하는데, 이 메서드를 호출하면 조작한 속성 외의 다른
- 속성의 변화도 UI에 업데이트됩니다.</p>
- <p>여기에 안개의 색까지 조정할 수 있으면 금상첨화겠네요. 하지만 아까 설명했듯
- 안개의 색을 바꾸려면 배경색도 같이 바꿔야 합니다. 헬퍼 클래스에 <em>가상</em> 속성을
- 하나 만들어 lil-gui가 이 속성을 변경할 때 배경색과 안개색을 같은 값으로
- 바꿔주면 어떨까요?</p>
- <p>lil-gui의 색상 타입은 4가지입니다. 하나는 CSS의 6자리 16진수 문자열(hex string, 예: <code class="notranslate" translate="no">#f8f8f8</code>)이고,
- 하나는 hue(색상), saturation(채도), value 객체(예: <code class="notranslate" translate="no">{ h: 60, s: 1, v: 0 }</code>),
- 하나는 RGB 배열(예: <code class="notranslate" translate="no">[ 255, 128, 64 ]</code>) 또는 RGBA 색상 배열(예: <code class="notranslate" translate="no">[ 127, 200, 75, 0.3 ]</code>)이죠.</p>
- <p><code class="notranslate" translate="no">lil-gui</code>가 하나의 값만 조작하도록 하는 게 제일 간단하니, 16진수 문자열을 사용하겠습니다.
- 다행히 <a href="/docs/#api/ko/math/Color"><code class="notranslate" translate="no">THREE.Color</code></a>에는 <a href="/docs/#api/ko/math/Color#getHexString"><code class="notranslate" translate="no">getHexString</code></a> 메서드가 있어 색상을
- 문자열로 쉽게 바꿀 수 있죠. 앞에 '#'만 덧붙이면 됩니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">/**
- * 이 클래스의 인스턴스를 lil-gui에 넘겨
- * near나 far 속성을 조정할 때 항상
- * near는 never >= far, far는 never <= near가 되도록 합니다
- **/
- +// 또 lil-gui가 color 속성을 조작할 때 안개와 배경색을 동시에 변경합니다
- class FogGUIHelper {
- * constructor(fog, backgroundColor) {
- this.fog = fog;
- + this.backgroundColor = backgroundColor;
- }
- get near() {
- return this.fog.near;
- }
- set near(v) {
- this.fog.near = v;
- this.fog.far = Math.max(this.fog.far, v);
- }
- get far() {
- return this.fog.far;
- }
- set far(v) {
- this.fog.far = v;
- this.fog.near = Math.min(this.fog.near, v);
- }
- + get color() {
- + return `#${this.fog.color.getHexString()}`;
- + }
- + set color(hexString) {
- + this.fog.color.set(hexString);
- + this.backgroundColor.set(hexString);
- + }
- }
- </pre>
- <p>이번에는 <code class="notranslate" translate="no">gui.addColor</code> 메서드를 호출합니다. 색상 UI를 생성하는 메서드로,
- 방금 추가한 가상 속성을 조작하도록 설정합니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">{
- const near = 1;
- const far = 2;
- const color = 'lightblue';
- scene.fog = new THREE.Fog(color, near, far);
- scene.background = new THREE.Color(color);
- * const fogGUIHelper = new FogGUIHelper(scene.fog, scene.background);
- gui.add(fogGUIHelper, 'near', near, far).listen();
- gui.add(fogGUIHelper, 'far', near, far).listen();
- + gui.addColor(fogGUIHelper, 'color');
- }
- </pre>
- <p></p><div translate="no" class="threejs_example_container notranslate">
- <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/fog-gui.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/fog-gui.html" target="_blank">새 탭에서 보기</a>
- </div>
- <p></p>
- <p><code class="notranslate" translate="no">near</code>를 1.9 정도, <code class="notranslate" translate="no">far</code>를 2.0 정도로 설정하면 안개의 경계가 굉장히
- 선명해질 겁니다. 정육면체들이 카메라에서 2칸 떨어져 있으므로 <code class="notranslate" translate="no">near</code>를
- 1.1, <code class="notranslate" translate="no">far</code>를 2.9 정도로 설정하면 경계가 가장 부드러운 것이라고 할 수
- 있죠.</p>
- <p>추가로 재질(material)에는 불린 타입의 <a href="/docs/#api/ko/materials/Material#fog"><code class="notranslate" translate="no">fog</code></a> 속성이 있습니다.
- 해당 재질로 렌더링되는 물체가 안개의 영향을 받을지의 여부를 결정하는 속성이죠.
- "안개 효과를 없애버리면 그만 아닌가?" 생각할 수 있지만, 3D 운전 시뮬레이터를
- 만드는 경우를 상상해봅시다. 차 밖은 안개가 자욱하더라도 차 안에서 볼 때 차 내부는
- 깔끔해야 할 수도 있죠.</p>
- <p>안개가 짙은 날, 집 안에서 창 밖을 바라보는 장면이 더 와닿을지도 모르겠네요.
- 안개가 카메라로부터 2미터 이후부터 끼기 시작하고(near = 2), 4미터 이후에는
- 완전히 안개에 덮히도록(far = 4) 설정합니다. 방은 2미터이고, 집은 최소 4미터입니다.
- 여기서 집 안의 재질이 안개의 영향을 받도록 놔둔다면 방 끝에서 창 밖을 바라볼
- 때 방 안도 안개가 낀 것처럼 보이겠죠.</p>
- <div class="spread">
- <div>
- <div data-diagram="fogHouseAll" style="height: 300px;" class="border"></div>
- <div class="code">모든 재질의 fog: true</div>
- </div>
- </div>
- <p>방 끝 쪽 천장과 벽에 안개가 낀 것이 보일 겁니다. 집 내부 재질의 fog 옵션을 끄면
- 안개를 없앨 수 있죠.</p>
- <div class="spread">
- <div>
- <div data-diagram="fogHouseInsideNoFog" style="height: 300px;" class="border"></div>
- <div class="code">집 밖 물체의 재질만 fog: true</div>
- </div>
- </div>
- <p><canvas id="c"></canvas></p>
- <script type="module" src="../resources/threejs-fog.js"></script>
- </div>
- </div>
- </div>
- <script src="../resources/prettify.js"></script>
- <script src="../resources/lesson.js"></script>
- </body></html>
|