PointNodeMaterial: Size Differs from WebGL PointsMaterial

[cmhhelgeson]

Description

Based on my current understanding of how PointsNodeMaterial works, even though the user will still have to convert their Points object to a Sprite, it should somewhat work as a drop-in solution for the old PointsMaterial. Therefore, one might expect, with all other properties of the scene being equal, that this WebGL code...

// Used in WebGL (Standard Points) and WebGPU (Standard Points)
const pointGeo = new THREE.BufferGeometry();
const positions = new Float32Array( [ 1, 1, 1 ] );
pointGeo.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
const pointMaterial = new THREE.PointsMaterial( { size: 10.0 } );
const mesh = new THREE.Points( pointGeo, pointMaterial );
scene.add( mesh );

...would produce the same result asthis WebGPU code.

// Used in WebGPU (Pass PointsNodeMaterial to Sprite)
const pointMaterial = new THREE.PointsNodeMaterial( { positionNode: vec3( 1, 1, 1 ), sizeNode: 10.0 } );
const mesh = new THREE.Sprite( pointMaterial );
scene.add( mesh );

However, the sizes between the two versions are not the same. Is this an error in the output of the current version of PointsNodeMaterial or actually a misunderstanding of how PointsNodeMaterial is supposed to work?

// WebGL Version

// WebGPU Version

Reproduction steps

1. Create two examples, derived from webgpu_water.html, one which uses the WebGLRenderer, and the other which uses the WebGPURenderer.
2. Remove all code except the basic rendering/resizing code except for the scene's background.
3. Apply the code seen above to the scene corresponding to that code's relevant renderer.

Code

//NA

Live example

WebGL Example (Standard Points)
WebGPU Example (Standard Points)
WebGPU Example (Pass PointsNodeMaterial to Sprite)

Screenshots

No response

Version

r178

Device

Desktop

Browser

Chrome

OS

Windows

[cmhhelgeson]

@WestLangley Was your initial comment no longer relevant or was it erroneously deleted. I believe it referenced #10385 (comment)

[WestLangley]

It was relevant and correct, but I noticed your example is calling new THREE.Sprite( pointMaterial ), which seems like a mixing of types, and I did not have time to investigate that, so I decided to hold off. But here is my former comment if you wish to pursue this:

//

As a start, when SizeAttenuation is false, the size in the examples differ by the pixel ratio. WebGLRenderer is probably correct.

Units matter. The specified size is in CSS pixel units, not device pixel units.

The size-attenuation-is-true case is more complex.

Related: #10385 (comment)

[cmhhelgeson]

I'm using Sprite rather than Points because, based on this comment #30612 (comment), and some of my own testing, it seems like Points would be invalid for use in the WebGPURenderer. I'll push an example using Points instead of Sprite to show what I mean.

[cmhhelgeson]

I've update the initial comment to demonstrate.