Three.js에서 투명도가있는 텍스처를 설정하면 노이즈가 발생합니다.

소개

Three.js r97에서 파티클을 제작하고 있을 때 스마트폰으로 표시된 파티클이 매우 유감스러운 외형이 되었으므로 비망록도 겸해 해결 방법을 실어 보겠습니다.

얼마나 유감이었는지

아래 그림과 같이 파티클 내부에 수수께끼의 노이즈가 섞여 버립니다. 게다가 애니메이션을 시키면 수수께끼의 노이즈가 엉망이고 굉장히 기분 나쁜 외형이 됩니다.


같은 파티클을 PC에서 보면 문제없이 표시되었습니다.


파티클에 설정한 텍스처에는 캔버스로 그려진 것을 사용하고 있습니다.

※ 실제로 사용하고 있는 텍스처는 검정색 배경이 아닙니다.

그 때, 기술하고 있던 코드는 이하와 같았습니다. (텍스처의 로딩 부분을 발췌)

hoge.js

// 前略...
var texture = new THREE.texture(canvas); // このままだと表示がおかしくなる
// 後略...

원인

new THREE.Texture(...)로 텍스처를 작성하는 경우, 통상은 부호 없음 byte형으로서 처리되어 버립니다. 이 상태에서 투명도가 있는 텍스처를 만들려고 하면 올바른 표시를 할 수 없게 되는 것 같습니다.

(Textures - Three.js docs, htps // three js. 오 rg / cs / # 아피 / 엔 / 콘 s ts / tsu s 부터)

대처법

이번의 경우, 텍스처를 Float형으로 처리하도록 지정해 주면 해결했습니다.

hoge.js

// 前略...
var texture = new THREE.texture(canvas); // これだけじゃダメ
texture.type = THREE.FloatType; // 追加してあげる
// 後略...

스마트폰에서도 깨끗하게 표시됩니다.

요약

투명도가 있는 텍스처를 취급할 때는, 텍스처의 처리 정밀도를 지정해 주는 것이 중요합니다.