Geometry flickering in BatchedMesh with opacity and different colors on camera control

Questions
, ,
1

Hello everyone,

I am experiencing geometry-flickering issues between different colored geometries, when the setColorAt() function is used to assigned different colors to elements of a batchedMesh with opacity. As shown in the recording, the flickering does not occur for meshes with the same color.

The code snippet used to create the batched mesh:

// Set up Material
const mat = new MeshLambertMaterial();
mat.transparent = true;
mat.opacity = 0.3;
mat.depthWrite = false;

// Set up the BatchedMesh
const batchedMesh = new BatchedMesh(geometryCount, vertexCount, vertexCount * 2, mat);

// Add a list of geometries to the batched mesh
for (const geometry of geometries) {
    const meshId = batchedMesh.addGeometry(geometry);

    // Color the first two meshes red, and the remaining ones green (just for the shown example)
    const color = meshId < 2 ? new Color(0xff0000) : new Color(0x00ff00);
    batchedMesh.setColorAt(meshId, color);
}

I can’t find a way to get rid of this flickering. Any suggestions on how to fix this or why this might be happening only between the objects of different colors? I’m kind off new to three.js and would very much appreciate any help or explanations!

Thanks for helping me in advance

2

Try: logarithmicDepthBuffer = true on your renderer constructor. If that doesn’t fix it…

Try turning depth test off on the material…

material.depthTest = false;

or
material.depthWrite = false;

If any of these things fix it, then you know its a depth buffer precision problem.

You may be able to improve the problem by increasing camera.near and reducing camera.far as much as possible to still contain your scene and not clip into the camera or disappear in the distance.

I don’t think BatchedMesh is related to this problem. This is a normal issue with all rendering.

3 Likes
3

Thank you very much for the reply, I greatly appreciate your help!

Unfortunately none of the given hints helped. I already had the material.depthWrite = false set. This fixes the issue perfectly, If the BatchedMesh is only using one single color.

Using multiple colors makes the depth problem appear again, but is seems like it only appears between the different colors. All geometries with the same color are not affected by this.

I don’t think BatchedMesh is related to this problem. This is a normal issue with all rendering.

Maybe not directly with the BatchedMesh itself, but as mentioned it appears to be a problem with multiple colors used in one Mesh. Looking into the code here, the colors get overwritten by the values from the coloring texture inside the vertex shader.

I also tested separating the model in two batchedMeshes with different colors. (with depthWrite = false). As expected, the flickering did not occur here

Do you might have any Idea how the color could cause this behavior? The depthWrite does exclude from writing into the depth buffer. Is it possible, that the color somehow is relevant during this process?

4

Ahh ok I rewatched your video and I think this is something simpler. namely a drawing order issue. Seems like batched mesh doesn’t perform any depth sort by default, so transparent stuff is always rendering in the same order.

Just to verify, do you have three.js docs enabled on your batched mesh?

If you do have sortObjects=true and It’s still flickering, then there might be an issue with the positions of your meshes. You could try using material.blending = THREE.AdditiveBlending and see if the flicker goes away? You may have to darken the colors to prevent it blowing out to white…