@inweb/viewer-three 26.8.0 → 26.8.2

package/plugins/loaders/IFCXCloudLoader.ts

@@ -52,7 +52,7 @@ export class IFCXCloudLoader extends Loader {
     const textDecoder = new TextDecoder();
     const json = JSON.parse(textDecoder.decode(arrayBuffer));
 
-    const scene = parse(json);
+    const scene = await parse(json);
     clear();
 
     let handle = 0;

package/src/Viewer/Viewer.ts

@@ -23,7 +23,8 @@
 
 import {
   Box3,
-  LinearToneMapping,
+  LinearSRGBColorSpace,
+  // LinearToneMapping,
   Object3D,
   OrthographicCamera,
   PerspectiveCamera,
@@ -34,6 +35,12 @@ import {
   Vector3,
   WebGLRenderer,
 } from "three";
+import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
+import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
+import { FXAAPass } from "three/examples/jsm/postprocessing/FXAAPass.js";
+import { SMAAPass } from "three/examples/jsm/postprocessing/SMAAPass.js";
+import { SSAARenderPass } from "./postprocessing/SSAARenderPass.js";
+import { OutputPass } from "three/examples/jsm/postprocessing/OutputPass.js";
 
 import { EventEmitter2 } from "@inweb/eventemitter2";
 import { Assembly, Client, Model, File } from "@inweb/client";
@@ -62,7 +69,8 @@ import { draggers } from "./draggers";
 import { commands } from "./commands";
 import { components } from "./components";
 import { loaders } from "./loaders";
-import { IModelImpl } from "./model";
+import { IModelImpl } from "./models/IModelImpl";
+import { Helpers } from "./scenes/Helpers";
 
 /**
  * 3D viewer powered by {@link https://threejs.org/ | Three.js}.
@@ -80,9 +88,17 @@ export class Viewer
   public canvasEvents: string[];
 
   public scene: Scene | undefined;
-  public helpers: Scene | undefined;
+  public helpers: Helpers | undefined;
   public camera: PerspectiveCamera | OrthographicCamera | undefined;
   public renderer: WebGLRenderer | undefined;
+  public renderPass: RenderPass | undefined;
+  public helpersPass: RenderPass | undefined;
+  public fxaaPass: FXAAPass | undefined;
+  public smaaPass: SMAAPass | undefined;
+  public ssaaRenderPass: SSAARenderPass | undefined;
+  public outputPass: OutputPass | undefined;
+  public composer: EffectComposer | undefined;
+
   public loaders: ILoader[];
   public models: IModelImpl[];
   public selected: Object3D[];
@@ -153,7 +169,7 @@ export class Viewer
     this.addEventListener("optionschange", (event) => this.syncOptions(event.data));
 
     this.scene = new Scene();
-    this.helpers = new Scene();
+    this.helpers = new Helpers();
     this.target = new Vector3();
 
     const pixelRatio = window.devicePixelRatio;
@@ -174,11 +190,33 @@ export class Viewer
       alpha: true,
       preserveDrawingBuffer: true,
       powerPreference: "high-performance",
-      logarithmicDepthBuffer: false,
+      logarithmicDepthBuffer: true,
     });
     this.renderer.setPixelRatio(pixelRatio);
     this.renderer.setSize(width, height);
-    this.renderer.toneMapping = LinearToneMapping;
+    // this.renderer.toneMapping = LinearToneMapping;
+    this.renderer.outputColorSpace = LinearSRGBColorSpace;
+
+    this.renderPass = new RenderPass(this.scene, this.camera);
+
+    this.helpersPass = new RenderPass(this.helpers, this.camera);
+    this.helpersPass.clear = false;
+
+    this.fxaaPass = new FXAAPass();
+    this.smaaPass = new SMAAPass();
+
+    this.ssaaRenderPass = new SSAARenderPass([this.scene, this.helpers], this.camera);
+    this.ssaaRenderPass.unbiased = true;
+
+    this.outputPass = new OutputPass();
+
+    this.composer = new EffectComposer(this.renderer);
+    this.composer.addPass(this.renderPass);
+    this.composer.addPass(this.helpersPass);
+    this.composer.addPass(this.smaaPass);
+    this.composer.addPass(this.fxaaPass);
+    this.composer.addPass(this.ssaaRenderPass);
+    this.composer.addPass(this.outputPass);
 
     this.canvas = canvas;
     this.canvasEvents.forEach((x) => canvas.addEventListener(x, this.canvaseventlistener));
@@ -223,12 +261,26 @@ export class Viewer
       this.canvas = undefined;
     }
 
+    if (this.composer) this.composer.dispose();
+    if (this.renderPass) this.renderPass.dispose();
+    if (this.helpersPass) this.helpersPass.dispose();
+    if (this.fxaaPass) this.fxaaPass.dispose();
+    if (this.smaaPass) this.smaaPass.dispose();
+    if (this.ssaaRenderPass) this.ssaaRenderPass.dispose();
+    if (this.outputPass) this.outputPass.dispose();
     if (this.renderer) this.renderer.dispose();
 
-    this.helpers = undefined;
     this.scene = undefined;
-    this.renderer = undefined;
+    this.helpers = undefined;
     this.camera = undefined;
+    this.renderer = undefined;
+    this.renderPass = undefined;
+    this.helpersPass = undefined;
+    this.fxaaPass = undefined;
+    this.smaaPass = undefined;
+    this.ssaaRenderPass = undefined;
+    this.outputPass = undefined;
+    this.composer = undefined;
 
     return this;
   }
@@ -239,30 +291,29 @@ export class Viewer
 
   update(force = false): void {
     this.renderNeeded = true;
-    if (force) this.render(performance.now());
+    if (force) this.render();
     this.emitEvent({ type: "update", data: force });
   }
 
-  render(time: DOMHighResTimeStamp): void {
-    if (!this.renderNeeded) return;
+  render(time?: DOMHighResTimeStamp, force = false): void {
     if (!this.renderer) return;
+    if (!(this.renderNeeded || force)) return;
 
-    this.renderNeeded = false;
+    if (!time) time = performance.now();
+    const deltaTime = (time - this.renderTime) / 1000;
 
-    this.renderer.setViewport(0, 0, this.canvas.offsetWidth, this.canvas.offsetHeight);
-    this.renderer.autoClear = true;
-    this.renderer.render(this.scene, this.camera);
+    this.renderTime = time;
+    this.renderNeeded = false;
 
-    const clippingPlanes = this.renderer.clippingPlanes;
-    this.renderer.clippingPlanes = [];
-    this.renderer.autoClear = false;
-    this.renderer.render(this.helpers, this.camera);
-    this.renderer.clippingPlanes = clippingPlanes;
+    if (this.options.antialiasing === true || this.options.antialiasing === "msaa") {
+      this.renderer.render(this.scene, this.camera);
+      this.renderer.render(this.helpers, this.camera);
+    } else {
+      this.composer.render(deltaTime);
+    }
 
     this._activeDragger?.updatePreview?.();
 
-    const deltaTime = (time - this.renderTime) / 1000;
-    this.renderTime = time;
     this.emitEvent({ type: "render", time, deltaTime });
   }
 
@@ -432,6 +483,12 @@ export class Viewer
     this.models.forEach((model) => model.dispose());
     this.models = [];
 
+    this.scene.clear();
+    this.helpers.clear();
+
+    this.models.forEach((model) => model.dispose());
+    this.models = [];
+
     this.helpers.clear();
     this.scene.clear();
 
@@ -445,7 +502,16 @@ export class Viewer
   }
 
   syncOptions(options: IOptions = this.options): void {
-    // this.update();
+    if (!this.renderer) return;
+
+    this.fxaaPass.enabled = options.antialiasing === "fxaa";
+    this.smaaPass.enabled = options.antialiasing === "smaa";
+    this.ssaaRenderPass.enabled = options.antialiasing === "ssaa";
+
+    this.renderPass.enabled = !this.ssaaRenderPass.enabled;
+    this.helpersPass.enabled = !this.ssaaRenderPass.enabled;
+
+    this.update();
   }
 
   syncOverlay(): void {
@@ -595,20 +661,25 @@ export class Viewer
         const rendererSize = this.renderer.getSize(new Vector2());
         const aspect = rendererSize.x / rendererSize.y;
 
-        this.camera = new OrthographicCamera();
-        this.camera.top = orthogonal_camera.field_height / 2;
-        this.camera.bottom = -orthogonal_camera.field_height / 2;
-        this.camera.left = this.camera.bottom * aspect;
-        this.camera.right = this.camera.top * aspect;
-        this.camera.near = 0;
-        this.camera.far = extentsSize * 100;
-        this.camera.zoom = orthogonal_camera.view_to_world_scale;
-        this.camera.updateProjectionMatrix();
-
-        this.camera.up.copy(getVector3FromPoint3d(orthogonal_camera.up_vector));
-        this.camera.position.copy(getVector3FromPoint3d(orthogonal_camera.view_point));
-        this.camera.lookAt(getVector3FromPoint3d(orthogonal_camera.direction).add(this.camera.position));
-        this.camera.updateMatrixWorld();
+        const camera = new OrthographicCamera();
+        camera.top = orthogonal_camera.field_height / 2;
+        camera.bottom = -orthogonal_camera.field_height / 2;
+        camera.left = camera.bottom * aspect;
+        camera.right = camera.top * aspect;
+        camera.near = 0;
+        camera.far = extentsSize * 100;
+        camera.zoom = orthogonal_camera.view_to_world_scale;
+        camera.updateProjectionMatrix();
+
+        camera.up.copy(getVector3FromPoint3d(orthogonal_camera.up_vector));
+        camera.position.copy(getVector3FromPoint3d(orthogonal_camera.view_point));
+        camera.lookAt(getVector3FromPoint3d(orthogonal_camera.direction).add(camera.position));
+        camera.updateMatrixWorld();
+
+        this.camera = camera;
+        this.renderPass.camera = camera;
+        this.helpersPass.camera = camera;
+        this.ssaaRenderPass.camera = camera;
       }
     };
 
@@ -618,17 +689,22 @@ export class Viewer
         const rendererSize = this.renderer.getSize(new Vector2());
         const aspect = rendererSize.x / rendererSize.y;
 
-        this.camera = new PerspectiveCamera();
-        this.camera.fov = perspective_camera.field_of_view;
-        this.camera.aspect = aspect;
-        this.camera.near = extentsSize / 100;
-        this.camera.far = extentsSize * 100;
-        this.camera.updateProjectionMatrix();
-
-        this.camera.up.copy(getVector3FromPoint3d(perspective_camera.up_vector));
-        this.camera.position.copy(getVector3FromPoint3d(perspective_camera.view_point));
-        this.camera.lookAt(getVector3FromPoint3d(perspective_camera.direction).add(this.camera.position));
-        this.camera.updateMatrixWorld();
+        const camera = new PerspectiveCamera();
+        camera.fov = perspective_camera.field_of_view;
+        camera.aspect = aspect;
+        camera.near = extentsSize / 100;
+        camera.far = extentsSize * 100;
+        camera.updateProjectionMatrix();
+
+        camera.up.copy(getVector3FromPoint3d(perspective_camera.up_vector));
+        camera.position.copy(getVector3FromPoint3d(perspective_camera.view_point));
+        camera.lookAt(getVector3FromPoint3d(perspective_camera.direction).add(camera.position));
+        camera.updateMatrixWorld();
+
+        this.camera = camera;
+        this.renderPass.camera = camera;
+        this.helpersPass.camera = camera;
+        this.ssaaRenderPass.camera = camera;
       }
     };
 

package/src/Viewer/commands/SetDefaultViewPosition.ts

@@ -26,16 +26,16 @@ import type { Viewer } from "../Viewer";
 import { zoomTo } from "./ZoomTo";
 
 export const defaultViewPositions = {
-  top: new Vector3(0, 0, 1),
-  bottom: new Vector3(0, 0, -1),
+  front: new Vector3(0, 0, 1),
+  back: new Vector3(0, 0, -1),
   left: new Vector3(-1, 0, 0),
   right: new Vector3(1, 0, 0),
-  front: new Vector3(0, -1, 0),
-  back: new Vector3(0, 1, 0),
-  sw: new Vector3(-0.5, -0.5, 1.0).normalize(),
-  se: new Vector3(0.5, -0.5, 1.0).normalize(),
-  ne: new Vector3(0.5, 0.5, 1.0).normalize(),
-  nw: new Vector3(-0.5, 0.5, 1.0).normalize(),
+  bottom: new Vector3(0, -1, 0),
+  top: new Vector3(0, 1, 0),
+  ns: new Vector3(-0.5, 1.0, -0.5).normalize(),
+  sw: new Vector3(0.5, 1.0, -0.5).normalize(),
+  nw: new Vector3(0.5, 1.0, 0.5).normalize(),
+  se: new Vector3(-0.5, 1.0, 0.5).normalize(),
 };
 
 export function setDefaultViewPosition(viewer: Viewer, position: string): void {

package/src/Viewer/components/CameraComponent.ts

@@ -21,7 +21,7 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Sphere, Vector2, Vector3 } from "three";
+import { Sphere, Vector2 } from "three";
 
 import { IComponent } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
@@ -39,42 +39,46 @@ export class CameraComponent implements IComponent {
   }
 
   geometryEnd = () => {
-    const extentsCenter = this.viewer.extents.getCenter(new Vector3());
     const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere()).radius * 2;
     const rendererSize = this.viewer.renderer.getSize(new Vector2());
     const aspect = rendererSize.x / rendererSize.y;
 
+    let camera: any;
+
     // TODO: do not change the camera and target after opening the second model in "append" mode
-    let sceneCamera: any;
     this.viewer.scene.traverse((object: any) => {
       if (object.isCamera)
-        if (!sceneCamera) sceneCamera = object;
-        else if (object.isPerspectiveCamera && sceneCamera.isOrthographicCamera) sceneCamera = object;
+        if (!camera) camera = object;
+        else if (object.isPerspectiveCamera && camera.isOrthographicCamera) camera = object;
     });
-    if (sceneCamera) {
-      this.viewer.camera = sceneCamera.clone();
-      this.viewer.camera.scale.set(1, 1, 1); // <- Visualize fix
-    }
 
-    const camera = this.viewer.camera as any;
+    if (camera) {
+      camera.isDefaultCamera = true;
+      camera.scale.set(1, 1, 1); // <- Visualize fix
+
+      this.viewer.camera = camera;
+      this.viewer.renderPass.camera = camera;
+      this.viewer.helpersPass.camera = camera;
+      this.viewer.ssaaRenderPass.camera = camera;
+    } else {
+      camera = this.viewer.camera;
+    }
 
     if (camera.isPerspectiveCamera) {
       camera.aspect = aspect;
-      camera.near = extentsSize / 100;
-      camera.far = extentsSize * 100;
+      camera.near = extentsSize / 1000;
+      camera.far = extentsSize * 1000;
       camera.updateProjectionMatrix();
     }
     if (camera.isOrthographicCamera) {
       camera.left = camera.bottom * aspect;
       camera.right = camera.top * aspect;
       camera.near = 0;
-      camera.far = extentsSize * 100;
+      camera.far = extentsSize * 1000;
       camera.updateProjectionMatrix();
     }
 
-    this.viewer.target.copy(extentsCenter);
-
-    if (!sceneCamera) {
+    if (!camera.isDefaultCamera) {
       this.viewer.executeCommand("setDefaultViewPosition");
     }
   };

package/src/Viewer/components/ExtentsComponent.ts

@@ -55,5 +55,6 @@ export class ExtentsComponent implements IComponent {
     this.viewer.models.forEach((model) => model.getExtents(extents));
 
     this.viewer.extents.copy(extents);
+    extents.getCenter(this.viewer.target);
   };
 }

package/src/Viewer/components/HighlighterComponent.ts

@@ -22,7 +22,6 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import {
-  Color,
   EdgesGeometry,
   LineBasicMaterial,
   MeshPhongMaterial,
@@ -43,10 +42,10 @@ import { HighlighterUtils } from "./HighlighterUtils";
 export class HighlighterComponent implements IComponent {
   protected viewer: Viewer;
   public renderTarget: WebGLRenderTarget;
-  public highlightMaterial: MeshPhongMaterial;
-  public outlineMaterial: LineMaterial;
-  public highlightLineMaterial: LineBasicMaterial;
-  public highlightLineGlowMaterial: LineMaterial;
+  public facesMaterial: MeshPhongMaterial;
+  public edgesMaterial: LineMaterial;
+  public lineMaterial: LineBasicMaterial;
+  public lineGlowMaterial: LineMaterial;
 
   constructor(viewer: Viewer) {
     this.viewer = viewer;
@@ -81,46 +80,48 @@ export class HighlighterComponent implements IComponent {
     if (!Array.isArray(objects)) objects = [objects];
     if (!objects.length) return;
 
-    objects.forEach((object: any) => {
-      if (object.isHighlighted) return;
-
-      if (object.isLine || object.isLineSegments) {
-        const positions = object.geometry.attributes.position.array;
-        const indices = object.geometry.index ? object.geometry.index.array : null;
-        const lineGeometry = indices
-          ? HighlighterUtils.fromIndexedLine(positions, indices)
-          : HighlighterUtils.fromNonIndexedLine(positions, object.isLineSegments);
-
-        const wireframe = new Wireframe(lineGeometry, this.highlightLineGlowMaterial);
-        wireframe.position.copy(object.position);
-        wireframe.rotation.copy(object.rotation);
-        wireframe.scale.copy(object.scale);
-        wireframe.visible = edgesVisibility;
-
-        object.parent.add(wireframe);
-        object.userData.highlightWireframe = wireframe;
-
-        object.userData.originalMaterial = object.material;
-        object.material = this.highlightLineMaterial;
-        object.isHighlighted = true;
-      } else if (object.isMesh) {
-        const edgesGeometry = new EdgesGeometry(object.geometry, 60);
-        const lineGeometry = new LineSegmentsGeometry().fromEdgesGeometry(edgesGeometry);
-
-        const wireframe = new Wireframe(lineGeometry, this.outlineMaterial);
-        wireframe.position.copy(object.position);
-        wireframe.rotation.copy(object.rotation);
-        wireframe.scale.copy(object.scale);
-        wireframe.visible = edgesVisibility;
-
-        object.parent.add(wireframe);
-        object.userData.highlightWireframe = wireframe;
-
-        object.userData.originalMaterial = object.material;
-        object.material = this.highlightMaterial;
-        object.isHighlighted = true;
-      }
-    });
+    objects
+      .filter((object) => !object.userData.isEdge) // <- filtering server generated edges
+      .forEach((object: any) => {
+        if (object.isHighlighted) return;
+
+        if (object.isLine || object.isLineSegments) {
+          const positions = object.geometry.attributes.position.array;
+          const indices = object.geometry.index ? object.geometry.index.array : null;
+          const lineGeometry = indices
+            ? HighlighterUtils.fromIndexedLine(positions, indices)
+            : HighlighterUtils.fromNonIndexedLine(positions, object.isLineSegments);
+
+          const wireframe = new Wireframe(lineGeometry, this.lineGlowMaterial);
+          wireframe.position.copy(object.position);
+          wireframe.rotation.copy(object.rotation);
+          wireframe.scale.copy(object.scale);
+          wireframe.visible = edgesVisibility;
+
+          object.parent.add(wireframe);
+          object.userData.highlightWireframe = wireframe;
+
+          object.userData.originalMaterial = object.material;
+          object.material = this.lineMaterial;
+          object.isHighlighted = true;
+        } else if (object.isMesh) {
+          const edgesGeometry = new EdgesGeometry(object.geometry, 89);
+          const lineGeometry = new LineSegmentsGeometry().fromEdgesGeometry(edgesGeometry);
+
+          const wireframe = new Wireframe(lineGeometry, this.edgesMaterial);
+          wireframe.position.copy(object.position);
+          wireframe.rotation.copy(object.rotation);
+          wireframe.scale.copy(object.scale);
+          wireframe.visible = edgesVisibility;
+
+          object.parent.add(wireframe);
+          object.userData.highlightWireframe = wireframe;
+
+          object.userData.originalMaterial = object.material;
+          object.material = this.facesMaterial;
+          object.isHighlighted = true;
+        }
+      });
   }
 
   unhighlight(objects: Object3D | Object3D[]) {
@@ -140,14 +141,8 @@ export class HighlighterComponent implements IComponent {
   }
 
   geometryEnd = () => {
-    const { facesColor, facesTransparancy, edgesColor, edgesOverlap, facesOverlap } = this.viewer.options;
-
-    this.highlightMaterial = new MeshPhongMaterial({
-      color: new Color(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255),
+    this.facesMaterial = new MeshPhongMaterial({
       transparent: true,
-      opacity: (255 - facesTransparancy) / 255,
-      depthTest: !facesOverlap,
-      depthWrite: !facesOverlap,
       specular: 0x222222,
       shininess: 10,
       reflectivity: 0.05,
@@ -156,57 +151,60 @@ export class HighlighterComponent implements IComponent {
       polygonOffsetUnits: 1,
     });
 
-    this.outlineMaterial = new LineMaterial({
-      color: new Color(edgesColor.r / 255, edgesColor.g / 255, edgesColor.b / 255),
+    this.edgesMaterial = new LineMaterial({
       linewidth: 1.5,
-      depthTest: !edgesOverlap,
-      depthWrite: !edgesOverlap,
       resolution: new Vector2(window.innerWidth, window.innerHeight),
     });
 
-    this.highlightLineMaterial = new LineBasicMaterial({
-      color: new Color(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255),
-      depthTest: false,
-      depthWrite: false,
+    this.lineMaterial = new LineBasicMaterial({
+      transparent: true,
+      depthTest: true,
+      depthWrite: true,
     });
 
-    this.highlightLineGlowMaterial = new LineMaterial({
-      color: new Color(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255),
-      linewidth: 5,
+    this.lineGlowMaterial = new LineMaterial({
+      linewidth: 1.5,
       transparent: true,
       opacity: 0.8,
-      depthTest: !edgesOverlap,
-      depthWrite: !edgesOverlap,
       resolution: new Vector2(window.innerWidth, window.innerHeight),
     });
+
+    this.syncHighlightColors();
   };
 
   optionsChange = () => {
-    const { facesColor, facesTransparancy, edgesColor, edgesVisibility, edgesOverlap, facesOverlap } =
-      this.viewer.options;
+    this.syncHighlightColors();
+    this.viewer.update();
+  };
+
+  syncHighlightColors() {
+    const { facesColor, facesTransparancy, facesOverlap } = this.viewer.options;
+    const { edgesColor, edgesVisibility, edgesOverlap } = this.viewer.options;
 
-    this.highlightMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
-    this.highlightMaterial.opacity = (255 - facesTransparancy) / 255;
-    this.highlightMaterial.depthTest = !facesOverlap;
-    this.highlightMaterial.depthWrite = !facesOverlap;
+    this.facesMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
+    this.facesMaterial.opacity = (255 - facesTransparancy) / 255;
+    this.facesMaterial.depthTest = !facesOverlap;
+    this.facesMaterial.depthWrite = !facesOverlap;
 
-    this.outlineMaterial.color.setRGB(edgesColor.r / 255, edgesColor.g / 255, edgesColor.b / 255);
-    this.outlineMaterial.depthTest = !edgesOverlap;
-    this.outlineMaterial.depthWrite = !edgesOverlap;
+    this.edgesMaterial.color.setRGB(edgesColor.r / 255, edgesColor.g / 255, edgesColor.b / 255);
+    this.edgesMaterial.depthTest = !edgesOverlap;
+    this.edgesMaterial.depthWrite = !edgesOverlap;
 
-    this.highlightLineMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
-    this.highlightLineGlowMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
+    this.lineMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
+
+    this.lineGlowMaterial.color.setRGB(edgesColor.r / 255, edgesColor.g / 255, edgesColor.b / 255);
+    this.lineGlowMaterial.depthTest = !edgesOverlap;
+    this.lineGlowMaterial.depthWrite = !edgesOverlap;
 
     this.viewer.selected.forEach((selected) => {
       const wireframe = selected.userData.highlightWireframe;
       if (wireframe) wireframe.visible = edgesVisibility;
     });
-
-    this.viewer.update();
-  };
+  }
 
   viewerResize(event: ResizeEvent) {
     this.renderTarget?.setSize(event.width, event.height);
-    this.outlineMaterial?.resolution.set(event.width, event.height);
+    this.edgesMaterial?.resolution.set(event.width, event.height);
+    this.lineGlowMaterial?.resolution.set(event.width, event.height);
   }
 }

package/src/Viewer/components/LightComponent.ts

@@ -36,7 +36,7 @@ export class LightComponent implements IComponent {
   constructor(viewer: Viewer) {
     this.viewer = viewer;
 
-    this.ambientLight = new AmbientLight(0xffffff, 1.0);
+    this.ambientLight = new AmbientLight(0xffffff, 1.5);
     this.directionalLight = new DirectionalLight(0xffffff, 1.0);
     this.frontLight = new DirectionalLight(0xffffff, 1.25);
     this.hemisphereLight = new HemisphereLight(0xffffff, 0x444444, 1.25);
@@ -73,20 +73,26 @@ export class LightComponent implements IComponent {
     const extentsCenter = this.viewer.extents.getCenter(new Vector3());
     const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere()).radius;
 
+    const front = new Vector3()
+      .copy(this.viewer.camera.up)
+      .cross(new Vector3(1, 0, 0))
+      .negate();
+
     this.directionalLight.position
-      .set(0.5, 0.866, 0) // ~60º
+      .copy(this.viewer.camera.up)
+      .applyAxisAngle(front, (-Math.PI * 30) / 180)
       .multiplyScalar(extentsSize * 2)
       .add(extentsCenter);
     this.directionalLight.target.position.copy(extentsCenter);
 
     this.frontLight.position
-      .set(0, 0, 1)
+      .copy(front)
       .multiplyScalar(extentsSize * 2)
       .add(extentsCenter);
     this.frontLight.target.position.copy(extentsCenter);
 
     this.hemisphereLight.position
-      .set(0, 0, 1)
+      .copy(front)
       .multiplyScalar(extentsSize * 3)
       .add(extentsCenter);
 

package/src/Viewer/components/ResizeCanvasComponent.ts

@@ -57,6 +57,7 @@ export class ResizeCanvasComponent implements IComponent {
     }
 
     this.viewer.renderer.setSize(width, height, true);
+    this.viewer.composer.setSize(width, height);
 
     this.viewer.update(true);
     this.viewer.emitEvent({ type: "resize", width, height });

package/src/Viewer/components/SelectionComponent.ts

@@ -25,7 +25,7 @@ import { Intersection, Object3D, Raycaster, Vector2 } from "three";
 
 import type { IComponent } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
-import type { IModelImpl } from "../model";
+import type { IModelImpl } from "../models/IModelImpl";
 import type { HighlighterComponent } from "./HighlighterComponent";
 
 export class SelectionComponent implements IComponent {