feat: implement lod edges

Author: agviegas

packages/front/src/core/PostproductionRenderer/example.ts

@@ -320,6 +320,15 @@ const panel = BUI.Component.create<BUI.PanelSection>(() => {
         }}">
       </bim-color-input>
 
+      <bim-dropdown label="Edges Mode"
+        @change="${({ target }: { target: BUI.Dropdown }) => {
+          edgesPass.mode = target.value[0] as OBF.EdgeDetectionPassMode;
+          updateIfManualMode();
+        }}">
+        <bim-option checked label="Default" value="${OBF.EdgeDetectionPassMode.DEFAULT}"></bim-option>
+        <bim-option label="Global" value="${OBF.EdgeDetectionPassMode.GLOBAL}"></bim-option>
+      </bim-dropdown>
+
     </bim-panel-section>
 
     <bim-panel-section label="Outline">

packages/front/src/core/PostproductionRenderer/index.ts

@@ -3,7 +3,7 @@ import * as OBC from "@thatopen/components";
 import { RendererWith2D } from "../Marker";
 import { Postproduction, PostproductionAspect } from "./src";
 
-export { PostproductionAspect, GlossPass } from "./src";
+export { PostproductionAspect, GlossPass, EdgeDetectionPassMode } from "./src";
 
 /**
  * A class that extends RendererWith2D and adds post-processing capabilities. 📕 [Tutorial](https://docs.thatopen.com/Tutorials/Components/Front/PostproductionRenderer). 📘 [API](https://docs.thatopen.com/api/@thatopen/components-front/classes/PostproductionRenderer).

packages/front/src/core/PostproductionRenderer/src/edge-detection-pass.ts

@@ -5,6 +5,20 @@ import {
 } from "three/examples/jsm/postprocessing/Pass.js";
 import * as OBC from "@thatopen/components";
 
+/**
+ * The mode of the edge detection pass.
+ */
+export enum EdgeDetectionPassMode {
+  /**
+   * Looks good, including LODs, but less performant.
+   */
+  DEFAULT,
+  /**
+   * Doesn't include LODs, but much more performant.
+   */
+  GLOBAL,
+}
+
 export class EdgeDetectionPass extends Pass {
   private _edgeMaterial: THREE.ShaderMaterial;
   private _combineMaterial: THREE.ShaderMaterial;
@@ -17,6 +31,19 @@ export class EdgeDetectionPass extends Pass {
   private _overrideMaterial: THREE.ShaderMaterial;
   private _depthBiasStrength = 0.001; // Adjustable depth bias strength
 
+  private _mode = EdgeDetectionPassMode.DEFAULT;
+
+  get mode() {
+    return this._mode;
+  }
+
+  set mode(value: EdgeDetectionPassMode) {
+    this._mode = value;
+    const currentWorld = this._renderer.currentWorld as OBC.World;
+    const scene = currentWorld!.scene.three as THREE.Scene;
+    scene.traverse((child) => this.setMaterialToMesh(child, false));
+  }
+
   get width() {
     return this._edgeMaterial.uniforms.width.value;
   }
@@ -201,11 +228,18 @@ export class EdgeDetectionPass extends Pass {
     currentScene.fog = null;
     currentScene.background = null;
 
-    const previousOverrideMaterial = scene.overrideMaterial;
-    scene.overrideMaterial = this._overrideMaterial;
-    renderer.setRenderTarget(this._vertexColorRenderTarget);
-    renderer.render(scene, currentWorld!.camera.three);
-    scene.overrideMaterial = previousOverrideMaterial;
+    if (this._mode === EdgeDetectionPassMode.DEFAULT) {
+      scene.traverse((child) => this.setMaterialToMesh(child, true));
+      renderer.setRenderTarget(this._vertexColorRenderTarget);
+      renderer.render(scene, currentWorld!.camera.three);
+      scene.traverse((child) => this.setMaterialToMesh(child, false));
+    } else if (this._mode === EdgeDetectionPassMode.GLOBAL) {
+      const previousOverrideMaterial = scene.overrideMaterial;
+      scene.overrideMaterial = this._overrideMaterial;
+      renderer.setRenderTarget(this._vertexColorRenderTarget);
+      renderer.render(scene, currentWorld!.camera.three);
+      scene.overrideMaterial = previousOverrideMaterial;
+    }
 
     currentScene.fog = prevFog;
     currentScene.background = prevBackground;
@@ -240,4 +274,27 @@ export class EdgeDetectionPass extends Pass {
     this._edgeRenderTarget.dispose();
     this._vertexColorRenderTarget.dispose();
   }
+
+  private setMaterialToMesh(object: THREE.Object3D, apply: boolean) {
+    if (!("isMesh" in object)) {
+      return;
+    }
+
+    const mesh = object as THREE.Mesh;
+
+    if (!("geometry" in mesh)) {
+      return;
+    }
+
+    if ("isLODGeometry" in mesh.geometry) {
+      return;
+    }
+
+    if (apply) {
+      mesh.userData.edgePassPreviousMaterial = mesh.material;
+      mesh.material = this._overrideMaterial;
+    } else if ("edgePassPreviousMaterial" in mesh.userData) {
+      mesh.material = mesh.userData.edgePassPreviousMaterial;
+    }
+  }
 }

packages/front/src/core/PostproductionRenderer/src/index.ts

@@ -11,6 +11,10 @@ import { PostproductionRenderer } from "..";
 import { BasePass } from "./base-pass";
 import { GlossPass } from "./gloss-pass";
 
+// Export the GlossPass for external use
+export { GlossPass };
+export { EdgeDetectionPassMode } from "./edge-detection-pass";
+
 export enum PostproductionAspect {
   COLOR = 0,
   PEN = 1,
@@ -407,6 +411,3 @@ export class Postproduction {
     this.style = PostproductionAspect.COLOR;
   }
 }
-
-// Export the GlossPass for external use
-export { GlossPass };