[pull] dev from mrdoob:dev

examples/jsm/tsl/shadows/TileShadowNode.js

@@ -162,7 +162,7 @@ class TileShadowNode extends ShadowBaseNode {
 		const depthTexture = new DepthTexture( shadowWidth, shadowHeight, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, tileCount );
 		depthTexture.compareFunction = LessCompare;
 		depthTexture.name = 'ShadowDepthArrayTexture';
-		const shadowMap = builder.createRenderTarget( shadowWidth, shadowHeight, { format: RedFormat, depth: tileCount } );
+		const shadowMap = builder.createRenderTarget( shadowWidth, shadowHeight, { format: RedFormat, depth: tileCount, useArrayDepthTexture: true } );
 		shadowMap.depthTexture = depthTexture;
 		shadowMap.texture.name = 'ShadowTexture';
 		this.shadowMap = shadowMap;

examples/jsm/tsl/shadows/TileShadowNodeHelper.js

@@ -1,5 +1,5 @@
 import { Group, NodeMaterial, Mesh, PlaneGeometry, DoubleSide, CameraHelper } from 'three/webgpu';
-import { Fn, vec4, vec3, texture, uv, positionLocal, vec2, float, screenSize } from 'three/tsl';
+import { Fn, vec4, vec3, texture, uv, positionLocal, vec2, float, int, screenSize } from 'three/tsl';
 
 /**
  * Helper class to manage and display debug visuals for TileShadowNode.
@@ -109,7 +109,7 @@ class TileShadowNodeHelper extends Group {
 
 				const sampledDepth = texture( this.tileShadowNode.shadowMap.depthTexture )
 					.sample( uv().flipY() )
-					.depth( float( i ) ) // Sample correct layer
+					.depth( int( i ) ) // Sample correct layer
 					.compare( 0.9 ); // Example comparison value
 
 				// Simple tint based on index for visual distinction

examples/webgl_furnace_test.html

@@ -30,8 +30,12 @@
 
 			import * as THREE from 'three';
 
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+
 			let scene, camera, renderer, radianceMap;
 
+			let gui;
+
 			const COLOR = 0xcccccc;
 
 			function init() {
@@ -47,32 +51,6 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				document.body.appendChild( renderer.domElement );
 
-				window.addEventListener( 'resize', onWindowResize );
-
-				document.body.addEventListener( 'mouseover', function () {
-
-					scene.traverse( function ( child ) {
-
-						if ( child.isMesh ) child.material.color.setHex( 0xffffff );
-
-					} );
-
-					render();
-
-				} );
-
-				document.body.addEventListener( 'mouseout', function () {
-
-					scene.traverse( function ( child ) {
-
-						if ( child.isMesh ) child.material.color.setHex( 0xccccff ); // tinted for visibility
-
-					} );
-
-					render();
-
-				} );
-
 				// scene
 
 				scene = new THREE.Scene();
@@ -81,6 +59,12 @@
 				camera = new THREE.PerspectiveCamera( 40, aspect, 1, 30 );
 				camera.position.set( 0, 0, 18 );
 
+				//
+
+				initGui();
+
+				window.addEventListener( 'resize', onWindowResize );
+
 			}
 
 			function createObjects() {
@@ -145,6 +129,30 @@
 
 			}
 
+			function initGui() {
+
+				gui = new GUI();
+
+				const param = {
+					'tint': false
+				};
+
+				gui.add( param, 'tint' ).name( 'Tint for Visibility' ).onChange( function ( val ) {
+
+					scene.traverse( function ( child ) {
+
+						const tint = val ? 0xccccff : 0xffffff;
+
+						if ( child.isMesh ) child.material.color.setHex( tint );
+
+					} );
+
+					render();
+
+				} );
+
+			}
+
 			Promise.resolve()
 				.then( init )
 				.then( createEnvironment )

examples/webgpu_furnace_test.html

@@ -36,8 +36,12 @@
 
 			import * as THREE from 'three';
 
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+
 			let scene, camera, renderer, radianceMap;
 
+			let gui;
+
 			const COLOR = 0xcccccc;
 
 			async function init() {
@@ -66,31 +70,10 @@
 
 				//
 
-				window.addEventListener( 'resize', onWindowResize );
-
-				document.body.addEventListener( 'mouseover', function () {
-
-					scene.traverse( function ( child ) {
-
-						if ( child.isMesh ) child.material.color.setHex( 0xffffff );
-
-					} );
-
-					render();
-
-				} );
-
-				document.body.addEventListener( 'mouseout', function () {
-
-					scene.traverse( function ( child ) {
-
-						if ( child.isMesh ) child.material.color.setHex( 0xccccff ); // tinted for visibility
-
-					} );
+				initGui();
 
-					render();
+				window.addEventListener( 'resize', onWindowResize );
 
-				} );
 			}
 
 			function createObjects() {
@@ -155,6 +138,30 @@
 
 			}
 
+			function initGui() {
+
+				gui = new GUI();
+
+				const param = {
+					'tint': false
+				};
+
+				gui.add( param, 'tint' ).name( 'Tint for Visibility' ).onChange( function ( val ) {
+
+					scene.traverse( function ( child ) {
+
+						const tint = val ? 0xccccff : 0xffffff;
+
+						if ( child.isMesh ) child.material.color.setHex( tint );
+
+					} );
+
+					render();
+
+				} );
+
+			}
+
 			Promise.resolve()
 				.then( init )
 				.then( createEnvironment )

src/core/BufferGeometry.js

@@ -841,13 +841,14 @@ class BufferGeometry extends EventDispatcher {
 		const normalAttribute = attributes.normal;
 		const uvAttribute = attributes.uv;
 
-		if ( this.hasAttribute( 'tangent' ) === false ) {
+		let tangentAttribute = this.getAttribute( 'tangent' );
 
-			this.setAttribute( 'tangent', new BufferAttribute( new Float32Array( 4 * positionAttribute.count ), 4 ) );
+		if ( tangentAttribute === undefined || tangentAttribute.count !== positionAttribute.count ) {
 
-		}
+			tangentAttribute = new BufferAttribute( new Float32Array( 4 * positionAttribute.count ), 4 );
+			this.setAttribute( 'tangent', tangentAttribute );
 
-		const tangentAttribute = this.getAttribute( 'tangent' );
+		}
 
 		const tan1 = [], tan2 = [];
 
@@ -993,7 +994,7 @@ class BufferGeometry extends EventDispatcher {
 
 			let normalAttribute = this.getAttribute( 'normal' );
 
-			if ( normalAttribute === undefined ) {
+			if ( normalAttribute === undefined || normalAttribute.count !== positionAttribute.count ) {
 
 				normalAttribute = new BufferAttribute( new Float32Array( positionAttribute.count * 3 ), 3 );
 				this.setAttribute( 'normal', normalAttribute );

src/core/RenderTarget.js

@@ -36,7 +36,8 @@ class RenderTarget extends EventDispatcher {
 	 * @property {number} [samples=0] - The MSAA samples count.
 	 * @property {number} [count=1] - Defines the number of color attachments . Must be at least `1`.
 	 * @property {number} [depth=1] - The texture depth.
-	 * @property {boolean} [multiview=false] - Whether this target is used for multiview rendering.
+	 * @property {boolean} [multiview=false] - Whether this target is used for multiview rendering (WebGL OVR_multiview2 extension).
+	 * @property {boolean} [useArrayDepthTexture=false] - Whether to create the depth texture as an array texture for per-layer depth testing. This is separate from multiview so layered render targets can use array depth without the multiview extension.
 	 */
 
 	/**
@@ -62,7 +63,8 @@ class RenderTarget extends EventDispatcher {
 			samples: 0,
 			count: 1,
 			depth: 1,
-			multiview: false
+			multiview: false,
+			useArrayDepthTexture: false
 		}, options );
 
 		/**
@@ -199,6 +201,16 @@ class RenderTarget extends EventDispatcher {
 		 */
 		this.multiview = options.multiview;
 
+		/**
+		 * Whether to create the depth texture as an array texture for per-layer depth testing.
+		 * This is separate from multiview so layered render targets can use array depth without
+		 * the multiview extension.
+		 *
+		 * @type {boolean}
+		 * @default false
+		 */
+		this.useArrayDepthTexture = options.useArrayDepthTexture;
+
 	}
 
 	_setTextureOptions( options = {} ) {
@@ -370,6 +382,7 @@ class RenderTarget extends EventDispatcher {
 
 		this.samples = source.samples;
 		this.multiview = source.multiview;
+		this.useArrayDepthTexture = source.useArrayDepthTexture;
 
 		return this;
 

src/renderers/common/Renderer.js

@@ -1344,6 +1344,37 @@ class Renderer {
 
 	}
 
+	_renderOutputLayers( quad, renderTarget ) {
+
+		if ( renderTarget.texture.isArrayTexture !== true || renderTarget.texture.image.depth <= 1 ) {
+
+			this._renderScene( quad, quad.camera, false );
+			return;
+
+		}
+
+		const currentActiveCubeFace = this._activeCubeFace;
+
+		try {
+
+			for ( let layer = 0; layer < renderTarget.texture.image.depth; layer ++ ) {
+
+				this._nodes.setOutputLayerIndex( layer );
+				this._activeCubeFace = layer;
+
+				this._renderScene( quad, quad.camera, false );
+
+			}
+
+		} finally {
+
+			this._nodes.setOutputLayerIndex( 0 );
+			this._activeCubeFace = currentActiveCubeFace;
+
+		}
+
+	}
+
 	/**
 	 * Returns an internal render target which is used when computing the output tone mapping
 	 * and color space conversion. Unlike in `WebGLRenderer`, this is done in a separate render
@@ -1429,6 +1460,7 @@ class Renderer {
 		frameBufferTarget.scissor.multiplyScalar( pixelRatio );
 		frameBufferTarget.scissorTest = scissorTest;
 		frameBufferTarget.multiview = outputRenderTarget !== null ? outputRenderTarget.multiview : false;
+		frameBufferTarget.useArrayDepthTexture = outputRenderTarget !== null ? outputRenderTarget.useArrayDepthTexture : false;
 		frameBufferTarget.resolveDepthBuffer = outputRenderTarget !== null ? outputRenderTarget.resolveDepthBuffer : true;
 		frameBufferTarget._autoAllocateDepthBuffer = outputRenderTarget !== null ? outputRenderTarget._autoAllocateDepthBuffer : false;
 
@@ -1762,7 +1794,6 @@ class Renderer {
 		// restore render tree
 
 		nodeFrame.renderId = previousRenderId;
-
 		this._currentRenderContext = previousRenderContext;
 		this._currentRenderObjectFunction = previousRenderObjectFunction;
 		this._handleObjectFunction = previousHandleObjectFunction;
@@ -1868,8 +1899,7 @@ class Renderer {
 
 		this.autoClear = false;
 		this.xr.enabled = false;
-
-		this._renderScene( quad, quad.camera, false );
+		this._renderOutputLayers( quad, renderTarget );
 
 		this.autoClear = currentAutoClear;
 		this.xr.enabled = currentXR;

src/renderers/common/Textures.js

@@ -83,6 +83,9 @@ class Textures extends DataMap {
 
 		let textureNeedsUpdate = false;
 
+		const hasArrayDepthTexture = depthTexture !== undefined && depthTexture.image !== undefined && depthTexture.image.depth > 1;
+		const useArrayDepth = size.depth > 1 && ( renderTarget.useArrayDepthTexture || renderTarget.multiview || hasArrayDepthTexture );
+
 		if ( depthTexture === undefined && useDepthTexture ) {
 
 			depthTexture = new DepthTexture();
@@ -93,12 +96,17 @@ class Textures extends DataMap {
 			depthTexture.image.height = mipHeight;
 			depthTexture.image.depth = size.depth;
 			depthTexture.renderTarget = renderTarget;
-			depthTexture.isArrayTexture = renderTarget.multiview === true && size.depth > 1;
 
 			depthTextureMips[ activeMipmapLevel ] = depthTexture;
 
 		}
 
+		if ( depthTexture ) {
+
+			depthTexture.isArrayTexture = useArrayDepth;
+
+		}
+
 		if ( renderTargetData.width !== size.width || size.height !== renderTargetData.height ) {
 
 			textureNeedsUpdate = true;
@@ -108,7 +116,7 @@ class Textures extends DataMap {
 				depthTexture.needsUpdate = true;
 				depthTexture.image.width = mipWidth;
 				depthTexture.image.height = mipHeight;
-				depthTexture.image.depth = depthTexture.isArrayTexture ? depthTexture.image.depth : 1;
+				depthTexture.image.depth = useArrayDepth ? size.depth : 1;
 
 			}