How to fix the opacity and depth error in instanceUnifromMesh with shader

Questions
, , ,
1

I generated over 10000 blocks using intancedUniformMesh and made the blocks transparent by modifying the uniform opacity in the material shader, but it resulted in a lot of incorrect occlusion. If it is an independent multiple object, I can set the depth text or writing to modify whether it is displayed transparently. What should I do with the intanceduniformmesh object?Please
codesandbox

const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshPhongMaterial({
      transparent: true,
    });
    // material.onBeforeCompile = function (shader) {
    //   console.log(shader.fragmentShader);
    //   //find the uniform opacity
    // };
    this.instancedMesh = new InstancedUniformsMesh(
      geometry,
      material,
      info.length
    );
    info.map((d, i) => {
      this.instancedMesh.setMatrixAt(i, this._genMatrix(d));
      this.instancedMesh.setColorAt(i, new THREE.Color(0xffffff));
      this.instancedMesh.setUniformAt("opacity", i, i % 6 < 2 ? 0 : 1);
    });

微信图片_20240521194419
微信图片_20240521194419796×812 32.9 KB

2

Three.js is not an engine and doesn’t solve complex depth sorting / assets management beyond few objects. Providing this “out of the box” regardless of the cases, is the territory of commercial engine like Unreal/Unity.

Also InstancedUniformsMesh is an external plugin from another author, seem not related to Three.js maintainers.

1 Like
3

I would keep an eye on BatchedMesh: Add support for Instanced rendering with sorting, frustum culling by gkjohnson · Pull Request #28404 · mrdoob/three.js · GitHub improving the situation. Or consider using alpha hashing (perhaps combined with TRAA or a denoiser) for transparency with fewer sorting-related challenges.

2 Likes