Просмотр исходного кода

WebGPURenderer: BatchedMesh colors support (#29203)

Renaud Rohlinger 1 год назад
Родитель
Сommit
c562b9090a

BIN
examples/screenshots/webgpu_mesh_batch.jpg


+ 11 - 18
examples/webgpu_mesh_batch.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<title>three.js webgpu - batch mesh</title>
+	<title>three.js webgpu - mesh - batch</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">
@@ -14,7 +14,7 @@
 <body>
 
 	<div id="info">
-		<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - batch mesh
+		<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - mesh - batch
 	</div>
 
 	<script type="importmap">
@@ -38,6 +38,8 @@
 		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 		import { radixSort } from 'three/addons/utils/SortUtils.js';
 
+		import { transformedNormalView, directionToColor, diffuseColor } from 'three/tsl';
+
 		let camera, scene, renderer;
 		let controls, stats;
 		let gui;
@@ -114,9 +116,10 @@
 
 			if ( ! material ) {
 
-				material = new THREE.MeshNormalNodeMaterial();
-
-			}
+				material = new THREE.MeshBasicNodeMaterial();
+				material.outputNode = diffuseColor.mul( directionToColor( transformedNormalView ).y.add( 0.5 ) );
+		
+	}
 
 			return material;
 
@@ -170,6 +173,7 @@
 
 				const id = mesh.addInstance( geometryIds[ i % geometryIds.length ] );
 				mesh.setMatrixAt( id, randomizeMatrix( matrix ) );
+				mesh.setColorAt( id, new THREE.Color( Math.random() * 0xffffff ) );
 
 				const rotationMatrix = new THREE.Matrix4();
 				rotationMatrix.makeRotationFromEuler( randomizeRotationSpeed( euler ) );
@@ -201,7 +205,7 @@
 			const aspect = window.innerWidth / window.innerHeight;
 
 			camera = new THREE.PerspectiveCamera( 70, aspect, 1, 100 );
-			camera.position.z = 50;
+			camera.position.z = 30;
 
 			// renderer
 
@@ -214,18 +218,7 @@
 			// scene
 
 			scene = new THREE.Scene();
-			scene.background = new THREE.Color( 0xffffff );
-
-
-			if ( forceWebGL ) {
-
-				scene.background = new THREE.Color( 0xf10000 );
-
-			} else {
-
-				scene.background = new THREE.Color( 0x0000f1 );
-
-			}
+			scene.background = forceWebGL ? new THREE.Color( 0xffc1c1 ) : new THREE.Color( 0xc1c1ff );
 
 			document.body.appendChild( renderer.domElement );
 

+ 39 - 11
src/nodes/accessors/BatchNode.js

@@ -6,6 +6,7 @@ import { textureLoad } from './TextureNode.js';
 import { textureSize } from './TextureSizeNode.js';
 import { tangentLocal } from './TangentNode.js';
 import { instanceIndex, drawIndex } from '../core/IndexNode.js';
+import { varyingProperty } from '../core/PropertyNode.js';
 
 class BatchNode extends Node {
 
@@ -16,8 +17,6 @@ class BatchNode extends Node {
 		this.batchMesh = batchMesh;
 
 
-		this.instanceColorNode = null;
-
 		this.batchingIdNode = null;
 
 	}
@@ -55,20 +54,49 @@ class BatchNode extends Node {
 			]
 		} );
 
-		const matriceTexture = this.batchMesh._matricesTexture;
+		const indirectId = getIndirectIndex( int( this.batchingIdNode ) );
+
+		const matricesTexture = this.batchMesh._matricesTexture;
 
-		const size = textureSize( textureLoad( matriceTexture ), 0 );
-		const j = float( getIndirectIndex( int( this.batchingIdNode ) ) ).mul( 4 ).toVar();
+		const size = textureSize( textureLoad( matricesTexture ), 0 );
+		const j = float( indirectId ).mul( 4 ).toInt().toVar();
 
-		const x = int( j.mod( size ) );
-		const y = int( j ).div( int( size ) );
+		const x = j.modInt( size );
+		const y = j.div( int( size ) );
 		const batchingMatrix = mat4(
-			textureLoad( matriceTexture, ivec2( x, y ) ),
-			textureLoad( matriceTexture, ivec2( x.add( 1 ), y ) ),
-			textureLoad( matriceTexture, ivec2( x.add( 2 ), y ) ),
-			textureLoad( matriceTexture, ivec2( x.add( 3 ), y ) )
+			textureLoad( matricesTexture, ivec2( x, y ) ),
+			textureLoad( matricesTexture, ivec2( x.add( 1 ), y ) ),
+			textureLoad( matricesTexture, ivec2( x.add( 2 ), y ) ),
+			textureLoad( matricesTexture, ivec2( x.add( 3 ), y ) )
 		);
 
+
+		const colorsTexture = this.batchMesh._colorsTexture;
+
+		if ( colorsTexture !== null ) {
+
+			const getBatchingColor = Fn( ( [ id ] ) => {
+
+				const size = textureSize( textureLoad( colorsTexture ), 0 ).x;
+				const j = id;
+				const x = j.modInt( size );
+				const y = j.div( size );
+				return textureLoad( colorsTexture, ivec2( x, y ) ).rgb;
+
+			} ).setLayout( {
+				name: 'getBatchingColor',
+				type: 'vec3',
+				inputs: [
+					{ name: 'id', type: 'int' }
+				]
+			} );
+
+			const color = getBatchingColor( indirectId );
+
+			varyingProperty( 'vec3', 'vBatchColor' ).assign( color );
+
+		}
+
 		const bm = mat3( batchingMatrix );
 
 		positionLocal.assign( batchingMatrix.mul( positionLocal ) );

+ 9 - 0
src/nodes/materials/NodeMaterial.js

@@ -310,6 +310,15 @@ class NodeMaterial extends Material {
 
 		}
 
+		if ( object.isBatchedMesh && object._colorsTexture ) {
+
+			const batchColor = varyingProperty( 'vec3', 'vBatchColor' );
+
+			colorNode = batchColor.mul( colorNode );
+
+		}
+
+
 		// COLOR
 
 		diffuseColor.assign( colorNode );

+ 0 - 1
test/e2e/puppeteer.js

@@ -141,7 +141,6 @@ const exceptionList = [
 	'webgpu_portal',
 	'webgpu_custom_fog',
 	'webgpu_instancing_morph',
-	'webgpu_mesh_batch',
 	'webgpu_texturegrad',
 	'webgpu_performance_renderbundle',
 	'webgpu_lights_rectarealight',

粤ICP备19079148号