[three.js] Material 여러가지 map을 적용해 더욱 사실적인 텍스쳐를 만들어보자

5강 재질 part4 - 텍스쳐2

[three.js] Material에 텍스쳐를 입혀보자

저번 시간에는 Material의 map 속성으로 이미지를 텍스쳐로 만들어 입히고, 이 텍스쳐의 여러 가지 속성을 다뤄보았다.

이번 시간에는 다양한 map을 통해 더 세밀하게 텍스쳐를 고도화하는 방법을 배워본다.

---

 

준비하기

연습하기 전, 사용할 텍스쳐 이미지를 준비해야 한다.

여기에서 텍스쳐 이미지를 다운로드한다.

[Glass Window 002

Glass Window 002 – Free seamless texture, 1024 x 1024, with the following maps: Diffuse Normal Displacement Roughness Ambient Occlusion Opacity

3dtextures.me](https://3dtextures.me/2020/07/15/glass-window-002/)

해당 이미지의 해상도와 map 속성에 지정할 수 있는 이미지가 어떤 것이 포함되어 있는지 알 수 있다.

 

TextureLoader로 이미지 파일에서 텍스쳐 가져오기

TextureLoader를 이용

const textureLoader = new THREE.TextureLoader();

const map = textureLoader.load("/assets/images/glass/Glass_Window_002_basecolor.jpg");
const mapAO = textureLoader.load("/assets/images/glass/Glass_Window_002_ambientOcclusion.jpg");
const mapHeight = textureLoader.load("/assets/images/glass/Glass_Window_002_height.png");
const mapNormal = textureLoader.load("/assets/images/glass/Glass_Window_002_normal.jpg");
const mapRoughness = textureLoader.load("/assets/images/glass/Glass_Window_002_roughness.jpg");
const mapMetalic = textureLoader.load("/assets/images/glass/Glass_Window_002_metallic.jpg");
const mapAlpha = textureLoader.load("/assets/images/glass/Glass_Window_002_opacity.jpg");

---

 

map 속성만 적용했을 때

const material = new THREE.MeshStandardMaterial({
  map: map,
});

• 입체감이 뚜렷하지 않다.

 

normalMap

• 법선 벡터를 이미지화한 것
• 법선 벡터는 메쉬의 표면에 대한 수직 벡터로, 광원의 영향을 계산하는 데 사용한다.

const material = new THREE.MeshStandardMaterial({
      map: map,
      normalMap: mapNormal
    });

• map만 적용했을 때보다 입체감이 보인다.

 

normalMap이 입체감을 부여하는 방식

normalMap만 적용하고 법선벡터를 시각화하면 다음과 같이 보인다.

본래 지정되지 않은 특정 지점에 대한 법선 벡터는 구성 좌표의 법선 벡터들을 이용해 보간 계산된다.

하지만 normalMap을 사용하면 박스 표면의 법선 벡터를 normalMap 이미지의 RGB 값을 이용해 계산하게 된다. 따라서,

• 메쉬 표면의 각 픽셀에 대해 법선 벡터를 지정할 수 있다
• 각 픽셀 단위로 광원 효과가 달라져 입체감을 표현할 수 있게 된다.

normalMap은 지오메트리 좌표를 변형하지는 않는다. 일종의 착시 효과를 이용해 입체감을 부여한다.

따라서 지오메트리의 매우 적은 좌표 구성만으로도 입체감을 효과적으로 표현할 수 있다.

 

displacementMap

• normalMap과 달리 지오메트리 좌표를 변형시켜 입체감을 표현한다.
• 맵 이미지의 픽셀값이 밝을수록 좌표의 변위가 커지게 된다.
• 지오메트리 좌표를 변형시키기 때문에 메쉬 표면에 대한 구성 좌표를 제공하여야 한다.

아래 결과물은 box segment값은 256, sphere segment값은 512로 설정하였다.

const material = new THREE.MeshStandardMaterial({
  normalMap: mapNormal,

  displacementMap: mapHeight,
  displacementScale: 0.2,
  displacementBias: -0.15
});

• displacementScale, displacementBias: 변위를 조정할 수 있는 속성

 

displacementMap를 효과적으로 사용하려면

지오메트리 표면을 여러 개의 세그먼트로 분할해주어야 한다. 많은 세그먼트로 분할될수록 맵 효과가 잘 적용된다.

하지만 좌표를 더 많이 추가하는 것은 렌더링 속도 면에서 비효율적이므로 적절한 노말 맵과 displacementMap 효과를 위한 적절한 세그먼트 분할이 필요

 

aoMap

• 텍스쳐 이미지에 미리 음영 효과를 그려 넣은 것

왼: normalMap, aoMap만 적용했을 때 결과 오: map, normalMap, displacementMap, aoMap 적용

const material = new THREE.MeshStandardMaterial({
  map,
  normalMap: mapNormal,

  displacementMap: mapHeight,
  displacementScale: 0.2,
  displacementBias: -0.15,

  aoMap: mapAO,
  aoMapIntensity: 1  // 그림자 강도 지정
});

 

aoMap을 사용할 시 유의할 점

aoMap 효과를 내려면 두 가지 작업이 필요하다.

1. scene에 AmbientLight 추가: 모든 mesh의 전체 면에 대해서 균일하게 비추는 광원
2. 지오메트리 속성에 uv2 데이터 지정
3. box.geometry.attributes.uv2 = box.geometry.attributes.uv sphere.geometry.attributes.uv2 = sphere.geometry.attributes.uv

aoMap을 이용하면 미리 만들어진 세밀한 그림자 효과를 지정할 수 있다.

 

roughnessMap

• 거칠기에 대한 재질 적용
• 맵 이미지의 픽셀 값이 밝을수록 거칠기가 강해짐
• roughness 속성으로 거칠기 조정
  • 낮을수록 반짝이는 플라스틱 느낌이 난다

roughness: 0.5

 

metalnessMap

• 금속 재질에 대한 느낌을 부여하는 맵
• metalness 속성으로 조정 (기본값: 0)

 

alphaMap

• 투명도에 대한 맵 속성
• 이미지의 픽셀값이 밝을수록 불투명하게 되는데 픽셀값이 완전한 검은색일 때 완전히 투명
• transparent: true 속성을 줘서 투명도를 활성화해주어야 함
  • 메쉬의 뒷면도 렌더링 해야 되기 때문에 side: THREE.DoubleSide 추가

 

lightMap

• 지정된 이미지의 색상으로 발광하는 느낌을 표현
• lightMapIntensity 속성으로 강도 조절

 

---

마무리

여러 가지 텍스쳐 맵핑 속성을 다뤄보면서 물체에 입체적인 효과를 더해주는 방식을 이해했다.

[three.js] Material - 오브젝트의 재질을 다양하게 설정해보자

이전에 Material 객체를 다뤄보면서 opacity, metalness, roughness 등의 속성으로 텍스쳐를 다뤘었다.

이런 속성은 오브젝트의 전체 픽셀에 동일하게 적용된다.

 

하지만 이번 시간에 다뤘던 것처럼 이미지를 이용해 맵핑을 하면, 픽셀마다 특정한 속성값을 적용시킬 수 있다.

보다 사실적인 3D 객체를 구현하기 위해서는 텍스쳐 맵핑으로 입체감을 부여하는 것이 필수인 것 같다.

 

BumpMap

bumpMap은 normalMap을 설정하면 무시되는 속성이다.

normalMap은 X, Y, Z 축에 대한 법선 벡터를 가지고 있는 반면, bumpMap은 Y축 벡터값만 가지고 있다.

실무에서는 bumpMap보단 normalMap이 주로 사용된다고 한다.