Sheen rendering errors while panning

[echadwick-artist]

Description

There seem to be rendering errors when panning across a glTF asset that uses KHR_materials_sheen. The surface gets unexpectedly brighter and darker, with abrupt changes in the falloff of the sheen or Fresnel.

Example: GlamVelvetSofa

The assets on this page are copied from glTF-Sample-Assets.

Live Demo

(https://ericchadwick.com/gltf/debug/original-assets.html#GlamVelvetSofa)

Video recorded in Windows 11 Home 22H2 using Firefox 116.0.3: https://github.com/google/model-viewer/assets/40177036/1f0b5332-e5a6-46cb-9f3e-fe5d5d6fdf1d

Version

• model-viewer: v3.2.0

Browser Affected

• [x ] Chrome 116.0.5845.111 (Windows)
• [ ] Edge
• [x] Firefox 116.0.3 (Windows)
• [ ] IE
• [x] Safari 15.3 (MacOS)

OS

• [ ] Android
• [x] iOS 16.6
• [ ] Linux
• [x] MacOS Monterey 12.2.1
• [x ] Windows 11 Home 22H2

[echadwick-artist]

Wondering if this may instead be caused by KHR_materials_specular, instead of by sheen?

Here's the fabric material:

      "name": "GlamVelvetSofa_fabric_champagne",
      "pbrMetallicRoughness": {
        "baseColorFactor": [
          0.075,
          0.06,
          0.04,
          1
        ],
        "metallicFactor": 0,
        "roughnessFactor": 0.7
      },
      "normalTexture": {
        "index": 1,
        "scale": 0.5,
        "extensions": {
          "KHR_texture_transform": {
            "rotation": 0
          }
        }
      },
      "occlusionTexture": {
        "index": 0
      },
      "extensions": {
        "KHR_materials_specular": {
          "specularColorFactor": [
            0,
            0,
            0
          ]
        },
        "KHR_materials_sheen": {
          "sheenColorFactor": [
            0.9,
            0.7,
            0.6
          ],
          "sheenRoughnessFactor": 0.6
        }
      }
    },

[elalish]

I'm sorry, but I can't really translate your words into specifics. Can you show some side-by-side images with the problematic parts circled? Maybe compare to another renderer that looks correct to you?

[echadwick-artist]

It is difficult to describe the problem with words alone. Did you watch the video? The video is the best example demonstrating the rendering errors. Notice how the specular/sheen slides across the surface. This kind of “sliding” is not evident in other renderers. If the video isn’t clear enough, let me know.

[elalish]

Ah, fair enough - I see now. By the way, I missed it because you can just paste a video into a Github comment now :)

Would you mind making a quick test where you remove specular vs sheen to determine which one is causing the problem?

[echadwick-artist]

Thanks for the suggestion. I was able to narrow it down to a punctual light, not the Sheen/Specular extensions!

Demo, with and without the punctual light: https://ericchadwick.com/gltf/debug/index.html

Simplified glTF files: GlamVelvetSofa_with-and-without-Punctual.zip

I tested but was not able to repro in Babylonjs Sandbox and glTF Sample Viewer. However I can reproduce it in the model-viewer Editor.

To reproduce, just pan the camera around to place the model in each of the four corners.

[elalish]

Thanks, very helpful! That makes sense - MV doesn't tend to use punctual lights, so less testing there.