lxc
/
threejs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
10 Commits
1 Branch
0 Tags
697 MiB
Tree: c9c9e23e2a
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'c9c9e23e2a'
${ noResults }
threejs/manual/ko/textures.html

555 lines
35 KiB
Raw Normal View History

first
2 years ago
<!DOCTYPE html><html lang="ko"><head>
<meta charset="utf-8">
<title>텍스처(Textures)</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 – 텍스처(Textures)">
<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="/manual/resources/lesson.css">
<link rel="stylesheet" href="/manual/resources/lang.css">
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<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>텍스처(Textures)</h1>
</div>
<div class="lesson">
<div class="lesson-main">
<p>※ 이 글은 Three.js의 튜토리얼 시리즈로서,
먼저 <a href="fundamentals.html">Three.js의 기본 구조에 관한 글</a>과
<a href="setup.html">개발 환경 설정하는 법</a>을 읽고 오길 권장합니다.</p>
<p>※ 텍스처, Texture는 "질감"으로 번역할 수 있으나, 그대로 표기하는 쪽이
직관적이라 판단하여 <strong>텍스처</strong>로 번역하였습니다.</p>
<p>Three.js에서 텍스처를 이야기하기란 쉽지 않습니다. 텍스처는 워낙 방대한
주제이고, 각 주제끼리도 서로 연결되어 있어 한 번에 설명하는 것이 거의
불가능에 가깝기 때문이죠. 어떻게 설명해야 잘 설명했다고 할 수 있을지
확신은 없지만, 일단 해보기로 합시다. 다음은 이 글의 간략한 목차입니다.</p>
<ul>
<li><a href="#hello">하이, 텍스처</a></li>
<li><a href="#six">육면체 각 면에 다른 텍스처 지정하기</a></li>
<li><a href="#loading">텍스처 불러오기</a></li>
<ul>
<li><a href="#easy">간단한 방법</a></li>
<li><a href="#wait1">텍스처를 불러온 후 처리하기</a></li>
<li><a href="#waitmany">다수의 텍스처를 불러온 후 처리하기</a></li>
<li><a href="#cors">다른 도메인(origin)에서 텍스처 불러오기</a></li>
</ul>
<li><a href="#memory">메모리 관리</a></li>
<li><a href="#format">JPG vs PNG</a></li>
<li><a href="#filtering-and-mips">필터링과 Mips</a></li>
<li><a href="#uvmanipulation">텍스처의 반복(repeating), 위치 조절(offseting), 회전(rotating), 래핑(wrapping)</a></li>
</ul>
<h2 id="-a-name-hello-a-"><a name="hello"></a> 하이, 텍스처</h2>
<p>텍스처는 <em>일반적으로</em> 포토샵이나 김프 등의 프로그램으로 만든 이미지입니다.
예를 들어 아래 이미지를 정육면체에 씌워보죠.</p>
<div class="threejs_center">
<img src="../examples/resources/images/wall.jpg" style="width: 600px;" class="border">
</div>
<p>예제는 처음 만들었던 것을 사용하겠습니다. 추가로 <a href="/docs/#api/ko/loaders/TextureLoader"><code class="notranslate" translate="no">TextureLoader</code></a>를 새로 생성한
뒤, 인스턴스의 <a href="/docs/#api/ko/loaders/TextureLoader#load"><code class="notranslate" translate="no">load</code></a> 메서드에 이미지의 URL을 넘겨주어 호출하고,
반환 받은 값을 재질(material)의 <code class="notranslate" translate="no">map</code> 속성에 지정합니다(<code class="notranslate" translate="no">color</code> 속성은 지정하지
않습니다).</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">+const loader = new THREE.TextureLoader();
const material = new THREE.MeshBasicMaterial({
- color: 0xFF8844,
+ map: loader.load('resources/images/wall.jpg'),
});
</pre>
<p>※ <a href="/docs/#api/ko/materials/MeshBasicMaterial"><code class="notranslate" translate="no">MeshBasicMaterial</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/textured-cube.html"></iframe></div>
<a class="threejs_center" href="/manual/examples/textured-cube.html" target="_blank">새 탭에서 보기</a>
</div>
<p></p>
<h2 id="-a-name-six-a-"><a name="six"></a> 육면체 각 면에 다른 텍스처 지정하기</h2>
<p>이번에는 육면체의 각 면에 다른 텍스처를 넣어볼까요?</p>
<div class="threejs_center">
<div>
<img src="../examples/resources/images/flower-1.jpg" style="width: 100px;" class="border">
<img src="../examples/resources/images/flower-2.jpg" style="width: 100px;" class="border">
<img src="../examples/resources/images/flower-3.jpg" style="width: 100px;" class="border">
</div>
<div>
<img src="../examples/resources/images/flower-4.jpg" style="width: 100px;" class="border">
<img src="../examples/resources/images/flower-5.jpg" style="width: 100px;" class="border">
<img src="../examples/resources/images/flower-6.jpg" style="width: 100px;" class="border">
</div>
</div>
<p>단순히 재질을 6개 만들어 <a href="/docs/#api/ko/objects/Mesh"><code class="notranslate" translate="no">Mesh</code></a>를 생성할 때 배열로 넘겨주기만 하면 됩니다.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const loader = new THREE.TextureLoader();
-const material = new THREE.MeshBasicMaterial({
- map: loader.load('resources/images/wall.jpg'),
-});
+const materials = [
+ new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-1.jpg')}),
+ new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-2.jpg')}),
+ new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-3.jpg')}),
+ new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-4.jpg')}),
+ new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-5.jpg')}),
+ new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-6.jpg')}),
+];
-const cube = new THREE.Mesh(geometry, material);
+const cube = new THREE.Mesh(geometry, materials);
</pre>
<p>껌이네요.</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/textured-cube-6-textures.html"></iframe></div>
<a class="threejs_center" href="/manual/examples/textured-cube-6-textures.html" target="_blank">새 탭에서 보기</a>
</div>
<p></p>
<p>주의해야할 점은 모든 <code class="notranslate" translate="no">geometry</code>가 재질을 배열로 받진 않는다는 점입니다.
<a href="/docs/#api/ko/geometries/BoxGeometry"><code class="notranslate" translate="no">BoxGeometry</code></a>나 <a href="/docs/#api/ko/geometries/BoxGeometry"><code class="notranslate" translate="no">BoxGeometry</code></a>는 최대 6개, <a href="/docs/#api/ko/geometries/ConeGeometry"><code class="notranslate" translate="no">ConeGeometry</code></a>와
<a href="/docs/#api/ko/geometries/ConeGeometry"><code class="notranslate" translate="no">ConeGeometry</code></a>는 밑면과 뿔 부분에 하나씩 최대 2개, <a href="/docs/#api/ko/geometries/CylinderGeometry"><code class="notranslate" translate="no">CylinderGeometry</code></a>와
<a href="/docs/#api/ko/geometries/CylinderGeometry"><code class="notranslate" translate="no">CylinderGeometry</code></a>는 아래, 위, 옆면 하나씩 최대 3개를 지정할 수 있죠.
다른 경우에는 <code class="notranslate" translate="no">geometry</code>를 따로 만들거나, 텍스처의 좌표를 직접 수정해야 합니다.</p>
<p>다른 3D 엔진에서나 Three.js에서나, 하나의 <code class="notranslate" translate="no">geometry</code>에서 여러 텍스처를 쓰고 싶을 때는
보통 <a href="https://en.wikipedia.org/wiki/Texture_atlas">텍스처 아틀라스</a>를 사용합니다.
텍스처 아틀라스란 여러 이미지로 구성된 하나의 텍스처로, <code class="notranslate" translate="no">geometry</code>의 정점에 따라 텍스처의
좌표를 조절해 <code class="notranslate" translate="no">geometry</code>의 각 삼각형이 텍스처의 일정 부분을 표현하도록 할 수 있습니다.</p>
<p>그렇다면 텍스처의 좌표란 무엇일까요? 이는 <code class="notranslate" translate="no">geometry</code>의 각 정점에 추가되는 데이터로, 특정
정점에 텍스처의 어느 부분을 써야하는지를 나타냅니다. 자세한 사용법은 나중에
<a href="custom-buffergeometry.html">사용자 지정 geometry 만들기</a>에서 살펴보겠습니다.</p>
<h2 id="-a-name-loading-a-"><a name="loading"></a> 텍스처 불러오기</h2>
<h3 id="-a-name-easy-a-"><a name="easy"></a> 간단한 방법</h3>
<p>이 사이트의 예제는 대부분 텍스처를 로딩할 때 간단한 메서드를 사용했습니다.
<a href="/docs/#api/ko/loaders/TextureLoader"><code class="notranslate" translate="no">TextureLoader</code></a>를 생성하고, 인스턴스의 <a href="/docs/#api/ko/loaders/TextureLoader#load"><code class="notranslate" translate="no">load</code></a> 메서드를
호출하는 거죠. 이 <code class="notranslate" translate="no">load</code> 메서드는 <a href="/docs/#api/ko/textures/Texture"><code class="notranslate" translate="no">Texture</code></a> 객체를 반환합니다.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const texture = loader.load('resources/images/flower-1.jpg');
</pre>
<p>알아둬야 할 건 이 메서드는 비동기로 작동한다는 점입니다. 이미지를 완전히
불러온 후 이미지로 텍스처를 업데이트하기 전까지, 텍스처는 투명하게 보일 겁니다.</p>
<p>텍스처를 전부 불러오지 않아도 브라우저가 페이지 렌더링을 시작할 것이므로 이는
속도면에서 꽤 큰 장점입니다. 텍스처를 언제 다 불러왔는지 알아야 하는 경우가
아니라면, 대부분 큰 문제가 되지 않겠죠.</p>
<h3 id="-a-name-wait1-a-"><a name="wait1"></a> 텍스처를 불러온 후 처리하기</h3>
<p>텍스처를 불러온 후 후처리를 위해 <code class="notranslate" translate="no">load</code> 메서드는 두 번째 인자로 콜백(callback)
함수를 받습니다. 이 함수는 텍스처를 전부 불러온 후 호출되죠. 글의 첫 번째 예제를
조금 수정해보겠습니다.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const loader = new THREE.TextureLoader();
loader.load('resources/images/wall.jpg', (texture) =&gt; {
const material = new THREE.MeshBasicMaterial({
map: texture,
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
cubes.push(cube); // 회전 애니메이션을 위해 배열에 추가
});
</pre>
<p>브라우저의 캐시를 비우거나 인터넷 연결 속도가 느리지 않는 한 차이를 느끼기
어렵긴 하지만, 텍스처를 불러온 뒤 화면을 렌더링합니다.</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/textured-cube-wait-for-texture.html"></iframe></div>
<a class="threejs_center" href="/manual/examples/textured-cube-wait-for-texture.html" target="_blank">새 탭에서 보기</a>
</div>
<p></p>
<h3 id="-a-name-waitmany-a-"><a name="waitmany"></a> 다수의 텍스처를 불러온 후 처리하기</h3>
<p>다수의 텍스처를 한 번에 불러와야 할 경우 <a href="/docs/#api/ko/loaders/managers/LoadingManager"><code class="notranslate" translate="no">LoadingManager</code></a>를 사용할 수 있습니다.
<a href="/docs/#api/ko/loaders/TextureLoader"><code class="notranslate" translate="no">TextureLoader</code></a>를 생성할 때 미리 생성한 <a href="/docs/#api/ko/loaders/managers/LoadingManager"><code class="notranslate" translate="no">LoadingManager</code></a>의 인스턴스를 인자로
넘겨주고, <a href="/docs/#api/ko/loaders/managers/LoadingManager"><code class="notranslate" translate="no">LoadingManager</code></a> 인스턴스의 <a href="/docs/#api/ko/loaders/managers/LoadingManager#onLoad"><code class="notranslate" translate="no">onLoad</code></a> 속성에
콜백 함수를 설정해주는 거죠.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">+const loadManager = new THREE.LoadingManager();
*const loader = new THREE.TextureLoader(loadManager);
const materials = [
new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-1.jpg')}),
new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-2.jpg')}),
new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-3.jpg')}),
new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-4.jpg')}),
new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-5.jpg')}),
new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-6.jpg')}),
];
+loadManager.onLoad = () =&gt; {
+ const cube = new THREE.Mesh(geometry, materials);
+ scene.add(cube);
+ cubes.push(cube); // 회전 애니메이션을 위해 배열에 추가
+};
</pre>
<p><a href="/docs/#api/ko/loaders/managers/LoadingManager"><code class="notranslate" translate="no">LoadingManager</code></a>의 <a href="/docs/#api/ko/loaders/managers/LoadingManager#onProgress"><code class="notranslate" translate="no">onProgress</code></a>에 콜백 함수를 지정하면
현재 진행 상태를 추적할 수 있습니다.</p>
<p>일단 HTML로 프로그래스 바(progress bar)를 만들겠습니다.</p>
<pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;body&gt;
&lt;canvas id="c"&gt;&lt;/canvas&gt;
+ &lt;div id="loading"&gt;
+ &lt;div class="progress"&gt;&lt;div class="progressbar"&gt;&lt;/div&gt;&lt;/div&gt;
+ &lt;/div&gt;
&lt;/body&gt;
</pre>
<p>스타일도 추가하죠.</p>
<pre class="prettyprint showlinemods notranslate lang-css" translate="no">#loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#loading .progress {
margin: 1.5em;
border: 1px solid white;
width: 50vw;
}
#loading .progressbar {
margin: 2px;
background: white;
height: 1em;
transform-origin: top left;
transform: scaleX(0);
}
</pre>
<p>다음으로 <code class="notranslate" translate="no">onProgress</code> 콜백에서 <code class="notranslate" translate="no">.progressbar</code>의 X축 크기를 조정하겠습니다.
콜백 함수는 마지막으로 불러온 자원의 URL, 현재까지 불러온 자원의 수, 총 지원의
수를 매개변수로 받습니다.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">+const loadingElem = document.querySelector('#loading');
+const progressBarElem = loadingElem.querySelector('.progressbar');
loadManager.onLoad = () =&gt; {
+ loadingElem.style.display = 'none';
const cube = new THREE.Mesh(geometry, materials);
scene.add(cube);
cubes.push(cube); // 회전 애니메이션을 위해 배열에 추가
};
+loadManager.onProgress = (urlOfLastItemLoaded, itemsLoaded, itemsTotal) =&gt; { // 마지막으로 불러온 자원의 URL, 현재까지 불러온 자원의 수, 총 지원의 수
+ const progress = itemsLoaded / itemsTotal;
+ progressBarElem.style.transform = `scaleX(${progress})`;
+};
</pre>
<p>캐시를 비우거나 인터넷 속도가 느리지 않다면 프로그래스 바가 보이지 않을
수도 있습니다.</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/textured-cube-wait-for-all-textures.html"></iframe></div>
<a class="threejs_center" href="/manual/examples/textured-cube-wait-for-all-textures.html" target="_blank">새 탭에서 보기</a>
</div>
<p></p>
<h2 id="-a-name-cors-a-origin-"><a name="cors"></a> 다른 도메인(origin)에서 텍스처 불러오기</h2>
<p>다른 서버에서 이미지를 불러오려면 해당 서버가 <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS 헤더</a>를
보내줘야 합니다. CORS 헤더가 없다면 Three.js가 이미지를 불러오지 않을 것이고,
에러가 발생할 겁니다. 만약 이미지 호스팅 서버를 운영한다면 해당 서버가 CORS 헤더를
보내는지 확인해보세요.</p>
<p><a href="https://imgur.com">imgur</a>, <a href="https://flickr.com">flickr</a>, <a href="https://github.com">github</a>
등의 사이트는 자신이 호스팅하는 이미지를 사용해도 좋다는 헤더를 보냅니다.
대부분의 웹사이트는 이를 허용하지 않죠.</p>
<h2 id="-a-name-memory-a-"><a name="memory"></a> 메모리 관리</h2>
<p>텍스처는 Three.js 앱에서 메모리를 가장 많이 사용하는 요소 중 하나입니다.
<em>대체로</em> 텍스처는 약 <code class="notranslate" translate="no">너비 * 높이 * 4 * 1.33</code> 바이트의 메모리를 사용합니다.</p>
<p>여기서 압축은 그다지 중요한 요소가 아닙니다. 예를 들어 집이 포함된 장면(scene)을
만든다고 해보죠. 집 안에는 탁자가 있고, 탁자의 윗면에 나무 텍스처를 씌우려고
합니다.</p>
<div class="threejs_center"><img class="border" src="../resources/images/compressed-but-large-wood-texture.jpg" align="center" style="width: 300px"></div>
<p>이 이미지는 매우 고 배율로 압축되어 157kb 밖에 되지 않습니다. 상대적으로
다운 속도는 빠를 것이나, 이 <a href="resources/images/compressed-but-large-wood-texture.jpg">이미지의 실제 크기는 3024 x 3761 픽셀입니다</a>.
위 공식에 따라 이 이미지를 적용해보면,</p>
<pre class="prettyprint showlinemods notranslate notranslate" translate="no">3024 * 3761 * 4 * 1.33 = 60505764.5
</pre><p>무려 <strong>약 60 메가바이트의 메모리</strong>를 사용합니다. 이런 텍스처가 몇 개만 더
있어도 메모리 부족으로 앱을 사용하지 못할 수 있죠(OUT_OF_MEMORY).</p>
<p>극단적인 예제이기는 하나, 이 예제는 텍스처를 사용하는데 숨겨진 비용을 고려해야
한다는 것을 잘 알려줍니다. Three.js가 텍스처를 사용하려면 GPU에 텍스처를
넘겨주어야 하는데, GPU는 <em>일반적으로</em> 압축하지 않은 데이터를 사용하죠.</p>
<p>이 예시의 교훈은 파일의 용량이 아니라 파일의 해상도를 줄어야 한다는 것입니다.
파일의 용량이 작다면 불러오는 속도가 빠를 것이고, 해상도가 낮다면 메모리를
그만큼 적게 사용하겠죠. 얼마나 낮게 만들어야 할까요? 필요한 만큼 퀄리티를
유지한 선에서 가능한 낮게 만드는 게 좋습니다.</p>
<h2 id="-a-name-format-a-jpg-vs-png"><a name="format"></a> JPG vs PNG</h2>
<p>이는 HTML과 마찬가지입니다. JPG는 손실 압축을 사용하고, PNG는 비손실 압축을
사용하는 대신 보통 PNG가 더 용량이 크죠. 하지만 PNG는 투명도를 지원합니다.
PNG는 비-이미지 데이터인 법선 맵(normal maps), 그리고 나중에 살펴볼 다른
비-이미지 데이터를 사용하기에 현재로써는 가장 적당한 파일 형식입니다.</p>
<p>위에서 말했듯, WebGL에서는 JPG가 용량이 더 작긴 해도
PNG 형식보다 메모리 점유율이 낮진 않습니다.</p>
<h2 id="-a-name-filtering-and-mips-a-mips"><a name="filtering-and-mips"></a> 필터링과 Mips</h2>
<p>이 16x16 텍스처를</p>
<div class="threejs_center"><img src="../resources/images/mip-low-res-enlarged.png" class="nobg" align="center"></div>
<p>아래의 정육면체에 적용해보죠.</p>
<div class="spread"><div data-diagram="filterCube"></div></div>
<p>그리고 정육면체를 아주 작게 렌더링합니다.</p>
<div class="spread"><div data-diagram="filterCubeSmall"></div></div>
<p>음, 보기가 어렵네요. 확대해봅시다.</p>
<div class="spread"><div data-diagram="filterCubeSmallLowRes"></div></div>
<p>GPU는 작은 정육면체를 표현할 때 어떻게 각 픽셀의 색상을 결정할까요? 정육면체가
작아도 너무 작아서 1, 2 픽셀 정도라면요?</p>
<p>이게 바로 필터링(filtering)이 있는 이유입니다.</p>
<p>포토샵이라면 근처 픽셀의 평균을 내 해당 1, 2 픽셀의 형태를 결정할 겁니다.
이는 매우 무거운 작업이죠. GPU는 이 문제를 해결하기 위해 <a href="https://ko.wikipedia.org/wiki/%EB%B0%89%EB%A7%B5">밉맵(mipmaps)</a>을
사용합니다.</p>
<p>밉(mips)은 텍스처의 복사본으로, 각 밉은 축소된 이전 밉보다 반만큼 작습니다.
밉은 1x1 픽셀 밉을 생성할 때까지 계속 생성되죠. 위 이미지의 경우 밉은 다음처럼
생성될 겁니다.</p>
<div class="threejs_center"><img src="../resources/images/mipmap-low-res-enlarged.png" class="nobg" align="center"></div>
<p>이제 1, 2 픽셀 정도로 작은 정육면체를 렌더링할 때 GPU는 가장 작거나, 두 번째로
작은 밉을 선택해 텍스처를 적용하기만 하면 되죠.</p>
<p>Three.js에서는 텍스처의 크기가 원본보다 클 때와 작을 때 각각 어떻게 표현할지를
설정할 수 있습니다.</p>
<p>텍스처의 크기가 원본보다 클 때의 필터는 <a href="/docs/#api/ko/textures/Texture#magFilter"><code class="notranslate" translate="no">texture.magFilter</code></a>
속성을 <code class="notranslate" translate="no">THREE.NearestFilter</code>나 <code class="notranslate" translate="no">THREE.LinearFilter</code>로 지정해 설정합니다.</p>
<p><code class="notranslate" translate="no">NearestFilter</code>는 말 그대로 텍스처에서 가장 가까운 픽셀을 고르는 것입니다.
낮은 해상도라면 텍스처가 픽셀화되어 마인크래프트 같은 느낌을 주겠죠.</p>
<p><code class="notranslate" translate="no">LinearFilter</code>는 가장 가까운 4개의 픽셀을 골라 각 픽셀의 실제 거리에 따라 적절한
비율로 섞는 것을 말합니다.</p>
<div class="spread">
<div>
<div data-diagram="filterCubeMagNearest" style="height: 250px;"></div>
<div class="code">Nearest</div>
</div>
<div>
<div data-diagram="filterCubeMagLinear" style="height: 250px;"></div>
<div class="code">Linear</div>
</div>
</div>
<p>텍스처가 원본 크기보다 작을 때의 필터는 <a href="/docs/#api/ko/textures/Texture#minFilter"><code class="notranslate" translate="no">texture.minFilter</code></a>
속성을 다음 6가지 값 중 하나로 지정해 사용합니다.</p>
<ul>
<li><p><code class="notranslate" translate="no">THREE.NearestFilter</code></p>
<p> 원본보다 클 때와 마찬가지로 가장 가까운 픽셀을 선택합니다</p>
</li>
<li><p><code class="notranslate" translate="no">THREE.LinearFilter</code></p>
<p> 원본보다 클 때와 마찬가지로 주변의 가까운 픽셀 4개를 골라 섞습니다</p>
</li>
<li><p><code class="notranslate" translate="no">THREE.NearestMipmapNearestFilter</code></p>
<p> 적절한 밉을 고른 뒤 밉에서 픽셀 하나를 선택합니다</p>
</li>
<li><p><code class="notranslate" translate="no">THREE.NearestMipmapLinearFilter</code></p>
<p> 두 개의 밉을 골라 픽셀을 하나씩 선택한 후, 두 픽셀을 섞습니다</p>
</li>
<li><p><code class="notranslate" translate="no">THREE.LinearMipmapNearestFilter</code></p>
<p> 적절한 밉을 고른 뒤 픽셀 4개를 골라 섞습니다</p>
</li>
<li><p><code class="notranslate" translate="no">THREE.LinearMipmapLinearFilter</code></p>
<p>두 개의 밉을 골라 각각 픽셀을 4개씩 선택하고, 선택한 8개의 픽셀을 하나의 픽셀로 혼합합니다</p>
</li>
</ul>
<p>아래는 6개의 필터를 각각 적용한 예제입니다.</p>
<div class="spread">
<div data-diagram="filterModes" style="
height: 450px;
position: relative;
">
<div style="
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
">
<div style="
background: rgba(255,0,0,.8);
color: white;
padding: .5em;
margin: 1em;
font-size: small;
border-radius: .5em;
line-height: 1.2;
user-select: none;">클릭해<br>텍스처를<br>변경</div>
</div>
<div class="filter-caption" style="left: 0.5em; top: 0.5em;">nearest</div>
<div class="filter-caption" style="width: 100%; text-align: center; top: 0.5em;">linear</div>
<div class="filter-caption" style="right: 0.5em; text-align: right; top: 0.5em;">nearest<br>mipmap<br>nearest</div>
<div class="filter-caption" style="left: 0.5em; text-align: left; bottom: 0.5em;">nearest<br>mipmap<br>linear</div>
<div class="filter-caption" style="width: 100%; text-align: center; bottom: 0.5em;">linear<br>mipmap<br>nearest</div>
<div class="filter-caption" style="right: 0.5em; text-align: right; bottom: 0.5em;">linear<br>mipmap<br>linear</div>
</div>
</div>
<p>여기서 주의깊게 봐야할 건 상단 왼쪽 <code class="notranslate" translate="no">NearestFilter</code>와 상단 중앙의 <code class="notranslate" translate="no">LinearFilter</code>는
밉을 사용하지 않는다는 점입니다. 두 텍스처를 보면 멀리 떨어질수록 픽셀이 깜빡이는 증상이
보이죠. 이는 GPU가 픽셀을 원본 텍스처에서 선택하기 때문입니다. <code class="notranslate" translate="no">NearestFilter</code>는 하나의
픽셀을 선택하고, <code class="notranslate" translate="no">LinearFilter</code>는 4개의 픽셀을 선택하기는 하나, 픽셀을 제대로 표현하진
못합니다. 다른 4개 예제는 그나마 낫고, 그 중 <code class="notranslate" translate="no">LinearMipmapLinearFilter</code>가 제일 깔끔해
보이네요.</p>
<p>위 캔버스를 클릭해보면 텍스처를 바꿀 수 있습니다. 하나는 여태까지 사용하던 텍스처이고,
또 하나는 밉의 각 단계가 다른 색으로 나타나는 텍스처이죠.</p>
<div class="threejs_center">
<div data-texture-diagram="differentColoredMips"></div>
</div>
<p>이 텍스처는 필터의 동작 원리를 이해하기 쉽도록 해줍니다. 위 예제에서 <code class="notranslate" translate="no">NearestFilter</code>와
<code class="notranslate" translate="no">LinearFilter</code>는 아주 멀리까지도 첫 번째 밉을 사용합니다. 반면 상단 오른쪽과 하단 중앙을
보면 밉의 경계가 뚜렷이 보이죠.</p>
<p>다시 원래 텍스처로 바꿔보면 하단 오른쪽이 가장 매끄러운 것이 보일 겁니다. 왜 항상 이
필터를 쓰지 않는 걸까요? 뭐, 레트로 감성을 표현한다든가 하는 이유로 물체들이 픽셀화된
것을 원할 수도 있죠. 하지만 보다 흔한 이유는 성능입니다. 8개의 픽셀 데이터를 처리하는
것보다는 당연히 1개의 픽셀 데이터를 처리하는 게 훨씬 빠르겠죠. 하나의 텍스처로 이런
성능 차이를 체감하기는 어렵지만, Three.js를 사용하다보면 하나의 물체에 4, 5개의 텍스처가
들어가는 경우도 빈번합니다. 4개의 텍스처에서 각각 8개의 픽셀을 처리해야 하니, 이는 한
프레임당 32개의 픽셀을 처리해야 함을 의미하죠. 이는 저사양 기기를 고려할 때 특히 중요히
여겨야 하는 요소입니다.</p>
<h2 id="-a-name-uvmanipulation-a-repeating-offseting-rotating-wrapping-"><a name="uvmanipulation"></a> 텍스처의 반복(repeating), 위치 조절(offseting), 회전(rotating), 래핑(wrapping)</h2>
<p>텍스처에는 반복, 위치, 회전 설정이 있습니다.</p>
<p>Three.js는 기본적으로 텍스처를 반복하지 않습니다. 반복 여부를 설정하는
2가지 속성이 있는데, 하나는 수평 래핑을 설정하는 <a href="/docs/#api/ko/textures/Texture#wrapS"><code class="notranslate" translate="no">wrapS</code></a>이고,
또 하나는 수직 래핑을 설정하는 <a href="/docs/#api/ko/textures/Texture#wrapT"><code class="notranslate" translate="no">wrapT</code></a>입니다.</p>
<p>두 속성은 다음 중 하나로 지정할 수 있습니다.</p>
<ul>
<li><p><code class="notranslate" translate="no">THREE.ClampToEdgeWrapping</code></p>
<p> 텍스처의 가장자리 픽셀을 계속해서 반복합니다</p>
</li>
<li><p><code class="notranslate" translate="no">THREE.RepeatWrapping</code></p>
<p> 텍스처 자체를 반복합니다</p>
</li>
<li><p><code class="notranslate" translate="no">THREE.MirroredRepeatWrapping</code></p>
<p> 텍스처 자체를 반복하되, 매번 뒤집습니다.</p>
</li>
</ul>
<p>양 방향의 래핑을 키려면 다음과 같이 설정할 수 있습니다.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">someTexture.wrapS = THREE.RepeatWrapping;
someTexture.wrapT = THREE.RepeatWrapping;
</pre>
<p>반복은 <code class="notranslate" translate="no">repeat</code> 속성으로 설정할 수 있죠.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const timesToRepeatHorizontally = 4;
const timesToRepeatVertically = 2;
someTexture.repeat.set(timesToRepeatHorizontally, timesToRepeatVertically);
</pre>
<p>텍스처의 위치는 <code class="notranslate" translate="no">offset</code> 속성을 설정해 조절할 수 있습니다. 텍스처 위치의 단위는
텍스처의 크기와 1:1, 즉 0은 위치가 그대로인 것이고 1은 각 축에서 텍스처 크기만큼
이동한 것을 의미하죠.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const xOffset = .5; // 텍스처 너비의 반만큼 이동
const yOffset = .25; // 텍스처 높이의 1/4만큼 이동
someTexture.offset.set(xOffset, yOffset);
</pre>
<p>텍스처의 회전은 <code class="notranslate" translate="no">rotation</code> 속성을 라디안(radians) 단위로 지정해 조절할 수 있습니다.
<code class="notranslate" translate="no">center</code> 속성은 회전의 중심을 정하는 데 사용하죠. <code class="notranslate" translate="no">center</code> 속성의 기본값은 <code class="notranslate" translate="no">0, 0</code>으로
왼쪽 상단을 기준으로 회전하고, <code class="notranslate" translate="no">offset</code>과 마찬가지로 텍스처의 크기를 기준으로
단위가 정해지기에 <code class="notranslate" translate="no">.5, .5</code>로 설정하면 텍스처의 중앙을 기준으로 회전합니다.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">someTexture.center.set(.5, .5);
someTexture.rotation = THREE.MathUtils.degToRad(45);
</pre>
<p>아까 작성한 예제를 수정해 위 설정을 테스트할 예제를 만들겠습니다.</p>
<p>먼저 텍스처를 별도 변수에 담아 나중에 수정할 수 있도록 합니다.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">+const texture = loader.load('resources/images/wall.jpg');
const material = new THREE.MeshBasicMaterial({
- map: loader.load('resources/images/wall.jpg');
+ map: texture,
});
</pre>
<p>간단한 인터페이스를 만들어보죠.
다시 한 번 <a href="https://github.com/georgealways/lil-gui">lil-gui</a>가 등장할 때입니다.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
</pre>
<p>이전 예제처럼 간단한 헬퍼 클래스를 만들어 각도(degrees)로 값을 조절하면
알아서 호도(radians)로 변환해 지정하게끔 해줍니다.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">class DegRadHelper {
constructor(obj, prop) {
this.obj = obj;
this.prop = prop;
}
get value() {
return THREE.MathUtils.radToDeg(this.obj[this.prop]);
}
set value(v) {
this.obj[this.prop] = THREE.MathUtils.degToRad(v);
}
}
</pre>
<p>또 문자열을 숫자형으로 변환시켜줄 클래스도 만듭니다. lil-gui는 값을 문자열로
넘겨주는데, Three.js는 <code class="notranslate" translate="no">wrapS</code>나 <code class="notranslate" translate="no">wrapT</code> 등 enum 값을 지정할 때 숫자형만
받기 때문이죠.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">class StringToNumberHelper {
constructor(obj, prop) {
this.obj = obj;
this.prop = prop;
}
get value() {
return this.obj[this.prop];
}
set value(v) {
this.obj[this.prop] = parseFloat(v);
}
}
</pre>
<p>위에서 만든 클래스를 이용해 설정값을 조절할 GUI를 만듭니다.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const wrapModes = {
'ClampToEdgeWrapping': THREE.ClampToEdgeWrapping,
'RepeatWrapping': THREE.RepeatWrapping,
'MirroredRepeatWrapping': THREE.MirroredRepeatWrapping,
};
function updateTexture() {
texture.needsUpdate = true;
}
const gui = new GUI();
gui.add(new StringToNumberHelper(texture, 'wrapS'), 'value', wrapModes)
.name('texture.wrapS')
.onChange(updateTexture);
gui.add(new StringToNumberHelper(texture, 'wrapT'), 'value', wrapModes)
.name('texture.wrapT')
.onChange(updateTexture);
gui.add(texture.repeat, 'x', 0, 5, .01).name('texture.repeat.x');
gui.add(texture.repeat, 'y', 0, 5, .01).name('texture.repeat.y');
gui.add(texture.offset, 'x', -2, 2, .01).name('texture.offset.x');
gui.add(texture.offset, 'y', -2, 2, .01).name('texture.offset.y');
gui.add(texture.center, 'x', -.5, 1.5, .01).name('texture.center.x');
gui.add(texture.center, 'y', -.5, 1.5, .01).name('texture.center.y');
gui.add(new DegRadHelper(texture, 'rotation'), 'value', -360, 360)
.name('texture.rotation');
</pre>
<p>텍스처의 <code class="notranslate" translate="no">wrapS</code>나 <code class="notranslate" translate="no">wrapT</code> 속성을 변경할 경우 <a href="/docs/#api/ko/textures/Texture#needsUpdate"><code class="notranslate" translate="no">texture.needsUpdate</code></a>를
<code class="notranslate" translate="no">true</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/textured-cube-adjust.html"></iframe></div>
<a class="threejs_center" href="/manual/examples/textured-cube-adjust.html" target="_blank">새 탭에서 보기</a>
</div>
<p></p>
<p>뭔가 많은 것을 배운 것 같지만, 이는 맛보기에 불과합니다. 글을 진행하다보면
텍스처의 정렬과 재질에 적용할 수 있는 다른 9가지의 텍스처에 대해 다룰 기회가
있을 거예요.</p>
<p>일단 다음 장에서는 <a href="lights.html">조명(lights)</a>에 대해 알아보기로 하죠.</p>
<!--
alpha
ao
env
light
specular
bumpmap ?
normalmap ?
metalness
roughness
-->
<p><link rel="stylesheet" href="../resources/threejs-textures.css"></p>
<script type="module" src="../resources/threejs-textures.js"></script>
</div>
</div>
</div>
<script src="/manual/resources/prettify.js"></script>
<script src="/manual/resources/lesson.js"></script>
</body></html>