How to fix lighting with the WebGPURenderer

Questions
, , ,
1

Can someone help me understand how I can get the same kind of lighting using Three.js 155 and the WebGPURenderer? Here is the lighting working properly with Three.js 152 and the WebGLRenderer:

Three 152:

import * as THREE from './static/three.module.js';

console.log(THREE.REVISION); // 152
let renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true,
});

renderer.setClearColor('#010C26');
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

let scene = new THREE.Scene();
scene.fog = new THREE.Fog('#010C26', 150, 350);

let camera = new THREE.PerspectiveCamera(32, window.innerWidth / window.innerHeight, //aspect
1, 1000);
camera.position.set(-1, 20.906188248519396, 69.70970199672118);

let spotLight = new THREE.SpotLight(0xaaddff, 1.3);
spotLight.position.set(0, 40, 40);
spotLight.angle = Math.PI / 4;
spotLight.penumbra = 0.25;
spotLight.decay = 2;
spotLight.distance = 200;
spotLight.castShadow = true;
spotLight.shadow.mapSize.width = 2048;
spotLight.shadow.mapSize.height = 2048;

scene.add(spotLight);
scene.add(new THREE.HemisphereLight('#010C26', '#FCFFFC', 0.45));

const ground = new THREE.Mesh(new THREE.PlaneGeometry(1000, 1000), new THREE.MeshStandardMaterial({
    color: '#FCFFFC',
}));

ground.castShadow = true;
ground.receiveShadow = true; 
scene.add(ground);

renderer.render(scene, camera);

Three 155:

import * as THREE from 'three';
import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';

console.log(THREE.REVISION); // 155
let renderer = new WebGPURenderer({
    antialias: true,
    alpha: true,
});
// Rest of the code is the same.

Would be really grateful for any hints! Maybe some reference project?

2

What is the outcome of [WebGL+155] ? It is like [WebGL+152] or like [WebGPU+155] ?

This will hint you whether to look for issues in the releases, or in the renderer.

If [WebGL+155] is like [WebGPU+155], then look at:

3

Cheers for the reply. The outcome of [WebGL+155] is the same as [WebGPU+155].
Is the quick fix just setting renderer.useLegacyLights = true;? Does not seem to work for me. My example is pretty simple. It should look like this:

1
11912×820 63.7 KB

But on 155 it looks like this:

2
21907×817 3.14 KB

4

Try to increase the intensity of the spot light. Try 10, if not enough - 100, and so on.

5

Hmm that does seem to work and look a bit better combined with spotLight.shadow.bias and spotLight.shadow.radius, but I do not understand exactly why to be honest. It is really not apparent to me what steps I have to take to make the scene look the same again.

6 
const ground = new THREE.Mesh(new THREE.PlaneGeometry(1000, 1000), new THREE.MeshStandardMaterial({
    color: '#FCFFFC',
}));

R155+ introduced physically correct lighting as the default lighting setting, it’s based on real world units, in your case the spotlight has to travel 40 meters till it can illuminate the surface… If you also read into the resource @PavelBoytchev shared above you will find somewhere that the decay value should no longer be meddled with and for best results should be kept at 1…

1 Like
7

Thanks for the answer. Removing the other properties from THREE.MeshStandardMaterial is a good point, but did not help solve the problem. I have removed the custom decay value (also no effect).

I have also changed the intensity of the Hemisphere Light: let hemi_light = new THREE.HemisphereLight('#010C26', '#FCFFFC', 0.45 * Math.PI); but still not the same (or similar) results.