JSONモデルを透過させた際に表示に差異がある

Question

表示に差異があるのですが、この原因を知りたいです。

デモ：https://mo49.github.io/qiita/20160908/opacity.html

表からみると、青い板まで透けない

裏からみると、赤い板まで透けている

該当コードは以下のものです。
中央の蝶のモデルのみtransparent=falseになっています

const DATA_SRC = [
  './data/butterfly.json',
  './data/wall1.json',
  './data/wall2.json'
]
for (let [i, src] of DATA_SRC.entries()) {

  const loader = new THREE.JSONLoader();
  loader.load(src, (geometry) => {

    const material = new THREE.MeshBasicMaterial();
    material.side = THREE.DoubleSide;
    material.opacity = (i == 0) ? 1.0 : 0.5;
    material.transparent = true;
    material.depthTest = true;
    switch (i) {
      case 0:
        material.color = new THREE.Color(0x00ff00);
        material.transparent = false;
        break;
      case 1:
        material.color = new THREE.Color(0xff0000);
        break;
      case 2:
        material.color = new THREE.Color(0x0000ff);
        break;
      default:

    }

    const mesh = new THREE.Mesh( geometry, material );
    mesh.position.set(0,0,0);
    this.scene.add( mesh );
  });
}

Answer 1

これってもしかしてすべてのオブジェクトの position は (0, 0, 0) ですか？
であれば、たんにレンダリングの順番によるものかと思います。

おそらく位置が重なっているために、適切にソートができずに、先に読み込まれたモデルが先にレンダリングされているのだと思います。

蝶だけが透けるのは、不透明オブジェクトと半透明オブジェクトでレンダリングのQueueが異なっていて、まず先に不透明オブジェクトが描かれ、次に半透明オブジェクトが描かれます。
結果として、必ず半透明オブジェクトがあとにレンダリングされることになり、蝶だけは必ず透けて見えている状態になります。

逆に、プレーンに関しては同じ半透明オブジェクトQueueに存在し、今回のケースの場合はオブジェクトが同じ場所に位置しているため、先に描かれたものが「偶然」奥にある場合に、透けているように表現される、ということだと思います。
（なので自分の環境だと逆に青が透けていませんでした）

モデルの位置を微妙にずらしてみたらうまくレンダリングされませんか？

Comments

[grmn]

毎度ありがとうございます。
モデルの位置をたった0.1ずらしただけですが、うまく表示されました！
これからはレンダリングの順番も意識しようと思います！
https://mo49.github.io/qiita/20160908/opacity2.html