Node: Add `DotScreenNode` and `RGBShiftNode`. (#28755)

* Node: Add `DotScreenNode` and `RGBShiftNode`.

* Examples: Fix title in `webgpu_postprocessing`.

* DotScreenNode: Simplify TSL.

* E2E: Add example to exception list.

examples/files.json

@@ -371,6 +371,7 @@
 		"webgpu_postprocessing_anamorphic",
 		"webgpu_postprocessing_dof",
 		"webgpu_postprocessing_sobel",
+		"webgpu_postprocessing",
 		"webgpu_reflection",
 		"webgpu_rtt",
 		"webgpu_sandbox",

examples/jsm/nodes/Nodes.js

@@ -127,6 +127,8 @@ export { default as AfterImageNode, afterImage } from './display/AfterImageNode.
 export { default as AnamorphicNode, anamorphic } from './display/AnamorphicNode.js';
 export { default as SobelOperatorNode, sobel } from './display/SobelOperatorNode.js';
 export { default as DepthOfFieldNode, dof } from './display/DepthOfFieldNode.js';
+export { default as DotScreenNode, dotScreen } from './display/DotScreenNode.js';
+export { default as RGBShiftNode, rgbShift } from './display/RGBShiftNode.js';
 
 export { default as PassNode, pass, texturePass, depthPass } from './display/PassNode.js';
 

examples/jsm/nodes/display/DotScreenNode.js

@@ -0,0 +1,127 @@
+import TempNode from '../core/TempNode.js';
+import { nodeObject, addNodeElement, tslFn, vec2, vec3, vec4 } from '../shadernode/ShaderNode.js';
+import { uniform } from '../core/UniformNode.js';
+import { NodeUpdateType } from '../core/constants.js';
+import { uv } from '../accessors/UVNode.js';
+import { texturePass } from './PassNode.js';
+import { sin, cos } from '../math/MathNode.js';
+import { add } from '../math/OperatorNode.js';
+import { Vector2, RenderTarget } from 'three';
+import QuadMesh from '../../objects/QuadMesh.js';
+
+const quadMesh = new QuadMesh();
+
+class DotScreenNode extends TempNode {
+
+	constructor( colorNode, center = new Vector2( 0.5, 0.5 ), angle = 1.57, scale = 1 ) {
+
+		super( 'vec4' );
+
+		this.colorNode = colorNode;
+		this.center = uniform( center );
+		this.angle = uniform( angle );
+		this.scale = uniform( scale );
+
+		this._renderTarget = new RenderTarget();
+		this._renderTarget.texture.name = 'dotScreen';
+
+		this._size = uniform( new Vector2() );
+
+		this._textureNode = texturePass( this, this._renderTarget.texture );
+
+		this.updateBeforeType = NodeUpdateType.RENDER;
+
+	}
+
+	getTextureNode() {
+
+		return this._textureNode;
+
+	}
+
+	setSize( width, height ) {
+
+		this._size.value.set( width, height );
+		this._renderTarget.setSize( width, height );
+
+	}
+
+	updateBefore( frame ) {
+
+		const { renderer } = frame;
+
+		const colorNode = this.colorNode;
+		const map = colorNode.value;
+
+		this._renderTarget.texture.type = map.type;
+
+		const currentRenderTarget = renderer.getRenderTarget();
+		const currentTexture = colorNode.value;
+
+		quadMesh.material = this._material;
+
+		this.setSize( map.image.width, map.image.height );
+
+		// render
+
+		renderer.setRenderTarget( this._renderTarget );
+
+		quadMesh.render( renderer );
+
+		// restore
+
+		renderer.setRenderTarget( currentRenderTarget );
+		colorNode.value = currentTexture;
+
+	}
+
+	setup( builder ) {
+
+		const colorNode = this.colorNode;
+
+		const pattern = tslFn( () => {
+
+			const s = sin( this.angle );
+			const c = cos( this.angle );
+
+			const tex = uv().mul( this._size ).sub( this.center );
+			const point = vec2( c.mul( tex.x ).sub( s.mul( tex.y ) ), s.mul( tex.x ).add( c.mul( tex.y ) ) ).mul( this.scale );
+
+			return sin( point.x ).mul( sin( point.y ) ).mul( 4 );
+
+		} );
+
+		const dotScreen = tslFn( () => {
+
+			const color = colorNode;
+
+			const average = add( color.r, color.g, color.b ).div( 3 );
+
+			return vec4( vec3( average.mul( 10 ).sub( 5 ).add( pattern() ) ), color.a );
+
+		} );
+
+		//
+
+		const material = this._material || ( this._material = builder.createNodeMaterial() );
+		material.fragmentNode = dotScreen();
+
+		//
+
+		const properties = builder.getNodeProperties( this );
+		properties.textureNode = colorNode;
+
+		//
+
+		return this._textureNode;
+
+	}
+
+}
+
+export const dotScreen = ( node, center, angle, scale ) => nodeObject( new DotScreenNode( nodeObject( node ), center, angle, scale ) );
+
+addNodeElement( 'dotScreen', dotScreen );
+
+export default DotScreenNode;
+

examples/jsm/nodes/display/RGBShiftNode.js

@@ -0,0 +1,56 @@
+import TempNode from '../core/TempNode.js';
+import { nodeObject, addNodeElement, tslFn, vec2, vec4 } from '../shadernode/ShaderNode.js';
+import { uniform } from '../core/UniformNode.js';
+import { NodeUpdateType } from '../core/constants.js';
+import { uv } from '../accessors/UVNode.js';
+import { sin, cos } from '../math/MathNode.js';
+
+class RGBShiftNode extends TempNode {
+
+	constructor( textureNode, amount = 0.005, angle = 0 ) {
+
+		super( 'vec4' );
+
+		this.textureNode = textureNode;
+		this.amount = uniform( amount );
+		this.angle = uniform( angle );
+
+		this.updateBeforeType = NodeUpdateType.RENDER;
+
+	}
+
+	updateBefore() {
+
+	}
+
+	setup() {
+
+		const { textureNode } = this;
+
+		const uvNode = textureNode.uvNode || uv();
+
+		const sampleTexture = ( uv ) => this.textureNode.uv( uv );
+
+		const rgbShift = tslFn( () => {
+
+			const offset = vec2( cos( this.angle ), sin( this.angle ) ).mul( this.amount );
+			const cr = sampleTexture( uvNode.add( offset ) );
+			const cga = sampleTexture( uvNode );
+			const cb = sampleTexture( uvNode.sub( offset ) );
+
+			return vec4( cr.r, cga.g, cb.b, cga.a );
+
+		} );
+
+		return rgbShift();
+
+	}
+
+}
+
+export const rgbShift = ( node, amount, angle ) => nodeObject( new RGBShiftNode( nodeObject( node ), amount, angle ) );
+
+addNodeElement( 'rgbShift', rgbShift );
+
+export default RGBShiftNode;
+

examples/webgpu_postprocessing.html

@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgpu - postprocessing</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">
+	</head>
+	<body>
+		<script type="importmap">
+			{
+				"imports": {
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/",
+					"three/nodes": "./jsm/nodes/Nodes.js"
+				}
+			}
+		</script>
+
+		<script type="module">
+
+			import * as THREE from 'three';
+
+			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
+			import PostProcessing from 'three/addons/renderers/common/PostProcessing.js';
+			import { pass } from 'three/nodes';
+
+			let camera, renderer, postProcessing;
+			let object;
+
+			init();
+
+			function init() {
+
+				renderer = new WebGPURenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
+				document.body.appendChild( renderer.domElement );
+
+				//
+
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera.position.z = 400;
+
+				const scene = new THREE.Scene();
+				scene.fog = new THREE.Fog( 0x000000, 1, 1000 );
+
+				object = new THREE.Object3D();
+				scene.add( object );
+
+				const geometry = new THREE.SphereGeometry( 1, 4, 4 );
+				const material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
+
+				for ( let i = 0; i < 100; i ++ ) {
+
+					const mesh = new THREE.Mesh( geometry, material );
+					mesh.position.set( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize();
+					mesh.position.multiplyScalar( Math.random() * 400 );
+					mesh.rotation.set( Math.random() * 2, Math.random() * 2, Math.random() * 2 );
+					mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 50;
+					object.add( mesh );
+
+				}
+
+				scene.add( new THREE.AmbientLight( 0xcccccc ) );
+
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
+				light.position.set( 1, 1, 1 );
+				scene.add( light );
+
+				// postprocessing
+
+				postProcessing = new PostProcessing( renderer );
+
+				const scenePass = pass( scene, camera );
+				const scenePassColor = scenePass.getTextureNode();
+
+				const dotScreenPass = scenePassColor.dotScreen();
+				dotScreenPass.scale.value = 0.3;
+
+				const rgbShiftPass = dotScreenPass.getTextureNode().rgbShift();
+				rgbShiftPass.amount.value = 0.001;
+
+				postProcessing.outputNode = rgbShiftPass;
+
+				//
+
+				window.addEventListener( 'resize', onWindowResize );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function animate() {
+
+				object.rotation.x += 0.005;
+				object.rotation.y += 0.01;
+
+				postProcessing.render();
+
+			}
+
+		</script>
+
+	</body>
+</html>

test/e2e/puppeteer.js

@@ -147,6 +147,7 @@ const exceptionList = [
 	'webgpu_texturegrad',
 	'webgpu_performance_renderbundle',
 	'webgpu_lights_rectarealight',
+	'webgpu_postprocessing',
 
 	// WebGPU idleTime and parseTime too low
 	'webgpu_compute_particles',