Struggle with GLTF and lighting

Oskawa · June 17, 2021, 10:05am

Hi !
I’m Maxime ! I’m quite new here but I already have few questions, I searched on Internet and the forum but all the answer I saw were a little bit complex for my problem.

So…

I made a 3D model on Cinema4D, with Materials and textures and I decided to remake the lighting in three.js (Because I saw C4D was not correctly exporting lights…)
I exported to GLTF
I passed hours to figure why my materials were not showing but I found out I needed to make PBR Materials.
I put Directional Light and Spotlight with anti-aliasing, etc.

Here I am, after trying to recreate examples, I have several problems with my lightings and I really don’t know how to resolve them…

Here the render with cinema4D, the result I would like :

Here the render with threeJS :

Here my scene in C4D : I used a big square to make and infinite and shadows for the tree with a specific color

So could you explain to me (like I was 5), why :

I see kind of shadows on the right ? Is it because I have a big square around to make my background ?
Why my material is so dark when I check the reflectance button in C4D? And so…
Have you any idea how to make a Reflectance Material with C4D?
Which light are essentials ?

Here my code :

 const scene = new THREE.Scene();
scene.background = new THREE.Color(0xFFD500);

const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 5000);
const windowHalf = new THREE.Vector2(window.innerWidth / 2, window.innerHeight / 2);

//INIT POSITION
camera.position.set(-1.2, 1.3, 10)
camera.rotation.set(0, 0.15, 0)
scene.position.set(0, 0, 0)
scene.rotation.set(0, 0, 0)


// LOAD OBJECT

let loader = new THREE.GLTFLoader();
loader.load('models/modeles15.glb', function(gltf) {
    let car = gltf.scene;
    car.traverse(n => {
        if (n.isMesh) {
            n.castShadow = true;
            n.receiveShadow = true;
            if (n.material.map) n.material.map.anisotropy = 16;
        }
    })
    car.position.y = 1
    car.position.x = -2
    car.rotation.y = 14
    scene.add(car);
    animate();
})

// LIGHT //

const light_2 = new THREE.DirectionalLight(0xFFFFFF);
light_2.position.set(10, 10, 20)
light_2.intensity = 3
light_2.castShadow = true;
scene.add(light_2)

const ambient = new THREE.SpotLight(0xFFD500, 2);
ambient.castShadow = true;
ambient.position.set(0, 100, 10)
ambient.shadow.bias = -0.0001;
ambient.shadow.mapSize.width = 1024 * 4;
ambient.shadow.mapSize.height = 1024 * 4;
scene.add(ambient);

const renderer = new THREE.WebGLRenderer({
    antialias: true
});

renderer.toneMappingExposure = 2.3
renderer.shadowMap.enabled = true;
renderer.gammaFactor = 0;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

function animate() {

    renderer.render(scene, camera);

}

Last thing : sorry for my english !

Thank you for your help !

Mugen87 · June 17, 2021, 10:35am

Do you mind sharing the glTF asset in this thread?

Oskawa:

const renderer = new THREE.WebGLRenderer({
    antialias: true
});

renderer.toneMappingExposure = 2.3
renderer.shadowMap.enabled = true;
renderer.gammaFactor = 0;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

For starters setup the renderer like so:

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
renderer.outputEncoding = THREE.sRGBEncoding;
document.body.appendChild( renderer.domElement );

Oskawa · June 17, 2021, 11:48am

Not at all !

Thank’s for the first help

Also, when I use the online glTF viewer and I select model viewer in “Environment”, it seems to add the reflection to my model…

Here the model :
modeles15.glb (1.3 MB)

Mugen87 · June 17, 2021, 12:33pm

Okay, you will get much better results if you add an HDR environment map to your scene. Try it with the same setup like in this glTF example: three.js webgl - glTF loader

When applying an environment map to Scene.environment, you don’t necessarily need further lights in your scene. This is something you have to check out. Besides, when using HDR, it’s important to configure tone mapping. So enhance the renderer configuration with:

renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;

Oskawa · June 17, 2021, 2:43pm

Oh thank’s a lot @Mugen87 ! It works for the reflexion, I need to work on my textures but It’s a good start !

If I understand, the reflexion needs something to reflect in, that’s why we use an Environment, right ?

Also, you said I don’t need further lights, but if I want shadows I need to right ?
Except, I tried to add a light, and nothing appeared.

Create light with castShadow
Mesh with receive shadow
Enable shadowMap for the renderer

I forgot something or the shadowMap is overwrited by the Environment?

Thank’s again, you are very helpful !

Drumstructor · June 17, 2021, 7:59pm

Hi!

Yes, the environment map is needed for reflections. And yes, you need a shadow casting light if you want real time shadows in your scene even when using an hdr env map.

1,2,3 are correct… (you need meshes to castShadows as well, but you got that in your code)

Depending on your scenes size you should check the shadow camera to fit your meshes.
It is good practice to keep the shadow area as small as possible (resulting in smaller shadow maps)
You can use light.shadow.left, light.shadow.right and so on to set the frustrum…and even use helpers to see it.
Shadow casting lights are expensive. Try to use as few as possible. Maybe just the DirectionalLight. Since it is considered to be faster than Spotlights (if the look is ok for you. Spotlights of course cast different shadows) But also, this is depending on how much is going on.

If you are new to the PBR workflow have a look at your metal surfaces if they are set to metalness = 1 cause they will respond differently to the env map. Metalness is mostly 0 or 1. C4D likes to export between values…
For me, I do not trust C4Ds gltf export blindy. Anyways materials will not look exactly the same in different “engines”, so I like to set the materials the way that threejs makes them look best.

For a little bit more quality you should check out the PMREMGenerator which helps getting better results on rough materials.

Oskawa · June 21, 2021, 2:01pm

Hi,
I took my time to understand and to post a message.

I just want to tell you thank you because It helped me ! I think I will post again later but this is perfect for the moment.

Thank you @Mugen87 and @Drumstructor .
Good day to you !

Topic		Replies	Views
Using GLTF correctly Questions lighting , shadows , gltf	1	689	October 7, 2020
Struggling with gltf and lighting Questions materials , loaders , lights	30	6492	December 4, 2022
Help or any advice Questions materials , shaders	10	1252	February 18, 2019
Exporting Blender Scene - Lighting Issues Questions blender-exporter , gltf-loader	7	8117	January 8, 2020
A big difference between the render in blender and in gltf loader/viwer Questions textures , materials , lighting , shaders , gltf-loader	5	1549	August 21, 2022

Struggle with GLTF and lighting

Related topics