diff --git a/examples/screenshots/webgpu_performance_renderbundle.jpg b/examples/screenshots/webgpu_performance_renderbundle.jpg index 200dffa9eead9e..0c1e0b70978d09 100644 Binary files a/examples/screenshots/webgpu_performance_renderbundle.jpg and b/examples/screenshots/webgpu_performance_renderbundle.jpg differ diff --git a/examples/webgpu_performance_renderbundle.html b/examples/webgpu_performance_renderbundle.html index 672095ffd21158..b1257ed85305bc 100644 --- a/examples/webgpu_performance_renderbundle.html +++ b/examples/webgpu_performance_renderbundle.html @@ -47,7 +47,7 @@ let camera, scene, renderer; let controls; let gui; - let geometries, group; + let geometries, group, instancedMesh; // @@ -56,6 +56,9 @@ const quaternion = new THREE.Quaternion(); const scale = new THREE.Vector3(); + const instanceMatrix = new THREE.Matrix4(); + const rotationMatrix = new THREE.Matrix4(); + // const api = { @@ -122,13 +125,6 @@ function initMesh( count ) { - initRegularMesh( count ); - - } - - - function initRegularMesh( count ) { - group = api.renderBundle ? new THREE.BundleGroup() : new THREE.Group(); for ( let i = 0; i < count; i ++ ) { @@ -147,6 +143,26 @@ } + // instanced meshes are supported inside a bundle group, too + + instancedMesh = new THREE.InstancedMesh( geometries[ 0 ], new THREE.MeshToonNodeMaterial(), 10 ); + instancedMesh.userData.rotationSpeeds = []; + + const matrix = new THREE.Matrix4(); + + for ( let i = 0; i < instancedMesh.count; i ++ ) { + + randomizeMatrix( matrix ); + instancedMesh.setMatrixAt( i, matrix ); + + instancedMesh.userData.rotationSpeeds.push( randomizeRotationSpeed( new THREE.Euler() ) ); + + } + + group.add( instancedMesh ); + + // + scene.add( group ); } @@ -245,10 +261,11 @@ function animateMeshes() { - const count = api.count; - const loopNum = api.dynamic ? count : 0; + if ( api.dynamic === false ) return; - for ( let i = 0; i < loopNum; i ++ ) { + // rotate the regular meshes + + for ( let i = 0; i < api.count; i ++ ) { const child = group.children[ i ]; const rotationSpeed = child.userData.rotationSpeed; @@ -261,6 +278,22 @@ } + // rotate each instance of the instanced mesh individually + + const rotationSpeeds = instancedMesh.userData.rotationSpeeds; + + for ( let i = 0; i < instancedMesh.count; i ++ ) { + + rotationMatrix.makeRotationFromEuler( rotationSpeeds[ i ] ); + + instancedMesh.getMatrixAt( i, instanceMatrix ); + instanceMatrix.multiply( rotationMatrix ); + instancedMesh.setMatrixAt( i, instanceMatrix ); + + } + + instancedMesh.instanceMatrix.needsUpdate = true; + } } diff --git a/src/renderers/common/Renderer.js b/src/renderers/common/Renderer.js index 6cdf6d1c184c8d..e736febc4d3ae2 100644 --- a/src/renderers/common/Renderer.js +++ b/src/renderers/common/Renderer.js @@ -1328,6 +1328,7 @@ class Renderer { this._nodes.updateBefore( renderObject ); + this._geometries.updateForRender( renderObject ); this._nodes.updateForRender( renderObject ); this._bindings.updateForRender( renderObject );