Three.js: Latest spec glTF 2.0 Model are not displayed properly

[cx20]

Description of the problem

I am testing glTF 2.0 sample models and Three.js glTF 2.0 Loader.
https://github.com/cx20/gltf-test/tree/2.0#gltf-20-pbr-models

However, it seems that some PBR models are not displayed properly.
https://cdn.rawgit.com/cx20/gltf-test/b6900f6f4d755a71691aaef5a19279da7472b69f/examples/threejs/index.html?category=tutorialModels&model=Corset&scale=1&type=glTF

I think that it was caused by updating to the latest specification about 10 days ago.
https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/Corset

Three.js version

• [x] Dev
• [x] r85
• [ ] ...

Browser

• [x] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [ ] All of them
• [x] Windows
• [ ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

ThinkPad X260 + Windows 10 + Intel HD Graphics 520

[Mugen87]

Does it work with the r84 version of GLTF2Loader?

[donmccurdy]

@Mugen87 GLTF2Loader was not released until r85. A previous version of this model does work with GLTF2Loader, but the models have changed, as the spec is nearing completion. I can look into that, and update GLTF2Loader accordingly.

[cx20]

I tried r85 but it was the same result.
http://jsfiddle.net/akmcv7Lh/124/

[takahirox]

Maybe I've figured out.
Texture magFilter, minFilter, wrapS, wrapT default values.

In that glTF file, texture.sampler isn't specified.
Even if texture.sampler isn't specified, I suppose we need to set glTF default values to a texture.

It seems like we need to replace this

https://github.com/mrdoob/three.js/blob/f99c157e4271d0ef75d1814e034a9a4c0c1f2cb5/examples/js/loaders/GLTF2Loader.js#L1433-L1442

if ( texture.sampler !== undefined ) {

    var sampler = json.samplers[ texture.sampler ];

    _texture.magFilter = WEBGL_FILTERS[ sampler.magFilter ] || THREE.LinearFilter;
    _texture.minFilter = WEBGL_FILTERS[ sampler.minFilter ] || THREE.NearestMipMapLinearFilter;
    _texture.wrapS = WEBGL_WRAPPINGS[ sampler.wrapS ] || THREE.RepeatWrapping;
    _texture.wrapT = WEBGL_WRAPPINGS[ sampler.wrapT ] || THREE.RepeatWrapping;

}

with like this,

var sampler = texture.sampler === undefined ? {} : json.samplers[ texture.sampler ];

_texture.magFilter = WEBGL_FILTERS[ sampler.magFilter ] || THREE.LinearFilter;
_texture.minFilter = WEBGL_FILTERS[ sampler.minFilter ] || THREE.NearestMipMapLinearFilter;
_texture.wrapS = WEBGL_WRAPPINGS[ sampler.wrapS ] || THREE.RepeatWrapping;
_texture.wrapT = WEBGL_WRAPPINGS[ sampler.wrapT ] || THREE.RepeatWrapping;

I'll make PR later...

[takahirox]

BTW, we might need to support TANGENT attribute?

https://github.com/KhronosGroup/glTF-Sample-Models/blob/b8af7ed10a878fd8112979a54da562b5c0d12aa3/2.0/BoomBox/glTF/BoomBox.gltf#L143

https://github.com/KhronosGroup/glTF/issues/812

[donmccurdy]

Another issue I'm seeing on this model (after correcting for the issue @takahirox pointed out) is that occlusion is inverted.

Current:

After inverting the r channel of occlusionRoughnessMetalness texture:

[takahirox]

Inverting r channel...?
Model's issue?

[donmccurdy]

With the same model, BabylonJS gives the opposite result: https://sandbox.babylonjs.com/

According to the glTF spec and unity's docs, higher r values mean full indirect lighting, so BabylonJS is correct.

We've theoretically implemented UE4's version of occlusionRoughnessMetallic, but I can't find docs on how they interpret occlusion. Perhaps UE4 is different than Unity, or perhaps our implementation doesn't quite match UE4 after all. @bhouston, do you know more on this?

---

EDIT: The previous version of this model did not include occlusion, so the issue with occlusion is new.

[takahirox]

So, here may be the code we need to discuss

https://github.com/mrdoob/three.js/blob/f3650c387183eba3439dfa9280f6b5d246a589e8/src/renderers/shaders/ShaderChunk/aomap_fragment.glsl#L3-L4

[cx20]

I confirmed that this Issue has been fixed.
https://cdn.rawgit.com/cx20/gltf-test/5680855f392c403bb293ff3f905fedec8660c4b8/examples/threejs/index.html?category=tutorialModels&model=Corset&scale=1&type=glTF

[takahirox]

Maybe we should make another issue for aoMap?

[bhouston]

So you are saying the ThreeJS interpretation of AO maps is inverted?

[donmccurdy]

@takahirox @bhouston Yeah, I think that either our interpretation is inverted compared to Unity and glTF, or my scene lighting has somehow made it look that way. Filed a new issue: #11268.