@inweb/viewer-three 26.8.1 → 26.8.2

package/dist/viewer-three.module.js

@@ -2,7 +2,7 @@ import { draggersRegistry, commandsRegistry, componentsRegistry, Loader, loaders
 
 export * from "@inweb/viewer-core";
 
-import { Line, Vector3, BufferGeometry, Float32BufferAttribute, LineBasicMaterial, Mesh, MeshBasicMaterial, DoubleSide, EventDispatcher, MOUSE, TOUCH, Spherical, Quaternion, Vector2, Plane, Object3D, Matrix4, Vector4, Raycaster, Controls, Clock, Sphere, MathUtils, Box3, Color, AmbientLight, DirectionalLight, HemisphereLight, MeshPhongMaterial, WebGLRenderTarget, UnsignedByteType, RGBAFormat, EdgesGeometry, OrthographicCamera, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, LoadingManager, LoaderUtils, TextureLoader, BufferAttribute, PointsMaterial, Material, Points, TriangleStripDrawMode, TriangleFanDrawMode, LineSegments, LineLoop, Group, NormalBlending, MeshStandardMaterial, PerspectiveCamera, Scene, WebGLRenderer, LinearToneMapping } from "three";
+import { Line, Vector3, BufferGeometry, Float32BufferAttribute, LineBasicMaterial, Mesh, MeshBasicMaterial, DoubleSide, EventDispatcher, MOUSE, TOUCH, Spherical, Quaternion, Vector2, Plane, Object3D, Matrix4, Vector4, Raycaster, Controls, Clock, Sphere, MathUtils, Box3, Color, AmbientLight, DirectionalLight, HemisphereLight, MeshPhongMaterial, WebGLRenderTarget, UnsignedByteType, RGBAFormat, EdgesGeometry, OrthographicCamera, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, LoadingManager, LoaderUtils, TextureLoader, BufferAttribute, PointsMaterial, Points, TriangleStripDrawMode, TriangleFanDrawMode, LineSegments, LineLoop, Group, NormalBlending, PerspectiveCamera, UniformsUtils, ShaderMaterial, AdditiveBlending, HalfFloatType, Scene, WebGLRenderer, LinearSRGBColorSpace } from "three";
 
 import { TransformControls } from "three/examples/jsm/controls/TransformControls.js";
 
@@ -14,6 +14,22 @@ import { LineMaterial } from "three/examples/jsm/lines/LineMaterial.js";
 
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 
+import { mergeGeometries } from "three/examples/jsm/utils/BufferGeometryUtils.js";
+
+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 { Pass, FullScreenQuad } from "three/examples/jsm/postprocessing/Pass.js";
+
+import { CopyShader } from "three/examples/jsm/shaders/CopyShader.js";
+
+import { OutputPass } from "three/examples/jsm/postprocessing/OutputPass.js";
+
 import { EventEmitter2 } from "@inweb/eventemitter2";
 
 import { Markup } from "@inweb/markup";
@@ -1564,16 +1580,16 @@ function zoomTo(viewer, box) {
 }
 
 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(-.5, -.5, 1).normalize(),
-    se: new Vector3(.5, -.5, 1).normalize(),
-    ne: new Vector3(.5, .5, 1).normalize(),
-    nw: new Vector3(-.5, .5, 1).normalize()
+    bottom: new Vector3(0, -1, 0),
+    top: new Vector3(0, 1, 0),
+    ns: new Vector3(-.5, 1, -.5).normalize(),
+    sw: new Vector3(.5, 1, -.5).normalize(),
+    nw: new Vector3(.5, 1, .5).normalize(),
+    se: new Vector3(-.5, 1, .5).normalize()
 };
 
 function setDefaultViewPosition(viewer, position) {
@@ -1835,34 +1851,37 @@ class BackgroundComponent {
 class CameraComponent {
     constructor(viewer) {
         this.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 sceneCamera;
+            let camera;
             this.viewer.scene.traverse((object => {
-                if (object.isCamera) if (!sceneCamera) sceneCamera = object; else if (object.isPerspectiveCamera && sceneCamera.isOrthographicCamera) sceneCamera = object;
+                if (object.isCamera) 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);
+            if (camera) {
+                camera.isDefaultCamera = true;
+                camera.scale.set(1, 1, 1);
+                this.viewer.camera = camera;
+                this.viewer.renderPass.camera = camera;
+                this.viewer.helpersPass.camera = camera;
+                this.viewer.ssaaRenderPass.camera = camera;
+            } else {
+                camera = this.viewer.camera;
             }
-            const camera = this.viewer.camera;
             if (camera.isPerspectiveCamera) {
                 camera.aspect = aspect;
-                camera.near = extentsSize / 100;
-                camera.far = extentsSize * 100;
+                camera.near = extentsSize / 1e3;
+                camera.far = extentsSize * 1e3;
                 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 * 1e3;
                 camera.updateProjectionMatrix();
             }
-            this.viewer.target.copy(extentsCenter);
-            if (!sceneCamera) {
+            if (!camera.isDefaultCamera) {
                 this.viewer.executeCommand("setDefaultViewPosition");
             }
         };
@@ -1880,6 +1899,7 @@ class ExtentsComponent {
             const extents = new Box3;
             this.viewer.models.forEach((model => model.getExtents(extents)));
             this.viewer.extents.copy(extents);
+            extents.getCenter(this.viewer.target);
         };
         this.viewer = viewer;
         this.viewer.addEventListener("databasechunk", this.syncExtents);
@@ -1923,7 +1943,7 @@ class LightComponent {
             this.viewer.scene.add(this.hemisphereLight);
         };
         this.viewer = viewer;
-        this.ambientLight = new AmbientLight(16777215, 1);
+        this.ambientLight = new AmbientLight(16777215, 1.5);
         this.directionalLight = new DirectionalLight(16777215, 1);
         this.frontLight = new DirectionalLight(16777215, 1.25);
         this.hemisphereLight = new HemisphereLight(16777215, 4473924, 1.25);
@@ -1979,6 +1999,7 @@ class ResizeCanvasComponent {
                 camera.updateProjectionMatrix();
             }
             this.viewer.renderer.setSize(width, height, true);
+            this.viewer.composer.setSize(width, height);
             this.viewer.update(true);
             this.viewer.emitEvent({
                 type: "resize",
@@ -2045,13 +2066,8 @@ class HighlighterUtils {
 class HighlighterComponent {
     constructor(viewer) {
         this.geometryEnd = () => {
-            const {facesColor: facesColor, facesTransparancy: facesTransparancy, edgesColor: edgesColor, edgesOverlap: edgesOverlap, facesOverlap: 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: 2236962,
                 shininess: 10,
                 reflectivity: .05,
@@ -2059,43 +2075,25 @@ class HighlighterComponent {
                 polygonOffsetFactor: 1,
                 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: .8,
-                depthTest: !edgesOverlap,
-                depthWrite: !edgesOverlap,
                 resolution: new Vector2(window.innerWidth, window.innerHeight)
             });
+            this.syncHighlightColors();
         };
         this.optionsChange = () => {
-            const {facesColor: facesColor, facesTransparancy: facesTransparancy, edgesColor: edgesColor, edgesVisibility: edgesVisibility, edgesOverlap: edgesOverlap, facesOverlap: facesOverlap} = 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.outlineMaterial.color.setRGB(edgesColor.r / 255, edgesColor.g / 255, edgesColor.b / 255);
-            this.outlineMaterial.depthTest = !edgesOverlap;
-            this.outlineMaterial.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.viewer.selected.forEach((selected => {
-                const wireframe = selected.userData.highlightWireframe;
-                if (wireframe) wireframe.visible = edgesVisibility;
-            }));
+            this.syncHighlightColors();
             this.viewer.update();
         };
         this.viewer = viewer;
@@ -2123,13 +2121,13 @@ class HighlighterComponent {
         const {edgesVisibility: edgesVisibility} = this.viewer.options;
         if (!Array.isArray(objects)) objects = [ objects ];
         if (!objects.length) return;
-        objects.forEach((object => {
+        objects.filter((object => !object.userData.isEdge)).forEach((object => {
             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);
+                const wireframe = new Wireframe(lineGeometry, this.lineGlowMaterial);
                 wireframe.position.copy(object.position);
                 wireframe.rotation.copy(object.rotation);
                 wireframe.scale.copy(object.scale);
@@ -2137,12 +2135,12 @@ class HighlighterComponent {
                 object.parent.add(wireframe);
                 object.userData.highlightWireframe = wireframe;
                 object.userData.originalMaterial = object.material;
-                object.material = this.highlightLineMaterial;
+                object.material = this.lineMaterial;
                 object.isHighlighted = true;
             } else if (object.isMesh) {
-                const edgesGeometry = new EdgesGeometry(object.geometry, 60);
+                const edgesGeometry = new EdgesGeometry(object.geometry, 89);
                 const lineGeometry = (new LineSegmentsGeometry).fromEdgesGeometry(edgesGeometry);
-                const wireframe = new Wireframe(lineGeometry, this.outlineMaterial);
+                const wireframe = new Wireframe(lineGeometry, this.edgesMaterial);
                 wireframe.position.copy(object.position);
                 wireframe.rotation.copy(object.rotation);
                 wireframe.scale.copy(object.scale);
@@ -2150,7 +2148,7 @@ class HighlighterComponent {
                 object.parent.add(wireframe);
                 object.userData.highlightWireframe = wireframe;
                 object.userData.originalMaterial = object.material;
-                object.material = this.highlightMaterial;
+                object.material = this.facesMaterial;
                 object.isHighlighted = true;
             }
         }));
@@ -2167,10 +2165,30 @@ class HighlighterComponent {
             delete object.userData.highlightWireframe;
         }));
     }
+    syncHighlightColors() {
+        const {facesColor: facesColor, facesTransparancy: facesTransparancy, facesOverlap: facesOverlap} = this.viewer.options;
+        const {edgesColor: edgesColor, edgesVisibility: edgesVisibility, edgesOverlap: edgesOverlap} = this.viewer.options;
+        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.edgesMaterial.color.setRGB(edgesColor.r / 255, edgesColor.g / 255, edgesColor.b / 255);
+        this.edgesMaterial.depthTest = !edgesOverlap;
+        this.edgesMaterial.depthWrite = !edgesOverlap;
+        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;
+        }));
+    }
     viewerResize(event) {
-        var _a, _b;
+        var _a, _b, _c;
         (_a = this.renderTarget) === null || _a === undefined ? undefined : _a.setSize(event.width, event.height);
-        (_b = this.outlineMaterial) === null || _b === undefined ? undefined : _b.resolution.set(event.width, event.height);
+        (_b = this.edgesMaterial) === null || _b === undefined ? undefined : _b.resolution.set(event.width, event.height);
+        (_c = this.lineGlowMaterial) === null || _c === undefined ? undefined : _c.resolution.set(event.width, event.height);
     }
 }
 
@@ -2362,14 +2380,17 @@ class WCSHelper extends Object3D {
     render(renderer) {
         this.quaternion.copy(this.camera.quaternion).invert();
         this.updateMatrixWorld();
-        const clippingPlanes = renderer.clippingPlanes;
-        const viewport = renderer.getViewport(new Vector4);
-        renderer.setViewport(this.position.x, this.position.y, this.size, this.size);
+        const oldAutoClear = renderer.autoClear;
+        const oldClippingPlanes = renderer.clippingPlanes;
+        const oldViewport = renderer.getViewport(new Vector4);
+        renderer.autoClear = false;
         renderer.clippingPlanes = [];
+        renderer.setViewport(this.position.x, this.position.y, this.size, this.size);
         renderer.clearDepth();
         renderer.render(this, this.orthoCamera);
-        renderer.setViewport(viewport);
-        renderer.clippingPlanes = clippingPlanes;
+        renderer.setViewport(oldViewport);
+        renderer.clippingPlanes = oldClippingPlanes;
+        renderer.autoClear = oldAutoClear;
     }
 }
 
@@ -2638,23 +2659,28 @@ class DynamicModelImpl extends ModelImpl {
         const handlesSet = new Set(handles);
         const objects = [];
         handlesSet.forEach((handle => {
-            const handles = this.gltfLoader.handleToObjects.get(handle) || [];
+            const handle2 = `${this.modelId}_${handle}`;
+            const handles = this.gltfLoader.handleToObjects.get(handle2) || [];
             objects.push(...Array.from(handles));
         }));
         return objects;
     }
+    getHandlesByObjects(objects) {
+        const handles = super.getHandlesByObjects(objects);
+        return handles.map((x => x.split("_").pop()));
+    }
     hideObjects(objects) {
-        const handles = this.getHandlesByObjects(objects);
+        const handles = super.getHandlesByObjects(objects);
         this.gltfLoader.hideObjects(handles);
         return this;
     }
     isolateObjects(objects) {
-        const handles = this.getHandlesByObjects(objects);
+        const handles = super.getHandlesByObjects(objects);
         this.gltfLoader.isolateObjects(new Set(handles));
         return this;
     }
     showObjects(objects) {
-        const handles = this.getHandlesByObjects(objects);
+        const handles = super.getHandlesByObjects(objects);
         this.gltfLoader.showObjects(handles);
         return this;
     }
@@ -2709,6 +2735,7 @@ class GltfStructure {
         this.textureLoader = new TextureLoader;
         this.materials = new Map;
         this.textureCache = new Map;
+        this.materialCache = new Map;
     }
     async initialize(loadController) {
         this.json = await loadController.loadJson();
@@ -2983,17 +3010,24 @@ class GltfStructure {
         }
         await Promise.all(texturePromises);
     }
-    async loadMaterials() {
+    loadMaterials() {
         if (!this.json.materials) return this.materials;
         for (let i = 0; i < this.json.materials.length; i++) {
             const materialDef = this.json.materials[i];
-            const material = await this.createMaterial(materialDef);
-            material.name = materialDef.name;
-            this.materials.set(i, material);
+            const materialCacheKey = `material_${i}`;
+            this.materialCache.set(materialCacheKey, {
+                mesh: this.createMaterial(materialDef, GL_CONSTANTS.TRIANGLES),
+                points: this.createMaterial(materialDef, GL_CONSTANTS.POINTS),
+                lines: this.createMaterial(materialDef, GL_CONSTANTS.LINES)
+            });
+            this.materialCache.get(materialCacheKey).mesh.name = materialDef.name;
+            this.materialCache.get(materialCacheKey).points.name = materialDef.name;
+            this.materialCache.get(materialCacheKey).lines.name = materialDef.name;
+            this.materials.set(i, this.materialCache.get(materialCacheKey).mesh);
         }
         return this.materials;
     }
-    createMaterial(materialDef) {
+    createMaterial(materialDef, primitiveMode = undefined) {
         const params = {};
         if (materialDef.pbrMetallicRoughness) {
             const pbr = materialDef.pbrMetallicRoughness;
@@ -3006,27 +3040,50 @@ class GltfStructure {
                 params.map = this.textureCache.get(pbr.baseColorTexture.index);
             }
         }
-        params.specular = 2236962;
-        params.shininess = 10;
-        params.reflectivity = .05;
-        params.polygonOffset = true;
-        params.polygonOffsetFactor = 1;
-        params.polygonOffsetUnits = 1;
         if (materialDef.emissiveFactor) {
             params.emissive = (new Color).fromArray(materialDef.emissiveFactor);
         }
-        if (materialDef.normalTexture) {
-            params.normalMap = this.textureCache.get(materialDef.normalTexture.index);
-        }
         if (materialDef.alphaMode === "BLEND") {
             params.transparent = true;
         }
         if (materialDef.doubleSided) {
             params.side = DoubleSide;
         }
-        const material = new MeshPhongMaterial(params);
+        let material;
+        if (primitiveMode === GL_CONSTANTS.POINTS) {
+            params.sizeAttenuation = false;
+            material = new PointsMaterial(params);
+            material.sizeAttenuation = false;
+        } else if (primitiveMode === GL_CONSTANTS.LINES || primitiveMode === GL_CONSTANTS.LINE_STRIP || primitiveMode === GL_CONSTANTS.LINE_LOOP) {
+            material = new LineBasicMaterial(params);
+        } else {
+            params.specular = 2236962;
+            params.shininess = 10;
+            params.reflectivity = .05;
+            params.polygonOffset = true;
+            params.polygonOffsetFactor = 1;
+            params.polygonOffsetUnits = 1;
+            if (materialDef.normalTexture) {
+                params.normalMap = this.textureCache.get(materialDef.normalTexture.index);
+            }
+            material = new MeshPhongMaterial(params);
+        }
         return material;
     }
+    getCachedMaterial(materialIndex, primitiveMode) {
+        const materialCacheKey = `material_${materialIndex}`;
+        const materialCache = this.materialCache.get(materialCacheKey);
+        if (materialCache) {
+            if (primitiveMode === GL_CONSTANTS.POINTS) {
+                return materialCache.points;
+            } else if (primitiveMode === GL_CONSTANTS.LINES || primitiveMode === GL_CONSTANTS.LINE_STRIP || primitiveMode === GL_CONSTANTS.LINE_LOOP) {
+                return materialCache.lines;
+            } else {
+                return materialCache.mesh;
+            }
+        }
+        return null;
+    }
     disposeMaterials() {
         this.textureCache.forEach((texture => texture.dispose()));
         this.textureCache.clear();
@@ -3044,6 +3101,30 @@ class GltfStructure {
             material.dispose();
         }));
         this.materials.clear();
+        this.materialCache.forEach((materialCache => {
+            if (materialCache.mesh) {
+                if (materialCache.mesh.map) materialCache.mesh.map.dispose();
+                if (materialCache.mesh.lightMap) materialCache.mesh.lightMap.dispose();
+                if (materialCache.mesh.bumpMap) materialCache.mesh.bumpMap.dispose();
+                if (materialCache.mesh.normalMap) materialCache.mesh.normalMap.dispose();
+                if (materialCache.mesh.specularMap) materialCache.mesh.specularMap.dispose();
+                if (materialCache.mesh.envMap) materialCache.mesh.envMap.dispose();
+                if (materialCache.mesh.aoMap) materialCache.mesh.aoMap.dispose();
+                if (materialCache.mesh.metalnessMap) materialCache.mesh.metalnessMap.dispose();
+                if (materialCache.mesh.roughnessMap) materialCache.mesh.roughnessMap.dispose();
+                if (materialCache.mesh.emissiveMap) materialCache.mesh.emissiveMap.dispose();
+                materialCache.mesh.dispose();
+            }
+            if (materialCache.points) {
+                if (materialCache.points.map) materialCache.points.map.dispose();
+                materialCache.points.dispose();
+            }
+            if (materialCache.lines) {
+                if (materialCache.lines.map) materialCache.lines.map.dispose();
+                materialCache.lines.dispose();
+            }
+        }));
+        this.materialCache.clear();
     }
     estimateNodeSize(meshIndex) {
         if (!this.json.meshes) return 0;
@@ -3073,156 +3154,6 @@ class GltfStructure {
     }
 }
 
-function mergeGeometries(geometries, useGroups = false) {
-    const isIndexed = geometries[0].index !== null;
-    const attributesUsed = new Set(Object.keys(geometries[0].attributes));
-    const morphAttributesUsed = new Set(Object.keys(geometries[0].morphAttributes));
-    const attributes = {};
-    const morphAttributes = {};
-    const morphTargetsRelative = geometries[0].morphTargetsRelative;
-    const mergedGeometry = new BufferGeometry;
-    let offset = 0;
-    for (let i = 0; i < geometries.length; ++i) {
-        const geometry = geometries[i];
-        let attributesCount = 0;
-        if (isIndexed !== (geometry.index !== null)) {
-            console.error("THREE.BufferGeometryUtils: .mergeGeometries() failed with geometry at index " + i + ". All geometries must have compatible attributes; make sure index attribute exists among all geometries, or in none of them.");
-            return null;
-        }
-        for (const name in geometry.attributes) {
-            if (!attributesUsed.has(name)) {
-                console.error("THREE.BufferGeometryUtils: .mergeGeometries() failed with geometry at index " + i + '. All geometries must have compatible attributes; make sure "' + name + '" attribute exists among all geometries, or in none of them.');
-                return null;
-            }
-            if (attributes[name] === undefined) attributes[name] = [];
-            attributes[name].push(geometry.attributes[name]);
-            attributesCount++;
-        }
-        if (attributesCount !== attributesUsed.size) {
-            console.error("THREE.BufferGeometryUtils: .mergeGeometries() failed with geometry at index " + i + ". Make sure all geometries have the same number of attributes.");
-            return null;
-        }
-        if (morphTargetsRelative !== geometry.morphTargetsRelative) {
-            console.error("THREE.BufferGeometryUtils: .mergeGeometries() failed with geometry at index " + i + ". .morphTargetsRelative must be consistent throughout all geometries.");
-            return null;
-        }
-        for (const name in geometry.morphAttributes) {
-            if (!morphAttributesUsed.has(name)) {
-                console.error("THREE.BufferGeometryUtils: .mergeGeometries() failed with geometry at index " + i + ".  .morphAttributes must be consistent throughout all geometries.");
-                return null;
-            }
-            if (morphAttributes[name] === undefined) morphAttributes[name] = [];
-            morphAttributes[name].push(geometry.morphAttributes[name]);
-        }
-        if (useGroups) {
-            let count;
-            if (isIndexed) {
-                count = geometry.index.count;
-            } else if (geometry.attributes.position !== undefined) {
-                count = geometry.attributes.position.count;
-            } else {
-                console.error("THREE.BufferGeometryUtils: .mergeGeometries() failed with geometry at index " + i + ". The geometry must have either an index or a position attribute");
-                return null;
-            }
-            mergedGeometry.addGroup(offset, count, i);
-            offset += count;
-        }
-    }
-    if (isIndexed) {
-        let indexOffset = 0;
-        const mergedIndex = [];
-        for (let i = 0; i < geometries.length; ++i) {
-            const index = geometries[i].index;
-            for (let j = 0; j < index.count; ++j) {
-                mergedIndex.push(index.getX(j) + indexOffset);
-            }
-            indexOffset += geometries[i].attributes.position.count;
-        }
-        mergedGeometry.setIndex(mergedIndex);
-    }
-    for (const name in attributes) {
-        const mergedAttribute = mergeAttributes(attributes[name]);
-        if (!mergedAttribute) {
-            console.error("THREE.BufferGeometryUtils: .mergeGeometries() failed while trying to merge the " + name + " attribute.");
-            return null;
-        }
-        mergedGeometry.setAttribute(name, mergedAttribute);
-    }
-    for (const name in morphAttributes) {
-        const numMorphTargets = morphAttributes[name][0].length;
-        if (numMorphTargets === 0) break;
-        mergedGeometry.morphAttributes = mergedGeometry.morphAttributes || {};
-        mergedGeometry.morphAttributes[name] = [];
-        for (let i = 0; i < numMorphTargets; ++i) {
-            const morphAttributesToMerge = [];
-            for (let j = 0; j < morphAttributes[name].length; ++j) {
-                morphAttributesToMerge.push(morphAttributes[name][j][i]);
-            }
-            const mergedMorphAttribute = mergeAttributes(morphAttributesToMerge);
-            if (!mergedMorphAttribute) {
-                console.error("THREE.BufferGeometryUtils: .mergeGeometries() failed while trying to merge the " + name + " morphAttribute.");
-                return null;
-            }
-            mergedGeometry.morphAttributes[name].push(mergedMorphAttribute);
-        }
-    }
-    return mergedGeometry;
-}
-
-function mergeAttributes(attributes) {
-    let TypedArray;
-    let itemSize;
-    let normalized;
-    let gpuType = -1;
-    let arrayLength = 0;
-    for (let i = 0; i < attributes.length; ++i) {
-        const attribute = attributes[i];
-        if (TypedArray === undefined) TypedArray = attribute.array.constructor;
-        if (TypedArray !== attribute.array.constructor) {
-            console.error("THREE.BufferGeometryUtils: .mergeAttributes() failed. BufferAttribute.array must be of consistent array types across matching attributes.");
-            return null;
-        }
-        if (itemSize === undefined) itemSize = attribute.itemSize;
-        if (itemSize !== attribute.itemSize) {
-            console.error("THREE.BufferGeometryUtils: .mergeAttributes() failed. BufferAttribute.itemSize must be consistent across matching attributes.");
-            return null;
-        }
-        if (normalized === undefined) normalized = attribute.normalized;
-        if (normalized !== attribute.normalized) {
-            console.error("THREE.BufferGeometryUtils: .mergeAttributes() failed. BufferAttribute.normalized must be consistent across matching attributes.");
-            return null;
-        }
-        if (gpuType === -1) gpuType = attribute.gpuType;
-        if (gpuType !== attribute.gpuType) {
-            console.error("THREE.BufferGeometryUtils: .mergeAttributes() failed. BufferAttribute.gpuType must be consistent across matching attributes.");
-            return null;
-        }
-        arrayLength += attribute.count * itemSize;
-    }
-    const array = new TypedArray(arrayLength);
-    const result = new BufferAttribute(array, itemSize, normalized);
-    let offset = 0;
-    for (let i = 0; i < attributes.length; ++i) {
-        const attribute = attributes[i];
-        if (attribute.isInterleavedBufferAttribute) {
-            const tupleOffset = offset / itemSize;
-            for (let j = 0, l = attribute.count; j < l; j++) {
-                for (let c = 0; c < itemSize; c++) {
-                    const value = attribute.getComponent(j, c);
-                    result.setComponent(j + tupleOffset, c, value);
-                }
-            }
-        } else {
-            array.set(attribute.array, offset);
-        }
-        offset += attribute.count * itemSize;
-    }
-    if (gpuType !== undefined) {
-        result.gpuType = gpuType;
-    }
-    return result;
-}
-
 class DynamicGltfLoader {
     constructor(camera, scene, renderer) {
         this.camera = camera;
@@ -3506,18 +3437,17 @@ class DynamicGltfLoader {
                 }
                 let material;
                 if (primitive.material !== undefined) {
-                    material = node.structure.materials.get(primitive.material) || this.createDefaultMaterial();
+                    material = node.structure.getCachedMaterial(primitive.material, primitive.mode);
+                    if (!material) {
+                        const materialDef = node.structure.json.materials[primitive.material];
+                        material = node.structure.createMaterial(materialDef, primitive.mode);
+                    }
                 } else {
-                    material = this.createDefaultMaterial();
+                    material = this.createDefaultMaterial(primitive.mode);
                 }
                 let mesh;
                 if (primitive.mode === GL_CONSTANTS.POINTS) {
-                    const pointsMaterial = new PointsMaterial;
-                    Material.prototype.copy.call(pointsMaterial, material);
-                    pointsMaterial.color.copy(material.color);
-                    pointsMaterial.map = material.map;
-                    pointsMaterial.sizeAttenuation = false;
-                    mesh = new Points(geometry, pointsMaterial);
+                    mesh = new Points(geometry, material);
                 } else if (primitive.mode === GL_CONSTANTS.TRIANGLES || primitive.mode === GL_CONSTANTS.TRIANGLE_STRIP || primitive.mode === GL_CONSTANTS.TRIANGLE_FAN || primitive.mode === undefined) {
                     mesh = new Mesh(geometry, material);
                     if (primitive.mode === GL_CONSTANTS.TRIANGLE_STRIP) {
@@ -3761,6 +3691,9 @@ class DynamicGltfLoader {
             } else {
                 this.edgeNodes.push(uniqueNodeId);
             }
+            if (meshDef.extras && meshDef.extras.handle) {
+                handle = `${structure.id}_${meshDef.extras.handle}`;
+            }
             this.nodes.set(uniqueNodeId, {
                 position: nodeGroup ? nodeGroup.position.clone() : (new Vector3).setFromMatrixPosition(nodeMatrix),
                 nodeIndex: nodeId,
@@ -3861,12 +3794,12 @@ class DynamicGltfLoader {
             }
         }));
     }
-    createDefaultMaterial() {
-        if (this.currentPrimitiveMode === GL_CONSTANTS.POINTS) {
+    createDefaultMaterial(primitiveMode = undefined) {
+        if (primitiveMode === GL_CONSTANTS.POINTS) {
             return new PointsMaterial({
                 color: new Color(8421504),
                 size: .05,
-                sizeAttenuation: true,
+                sizeAttenuation: false,
                 alphaTest: .5,
                 transparent: true,
                 vertexColors: false,
@@ -3874,11 +3807,21 @@ class DynamicGltfLoader {
                 depthWrite: false,
                 depthTest: true
             });
+        } else if (primitiveMode === GL_CONSTANTS.LINES || primitiveMode === GL_CONSTANTS.LINE_STRIP || primitiveMode === GL_CONSTANTS.LINE_LOOP) {
+            return new LineBasicMaterial({
+                color: 8421504,
+                linewidth: 1,
+                alphaTest: .1,
+                depthTest: true,
+                depthWrite: true,
+                transparent: true,
+                opacity: 1
+            });
         } else {
-            return new MeshStandardMaterial({
+            return new MeshPhongMaterial({
                 color: 8421504,
-                metalness: 0,
-                roughness: 1,
+                specular: 2236962,
+                shininess: 10,
                 side: DoubleSide
             });
         }
@@ -4670,11 +4613,13 @@ class GLTFCloudDynamicLoader {
         const scene = new Group;
         this.gltfLoader = new DynamicGltfLoader(this.viewer.camera, scene, this.viewer.renderer);
         this.gltfLoader.memoryLimit = this.viewer.options.memoryLimit;
+        this.gltfLoader.setVisibleEdges(this.viewer.options.edgeModel);
         this.gltfLoader.addEventListener("databasechunk", (data => {
             const modelImpl = new DynamicModelImpl(scene);
             modelImpl.loader = this;
-            modelImpl.gltfLoader = this.gltfLoader;
             modelImpl.viewer = this.viewer;
+            modelImpl.gltfLoader = this.gltfLoader;
+            modelImpl.modelId = model.id;
             this.viewer.scene.add(scene);
             this.viewer.models.push(modelImpl);
             this.viewer.syncOptions();
@@ -4731,7 +4676,7 @@ class GLTFCloudDynamicLoader {
             },
             baseUrl: () => Promise.resolve(`${model.httpClient.serverUrl}${model.path}/`)
         };
-        const structure = new GltfStructure(1);
+        const structure = new GltfStructure(model.id);
         await structure.initialize(loadController);
         await this.gltfLoader.loadStructure(structure);
         await this.gltfLoader.loadNodes();
@@ -4748,6 +4693,120 @@ loaders.registerLoader("gltf-file", (viewer => new GLTFFileLoader(viewer)));
 
 loaders.registerLoader("gltf-cloud", (viewer => new GLTFCloudDynamicLoader(viewer)));
 
+class SSAARenderPass extends Pass {
+    constructor(scenes, camera, clearColor = 0, clearAlpha = 0) {
+        super();
+        this.scenes = Array.isArray(scenes) ? scenes : [ scenes ];
+        this.camera = camera;
+        this.sampleLevel = 2;
+        this.unbiased = true;
+        this.stencilBuffer = false;
+        this.clearColor = clearColor;
+        this.clearAlpha = clearAlpha;
+        this._sampleRenderTarget = null;
+        this._oldClearColor = new Color;
+        this._copyUniforms = UniformsUtils.clone(CopyShader.uniforms);
+        this._copyMaterial = new ShaderMaterial({
+            uniforms: this._copyUniforms,
+            vertexShader: CopyShader.vertexShader,
+            fragmentShader: CopyShader.fragmentShader,
+            transparent: true,
+            depthTest: false,
+            depthWrite: false,
+            premultipliedAlpha: true,
+            blending: AdditiveBlending
+        });
+        this._fsQuad = new FullScreenQuad(this._copyMaterial);
+    }
+    dispose() {
+        if (this._sampleRenderTarget) {
+            this._sampleRenderTarget.dispose();
+            this._sampleRenderTarget = null;
+        }
+        this._copyMaterial.dispose();
+        this._fsQuad.dispose();
+    }
+    setSize(width, height) {
+        if (this._sampleRenderTarget) this._sampleRenderTarget.setSize(width, height);
+    }
+    render(renderer, writeBuffer, readBuffer, deltaTime, maskActive) {
+        if (!this._sampleRenderTarget) {
+            this._sampleRenderTarget = new WebGLRenderTarget(readBuffer.width, readBuffer.height, {
+                type: HalfFloatType,
+                stencilBuffer: this.stencilBuffer
+            });
+            this._sampleRenderTarget.texture.name = "SSAAMultiRenderPass.sample";
+        }
+        const jitterOffsets = _JitterVectors[Math.max(0, Math.min(this.sampleLevel, 5))];
+        const autoClear = renderer.autoClear;
+        renderer.autoClear = false;
+        renderer.getClearColor(this._oldClearColor);
+        const oldClearAlpha = renderer.getClearAlpha();
+        const baseSampleWeight = 1 / jitterOffsets.length;
+        const roundingRange = 1 / 32;
+        this._copyUniforms["tDiffuse"].value = this._sampleRenderTarget.texture;
+        const viewOffset = {
+            fullWidth: readBuffer.width,
+            fullHeight: readBuffer.height,
+            offsetX: 0,
+            offsetY: 0,
+            width: readBuffer.width,
+            height: readBuffer.height
+        };
+        const originalViewOffset = Object.assign({}, this.camera.view);
+        if (originalViewOffset.enabled) Object.assign(viewOffset, originalViewOffset);
+        for (let i = 0; i < jitterOffsets.length; i++) {
+            const jitterOffset = jitterOffsets[i];
+            if (this.camera.setViewOffset) {
+                this.camera.setViewOffset(viewOffset.fullWidth, viewOffset.fullHeight, viewOffset.offsetX + jitterOffset[0] * .0625, viewOffset.offsetY + jitterOffset[1] * .0625, viewOffset.width, viewOffset.height);
+            }
+            let sampleWeight = baseSampleWeight;
+            if (this.unbiased) {
+                const uniformCenteredDistribution = -.5 + (i + .5) / jitterOffsets.length;
+                sampleWeight += roundingRange * uniformCenteredDistribution;
+            }
+            this._copyUniforms["opacity"].value = sampleWeight;
+            renderer.setClearColor(this.clearColor, this.clearAlpha);
+            renderer.setRenderTarget(this._sampleRenderTarget);
+            renderer.clear();
+            this.scenes.forEach((scene => renderer.render(scene, this.camera)));
+            renderer.setRenderTarget(this.renderToScreen ? null : writeBuffer);
+            if (i === 0) {
+                renderer.setClearColor(0, 0);
+                renderer.clear();
+            }
+            this._fsQuad.render(renderer);
+        }
+        if (this.camera.setViewOffset && originalViewOffset.enabled) {
+            this.camera.setViewOffset(originalViewOffset.fullWidth, originalViewOffset.fullHeight, originalViewOffset.offsetX, originalViewOffset.offsetY, originalViewOffset.width, originalViewOffset.height);
+        } else if (this.camera.clearViewOffset) {
+            this.camera.clearViewOffset();
+        }
+        renderer.autoClear = autoClear;
+        renderer.setClearColor(this._oldClearColor, oldClearAlpha);
+    }
+}
+
+const _JitterVectors = [ [ [ 0, 0 ] ], [ [ 4, 4 ], [ -4, -4 ] ], [ [ -2, -6 ], [ 6, -2 ], [ -6, 2 ], [ 2, 6 ] ], [ [ 1, -3 ], [ -1, 3 ], [ 5, 1 ], [ -3, -5 ], [ -5, 5 ], [ -7, -1 ], [ 3, 7 ], [ 7, -7 ] ], [ [ 1, 1 ], [ -1, -3 ], [ -3, 2 ], [ 4, -1 ], [ -5, -2 ], [ 2, 5 ], [ 5, 3 ], [ 3, -5 ], [ -2, 6 ], [ 0, -7 ], [ -4, -6 ], [ -6, 4 ], [ -8, 0 ], [ 7, -4 ], [ 6, 7 ], [ -7, -8 ] ], [ [ -4, -7 ], [ -7, -5 ], [ -3, -5 ], [ -5, -4 ], [ -1, -4 ], [ -2, -2 ], [ -6, -1 ], [ -4, 0 ], [ -7, 1 ], [ -1, 2 ], [ -6, 3 ], [ -3, 3 ], [ -7, 6 ], [ -3, 6 ], [ -5, 7 ], [ -1, 7 ], [ 5, -7 ], [ 1, -6 ], [ 6, -5 ], [ 4, -4 ], [ 2, -3 ], [ 7, -2 ], [ 1, -1 ], [ 4, -1 ], [ 2, 1 ], [ 6, 2 ], [ 0, 4 ], [ 4, 4 ], [ 2, 5 ], [ 7, 5 ], [ 5, 6 ], [ 3, 7 ] ] ];
+
+class Helpers extends Scene {
+    constructor() {
+        super(...arguments);
+        this.oldAutoClear = false;
+        this.oldClippingPlanes = [];
+    }
+    onBeforeRender(renderer) {
+        this.oldAutoClear = renderer.autoClear;
+        this.oldClippingPlanes = renderer.clippingPlanes;
+        renderer.autoClear = false;
+        renderer.clippingPlanes = [];
+    }
+    onAfterRender(renderer) {
+        renderer.clippingPlanes = this.oldClippingPlanes;
+        renderer.autoClear = this.oldAutoClear;
+    }
+}
+
 class Viewer extends EventEmitter2 {
     constructor(client) {
         super();
@@ -4782,7 +4841,7 @@ class Viewer extends EventEmitter2 {
     initialize(canvas, onProgress) {
         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;
         const rect = canvas.parentElement.getBoundingClientRect();
@@ -4800,11 +4859,26 @@ class Viewer extends EventEmitter2 {
             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.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)));
         this._markup.initialize(this.canvas, this.canvasEvents, this, this);
@@ -4846,11 +4920,25 @@ class Viewer extends EventEmitter2 {
             this.canvasEvents.forEach((x => this.canvas.removeEventListener(x, this.canvaseventlistener)));
             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;
     }
     isInitialized() {
@@ -4858,28 +4946,27 @@ class Viewer extends EventEmitter2 {
     }
     update(force = false) {
         this.renderNeeded = true;
-        if (force) this.render(performance.now());
+        if (force) this.render();
         this.emitEvent({
             type: "update",
             data: force
         });
     }
-    render(time) {
+    render(time, force = false) {
         var _a, _b;
-        if (!this.renderNeeded) return;
         if (!this.renderer) return;
-        this.renderNeeded = false;
-        this.renderer.setViewport(0, 0, this.canvas.offsetWidth, this.canvas.offsetHeight);
-        this.renderer.autoClear = true;
-        this.renderer.render(this.scene, this.camera);
-        const clippingPlanes = this.renderer.clippingPlanes;
-        this.renderer.clippingPlanes = [];
-        this.renderer.autoClear = false;
-        this.renderer.render(this.helpers, this.camera);
-        this.renderer.clippingPlanes = clippingPlanes;
-        (_b = (_a = this._activeDragger) === null || _a === undefined ? undefined : _a.updatePreview) === null || _b === undefined ? undefined : _b.call(_a);
+        if (!(this.renderNeeded || force)) return;
+        if (!time) time = performance.now();
         const deltaTime = (time - this.renderTime) / 1e3;
         this.renderTime = time;
+        this.renderNeeded = false;
+        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);
+        }
+        (_b = (_a = this._activeDragger) === null || _a === undefined ? undefined : _a.updatePreview) === null || _b === undefined ? undefined : _b.call(_a);
         this.emitEvent({
             type: "render",
             time: time,
@@ -4970,6 +5057,10 @@ class Viewer extends EventEmitter2 {
         this.loaders = [];
         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();
         this.syncOptions();
@@ -4980,7 +5071,15 @@ class Viewer extends EventEmitter2 {
         });
         return this;
     }
-    syncOptions(options = this.options) {}
+    syncOptions(options = this.options) {
+        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() {
         if (!this.renderer) return;
         this._markup.syncOverlay();
@@ -5116,19 +5215,23 @@ class Viewer extends EventEmitter2 {
                 const extentsSize = this.extents.getBoundingSphere(new Sphere).radius * 2;
                 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;
             }
         };
         const setPerspectiveCamera = perspective_camera => {
@@ -5136,16 +5239,20 @@ class Viewer extends EventEmitter2 {
                 const extentsSize = this.extents.getBoundingSphere(new Sphere).radius * 2;
                 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;
             }
         };
         const setClippingPlanes = clipping_planes => {