This artifact happens on Windows, but not on Mac. I am guessing it’s different implementation of WebGL. I understand that vertex position y in a shader will sometimes be 1 and sometimes not because of a float point precision. My ultimate goal is to basically do something like this where you can have a mesh where you draw differently colored sections:
Here you can see artifact that happens at the top because my section area top ranges from 0.75 to 1.0. How am I able to create clean solution so that if section area is defined to be 1.0 it doesn’t create the artifact that you can see in the image?
Here is also codesandbox I managed to quickly set up:
codesandbox-cylinder-artifact-example
I see your codesandbox but its an AStar simulation?
Is the artifact in your image, the black stuff at the top ?
Yes it is the top part that in the image, as well as on the example, which should be correct now.
You talking about the red+green mess on the top? That’s z fighting. When you have 2 surfaces on roughly the same plane but not exactly identical vertices you get that effect since the math resolves slightly differently across each polygon and the determination of in-front/behind with the underlying polygon depth, wobbles around based on the mathematical inaccuracy of floating point. To fix it, you either need to give them some separation… or remove the faces you don’t want to zfight.
If you read through the example code I provided in codesandbox you can see that there is single cylinder object. The “z fighting” here comes from shader code that’s attached to material of a cylinder. The main point is that it doesn’t happen on my Mac, but it happens on Windows.
Basically shader is trying to draw color sections to my cylinder based y value of an object’s position attribute. As in this case
where I am trying to color from 0.5 to 1.0 y value. I just need clean solution for getting rid of it dynamically. You have to take into consideration that section value can be passed to shader and it can be dynamic.
Ok, so I got where my confusion was coming from. First of all example should’ve had <= symbol instead and artifact disappears. This would’ve made me not even post question, because the artifact is gone. But in my other example I didn’t post I had problem because the section values I passed to shader were interpolated on Windows by default, hence artifact.
Ah sorry… didn’t realize it wasn’t 2 cylinders. Glad you fingered it out.
