@shapediver/viewer.rendering-engine.rendering-engine-threejs 3.9.0 → 3.9.2

package/dist/managers/PostProcessingManager.js

@@ -33,20 +33,20 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PostProcessingManager = void 0;
+const viewer_shared_services_1 = require("@shapediver/viewer.shared.services");
+const viewer_shared_types_1 = require("@shapediver/viewer.shared.types");
+const gl_matrix_1 = require("gl-matrix");
+const postprocessing_1 = require("postprocessing");
 const THREE = __importStar(require("three"));
 const IPostProcessingEffectDefinitions_1 = require("../interfaces/IPostProcessingEffectDefinitions");
-const postprocessing_1 = require("postprocessing");
-const viewer_shared_services_1 = require("@shapediver/viewer.shared.services");
-const GodRaysManager_1 = require("./postprocessing/GodRaysManager");
 const HBAOEffect_1 = require("./postprocessing/ao/hbao/HBAOEffect");
-const viewer_shared_types_1 = require("@shapediver/viewer.shared.types");
-const OutlineManager_1 = require("./postprocessing/OutlineManager");
 const PoissionDenoisePass_1 = require("./postprocessing/ao/poissionDenoise/PoissionDenoisePass");
-const SelectiveBloomManager_1 = require("./postprocessing/SelectiveBloomManager");
-const SSAARenderPass_1 = require("./postprocessing/SSAARenderPass");
 const SSAOEffect_1 = require("./postprocessing/ao/ssao/SSAOEffect");
-const gl_matrix_1 = require("gl-matrix");
 const ToneMappingEffect_1 = require("./postprocessing/effects/tone-mapping/ToneMappingEffect");
+const GodRaysManager_1 = require("./postprocessing/GodRaysManager");
+const OutlineManager_1 = require("./postprocessing/OutlineManager");
+const SelectiveBloomManager_1 = require("./postprocessing/SelectiveBloomManager");
+const SSAARenderPass_1 = require("./postprocessing/SSAARenderPass");
 class PostProcessingManager {
     // #endregion Properties (23)
     // #region Constructors (1)
@@ -59,7 +59,7 @@ class PostProcessingManager {
         this._uuidGenerator = viewer_shared_services_1.UuidGenerator.instance;
         this._antiAliasingTechnique = IPostProcessingEffectDefinitions_1.ANTI_ALIASING_TECHNIQUE.SMAA;
         this._antiAliasingTechniqueMobile = IPostProcessingEffectDefinitions_1.ANTI_ALIASING_TECHNIQUE.FXAA;
-        this._currentCameraId = '';
+        this._currentCameraId = "";
         this._effectDefinitions = [];
         this._effects = [];
         this._enablePostProcessingOnMobile = true;
@@ -160,7 +160,8 @@ class PostProcessingManager {
                 break;
             case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.SELECTIVE_BLOOM:
                 if (!this._selectiveBloomManagers[token])
-                    this._selectiveBloomManagers[token] = new SelectiveBloomManager_1.SelectiveBloomManager(this._renderingEngine);
+                    this._selectiveBloomManagers[token] =
+                        new SelectiveBloomManager_1.SelectiveBloomManager(this._renderingEngine);
                 break;
             default:
         }
@@ -169,13 +170,18 @@ class PostProcessingManager {
     }
     applySettings(settingsEngine) {
         this._suspendEffectPassUpdate = true;
-        this.antiAliasingTechnique = settingsEngine.settings.postprocessing.antiAliasingTechnique;
-        this.antiAliasingTechniqueMobile = settingsEngine.settings.postprocessing.antiAliasingTechniqueMobile;
+        this.antiAliasingTechnique = settingsEngine.settings.postprocessing
+            .antiAliasingTechnique;
+        this.antiAliasingTechniqueMobile = settingsEngine.settings
+            .postprocessing
+            .antiAliasingTechniqueMobile;
         // we don't allow SSAA on mobile devices anymore as it is too slow
         if (this._antiAliasingTechniqueMobile === IPostProcessingEffectDefinitions_1.ANTI_ALIASING_TECHNIQUE.SSAA)
             this._antiAliasingTechniqueMobile = IPostProcessingEffectDefinitions_1.ANTI_ALIASING_TECHNIQUE.SMAA;
-        this.enablePostProcessingOnMobile = settingsEngine.settings.postprocessing.enablePostProcessingOnMobile;
-        this.ssaaSampleLevel = settingsEngine.settings.postprocessing.ssaaSampleLevel;
+        this.enablePostProcessingOnMobile =
+            settingsEngine.settings.postprocessing.enablePostProcessingOnMobile;
+        this.ssaaSampleLevel =
+            settingsEngine.settings.postprocessing.ssaaSampleLevel;
         this._effectDefinitions = [];
         const effects = settingsEngine.settings.postprocessing.effects;
         for (let i = 0; i < effects.length; i++) {
@@ -184,8 +190,8 @@ class PostProcessingManager {
                 token,
                 definition: {
                     type: effects[i].type,
-                    properties: effects[i].properties
-                }
+                    properties: effects[i].properties,
+                },
             });
         }
         this._suspendEffectPassUpdate = false;
@@ -196,14 +202,17 @@ class PostProcessingManager {
             return;
         if (this._suspendEffectPassUpdate === true)
             return;
-        if (this._systemInfo.isMobile === true && this._enablePostProcessingOnMobile === false)
+        if (this._systemInfo.isMobile === true &&
+            this._enablePostProcessingOnMobile === false)
             return;
         if (this._manualPostProcessing)
             return;
         for (let i = 0; i < this._composer.passes.length; i++)
             this._composer.passes[i].dispose();
         this._composer.removeAllPasses();
-        const antiAliasingTechnique = this._systemInfo.isMobile === true ? this._antiAliasingTechniqueMobile : this._antiAliasingTechnique;
+        const antiAliasingTechnique = this._systemInfo.isMobile === true
+            ? this._antiAliasingTechniqueMobile
+            : this._antiAliasingTechnique;
         if (antiAliasingTechnique === IPostProcessingEffectDefinitions_1.ANTI_ALIASING_TECHNIQUE.SSAA) {
             this.addPassToEffectComposer(this._ssaaRenderPass);
         }
@@ -211,13 +220,15 @@ class PostProcessingManager {
             this.addPassToEffectComposer(this._renderPass);
         }
         // remove the effects where the tokens are not in the effectDefinitions
-        this._effects.forEach(e => e.effect.dispose());
+        this._effects.forEach((e) => e.effect.dispose());
         this._effects = [];
         for (let i = 0; i < this._effectDefinitions.length; i++) {
             switch (this._effectDefinitions[i].definition.type) {
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.BLOOM:
                     {
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this
+                            ._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
                         this._effects.push({
                             token: this._effectDefinitions[i].token,
@@ -227,63 +238,90 @@ class PostProcessingManager {
                                 luminanceSmoothing: properties.luminanceSmoothing,
                                 mipmapBlur: properties.mipmapBlur,
                                 intensity: properties.intensity,
-                                kernelSize: properties.kernelSize
-                            })
+                                kernelSize: properties.kernelSize,
+                            }),
                         });
                     }
                     break;
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.CHROMATIC_ABERRATION:
                     {
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
-                        const offsetArray = properties.offset !== undefined ? Array.isArray(properties.offset) ? properties.offset : [properties.offset.x, properties.offset.y] : undefined;
+                        const offsetArray = properties.offset !== undefined
+                            ? Array.isArray(properties.offset)
+                                ? properties.offset
+                                : [
+                                    properties.offset.x,
+                                    properties.offset.y,
+                                ]
+                            : undefined;
                         this._effects.push({
                             token: this._effectDefinitions[i].token,
                             effect: new postprocessing_1.ChromaticAberrationEffect({
                                 blendFunction: properties.blendFunction,
-                                offset: offsetArray ? new THREE.Vector2(...offsetArray) : undefined,
-                                radialModulation: properties.radialModulation !== undefined ? properties.radialModulation : false,
-                                modulationOffset: properties.modulationOffset !== undefined ? properties.modulationOffset : 0.15
-                            })
+                                offset: offsetArray
+                                    ? new THREE.Vector2(...offsetArray)
+                                    : undefined,
+                                radialModulation: properties.radialModulation !== undefined
+                                    ? properties.radialModulation
+                                    : false,
+                                modulationOffset: properties.modulationOffset !== undefined
+                                    ? properties.modulationOffset
+                                    : 0.15,
+                            }),
                         });
                     }
                     break;
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.DEPTH_OF_FIELD:
                     {
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this
+                            ._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
                         const depthOfFieldEffect = new postprocessing_1.DepthOfFieldEffect(this._renderingEngine.camera, {
                             blendFunction: properties.blendFunction,
-                            focusDistance: properties.focusDistance !== undefined ? properties.focusDistance : 0,
-                            focusRange: properties.focusRange !== undefined ? properties.focusRange : 0.01,
-                            bokehScale: properties.bokehScale !== undefined ? properties.bokehScale : 5,
-                            resolutionScale: 1
+                            focusDistance: properties.focusDistance !== undefined
+                                ? properties.focusDistance
+                                : 0,
+                            focusRange: properties.focusRange !== undefined
+                                ? properties.focusRange
+                                : 0.01,
+                            bokehScale: properties.bokehScale !== undefined
+                                ? properties.bokehScale
+                                : 5,
+                            resolutionScale: 1,
                         });
                         depthOfFieldEffect.resolution.height = 1080;
-                        depthOfFieldEffect.blurPass.kernelSize = postprocessing_1.KernelSize.HUGE;
+                        depthOfFieldEffect.blurPass.kernelSize =
+                            postprocessing_1.KernelSize.HUGE;
                         this._effects.push({
                             token: this._effectDefinitions[i].token,
-                            effect: depthOfFieldEffect
+                            effect: depthOfFieldEffect,
                         });
                     }
                     break;
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.DOT_SCREEN:
                     {
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this
+                            ._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
                         this._effects.push({
                             token: this._effectDefinitions[i].token,
                             effect: new postprocessing_1.DotScreenEffect({
                                 blendFunction: properties.blendFunction,
                                 scale: properties.scale,
-                                angle: properties.angle
-                            })
+                                angle: properties.angle,
+                            }),
                         });
                     }
                     break;
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.GOD_RAYS:
                     {
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this
+                            ._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
                         const godRaysEffect = new postprocessing_1.GodRaysEffect(this._renderingEngine.camera, new THREE.Mesh(), {
                             blendFunction: properties.blendFunction,
@@ -293,167 +331,255 @@ class PostProcessingManager {
                             exposure: properties.exposure,
                             clampMax: properties.clampMax,
                             kernelSize: properties.kernelSize,
-                            blur: properties.blur
+                            blur: properties.blur,
                         });
                         this._effects.push({
                             token: this._effectDefinitions[i].token,
-                            effect: godRaysEffect
+                            effect: godRaysEffect,
                         });
                         this._godRaysManagers[this._effectDefinitions[i].token].setEffect(godRaysEffect);
                     }
                     break;
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.GRID:
                     {
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this
+                            ._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
                         this._effects.push({
                             token: this._effectDefinitions[i].token,
                             effect: new postprocessing_1.GridEffect({
-                                blendFunction: properties.blendFunction !== undefined ? properties.blendFunction : postprocessing_1.BlendFunction.MULTIPLY,
-                                scale: properties.scale
-                            })
+                                blendFunction: properties.blendFunction !== undefined
+                                    ? properties.blendFunction
+                                    : postprocessing_1.BlendFunction.MULTIPLY,
+                                scale: properties.scale,
+                            }),
                         });
                     }
                     break;
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.HBAO:
                     {
                         // we currently do not support devices with WebGL 1: https://shapediver.atlassian.net/browse/SS-7069
-                        if (this._renderingEngine.renderer.capabilities.isWebGL2 === false)
+                        if (this._renderingEngine.renderer.capabilities
+                            .isWebGL2 === false)
                             break;
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this
+                            ._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
                         // we adjust the scene size slightly to make the factor fit our requirements
                         // with this adjusted factor, a distance value of 1 fits well as a default
                         const sceneSizeFactor = this._sceneExtents / 10.0;
                         const hbaoEffect = new HBAOEffect_1.HBAOEffect(this._composer, this._renderingEngine.camera, this._renderingEngine.scene, {
-                            resolutionScale: properties.resolutionScale !== undefined ? properties.resolutionScale : 1,
-                            spp: properties.spp !== undefined ? properties.spp : 16,
-                            distance: properties.distance !== undefined ? properties.distance * sceneSizeFactor : sceneSizeFactor,
-                            distancePower: properties.distanceIntensity !== undefined ? properties.distanceIntensity : 1,
-                            power: properties.intensity !== undefined ? properties.intensity : 2.5,
-                            bias: properties.bias !== undefined ? properties.bias : 10,
-                            thickness: properties.thickness !== undefined ? properties.thickness : 0.5,
-                            color: properties.color !== undefined ? new THREE.Color(this._converter.toHexColor(properties.color).substring(0, 7)) : new THREE.Color('black'),
-                            iterations: properties.iterations !== undefined ? properties.iterations : 1,
-                            radius: properties.radius !== undefined ? properties.radius : 12,
-                            rings: properties.rings !== undefined ? properties.rings : 11,
-                            lumaPhi: properties.lumaPhi !== undefined ? properties.lumaPhi : 10,
-                            depthPhi: properties.depthPhi !== undefined ? properties.depthPhi : 2,
-                            normalPhi: properties.normalPhi !== undefined ? properties.normalPhi : 3.25,
-                            samples: properties.samples !== undefined ? properties.samples : 16
+                            resolutionScale: properties.resolutionScale !== undefined
+                                ? properties.resolutionScale
+                                : 1,
+                            spp: properties.spp !== undefined
+                                ? properties.spp
+                                : 16,
+                            distance: properties.distance !== undefined
+                                ? properties.distance * sceneSizeFactor
+                                : sceneSizeFactor,
+                            distancePower: properties.distanceIntensity !== undefined
+                                ? properties.distanceIntensity
+                                : 1,
+                            power: properties.intensity !== undefined
+                                ? properties.intensity
+                                : 2.5,
+                            bias: properties.bias !== undefined
+                                ? properties.bias
+                                : 10,
+                            thickness: properties.thickness !== undefined
+                                ? properties.thickness
+                                : 0.5,
+                            color: properties.color !== undefined
+                                ? new THREE.Color(this._converter
+                                    .toHexColor(properties.color)
+                                    .substring(0, 7))
+                                : new THREE.Color("black"),
+                            iterations: properties.iterations !== undefined
+                                ? properties.iterations
+                                : 1,
+                            radius: properties.radius !== undefined
+                                ? properties.radius
+                                : 12,
+                            rings: properties.rings !== undefined
+                                ? properties.rings
+                                : 11,
+                            lumaPhi: properties.lumaPhi !== undefined
+                                ? properties.lumaPhi
+                                : 10,
+                            depthPhi: properties.depthPhi !== undefined
+                                ? properties.depthPhi
+                                : 2,
+                            normalPhi: properties.normalPhi !== undefined
+                                ? properties.normalPhi
+                                : 3.25,
+                            samples: properties.samples !== undefined
+                                ? properties.samples
+                                : 16,
                         });
                         this._effects.push({
                             token: this._effectDefinitions[i].token,
-                            effect: hbaoEffect
+                            effect: hbaoEffect,
                         });
                     }
                     break;
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.HUE_SATURATION:
                     {
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this
+                            ._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
                         this._effects.push({
                             token: this._effectDefinitions[i].token,
                             effect: new postprocessing_1.HueSaturationEffect({
                                 blendFunction: properties.blendFunction,
                                 hue: properties.hue,
-                                saturation: properties.saturation
-                            })
+                                saturation: properties.saturation,
+                            }),
                         });
                     }
                     break;
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.NOISE:
                     {
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this
+                            ._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
                         this._effects.push({
                             token: this._effectDefinitions[i].token,
                             effect: new postprocessing_1.NoiseEffect({
                                 blendFunction: properties.blendFunction,
-                                premultiply: properties.premultiply
-                            })
+                                premultiply: properties.premultiply,
+                            }),
                         });
                     }
                     break;
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.OUTLINE:
                     {
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this
+                            ._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
                         const outlineEffect = new postprocessing_1.OutlineEffect(this._renderingEngine.scene, this._renderingEngine.camera, {
-                            blendFunction: properties.blendFunction !== undefined ? properties.blendFunction : postprocessing_1.BlendFunction.SCREEN,
+                            blendFunction: properties.blendFunction !== undefined
+                                ? properties.blendFunction
+                                : postprocessing_1.BlendFunction.SCREEN,
                             edgeStrength: properties.edgeStrength,
                             pulseSpeed: properties.pulseSpeed,
-                            visibleEdgeColor: new THREE.Color(this._converter.toHexColor(properties.visibleEdgeColor).substring(0, 7)),
-                            hiddenEdgeColor: new THREE.Color(this._converter.toHexColor(properties.hiddenEdgeColor).substring(0, 7)),
+                            visibleEdgeColor: (new THREE.Color(this._converter
+                                .toHexColor(properties.visibleEdgeColor)
+                                .substring(0, 7))),
+                            hiddenEdgeColor: (new THREE.Color(this._converter
+                                .toHexColor(properties.hiddenEdgeColor)
+                                .substring(0, 7))),
                             kernelSize: properties.kernelSize,
                             blur: properties.blur,
                             xRay: properties.xRay,
-                            multisampling: properties.multisampling
+                            multisampling: properties.multisampling,
                         });
                         this._effects.push({
                             token: this._effectDefinitions[i].token,
-                            effect: outlineEffect
+                            effect: outlineEffect,
                         });
                         this._outlineManagers[this._effectDefinitions[i].token].setEffect(outlineEffect);
                     }
                     break;
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.PIXELATION:
                     {
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this
+                            ._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
                         this._effects.push({
                             token: this._effectDefinitions[i].token,
-                            effect: new postprocessing_1.PixelationEffect(properties.granularity)
+                            effect: new postprocessing_1.PixelationEffect(properties.granularity),
                         });
                     }
                     break;
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.SSAO:
                     {
                         // we currently do not support devices with WebGL 1: https://shapediver.atlassian.net/browse/SS-7069
-                        if (this._renderingEngine.renderer.capabilities.isWebGL2 === false)
+                        if (this._renderingEngine.renderer.capabilities
+                            .isWebGL2 === false)
                             break;
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this
+                            ._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
                         // we adjust the scene size slightly to make the factor fit our requirements
                         // with this adjusted factor, a distance value of 1 fits well as a default
                         const sceneSizeFactor = this._sceneExtents / 50.0;
                         const ssaoEffect = new SSAOEffect_1.SSAOEffect(this._composer, this._renderingEngine.camera, this._renderingEngine.scene, {
-                            resolutionScale: properties.resolutionScale !== undefined ? properties.resolutionScale : 1,
-                            spp: properties.spp !== undefined ? properties.spp : 16,
-                            distance: properties.distance !== undefined ? properties.distance * sceneSizeFactor : sceneSizeFactor,
-                            distancePower: properties.distanceIntensity !== undefined ? properties.distanceIntensity : 1,
-                            power: properties.intensity !== undefined ? properties.intensity : 2.5,
-                            color: properties.color !== undefined ? new THREE.Color(this._converter.toHexColor(properties.color).substring(0, 7)) : new THREE.Color('black'),
-                            iterations: properties.iterations !== undefined ? properties.iterations : 1,
-                            radius: properties.radius !== undefined ? properties.radius : 12,
-                            rings: properties.rings !== undefined ? properties.rings : 11,
-                            lumaPhi: properties.lumaPhi !== undefined ? properties.lumaPhi : 10,
-                            depthPhi: properties.depthPhi !== undefined ? properties.depthPhi : 2,
-                            normalPhi: properties.normalPhi !== undefined ? properties.normalPhi : 3.25,
-                            samples: properties.samples !== undefined ? properties.samples : 16
+                            resolutionScale: properties.resolutionScale !== undefined
+                                ? properties.resolutionScale
+                                : 1,
+                            spp: properties.spp !== undefined
+                                ? properties.spp
+                                : 16,
+                            distance: properties.distance !== undefined
+                                ? properties.distance * sceneSizeFactor
+                                : sceneSizeFactor,
+                            distancePower: properties.distanceIntensity !== undefined
+                                ? properties.distanceIntensity
+                                : 1,
+                            power: properties.intensity !== undefined
+                                ? properties.intensity
+                                : 2.5,
+                            color: properties.color !== undefined
+                                ? new THREE.Color(this._converter
+                                    .toHexColor(properties.color)
+                                    .substring(0, 7))
+                                : new THREE.Color("black"),
+                            iterations: properties.iterations !== undefined
+                                ? properties.iterations
+                                : 1,
+                            radius: properties.radius !== undefined
+                                ? properties.radius
+                                : 12,
+                            rings: properties.rings !== undefined
+                                ? properties.rings
+                                : 11,
+                            lumaPhi: properties.lumaPhi !== undefined
+                                ? properties.lumaPhi
+                                : 10,
+                            depthPhi: properties.depthPhi !== undefined
+                                ? properties.depthPhi
+                                : 2,
+                            normalPhi: properties.normalPhi !== undefined
+                                ? properties.normalPhi
+                                : 3.25,
+                            samples: properties.samples !== undefined
+                                ? properties.samples
+                                : 16,
                         });
                         this._effects.push({
                             token: this._effectDefinitions[i].token,
-                            effect: ssaoEffect
+                            effect: ssaoEffect,
                         });
                     }
                     break;
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.SCANLINE:
                     {
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this
+                            ._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
                         this._effects.push({
                             token: this._effectDefinitions[i].token,
                             effect: new postprocessing_1.ScanlineEffect({
                                 blendFunction: properties.blendFunction,
-                                density: properties.density
-                            })
+                                density: properties.density,
+                            }),
                         });
                     }
                     break;
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.SELECTIVE_BLOOM:
                     {
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this
+                            ._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
                         const selectiveBloomEffect = new postprocessing_1.SelectiveBloomEffect(this._renderingEngine.scene, this._renderingEngine.camera, {
                             blendFunction: properties.blendFunction,
@@ -461,31 +587,38 @@ class PostProcessingManager {
                             luminanceThreshold: properties.luminanceThreshold,
                             luminanceSmoothing: properties.luminanceSmoothing,
                             intensity: properties.intensity,
-                            kernelSize: properties.kernelSize
+                            kernelSize: properties.kernelSize,
                         });
-                        selectiveBloomEffect.ignoreBackground = properties.ignoreBackground !== undefined ? properties.ignoreBackground : true;
+                        selectiveBloomEffect.ignoreBackground =
+                            properties.ignoreBackground !== undefined
+                                ? properties.ignoreBackground
+                                : true;
                         this._effects.push({
                             token: this._effectDefinitions[i].token,
-                            effect: selectiveBloomEffect
+                            effect: selectiveBloomEffect,
                         });
                         this._selectiveBloomManagers[this._effectDefinitions[i].token].setEffect(selectiveBloomEffect);
                     }
                     break;
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.SEPIA:
                     {
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this
+                            ._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
                         this._effects.push({
                             token: this._effectDefinitions[i].token,
                             effect: new postprocessing_1.SepiaEffect({
-                                blendFunction: properties.blendFunction
-                            })
+                                blendFunction: properties.blendFunction,
+                            }),
                         });
                     }
                     break;
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.TILT_SHIFT:
                     {
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this
+                            ._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
                         this._effects.push({
                             token: this._effectDefinitions[i].token,
@@ -495,14 +628,16 @@ class PostProcessingManager {
                                 rotation: properties.rotation,
                                 focusArea: properties.focusArea,
                                 feather: properties.feather,
-                                kernelSize: properties.kernelSize
-                            })
+                                kernelSize: properties.kernelSize,
+                            }),
                         });
                     }
                     break;
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.VIGNETTE:
                     {
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this
+                            ._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
                         this._effects.push({
                             token: this._effectDefinitions[i].token,
@@ -511,7 +646,7 @@ class PostProcessingManager {
                                 technique: properties.technique,
                                 offset: properties.offset,
                                 darkness: properties.darkness,
-                            })
+                            }),
                         });
                     }
                     break;
@@ -519,20 +654,24 @@ class PostProcessingManager {
             }
         }
         // sort effects by order in effectDefinitions
-        this._effects.sort((a, b) => this._effectDefinitions.indexOf(this._effectDefinitions.find(e => e.token === a.token)) - this._effectDefinitions.indexOf(this._effectDefinitions.find(e => e.token === b.token)));
-        const effectArray = this._effects.map(v => v.effect);
+        this._effects.sort((a, b) => this._effectDefinitions.indexOf(this._effectDefinitions.find((e) => e.token === a.token)) -
+            this._effectDefinitions.indexOf(this._effectDefinitions.find((e) => e.token === b.token)));
+        const effectArray = this._effects.map((v) => v.effect);
         if (antiAliasingTechnique === IPostProcessingEffectDefinitions_1.ANTI_ALIASING_TECHNIQUE.FXAA) {
             effectArray.unshift(this._fxaaEffect);
         }
         else if (antiAliasingTechnique === IPostProcessingEffectDefinitions_1.ANTI_ALIASING_TECHNIQUE.SMAA) {
             effectArray.unshift(this._smaaEffect);
         }
-        this._effectPass = new postprocessing_1.EffectPass(this._renderingEngine.camera, ...this._effects.map(v => v.effect));
+        this._effectPass = new postprocessing_1.EffectPass(this._renderingEngine.camera, ...this._effects.map((v) => v.effect));
         this.addPassToEffectComposer(this._effectPass);
         // for the AO effects we need to add a separate AA pass at the end that anti-aliases the AO effect
-        if (this._effectDefinitions.find(e => e.definition.type === IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.HBAO || e.definition.type === IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.SSAO)) {
+        if (this._effectDefinitions.find((e) => e.definition.type === IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.HBAO ||
+            e.definition.type === IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.SSAO)) {
             // respect the AA choice if one of the effects was selected, use SMAA otherwise
-            this.addPassToEffectComposer(new postprocessing_1.EffectPass(this._renderingEngine.camera, antiAliasingTechnique === IPostProcessingEffectDefinitions_1.ANTI_ALIASING_TECHNIQUE.FXAA ? this._fxaaEffect : this._smaaEffect));
+            this.addPassToEffectComposer(new postprocessing_1.EffectPass(this._renderingEngine.camera, antiAliasingTechnique === IPostProcessingEffectDefinitions_1.ANTI_ALIASING_TECHNIQUE.FXAA
+                ? this._fxaaEffect
+                : this._smaaEffect));
         }
         if (this._renderingEngine.toneMapping !== viewer_shared_types_1.TONE_MAPPING.NONE) {
             const mode = (() => {
@@ -606,7 +745,7 @@ class PostProcessingManager {
                     distance: 1,
                     distanceIntensity: 1,
                     intensity: 2.5,
-                    color: '#000000',
+                    color: "#000000",
                     bias: 10,
                     thickness: 0.5,
                     iterations: 1,
@@ -633,12 +772,12 @@ class PostProcessingManager {
                     blendFunction: postprocessing_1.BlendFunction.SCREEN,
                     blur: false,
                     edgeStrength: 1.0,
-                    hiddenEdgeColor: '#22090a',
+                    hiddenEdgeColor: "#22090a",
                     kernelSize: postprocessing_1.KernelSize.VERY_SMALL,
                     multisampling: 0,
                     pulseSpeed: 0.0,
                     resolution: 480,
-                    visibleEdgeColor: '#ffffff',
+                    visibleEdgeColor: "#ffffff",
                     xRay: true,
                 };
             case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.PIXELATION:
@@ -652,7 +791,7 @@ class PostProcessingManager {
                     distance: 1,
                     distanceIntensity: 1,
                     intensity: 2.5,
-                    color: '#000000',
+                    color: "#000000",
                     iterations: 1,
                     radius: 12,
                     rings: 11,
@@ -712,10 +851,12 @@ class PostProcessingManager {
         });
     }
     getEffect(token) {
-        return this._effects.find(e => e.token === token).effect;
+        return this._effects.find((e) => e.token === token).effect;
     }
     getEffectTokens() {
-        return Object.assign({}, ...this._effectDefinitions.map((e) => ({ [e.token]: e.definition.type })));
+        return Object.assign({}, ...this._effectDefinitions.map((e) => ({
+            [e.token]: e.definition.type,
+        })));
     }
     getPostProcessingEffectsArray() {
         const effects = [];
@@ -723,7 +864,9 @@ class PostProcessingManager {
             switch (this._effectDefinitions[i].definition.type) {
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.BLOOM:
                     {
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this
+                            ._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
                         effects.push({
                             type: IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.BLOOM,
@@ -734,30 +877,40 @@ class PostProcessingManager {
                                 luminanceSmoothing: properties.luminanceSmoothing,
                                 mipmapBlur: properties.mipmapBlur,
                                 intensity: properties.intensity,
-                                kernelSize: properties.kernelSize
-                            }
+                                kernelSize: properties.kernelSize,
+                            },
                         });
                     }
                     break;
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.CHROMATIC_ABERRATION:
                     {
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
                         effects.push({
                             type: IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.CHROMATIC_ABERRATION,
                             token: this._effectDefinitions[i].token,
                             properties: {
                                 blendFunction: properties.blendFunction,
-                                offset: properties.offset ? Array.isArray(properties.offset) ? { x: properties.offset[0], y: properties.offset[1] } : properties.offset : undefined,
+                                offset: properties.offset
+                                    ? Array.isArray(properties.offset)
+                                        ? {
+                                            x: properties.offset[0],
+                                            y: properties.offset[1],
+                                        }
+                                        : properties.offset
+                                    : undefined,
                                 radialModulation: properties.radialModulation,
-                                modulationOffset: properties.modulationOffset
-                            }
+                                modulationOffset: properties.modulationOffset,
+                            },
                         });
                     }
                     break;
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.DEPTH_OF_FIELD:
                     {
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this
+                            ._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
                         effects.push({
                             type: IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.DEPTH_OF_FIELD,
@@ -766,14 +919,16 @@ class PostProcessingManager {
                                 blendFunction: properties.blendFunction,
                                 focusDistance: properties.focusDistance,
                                 focusRange: properties.focusRange,
-                                bokehScale: properties.bokehScale
-                            }
+                                bokehScale: properties.bokehScale,
+                            },
                         });
                     }
                     break;
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.DOT_SCREEN:
                     {
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this
+                            ._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
                         effects.push({
                             type: IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.DOT_SCREEN,
@@ -781,28 +936,32 @@ class PostProcessingManager {
                             properties: {
                                 blendFunction: properties.blendFunction,
                                 scale: properties.scale,
-                                angle: properties.angle
-                            }
+                                angle: properties.angle,
+                            },
                         });
                     }
                     break;
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.GRID:
                     {
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this
+                            ._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
                         effects.push({
                             type: IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.GRID,
                             token: this._effectDefinitions[i].token,
                             properties: {
                                 blendFunction: properties.blendFunction,
-                                scale: properties.scale
-                            }
+                                scale: properties.scale,
+                            },
                         });
                     }
                     break;
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.HBAO:
                     {
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this
+                            ._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
                         effects.push({
                             type: IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.HBAO,
@@ -815,21 +974,25 @@ class PostProcessingManager {
                                 intensity: properties.intensity,
                                 bias: properties.bias,
                                 thickness: properties.thickness,
-                                color: properties.color !== undefined ? this._converter.toHexColor(properties.color) : undefined,
+                                color: properties.color !== undefined
+                                    ? this._converter.toHexColor(properties.color)
+                                    : undefined,
                                 iterations: properties.iterations,
                                 radius: properties.radius,
                                 rings: properties.rings,
                                 lumaPhi: properties.lumaPhi,
                                 depthPhi: properties.depthPhi,
                                 normalPhi: properties.normalPhi,
-                                samples: properties.samples
-                            }
+                                samples: properties.samples,
+                            },
                         });
                     }
                     break;
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.HUE_SATURATION:
                     {
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this
+                            ._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
                         effects.push({
                             type: IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.HUE_SATURATION,
@@ -837,41 +1000,47 @@ class PostProcessingManager {
                             properties: {
                                 blendFunction: properties.blendFunction,
                                 hue: properties.hue,
-                                saturation: properties.saturation
-                            }
+                                saturation: properties.saturation,
+                            },
                         });
                     }
                     break;
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.NOISE:
                     {
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this
+                            ._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
                         effects.push({
                             type: IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.NOISE,
                             token: this._effectDefinitions[i].token,
                             properties: {
                                 blendFunction: properties.blendFunction,
-                                premultiply: properties.premultiply
-                            }
+                                premultiply: properties.premultiply,
+                            },
                         });
                     }
                     break;
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.PIXELATION:
                     {
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this
+                            ._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
                         effects.push({
                             type: IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.PIXELATION,
                             token: this._effectDefinitions[i].token,
                             properties: {
-                                granularity: properties.granularity
-                            }
+                                granularity: properties.granularity,
+                            },
                         });
                     }
                     break;
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.SSAO:
                     {
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this
+                            ._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
                         effects.push({
                             type: IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.SSAO,
@@ -882,48 +1051,56 @@ class PostProcessingManager {
                                 distance: properties.distance,
                                 distanceIntensity: properties.distanceIntensity,
                                 intensity: properties.intensity,
-                                color: properties.color !== undefined ? this._converter.toHexColor(properties.color) : undefined,
+                                color: properties.color !== undefined
+                                    ? this._converter.toHexColor(properties.color)
+                                    : undefined,
                                 iterations: properties.iterations,
                                 radius: properties.radius,
                                 rings: properties.rings,
                                 lumaPhi: properties.lumaPhi,
                                 depthPhi: properties.depthPhi,
                                 normalPhi: properties.normalPhi,
-                                samples: properties.samples
-                            }
+                                samples: properties.samples,
+                            },
                         });
                     }
                     break;
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.SCANLINE:
                     {
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this
+                            ._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
                         effects.push({
                             type: IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.SCANLINE,
                             token: this._effectDefinitions[i].token,
                             properties: {
                                 blendFunction: properties.blendFunction,
-                                density: properties.density
-                            }
+                                density: properties.density,
+                            },
                         });
                     }
                     break;
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.SEPIA:
                     {
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this
+                            ._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
                         effects.push({
                             type: IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.SEPIA,
                             token: this._effectDefinitions[i].token,
                             properties: {
-                                blendFunction: properties.blendFunction
-                            }
+                                blendFunction: properties.blendFunction,
+                            },
                         });
                     }
                     break;
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.TILT_SHIFT:
                     {
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this
+                            ._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
                         effects.push({
                             type: IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.TILT_SHIFT,
@@ -934,14 +1111,16 @@ class PostProcessingManager {
                                 rotation: properties.rotation,
                                 focusArea: properties.focusArea,
                                 feather: properties.feather,
-                                kernelSize: properties.kernelSize
-                            }
+                                kernelSize: properties.kernelSize,
+                            },
                         });
                     }
                     break;
                 case IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.VIGNETTE:
                     {
-                        const definition = this._effectDefinitions[i].definition;
+                        const definition = this
+                            ._effectDefinitions[i]
+                            .definition;
                         const properties = definition.properties || {};
                         effects.push({
                             type: IPostProcessingEffectDefinitions_1.POST_PROCESSING_EFFECT_TYPE.VIGNETTE,
@@ -951,7 +1130,7 @@ class PostProcessingManager {
                                 technique: properties.technique,
                                 offset: properties.offset,
                                 darkness: properties.darkness,
-                            }
+                            },
                         });
                     }
                     break;
@@ -989,7 +1168,7 @@ class PostProcessingManager {
         }
     }
     removeEffect(token) {
-        const effectToRemove = this._effectDefinitions.find(e => e.token === token);
+        const effectToRemove = this._effectDefinitions.find((e) => e.token === token);
         if (effectToRemove)
             this._effectDefinitions.splice(this._effectDefinitions.indexOf(effectToRemove), 1);
         this.changeEffectPass();
@@ -998,14 +1177,16 @@ class PostProcessingManager {
     render(deltaTime, camera) {
         if (!this._composer)
             return;
-        const cameraId = `${camera.id}_${camera.type}${(camera.type === 'PerspectiveCamera' ? '' : '_' + camera.up.toArray().toString())}`;
+        const cameraId = `${camera.id}_${camera.type}${camera.type === "PerspectiveCamera" ? "" : "_" + camera.up.toArray().toString()}`;
         if (cameraId !== this._currentCameraId) {
             this._currentCameraId = cameraId;
             this.changeEffectPass();
         }
         const currentToneMapping = this._renderingEngine.renderer.toneMapping;
         const currentClearColor = this._renderingEngine.renderer.getClearColor(new THREE.Color());
-        const convertedClearColor = currentClearColor.clone().convertSRGBToLinear();
+        const convertedClearColor = currentClearColor
+            .clone()
+            .convertSRGBToLinear();
         this._renderingEngine.renderer.toneMapping = THREE.NoToneMapping;
         this._renderingEngine.renderer.setClearColor(convertedClearColor);
         this._renderingEngine.renderer.setClearAlpha(this._renderingEngine.clearAlpha);
@@ -1020,7 +1201,7 @@ class PostProcessingManager {
         var _a;
         if (!this._composer)
             return;
-        this.effects.forEach(e => {
+        this.effects.forEach((e) => {
             if (e.effect.setSize)
                 e.effect.setSize(width, height);
         });
@@ -1030,17 +1211,21 @@ class PostProcessingManager {
         this._composer.setSize(width, height);
     }
     saveSettings(settingsEngine) {
-        settingsEngine.settings.postprocessing.antiAliasingTechnique = this.antiAliasingTechnique;
-        settingsEngine.settings.postprocessing.antiAliasingTechniqueMobile = this.antiAliasingTechniqueMobile;
-        settingsEngine.settings.postprocessing.enablePostProcessingOnMobile = this.enablePostProcessingOnMobile;
-        settingsEngine.settings.postprocessing.ssaaSampleLevel = this.ssaaSampleLevel;
+        settingsEngine.settings.postprocessing.antiAliasingTechnique =
+            this.antiAliasingTechnique;
+        settingsEngine.settings.postprocessing.antiAliasingTechniqueMobile =
+            this.antiAliasingTechniqueMobile;
+        settingsEngine.settings.postprocessing.enablePostProcessingOnMobile =
+            this.enablePostProcessingOnMobile;
+        settingsEngine.settings.postprocessing.ssaaSampleLevel =
+            this.ssaaSampleLevel;
         const effects = this.getPostProcessingEffectsArray();
         // delete the tokens as we don't want to save them
-        effects.forEach(e => delete e.token);
+        effects.forEach((e) => delete e.token);
         settingsEngine.settings.postprocessing.effects = effects;
     }
     updateEffect(token, definition) {
-        const effectDefinition = this._effectDefinitions.find(e => e.token === token);
+        const effectDefinition = this._effectDefinitions.find((e) => e.token === token);
         if (!effectDefinition)
             return;
         this.removeEffect(token);