📦 Bundle size

Full ESM build, minified and gzipped.

🌳 Bundle size after tree-shaking

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

This PR broke the visuals in webgpu_lights_custom. For comparison:

https://threejs.org/examples/webgpu_lights_custom
https://rawcdn.githack.com/mrdoob/three.js/dev/examples/webgpu_lights_custom.html

@WestLangley Can you please revisit this change? webgpu_lights_custom is obviously broken. The example code should generate random points inside a conceptual cube shape.

Depending on the camera, the point cloud looks now distorted. This becomes more clear if you remove the custom lighting model:

This is clearly a regression. If not fixed, we have to revert the PR before the r180 release.

This PR ads an extra scale factor ( by DPR * canvas_height ) to mirror the implementation in WebGLRenderer.

//

Here are the use cases that, as of now, must be supported:

sprite = new THREE.Sprite( new THREE.SpriteNodeMaterial() );

instancedPoints = new THREE.Sprite( new THREE.PointsNodeMaterial( { positionNode: instancedBufferAttribute( positionAttribute ) } ) );

pointCloud = new THREE.Points( new THREE.BufferGeometry(), new THREE.PointsNodeMaterial() );

It is the third use case that is the problem.

When PointsNodeMaterial is used as the material for Sprite, the points have a size that is honored.

When the same material is used as the material for Points, size is ignored.

//

@sunag @Mugen87 Can you please help with the architecture here? PointsNodeMaterial and SpriteNodeMaterial are closely coupled by WebGPURenderer.

This PR ads an extra scale factor ( by DPR * canvas_height ) to mirror the implementation in WebGLRenderer

Unfortunately, the implementation is not correct.

The scale factor 0.5 * height * dpr must be a uniform and not inlined. Besides, you can't extract the DPR in setupVertex() since you miss dynamic changes to the DPR set via renderer.setPixelRatio().

The distortion from the video comes from the fact that the new scaled point size is incorrectly used in subsequent shader code for point primitives.

@sunag Can we implement two setupVertex() methods? One setupVertexPoints() and setupVertexSprites()? We then call the correct method for the render primitive in setupVertex(). This would make it easier to integrate @WestLangley's code changes.

@WestLangley The scale uniform from sprites.glsl.js can be implemented like so:

const _size = /*@__PURE__*/ new Vector2();

const scale = /*@__PURE__*/ uniform( 1 ).onFrameUpdate( function ( { renderer } ) {

	const dpr = renderer.getPixelRatio();
	const size = renderer.getSize( _size );

	this.value = 0.5 * size.y * dpr;

} );

If you need DPR as a uniform, I suggest we enhance ScreenNode and add ScreenNode.DPR. You can then write the current DPR in ScreenNode.update() into the uniform.

#31702 attempts to provide a fix.

@Mugen87 Thank you for your help!

@sunag Can we implement two setupVertex() methods? One setupVertexPoints() and setupVertexSprites()? We then call the correct method for the render primitive in setupVertex(). This would make it easier to integrate @WestLangley's code changes.

The idea was great. Thank you too! :)