WebGLRenderer: Modernized shadow mapping: native cube depth textures, Vogel disk sampling, and VSM improvements

editor/js/Sidebar.Project.Renderer.js

@@ -37,7 +37,6 @@ function SidebarProjectRenderer( editor ) {
 	const shadowTypeSelect = new UISelect().setOptions( {
 		0: 'Basic',
 		1: 'PCF',
-		2: 'PCF Soft',
 		3: 'VSM'
 	} ).setWidth( '125px' ).onChange( updateShadows );
 	shadowTypeSelect.setValue( config.getKey( 'project/renderer/shadowType' ) );

examples/jsm/materials/MeshGouraudMaterial.js

@@ -221,7 +221,6 @@ const GouraudShader = {
 		#endif
 
 		#include <common>
-		#include <packing>
 		#include <dithering_pars_fragment>
 		#include <color_pars_fragment>
 		#include <uv_pars_fragment>

examples/jsm/shaders/UnpackDepthRGBAShader.js

@@ -4,7 +4,7 @@
  */
 
 /**
- * Unpack RGBA depth shader that shows RGBA encoded depth as monochrome color.
+ * Depth visualization shader that shows depth values as monochrome color.
  *
  * @constant
  * @type {ShaderMaterial~Shader}
@@ -39,11 +39,9 @@ const UnpackDepthRGBAShader = {
 
 		varying vec2 vUv;
 
-		#include <packing>
-
 		void main() {
 
-			float depth = unpackRGBAToDepth( texture2D( tDiffuse, vUv ) );
+			float depth = texture2D( tDiffuse, vUv ).r;
 
 			#ifdef USE_REVERSED_DEPTH_BUFFER
 

examples/jsm/utils/ShadowMapViewer.js

@@ -6,10 +6,8 @@ import {
 	OrthographicCamera,
 	PlaneGeometry,
 	Scene,
-	ShaderMaterial,
-	UniformsUtils
+	ShaderMaterial
 } from 'three';
-import { UnpackDepthRGBAShader } from '../shaders/UnpackDepthRGBAShader.js';
 
 /**
  * This is a helper for visualising a given light's shadow map.
@@ -57,13 +55,29 @@ class ShadowMapViewer {
 		const scene = new Scene();
 
 		//HUD for shadow map
-		const shader = UnpackDepthRGBAShader;
-
-		const uniforms = UniformsUtils.clone( shader.uniforms );
 		const material = new ShaderMaterial( {
-			uniforms: uniforms,
-			vertexShader: shader.vertexShader,
-			fragmentShader: shader.fragmentShader
+			uniforms: {
+				tDiffuse: { value: null },
+				opacity: { value: 1.0 }
+			},
+			vertexShader: /* glsl */`
+				varying vec2 vUv;
+				void main() {
+					vUv = uv;
+					gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+				}`,
+			fragmentShader: /* glsl */`
+				uniform float opacity;
+				uniform sampler2D tDiffuse;
+				varying vec2 vUv;
+				void main() {
+					float depth = texture2D( tDiffuse, vUv ).r;
+					#ifdef USE_REVERSED_DEPTH_BUFFER
+						gl_FragColor = vec4( vec3( depth ), opacity );
+					#else
+						gl_FragColor = vec4( vec3( 1.0 - depth ), opacity );
+					#endif
+				}`
 		} );
 		const plane = new PlaneGeometry( frame.width, frame.height );
 		const mesh = new Mesh( plane, material );
@@ -177,7 +191,7 @@ class ShadowMapViewer {
 				//always end up with the scene's first added shadow casting light's shadowMap
 				//in the shader
 				//See: https://github.com/mrdoob/three.js/issues/5932
-				uniforms.tDiffuse.value = light.shadow.map.texture;
+				material.uniforms.tDiffuse.value = light.shadow.map.texture;
 
 				userAutoClearSetting = renderer.autoClear;
 				renderer.autoClear = false; // To allow render overlay

examples/webgl_animation_walk.html

@@ -110,7 +110,7 @@
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				renderer.toneMappingExposure = 0.5;
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+				renderer.shadowMap.type = THREE.PCFShadowMap;
 				container.appendChild( renderer.domElement );
 
 				orbitControls = new OrbitControls( camera, renderer.domElement );

examples/webgl_depth_texture.html

@@ -25,8 +25,6 @@
 			}
 		</script>
 		<script id="post-frag" type="x-shader/x-fragment">
-			#include <packing>
-
 			varying vec2 vUv;
 			uniform sampler2D tDiffuse;
 			uniform sampler2D tDepth;
@@ -36,8 +34,8 @@
 
 			float readDepth( sampler2D depthSampler, vec2 coord ) {
 				float fragCoordZ = texture2D( depthSampler, coord ).x;
-				float viewZ = perspectiveDepthToViewZ( fragCoordZ, cameraNear, cameraFar );
-				return viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );
+				float viewZ = ( cameraNear * cameraFar ) / ( ( cameraFar - cameraNear ) * fragCoordZ - cameraFar );
+				return ( viewZ + cameraNear ) / ( cameraNear - cameraFar );
 			}
 
 			void main() {

examples/webgl_geometry_csg.html

@@ -86,7 +86,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+				renderer.shadowMap.type = THREE.PCFShadowMap;
 				document.body.appendChild( renderer.domElement );
 
 				stats = new Stats();

examples/webgl_lights_spotlight.html

@@ -50,7 +50,7 @@
 				renderer.toneMappingExposure = 1;
 
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+				renderer.shadowMap.type = THREE.PCFShadowMap;
 
 				scene = new THREE.Scene();
 

examples/webgl_lights_spotlights.html

@@ -59,7 +59,7 @@
 			function init() {
 
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+				renderer.shadowMap.type = THREE.PCFShadowMap;
 
 				camera.position.set( 4.6, 2.2, - 2.1 );
 

examples/webgl_loader_3mf_materials.html

@@ -108,7 +108,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+				renderer.shadowMap.type = THREE.PCFShadowMap;
 				document.body.appendChild( renderer.domElement );
 
 				//

examples/webgl_loader_md2_control.html

@@ -135,7 +135,7 @@
 				//
 
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+				renderer.shadowMap.type = THREE.PCFShadowMap;
 
 				// STATS
 

examples/webgl_shadowmap_csm.html

@@ -84,7 +84,7 @@
 				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 				renderer.shadowMap.enabled = params.shadows;
-				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+				renderer.shadowMap.type = THREE.PCFShadowMap;
 
 				controls = new OrbitControls( camera, renderer.domElement );
 				controls.maxPolarAngle = Math.PI / 2;

examples/webgl_shadowmap_pcss.html

@@ -60,7 +60,7 @@
 					int numBlockers = 0;
 
 					for( int i = 0; i < BLOCKER_SEARCH_NUM_SAMPLES; i++ ) {
-						float shadowMapDepth = unpackRGBAToDepth(texture2D(shadowMap, uv + poissonDisk[i] * searchRadius));
+						float shadowMapDepth = texture2D(shadowMap, uv + poissonDisk[i] * searchRadius).r;
 						if ( shadowMapDepth < zReceiver ) {
 							blockerDepthSum += shadowMapDepth;
 							numBlockers ++;
@@ -77,13 +77,13 @@
 					float depth;
 					#pragma unroll_loop_start
 					for( int i = 0; i < 17; i ++ ) {
-						depth = unpackRGBAToDepth( texture2D( shadowMap, uv + poissonDisk[ i ] * filterRadius ) );
+						depth = texture2D( shadowMap, uv + poissonDisk[ i ] * filterRadius ).r;
 						if( zReceiver <= depth ) sum += 1.0;
 					}
 					#pragma unroll_loop_end
 					#pragma unroll_loop_start
 					for( int i = 0; i < 17; i ++ ) {
-						depth = unpackRGBAToDepth( texture2D( shadowMap, uv + -poissonDisk[ i ].yx * filterRadius ) );
+						depth = texture2D( shadowMap, uv + -poissonDisk[ i ].yx * filterRadius ).r;
 						if( zReceiver <= depth ) sum += 1.0;
 					}
 					#pragma unroll_loop_end
@@ -234,9 +234,10 @@
 				);
 
 				shader = shader.replace(
-					'#if defined( SHADOWMAP_TYPE_PCF )',
-					document.getElementById( 'PCSSGetShadow' ).textContent +
-					'#if defined( SHADOWMAP_TYPE_PCF )'
+					'\t\t\tif ( frustumTest ) {\n\t\t\t\tfloat depth = texture2D( shadowMap, shadowCoord.xy ).r;',
+					'\t\t\tif ( frustumTest ) {\n' +
+					document.getElementById( 'PCSSGetShadow' ).textContent + '\n' +
+					'\t\t\t\tfloat depth = texture2D( shadowMap, shadowCoord.xy ).r;'
 				);
 
 				THREE.ShaderChunk.shadowmap_pars_fragment = shader;
@@ -252,6 +253,7 @@
 				container.appendChild( renderer.domElement );
 
 				renderer.shadowMap.enabled = true;
+				renderer.shadowMap.type = THREE.BasicShadowMap; // PCSS requires reading raw depth values
 
 				// controls
 				const controls = new OrbitControls( camera, renderer.domElement );

examples/webgl_shadowmap_performance.html

@@ -107,7 +107,7 @@
 				//
 
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+				renderer.shadowMap.type = THREE.PCFShadowMap;
 
 				// CONTROLS
 

examples/webgl_shadowmap_pointlight.html

@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgl - THREE.PointLight ShadowMap</title>
+		<title>three.js webgl - PointLight ShadowMap</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<link type="text/css" rel="stylesheet" href="main.css">
 	</head>
 	<body>
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - THREE.PointLight ShadowMap by <a href="https://github.com/mkkellogg" target="_blank" rel="noopener">mkkellogg</a>
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - PointLight ShadowMap
 		</div>
 
 		<script type="importmap">

src/Three.Core.js

@@ -35,6 +35,7 @@ export { CompressedCubeTexture } from './textures/CompressedCubeTexture.js';
 export { CubeTexture } from './textures/CubeTexture.js';
 export { CanvasTexture } from './textures/CanvasTexture.js';
 export { DepthTexture } from './textures/DepthTexture.js';
+export { CubeDepthTexture } from './textures/CubeDepthTexture.js';
 export { ExternalTexture } from './textures/ExternalTexture.js';
 export { Texture } from './textures/Texture.js';
 export * from './geometries/Geometries.js';

src/constants.js

@@ -1191,37 +1191,45 @@ export const TriangleStripDrawMode = 1;
 export const TriangleFanDrawMode = 2;
 
 /**
- * Basic depth packing.
+ * The depth value is inverted (1.0 - z) for visualization purposes.
  *
  * @type {number}
  * @constant
  */
 export const BasicDepthPacking = 3200;
 
 /**
- * A depth value is packed into 32 bit RGBA.
+ * The depth value is packed into 32 bit RGBA.
  *
  * @type {number}
  * @constant
  */
 export const RGBADepthPacking = 3201;
 
 /**
- * A depth value is packed into 24 bit RGB.
+ * The depth value is packed into 24 bit RGB.
  *
  * @type {number}
  * @constant
  */
 export const RGBDepthPacking = 3202;
 
 /**
- * A depth value is packed into 16 bit RG.
+ * The depth value is packed into 16 bit RG.
  *
  * @type {number}
  * @constant
  */
 export const RGDepthPacking = 3203;
 
+/**
+ * The depth value is not packed.
+ *
+ * @type {number}
+ * @constant
+ */
+export const IdentityDepthPacking = 3204;
+
 /**
  * Normal information is relative to the underlying surface.
  *

src/lights/LightShadow.js

@@ -69,9 +69,6 @@ class LightShadow {
 		 * map size will allow for a higher value to be used here before these effects
 		 * become visible.
 		 *
-		 * The property has no effect when the shadow map type is `PCFSoftShadowMap` and
-		 * and it is recommended to increase softness by decreasing the shadow map size instead.
-		 *
 		 * The property has no effect when the shadow map type is `BasicShadowMap`.
 		 *
 		 * @type {number}