SVG path seems to render weird in some conditions

Questions
, , ,
1

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.

2

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?

3

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

4

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).

5

Thank you for your help @Mugen87
Here you are : https://jsfiddle.net/evxgo9yp/4/

6

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

Setting logarithmicDepthBuffer to true when creating the renderer fixes the issue: https://jsfiddle.net/bzym1a3n/

7

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
8

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.

9

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