テクスチャを使った半透明の表現はやってみるとなかなか難しいです。
Three.jsでは単純にアルファチャンネルを持つPNGを直接テクスチャに指定しても半透明にはなりません。
マイクラのリソースパックをいじる感覚でやると、かなり勝手が違っていて悩みます。
Three.jsでテクスチャの半透明レンダリング
Three.jsでは半透明を表現するにはいくつかの方法があります。
Material.opacityを使う方法。
Material.alphaMapを使う方法です。
Material.opacity
opacityはそのマテリアルが使われているジオメトリに対して透明度を指定できます。
これはアルファチャンネルを持たないテクスチャを使用する場合に適しています。
css の opacityと同様に、0 から 1 の浮動小数点で指定します。
これはテクスチャ全体に均一な半透明処理を行うだけで、マイクラの透明処理とは異なります。
Material.alphaMap
alphaMap は Material.mapに対して部分的な透明処理を施したい場合に適しています。
これはPNG画像でいうところのアルファチャンネルにあたり、グレイスケール画像を指定する必要があります。
ピクセルが黒(#000000)ならば透明に、ピクセルが白(#FFFFFF)ならば不透過になります。
Material.transaprent に true を設定していないと無視されてしまうので注意。
Canvasオブジェクトのcontext2d.getImageData を使って自力でアルファMapを作成するのもいいですが、PNGからアルファチャンネルをImageとして取得できるPNGライブラリを使うと楽かもしれません。
半透明テクスチャを使うときのハマリポイント
Material.Map の罠
Material.map はアルファチャンネル付きのPNG画像をそのまま表示することはできません。
例えばMaterial.transparent = falseの時、Material.alphaTest プロパティに 1 未満の値がセットされていた場合、半透明部分はすべて透明と認識されてしまいます。デフォルト値は 0 であるため、全体が半透明なテクスチャ画像を指定すると、完全に見えなくなります。
またMaterial.transparent = trueの時、Material.map に半透明な画像を指定するとPNG画像のカラーチャンネルとアルファチャンネルは #FFFFFF をbackground-colorとして合成されて色味が薄くなってしまいます。
したがって、Material.map にテクスチャをセットする時は予めアルファチャンネルを除去しておく必要があります。
Material.depthWrite の罠
Material.depthWriteプロパティは各オブジェクトの座標と大きさで奥行き判別して高速にオブジェクトの重なり描画を行う機能です。Three.jsではこれがデフォルトで true になっています。
しかしこれは不透過メッシュの描画を高速化するための機能であるため、半透明オブジェクトの重なり合いが発生すると正しく描画されません。
スライムなどの半透明オブジェクトを組み合わせたオブジェクトは、デフォルトのままだと中身が正しく描画されませんので false に設定しておく必要があります。
face と Mesh の半透明処理の違い
Meshオブジェクト同士は透明処理とともにライティングも正しく影響しますが、同一Mesh内のポリゴン(Geometry.faces[])同士は正しい合算が行われないようです。各faceの表裏(cullface)がfaceごとに影響し合わないのか、すべての面を含めたGeometryで作成したメッシュを描画した場合では、重なった面のライティングが不自然になることがあります。
これはGeometry内のポリゴンがすべて同じGeometryの中心座標を起点としている為で、カメラからの深度が同一とみなされのが原因のようです。
Opaqueオブジェクトのレンダリングを最適化するdepthWrite, depthTestプロパティをfalseにしても、その保証対象はMesh単位でしかないようで、私は半透明オブジェクトのレンダリングの際はMeshの構成単位はなるべく細かくしてTHREE.Object3Dなどでグルーピングするようにしています。
おわり
半透明レンダリングは面倒です。
AOマッピングやシェーダーなどが組み合わさるとさらに厄介になりそうです。
ゲーム中のスライムブロックの描画を見ても、角度によってオブジェクトの表示/非表示を切り替えているようで、その苦労が伺えます。
これはTHREE.js/WebGLというよりも元となったOpenGLの技術的な仕様のようで、まだまだ発展途上なのかなと感じます。