[ #9 ] ThreeJS의 Texture - 1탄

 

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

 

 

🍀 Texture 이란?

Texture은 간단히 말하자면,
Geometry의 표면을 감싸는 이미지..! 라고 할 수 있다.

하지만 이건 간단히 말한 것이고...
실제로는 다양한 타입의 Texture들이 존재하고 있다.

João Paulo의 'Door Texture'를 통해 알아보쟈!

• Color(or Albedo)
  • 가장 간단한 Texture
  • Texture의 픽셀만 가져와 Geometry에 적용

color

 

• Alpha
  • Texture의 흰색은 보이고, 검은색은 보이지 않는 부분임을 명시
  • grayScale의 Texture

alpha

• Height
  • Vertex를 이동하여 약간의 부조(튀어나온 느낌)를 만듦
  • Height Texture를 활용하기 위해선, 적절한 Subdivision이 필요

height

• Normal
  • Vertex의 이동은 없지만, 표면의 방향이 다르게 보이도록 빛의 방향을 조정
  • Vertex의 이동이 없기 때문에, Subdivision이 필요하지 않음
  •  더 좋은 성능으로 작은 디테일을 추가할 수 있음

normal

• Ambient Occlusion
  
  • 표면 틈새의 그림자를 가짜로 만드는 grayScale의 Texture
  • 물리적으로 정확하지는 않지만, 대비를 만드는 데에 확실히 도움이 됨

ambientOcclusion

• Metalness
  • 어느 부분이 금속성(흰색)이고 비금속성(검은색)인지 지정하는 grayScale의 Texture
  • 반사 효과를 만드는 데에 도움이 됨

metalness

• Roughness
  • Metalness와 함께 제공되는 grayScale의 Texture
  • 어느 부분이 거칠고(흰색) 어느 부분이 매끄러운지(검은색) 지정
  • 빛을 분산시키는 데에 도움이 됨

roughness

 

"PBR"

Texture는 PBR이라고 부르는 원칙을 따릅니다.

PBR 이란?
Physically Based Rendering의 약자로, 물리적 기반 렌더링을 나타냄
현실적인 결과를 얻기 위해 현실의 물리법칙을 적용시켜 렌더링하는 기술

 

 

🍀 Texture Load

" 이미지 가져오기 "

import imageSource from './image.png';
// Vite 프로젝트의 경우, static에 넣은 image는
// import imageSource from '/image.png'; 로 가져오면 됨

console.log(imageSource);
// 이미지의 경로가 찍혀있다면 제대로 가져온 것

" 이미지 로드 "

[ JS 사용 ]

const image = new Image(); // image 객체 생성
const texture = new THREE.Texture(image); // texture 객체에 image 할당
// 위에는 아직 image객체에 이미지가 들어가 있지 않은 상태
image.addEventListener('load', () => // load 완료 시에,
{
    texture.needsUpdate = true; // texture을 업데이트하여 로드된 이미지를 넣어줌
    texture.colorSpace = THREE.SRGBColorSpace;
    // ⭐ 최신 ThreeJS에서는 sRGB로 encode되어야 하는 map을 위해,
    // ⭐ 위와같이 colorSpace를 Three.SRGBColorSpace로 설정해줌 
})
image.src = '/textures/door/color.jpg'; // image 객체에 이미지 할당

// ...

const material = new THREE.MeshBasicMaterial({ map: texture });
// map 속성을 통해 Material에 Texture 적용

[ TextureLoader 사용 ]

const textureLoader = new THREE.TextureLoader();
// TextureLoader 호출
const texture = textureLoader.load(
    '/textures/door/color.jpg',
    () => // 로딩 완료 시, 반환 함수
    {
        console.log('loading finished');
    },
    () => // 로딩 중, 반환 함수
    {
        console.log('loading progressing');
    },
    () => // 에러 발생 시, 반환 함수
    {
        console.log('loading error');
    }
)
texture.colorSpace = THREE.SRGBColorSpace;
// ⭐ 최신 ThreeJS에서는 sRGB로 encode되어야 하는 map을 위해,
// ⭐ 위와같이 colorSpace를 Three.SRGBColorSpace로 설정해줌

👆 Bruno Simon 센세께서 위 textureLoader.load( ) 안의 요소 중, loading progressing을 위한 메서드는 사용하지 않는다고 하네요! 
보통 loading progressing은 파일들의 로딩 정도를 알기 위해 사용하는데, 그러한 작업들이 잘 작동되지 않는다고 합니다..!

그러면 로딩의 정도는 어떻게 알 수 있을까요?
바로바로...

" Loading Manager "

three.js docs

const loadingManager = new THREE.LoadingManager();

loadingManager.onStart = () => // 로딩 시작 시
{
    console.log('loading started');
}
loadingManager.onLoad = () => // 로딩 완료 시
{
    console.log('loading finished');
}
loadingManager.onProgress = () => // 로딩 중
{
    console.log('loading progressing');
}
loadingManager.onError = () => // 에러 발생 시
{
    console.log('loading error');
}

const textureLoader = new THREE.TextureLoader(loadingManager);
// 위에서 사용했던 TextureLoader의 안에 인자로 넣어주기만 하면.. 끝!
// 이렇게 만든 textureLoader는 여러번 사용하여,
// 여러개의 Texture을 만들어줘도 문제가 없습니다

 

 

🍀 UV Unwrapping

const geometry = new THREE.BoxGeometry(1, 1, 1); // 박스

const geometry = new THREE.SphereGeometry(1, 32, 32); // 구

const geometry = new THREE.ConeGeometry(1, 1, 32); // 원뿔

const geometry = new THREE.TorusGeometry(1, 0.35, 32, 100); // 도넛

👆 위와 같이 다양한 Geometry에 동일한 Texture를 적용시켜보면,
Geometry 마다 다른 방식으로 늘어나거나, 줄어들거나, 반복 사용하여 덮고 있는 것을 볼 수 있다!

👆 위 이미지와 같이, 'Geometry를 덮고 있던 Texture을 평면에 펼친다'라는 것이 UV Unwrapping이라는 겁니다!