123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389 |
- <!DOCTYPE html><html lang="ko"><head>
- <meta charset="utf-8">
- <title>투명도</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 – 투명도">
- <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>투명도</h1>
- </div>
- <div class="lesson">
- <div class="lesson-main">
- <p>Three.js에서 투명도는 간단하지만 동시에 까다로운 주제입니다.</p>
- <p>먼저 쉬운 것부터 알아보죠. 예제로 정육면체 8개를 2x2x2 그리드에 맞춘 장면을
- 만들어보겠습니다.</p>
- <p><a href="rendering-on-demand.html">불필요한 렌더링 제거하기</a>에서 썼던
- 예제를 가져와 정육면체 3개를 8개로 수정합니다. 먼저 <code class="notranslate" translate="no">makeInstance</code> 함수가
- x, y, z 값을 받도록 수정하겠습니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">-function makeInstance(geometry, color) {
- +function makeInstance(geometry, color, x, y, z) {
- const material = new THREE.MeshPhongMaterial({color});
- const cube = new THREE.Mesh(geometry, material);
- scene.add(cube);
- - cube.position.x = x;
- + cube.position.set(x, y, z);
- return cube;
- }
- </pre>
- <p>그리고 정육면체 8개를 만듭니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">+function hsl(h, s, l) {
- + return (new THREE.Color()).setHSL(h, s, l);
- +}
- -makeInstance(geometry, 0x44aa88, 0);
- -makeInstance(geometry, 0x8844aa, -2);
- -makeInstance(geometry, 0xaa8844, 2);
- +{
- + const d = 0.8;
- + makeInstance(geometry, hsl(0 / 8, 1, .5), -d, -d, -d);
- + makeInstance(geometry, hsl(1 / 8, 1, .5), d, -d, -d);
- + makeInstance(geometry, hsl(2 / 8, 1, .5), -d, d, -d);
- + makeInstance(geometry, hsl(3 / 8, 1, .5), d, d, -d);
- + makeInstance(geometry, hsl(4 / 8, 1, .5), -d, -d, d);
- + makeInstance(geometry, hsl(5 / 8, 1, .5), d, -d, d);
- + makeInstance(geometry, hsl(6 / 8, 1, .5), -d, d, d);
- + makeInstance(geometry, hsl(7 / 8, 1, .5), d, d, d);
- +}
- </pre>
- <p>카메라도 조정합니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const fov = 75;
- const aspect = 2; // canvas 기본값
- const near = 0.1;
- -const far = 5;
- +const far = 25;
- const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
- -camera.position.z = 4;
- +camera.position.z = 2;
- </pre>
- <p>배경색은 하얀색으로 바꿔주고</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const scene = new THREE.Scene();
- +scene.background = new THREE.Color('white');
- </pre>
- <p>정육면체의 옆면도 빛을 받도록 조명을 하나 더 추가합니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">-{
- +function addLight(...pos) {
- const color = 0xFFFFFF;
- const intensity = 1;
- const light = new THREE.DirectionalLight(color, intensity);
- - light.position.set(-1, 2, 4);
- + light.position.set(...pos);
- scene.add(light);
- }
- +addLight(-1, 2, 4);
- +addLight( 1, -1, -2);
- </pre>
- <p>정육면체를 투명하게 만들려면 <a href="/docs/#api/ko/materials/Material#transparent"><code class="notranslate" translate="no">transparent</code></a> 속성을
- 켜고 <a href="/docs/#api/ko/materials/Material#opacity"><code class="notranslate" translate="no">opacity</code></a> 속성을 설정해줘야 합니다(CSS와 마찬가지로
- 0은 완전히 투명함, 1은 완전히 불투명함을 의미).</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function makeInstance(geometry, color, x, y, z) {
- - const material = new THREE.MeshPhongMaterial({color});
- + const material = new THREE.MeshPhongMaterial({
- + color,
- + opacity: 0.5,
- + transparent: true,
- + });
- const cube = new THREE.Mesh(geometry, material);
- scene.add(cube);
- cube.position.set(x, y, z);
- return cube;
- }
- </pre>
- <p>이제 8개의 반투명한 정육면체가 생겼습니다.</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/transparency.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/transparency.html" target="_blank">새 탭에서 보기</a>
- </div>
- <p></p>
- <p>예제를 드래그하면 화면을 회전시킬 수 있습니다.</p>
- <p>완벽한데요, 라고 생각했다면 좀 더 자세히 보세요. 정육면체의 뒷면이 하나도
- 보이지 않습니다.</p>
- <div class="threejs_center"><img src="../resources/images/transparency-cubes-no-backs.png" style="width: 416px;"></div>
- <div class="threejs_center">뒷면이 보이지 않는다</div>
- <p>이전에 <a href="materials.html">재질(material)에 관해</a> 배울 때 <a href="/docs/#api/ko/materials/Material#side"><code class="notranslate" translate="no">side</code></a>
- 속성에 대해 배웠었죠. 이 속성을 <code class="notranslate" translate="no">THREE.DoubleSide</code>로 설정해 정육면체의
- 양면이 모두 보이도록 해봅시다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const material = new THREE.MeshPhongMaterial({
- color,
- map: loader.load(url),
- opacity: 0.5,
- transparent: true,
- + side: THREE.DoubleSide,
- });
- </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/transparency-doubleside.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/transparency-doubleside.html" target="_blank">새 탭에서 보기</a>
- </div>
- <p></p>
- <p>예제를 돌려보세요. 뭔가 해결된 듯 하지만 자세히 보면 가끔 뒷면 또는 뒷면의
- 일부가 보이지 않습니다.</p>
- <div class="threejs_center"><img src="../resources/images/transparency-cubes-some-backs.png" style="width: 368px;"></div>
- <div class="threejs_center">정육면체의 왼쪽 뒷면이 보이지 않는다</div>
- <p>이는 3D 요소를 렌더링하는 방식 때문입니다. WebGL은 각 geometry의 삼각형을
- 한 번에 하나씩 렌더링합니다. 그리고 삼각형의 픽셀 하나를 렌더링할 때마다
- 2개의 정보를 기록하는데, 하나는 해당 픽셀의 색이고 다른 하나는 픽셀의
- 깊이(depth)입니다. 다음 삼각형을 그릴 때 해당 픽셀이 이미 그려진 픽셀보다
- 깊이가 깊다면 해당 픽셀을 렌더링하지 않죠.</p>
- <p>이는 불투명한 물체에서는 문제가 되지 않았지만 투명한 물체에서는 문제가 됩니다.</p>
- <p>이 문제를 해결하려면 투명한 물체를 분류해 뒤에 있는 물체를 앞에 있는 물체보다
- 먼저 렌더링해야 합니다. <a href="/docs/#api/ko/objects/Mesh"><code class="notranslate" translate="no">Mesh</code></a> 같은 경우는 Three.js가 자동으로 이를 처리해주죠.
- 만약 그러지 않았다면 제일 첫 번째 예제에서 뒤에 있는 정육면체를 아예 볼 수
- 없었을 겁니다.</p>
- <p>정육면체에는 한 면에 2개, 총 12개의 삼각형이 있습니다. 각 삼각형의 렌더링 순서는
- <a href="custom-buffergeometry.html">geometry에 관한 글에서 봤던 것</a>과 같죠.
- 시선에 따라 카메라에서 가까운 삼각형을 먼저 렌더링할 겁니다. 앞면을 뒷면보다 먼저
- 렌더링하니, 때때로 뒷면이 보이지 않을 수밖에 없죠.</p>
- <p>구체나 정육면체 등 볼록 물체(convex object)의 경우, 모든 물체를 한 번씩 더 렌더링해
- 문제를 해결할 수 있습니다. 하나는 안쪽면 삼각형만 렌더링하고, 다른 하나는 바깥쪽
- 삼각형만 렌더링하도록 만드는 것이죠.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function makeInstance(geometry, color, x, y, z) {
- + [THREE.BackSide, THREE.FrontSide].forEach((side) => {
- const material = new THREE.MeshPhongMaterial({
- color,
- opacity: 0.5,
- transparent: true,
- + side,
- });
- const cube = new THREE.Mesh(geometry, material);
- scene.add(cube);
- cube.position.set(x, y, z);
- + });
- }
- </pre>
- <p>어찌어찌 해결된 <em>것처럼</em> 보입니다.</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/transparency-doubleside-hack.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/transparency-doubleside-hack.html" target="_blank">새 탭에서 보기</a>
- </div>
- <p></p>
- <p>Three.js의 분류 기준은 고정적인 듯합니다. <code class="notranslate" translate="no">side: THREE.BackSide</code> mesh를 먼저
- 넣고, 그 다음 정확히 같은 위치에 <code class="notranslate" translate="no">side: THREE.FrontSide</code> mesh를 넣었으니까요.</p>
- <p>이번에는 평면 2개를 교차로 배치해봅시다(정육면체 관련 코드를 전부 지운 뒤).
- 각 평면에는 다른 텍스처를 넣을 겁니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const planeWidth = 1;
- const planeHeight = 1;
- const geometry = new THREE.PlaneGeometry(planeWidth, planeHeight);
- const loader = new THREE.TextureLoader();
- function makeInstance(geometry, color, rotY, url) {
- const texture = loader.load(url, render);
- const material = new THREE.MeshPhongMaterial({
- color,
- map: texture,
- opacity: 0.5,
- transparent: true,
- side: THREE.DoubleSide,
- });
- const mesh = new THREE.Mesh(geometry, material);
- scene.add(mesh);
- mesh.rotation.y = rotY;
- }
- makeInstance(geometry, 'pink', 0, 'resources/images/happyface.png');
- makeInstance(geometry, 'lightblue', Math.PI * 0.5, 'resources/images/hmmmface.png');
- </pre>
- <p>평면은 한 번에 한 면밖에 보지 못하니, <code class="notranslate" translate="no">side: THREE.DoubleSide</code>로 설정했습니다. 또한
- 텍스처를 전부 불러왔을 때 장면을 다시 렌더링하도록 <code class="notranslate" translate="no">render</code> 함수를 <code class="notranslate" translate="no">loader.load</code>
- 메서드에 넘겨줬습니다. 이는 <a href="rendering-on-demand.html">필요에 따른 렌더링</a>을
- 구현하기 위한 것이죠.</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/transparency-intersecting-planes.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/transparency-intersecting-planes.html" target="_blank">새 탭에서 보기</a>
- </div>
- <p></p>
- <p>아까와 비슷한 문제가 보입니다.</p>
- <div class="threejs_center"><img src="../resources/images/transparency-planes.png" style="width: 408px;"></div>
- <div class="threejs_center">면의 반쪽이 사라졌다</div>
- <p>평면을 둘로 쪼개 실제로는 교차하지 않게끔 만들면 문제를 해결할 수 있습니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function makeInstance(geometry, color, rotY, url) {
- + const base = new THREE.Object3D();
- + scene.add(base);
- + base.rotation.y = rotY;
- + [-1, 1].forEach((x) => {
- const texture = loader.load(url, render);
- + texture.offset.x = x < 0 ? 0 : 0.5;
- + texture.repeat.x = .5;
- const material = new THREE.MeshPhongMaterial({
- color,
- map: texture,
- opacity: 0.5,
- transparent: true,
- side: THREE.DoubleSide,
- });
- const mesh = new THREE.Mesh(geometry, material);
- - scene.add(mesh);
- + base.add(mesh);
- - mesh.rotation.y = rotY;
- + mesh.position.x = x * .25;
- });
- }
- </pre>
- <p>저걸 어떻게 구현할지는 여러분의 선택입니다. <a href="https://blender.org">블렌더(Blender)</a>
- 같은 3D 에디터를 사용했다면 텍스처 좌표를 직접 수정했겠죠. 예제의 경우에는
- <a href="/docs/#api/ko/geometries/PlaneGeometry"><code class="notranslate" translate="no">PlaneGeometry</code></a>를 썼습니다. <a href="textures.html">이전에 다뤘듯</a>
- 이 geometry는 기본적으로 텍스처를 크기에 맞춰 늘립니다. <a href="/docs/#api/ko/textures/Texture#repeat"><code class="notranslate" translate="no">texture.repeat</code></a>
- 속성과 <a href="/docs/#api/ko/textures/Texture#offset"><code class="notranslate" translate="no">texture.offset</code></a> 속성을 조정해 각 면에 적절한
- 텍스처를 입혀줄 수 있죠.</p>
- <p>위 코드에서는 <a href="/docs/#api/ko/core/Object3D"><code class="notranslate" translate="no">Object3D</code></a>를 만들어 두 평면의 부모로 지정했습니다. 이렇게
- 하면 복잡한 계산 없이 간단하게 <a href="/docs/#api/ko/core/Object3D"><code class="notranslate" translate="no">Object3D</code></a>만 돌려서 두 평면 다 회전시킬
- 수 있죠.</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/transparency-intersecting-planes-fixed.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/transparency-intersecting-planes-fixed.html" target="_blank">새 탭에서 보기</a>
- </div>
- <p></p>
- <p>이 방법은 교차점이 변하지 않는 정말 간단한 경우에만 가능합니다.</p>
- <p>텍스처가 들어간 요소는 알파 테스트(alpha test)를 활성화해 이를 해결할 수
- 있죠.</p>
- <p>알파 테스트란 Three.js가 픽셀을 렌더링하지 않는 특정 <em>알파</em> 단계를 의미합니다.
- 만약 아무것도 그리지 않게 설정한다면 위와 같은 문제는 사라지겠죠. 상대적으로
- 경계가 분명한 텍스처, 나뭇잎, 잔디 등의 경우 이는 꽤 잘 작동합니다.</p>
- <p>이번에도 2개의 면을 만들어 테스트해보도록 합시다. 아까는 텍스처가 전부 불투명했죠.
- 이번에는 각 면에는 각각 다른, 부분적으로 투명한 텍스처를 사용할 겁니다.</p>
- <div class="spread">
- <div><img class="checkerboard" src="../examples/resources/images/tree-01.png"></div>
- <div><img class="checkerboard" src="../examples/resources/images/tree-02.png"></div>
- </div>
- <p>아까 평면 2개를 교차해놓았던(반으로 가르기 전) 예제를 가져와 이 텍스처에
- <a href="/docs/#api/ko/materials/Material#alphaTest"><code class="notranslate" translate="no">alphaTest</code></a> 속성을 지정하겠습니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function makeInstance(geometry, color, rotY, url) {
- const texture = loader.load(url, render);
- const material = new THREE.MeshPhongMaterial({
- color,
- map: texture,
- - opacity: 0.5,
- transparent: true,
- + alphaTest: 0.5,
- side: THREE.DoubleSide,
- });
- const mesh = new THREE.Mesh(geometry, material);
- scene.add(mesh);
- mesh.rotation.y = rotY;
- }
- -makeInstance(geometry, 'pink', 0, 'resources/images/happyface.png');
- -makeInstance(geometry, 'lightblue', Math.PI * 0.5, 'resources/images/hmmmface.png');
- +makeInstance(geometry, 'white', 0, 'resources/images/tree-01.png');
- +makeInstance(geometry, 'white', Math.PI * 0.5, 'resources/images/tree-02.png');
- </pre>
- <p>이대로 실행해도 되지만, 간단한 UI를 만들어 <code class="notranslate" translate="no">alphaTest</code>와 <code class="notranslate" translate="no">transparent</code> 속성을
- 갖고 놀 수 있게 해보겠습니다. <a href="scenegraph.html">씬 그래프에 관한 글</a>에서
- 소개했던 lil-gui를 써서요.</p>
- <p>먼저 lil-gui에 지정할 헬퍼 클래스를 만들겠습니다. 이 헬퍼 클래스는 장면 안 모든
- 재질을 해당 값으로 변경할 겁니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">class AllMaterialPropertyGUIHelper {
- constructor(prop, scene) {
- this.prop = prop;
- this.scene = scene;
- }
- get value() {
- const { scene, prop } = this;
- let v;
- scene.traverse((obj) => {
- if (obj.material && obj.material[prop] !== undefined) {
- v = obj.material[prop];
- }
- });
- return v;
- }
- set value(v) {
- const { scene, prop } = this;
- scene.traverse((obj) => {
- if (obj.material && obj.material[prop] !== undefined) {
- obj.material[prop] = v;
- obj.material.needsUpdate = true;
- }
- });
- }
- }
- </pre>
- <p>다음으로 GUI를 추가합니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const gui = new GUI();
- gui.add(new AllMaterialPropertyGUIHelper('alphaTest', scene), 'value', 0, 1)
- .name('alphaTest')
- .onChange(requestRenderIfNotRequested);
- gui.add(new AllMaterialPropertyGUIHelper('transparent', scene), 'value')
- .name('transparent')
- .onChange(requestRenderIfNotRequested);
- </pre>
- <p>물론 lil-gui 모듈도 불러와야죠.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
- import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
- +import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
- </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/transparency-intersecting-planes-alphatest.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/transparency-intersecting-planes-alphatest.html" target="_blank">새 탭에서 보기</a>
- </div>
- <p></p>
- <p>예제를 확대해보면 평면에 하얀 테두리가 보일 겁니다.</p>
- <div class="threejs_center"><img src="../resources/images/transparency-alphatest-issues.png" style="width: 532px;"></div>
- <p>이는 앞서 봤던 예제와 같은 문제입니다. 하얀 테두리를 가진 요소가 먼저 그려져
- 뒤에 있는 요소가 일부 가려진 것이죠. 완벽한 해결책은 없습니다. 그때그때 상황에
- 따라 <code class="notranslate" translate="no">alphaTest</code>나 <code class="notranslate" translate="no">transparent</code> 옵션을 조정해서 상황에 맞는 해결책을 찾아야
- 하죠.</p>
- <p>결국 이 글의 주제는 "완벽한 투명도는 구현하기 힘들다"가 되겠네요. 웬만한 방법에는
- 모두 문제와, 타협점, 편법 등이 존재합니다.</p>
- <p>자동차의 경우를 예로 들어보죠. 자동차는 보통 4면에 유리창이 있습니다. 렌더링 순서를
- 제대로 적용하려면 각각의 창문을 별도의 요소로 만들어야 합니다. 만약 하나의 요소라면
- Three.js가 렌더링 순서를 제대로 결정할 수 없겠죠.</p>
- <p>식물이나 잔디 등을 구현할 때는 일반적으로 알파 테스트를 사용합니다.</p>
- <p>어떤 방법을 사용할지는 전적으로 상황과 여러분의 판단에 달려 있죠.</p>
- </div>
- </div>
- </div>
- <script src="../resources/prettify.js"></script>
- <script src="../resources/lesson.js"></script>
- </body></html>
|