From a6c66cd7f9cc7eb3ca9e955c31cd271b38cdedca Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Sat, 20 Jul 2024 15:23:02 -0400 Subject: [PATCH] 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 --- examples-testing/changes.patch | 18 +++++++- src-testing/changes.patch | 16 ++++---- three.js | 2 +- types/three/src/nodes/Nodes.d.ts | 1 + .../src/nodes/display/GaussianBlurNode.d.ts | 11 +++-- types/three/src/nodes/utils/RTTNode.d.ts | 41 +++++++++++++++++++ update-three.sh | 2 +- 7 files changed, 76 insertions(+), 15 deletions(-) create mode 100644 types/three/src/nodes/utils/RTTNode.d.ts diff --git a/examples-testing/changes.patch b/examples-testing/changes.patch index b25e79266..3abbc70d7 100644 --- 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 index 90e690ee9..8bd6e926b 100644 --- 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 index a58e7d14c..08d5412aa 160000 --- a/three.js +++ b/three.js @@ -1 +1 @@ -Subproject commit a58e7d14c75745f22cef6cb0967d3758039eae8f +Subproject commit 08d5412aa0bc5fe74c2f7b0305d6f5570e50961e diff --git a/types/three/src/nodes/Nodes.d.ts b/types/three/src/nodes/Nodes.d.ts index 31e5e8127..1476b21aa 100644 --- 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 index 50b2e9aaf..6cec09eb3 100644 --- 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; +export const gaussianBlur: ( + node: NodeRepresentation, + directionNode?: NodeRepresentation | null, + sigma?: number, +) => ShaderNodeObject; 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 new file mode 100644 index 000000000..f792694f4 --- /dev/null +++ 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; + +declare module "../shadernode/ShaderNode.js" { + interface NodeElements { + toTexture: typeof rtt; + } +} diff --git a/update-three.sh b/update-three.sh index 10d8ce506..a4b1da7f5 100644 --- a/update-three.sh +++ b/update-three.sh @@ -1,4 +1,4 @@ -cd ../three.js +cd three.js git fetch git checkout $1 cd ..