Texture

Three.js에서 Texture는 Materia에 붙여서 사용하게 된다.

 

 

물체에 그림을 어떻게 입혀야 할까? 

 

gemetric modeling과 Texture Mapping이 있다.

 

vertex 하나하나 geometry를 모델링하는 것보다 텍스처를 매핑하는 것이 훨씬 더 효율적이다. 

 

geometric 모델링은 각 버텍스 하나하나 마다 색을 할당한다. 얼마나 많은 연산이 일어나야 할까?

 

대신 texture mapping은 실제 이미지를 표현에 감싸는 식으로 동작한다.

 

이러한 이미지를 실제로 모델의 어느 부분에 붙여야 하는지 알려주는 행위가 필요하다.

 

이를 이미지의 uv좌표와 모델의 버텍스 좌표가 어디에 매핑되는지 알려주어야 한다.

 

 

다양한 이미지가 있을 수 있다. gray scale, color 등등.. 얻어진 이미지를 뭐라 부르냐면 WebGL에서는 sampler라고 말한다. 

 

이를 통해 color, depth, stencil, Displacement, bump 등이 가능하다

 

three.js는 다양한 텍스쳐 매핑이 가능하다.

 

• color map
• specular map
• displacement map
• normal (bump) map
• roughness map
• metalness map
• alpha map
• emissive map
• enviroment map
• clearcoat map, clearcoat normal, roughnessMap map

 

 

이 중 큐브형태로 환경 맵을 배경으로 하고 물체에 이러한 환경맵을 반사도와 반사이미지를 지정해 보자. 

 

  const path = 'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/';
  const urls = [
          path+'px.jpg', path+'nx.jpg', 
          path+'py.jpg', path+'ny.jpg', 
          path+'pz.jpg', path+'nz.jpg'
        ];

  const reflectionCube = new THREE.CubeTextureLoader().load( urls );
  scene.background = reflectionCube;

const material3 = new THREE.MeshPhongMaterial( 
  { color: 0x00ffff, envMap: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.5 } );
  
const material4 = new THREE.MeshLambertMaterial( 
  { color: 0xffffff, envMap: reflectionCube, combine: THREE.MixOperation, reflectivity: 1 } );
  
const material5 = new THREE.MeshLambertMaterial( 
  { color: 0xffff00, envMap: reflectionCube, combine: THREE.MixOperation, reflectivity: 0 } );
  
  
  
  
  출처 : https://github.com/learn-cg/three.js

 

 

 

실제 렌더링된 결과는 서로 다르다. 

 

우선 각 반사이미지를 envMap 속성에 로드한 텍스처를 넣어주었다. 

 

evnMap 속성에 텍스처를 할당한 경우 환경 맵 텍스처를 나타내는데, 이는 360도 환경 이미지를 텍스처로 변환한 것으로 물체의 반사 이미지를 결정하는 데 사용되게 됩니다.

 

여기서는 큐브맵을 사용했는데, 6개의 면으로 이루어진 큐브 모양의 맵으로 장면에서 물체의 반사 이미지를 결정합니다. 

 

그렇기에 각 큐브의 면에 반사된 이미지가 보여야 정상인데 왜 첫 번째와 두 번째 박스는 아예 안보이거나 절반만 보이는 것일까?

 

그것은 combine 속성과 reflectivity 값에 달렸다. 

 

Three.js의 combine 속성의 기본값은 MultiplyOperation입니다. 이는 환경 맵 텍스처와 재질의 컬러 또는 텍스처를 곱하여 결합합니다.  각 각의 RGB 성분을 곱한 결괏값으로 최종적으로 재질의 색상이 반영됩니다.

 

하지만 현재는 MixOpertaion으로 결정했는데 이 것은 환경 맵 텍스처와 재질의 컬러 또는 텍스처를 섞어서 결합하는 방법입니다.

 

reflectivity 속성은 이 믹스하는 값을 조절할 수 있습니다. 0일 경우 재질의 컬러나 텍스처만 표현되고 1일 경우 환경 맵 텍스처만 표시됩니다. 

 

예를 들어 reflectivity 값이 0.5이고, 재질의 컬러 값이 (1, 0, 0)이고, 환경 맵 텍스처의 특정 픽셀 값이 (0, 0, 1)일 경우, 결합된 픽셀 값은 (0.5, 0, 0.5)가 됩니다. 이렇게 결합된 픽셀 값으로 최종적으로 재질의 색상이 환경 맵에 반영되는 것입니다.