Soo...transitioning to all GLTF models..somewhat info overwhelmed

Questions
1

All, transitioning to all GLTF models, very new to me, and there is a vast amount of contradictory/old/new info out there. I was hoping some kind soul might summarize the current state of threejs support. Required/important settings, etc. I am basing my code on threejs example ‘webgl_animation_multiple.html’ and the ‘three-gltf-viewer’.

1 - renderer requirements, I have seem ‘gammaOutput’ and ‘gammafactor’, do I need 'physicallyCorrectLights defined?? Do I always need the gamma entries??
2 - Do the above settings play nice with ALL GLTF models or are there clues inside the model file??
3 - On the subjects of lights, I think I am reading that only certain light types will illuminate GLTF models??
4 - Using a model exported from Sketchfab it has ‘aoMap’, ‘glossinessMap’, ‘map’, ‘normalMap’ specififed. I have not used ‘aoMap’ and ‘glossinessMap’, do I need special provisions for these in renderer??

All help appreciated!!!

2

As mentioned in the documentation, it’s recommended to always configure the renderer like so when using glTF:

renderer.gammaOutput = true;
renderer.gammaFactor = 2.2;

The documentation also says that enabling physicallyCorrectLights is only necessary when the glTF file uses the KHR_lights_punctual extension.

These above rules should be okay for all files.

I’m afraid that’s not true. May I ask where you have read this^^? All three.js light types will work with glTF models unless it uses the KHR_materials_unlit extension. Meaning the respective material is unlit (does not react on lights at all).

No, glTF assets using such maps should work out-of-the-box.

1 Like
3

Soo I may have mashed a number of postings together and drawn a wrong conclusion, for example in https://discourse.threejs.org/t/solved-glb-model-is-very-dark/6258 you recommend the following, I have also seen other references to use these light types… I seem to recall other postings implying only use directional/hemisphere lighting. Also I guess I need to test metalness also.

Mugen87

Feb 21

Remove your previous light setup and try it with this:

var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
hemiLight.position.set( 0, 300, 0 );
scene.add( hemiLight );
var dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( 75, 300, -75 );
scene.add( dirLight );
4

Additional info, I acquired a free little knight from sketchfab, downloaded as a gltf file, got file/bin/texture folder… When animated, the model is almost completely black with some light highlights. If I do something odd like change the shadermaterial to a phong material the knight/texture is fully illuminated, does not animate of course.

In the gltf file is an entry of this, do I need special steps to handle?

“KHR_materials_pbrSpecularGlossiness”: {
“diffuseFactor”: [
1,
1,
1,
1
],
“diffuseTexture”: {
“index”: 1,
“texCoord”: 0
},
“glossinessFactor”: 1,
“specularFactor”: [
1,
1,
1
],
“specularGlossinessTexture”: {
“index”: 2,
“texCoord”: 0
}
}

5

The problem of this topic was that the glTF asset used high metalness values but no environment map was applied. This behavior is related to the underlying PBR material. In general, if you don’t apply an environment map to your glTF assets, it’s best to set metalness to zero. However, the best visual result is achieved by using environment maps.

1 Like
6

^Yep. This is true for PBR (e.g. THREE.MeshStandardMaterial and MeshPhysicalMaterial) in general — metallic materials require something to reflect, and an environment map is usually the best way to provide that. For non-metallic materials the various three.js light types (Point, Spot, Ambient, …) are sufficient regardless of the file format.

The physicallyCorrectLights option is only necessary if your model itself contains lights, and you want those lights to look the same way in three.js as in the tool that created them (like Blender). The setting puts three.js lighting into a mode that matches other 3D software more closely. The lights will still work without that, but might be brighter or dimmer than you want.

1 Like
7

Well excellent, I know more than I did a few days ago.

Mugen87 / donmccurdy appreciate the great threejs support you guys have provided over time.

2 Likes
8

and of course I hope the term “guys” is not wrong/offensive/other-badness :slight_smile: