Examples: Remove obsolete shadow bias from WebGPU demos. (#32715)

examples/webgpu_backdrop_water.html

@@ -60,16 +60,6 @@
 				camera.lookAt( 0, 1, 0 );
 
 				const sunLight = new THREE.DirectionalLight( 0xFFE499, 5 );
-				sunLight.castShadow = true;
-				sunLight.shadow.camera.near = .1;
-				sunLight.shadow.camera.far = 5;
-				sunLight.shadow.camera.right = 2;
-				sunLight.shadow.camera.left = - 2;
-				sunLight.shadow.camera.top = 1;
-				sunLight.shadow.camera.bottom = - 2;
-				sunLight.shadow.mapSize.width = 2048;
-				sunLight.shadow.mapSize.height = 2048;
-				sunLight.shadow.bias = - 0.001;
 				sunLight.position.set( .5, 3, .5 );
 
 				const waterAmbientLight = new THREE.HemisphereLight( 0x333366, 0x74ccf4, 5 );
@@ -87,7 +77,6 @@
 				loader.load( 'models/gltf/Michelle.glb', function ( gltf ) {
 
 					model = gltf.scene;
-					model.children[ 0 ].children[ 0 ].castShadow = true;
 
 					mixer = new THREE.AnimationMixer( model );
 

examples/webgpu_camera_array.html

@@ -66,7 +66,6 @@
 				const light = new THREE.DirectionalLight( 0xffffff, 3 );
 				light.position.set( 0.5, 0.5, 1 );
 				light.castShadow = true;
-				light.shadow.bias = - 0.001;
 				light.shadow.camera.zoom = 4; // tighter shadow map
 				scene.add( light );
 

examples/webgpu_caustics.html

@@ -67,7 +67,6 @@
 				spotLight.shadow.mapSize.height = 1024;
 				spotLight.shadow.camera.near = .1;
 				spotLight.shadow.camera.far = 1;
-				spotLight.shadow.bias = - .003;
 				spotLight.shadow.intensity = .95;
 				scene.add( spotLight );
 

examples/webgpu_clipping.html

@@ -61,7 +61,6 @@
 				spotLight.shadow.camera.far = 10;
 				spotLight.shadow.mapSize.width = 2048;
 				spotLight.shadow.mapSize.height = 2048;
-				spotLight.shadow.bias = - 0.002;
 				spotLight.shadow.radius = 4;
 				scene.add( spotLight );
 

examples/webgpu_compute_particles_rain.html

@@ -64,20 +64,9 @@
 				scene = new THREE.Scene();
 
 				const dirLight = new THREE.DirectionalLight( 0xffffff, .5 );
-				dirLight.castShadow = true;
 				dirLight.position.set( 3, 17, 17 );
-				dirLight.castShadow = true;
-				dirLight.shadow.camera.near = 1;
-				dirLight.shadow.camera.far = 50;
-				dirLight.shadow.camera.right = 25;
-				dirLight.shadow.camera.left = - 25;
-				dirLight.shadow.camera.top = 25;
-				dirLight.shadow.camera.bottom = - 25;
-				dirLight.shadow.mapSize.width = 2048;
-				dirLight.shadow.mapSize.height = 2048;
-				dirLight.shadow.bias = - 0.01;
-
 				scene.add( dirLight );
+			
 				scene.add( new THREE.AmbientLight( 0x111111 ) );
 
 				//
@@ -257,7 +246,6 @@
 				collisionBox.position.y = 12;
 				collisionBox.scale.x = 3.5;
 				collisionBox.layers.enable( 1 );
-				collisionBox.castShadow = true;
 				scene.add( collisionBox );
 
 				//
@@ -268,7 +256,6 @@
 					geometry.computeVertexNormals();
 
 					monkey = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial( { roughness: 1, metalness: 0 } ) );
-					monkey.receiveShadow = true;
 					monkey.scale.setScalar( 5 );
 					monkey.rotation.y = Math.PI / 2;
 					monkey.position.y = 4.5;

examples/webgpu_compute_particles_snow.html

@@ -68,18 +68,7 @@
 				scene.fog = new THREE.Fog( 0x0f3c37, 5, 40 );
 
 				const dirLight = new THREE.DirectionalLight( 0xf9ff9b, 9 );
-				dirLight.castShadow = true;
 				dirLight.position.set( 10, 10, 0 );
-				dirLight.castShadow = true;
-				dirLight.shadow.camera.near = 1;
-				dirLight.shadow.camera.far = 30;
-				dirLight.shadow.camera.right = 30;
-				dirLight.shadow.camera.left = - 30;
-				dirLight.shadow.camera.top = 30;
-				dirLight.shadow.camera.bottom = - 30;
-				dirLight.shadow.mapSize.width = 2048;
-				dirLight.shadow.mapSize.height = 2048;
-				dirLight.shadow.bias = - 0.009;
 				scene.add( dirLight );
 
 				scene.add( new THREE.HemisphereLight( 0x0f3c37, 0x080d10, 100 ) );
@@ -200,7 +189,6 @@
 
 					const rainParticles = new THREE.Mesh( geometry, staticMaterial );
 					rainParticles.count = maxParticleCount;
-					rainParticles.castShadow = true;
 					rainParticles.layers.disableAll();
 					rainParticles.layers.enable( layer );
 
@@ -249,7 +237,6 @@
 						const coneGeometry = new THREE.ConeGeometry( radius * 0.95, radius * 1.25, 32 );
 
 						const cone = new THREE.Mesh( coneGeometry, coneMaterial );
-						cone.castShadow = true;
 						cone.position.y = ( ( count - i ) * 1.5 ) + ( count * .6 );
 						object.add( cone );
 

examples/webgpu_instancing_morph.html

@@ -80,8 +80,6 @@
 				light.shadow.camera.bottom = - 5000;
 				light.shadow.camera.far = 2000;
 
-				light.shadow.bias = - 0.01;
-
 				light.shadow.camera.updateProjectionMatrix();
 
 				scene.add( light );

examples/webgpu_lights_projector.html

@@ -117,7 +117,6 @@
 				projectorLight.shadow.camera.near = 1;
 				projectorLight.shadow.camera.far = 10;
 				projectorLight.shadow.focus = 1;
-				projectorLight.shadow.bias = - .003;
 				scene.add( projectorLight );
 
 				lightHelper = new THREE.SpotLightHelper( projectorLight );

examples/webgpu_lights_spotlight.html

@@ -117,7 +117,6 @@
 				spotLight.shadow.camera.near = 2;
 				spotLight.shadow.camera.far = 10;
 				spotLight.shadow.focus = 1;
-				spotLight.shadow.bias = - .003;
 				spotLight.shadow.intensity = 1;
 				scene.add( spotLight );
 

examples/webgpu_postprocessing_motion_blur.html

@@ -68,9 +68,8 @@
 				sunLight.shadow.camera.left = - 2;
 				sunLight.shadow.camera.top = 2;
 				sunLight.shadow.camera.bottom = - 2;
-				sunLight.shadow.mapSize.width = 2048;
-				sunLight.shadow.mapSize.height = 2048;
-				sunLight.shadow.bias = - 0.001;
+				sunLight.shadow.mapSize.width = 1024;
+				sunLight.shadow.mapSize.height = 1024;
 				sunLight.position.set( 4, 4, 2 );
 
 				const waterAmbientLight = new THREE.HemisphereLight( 0x333366, 0x74ccf4, 5 );

examples/webgpu_postprocessing_pixel.html

@@ -119,7 +119,6 @@
 			directionalLight.position.set( 100, 100, 100 );
 			directionalLight.castShadow = true;
 			directionalLight.shadow.mapSize.set( 2048, 2048 );
-			directionalLight.shadow.bias = - 0.0001;
 			scene.add( directionalLight );
 
 			const spotLight = new THREE.SpotLight( 0xffc100, 10, 10, Math.PI / 16, .02, 2 );
@@ -128,7 +127,6 @@
 			scene.add( target );
 			target.position.set( 0, 0, 0 );
 			spotLight.castShadow = true;
-			spotLight.shadow.bias = - 0.001;
 			scene.add( spotLight );
 
 			renderer = new THREE.WebGPURenderer();

examples/webgpu_postprocessing_ssgi.html

@@ -205,7 +205,6 @@
 				pointLight.castShadow = true;
 				pointLight.shadow.mapSize.width = 1024;
 				pointLight.shadow.mapSize.height = 1024;
-				pointLight.shadow.bias = - 0.0025;
 				scene.add( pointLight );
 
 				// Ambient light

examples/webgpu_postprocessing_sss.html

@@ -67,6 +67,7 @@
 				const dirLight = new THREE.DirectionalLight( 0xffffff, 3 );
 				dirLight.position.set( - 3, 10, - 10 );
 				dirLight.castShadow = true;
+				dirLight.shadow.bias = - 0.001; // remove self-shadowing artifacts
 				dirLight.shadow.camera.top = 4;
 				dirLight.shadow.camera.bottom = - 4;
 				dirLight.shadow.camera.left = - 4;

examples/webgpu_reflection.html

@@ -71,7 +71,7 @@
 				sunLight.castShadow = true;
 				sunLight.shadow.camera.zoom = 1.5;
 				sunLight.shadow.mapSize.set( 1024, 1024 );
-				sunLight.shadow.bias = - 0.0001;
+				sunLight.shadow.bias = - 0.0001; // remove self-shadowing artifacts
 				scene.add( sunLight );
 
 				const backLight = new THREE.DirectionalLight( 0x0487e2, 0.5 );

examples/webgpu_shadowmap_array.html

@@ -93,7 +93,6 @@
 				dirLight.shadow.mapSize.width = 1024 * 4;
 				dirLight.shadow.mapSize.height = 1024 * 4;
 				dirLight.shadow.radius = 1;
-				dirLight.shadow.bias = - 0.005;
 
 				// Set up the tile shadow mapping
 				const tsm = new TileShadowNode( dirLight, {

examples/webgpu_shadowmap_progressive.html

@@ -108,7 +108,6 @@
 					dirLight.shadow.camera.bottom = - 150;
 					dirLight.shadow.mapSize.width = shadowMapRes;
 					dirLight.shadow.mapSize.height = shadowMapRes;
-					dirLight.shadow.bias = - 0.001;
 					lightmapObjects.push( dirLight );
 					dirLights.push( dirLight );
 

examples/webgpu_tsl_procedural_terrain.html

@@ -79,7 +79,6 @@
 				directionalLight.shadow.camera.bottom = - 8;
 				directionalLight.shadow.camera.left = - 8;
 				directionalLight.shadow.normalBias = 0.05;
-				directionalLight.shadow.bias = 0;
 				scene.add( directionalLight );
 
 				// terrain

examples/webgpu_volume_caustics.html

@@ -74,7 +74,6 @@
 				spotLight.shadow.mapSize.height = 1024;
 				spotLight.shadow.camera.near = .1;
 				spotLight.shadow.camera.far = 1;
-				spotLight.shadow.bias = - .003;
 				spotLight.shadow.intensity = .95;
 				spotLight.layers.enable( LAYER_VOLUMETRIC_LIGHTING );
 				scene.add( spotLight );

examples/webgpu_volume_lighting.html

@@ -187,7 +187,6 @@
 				spotLight.shadow.camera.near = 1;
 				spotLight.shadow.camera.far = 15;
 				spotLight.shadow.focus = 1;
-				spotLight.shadow.bias = - .003;
 				spotLight.layers.enable( LAYER_VOLUMETRIC_LIGHTING );
 				//sunLight.add( new THREE.Mesh( new THREE.SphereGeometry( 0.1, 16, 16 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) ) );
 				scene.add( spotLight );