Three.js glTF 로드시 "THREE.WebGLRenderer: image is not power of two" 경고 메시지 문제

1. 문제 원인

해당 문제는 Threejs에서 Webgl1을 사용하는 경우, 이미지 사이즈가 2의 제곱수가 아닌 이미지를 지원하지 않아 발생하는 문제로

1) 텍스쳐의 이미지 사이즈가 2의 제곱 수가 아닌 경우
2) 이미지 사이즈가 2의 제곱 수로 자동으로 리사이즈
3) 경고 메시지를 띄움.

오브젝트의 개수가 많은 경우 속도를 저하시키기도 함.

[경고 메시지 예시]

2. 해결 방안

자동 이미지 리사이즈 및 경고 메시지 발생 현상은 Webgl1을 Webgl2로 버전을 변경하여 해결할 수 있음
※ Webgl2는 Webgl1을 거의 100%호환하고 있어서 호환성 문제는 발생하지 않을 것으로 예상됨

• 관련 문서 : https://discourse.threejs.org/t/warning-from-threejs-image-is-not-power-of-two/7085

3. 변경 사항

렌더러 생성 시 Webgl2를 사용

기존 코드)

// 렌더러 생성
this._renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true, canvas: canvas,
  context: context });

수정한 코드)

// 렌더러 생성
const canvas = document.createElement('canvas');
const context = canvas.getContext('webgl2');
this._renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true, canvas: canvas, 
  context: context });

4. 추가 변경 사항

[추가적으로 발생한 경고 메시지]

위와 같이 변경하는 경우 리사이즈는 일어나지 않지만, 텍스쳐 관련 필터 사용에 대해 추가적인 경고 메시지가 뜨게 되어 아래와 같은 코드를 추가

loader.load(url, (data) => {
  //scene의 자식요소를 순회하면서 texture의 필터를 교체
  data.scene.traverse( function ( child ) {
    if ( child.isMesh ) {
      child.material.map.minFilter = THREE.LinearFilter
      child.material.map.wrapS = child.material.map.wrapT = THREE.ClampToEdgeWrapping
    }
  } );
...

5. 참고 링크

https://stackoverflow.com/questions/52236033/how-to-dynamically-overlay-a-texture-from-a-gltf-model-three-js
https://discourse.threejs.org/t/what-version-of-webgl-does-three-use/19649
https://webgl2fundamentals.org/webgl/lessons/ko/webgl1-to-webgl2.html