code · pull · Jul 21, 2026 · Jul 21, 2026 · Jul 21, 2026 · Jul 21, 2026
diff --git a/examples/files.json b/examples/files.json
@@ -397,7 +397,7 @@
 		"webgpu_materials_envmaps",
 		"webgpu_materials_lightmap",
 		"webgpu_materials_matcap",
-		"webgpu_materials_retroreflective",
+		"webgpu_materials_retroreflection",
 		"webgpu_materials_sss",
 		"webgpu_materials_texture_html",
 		"webgpu_materials_texture_manualmipmap",

diff --git a/examples/jsm/tsl/display/hashBlur.js b/examples/jsm/tsl/display/hashBlur.js
@@ -1,4 +1,4 @@
-import { float, Fn, vec2, uv, sin, rand, degrees, cos, Loop, vec4, premultiplyAlpha, unpremultiplyAlpha, convertToTexture, nodeObject } from 'three/tsl';
+import { float, Fn, vec2, uv, sin, rand, TWO_PI, cos, Loop, vec4, premultiplyAlpha, unpremultiplyAlpha, convertToTexture, nodeObject } from 'three/tsl';
 
 /**
  * Applies a hash blur effect to the given texture node.
@@ -41,7 +41,8 @@ export const hashBlur = /*#__PURE__*/ Fn( ( [ textureNode, bluramount = float( 0
 
 	Loop( { start: 0., end: repeats, type: 'float' }, ( { i } ) => {
 
-		const q = vec2( vec2( cos( degrees( i.div( repeats ).mul( 360. ) ) ), sin( degrees( i.div( repeats ).mul( 360. ) ) ) ).mul( rand( vec2( i, targetUV.x.add( targetUV.y ) ) ).add( bluramount ) ) );
+		const angle = i.div( repeats ).mul( TWO_PI ).toConst();
+		const q = vec2( cos( angle ), sin( angle ) ).mul( rand( vec2( i, targetUV.x.add( targetUV.y ) ) ).add( bluramount ) );
 		const uv2 = vec2( targetUV.add( q.mul( bluramount ) ) );
 		blurred_image.addAssign( tap( uv2 ) );
 

diff --git a/examples/jsm/webxr/WebGLXRFallback.js b/examples/jsm/webxr/WebGLXRFallback.js
@@ -26,27 +26,13 @@ function setupWebGLXRFallback( renderer, createFallbackRenderer, onFallback = ()
 
 			}
 
-			if ( session !== null && renderer.backend.isWebGPUBackend === true && session.enabledFeatures.includes( 'webgpu' ) === false ) {
+			if ( session !== null && renderer.backend.isWebGPUBackend === true && typeof globalThis.XRGPUBinding === 'undefined' ) {
 
 				return switchToFallbackRenderer( session, renderer );
 
 			}
 
-			try {
-
-				return await setSession( session );
-
-			} catch ( error ) {
-
-				if ( session === null || renderer.backend.isWebGPUBackend !== true ) {
-
-					throw error;
-
-				}
-
-				return switchToFallbackRenderer( session, renderer );
-
-			}
+			return setSession( session );
 
 		};
 

diff --git a/examples/screenshots/webgpu_materials_retroreflection.jpg b/examples/screenshots/webgpu_materials_retroreflection.jpg
diff --git a/examples/screenshots/webgpu_materials_retroreflective.jpg b/examples/screenshots/webgpu_materials_retroreflective.jpg
diff --git a/...les/webgpu_materials_retroreflective.html → ...les/webgpu_materials_retroreflection.html b/...les/webgpu_materials_retroreflective.html → ...les/webgpu_materials_retroreflection.html
@@ -1,12 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgpu - materials - retroreflective</title>
+		<title>three.js webgpu - materials - retroreflection</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<meta property="og:title" content="three.js webgpu - materials - retroreflective">
+		<meta property="og:title" content="three.js webgpu - materials - retroreflection">
 		<meta property="og:type" content="website">
-		<meta property="og:url" content="https://threejs.org/examples/webgpu_materials_retroreflective.html">
+		<meta property="og:url" content="https://threejs.org/examples/webgpu_materials_retroreflection.html">
+		<meta property="og:image" content="https://threejs.org/examples/screenshots/webgpu_materials_retroreflection.jpg">
 		<link type="text/css" rel="stylesheet" href="example.css">
 	</head>
 	<body>
@@ -46,8 +47,8 @@
 			let frontLight, bandMaterial;
 
 			const params = {
-				retroreflectivity: true,
-				retroreflective: 1.0,
+				retroreflective: true,
+				retroreflectivity: 1.0,
 				frontLightIntensity: 5.0
 			};
 
@@ -95,8 +96,8 @@
 				controls.update();
 
 				const gui = new GUI();
-				gui.add( params, 'retroreflectivity' ).name( 'retroreflectivity' ).onChange( updateMaterial );
-				gui.add( params, 'retroreflective', 0, 1, 0.01 ).name( 'retroreflective' ).onChange( updateMaterial );
+				gui.add( params, 'retroreflective' ).name( 'retroreflective' ).onChange( updateMaterial );
+				gui.add( params, 'retroreflectivity', 0, 1, 0.01 ).name( 'retroreflectivity' ).onChange( updateMaterial );
 				gui.add( params, 'frontLightIntensity', 0, 30, 0.1 ).name( 'front light intensity' ).onChange( updateMaterial );
 
 				window.addEventListener( 'resize', onWindowResize );
@@ -120,7 +121,7 @@
 					color: 0xf7f0d6,
 					roughness: 0.22,
 					metalness: 0.0,
-					retroreflective: params.retroreflective
+					retroreflectivity: params.retroreflectivity
 				} );
 
 				const base = new THREE.Mesh(
@@ -167,7 +168,7 @@
 
 			function updateMaterial() {
 
-				bandMaterial.retroreflective = params.retroreflectivity ? params.retroreflective : 0;
+				bandMaterial.retroreflectivity = params.retroreflective ? params.retroreflectivity : 0;
 				frontLight.intensity = params.frontLightIntensity;
 
 			}

diff --git a/src/Three.TSL.js b/src/Three.TSL.js
@@ -300,7 +300,7 @@ export const materialPointSize = TSL.materialPointSize;
 export const materialReference = TSL.materialReference;
 export const materialReflectivity = TSL.materialReflectivity;
 export const materialRefractionRatio = TSL.materialRefractionRatio;
-export const materialRetroreflective = TSL.materialRetroreflective;
+export const materialRetroreflectivity = TSL.materialRetroreflectivity;
 export const materialRotation = TSL.materialRotation;
 export const materialRoughness = TSL.materialRoughness;
 export const materialSheen = TSL.materialSheen;
@@ -475,7 +475,7 @@ export const refract = TSL.refract;
 export const refractVector = TSL.refractVector;
 export const refractView = TSL.refractView;
 export const reinhardToneMapping = TSL.reinhardToneMapping;
-export const retroreflective = TSL.retroreflective;
+export const retroreflectivity = TSL.retroreflectivity;
 export const remap = TSL.remap;
 export const remapClamp = TSL.remapClamp;
 export const renderGroup = TSL.renderGroup;

diff --git a/src/lights/LightShadow.js b/src/lights/LightShadow.js
@@ -333,6 +333,7 @@ class LightShadow {
 		if ( this.bias !== 0 ) object.bias = this.bias;
 		if ( this.normalBias !== 0 ) object.normalBias = this.normalBias;
 		if ( this.radius !== 1 ) object.radius = this.radius;
+		if ( this.blurSamples !== 8 ) object.blurSamples = this.blurSamples;
 		if ( this.mapSize.x !== 512 || this.mapSize.y !== 512 ) object.mapSize = this.mapSize.toArray();
 
 		object.camera = this.camera.toJSON( false ).object;

diff --git a/src/lights/SpotLightShadow.js b/src/lights/SpotLightShadow.js
@@ -70,11 +70,29 @@ class SpotLightShadow extends LightShadow {
 		super.copy( source );
 
 		this.focus = source.focus;
+		this.aspect = source.aspect;
 
 		return this;
 
 	}
 
+	/**
+	 * Serializes the light shadow into JSON.
+	 *
+	 * @return {Object} A JSON object representing the serialized light shadow.
+	 * @see {@link ObjectLoader#parse}
+	 */
+	toJSON() {
+
+		const object = super.toJSON();
+
+		if ( this.focus !== 1 ) object.focus = this.focus;
+		if ( this.aspect !== 1 ) object.aspect = this.aspect;
+
+		return object;
+
+	}
+
 }
 
 export { SpotLightShadow };
diff --git a/src/loaders/ObjectLoader.js b/src/loaders/ObjectLoader.js
@@ -1162,6 +1162,9 @@ class ObjectLoader extends Loader {
 			if ( data.shadow.bias !== undefined ) object.shadow.bias = data.shadow.bias;
 			if ( data.shadow.normalBias !== undefined ) object.shadow.normalBias = data.shadow.normalBias;
 			if ( data.shadow.radius !== undefined ) object.shadow.radius = data.shadow.radius;
+			if ( data.shadow.blurSamples !== undefined ) object.shadow.blurSamples = data.shadow.blurSamples;
+			if ( data.shadow.focus !== undefined ) object.shadow.focus = data.shadow.focus;
+			if ( data.shadow.aspect !== undefined ) object.shadow.aspect = data.shadow.aspect;
 			if ( data.shadow.mapSize !== undefined ) object.shadow.mapSize.fromArray( data.shadow.mapSize );
 			if ( data.shadow.camera !== undefined ) object.shadow.camera = this.parseObject( data.shadow.camera );
 

diff --git a/src/materials/Material.js b/src/materials/Material.js
@@ -1,9 +1,10 @@
 import { Color } from '../math/Color.js';
 import { EventDispatcher } from '../core/EventDispatcher.js';
-import { FrontSide, NormalBlending, LessEqualDepth, AddEquation, OneMinusSrcAlphaFactor, SrcAlphaFactor, AlwaysStencilFunc, KeepStencilOp } from '../constants.js';
+import { FrontSide, NormalBlending, LessEqualDepth, AddEquation, OneMinusSrcAlphaFactor, SrcAlphaFactor, AlwaysStencilFunc, KeepStencilOp, BasicDepthPacking } from '../constants.js';
 import { generateUUID } from '../math/MathUtils.js';
 import { warn } from '../utils.js';
 import { Vector2 } from '../math/Vector2.js';
+import { Plane } from '../math/Plane.js';
 
 let _materialId = 0;
 
@@ -683,7 +684,7 @@ class Material extends EventDispatcher {
 		}
 
 		if ( this.dispersion !== undefined ) data.dispersion = this.dispersion;
-		if ( this.retroreflective !== undefined ) data.retroreflective = this.retroreflective;
+		if ( this.retroreflectivity !== undefined ) data.retroreflectivity = this.retroreflectivity;
 
 		if ( this.iridescence !== undefined ) data.iridescence = this.iridescence;
 		if ( this.iridescenceIOR !== undefined ) data.iridescenceIOR = this.iridescenceIOR;
@@ -810,6 +811,15 @@ class Material extends EventDispatcher {
 		if ( this.depthWrite === false ) data.depthWrite = this.depthWrite;
 		if ( this.colorWrite === false ) data.colorWrite = this.colorWrite;
 
+		if ( Array.isArray( this.clippingPlanes ) && this.clippingPlanes.length > 0 ) {
+
+			data.clippingPlanes = this.clippingPlanes.map( plane => plane.toJSON() );
+
+		}
+
+		if ( this.clipIntersection === true ) data.clipIntersection = true;
+		if ( this.clipShadows === true ) data.clipShadows = true;
+
 		if ( this.stencilWriteMask !== 0xff ) data.stencilWriteMask = this.stencilWriteMask;
 		if ( this.stencilFunc !== AlwaysStencilFunc ) data.stencilFunc = this.stencilFunc;
 		if ( this.stencilRef !== 0 ) data.stencilRef = this.stencilRef;
@@ -822,11 +832,16 @@ class Material extends EventDispatcher {
 		// rotation (SpriteMaterial)
 		if ( this.rotation !== undefined && this.rotation !== 0 ) data.rotation = this.rotation;
 
+		// depthPacking (MeshDepthMaterial)
+		if ( this.depthPacking !== undefined && this.depthPacking !== BasicDepthPacking ) data.depthPacking = this.depthPacking;
+
 		if ( this.polygonOffset === true ) data.polygonOffset = true;
 		if ( this.polygonOffsetFactor !== 0 ) data.polygonOffsetFactor = this.polygonOffsetFactor;
 		if ( this.polygonOffsetUnits !== 0 ) data.polygonOffsetUnits = this.polygonOffsetUnits;
 
 		if ( this.linewidth !== undefined && this.linewidth !== 1 ) data.linewidth = this.linewidth;
+		if ( this.linecap !== undefined && this.linecap !== 'round' ) data.linecap = this.linecap;
+		if ( this.linejoin !== undefined && this.linejoin !== 'round' ) data.linejoin = this.linejoin;
 		if ( this.dashSize !== undefined ) data.dashSize = this.dashSize;
 		if ( this.gapSize !== undefined ) data.gapSize = this.gapSize;
 		if ( this.scale !== undefined ) data.scale = this.scale;
@@ -912,7 +927,7 @@ class Material extends EventDispatcher {
 		if ( json.clearcoat !== undefined ) this.clearcoat = json.clearcoat;
 		if ( json.clearcoatRoughness !== undefined ) this.clearcoatRoughness = json.clearcoatRoughness;
 		if ( json.dispersion !== undefined ) this.dispersion = json.dispersion;
-		if ( json.retroreflective !== undefined ) this.retroreflective = json.retroreflective;
+		if ( json.retroreflectivity !== undefined ) this.retroreflectivity = json.retroreflectivity;
 		if ( json.iridescence !== undefined ) this.iridescence = json.iridescence;
 		if ( json.iridescenceIOR !== undefined ) this.iridescenceIOR = json.iridescenceIOR;
 		if ( json.iridescenceThicknessRange !== undefined ) this.iridescenceThicknessRange = json.iridescenceThicknessRange;
@@ -936,6 +951,10 @@ class Material extends EventDispatcher {
 		if ( json.depthTest !== undefined ) this.depthTest = json.depthTest;
 		if ( json.depthWrite !== undefined ) this.depthWrite = json.depthWrite;
 		if ( json.colorWrite !== undefined ) this.colorWrite = json.colorWrite;
+		if ( json.clippingPlanes !== undefined ) this.clippingPlanes = json.clippingPlanes.map( plane => new Plane().fromJSON( plane ) );
+		if ( json.clipIntersection !== undefined ) this.clipIntersection = json.clipIntersection;
+		if ( json.clipShadows !== undefined ) this.clipShadows = json.clipShadows;
+		if ( json.depthPacking !== undefined ) this.depthPacking = json.depthPacking;
 		if ( json.blendSrc !== undefined ) this.blendSrc = json.blendSrc;
 		if ( json.blendDst !== undefined ) this.blendDst = json.blendDst;
 		if ( json.blendEquation !== undefined ) this.blendEquation = json.blendEquation;
@@ -961,6 +980,8 @@ class Material extends EventDispatcher {
 		if ( json.rotation !== undefined ) this.rotation = json.rotation;
 
 		if ( json.linewidth !== undefined ) this.linewidth = json.linewidth;
+		if ( json.linecap !== undefined ) this.linecap = json.linecap;
+		if ( json.linejoin !== undefined ) this.linejoin = json.linejoin;
 		if ( json.dashSize !== undefined ) this.dashSize = json.dashSize;
 		if ( json.gapSize !== undefined ) this.gapSize = json.gapSize;
 		if ( json.scale !== undefined ) this.scale = json.scale;

diff --git a/src/materials/MeshPhysicalMaterial.js b/src/materials/MeshPhysicalMaterial.js
@@ -356,7 +356,7 @@ class MeshPhysicalMaterial extends MeshStandardMaterial {
 		this._clearcoat = 0;
 		this._dispersion = 0;
 		this._iridescence = 0;
-		this._retroreflective = 0;
+		this._retroreflectivity = 0;
 		this._sheen = 0.0;
 		this._transmission = 0;
 
@@ -473,21 +473,21 @@ class MeshPhysicalMaterial extends MeshStandardMaterial {
 	 * @type {number}
 	 * @default 0
 	 */
-	get retroreflective() {
+	get retroreflectivity() {
 
-		return this._retroreflective;
+		return this._retroreflectivity;
 
 	}
 
-	set retroreflective( value ) {
+	set retroreflectivity( value ) {
 
-		if ( this._retroreflective > 0 !== value > 0 ) {
+		if ( this._retroreflectivity > 0 !== value > 0 ) {
 
 			this.version ++;
 
 		}
 
-		this._retroreflective = value;
+		this._retroreflectivity = value;
 
 	}
 
@@ -576,7 +576,7 @@ class MeshPhysicalMaterial extends MeshStandardMaterial {
 		this.iridescenceThicknessRange = [ ...source.iridescenceThicknessRange ];
 		this.iridescenceThicknessMap = source.iridescenceThicknessMap;
 
-		this.retroreflective = source.retroreflective;
+		this.retroreflectivity = source.retroreflectivity;
 
 		this.sheen = source.sheen;
 		this.sheenColor.copy( source.sheenColor );

diff --git a/src/materials/nodes/MeshPhysicalNodeMaterial.js b/src/materials/nodes/MeshPhysicalNodeMaterial.js
@@ -1,5 +1,5 @@
-import { clearcoat, clearcoatRoughness, sheen, sheenRoughness, iridescence, iridescenceIOR, iridescenceThickness, specularColor, specularColorBlended, specularF90, diffuseColor, metalness, roughness, anisotropy, alphaT, anisotropyT, anisotropyB, ior, transmission, thickness, attenuationDistance, attenuationColor, dispersion, retroreflective } from '../../nodes/core/PropertyNode.js';
-import { materialClearcoat, materialClearcoatRoughness, materialClearcoatNormal, materialSheen, materialSheenRoughness, materialIridescence, materialIridescenceIOR, materialIridescenceThickness, materialSpecularIntensity, materialSpecularColor, materialAnisotropy, materialIOR, materialTransmission, materialThickness, materialAttenuationDistance, materialAttenuationColor, materialDispersion, materialRetroreflective } from '../../nodes/accessors/MaterialNode.js';
+import { clearcoat, clearcoatRoughness, sheen, sheenRoughness, iridescence, iridescenceIOR, iridescenceThickness, specularColor, specularColorBlended, specularF90, diffuseColor, metalness, roughness, anisotropy, alphaT, anisotropyT, anisotropyB, ior, transmission, thickness, attenuationDistance, attenuationColor, dispersion, retroreflectivity } from '../../nodes/core/PropertyNode.js';
+import { materialClearcoat, materialClearcoatRoughness, materialClearcoatNormal, materialSheen, materialSheenRoughness, materialIridescence, materialIridescenceIOR, materialIridescenceThickness, materialSpecularIntensity, materialSpecularColor, materialAnisotropy, materialIOR, materialTransmission, materialThickness, materialAttenuationDistance, materialAttenuationColor, materialDispersion, materialRetroreflectivity } from '../../nodes/accessors/MaterialNode.js';
 import { float, vec2, vec3, If } from '../../nodes/tsl/TSLBase.js';
 import getRoughness from '../../nodes/functions/material/getRoughness.js';
 import { TBNViewMatrix } from '../../nodes/accessors/AccessorsUtils.js';
@@ -253,16 +253,16 @@ class MeshPhysicalNodeMaterial extends MeshStandardNodeMaterial {
 
 		/**
 		 * The retroreflective strength of physical materials is by default inferred from the
-		 * `retroreflective` property. This node property allows to overwrite the default
+		 * `retroreflectivity` property. This node property allows to overwrite the default
 		 * and define the retroreflective strength with a node instead.
 		 *
 		 * If you don't want to overwrite the retroreflective strength but modify the existing
-		 * value instead, use {@link materialRetroreflective}.
+		 * value instead, use {@link materialRetroreflectivity}.
 		 *
 		 * @type {?Node<float>}
 		 * @default null
 		 */
-		this.retroreflectiveNode = null;
+		this.retroreflectivityNode = null;
 
 		/**
 		 * The anisotropy of physical materials is by default inferred from the
@@ -361,9 +361,9 @@ class MeshPhysicalNodeMaterial extends MeshStandardNodeMaterial {
 	 * @type {boolean}
 	 * @default true
 	 */
-	get useRetroreflective() {
+	get useRetroreflection() {
 
-		return this.retroreflective > 0 || this.retroreflectiveNode !== null;
+		return this.retroreflectivity > 0 || this.retroreflectivityNode !== null;
 
 	}
 
@@ -388,7 +388,7 @@ class MeshPhysicalNodeMaterial extends MeshStandardNodeMaterial {
 	 */
 	setupLightingModel( /*builder*/ ) {
 
-		return new PhysicalLightingModel( this.useClearcoat, this.useSheen, this.useIridescence, this.useAnisotropy, this.useTransmission, this.useDispersion, this.useRetroreflective );
+		return new PhysicalLightingModel( this.useClearcoat, this.useSheen, this.useIridescence, this.useAnisotropy, this.useTransmission, this.useDispersion, this.useRetroreflection );
 
 	}
 
@@ -425,13 +425,13 @@ class MeshPhysicalNodeMaterial extends MeshStandardNodeMaterial {
 
 		}
 
-		// RETROREFLECTIVE
+		// RETROREFLECTION
 
-		if ( this.useRetroreflective ) {
+		if ( this.useRetroreflection ) {
 
-			const retroreflectiveNode = this.retroreflectiveNode ? float( this.retroreflectiveNode ) : materialRetroreflective;
+			const retroreflectivityNode = this.retroreflectivityNode ? float( this.retroreflectivityNode ) : materialRetroreflectivity;
 
-			retroreflective.assign( retroreflectiveNode );
+			retroreflectivity.assign( retroreflectivityNode );
 
 		}
 

diff --git a/src/materials/nodes/manager/NodeMaterialObserver.js b/src/materials/nodes/manager/NodeMaterialObserver.js
@@ -38,7 +38,7 @@ const refreshUniforms = [
 	'normalMap',
 	'normalScale',
 	'opacity',
-	'retroreflective',
+	'retroreflectivity',
 	'roughness',
 	'roughnessMap',
 	'sheen',