How to prevent the rendering effect

I am using webgl renderer in my application.
renderer = new THREE.WebGLRenderer( { antialias: true, preserveDrawingBuffer: true } );
I am using some sprite text to show labels of the object. while zoom in and zoom out, some texts are hiding and showing itself. I think some rendering effects might be the reason for this. how to prevent this

Maybe depth conflicts / z fighting, if the text competes with other geometry on the same depth.

Maybe near plane clipping?

Or something related to the preserved drawing buffer?

Why are you setting preserveDrawingBuffer to true?

to preserve the buffers until manually cleared or overwritten.

I have tried with preserveDrawingBuffer=false also. Please have a look into this screen recorded video. This might be useful to you to know the exact issue https://aws1.discourse-cdn.com/standard17/uploads/threejs/original/2X/1/19a1f11b195cd36b24061241a4faa03f7e67ad5c.webm

false is the default value. You normally don’t need to set it to true unless you want to render trails or similar effects (see https://threejs.org/examples/webgl_trails).

In general it is not recommended to change the default value since setting preserveDrawingBuffer to true can cause noticeable performance issues.

Can you also share a live example of the reported behavior? The effect demonstrated in your video can be caused by many things.

1 Like

Oh. Okay. Thank you