OutlineNode: Improve approach (#1323)

* Update three.js * Add examples * Update * Update patch and delete examples
three-types · Nov 3, 2024 · a1bdbb3 · a1bdbb3
1 parent abcacf7
commit a1bdbb3
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 43 deletions.
diff --git a/examples-testing/changes.patch b/examples-testing/changes.patch
@@ -15054,15 +15054,15 @@ index 14e45012..b4bdcf2f 100644
                  child.receiveShadow = true;
              }
 diff --git a/examples-testing/examples/webgpu_postprocessing_outline.ts b/examples-testing/examples/webgpu_postprocessing_outline.ts
-index 5c0e5ede..a67441eb 100644
+index 55a91329..ac77cc1b 100644
 --- a/examples-testing/examples/webgpu_postprocessing_outline.ts
 +++ b/examples-testing/examples/webgpu_postprocessing_outline.ts
 @@ -1,6 +1,6 @@
 -import * as THREE from 'three';
--import { pass } from 'three/tsl';
+-import { pass, uniform, time, oscSine } from 'three/tsl';
 -import { outline } from 'three/addons/tsl/display/OutlineNode.js';
 +import * as THREE from 'three/webgpu';
-+import { pass, ShaderNodeObject } from 'three/tsl';
++import { pass, uniform, time, oscSine, ShaderNodeObject } from 'three/tsl';
 +import OutlineNode, { outline } from 'three/addons/tsl/display/OutlineNode.js';
 
  import Stats from 'three/addons/libs/stats.module.js';
@@ -15083,34 +15083,7 @@ index 5c0e5ede..a67441eb 100644
 
  const raycaster = new THREE.Raycaster();
  const mouse = new THREE.Vector2();
-@@ -47,9 +47,14 @@ gui.add(params, 'pulsePeriod', 0.0, 5).onChange(function (value) {
-     outlinePass.pulsePeriod = Number(value);
- });
-
--function Configuration() {
--    this.visibleEdgeColor = '#ffffff';
--    this.hiddenEdgeColor = '#190a05';
-+class Configuration {
-+    visibleEdgeColor: string;
-+    hiddenEdgeColor: string;
-+
-+    constructor() {
-+        this.visibleEdgeColor = '#ffffff';
-+        this.hiddenEdgeColor = '#190a05';
-+    }
- }
-
- const conf = new Configuration();
-@@ -189,7 +194,7 @@ function init() {
-
-     const scenePass = pass(scene, camera);
-     const scenePassColor = scenePass.getTextureNode('output');
--    outlinePass = outline(scene, camera, scene);
-+    outlinePass = outline(scene, camera, scene as unknown as THREE.Object3D[]);
-
-     postProcessing.outputNode = outlinePass.getTextureNode().add(scenePassColor);
-
-@@ -198,7 +203,7 @@ function init() {
+@@ -188,7 +188,7 @@ function init() {
      renderer.domElement.style.touchAction = 'none';
      renderer.domElement.addEventListener('pointermove', onPointerMove);
 
@@ -15119,7 +15092,7 @@ index 5c0e5ede..a67441eb 100644
          if (event.isPrimary === false) return;
 
          mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
-@@ -207,7 +212,7 @@ function init() {
+@@ -197,7 +197,7 @@ function init() {
          checkIntersection();
      }
 

diff --git a/three.js b/three.js
diff --git a/types/three/examples/jsm/tsl/display/OutlineNode.d.ts b/types/three/examples/jsm/tsl/display/OutlineNode.d.ts
@@ -1,19 +1,26 @@
-import { ShaderNodeObject, TempNode, TextureNode } from "three/tsl";
-import { Camera, Color, Object3D, Scene } from "three/webgpu";
+import { Node, ShaderNodeObject, TempNode, TextureNode, UniformNode } from "three/tsl";
+import { Camera, Object3D, Scene } from "three/webgpu";
+
+export interface OutlineNodeParams {
+    selectedObjects?: Object3D[] | undefined;
+    edgeThickness?: ShaderNodeObject<UniformNode<number>> | undefined;
+    edgeGlow?: ShaderNodeObject<UniformNode<number>> | undefined;
+    downSampleRatio?: number | undefined;
+}
 
 declare class OutlineNode extends TempNode {
     scene: Scene;
     camera: Camera;
     selectedObjects: Object3D[];
     downSampleRatio: number;
-    visibleEdgeColor: Color;
-    hiddenEdgeColor: Color;
-    edgeThickness: number;
-    edgeStrength: number;
-    edgeGlow: number;
-    pulsePeriod: number;
+    edgeThickness: ShaderNodeObject<UniformNode<number>>;
+    edgeGlow: ShaderNodeObject<UniformNode<number>>;
+
+    constructor(scene: Scene, camera: Camera, params?: OutlineNodeParams);
+
+    get visibleEdge(): ShaderNodeObject<Node>;
 
-    constructor(scene: Scene, camera: Camera, selectedObjects?: Object3D[]);
+    get hiddenEdge(): ShaderNodeObject<Node>;
 
     getTextureNode(): ShaderNodeObject<TextureNode>;
 
@@ -22,4 +29,4 @@ declare class OutlineNode extends TempNode {
 
 export default OutlineNode;
 
-export const outline: (scene: Scene, camera: Camera, selectedObjects?: Object3D[]) => ShaderNodeObject<OutlineNode>;
+export const outline: (scene: Scene, camera: Camera, params?: OutlineNodeParams) => ShaderNodeObject<OutlineNode>;
+23 −1		docs/api/en/objects/BatchedMesh.html
+6 −0		examples/jsm/postprocessing/SSRPass.js
+3 −14		examples/jsm/tsl/display/DenoiseNode.js
+4 −15		examples/jsm/tsl/display/GTAONode.js
+53 −51		examples/jsm/tsl/display/OutlineNode.js
+ −		examples/screenshots/webgpu_postprocessing_ao.jpg
+37 −61		examples/webgpu_postprocessing_outline.html
+1 −0		src/nodes/TSL.js
+23 −0		src/nodes/utils/PostProcessingUtils.js
+123 −2		src/objects/BatchedMesh.js
+12 −1		src/renderers/common/RenderObject.js