update webgpu examples

examples/webgpu_compute.html

@@ -21,6 +21,10 @@
 			import WebGPUUniformsGroup from './jsm/renderers/webgpu/WebGPUUniformsGroup.js';
 			import { Vector2Uniform } from './jsm/renderers/webgpu/WebGPUUniform.js';
 
+			import AttributeNode from './jsm/renderers/nodes/core/AttributeNode.js';
+			import ColorNode from './jsm/renderers/nodes/inputs/ColorNode.js';
+			import OperatorNode from './jsm/renderers/nodes/math/OperatorNode.js';
+
 			let camera, scene, renderer;
 			let pointer;
 
@@ -151,7 +155,12 @@
 				const pointsGeometry = new THREE.BufferGeometry().setAttribute(
 					'position', particleBuffer.attribute
 				);
+
+				pointsGeometry.setAttribute( 'color', pointsGeometry.getAttribute( 'position' ) );
+
 				const pointsMaterial = new THREE.PointsMaterial();
+				pointsMaterial.colorNode = new OperatorNode( '+', new AttributeNode( 'vec3', 'color' ), new ColorNode( new THREE.Color( 0x0000FF ) ) );
+
 				const mesh = new THREE.Points( pointsGeometry, pointsMaterial );
 				scene.add( mesh );
 

examples/webgpu_rtt.html

@@ -18,7 +18,12 @@
 			import WebGPUTextureRenderer from './jsm/renderers/webgpu/WebGPUTextureRenderer.js';
 			import WebGPU from './jsm/renderers/webgpu/WebGPU.js';
 
+			import TextureNode from './jsm/renderers/nodes/inputs/TextureNode.js';
+			import OperatorNode from './jsm/renderers/nodes/math/OperatorNode.js';
+			import Vector2Node from './jsm/renderers/nodes/inputs/Vector2Node.js';
+
 			let camera, scene, renderer;
+			let mouse = new THREE.Vector2();
 
 			let cameraFX, sceneFX, textureRenderer;
 
@@ -50,7 +55,10 @@
 				const texture = loader.load( './textures/uv_grid_opengl.jpg' );
 
 				const geometryBox = new THREE.BoxBufferGeometry();
-				const materialBox = new THREE.MeshBasicMaterial( { map: texture } );
+				const materialBox = new THREE.MeshBasicMaterial();
+				materialBox.colorNode = new TextureNode( texture );
+
+				//
 
 				box = new THREE.Mesh( geometryBox, materialBox );
 				scene.add( box );
@@ -65,6 +73,7 @@
 				textureRenderer = new WebGPUTextureRenderer( renderer );
 				textureRenderer.setSize( window.innerWidth * dpr, window.innerHeight * dpr );
 
+				window.addEventListener( 'mousemove', onWindowMouseMove, false );
 				window.addEventListener( 'resize', onWindowResize, false );
 
 				// FX
@@ -76,7 +85,10 @@
 
 				// @TODO Until NodeMaterial is available just copy the beauty pass to screen
 
-				const materialFX = new THREE.MeshBasicMaterial( { map: textureRenderer.getTexture() } );
+				const screenFXNode = new OperatorNode( '+', new Vector2Node( mouse ), new Vector2Node( new THREE.Vector2( .5, .5 ) ).setConst( true ) );
+
+				const materialFX = new THREE.MeshBasicMaterial();
+				materialFX.colorNode = new OperatorNode( '*', new TextureNode( textureRenderer.getTexture() ), screenFXNode );
 
 				const quad = new THREE.Mesh( geometryFX, materialFX );
 				sceneFX.add( quad );
@@ -87,6 +99,13 @@
 
 			}
 
+			function onWindowMouseMove( e ) {
+
+				mouse.x = e.offsetX / screen.width;
+				mouse.y = e.offsetY / screen.height;
+
+			}
+
 			function onWindowResize() {
 
 				camera.aspect = window.innerWidth / window.innerHeight;

examples/webgpu_sandbox.html

@@ -21,14 +21,17 @@
 
 			import AttributeNode from './jsm/renderers/nodes/core/AttributeNode.js';
 			import FloatNode from './jsm/renderers/nodes/inputs/FloatNode.js';
+			import Vector2Node from './jsm/renderers/nodes/inputs/Vector2Node.js';
 			import Vector3Node from './jsm/renderers/nodes/inputs/Vector3Node.js';
+			import ColorNode from './jsm/renderers/nodes/inputs/ColorNode.js';
 			import TextureNode from './jsm/renderers/nodes/inputs/TextureNode.js';
 			import UVNode from './jsm/renderers/nodes/accessors/UVNode.js';
 			import OperatorNode from './jsm/renderers/nodes/math/OperatorNode.js';
+			import SwitchNode from './jsm/renderers/nodes/utils/SwitchNode.js';
 			import TimerNode from './jsm/renderers/nodes/utils/TimerNode.js';
 
 			let camera, scene, renderer;
-			
+
 			let timerNode;
 
 			let box;
@@ -57,26 +60,29 @@
 				const texture = textureLoader.load( './textures/uv_grid_opengl.jpg' );
 				texture.wrapS = THREE.RepeatWrapping;
 				texture.wrapT = THREE.RepeatWrapping;
+				texture.name = 'uv_grid';
+
+				// compressed texture
+
+				const ddsLoader = new DDSLoader();
+				const dxt5Texture = ddsLoader.load( './textures/compressed/explosion_dxt5_mip.dds' );
+
+				//
 
 				const geometryBox = new THREE.BoxBufferGeometry();
 				const materialBox = new THREE.MeshBasicMaterial( { map: texture } );
 
-				timerNode = new TimerNode();
-				
-				const timerScaleNode = new OperatorNode( '*', timerNode, new FloatNode( .5 ).setConst( true ) );
+				const timerNode = new TimerNode();
+
+				// birection speed
+				const timerScaleNode = new OperatorNode( '*', timerNode, new Vector2Node( new THREE.Vector2( - .5, .1 ) ).setConst( true ) );
 				const animateUV = new OperatorNode( '+', new UVNode(), timerScaleNode );
 
-				//materialBox.colorNode = new OperatorNode( '+', new FloatNode( .5 ).setConst( true ), new Vector3Node( new THREE.Vector3( 0, 0, 1 ) ) );
 				materialBox.colorNode = new TextureNode( texture, animateUV );
-				//materialBox.colorNode = new Vector3Node( new THREE.Vector3( 1, 1, 1 ) );
-				//materialBox.colorNode = new FloatNode( .5 );
-				//materialBox.colorNode = new TextureNode( texture );
-				//materialBox.opacityNode = timerNode;
-				materialBox.transparent = true;
 
-				// test attribute
-				//geometryBox.addAttribute( 'uv2', geometryBox.getAttribute( 'uv' ) );
-				//materialBox.colorNode = new TextureNode( texture, new AttributeNode( 'vec2', 'uv2' ) );
+				// test uv 2
+				//geometryBox.setAttribute( 'uv2', geometryBox.getAttribute( 'uv' ) );
+				//materialBox.colorNode = new TextureNode( texture, new UVNode( 1 ) );
 
 				box = new THREE.Mesh( geometryBox, materialBox );
 				box.position.set( 0, 1, 0 );
@@ -85,22 +91,24 @@
 				// data texture
 
 				const geometryPlane = new THREE.PlaneBufferGeometry();
-				const materialPlane = new THREE.MeshBasicMaterial( { map: createDataTexture(), transparent: true, opacity: 0.5 } );
+				const materialPlane = new THREE.MeshBasicMaterial();
+				materialPlane.colorNode = new OperatorNode( '+', new TextureNode( createDataTexture() ), new ColorNode( new THREE.Color( 0x0000FF ) ) );
+				materialPlane.opacityNode = new SwitchNode( new TextureNode( dxt5Texture ), 'a' );
+				materialPlane.transparent = true;
 
 				const plane = new THREE.Mesh( geometryPlane, materialPlane );
 				plane.position.set( 0, - 1, 0 );
-				//scene.add( plane );
+				scene.add( plane );
 
 				// compressed texture
 
-				const ddsLoader = new DDSLoader();
-				const dxt5Texture = ddsLoader.load( './textures/compressed/explosion_dxt5_mip.dds' );
-
-				const materialCompressed = new THREE.MeshBasicMaterial( { map: dxt5Texture, transparent: true } );
+				const materialCompressed = new THREE.MeshBasicMaterial();
+				materialCompressed.colorNode = new TextureNode( dxt5Texture );
+				materialCompressed.transparent = true;
 
 				const boxCompressed = new THREE.Mesh( geometryBox, materialCompressed );
 				boxCompressed.position.set( - 2, 1, 0 );
-				//scene.add( boxCompressed );
+				scene.add( boxCompressed );
 
 				// points
 
@@ -113,13 +121,12 @@
 
 				}
 
-
 				const geometryPoints = new THREE.BufferGeometry().setFromPoints( points );
 				const materialPoints = new THREE.PointsMaterial();
 
-				geometryPoints.addAttribute( 'color', geometryPoints.getAttribute( 'position' ) );
+				geometryPoints.setAttribute( 'color', geometryPoints.getAttribute( 'position' ) );
 
-				materialPoints.colorNode = new OperatorNode( '+', new TextureNode( texture, new AttributeNode( 'vec3', 'color' ) ), new Vector3Node( new THREE.Vector3( 0, 0, 1 ) ) );
+				materialPoints.colorNode = new OperatorNode( '*', new AttributeNode( 'vec3', 'color' ), new FloatNode( 3 ).setConst( true ) );
 
 				const pointCloud = new THREE.Points( geometryPoints, materialPoints );
 				pointCloud.position.set( 2, - 1, 0 );
@@ -133,10 +140,15 @@
 					new THREE.Vector3( 0.5, 0.5, 0 ),
 					new THREE.Vector3( - 0.5, 0.5, 0 )
 				] );
+
+				geometryLine.setAttribute( 'color', geometryLine.getAttribute( 'position' ) );
+
 				const materialLine = new THREE.LineBasicMaterial();
+				materialLine.colorNode = new AttributeNode( 'vec3', 'color' );
+
 				const line = new THREE.Line( geometryLine, materialLine );
 				line.position.set( 2, 1, 0 );
-				//scene.add( line );
+				scene.add( line );
 
 				//
 
@@ -164,8 +176,6 @@
 
 				requestAnimationFrame( animate );
 
-				timerNode.update();
-
 				box.rotation.x += 0.01;
 				box.rotation.y += 0.02;