Skip to content

Commit c562b90

Browse files
RenaudRohlingerRenaudRohlinger
authored
WebGPURenderer: BatchedMesh colors support (#29203)
1 parent 17d2965 commit c562b90

File tree

5 files changed

+59
-30
lines changed

5 files changed

+59
-30
lines changed

‎examples/screenshots/webgpu_mesh_batch.jpg

16.2 KB
Loading

‎examples/webgpu_mesh_batch.html

Lines changed: 11 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<title>three.js webgpu - batch mesh</title>
4+
<title>three.js webgpu - mesh - batch</title>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
77
<link type="text/css" rel="stylesheet" href="main.css">
@@ -14,7 +14,7 @@
1414
<body>
1515

1616
<div id="info">
17-
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - batch mesh
17+
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - mesh - batch
1818
</div>
1919

2020
<script type="importmap">
@@ -38,6 +38,8 @@
3838
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
3939
import { radixSort } from 'three/addons/utils/SortUtils.js';
4040

41+
import { transformedNormalView, directionToColor, diffuseColor } from 'three/tsl';
42+
4143
let camera, scene, renderer;
4244
let controls, stats;
4345
let gui;
@@ -114,9 +116,10 @@
114116

115117
if ( ! material ) {
116118

117-
material = new THREE.MeshNormalNodeMaterial();
118-
119-
}
119+
material = new THREE.MeshBasicNodeMaterial();
120+
material.outputNode = diffuseColor.mul( directionToColor( transformedNormalView ).y.add( 0.5 ) );
121+
122+
}
120123

121124
return material;
122125

@@ -170,6 +173,7 @@
170173

171174
const id = mesh.addInstance( geometryIds[ i % geometryIds.length ] );
172175
mesh.setMatrixAt( id, randomizeMatrix( matrix ) );
176+
mesh.setColorAt( id, new THREE.Color( Math.random() * 0xffffff ) );
173177

174178
const rotationMatrix = new THREE.Matrix4();
175179
rotationMatrix.makeRotationFromEuler( randomizeRotationSpeed( euler ) );
@@ -201,7 +205,7 @@
201205
const aspect = window.innerWidth / window.innerHeight;
202206

203207
camera = new THREE.PerspectiveCamera( 70, aspect, 1, 100 );
204-
camera.position.z = 50;
208+
camera.position.z = 30;
205209

206210
// renderer
207211

@@ -214,18 +218,7 @@
214218
// scene
215219

216220
scene = new THREE.Scene();
217-
scene.background = new THREE.Color( 0xffffff );
218-
219-
220-
if ( forceWebGL ) {
221-
222-
scene.background = new THREE.Color( 0xf10000 );
223-
224-
} else {
225-
226-
scene.background = new THREE.Color( 0x0000f1 );
227-
228-
}
221+
scene.background = forceWebGL ? new THREE.Color( 0xffc1c1 ) : new THREE.Color( 0xc1c1ff );
229222

230223
document.body.appendChild( renderer.domElement );
231224

‎src/nodes/accessors/BatchNode.js

Lines changed: 39 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { textureLoad } from './TextureNode.js';
66
import { textureSize } from './TextureSizeNode.js';
77
import { tangentLocal } from './TangentNode.js';
88
import { instanceIndex, drawIndex } from '../core/IndexNode.js';
9+
import { varyingProperty } from '../core/PropertyNode.js';
910

1011
class BatchNode extends Node {
1112

@@ -16,8 +17,6 @@ class BatchNode extends Node {
1617
this.batchMesh = batchMesh;
1718

1819

19-
this.instanceColorNode = null;
20-
2120
this.batchingIdNode = null;
2221

2322
}
@@ -55,20 +54,49 @@ class BatchNode extends Node {
5554
]
5655
} );
5756

58-
const matriceTexture = this.batchMesh._matricesTexture;
57+
const indirectId = getIndirectIndex( int( this.batchingIdNode ) );
58+
59+
const matricesTexture = this.batchMesh._matricesTexture;
5960

60-
const size = textureSize( textureLoad( matriceTexture ), 0 );
61-
const j = float( getIndirectIndex( int( this.batchingIdNode ) ) ).mul( 4 ).toVar();
61+
const size = textureSize( textureLoad( matricesTexture ), 0 );
62+
const j = float( indirectId ).mul( 4 ).toInt().toVar();
6263

63-
const x = int( j.mod( size ) );
64-
const y = int( j ).div( int( size ) );
64+
const x = j.modInt( size );
65+
const y = j.div( int( size ) );
6566
const batchingMatrix = mat4(
66-
textureLoad( matriceTexture, ivec2( x, y ) ),
67-
textureLoad( matriceTexture, ivec2( x.add( 1 ), y ) ),
68-
textureLoad( matriceTexture, ivec2( x.add( 2 ), y ) ),
69-
textureLoad( matriceTexture, ivec2( x.add( 3 ), y ) )
67+
textureLoad( matricesTexture, ivec2( x, y ) ),
68+
textureLoad( matricesTexture, ivec2( x.add( 1 ), y ) ),
69+
textureLoad( matricesTexture, ivec2( x.add( 2 ), y ) ),
70+
textureLoad( matricesTexture, ivec2( x.add( 3 ), y ) )
7071
);
7172

73+
74+
const colorsTexture = this.batchMesh._colorsTexture;
75+
76+
if ( colorsTexture !== null ) {
77+
78+
const getBatchingColor = Fn( ( [ id ] ) => {
79+
80+
const size = textureSize( textureLoad( colorsTexture ), 0 ).x;
81+
const j = id;
82+
const x = j.modInt( size );
83+
const y = j.div( size );
84+
return textureLoad( colorsTexture, ivec2( x, y ) ).rgb;
85+
86+
} ).setLayout( {
87+
name: 'getBatchingColor',
88+
type: 'vec3',
89+
inputs: [
90+
{ name: 'id', type: 'int' }
91+
]
92+
} );
93+
94+
const color = getBatchingColor( indirectId );
95+
96+
varyingProperty( 'vec3', 'vBatchColor' ).assign( color );
97+
98+
}
99+
72100
const bm = mat3( batchingMatrix );
73101

74102
positionLocal.assign( batchingMatrix.mul( positionLocal ) );

‎src/nodes/materials/NodeMaterial.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -310,6 +310,15 @@ class NodeMaterial extends Material {
310310

311311
}
312312

313+
if ( object.isBatchedMesh && object._colorsTexture ) {
314+
315+
const batchColor = varyingProperty( 'vec3', 'vBatchColor' );
316+
317+
colorNode = batchColor.mul( colorNode );
318+
319+
}
320+
321+
313322
// COLOR
314323

315324
diffuseColor.assign( colorNode );

‎test/e2e/puppeteer.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,6 @@ const exceptionList = [
141141
'webgpu_portal',
142142
'webgpu_custom_fog',
143143
'webgpu_instancing_morph',
144-
'webgpu_mesh_batch',
145144
'webgpu_texturegrad',
146145
'webgpu_performance_renderbundle',
147146
'webgpu_lights_rectarealight',

0 commit comments

Comments
 (0)