WebGPURenderer: Improve RenderObject grouping - WIP

[sunag]

Related issue: #30560 (comment), #30560 (comment), #26673 (comment)

Description

This is a WIP.

The basic idea is to group the RenderObject so that we can handle similar objects.

Today we have a lot of redundant calls between similar objects in the rendering call that could be resolved in just one Backend.draw().

• Improve RenderObject grouping

  • Add a key related to the object to separate properties relevant to shader creation, such as object.morphTargetInfluences and object.count for filterObjects, RenderObjects.get and RenderObject.getChainArray().
  • Remove the term RenderObject.instances and leave only RenderObject.objects
  • Implement the dispose logic

• Create shared buffer

  • Create an extended buffer class designed to couple multiple uniforms.
  • Integrate shared buffer initially for modelWorldMatrix and modelNormalMatrix.
    • Introduce objectIndex
    • Introduce mediumpModelWorldMatrix
    • Introduce mediumpModelNormalMatrix
  • The buffer node is not being shared properly when shared with other materials, causing the buffer to be updated more than once in the same render call. WebGPURenderer: Improve cache bindings from node uniforms #32244
  • buffer does not have an integrated updateRanges range, which can be a problem if used in conjunction with instances since InstanceNode does not distinguish it with an attribute. WebGPURenderer: Add update ranges for bindings #32248
    

    three.js/src/nodes/accessors/InstanceNode.js

    Lines 120 to 126 in 8173be8

    	// Both WebGPU and WebGL backends have UBO max limited to 64kb. Matrix count number bigger than 1000 ( 16 * 4 * 1000 = 64kb ) will fallback to attribute.
    	if ( count <= 1000 ) {
    	instanceMatrixNode = buffer( instanceMatrix.array, 'mat4', Math.max( count, 1 ) ).element( instanceIndex );
    	} else {

[github-actions]

📦 Bundle size

Full ESM build, minified and gzipped.

	Before	After	Diff
Core	390.08 102.3	390.08 102.3	+0 B +0 B
WebGL	372.73 87.14	372.73 87.14	+0 B +0 B
WebGPU	429.27 115.67	430.86 116.17	+1.59 kB +506 B
WebGPU Nodes	716.94 196.98	719.75 197.85	+2.81 kB +869 B

🌳 Bundle size after tree-shaking

Minimal build including a renderer, camera, empty scene, and dependencies.

	Before	After	Diff
WebGL	517.46 124.27	517.46 124.27	+0 B +0 B
WebGPU	769.54 206.2	773.07 207.28	+3.53 kB +1.08 kB
WebGPU Nodes	715.39 192.75	718.92 193.77	+3.53 kB +1.02 kB

[sunag]

I've included [two identical examples] using 10k sprites without instances, (1eb6d6d) for testing purposes, one using the current build and the other using the source code from the new code.

I'm excited about the results;
/cc @Mugen87 @mrdoob

New - 144~ FPS

Current - 30~ FPS

[sunag]

Good memories when this example works, hahaha.

32 is the number of objects that are sharing the same uniform-group in the object context (worldMatrix and normalMatrix).

[sunag]

There's a thing that's been blocking this PR in a way.

When we create a Material on a new object, it will create a shader, but if we modify the same material and use it on a new object, we'll have two different types of materials.

This characteristic was useful when we used shadow resource nodes in scene.overrideMaterial where we only modified parameters. After merger this, this characteristic should disappear, and we'll probably need to create some extra dummies of the materials for that purpose, but I think it shouldn't be expected anyway.

three.js/src/renderers/common/Renderer.js

Lines 3215 to 3233 in ccd2e6d

	if ( overrideMaterial.isShadowPassMaterial ) {
	const { colorNode, depthNode, positionNode } = this._getShadowNodes( material );
	if ( this.shadowMap.type === VSMShadowMap ) {
	overrideMaterial.side = ( material.shadowSide !== null ) ? material.shadowSide : material.side;
	} else {
	overrideMaterial.side = ( material.shadowSide !== null ) ? material.shadowSide : _shadowSide[ material.side ];
	}
	if ( colorNode !== null ) overrideMaterial.colorNode = colorNode;
	if ( depthNode !== null ) overrideMaterial.depthNode = depthNode;
	if ( positionNode !== null ) overrideMaterial.positionNode = positionNode;
	}

Does anyone use it this way? If necessary, I can create an example to demonstrate this.

/cc @Mugen87 @RenaudRohlinger

[Mugen87]

I just know that the code snippet from your last post is required to get shadows work. If we can't do that anymore, we need a replacement in any event.

[github-actions]

🖼️ E2E screenshot tests

❌ 17 example(s) failed (full artifacts).

Example	Expected	Actual	Diff
webgpu_custom_fog_scattering
webgpu_depth_texture
webgpu_geometry_loft
webgpu_instance_uniform
webgpu_lensflares
webgpu_lightprobes_complex
webgpu_loader_materialx
webgpu_materials_arrays
webgpu_postprocessing_motion_blur
webgpu_postprocessing_outline

…and 7 more: webgpu_shadowmap, webgpu_shadowmap_opacity, webgpu_shadowmap_vsm, webgpu_sprites_2, webgpu_sprites_debug, webgpu_sprites_old, webgpu_xr_shadows