Three.jsで透明度のあるテクスチャを設定するとノイズが発生する

3096 ワード
備忘録 JavaScript three.js WebGL パーティクル JavaScript テキストリンク

はじめに

Three.js r97でパーティクルを制作していた時に、スマートフォンで表示されたパーティクルがとても残念な見た目になったので、備忘録も兼ねて解決方法を載せてみます。

どう残念だったのか

下の画像のように、パーティクルの内部に謎のノイズが混ざってしまっています。さらに、アニメーションをさせると、謎のノイズがうごめいて凄く気持ち悪い見た目になります。

同じパーティクルをパソコンで見ると問題なく表示されました。

パーティクルに設定したテクスチャには、canvasで描画されたものを使用しています。

※実際に使用しているテクスチャは黒背景ではありません。

その際、記述していたコードは以下の通りでした。（テクスチャの読み込み部分を抜粋）

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

原因

new THREE.Texture(...)でテクスチャを作成する場合、通常は符号なしbyte型として処理されてしまいます。この状態で、透明度のあるテクスチャを作成しようとすると正しい表示ができなくなってしまうようです。

（Textures - Three.js docs, https://threejs.org/docs/#api/en/constants/Textures より）

対処法

今回の場合、テクスチャをFloat型で処理するように指定してあげると解決しました。

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

スマートフォンでもきれいに表示されます。

まとめ

透明度のあるテクスチャを扱うときは、テクスチャの処理精度を指定してあげる事が肝要です。