@inweb/viewer-three 26.8.1 → 26.9.0

package/lib/Viewer/Viewer.d.ts

@@ -1,9 +1,16 @@
 import { Box3, Object3D, OrthographicCamera, PerspectiveCamera, Scene, 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";
 import { CanvasEventMap, FileSource, IComponent, IDragger, ILoader, IOptions, IViewer, IViewpoint, Options, OptionsEventMap, ViewerEventMap } from "@inweb/viewer-core";
 import { IMarkup, IWorldTransform } from "@inweb/markup";
-import { IModelImpl } from "./model";
+import { IModelImpl } from "./models/IModelImpl";
+import { Helpers } from "./scenes/Helpers";
 /**
  * 3D viewer powered by {@link https://threejs.org/ | Three.js}.
  */
@@ -14,9 +21,16 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     canvas: HTMLCanvasElement | undefined;
     canvasEvents: string[];
     scene: Scene | undefined;
-    helpers: Scene | undefined;
+    helpers: Helpers | undefined;
     camera: PerspectiveCamera | OrthographicCamera | undefined;
     renderer: WebGLRenderer | undefined;
+    renderPass: RenderPass | undefined;
+    helpersPass: RenderPass | undefined;
+    fxaaPass: FXAAPass | undefined;
+    smaaPass: SMAAPass | undefined;
+    ssaaRenderPass: SSAARenderPass | undefined;
+    outputPass: OutputPass | undefined;
+    composer: EffectComposer | undefined;
     loaders: ILoader[];
     models: IModelImpl[];
     selected: Object3D[];
@@ -46,7 +60,7 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     dispose(): this;
     isInitialized(): boolean;
     update(force?: boolean): void;
-    render(time: DOMHighResTimeStamp): void;
+    render(time?: DOMHighResTimeStamp, force?: boolean): void;
     loadReferences(model: Model | File | Assembly): Promise<this>;
     /**
      * Loads a file into the viewer.

package/lib/Viewer/commands/SetDefaultViewPosition.d.ts

@@ -1,15 +1,15 @@
 import { Vector3 } from "three";
 import type { Viewer } from "../Viewer";
 export declare const defaultViewPositions: {
-    top: Vector3;
-    bottom: Vector3;
-    left: Vector3;
-    right: Vector3;
     front: Vector3;
     back: Vector3;
+    left: Vector3;
+    right: Vector3;
+    bottom: Vector3;
+    top: Vector3;
+    ns: Vector3;
     sw: Vector3;
-    se: Vector3;
-    ne: Vector3;
     nw: Vector3;
+    se: Vector3;
 };
 export declare function setDefaultViewPosition(viewer: Viewer, position: string): void;

package/lib/Viewer/components/HighlighterComponent.d.ts

@@ -5,15 +5,16 @@ import { Viewer } from "../Viewer";
 export declare class HighlighterComponent implements IComponent {
     protected viewer: Viewer;
     renderTarget: WebGLRenderTarget;
-    highlightMaterial: MeshPhongMaterial;
-    outlineMaterial: LineMaterial;
-    highlightLineMaterial: LineBasicMaterial;
-    highlightLineGlowMaterial: LineMaterial;
+    facesMaterial: MeshPhongMaterial;
+    edgesMaterial: LineMaterial;
+    lineMaterial: LineBasicMaterial;
+    lineGlowMaterial: LineMaterial;
     constructor(viewer: Viewer);
     dispose(): void;
     highlight(objects: Object3D | Object3D[]): void;
     unhighlight(objects: Object3D | Object3D[]): void;
     geometryEnd: () => void;
     optionsChange: () => void;
+    syncHighlightColors(): void;
     viewerResize(event: ResizeEvent): void;
 }

package/lib/Viewer/components/SelectionComponent.d.ts

@@ -1,7 +1,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 declare class SelectionComponent implements IComponent {
     protected viewer: Viewer;

package/lib/Viewer/loaders/DynamicGltfLoader/DynamicModelImpl.d.ts

@@ -1,13 +1,15 @@
 import { Box3, Object3D } from "three";
-import { ModelImpl } from "../../model";
+import { ModelImpl } from "../../models/ModelImpl";
 import { DynamicGltfLoader } from "./DynamicGltfLoader.js";
 export declare class DynamicModelImpl extends ModelImpl {
     gltfLoader: DynamicGltfLoader;
+    modelId: number;
     getExtents(target: Box3): Box3;
     getObjects(): Object3D[];
     getVisibleObjects(): Object3D[];
     hasObject(object: any): boolean;
     getObjectsByHandles(handles: string | string[]): Object3D[];
+    getHandlesByObjects(objects: Object3D | Object3D[]): string[];
     hideObjects(objects: Object3D | Object3D[]): this;
     isolateObjects(objects: Object3D | Object3D[]): this;
     showObjects(objects: Object3D | Object3D[]): this;

package/lib/Viewer/scenes/Helpers.d.ts

@@ -0,0 +1,7 @@
+import { Scene, WebGLRenderer } from "three";
+export declare class Helpers extends Scene {
+    private oldAutoClear;
+    private oldClippingPlanes;
+    onBeforeRender(renderer: WebGLRenderer): void;
+    onAfterRender(renderer: WebGLRenderer): void;
+}

package/lib/index.d.ts

@@ -3,7 +3,8 @@ export * from "./Viewer/commands";
 export * from "./Viewer/components";
 export * from "./Viewer/loaders";
 export * from "./Viewer/loaders/GLTFLoadingManager";
-export * from "./Viewer/model";
+export * from "./Viewer/models/IModelImpl";
+export * from "./Viewer/models/ModelImpl";
 export * from "./Viewer/Viewer";
 export * from "@inweb/viewer-core";
 export * from "@inweb/markup";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "26.8.1",
+  "version": "26.9.0",
   "description": "JavaScript library for rendering CAD and BIM files in a browser using Three.js",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
@@ -35,17 +35,17 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~26.8.1",
-    "@inweb/eventemitter2": "~26.8.1",
-    "@inweb/markup": "~26.8.1",
-    "@inweb/viewer-core": "~26.8.1"
+    "@inweb/client": "~26.9.0",
+    "@inweb/eventemitter2": "~26.9.0",
+    "@inweb/markup": "~26.9.0",
+    "@inweb/viewer-core": "~26.9.0"
   },
   "devDependencies": {
-    "@types/three": "^0.173.0",
-    "three": "^0.173.0"
+    "@types/three": "^0.179.0",
+    "three": "^0.179.1"
   },
   "peerDependencies": {
-    "@types/three": "^0.173.0",
-    "three": "^0.173.0"
+    "@types/three": "^0.179.0",
+    "three": "^0.179.1"
   }
 }

package/plugins/components/StatsPanelComponent.ts

@@ -45,8 +45,8 @@ class StatsPanelComponent implements IComponent {
   }
 
   updateStats = () => {
+    this.viewer.render(null, true);
     this.stats.update();
-    this.viewer.update();
   };
 }
 

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,8 +483,8 @@ export class Viewer
     this.models.forEach((model) => model.dispose());
     this.models = [];
 
-    this.helpers.clear();
     this.scene.clear();
+    this.helpers.clear();
 
     this.syncOptions();
     this.syncOverlay();
@@ -445,7 +496,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 +655,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 +683,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);
   };
 }