<div id="readability-page-1" class="page"><div><img src="https://velog.velcdn.com/images/hyounglee/post/ac3e6c38-fdb5-437d-96e5-caa445b2c563/image.jpg">
개체에 텍스쳐를 입혀보자!
Three.js에서 텍스쳐는 PBR원리를 따른다. PBR이란, 물리 기반 렌더링(Physically Based Rendering)을 의미한다. 이는 실제 현실의 물리 법칙을 따른다는 것을 의미한다. 빛 반사, 금속 재질의 특성 등등.. 다른 엔진들(유니티, 블렌더) 등도 마찬가지다.
참고하면 좋은 링크들 
<a href="https://marmoset.co/posts/basic-theory-of-physically-based-rendering/">https://marmoset.co/posts/basic-theory-of-physically-based-rendering/</a> 
<a href="https://marmoset.co/posts/physically-based-rendering-and-you-can-too/">https://marmoset.co/posts/physically-based-rendering-and-you-can-too/</a>
<h2 id="텍스쳐의-종류">텍스쳐의 종류</h2>
<ul>
<li>Color(albedo) : pixels of the texture that applied on the geometry</li>
<li>Alpha : grayscale image where white will be visible</li>
<li>Height : grayscale image that will move the vertices to create some relief</li>
<li>Normal : lure the light into the face differently</li>
<li>Ambient occlusion : grayscale image that fake shadow</li>
<li>Metalness : metalic(white) &amp; non-metalic(black)</li>
<li>Roughness : rough(white) &amp; smooth(black)</li>
</ul>
<h2 id="textureloader">TextureLoader</h2>
하나의 TextureLoader로 여러 texture를 로드할 수 있다! 여러 번 호출 할 필요 없음.
<pre><code>const textureLoader = new THREE.TextureLoader()
const texture = textureLoader.load('/textures/door/color.jpg')
texture.colorSpace = THREE.SRGBColorSpace

// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()

/**
 * Objects
 */
const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2)
const material = new THREE.MeshBasicMaterial({ map: texture })
const mesh = new THREE.Mesh(geometry, material)

scene.add(mesh)</code></pre>
로더에는 첫번째 인자로 image path를 입력하고, 뒤이어 세가지 인자로 콜백 함수를 넘길 수 있다. 로드 상태에 대한 값을 얻을 수 있다.
<pre><code>const texture = textureLoader.load(
	'/textures/door/color.jpg',
	() =&gt; {
		console.log('loaded')
	},
	() =&gt; {
		console.log('progress')
	},
	(error) =&gt; {
		console.log(error)
	}
)</code></pre>
<h2 id="loadingmanager">LoadingManager</h2>
로딩 매니저를 사용하면 여러 텍스쳐의 로드를 추적할 수 있다. 여러가지 에셋을 받아와야 하는 경우 이를 활용해 로딩바 등을 노출하는데 사용할 수 있다.
<pre><code>// textures
const loadingManager = new THREE.LoadingManager()
loadingManager.onStart = () =&gt; {
	console.log('onStart')
}
loadingManager.onProgress = () =&gt; {
	console.log('onProgress')
}
loadingManager.onLoaded = () =&gt; {
	console.log('onLoaded')
}
loadingManager.onError = () =&gt; {
	console.log('onError')
}
const textureLoader = new THREE.TextureLoader(loadingManager)
const colorTexture = textureLoader.load('/textures/door/color.jpg')
colorTexture.colorSpace = THREE.SRGBColorSpace
const alphaTexture = textureLoader.load('/textures/door/alpha.jpg')
alphaTexture.colorSpace = THREE.SRGBColorSpace
const betaTexture = textureLoader.load('/textures/door/beta.jpg')
betaTexture.colorSpace = THREE.SRGBColorSpace</code></pre>
<img src="https://velog.velcdn.com/images/hyounglee/post/c8e6c98b-392d-4bdf-994d-85deb9eaa39a/image.png">
<h2 id="uv-unwrapping">UV unwrapping</h2>
개체의 생김새에 맞게 텍스쳐를 입히기 위해서는 UV unwrapping 과정을 거쳐야 한다. 이는 마치 생일선물의 포장을 뜯었을 때의 모양을 보는 것과 같다.
<img src="https://velog.velcdn.com/images/hyounglee/post/9cca618b-482a-42f6-ae69-a3d3a61012f6/image.png">
<h2 id="transform-texture">Transform Texture</h2>
<pre><code>const textureLoader = new THREE.TextureLoader(loadingManager)
const colorTexture = textureLoader.load('/textures/door/color.jpg')
colorTexture.colorSpace = THREE.SRGBColorSpace

colorTexture.repeat.x = 2 // 가로로 2개 들어가는 크기
colorTexture.repeat.y = 3 // 세로로 3개 들어가는 크기
colorTexture.wrapS = THREE.RepeatWrapping // 가로 반복
colorTexture.wrapT = THREE.RepeatWrapping // 세로 반복
colorTexture.offset.x = 0.5
colorTexture.offset.y = 0.5
colorTexture.rotation = Math.PI * 0.25 // (반바퀴가 Math.PI) 0.25는 45도
colorTexture.center.x = 0.5
colorTexture.center.y = 0.5

// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()

/**
 * Objects
 */
const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2)
const material = new THREE.MeshBasicMaterial({ map: colorTexture })</code></pre>
<h2 id="mipmapping">Mipmapping</h2>
<h2 id="minification-filter">Minification filter</h2>
개체가 극히 축소되었을 때 픽셀이 깨지는 것을 방지한다.
<pre><code>colorTexture.minFilter = THREE.NearestFilter</code></pre>
<h2 id="magnification-filter">Magnification filter</h2>
텍스쳐가 확대되었을 때(작은 이미지가 확대) 픽셀이 블러리해지는 것을 방지한다.
<pre><code>colorTexture.magFilter = THREE.NearestFilter</code></pre>
<img src="https://velog.velcdn.com/images/hyounglee/post/909eee25-9d7b-4d00-8f73-7095321ee882/image.png"> 
<img src="https://velog.velcdn.com/images/hyounglee/post/5dff2666-7763-4c92-b918-62b7d8bcdd78/image.png">
<pre><code>// mipmapping deactivation
colorTexture.generateMipmaps = false</code></pre>
<h2 id="texture에서-중요한-세가지">texture에서 중요한 세가지</h2>
<ul>
<li>파일 무게는 작을 수록 좋다.<ul>
<li>jpg는 화질이 떨어질 수 있으나 가볍고, png는 화질 저하가 적으나 무겁다.</li>
<li><a href="https://tinypng.com/">TinyPNG</a> 같은 소프트웨어를 사용해서 파일 크기를 줄여서 사용하자. (화질 저하 가능성 있음.)</li>
</ul></li>
<li>이미지의 크기도 작을 수록 좋다.<ul>
<li>GPU의 한계가 있기 때문에 텍스쳐는 작을 수록 좋다.</li>
<li>mipmapping을 고려해서 파일의 width와 height는 2의 제곱이 좋다.<ul>
<li>512x512</li>
<li>1024x1024</li>
<li>512x2048</li>
</ul></li>
</ul></li>
<li>데이터<ul>
<li>투명한 것을 제공하는 것이 좋다. jpg에서는 투명을 사용할 수 없지만 grayscale 이미지를 활용할 수 있다. 비교해보고 선택하자.</li>
<li>normal 텍스쳐는 화질 저하가 없는 것이 좋으므로 .png를 사용하자.</li>
</ul></li>
</ul>
작업물의 퍼포먼스와 연관이 되는 것이기 때문에 좋은 텍스쳐를 찾고, 용량 관리하는 것이 중요하다.
<h2 id="텍스쳐-레퍼런스">텍스쳐 레퍼런스</h2>
<ul>
<li><a href="http://poliigon.com/">poliigon.com</a></li>
<li><a href="3dtextures.me">3dtextures.me</a></li>
<li><a href="arroway-textures.ch">arroway-textures.ch</a></li>
</ul></div></div>

(งᐖ)ว

개체에 텍스쳐를 입혀보자!
Three.js에서 텍스쳐는 PBR원리를 따른다. PBR이란, 물리 기반 렌더링(Physically Based Rendering)을 의미한다. 이는 실제 현실의 물리 법칙을 따른다는 것을 의미한다. 빛 반사, 금속 재질의 특성 등등.. 다른 엔진들(유니티, 블렌더) 등도 마찬가지다.
참고하면 좋은 링크들
https://marmoset.co/posts/basic-theory-of-physically-based-rendering/
https://marmoset.co/posts/physically-based-rendering-and-you-can-too/
텍스쳐의 종류
Color(albedo) : pixels of the texture that applied on the geometry
Alpha : grayscale image where white will be visible
Height : grayscale image that will move the vertices to create some relief
Normal : lure the light into the face differently
Ambient occlusion : grayscale image that fake shadow
Metalness : metalic(white) & non-metalic(black)
Roughness : rough(white) & smooth(black)
TextureLoader
하나의 TextureLoader로 여러 texture를 로드할 수 있다! 여러 번 호출 할 필요 없음.
const textureLoader = new THREE.TextureLoader()
const texture = textureLoader.load('/textures/door/color.jpg')
texture.colorSpace = THREE.SRGBColorSpace
// Canvas
const canvas = document.querySelector('canvas.webgl')
// Scene
const scene = new THREE.Scene()
/**
 * Objects
 */
const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2)
const material = new THREE.MeshBasicMaterial({ map: texture })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)
로더에는 첫번째 인자로 image path를 입력하고, 뒤이어 세가지 인자로 콜백 함수를 넘길 수 있다. 로드 상태에 대한 값을 얻을 수 있다.
const texture = textureLoader.load(
    '/textures/door/color.jpg',
    () => {
        console.log('loaded')
    },
    () => {
        console.log('progress')
    },
    (error) => {
        console.log(error)
    }
)
LoadingManager
로딩 매니저를 사용하면 여러 텍스쳐의 로드를 추적할 수 있다. 여러가지 에셋을 받아와야 하는 경우 이를 활용해 로딩바 등을 노출하는데 사용할 수 있다.
// textures
const loadingManager = new THREE.LoadingManager()
loadingManager.onStart = () => {
    console.log('onStart')
}
loadingManager.onProgress = () => {
    console.log('onProgress')
}
loadingManager.onLoaded = () => {
    console.log('onLoaded')
}
loadingManager.onError = () => {
    console.log('onError')
}
const textureLoader = new THREE.TextureLoader(loadingManager)
const colorTexture = textureLoader.load('/textures/door/color.jpg')
colorTexture.colorSpace = THREE.SRGBColorSpace
const alphaTexture = textureLoader.load('/textures/door/alpha.jpg')
alphaTexture.colorSpace = THREE.SRGBColorSpace
const betaTexture = textureLoader.load('/textures/door/beta.jpg')
betaTexture.colorSpace = THREE.SRGBColorSpace
UV unwrapping
개체의 생김새에 맞게 텍스쳐를 입히기 위해서는 UV unwrapping 과정을 거쳐야 한다. 이는 마치 생일선물의 포장을 뜯었을 때의 모양을 보는 것과 같다.
Transform Texture
const textureLoader = new THREE.TextureLoader(loadingManager)
const colorTexture = textureLoader.load('/textures/door/color.jpg')
colorTexture.colorSpace = THREE.SRGBColorSpace
colorTexture.repeat.x = 2 // 가로로 2개 들어가는 크기
colorTexture.repeat.y = 3 // 세로로 3개 들어가는 크기
colorTexture.wrapS = THREE.RepeatWrapping // 가로 반복
colorTexture.wrapT = THREE.RepeatWrapping // 세로 반복
colorTexture.offset.x = 0.5
colorTexture.offset.y = 0.5
colorTexture.rotation = Math.PI * 0.25 // (반바퀴가 Math.PI) 0.25는 45도
colorTexture.center.x = 0.5
colorTexture.center.y = 0.5
// Canvas
const canvas = document.querySelector('canvas.webgl')
// Scene
const scene = new THREE.Scene()
/**
 * Objects
 */
const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2)
const material = new THREE.MeshBasicMaterial({ map: colorTexture })
Mipmapping
Minification filter
개체가 극히 축소되었을 때 픽셀이 깨지는 것을 방지한다.
colorTexture.minFilter = THREE.NearestFilter
Magnification filter
텍스쳐가 확대되었을 때(작은 이미지가 확대) 픽셀이 블러리해지는 것을 방지한다.
colorTexture.magFilter = THREE.NearestFilter
// mipmapping deactivation
colorTexture.generateMipmaps = false
texture에서 중요한 세가지
파일 무게는 작을 수록 좋다.
jpg는 화질이 떨어질 수 있으나 가볍고, png는 화질 저하가 적으나 무겁다.
TinyPNG 같은 소프트웨어를 사용해서 파일 크기를 줄여서 사용하자. (화질 저하 가능성 있음.)
이미지의 크기도 작을 수록 좋다.
GPU의 한계가 있기 때문에 텍스쳐는 작을 수록 좋다.
mipmapping을 고려해서 파일의 width와 height는 2의 제곱이 좋다.
512x512
1024x1024
512x2048
데이터
투명한 것을 제공하는 것이 좋다. jpg에서는 투명을 사용할 수 없지만 grayscale 이미지를 활용할 수 있다. 비교해보고 선택하자.
normal 텍스쳐는 화질 저하가 없는 것이 좋으므로 .png를 사용하자.
작업물의 퍼포먼스와 연관이 되는 것이기 때문에 좋은 텍스쳐를 찾고, 용량 관리하는 것이 중요하다.
텍스쳐 레퍼런스
poliigon.com
3dtextures.me
arroway-textures.ch

TIL 116 | Three.js 기초 - Textures

댓글