Node: Add FilmNode. (#1084)

* Node: Add FilmNode. * Update three.js * Add examples * Update patch * Delete examples * Add examples * Update patch * Delete examples
three-types · Jul 20, 2024 · 95a2265 · 95a2265
1 parent 934494b
commit 95a2265
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 25 deletions.
diff --git a/examples-testing/changes.patch b/examples-testing/changes.patch
@@ -881,10 +881,16 @@ index eb7e7ca0..4d327e38 100644
              }
 
 diff --git a/examples-testing/examples/misc_controls_fly.ts b/examples-testing/examples/misc_controls_fly.ts
-index 5c37e20a..acb42943 100644
+index 4e58a36e..ce66548e 100644
 --- a/examples-testing/examples/misc_controls_fly.ts
 +++ b/examples-testing/examples/misc_controls_fly.ts
-@@ -19,11 +19,15 @@ const MARGIN = 0;
+@@ -1,4 +1,4 @@
+-import * as THREE from 'three';
++import * as THREE from 'three/webgpu';
+ import { pass } from 'three/tsl';
+
+ import Stats from 'three/addons/libs/stats.module.js';
+@@ -15,11 +15,15 @@ const MARGIN = 0;
  let SCREEN_HEIGHT = window.innerHeight - MARGIN * 2;
  let SCREEN_WIDTH = window.innerWidth;
 
@@ -894,17 +900,17 @@ index 5c37e20a..acb42943 100644
 +let camera: THREE.PerspectiveCamera,
 +    controls: FlyControls,
 +    scene: THREE.Scene,
-+    renderer: THREE.WebGLRenderer,
++    renderer: THREE.WebGPURenderer,
 +    stats: Stats;
 +let geometry: THREE.SphereGeometry, meshPlanet: THREE.Mesh, meshClouds: THREE.Mesh, meshMoon: THREE.Mesh;
 +let dirLight: THREE.DirectionalLight;
 
--let composer;
-+let composer: EffectComposer;
+-let postProcessing;
++let postProcessing: THREE.PostProcessing;
 
  const textureLoader = new THREE.TextureLoader();
 
-@@ -55,7 +59,7 @@ function init() {
+@@ -51,7 +55,7 @@ function init() {
          // y scale is negated to compensate for normal map handedness.
          normalScale: new THREE.Vector2(0.85, -0.85),
      });
@@ -913,7 +919,7 @@ index 5c37e20a..acb42943 100644
 
      // planet
 
-@@ -72,7 +76,7 @@ function init() {
+@@ -68,7 +72,7 @@ function init() {
          map: textureLoader.load('textures/planets/earth_clouds_1024.png'),
          transparent: true,
      });
@@ -922,7 +928,7 @@ index 5c37e20a..acb42943 100644
 
      meshClouds = new THREE.Mesh(geometry, materialClouds);
      meshClouds.scale.set(cloudsScale, cloudsScale, cloudsScale);
-@@ -84,7 +88,7 @@ function init() {
+@@ -80,7 +84,7 @@ function init() {
      const materialMoon = new THREE.MeshPhongMaterial({
          map: textureLoader.load('textures/planets/moon_1024.jpg'),
      });
@@ -14451,16 +14457,13 @@ index cbc5a96b..66ec682e 100644
  const params = {
      enable: true,
 diff --git a/examples-testing/examples/webgpu_refraction.ts b/examples-testing/examples/webgpu_refraction.ts
-index 3270efea..0458832f 100644
+index dc018c6d..6c7faf4d 100644
 --- a/examples-testing/examples/webgpu_refraction.ts
 +++ b/examples-testing/examples/webgpu_refraction.ts
-@@ -1,15 +1,13 @@
+@@ -1,13 +1,13 @@
 -import * as THREE from 'three';
--import { MeshBasicNodeMaterial, viewportSharedTexture, texture, uv } from 'three/nodes';
--
--import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
 +import * as THREE from 'three/webgpu';
-+import { MeshBasicNodeMaterial, viewportSharedTexture, texture, uv } from 'three/tsl';
+ import { viewportSharedTexture, texture, uv } from 'three/tsl';
 
  import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
@@ -14475,7 +14478,7 @@ index 3270efea..0458832f 100644
 
  init();
 
-@@ -42,7 +40,7 @@ function init() {
+@@ -40,7 +40,7 @@ function init() {
 
      const verticalNormalScale = 0.1;
      const verticalUVOffset = texture(floorNormal, uv().mul(5)).xy.mul(2).sub(1).mul(verticalNormalScale);
@@ -14484,15 +14487,6 @@ index 3270efea..0458832f 100644
 
      const planeGeo = new THREE.PlaneGeometry(100.1, 100.1);
 
-@@ -104,7 +102,7 @@ function init() {
-
-     // renderer
-
--    renderer = new WebGPURenderer({ antialias: true });
-+    renderer = new THREE.WebGPURenderer({ antialias: true });
-     renderer.setPixelRatio(window.devicePixelRatio);
-     renderer.setSize(window.innerWidth, window.innerHeight);
-     renderer.setAnimationLoop(animate);
 diff --git a/examples-testing/examples/webgpu_textures_anisotropy.ts b/examples-testing/examples/webgpu_textures_anisotropy.ts
 index 21cc1197..eec04d7e 100644
 --- a/examples-testing/examples/webgpu_textures_anisotropy.ts

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
@@ -302,6 +302,7 @@ export {
 } from "./display/ColorSpaceNode.js";
 export { default as DepthOfFieldNode, dof } from "./display/DepthOfFieldNode.js";
 export { default as DotScreenNode, dotScreen } from "./display/DotScreenNode.js";
+export { default as FilmNode, film } from "./display/FilmNode.js";
 export { default as FrontFacingNode, faceDirection, frontFacing } from "./display/FrontFacingNode.js";
 export { default as GaussianBlurNode, gaussianBlur } from "./display/GaussianBlurNode.js";
 export { default as NormalMapNode, normalMap } from "./display/NormalMapNode.js";

diff --git a/types/three/src/nodes/display/FilmNode.d.ts b/types/three/src/nodes/display/FilmNode.d.ts
@@ -0,0 +1,25 @@
+import Node from "../core/Node.js";
+import TempNode from "../core/TempNode.js";
+import { NodeRepresentation, ShaderNodeObject } from "../shadernode/ShaderNode.js";
+
+declare class FilmNode extends TempNode {
+    inputNode: Node;
+    intensityNode: Node | null;
+    uvNode: Node | null;
+
+    constructor(inputNode: Node, intensityNode?: Node | null, uvNode?: Node | null);
+}
+
+export const film: (
+    inputNode: NodeRepresentation,
+    intensityNode?: NodeRepresentation | null,
+    uvNode?: NodeRepresentation | null,
+) => ShaderNodeObject<FilmNode>;
+
+declare module "../shadernode/ShaderNode.js" {
+    interface NodeElements {
+        film: typeof film;
+    }
+}
+
+export default FilmNode;
+3 −3		.github/workflows/codeql-code-scanning.yml
+56 −7		build/three.webgpu.js
+1 −1		build/three.webgpu.min.js
+14 −24		examples/misc_controls_fly.html
+ −		examples/screenshots/misc_controls_fly.jpg
+6 −8		examples/webgpu_refraction.html
+11 −11		package-lock.json
+2 −1		src/nodes/Nodes.js
+52 −0		src/nodes/display/FilmNode.js
+0 −7		src/nodes/display/RGBShiftNode.js
+11 −1		src/nodes/math/MathNode.js
+1 −0		test/e2e/puppeteer.js