WebGPURenderer: Rename FatPoints to InstancedPoints (#26965)

* Rename FatPoints to InstancedPoints

* export class as default

* cleanup

* prevent circular import

* Move to /objects/

* Move to /geometries/

* udpate example

examples/files.json

@@ -324,6 +324,7 @@
 		"webgpu_depth_texture",
 		"webgpu_equirectangular",
 		"webgpu_instance_mesh",
+		"webgpu_instance_points",
 		"webgpu_instance_uniform",
 		"webgpu_lights_custom",
 		"webgpu_lights_ies_spotlight",
@@ -340,7 +341,6 @@
 		"webgpu_morphtargets",
 		"webgpu_occlusion",
 		"webgpu_particles",
-		"webgpu_points_fat",
 		"webgpu_rtt",
 		"webgpu_sandbox",
 		"webgpu_shadowmap",

examples/jsm/points/FatPointsGeometry.js → examples/jsm/geometries/InstancedPointsGeometry.js

@@ -9,15 +9,15 @@ import {
 
 const _vector = new Vector3();
 
-class FatPointsGeometry extends InstancedBufferGeometry {
+class InstancedPointsGeometry extends InstancedBufferGeometry {
 
 	constructor() {
 
 		super();
 
-		this.isFatPointsGeometry = true;
+		this.isInstancedPointsGeometry = true;
 
-		this.type = 'FatPointsGeometry';
+		this.type = 'InstancedPointsGeometry';
 
 		const positions = [ - 1, 1, 0, 1, 1, 0, - 1, - 1, 0, 1, - 1, 0 ];
 		const uvs = [ - 1, 1, 1, 1, - 1, - 1, 1, - 1 ];
@@ -171,4 +171,4 @@ class FatPointsGeometry extends InstancedBufferGeometry {
 
 }
 
-export { FatPointsGeometry };
+export default InstancedPointsGeometry;

examples/jsm/nodes/accessors/InstancedPointsMaterialNode.js

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

examples/jsm/nodes/materials/FatPointsNodeMaterial.js → examples/jsm/nodes/materials/InstancedPointsNodeMaterial.js

@@ -7,16 +7,15 @@ import { materialColor, materialPointWidth } 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 { tslFn, vec2, vec4, color } from '../shadernode/ShaderNode.js';
 import { uv } from '../accessors/UVNode.js';
 import { viewport } from '../display/ViewportNode.js';
-import { color } from 'three/nodes';
 
 import { PointsMaterial } from 'three';
 
 const defaultValues = new PointsMaterial();
 
-class FatPointsNodeMaterial extends NodeMaterial {
+class InstancedPointsNodeMaterial extends NodeMaterial {
 
 	constructor( params = {} ) {
 
@@ -158,6 +157,6 @@ class FatPointsNodeMaterial extends NodeMaterial {
 
 }
 
-export default FatPointsNodeMaterial;
+export default InstancedPointsNodeMaterial;
 
-addNodeMaterial( 'FatPointsNodeMaterial', FatPointsNodeMaterial );
+addNodeMaterial( 'InstancedPointsNodeMaterial', InstancedPointsNodeMaterial );

examples/jsm/nodes/materials/Materials.js

@@ -1,7 +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 InstancedPointsNodeMaterial } from './InstancedPointsNodeMaterial.js';
 export { default as LineBasicNodeMaterial } from './LineBasicNodeMaterial.js';
 export { default as LineDashedNodeMaterial } from './LineDashedNodeMaterial.js';
 export { default as Line2NodeMaterial } from './Line2NodeMaterial.js';

examples/jsm/objects/InstancedPoints.js

@@ -0,0 +1,21 @@
+import {
+	Mesh
+} from 'three';
+import InstancedPointsGeometry from '../geometries/InstancedPointsGeometry.js';
+import InstancedPointsNodeMaterial from '../nodes/materials/InstancedPointsNodeMaterial.js';
+
+class InstancedPoints extends Mesh {
+
+	constructor( geometry = new InstancedPointsGeometry(), material = new InstancedPointsNodeMaterial() ) {
+
+		super( geometry, material );
+
+		this.isInstancedPoints = true;
+
+		this.type = 'InstancedPoints';
+
+	}
+
+}
+
+export default InstancedPoints;

examples/jsm/points/FatPoints.js

@@ -1,21 +0,0 @@
-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 };

examples/webgpu_points_fat.html → examples/webgpu_instance_points.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgpu - points - fat</title>
+		<title>three.js webgpu - points - instanced</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<link type="text/css" rel="stylesheet" href="main.css">
@@ -11,7 +11,7 @@
 
 		<div id="container"></div>
 
-		<div id="info"><a href="https://threejs.org" target="_blank">three.js</a> - fat points</div>
+		<div id="info"><a href="https://threejs.org" target="_blank">three.js</a> - instanced points</div>
 
 		<script type="importmap">
 			{
@@ -37,11 +37,11 @@
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-			import { FatPoints } from 'three/addons/points/FatPoints.js';
-			//import { FatPointsNodeMaterial } from 'three/addons/points/FatPointsNodeMaterial.js'; // why not this, instead?
-			import { FatPointsGeometry } from 'three/addons/points/FatPointsGeometry.js';
+			import InstancedPoints from 'three/addons/objects/InstancedPoints.js';
+			//import InstancedPointsNodeMaterial from 'three/addons/materials/InstancedPointsNodeMaterial.js'; // why not this, instead?
+			import InstancedPointsGeometry from 'three/addons/geometries/InstancedPointsGeometry.js';
 
-			import { color, FatPointsNodeMaterial } from 'three/nodes';
+			import { color, InstancedPointsNodeMaterial } from 'three/nodes';
 
 			import * as GeometryUtils from 'three/addons/utils/GeometryUtils.js';
 
@@ -111,15 +111,15 @@
 
 				}
 
-				// Fat Points
+				// Instanced Points
 
-				const geometry = new FatPointsGeometry();
+				const geometry = new InstancedPointsGeometry();
 				geometry.setPositions( positions );
 				geometry.setColors( colors );
 
 				geometry.instanceCount = positions.length / 3; // this should not be necessary
 
-				material = new FatPointsNodeMaterial( {
+				material = new InstancedPointsNodeMaterial( {
 
 					color: 0xffffff,
 					pointWidth: 10, // in pixel units
@@ -129,9 +129,9 @@
 
 				} );
 
-				const fatPoints = new FatPoints( geometry, material );
-				fatPoints.scale.set( 1, 1, 1 );
-				scene.add( fatPoints );
+				const instancedPoints = new InstancedPoints( geometry, material );
+				instancedPoints.scale.set( 1, 1, 1 );
+				scene.add( instancedPoints );
 
 				//