Rendering artifacts on flat surfaces

[javagl]

What happened?

There are some strange rendering artifacts that appear on flat surfaces. They look like "screen-space" lines that depend on the view direction.

Reproduction steps

Start the first sandcastle from https://community.cesium.com/t/debug-lines-in-cesium-120/34306 , and rotate the view.

The comment at https://community.cesium.com/t/debug-lines-in-cesium-120/34306/4 summarizes the issue and the commit where it likely has been introduced.

Sandcastle example

See the linked forum thread

Environment

Browser: All
CesiumJS Version: Problem appears in 1.120. It does not appear in 1.119
Operating System: All

[jjhembd]

@javagl or @bertt, can you provide a Sandcastle for testing?
I see a possibly related problem on glTF models, but I can't be sure that the problem on this tileset is the same.

In the glTF PBR Extensions Sandcastle, if I set "Direct lighting only" and look at the "Water Bottle" model from the side opposite the light direction, I see some artifacts that appear to be reflections from the wrong side of the surface:

These go away if I change these lines in pbrLighting.glsl:

float computeDirectSpecularStrength(vec3 normal, vec3 lightDirection, vec3 viewDirection, vec3 halfwayDirection, float alphaRoughness)
{
    float NdotL = dot(normal, lightDirection);
    float NdotV = abs(dot(normal, viewDirection));
    // ...

to clamp (NOT abs) both NdotL and NdotV to the range [0.0, 1.0]. The rendering then becomes:

[javagl]

^{The link to the PBR extensions sandcastle is https://sandcastle.cesium.com/index.html?src=glTF%20PBR%20Extensions.html}

They can be found in the Sandcastle/Demo that @bertt linked to in the forum thread. But since they depend on the exact view direction and the time of the day (!), here is everything frozen in a standalone sandcastle:

https://sandcastle.cesium.com/index.html#c=xVdtU+M2EP4rmnxKpkZ+fwscUxHgLtdAGAjXXptOR7GVRIctZ2Q5QDv575VsQpzgUMp1pv4ged+0z65k7TrKWC7AkpJ7wsEHwMg96JGcFin8UvLa41ZU0r2MCUwZ4eOWBv4aMwBmSTYhXTDFSU60MVt1DsdszKYFiwTNGIg4wYKcpRMSxyS+ZVT0ign5mIhpu1MtEJW+OcmLREjfJQ8AHEmHecbzLvit4oC1SD2TYjolXIHrAkOr8R8FGU6nORHb/ChLFxkjTIweFxKta1r2lrRg0sD2ajxRKo5bNz00QNcy3I0oxQ8SlWX/XudRJnnGhrXS/gG2+S7Y3kvYltMA+8tZz24AbUJDA+uhAb+SrIf/IBYrCP7HaA5K0WZ8GdCag/MS7nN0MyKPOBYZV84/z5LROZjyLAVzIRZ5V9dnVMyLCZQB6d/wEs8SvVSqQVwSnsvzr+wtaDwL1o6r5O053AWnyi7GAnfxYpHQCKtvSZ/Jr+agsjyc4Jx4joYQ6iF0Jid0ilAfnSD0EaFbNX9C6KsS/oTQnZoHCGVKaYiQoeYrhBxleYNOztQ8Qid9dI7Qz+jkVs2/oJOv6OXTQ1f3L+nZabCltaFr+n2kbynV6FK/pGvr1ehG/6/o7+Jp9N+IdxdPczyNdGM8u/6b8b/p6ff076PRO+hX8v9Gevld9Cv782/owfvorUtH3WwDwmZi3gWeE+y9TTY346vV622Vq+7Ut+p3I+YzpWw7oWe/5are729r3bpD1/d2JDeC01jeyeY+KNbetKQkn5M9GVlwmlJBl1vyHZ3yohbS/6QQSm9HBMDV8KY/6g8vt+tR9VwOry/QQJaXHclqh6YsppFa3dgRpJkK29ni1o33FxcmLfeErVJSd7XatswjWYc28pLcs9Layd4itzpUIyei4Oyp25KclWrWqg5MBZjIBgzfYyrW7d+FYkJV+1TLhvJHFrVLr6r+XGF1Rsat9fsf4xb4AVzIN8gxi7O03dGqFlFMu692guvGsUIipHU+zXgq0TzhGK1ZOSQ4F5cZF/PbxSg7pw8kPuc4JW3l6Um7h7k8IRQzu4R+SmackLx94LvQdC3HCDRghzB0vNB3NWAZHeW7jB+WowyB0wfp/RmJlFfdMSw3AW7OK8Rx3C6tOodAZXNLL5LIOIbyK1PXQZU6uVGCsrKkd+ut9gZ127Rcx7csaAeBaXp2YPiyg3F82zbMAFquEdjy3dKAY/i2E3gwdE3bDCXXrTKecSrbrJcuPhEcUza7oiKaX2dJ0jZg4AVe6NqeGdheEAahdGRA1/VMmRzT9g3fCn1HAx60AtsMXCvw5WCF4fOePcUbJVl0B6OCc9Xg0ZRsNu9zkcioTuXul9vRz7PAM0z5T2EZlnNgBAeGPzL8rml0DePXcav6g2hpraNcPCbkeH2ef6SyfeRCtkdJG0JdkHSRyDVzfVJEd0TAKM87h5XykV43PYrpEtD4Q8NPDIgS2ftJybRIkhv6Jxm3jo90qf/CNMnK1A1lY5fgR6U2N48HFRNCeKRLstlSZFkywXxn5b8B

For the Water Bottle, there's a bit of noise, but that's probably some roughness from the texture. The glTF in the sandcastle above just has a plain metallic-roughness, so the artifacts look like sharp lines. But from the overall appearance and the "behavior" of the artifacts when zooming/moving, I'd say that the reason is very likely the same in both cases.

[javagl]

An aside: I'm sure that this is not a coincidence:

but didn't do the math to explain it 🙂