Hey, this problem is doing my head in.
I created an animated blob using an icosahedron geometry and shader material. I displace the vertices with some noise and warping in the vertex shader, and created some specular and ibm fragment shader.
Most of the time, like 90% of the time-ish, it renders just fine. But sometimes my object only partially renders and leaves transparent gaps. This only sporadically happens and is usually resolved when I fiddle with the shader’s uniforms or toggle wireframes on/off.
What it is supposed to look like:
What it sometimes looks like:
I asked some colleagues to open the same thing on their machine, and for them it looks glitched 100% of the time.
I am on macOS 12.5.1, using Arc (Chromium 108). My colleagues are on macOS 12.5 and 13.x and using Firefox and Chrome, and for them it always looks glitched.
Codesandbox is up!
Any help would be appreciated. Thus far I tried disabling different parts of my shaders to see if I caused the problem myself with some faulty code. But also in a minimal case; e.g. no vertex displacement and flat color output in frag, it still glitches.
Thanks!
@stefvw93 –
Unfortunately, I cannot reproduce this glitch on my system (Windows). It looks like whole triangles are missing (as if their vertex data are invalid, or they are facing the opposite direction). Does the problem occur when the number of triangles is smaller (e.g. not icosahedron with 64 splits, but with just 6)? Can you pinpoint specific value for uTime that will always lead to a broken image? (if you can find such value, it can be hardcoded and somehow it might help you to debug).
– Pavel
You can test if this is a normals issue by changing the fragment shader output to:
gl_FragColor = vec4(normal, 1.0);
You should see this (I use Win so no glitches for me):
If on your colleagues computers the gradient is not smooth where you see glitched triangles, then flipped normals are the cause.
It seems to work on my peer’s machine with less triangles. What does this imply? Is there some segmentes limit I should maintain? I thought an icosahedron with detail level of 64 should not be such a problem?
1 Like
You can test if this is a normals issue by changing the fragment shader output to:
In the codesandbox there is an option to toggle normals in the gui (top right). It yields the same result – holes / only partially rendered sphere.
I’m convinced it is due to some mistake in my shader code. I shared your bubblegum with the same people who reported the render glitches, and the bubblegum does work for them. Also some other similar webgl applications are working perfectly fine for them.
I tried isolating different parts of my shader code, but even without the surface noise and fragment shader outputting a single, flat color, it still happens…
@stefvw93 –
There are limitations on buffer sizes, number of variables, textures etc. These limitations vary for each GPU model and graphic card. You can check your current WebGL parameters here: WebGL Report and see whether anything looks too small or restrictive.
For reference, here is the WebGL 2 Report for my machine (your example works fine here):
– Pavel
1 Like
Thanks a bunch! That will be very useful.
1 Like
I seem to have resolved the issue by merging the icosahedron vertices and computing vertex normals like so, thus reducing the amount of vertices.
const geometry = mergeVertices(new THREE.IcosahedronGeometry(radius, lod));
geometry.computeVertexNormals();
My knowledge of hardware and browser webgl engine is not extensive enough to make any reasonable comment on why exactly this fixed my issue, maybe somebody else who comes across this post may elaborate.
Thanks everybody who responded, for your time and brainpower 
2 Likes
