SVG path seems to render weird in some conditions

Hello all,

My question is related to this issue (closed at the moment) on GitHub : SVG path seems to render weird in some conditions · Issue #25936 · mrdoob/three.js · GitHub

I got glitches on an object imported from a SVG path.
These glitches appears only if there is ocean shader in my scene (but i don’t know if it is the problem).

It is not clear what happens so i come here as asked by @Mugen87 to go deeper and analyze my question.

Somebody has ideas to understand what is going on?
If other informations are needed please let me know.

It would be best if you demonstrate the surface flickering with a live example. Do you think it’s possible to modify webgl_shaders_ocean accordingly and share the code as a fiddle?

Yes, of course.
Never used it, but i will work on it tonight. I suppose it is not that difficult.

Use this template: three.js dev template - module - JSFiddle - Code Playground

It already points on dev and shows how to import addons (like OrbitControls or SVGLoader).

Thank you for your help @Mugen87
Here you are :

What you see is indeed z-fighting due to insufficient depth buffer precision.

Setting logarithmicDepthBuffer to true when creating the renderer fixes the issue:

BTW: The insufficient depth buffer precision happens because the scale of your scene is so large which requires a huge view frustum. You should also be able to fix the issue without a logarithmic depth buffer by scaling down your scene and then update the near and far values of your camera.

1 Like

Thank you so much for this fast answer !
For my information, does it affect something to enable logarithmicDepthBuffer ?
Is it more memory consuming on GPU or CPU side?
Or it causes other side effects?

I will try your solution to stay in default configuration.

I will open a new thread about culling (with InstancedBufferGeometry) you pointed out in my videos.
Another question raise my head because i face a problem to solve with fragment shader only updating the first instance of InstancedBufferGeometry.

I see that i need more training on three.js before trying to use it.
I will search answers in this forum to avoid annoy people with unnecessary questions.
Do you have any recommended website to gain more knowledge?
I try to search for extensive resources but i mostly find only articles about a specific question.

There is a small overhead in the shaders but I doubt it is measurable.