WebGPU: Introduce Fat Points (#26930)

* Introduce Fat Points

* Introduce FatPointsNodeMaterial

* Enable damping

* Clean up

* Clean up

* Clean up

* Clean up

* Delete FatPointsMaterial

* Clean up

* Add screenshot

* Updated files

examples/files.json

@@ -339,6 +339,7 @@
 		"webgpu_morphtargets",
 		"webgpu_occlusion",
 		"webgpu_particles",
+		"webgpu_points_fat",
 		"webgpu_rtt",
 		"webgpu_sandbox",
 		"webgpu_shadowmap",

examples/jsm/nodes/Nodes.js

@@ -72,6 +72,7 @@ export { default as BufferNode, buffer } from './accessors/BufferNode.js';
 export { default as CameraNode, cameraProjectionMatrix, cameraViewMatrix, cameraNormalMatrix, cameraWorldMatrix, cameraPosition, cameraNear, cameraFar } from './accessors/CameraNode.js';
 export { default as CubeTextureNode, cubeTexture } from './accessors/CubeTextureNode.js';
 export { default as ExtendedMaterialNode, materialNormal } from './accessors/ExtendedMaterialNode.js';
+export { default as FatPointsMaterialNode, materialPointWidth } from './accessors/FatPointsMaterialNode.js';
 export { default as InstanceNode, instance } from './accessors/InstanceNode.js';
 export { default as LineMaterialNode, materialLineDashSize, materialLineDashOffset, materialLineGapSize, materialLineScale, materialLineWidth } from './accessors/LineMaterialNode.js';
 export { default as MaterialNode, materialAlphaTest, materialColor, materialShininess, materialEmissive, materialOpacity, materialSpecularColor, materialReflectivity, materialRoughness, materialMetalness, materialRotation, materialSheen, materialSheenRoughness } from './accessors/MaterialNode.js';

examples/jsm/nodes/accessors/FatPointsMaterialNode.js

@@ -0,0 +1,21 @@
+import MaterialNode from './MaterialNode.js';
+import { addNodeClass } from '../core/Node.js';
+import { nodeImmutable } from '../shadernode/ShaderNode.js';
+
+class FatPointsMaterialNode extends MaterialNode {
+
+	setup( /*builder*/ ) {
+
+		return this.getFloat( this.scope );
+
+	}
+
+}
+
+FatPointsMaterialNode.POINTWIDTH = 'pointWidth';
+
+export default FatPointsMaterialNode;
+
+export const materialPointWidth = nodeImmutable( FatPointsMaterialNode, FatPointsMaterialNode.POINTWIDTH );
+
+addNodeClass( 'FatPointsMaterialNode', FatPointsMaterialNode );

examples/jsm/nodes/core/PropertyNode.js

@@ -55,5 +55,6 @@ export const shininess = nodeImmutable( PropertyNode, 'float', 'Shininess' );
 export const output = nodeImmutable( PropertyNode, 'vec4', 'Output' );
 export const dashSize = nodeImmutable( PropertyNode, 'float', 'dashSize' );
 export const gapSize = nodeImmutable( PropertyNode, 'float', 'gapSize' );
+export const pointWidth = nodeImmutable( PropertyNode, 'float', 'pointWidth' );
 
 addNodeClass( 'PropertyNode', PropertyNode );

examples/jsm/nodes/materials/FatPointsNodeMaterial.js

@@ -0,0 +1,164 @@
+import NodeMaterial, { addNodeMaterial } from './NodeMaterial.js';
+import { varying } from '../core/VaryingNode.js';
+import { property } from '../core/PropertyNode.js';
+import { attribute } from '../core/AttributeNode.js';
+import { cameraProjectionMatrix } from '../accessors/CameraNode.js';
+import { materialColor } from '../accessors/MaterialNode.js';
+import { modelViewMatrix } from '../accessors/ModelNode.js';
+import { positionGeometry } from '../accessors/PositionNode.js';
+import { smoothstep } from '../math/MathNode.js';
+import { tslFn, vec2, vec4 } from '../shadernode/ShaderNode.js';
+import { uv } from '../accessors/UVNode.js';
+import { materialPointWidth } from '../accessors/FatPointsMaterialNode.js'; // or should this be a property, instead?
+import { viewport } from '../display/ViewportNode.js';
+import { color } from 'three/nodes';
+
+import { PointsMaterial } from 'three';
+
+const defaultValues = new PointsMaterial();
+
+class FatPointsNodeMaterial extends NodeMaterial {
+
+	constructor( params = {} ) {
+
+		super();
+
+		this.normals = false;
+
+		this.lights = false;
+
+		this.useAlphaToCoverage = true;
+
+		this.useColor = params.vertexColors;
+
+		this.pointWidth = 1;
+
+		this.pointColorNode = null;
+
+		this.setDefaultValues( defaultValues );
+
+		this.setupShaders();
+
+		this.setValues( params );
+
+	}
+
+	setupShaders() {
+
+		const useAlphaToCoverage = this.alphaToCoverage;
+		const useColor = this.useColor;
+
+		this.vertexNode = tslFn( () => {
+
+			//vUv = uv;
+			varying( vec2(), 'vUv' ).assign( uv() ); // @TODO: Analyze other way to do this
+
+			const instancePosition = attribute( 'instancePosition' );
+
+			// camera space
+			const mvPos = property( 'vec4', 'mvPos' );
+			mvPos.assign( modelViewMatrix.mul( vec4( instancePosition, 1.0 ) ) );
+
+			const aspect = viewport.z.div( viewport.w );
+
+			// clip space
+			const clipPos = cameraProjectionMatrix.mul( mvPos );
+
+			// offset in ndc space
+			const offset = property( 'vec2', 'offset' );
+			offset.assign( positionGeometry.xy );
+			offset.assign( offset.mul( materialPointWidth ) );
+			offset.assign( offset.div( viewport.z ) );
+			offset.y.assign( offset.y.mul( aspect ) );
+
+			// back to clip space
+			offset.assign( offset.mul( clipPos.w ) );
+
+			//clipPos.xy += offset;
+			clipPos.assign( clipPos.add( vec4( offset, 0, 0 ) ) );
+
+			return clipPos;
+
+			//vec4 mvPosition = mvPos; // this was used for somethihng...
+
+		} )();
+
+		this.colorNode = tslFn( () => {
+
+			const vUv = varying( vec2(), 'vUv' );
+
+			// force assignment into correct place in flow
+			const alpha = property( 'float', 'alpha' );
+			alpha.assign( 1 );
+
+			const a = vUv.x;
+			const b = vUv.y;
+
+			const len2 = a.mul( a ).add( b.mul( b ) );
+
+			if ( useAlphaToCoverage ) {
+
+				// force assignment out of following 'if' statement - to avoid uniform control flow errors
+				const dlen = property( 'float', 'dlen' );
+				dlen.assign( len2.fwidth() );
+
+				alpha.assign( smoothstep( dlen.oneMinus(), dlen.add( 1 ), len2 ).oneMinus() );
+
+			} else {
+
+				len2.greaterThan( 1.0 ).discard();
+
+			}
+
+			let pointColorNode;
+
+			if ( this.pointColorNode ) {
+
+				pointColorNode = this.pointColorNode;
+
+			} else {
+
+				if ( useColor ) {
+
+					const instanceColor = attribute( 'instanceColor' );
+
+					pointColorNode = color( instanceColor ).mul( color( materialColor ) );
+
+				} else {
+
+					pointColorNode = materialColor;
+
+				}
+
+			}
+
+			return vec4( pointColorNode, alpha );
+
+		} )();
+
+		this.needsUpdate = true;
+
+	}
+
+	get alphaToCoverage() {
+
+		return this.useAlphaToCoverage;
+
+	}
+
+	set alphaToCoverage( value ) {
+
+		if ( this.useAlphaToCoverage !== value ) {
+
+			this.useAlphaToCoverage = value;
+			this.setupShaders();
+
+		}
+
+	}
+
+}
+
+export default FatPointsNodeMaterial;
+
+addNodeMaterial( 'FatPointsNodeMaterial', FatPointsNodeMaterial );

examples/jsm/nodes/materials/Materials.js

@@ -1,6 +1,7 @@
 // @TODO: We can simplify "export { default as SomeNode, other, exports } from '...'" to just "export * from '...'" if we will use only named exports
 
 export { default as NodeMaterial, addNodeMaterial, createNodeMaterialFromType } from './NodeMaterial.js';
+export { default as FatPointsNodeMaterial } from './FatPointsNodeMaterial.js';
 export { default as LineBasicNodeMaterial } from './LineBasicNodeMaterial.js';
 export { default as LineDashedNodeMaterial } from './LineDashedNodeMaterial.js';
 export { default as Line2NodeMaterial } from './Line2NodeMaterial.js';

examples/jsm/points/FatPoints.js

@@ -0,0 +1,21 @@
+import {
+	Mesh
+} from 'three';
+import { FatPointsGeometry } from '../points/FatPointsGeometry.js';
+import { FatPointsNodeMaterial } from 'three/nodes';
+
+class FatPoints extends Mesh {
+
+	constructor( geometry = new FatPointsGeometry(), material = new FatPointsNodeMaterial() ) {
+
+		super( geometry, material );
+
+		this.isFatPoints = true;
+
+		this.type = 'FatPoints';
+
+	}
+
+}
+
+export { FatPoints };