[ #9.5 ] ThreeJS의 Texture - 2탄

★☆ 이 글은 Three.js journey 강의를 통해 작성하게 되었습니다 ☆★  

 

👇 1탄에서 이어지는 내용입니다

[ #9 ] ThreeJS의 Texture - 1탄

 

 

🍀 Texture 변형

[ 🌳 Repeat ]

const colorTexture = textureLoader.load('/textures/minecraft.png');
colorTexture.colorSpace = THREE.SRGBColorSpace;
// Repeat
// 1. 하나씩 변경
colorTexture.repeat.x = 2;
colorTexture.repeat.y = 3;
// 2. 한번에 변경
colorTexture.repeat.set(2, 3);

반복설정은 적용이 된 것 같다만.. 모습이 영 이상하죠?
완벽한 반복설정을 위해서는 필요한 코드가 더 있습니다!

// 반복
colorTexture.wrapS = THREE.RepeatWrapping;
colorTexture.wrapT = THREE.RepeatWrapping;
// 뒤집으며 반복
colorTexture.wrapS = THREE.MirroredRepeatWrapping;
colorTexture.wrapT = THREE.MirroredRepeatWrapping;

RepeatWrapping / MirrorRepeatWrapping

[ 🌳 Offset ]

// 1. 하나씩 변경
colorTexture.offset.x = 0.5;
colorTexture.offset.y = 0.5;
// 2. 한번에 변경
colorTexture.offset.set(0.5, 0.5);

절반씩 움직인 모습

[ 🌳 Rotation ]

colorTexture.rotation = Math.PI * 0.25; // 45deg 회전

45deg 회전한 모습

회전의 중심축이 '왼쪽 아래'인 것이 보일까요?

이것도 충분히 멋지지만, 중심을 기준으로 이미지를 돌리고 싶을 때가 있죠?

colorTexture.rotation = Math.PI * 0.25;
// 중심축 옮기기
// 1. 하나씩 변경
colorTexture.center.x = 0.5;
colorTexture.center.y = 0.5;
// 2. 한번에 변경
colorTexture.center.set(0.5, 0.5);

 

 

🍀 Filtering & Mipmapping

👇 아래 영상을 보면, 큐브의 윗면이 비스듬히 보이거나, 먼곳의 이미지일 수록, Texture에 블러가 적용되는 것을 볼 수 있다!
이것이 바로 Filtering과 Mipmapping의 적용 현상이다!

 

" Mipmapping "

Mipmapping이란 1x1 크기의 Texture를 얻을 때까지, 계속해 더 작은 버전(반절의 width, height를 가진 Texture)의 Texture를 생성하는 것을 말한다.

이때 생성되는 모든 크기별 Texture들이 GPU로 전송되고, GPU는 가장 적합한 버전의 Texture을 선택하여 보여주게 되는 것이다!

이러한 Mipmapping은 별다른 설정없이도, ThreeJS와 GPU가 제공하는 기본적인 기능이지만...
가장 적합한 버전의 Texture을 어떻게 고를지, 고러한 Filter의 값을 우리가 필요에 따라 다르게 설정할 수 있다!!

[ 🌳 Minification Filters ]

Minification Filter는 Texture Pixel이 렌더링할 픽셀보다 작을 때 사용한다! (압축한다는 뜻)
보통 Texture가 Geometry 표면에 비해서 클 때 발생한다.

아래는 Minification Filter의 종류들이당!

• THREE.NearestFilter
  • 설명 :  가장 가까운 Texture Pixel을 선택하여 Texture 렌더링
  • 특징 :  빠른 속도, 계단 현상(aliasing)이 발생할 수 있음
  • 용도 :  픽셀 아트 스타일의 그래픽, 성능이 중요한 경우
• THREE.LinearFilter
  • 설명 :  주변 Texture Pixel들의 평균값을 사용하여 Texture 렌더링
  • 특징 :  부드러운 이미지, 더 많은 계산 필요
  • 용도 :  고품질의 그래픽, 부드러운 Texture 변환이 필요한 경우
• THREE.NearestMipmapNearestFilter
  • 설명 :  가장 가까운 mipmap 수준에서 가장 가까운 Texture Pixel을 선택하여 Texture 렌더링
  • 특징 :  성능이 좋음, mipmap을 사용하여 원거리에서 더 나은 품질 제공
  • 용도 :  성능이 중요한 경우, Texture의 세부 레벨 조정이 필요한 경우
• THREE.NearestMipmapLinearFilter
  • 설명 :  가장 가까운 mipmap 수준에서 Texture Pixel들을 보간하여 Texture 렌더링
  • 특징 :  mipmap을 사용하여 원거리에서 부드러운 Texture 제공, 중간 성능
  • 용도 :  적절한 성능과 품질의 균형이 필요한 경우
• THREE.LinearMipmapNearestFilter
  • 설명 :  두 개의 인접한 mipmap 수준 사이를 선형 보간하여 가장 가까운 Texture Pixel을 선택하여 Texture 렌더링
  • 특징 :  원거리에서 Texture가 부드럽게 전환, 더 많은 계산 필요 
  • 용도 :  고품질의 그래픽, 부드러운 Texture 변환이 필요한 경우 
• THREE.LinearMipmapLinearFilter (default)
  • 설명 :  두 개의 인접한 mipmap 수준 사이를 선형 보간하여 가장 가까운 Texture Pixel들을 선형 보간하여 Texture 렌더링
  • 특징 :  가장 부드러운 Texture 제공, 계산량이 가장 많음
  • 용도 :  최상의 품질이 필요한 경우, 성능 저하를 감수할 수 있는 경우

한번 THREE.NearestFilter를 사용해 보자!
현재 Texture로 입힐 이미지는 렌더링할 크기보다 훨씬 큰 이미지이다. (압축되겄쥬?)

colorTexture.minFilter = THREE.NearestFilter;

default / THREE.NearestFilter 적용 모습

확실히 이미지가 선명해졌지만(부드러움↓), 뒷부분의 Texture에는 계단 현상이 발생한 모습을 볼 수 있다!

[ 🌳 Magnification Filters ]

Magnification Filter는 Minification Filter와 반대로 Texture Pixel이 렌더링할 픽셀보다 클 때 사용한다! (확장한다는 뜻)
보통 Texture가 Geometry 표면에 비해서 작을 때 발생한다.

Minification Filter에는,

• THREE.LinearFilter (default)
• THREE.NearestFilter

가 있다.. (자세한 설명은 Minification Filter 부분을 참고!)

한번 THREE.NearestFilter를 사용해 보자!
현재 Texture로 입힐 이미지는 렌더링할 크기보다 훨씬 작은 이미지이다. (확장되겄쥬?)

colorTexture.magFilter = THREE.NearestFilter;

default / THREE.NearestFilter 적용 모습

확실히 이미지가 선명해졌죠? (부드러움↓)

THREE.NearestFilter는 다른 필터보다 가볍기 때문에, 성능적으로 좋은 면을 지니고 있다.
또한, mipmapping 기능을 전혀 사용하지 않기 때문에, 기능을 비활성화하여 GPU의 부하를 줄일 수 있다.

하지만, 거리가 먼곳의 오브젝트의 Texture라고 봤을땐, 유리하지 않은 면도 있는 Filter 입니다..!
상황에 맞춰서 골라 사용하시길-! ☆

colorTexture.generateMipmaps = false;
colorTexture.minFilter = THREE.NearestFilter;
// magFilter의 default 값은 THREE.LinearFilter 로써,
// 역시 mipmapping을 사용하지 않는 Filter이므로 따로 설정하지 않아도 됨!

 

 

🍀 Texture 준비 자세

" weight "

Texture에 적용할 이미지 파일의 크기를 줄이므로써, 좋은 성능을 챙길 것!

" size "

Texture에 적용할 이미지 파일의 width, height를 2의 거듭제곱의 수로 설정해줄 것!

자동생성되는 mipmapping에서 절반의 크기의 Texture를 생성할 때 1x1 크기까지 계속하여 반복하게 되는데,
완성된 mipmap에서 2의 거듭제곱이 아닌 수를  나누거나 늘리며 사용할 경우 좋지 않은 결과를 얻을 수 있음니다..!

" data "

jpg, png 중 선택하여 골라야 할 땐, 특징을 살려 고를 것!

[ jpg ]

• 투명도 지원 X
• 비교적 정확한 픽셀 값을 가지지 않음
• 가벼운 용량

[ png ]

• 투명도 지원 O
• 비교적 정확한 픽셀 값을 지님
• 무거운 용량

투명도를 주기 위해선, png를 사용한다는 방법도 있지만, jpg의 color와 alpha Texture를 함께 사용하여 투명도를 표현하는 방법도 있습니다.
위 방법들 중 더 최적화된 방법을 택하는 것은 우리의 선택..!

또한 Normal과 같이 정확한 픽셀의 값이 필수인 Texture은 꼭 png의 이미지를 사용하여야 좋은 결과물을 얻을 수 있다는 사실도 잊지마세요..!

 

 

🍀 Texture 보물고

우리의 Bruno Simon 센세께서 추천해주신 사이트들 입니다..

Poliigon - 3D Textures, Models and HDRIs

 

3D TEXTURES

 

 

Arroway Textures – Professional Textures