WebGPURenderer: New AfterImageNode for the PostProcessing renderer.

examples-testing/changes.patch

@@ -13303,7 +13303,7 @@ index fa96129..58f8d4a 100644
      // and does so without distortion. Akin to CSS object-fit: contain.
      // Source: https://github.com/mrdoob/three.js/pull/17199
 diff --git a/examples-testing/examples/webgl_tonemapping.ts b/examples-testing/examples/webgl_tonemapping.ts
-index 9f7ce3f..60893f1 100644
+index df42a7b..a55fe3d 100644
 --- a/examples-testing/examples/webgl_tonemapping.ts
 +++ b/examples-testing/examples/webgl_tonemapping.ts
 @@ -1,22 +1,35 @@
@@ -13318,6 +13318,9 @@ index 9f7ce3f..60893f1 100644
 -let mesh, renderer, scene, camera, controls;
 -let gui,
 -    guiExposure = null;
++type ToneMapping = 'None' | 'Linear' | 'Reinhard' | 'Cineon' | 'ACESFilmic' | 'AgX' | 'Custom';
+
+-const params = {
 +interface Params {
 +    exposure: number;
 +    toneMapping: ToneMapping;
@@ -13333,12 +13336,9 @@ index 9f7ce3f..60893f1 100644
 +let gui: GUI,
 +    guiExposure: NumberController<Params, 'exposure'> | null = null;
 +
-+type ToneMapping = 'None' | 'Linear' | 'Reinhard' | 'Cineon' | 'ACESFilmic' | 'AgX' | 'Custom';
-
--const params = {
 +const params: Params = {
      exposure: 1.0,
-     toneMapping: 'ACESFilmic',
+     toneMapping: 'AgX',
      blurriness: 0.3,
      intensity: 1.0,
  };
@@ -13993,6 +13993,46 @@ index 5cc6547..87058f0 100644
                  gui.add(influences, value, 0, 1, 0.01).name(key.replace('blendShape1.', '')).listen();
              }
          });
+diff --git a/examples-testing/examples/webgpu_postprocessing_afterimage.ts b/examples-testing/examples/webgpu_postprocessing_afterimage.ts
+index 4310fdb..0ac9b10 100644
+--- a/examples-testing/examples/webgpu_postprocessing_afterimage.ts
++++ b/examples-testing/examples/webgpu_postprocessing_afterimage.ts
+@@ -3,12 +3,13 @@ import * as THREE from 'three';
+ import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+
+ import WebGPU from 'three/addons/capabilities/WebGPU.js';
++import type WebGPUBackend from 'three/addons/renderers/webgpu/WebGPUBackend.js';
+ import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
+ import PostProcessing from 'three/addons/renderers/common/PostProcessing.js';
+-import { pass } from 'three/nodes';
++import { AfterImageNode, pass, ShaderNodeObject } from 'three/nodes';
+
+-let camera, scene, renderer;
+-let mesh, postProcessing, combinedPass;
++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: WebGPURenderer;
++let mesh: THREE.Mesh, postProcessing: PostProcessing, combinedPass: ShaderNodeObject<AfterImageNode>;
+
+ const params = {
+     damp: 0.96,
+@@ -48,8 +49,7 @@ function init() {
+     const scenePass = pass(scene, camera);
+     const scenePassColor = scenePass.getTextureNode();
+
+-    combinedPass = scenePassColor;
+-    combinedPass = combinedPass.afterImage(params.damp);
++    combinedPass = scenePassColor.afterImage(params.damp);
+
+     postProcessing.outputNode = combinedPass;
+
+@@ -72,7 +72,7 @@ function render() {
+     mesh.rotation.x += 0.0075;
+     mesh.rotation.y += 0.015;
+
+-    if (renderer.backend.isWebGPUBackend) {
++    if ((renderer.backend as WebGPUBackend).isWebGPUBackend) {
+         postProcessing.render();
+     } else {
+         renderer.render(scene, camera);
 diff --git a/examples-testing/examples/webgpu_shadowmap.ts b/examples-testing/examples/webgpu_shadowmap.ts
 index 4184cb4..f6d36c0 100644
 --- a/examples-testing/examples/webgpu_shadowmap.ts

examples-testing/index.js

@@ -370,6 +370,7 @@ const files = {
         // 'webgpu_tsl_editor',
         // 'webgpu_tsl_transpiler',
         'webgpu_video_panorama',
+        'webgpu_postprocessing_afterimage',
     ],
     webaudio: ['webaudio_orientation', 'webaudio_sandbox', 'webaudio_timing', 'webaudio_visualizer'],
     webxr: [

types/three/examples/jsm/nodes/Nodes.d.ts

@@ -303,6 +303,9 @@ export {
     depthPixel,
     ViewportDepthNodeScope,
 } from './display/ViewportDepthNode.js';
+export { default as AfterImageNode, afterImage } from './display/AfterImageNode.js';
+
+export { default as PassNode, pass, depthPass, PassNodeScope } from './display/PassNode.js';
 
 // code
 export { default as ExpressionNode, expression } from './code/ExpressionNode.js';

types/three/examples/jsm/nodes/display/AfterImageNode.d.ts

@@ -0,0 +1,23 @@
+import Node from '../core/Node.js';
+import TempNode from '../core/TempNode.js';
+import TextureNode from '../accessors/TextureNode.js';
+import UniformNode from '../core/UniformNode.js';
+import { ShaderNodeObject } from '../shadernode/ShaderNode.js';
+
+export default class AfterImageNode extends TempNode {
+    textureNode: TextureNode;
+    textureNodeOld: Node;
+    damp: UniformNode<number>;
+
+    constructor(textureNode: Node, damp?: number);
+
+    setSize(width: number, height: number): void;
+}
+
+export const afterImage: (node: Node, damp?: number) => ShaderNodeObject<AfterImageNode>;
+
+declare module '../shadernode/ShaderNode.js' {
+    interface NodeElements {
+        afterImage: typeof afterImage;
+    }
+}

types/three/examples/jsm/nodes/display/PassNode.d.ts

@@ -0,0 +1,42 @@
+import { Camera, RenderTarget, Scene, Texture } from '../../../../src/Three.js';
+import { ShaderNodeObject } from '../shadernode/ShaderNode.js';
+import TempNode from '../core/TempNode.js';
+import TextureNode from '../accessors/TextureNode.js';
+
+declare class PassTextureNode extends TextureNode {
+    passNode: PassNode;
+
+    constructor(passNode: PassNode, texture: Texture);
+}
+
+export default class PassNode extends TempNode {
+    scope: PassNodeScope;
+    scene: Scene;
+    camera: Camera;
+
+    renderTarget: RenderTarget;
+
+    readonly isPassNode: true;
+
+    constructor(scope: PassNodeScope, scene: Scene, camera: Camera);
+
+    getTextureNode(): ShaderNodeObject<PassTextureNode>;
+
+    getTextureDepthNode(): ShaderNodeObject<PassTextureNode>;
+
+    getDepthNode(): Node;
+
+    setSize(width: number, height: number): void;
+
+    setPixelRatio(pixelRatio: number): void;
+
+    dispose(): void;
+
+    static COLOR: 'color';
+    static DEPTH: 'depth';
+}
+
+export type PassNodeScope = typeof PassNode.COLOR | typeof PassNode.DEPTH;
+
+export const pass: (scene: Scene, camera: Camera) => ShaderNodeObject<PassNode>;
+export const depthPass: (scene: Scene, camera: Camera) => ShaderNodeObject<PassNode>;

types/three/examples/jsm/renderers/common/PostProcessing.d.ts

@@ -0,0 +1,11 @@
+import Renderer from './Renderer.js';
+import { Node } from '../../nodes/Nodes.js';
+
+export default class PostProcessing {
+    renderer: Renderer;
+    outputNode: Node;
+
+    constructor(renderer: Renderer, outputNode?: Node);
+
+    render(): void;
+}

types/three/examples/jsm/renderers/webgpu/WebGPUBackend.d.ts

@@ -7,6 +7,8 @@ export interface WebGPUBackendParameters extends BackendParameters {
 }
 
 export default class WebGPUBackend extends Backend {
+    readonly isWebGPUBackend: true;
+
     constructor(parameters?: WebGPUBackendParameters);
 
     get coordinateSystem(): CoordinateSystem;