KhronosGroup / glTF-Sample-Viewer

Physically-Based Rendering in glTF 2.0 using WebGL
Apache License 2.0
1.27k stars 233 forks source link

Anisotropy rotation mismatch? #555

Open echadwick-artist opened 2 months ago

echadwick-artist commented 2 months ago

Anisotropy seems to be rendering perpendicular to the angle shown in every other glTF renderer.

image Left object is without anisotropy, right object is with anisotropy.

All screenshots are using the "Studio" hdr from Babylonjs: https://github.com/BabylonJS/Assets/blob/master/environments/studioSoftbox2Umbrellas_panorama_radiance.hdr

For the object with anisotropy there are two materials: "spiral-anisotropy" for the flat sides with the circular grooves, and "grooved-anisotropy" for the curved part with the linear grooves. The spiral material is using an anisotropyTexture, the grooved material is not (anisotropyRotation alone controls the angle).

Materials on the object with anisotropy:

    {
      "extensions": {
        "KHR_materials_anisotropy": {
          "anisotropyStrength": 1,
          "anisotropyRotation": 1.6
        }
      },
      "name": "grooved-anisotropy",
      "normalTexture": {
        "extensions": {
          "KHR_texture_transform": {
            "rotation": 1.5707963705062866,
            "scale": [
              6,
              2
            ]
          }
        },
        "index": 2,
        "scale": 0.5
      },
      "pbrMetallicRoughness": {
        "baseColorFactor": [
          1,
          1,
          1,
          1
        ],
        "baseColorTexture": {
          "index": 1
        },
        "metallicRoughnessTexture": {
          "index": 3
        }
      }
    },
    {
      "extensions": {
        "KHR_materials_anisotropy": {
          "anisotropyStrength": 1,
          "anisotropyRotation": 1.6,
          "anisotropyTexture": {
            "index": 4
          }
        }
      },
      "name": "spiral-anisotropy",
      "normalTexture": {
        "index": 0,
        "scale": 0.5
      },
      "pbrMetallicRoughness": {
        "baseColorFactor": [
          0.5795467495918274,
          0.2715774476528168,
          0.18354901671409607,
          1
        ],
        "roughnessFactor": 0.1
      }
    },

compare_anisotropy.zip

UX3D-kanzler commented 1 week ago

Upon further analyzing this issue I came to the conclusion that tangents are calculated differently. The discrepancy in the renderings is subsequently the result of anisotropy-rotation being calculated in tangent space. The given file does not include tangents for the meshes. In this case Sample Viewer uses MikkTSpace to calculate tangents globally as suggested by the specification.

If you inspect carefully the Babylon rendering you see the individual triangles of the mesh as a result of tangents being calculated locally in the shader: babylon-no-tangents-crop

I have created a version of your file that includes tangents in the mesh: compare_anisotropy_tangents.zip

In this case, the renderings of Babylon and Sample Viewer show the same rotation for anisotropy:

Sample Viewer: sample-viewer-tangents

Babylon: babylon-tangents