TSL: Introduce node.toTexture() and rtt() (#1087)

* TSL: Introduce node.toTexture() and rtt() * Update three.js * Update three.js * Add examples * Update * Update patch and delete examples * Add src * Update patch and delete src
three-types · Jul 20, 2024 · a6c66cd · a6c66cd
1 parent 44d8bb1
commit a6c66cd
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 15 deletions.
diff --git a/examples-testing/changes.patch b/examples-testing/changes.patch
@@ -14352,7 +14352,7 @@ index c11a18ed..bfcafe6d 100644
  init();
 
 diff --git a/examples-testing/examples/webgpu_postprocessing.ts b/examples-testing/examples/webgpu_postprocessing.ts
-index 35945f71..57ca54a4 100644
+index d83642f2..96b1bc0e 100644
 --- a/examples-testing/examples/webgpu_postprocessing.ts
 +++ b/examples-testing/examples/webgpu_postprocessing.ts
 @@ -1,8 +1,8 @@
@@ -14456,6 +14456,22 @@ index cbc5a96b..66ec682e 100644
 
  const params = {
      enable: true,
+diff --git a/examples-testing/examples/webgpu_procedural_texture.ts b/examples-testing/examples/webgpu_procedural_texture.ts
+index d4228f90..191b58f2 100644
+--- a/examples-testing/examples/webgpu_procedural_texture.ts
++++ b/examples-testing/examples/webgpu_procedural_texture.ts
+@@ -1,9 +1,9 @@
+-import * as THREE from 'three';
++import * as THREE from 'three/webgpu';
+ import { checker, uv, uniform } from 'three/tsl';
+
+ import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+
+-let camera, scene, renderer;
++let camera: THREE.OrthographicCamera, scene: THREE.Scene, renderer: THREE.WebGPURenderer;
+
+ init();
+ render();
 diff --git a/examples-testing/examples/webgpu_refraction.ts b/examples-testing/examples/webgpu_refraction.ts
 index dc018c6d..6c7faf4d 100644
 --- a/examples-testing/examples/webgpu_refraction.ts

diff --git a/src-testing/changes.patch b/src-testing/changes.patch
@@ -167,7 +167,7 @@ index e4a040de..c52771e6 100644
  addNodeElement('toAttribute', bufferNode => bufferAttribute(bufferNode.value));
 
 diff --git a/src-testing/src/nodes/accessors/TextureNode.ts b/src-testing/src/nodes/accessors/TextureNode.ts
-index 15422533..66c4e5bc 100644
+index 870ae096..6d2f1b05 100644
 --- a/src-testing/src/nodes/accessors/TextureNode.ts
 +++ b/src-testing/src/nodes/accessors/TextureNode.ts
 @@ -3,15 +3,37 @@ import { uv } from './UVNode.js';
@@ -254,9 +254,9 @@ index 15422533..66c4e5bc 100644
 -    setup(builder) {
 +    setup(builder: NodeBuilder) {
          const properties = builder.getNodeProperties(this);
+         properties.referenceNode = this.referenceNode;
 
-         //
-@@ -137,11 +159,19 @@ class TextureNode extends UniformNode {
+@@ -138,11 +160,19 @@ class TextureNode extends UniformNode {
          properties.depthNode = this.depthNode;
      }
 
@@ -278,7 +278,7 @@ index 15422533..66c4e5bc 100644
          const texture = this.value;
 
          let snippet;
-@@ -161,7 +191,7 @@ class TextureNode extends UniformNode {
+@@ -162,7 +192,7 @@ class TextureNode extends UniformNode {
          return snippet;
      }
 
@@ -287,7 +287,7 @@ index 15422533..66c4e5bc 100644
          const properties = builder.getNodeProperties(this);
 
          const texture = this.value;
-@@ -225,7 +255,7 @@ class TextureNode extends UniformNode {
+@@ -226,7 +256,7 @@ class TextureNode extends UniformNode {
          }
      }
 
@@ -296,7 +296,7 @@ index 15422533..66c4e5bc 100644
          this.sampler = value;
 
          return this;
-@@ -237,7 +267,7 @@ class TextureNode extends UniformNode {
+@@ -238,7 +268,7 @@ class TextureNode extends UniformNode {
 
      // @TODO: Move to TSL
 
@@ -305,7 +305,7 @@ index 15422533..66c4e5bc 100644
          const textureNode = this.clone();
          textureNode.uvNode = uvNode;
          textureNode.referenceNode = this;
-@@ -245,7 +275,7 @@ class TextureNode extends UniformNode {
+@@ -246,7 +276,7 @@ class TextureNode extends UniformNode {
          return nodeObject(textureNode);
      }
 
@@ -314,7 +314,7 @@ index 15422533..66c4e5bc 100644
          const textureNode = this.clone();
          textureNode.levelNode = levelNode.mul(maxMipLevel(textureNode));
          textureNode.referenceNode = this;
-@@ -253,7 +283,7 @@ class TextureNode extends UniformNode {
+@@ -254,7 +284,7 @@ class TextureNode extends UniformNode {
          return nodeObject(textureNode);
      }
 

diff --git a/three.js b/three.js
diff --git a/types/three/src/nodes/Nodes.d.ts b/types/three/src/nodes/Nodes.d.ts
@@ -176,6 +176,7 @@ export { default as ReflectorNode, reflector, ReflectorNodeParameters } from "./
 export { default as RemapNode, remap, remapClamp } from "./utils/RemapNode.js";
 export { default as RotateNode, rotate } from "./utils/RotateNode.js";
 export { default as RotateUVNode, rotateUV } from "./utils/RotateUVNode.js";
+export { default as RTTNode, rtt, RTTNodeOptions } from "./utils/RTTNode.js";
 export { default as SplitNode } from "./utils/SplitNode.js";
 export { default as SpriteSheetUVNode, spritesheetUV } from "./utils/SpriteSheetUVNode.js";
 export { default as StorageArrayElementNode } from "./utils/SpriteSheetUVNode.js";

diff --git a/types/three/src/nodes/display/GaussianBlurNode.d.ts b/types/three/src/nodes/display/GaussianBlurNode.d.ts
@@ -6,20 +6,23 @@ import { NodeRepresentation, ShaderNodeObject } from "../shadernode/ShaderNode.j
 
 export default class GaussianBlurNode extends TempNode {
     textureNode: TextureNode;
+    directionNode: Node | null;
     sigma: number;
 
-    directionNode: Node;
-
     resolution: Vector2;
 
-    constructor(textureNode: TextureNode, sigma?: number);
+    constructor(textureNode: TextureNode, directionNode?: Node | null, sigma?: number);
 
     setSize(width: number, height: number): void;
 
     getTextureNode(): TextureNode;
 }
 
-export const gaussianBlur: (node: NodeRepresentation, sigma?: number) => ShaderNodeObject<GaussianBlurNode>;
+export const gaussianBlur: (
+    node: NodeRepresentation,
+    directionNode?: NodeRepresentation | null,
+    sigma?: number,
+) => ShaderNodeObject<GaussianBlurNode>;
 
 declare module "../shadernode/ShaderNode.js" {
     interface NodeElements {

diff --git a/types/three/src/nodes/utils/RTTNode.d.ts b/types/three/src/nodes/utils/RTTNode.d.ts
@@ -0,0 +1,41 @@
+import { TextureDataType } from "../../constants.js";
+import { RenderTarget } from "../../core/RenderTarget.js";
+import TextureNode from "../accessors/TextureNode.js";
+import Node from "../core/Node.js";
+import { NodeRepresentation, ShaderNodeObject } from "../shadernode/ShaderNode.js";
+
+export interface RTTNodeOptions {
+    type: TextureDataType;
+}
+
+declare class RTTNode extends TextureNode {
+    node: Node;
+    width: number | null;
+    height: number | null;
+
+    renderTarget: RenderTarget | null;
+
+    textureNeedsUpdate: boolean;
+    autoUpdate: boolean;
+
+    constructor(node: Node, width?: number | null, height?: number | null, options?: RTTNodeOptions);
+
+    get autoSize(): boolean;
+
+    setSize(width: number | null, height: number | null): void;
+}
+
+export default RTTNode;
+
+export const rtt: (
+    node: NodeRepresentation,
+    width?: number | null,
+    height?: number | null,
+    options?: RTTNodeOptions,
+) => ShaderNodeObject<RTTNode>;
+
+declare module "../shadernode/ShaderNode.js" {
+    interface NodeElements {
+        toTexture: typeof rtt;
+    }
+}
diff --git a/update-three.sh b/update-three.sh
@@ -1,4 +1,4 @@
-cd ../three.js
+cd three.js
 git fetch
 git checkout $1
 cd ..