Examples: Improve webgpu anamorphic, rtt and bloom

examples-testing/changes.patch

@@ -13372,7 +13372,7 @@ index 58615db84..1ae4e437f 100644
      renderer.render(scene, camera);
  }
 diff --git a/examples-testing/examples/webgl_tonemapping.ts b/examples-testing/examples/webgl_tonemapping.ts
-index 2163e1b06..a7cb196ef 100644
+index 00aee8de5..7115e15d0 100644
 --- a/examples-testing/examples/webgl_tonemapping.ts
 +++ b/examples-testing/examples/webgl_tonemapping.ts
 @@ -1,23 +1,32 @@
@@ -13414,7 +13414,7 @@ index 2163e1b06..a7cb196ef 100644
      None: THREE.NoToneMapping,
      Linear: THREE.LinearToneMapping,
      Reinhard: THREE.ReinhardToneMapping,
-@@ -112,7 +121,7 @@ async function init() {
+@@ -110,7 +119,7 @@ async function init() {
      const toneMappingFolder = gui.addFolder('Tone Mapping');
 
      toneMappingFolder
@@ -13423,7 +13423,7 @@ index 2163e1b06..a7cb196ef 100644
 
          .name('type')
          .onChange(function () {
-@@ -151,9 +160,9 @@ async function init() {
+@@ -149,9 +158,9 @@ async function init() {
 
  function updateGUI() {
      if (params.toneMapping === 'None') {
@@ -19077,29 +19077,100 @@ index 0d21da69a..b5afcbc47 100644
 
      renderPipeline.render();
 diff --git a/examples-testing/examples/webgpu_postprocessing_anamorphic.ts b/examples-testing/examples/webgpu_postprocessing_anamorphic.ts
-index 1cdb6893c..8286bb59b 100644
+index 20118247a..877b921bd 100644
 --- a/examples-testing/examples/webgpu_postprocessing_anamorphic.ts
 +++ b/examples-testing/examples/webgpu_postprocessing_anamorphic.ts
-@@ -9,8 +9,8 @@ import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+@@ -26,8 +26,12 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
  import { Inspector } from 'three/addons/inspector/Inspector.js';
 
--let camera, scene, renderer;
+-let camera, scene, renderer, instancedMesh, controls;
 -let renderPipeline;
-+let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGPURenderer;
++let camera: THREE.PerspectiveCamera,
++    scene: THREE.Scene,
++    renderer: THREE.WebGPURenderer,
++    instancedMesh: THREE.InstancedMesh<THREE.SphereGeometry, THREE.MeshBasicNodeMaterial>,
++    controls: OrbitControls;
 +let renderPipeline: THREE.RenderPipeline;
 
- const params = {
-     resolutionScale: 0.2,
-@@ -77,7 +77,7 @@ async function init() {
+ const _dummy = new THREE.Object3D();
+
+@@ -104,31 +108,41 @@ async function init() {
+     bloomPass.setResolutionScale(0.25);
+
+     // Custom high pass for anamorphic bloom
+-    bloomPass.highPassFn = Fn(({ input, threshold, smoothWidth }) => {
+-        // Extract bright areas to a texture (computed once, sampled many times)
+-        const v = luminance(input.rgb);
+-        const alpha = smoothstep(threshold, threshold.add(smoothWidth), v);
+-        const brightPass = rtt(mix(vec4(0), input, alpha), null, null, {
+-            wrapS: THREE.MirroredRepeatWrapping,
+-            wrapT: THREE.MirroredRepeatWrapping,
+-        });
+-
+-        // Horizontal blur
+-        const total = vec4(0);
+-        const halfSamples = samples.div(2);
+-
+-        const invSize = vec2(1.0).div(viewportSize);
+-
+-        Loop({ start: halfSamples.negate(), end: halfSamples }, ({ i }) => {
+-            let softness = float(i).abs().div(halfSamples).oneMinus();
+-            softness = softness.pow(2.0);
+-
+-            const shiftedUV = vec2(uv().x.add(invSize.x.mul(i).mul(4.0)), uv().y);
+-            total.addAssign(brightPass.sample(shiftedUV).mul(softness));
+-        });
+-
+-        return total.div(samples.div(3.0));
+-    });
++    bloomPass.highPassFn = Fn(
++        ({
++            input,
++            threshold,
++            smoothWidth,
++        }: {
++            input: THREE.Node<'vec4'>;
++            threshold: THREE.UniformNode<'float', number>;
++            smoothWidth: THREE.UniformNode<'float', number>;
++        }) => {
++            // Extract bright areas to a texture (computed once, sampled many times)
++            const v = luminance(input.rgb);
++            const alpha = smoothstep(threshold, threshold.add(smoothWidth), v);
++            const brightPass = rtt(mix(vec4(0), input, alpha), null, null, {
++                wrapS: THREE.MirroredRepeatWrapping,
++                wrapT: THREE.MirroredRepeatWrapping,
++            });
++
++            // Horizontal blur
++            const total = vec4(0);
++            const halfSamples = samples.div(2);
++
++            const invSize = vec2(1.0).div(viewportSize);
++
++            Loop({ start: halfSamples.negate(), end: halfSamples }, ({ i }) => {
++                let softness = float(i).abs().div(halfSamples).oneMinus();
++                softness = softness.pow(2.0);
++
++                const shiftedUV = vec2(uv().x.add(invSize.x.mul(i).mul(4.0)), uv().y);
++                total.addAssign(brightPass.sample(shiftedUV).mul(softness));
++            });
++
++            return total.div(samples.div(3.0));
++        },
++    );
+
+     const anamorphicPass = bloomPass.mul(tintColor).toInspector('Anamorphic');
+
+@@ -137,7 +151,7 @@ async function init() {
 
      // gui
 
 -    const gui = renderer.inspector.createParameters('Settings');
 +    const gui = (renderer.inspector as Inspector).createParameters('Settings');
-     gui.add(intensity, 'value', 0, 4, 0.1).name('intensity');
-     gui.add(threshold, 'value', 0.8, 3, 0.001).name('threshold');
-     gui.add(scaleNode, 'value', 1, 10, 0.1).name('scale');
+     gui.add(intensity, 'value', 0, 10).name('intensity');
+     gui.add(threshold, 'value', 0, 0.9).name('threshold');
+     gui.add(samples, 'value', 2, 128, 1).name('samples');
 diff --git a/examples-testing/examples/webgpu_postprocessing_ao.ts b/examples-testing/examples/webgpu_postprocessing_ao.ts
 index 76046bee8..460c90fd6 100644
 --- a/examples-testing/examples/webgpu_postprocessing_ao.ts

types/three/examples/jsm/tsl/display/BloomNode.d.ts

@@ -1,25 +1,42 @@
 import { Node, TempNode, TextureNode, UniformNode } from "three/webgpu";
 
 declare class BloomNode extends TempNode<"vec4"> {
-    inputNode: Node;
+    inputNode: Node<"vec4">;
     strength: UniformNode<"float", number>;
     radius: UniformNode<"float", number>;
     threshold: UniformNode<"float", number>;
 
     smoothWidth: UniformNode<"float", number>;
 
-    constructor(inputNode: Node, strength?: number, radius?: number, threshold?: number);
+    highPassFn: (
+        params: {
+            input: Node<"vec4">;
+            threshold: UniformNode<"float", number>;
+            smoothWidth: UniformNode<"float", number>;
+        },
+    ) => void;
+
+    constructor(
+        inputNode: Node,
+        strength?: UniformNode<"float", number> | number,
+        radius?: UniformNode<"float", number> | number,
+        threshold?: UniformNode<"float", number> | number,
+    );
 
     getTexture(): TextureNode;
 
+    setResolutionScale(resolutionScale: number): this;
+
+    getResolutionScale(): number;
+
     setSize(width: number, height: number): void;
 }
 
 export const bloom: (
-    node: Node,
-    strength?: number,
-    radius?: number,
-    threshold?: number,
+    node: Node<"vec4">,
+    strength?: UniformNode<"float", number> | number,
+    radius?: UniformNode<"float", number> | number,
+    threshold?: UniformNode<"float", number> | number,
 ) => BloomNode;
 
 export default BloomNode;

types/three/src/nodes/Nodes.d.ts

@@ -161,7 +161,7 @@ export { default as MaxMipLevelNode } from "./utils/MaxMipLevelNode.js";
 export { default as MemberNode } from "./utils/MemberNode.js";
 export { default as ReflectorNode, ReflectorNodeParameters } from "./utils/ReflectorNode.js";
 export { default as RotateNode } from "./utils/RotateNode.js";
-export { default as RTTNode, RTTNodeOptions } from "./utils/RTTNode.js";
+export { default as RTTNode } from "./utils/RTTNode.js";
 export { default as SampleNode } from "./utils/SampleNode.js";
 export { default as SetNode } from "./utils/SetNode.js";
 export { default as SplitNode } from "./utils/SplitNode.js";

types/three/src/nodes/utils/RTTNode.d.ts

@@ -1,12 +1,7 @@
-import { TextureDataType } from "../../constants.js";
-import { RenderTarget } from "../../core/RenderTarget.js";
+import { RenderTarget, RenderTargetOptions } from "../../core/RenderTarget.js";
 import TextureNode from "../accessors/TextureNode.js";
 import Node from "../core/Node.js";
 
-export interface RTTNodeOptions {
-    type: TextureDataType;
-}
-
 declare class RTTNode extends TextureNode {
     readonly isRTTNode: true;
 
@@ -21,7 +16,7 @@ declare class RTTNode extends TextureNode {
 
     pixelRatio?: number;
 
-    constructor(node: Node, width?: number | null, height?: number | null, options?: RTTNodeOptions);
+    constructor(node: Node, width?: number | null, height?: number | null, options?: RenderTargetOptions);
 
     get autoResize(): boolean;
 
@@ -36,11 +31,11 @@ export const rtt: (
     node: Node,
     width?: number | null,
     height?: number | null,
-    options?: RTTNodeOptions,
+    options?: RenderTargetOptions,
 ) => RTTNode;
 export const convertToTexture: (
     node: Node,
     width?: number | null,
     height?: number | null,
-    options?: RTTNodeOptions,
+    options?: RenderTargetOptions,
 ) => RTTNode;