@shapediver/viewer.rendering-engine.rendering-engine-threejs 3.16.8 → 3.16.10

package/dist/managers/RenderingManager.js

@@ -1,670 +1,680 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RenderingManager = void 0;
-const viewer_rendering_engine_animation_engine_1 = require("@shapediver/viewer.rendering-engine.animation-engine");
-const viewer_rendering_engine_animation_frame_engine_1 = require("@shapediver/viewer.rendering-engine.animation-frame-engine");
-const viewer_rendering_engine_camera_engine_1 = require("@shapediver/viewer.rendering-engine.camera-engine");
-const viewer_shared_node_tree_1 = require("@shapediver/viewer.shared.node-tree");
-const viewer_shared_services_1 = require("@shapediver/viewer.shared.services");
-const viewer_shared_types_1 = require("@shapediver/viewer.shared.types");
-const Stats = __importStar(require("stats.js"));
-const THREE = __importStar(require("three"));
-const SceenTreeManagerUtils_1 = require("./sceneTree/SceenTreeManagerUtils");
-class RenderingManager {
-    // #endregion Properties (30)
-    // #region Constructors (1)
-    constructor(_renderingEngine) {
-        this._renderingEngine = _renderingEngine;
-        // #region Properties (30)
-        this._animationEngine = viewer_rendering_engine_animation_engine_1.AnimationEngine.instance;
-        this._animationFrameEngine = viewer_rendering_engine_animation_frame_engine_1.AnimationFrameEngine.instance;
-        this._converter = viewer_shared_services_1.Converter.instance;
-        this._eventEngine = viewer_shared_services_1.EventEngine.instance;
-        this._logger = viewer_shared_services_1.Logger.instance;
-        this._systemInfo = viewer_shared_services_1.SystemInfo.instance;
-        this._tree = viewer_shared_node_tree_1.Tree.instance;
-        this._activeRendering = true;
-        this._cameraChanged = false;
-        this._continuousRendering = false;
-        this._continuousShadowMapUpdate = false;
-        this._height = 0;
-        this._hidden = true;
-        this._hiddenCamera = new THREE.PerspectiveCamera();
-        this._hiddenRenderTarget = new THREE.WebGLRenderTarget();
-        this._hideLogo = false;
-        this._lastSize = {
-            adjustedWidth: 0,
-            adjustedHeight: 0,
-            width: 0,
-            height: 0,
-        };
-        this._lightSizeUVEnd = 0.15;
-        this._lightSizeUVStart = 0.025;
-        this._maxTextureUnits = 0;
-        this._minimalRendering = false;
-        this._noWebGL = false;
-        this._runningAnimation = false;
-        this._sizeChanged = false;
-        this._softShadowRenderingActive = false;
-        this._softShadowRenderingDurationActive = 0;
-        this._softShadowRenderingTimeout = null;
-        this._usingSwiftShader = false;
-        this._width = 0;
-        this._updateShadowMapInNextRender = false;
-    }
-    // #endregion Constructors (1)
-    // #region Public Getters And Setters (6)
-    get continuousRendering() {
-        return this._continuousRendering;
-    }
-    set continuousRendering(value) {
-        this._continuousRendering = value;
-    }
-    get continuousShadowMapUpdate() {
-        return this._continuousShadowMapUpdate;
-    }
-    set continuousShadowMapUpdate(value) {
-        this._continuousShadowMapUpdate = value;
-    }
-    get minimalRendering() {
-        return this._minimalRendering;
-    }
-    get usingSwiftShader() {
-        return this._usingSwiftShader;
-    }
-    // #endregion Public Getters And Setters (6)
-    // #region Public Methods (10)
-    addLogo(canvas, branding) {
-        var _a, _b;
-        const logoDivElement = document.createElement("div");
-        logoDivElement.style.backgroundColor = branding.backgroundColor;
-        logoDivElement.classList.add("sdv-logo-container");
-        (_a = canvas.parentElement) === null || _a === void 0 ? void 0 : _a.insertBefore(logoDivElement, (_b = canvas.parentElement) === null || _b === void 0 ? void 0 : _b.firstChild);
-        if (branding.logo) {
-            const img = new Image();
-            img.classList.add("sdv-logo");
-            img.src = branding.logo;
-            logoDivElement.appendChild(img);
-        }
-        return logoDivElement;
-    }
-    addSpinner(canvas, branding) {
-        var _a, _b;
-        const spinnerDivElement = document.createElement("div");
-        spinnerDivElement.classList.add("sdv-spinner-container");
-        spinnerDivElement.style.visibility = "hidden";
-        (_a = canvas.parentElement) === null || _a === void 0 ? void 0 : _a.insertBefore(spinnerDivElement, (_b = canvas.parentElement) === null || _b === void 0 ? void 0 : _b.firstChild);
-        if (branding.busyModeSpinner) {
-            const img = new Image();
-            img.src = branding.busyModeSpinner;
-            img.classList.add("sdv-spinner");
-            img.classList.add("sdv-spinner-" +
-                branding.spinnerPositioning.replace("_", "-").toLowerCase());
-            spinnerDivElement.appendChild(img);
-        }
-        return spinnerDivElement;
-    }
-    createRenderer(canvas) {
-        const renderingProperties = {
-            alpha: true,
-            depth: true,
-            antialias: true,
-            preserveDrawingBuffer: true,
-            stencil: true,
-            premultipliedAlpha: true,
-            canvas,
-        };
-        const renderer = new THREE.WebGLRenderer(renderingProperties);
-        renderer.setPixelRatio(window.devicePixelRatio);
-        const context = renderer.getContext();
-        if (renderer.extensions.has("WEBGL_debug_renderer_info")) {
-            const debugInfo = renderer.extensions.get("WEBGL_debug_renderer_info");
-            // const vendor = context.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
-            const rendererInfo = context.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
-            if (rendererInfo === "Google SwiftShader") {
-                this._usingSwiftShader = true;
-                this._logger.warn("RenderingLogic.createWebGLContext: The current device is using Google SwiftShader, a CPU-based renderer. To achieve better rendering results, please enable GPU-rendering in your settings.");
-            }
-        }
-        if (!renderer.extensions.has("EXT_shader_texture_lod"))
-            this._minimalRendering = true;
-        renderer.outputColorSpace = THREE.SRGBColorSpace;
-        renderer.toneMapping = THREE.NoToneMapping;
-        renderer.shadowMap.enabled = true;
-        renderer.shadowMap.needsUpdate = true;
-        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-        renderer.shadowMap.autoUpdate = false;
-        renderer.localClippingEnabled = true;
-        // Performance: Disable object sorting to save CPU cycles per frame
-        // Objects are sorted by material/program by default which is usually sufficient
-        renderer.sortObjects = false;
-        renderer.setSize(canvas.width, canvas.height);
-        renderer.setClearColor(new THREE.Color("#ffffff"), 1);
-        this._maxTextureUnits = renderer
-            .getContext()
-            .getParameter(renderer.getContext().MAX_TEXTURE_IMAGE_UNITS);
-        return renderer;
-    }
-    evaluateTextureUnitCount(value) {
-        if (value > this._maxTextureUnits) {
-            this._logger.warn("RenderingManager.evaluateTextureUnitCount: Maximum number of texture units exceeded. Disabling shadows.");
-            this._renderingEngine.lightLoader.forceDisabledShadows = true;
-            this._renderingEngine.update("RenderingManager.evaluateTextureUnitCount");
-        }
-        else {
-            this._renderingEngine.lightLoader.forceDisabledShadows = false;
-        }
-    }
-    getScreenshot(type = "image/png", encoderOptions = 1) {
-        return this._renderingEngine.renderer.domElement.toDataURL(type, encoderOptions);
-    }
-    init() {
-        try {
-            this._renderingEngine.materialLoader.updateSoftShadow(this._lightSizeUVEnd, 1.0);
-            this._renderingEngine.renderer.shadowMap.type = THREE.PCFShadowMap;
-            this._renderingEngine.renderer.shadowMap.needsUpdate = true;
-            this._renderingEngine.materialLoader.updateMaterials();
-            this._eventEngine.addListener(viewer_shared_services_1.EVENTTYPE.CAMERA.CAMERA_START, (e) => {
-                const viewerEvent = e;
-                if (viewerEvent.viewportId === this._renderingEngine.id)
-                    this.startRendering();
-            });
-            this._eventEngine.addListener(viewer_shared_services_1.EVENTTYPE.CAMERA.CAMERA_END, (e) => {
-                const viewerEvent = e;
-                if (viewerEvent.viewportId === this._renderingEngine.id)
-                    this.stopRendering();
-            });
-            window.onresize = () => {
-                this.render();
-            };
-            this._renderingEngine.canvas.onresize = () => {
-                this.render();
-            };
-            this._renderingEngine.canvas.parentElement.onresize = () => {
-                this.render();
-            };
-            const stats1 = new Stats.default();
-            stats1.showPanel(0); // Panel 0 = fps
-            stats1.dom.style.cssText =
-                "position:absolute;top:0px;left:0px;display:none;";
-            this._renderingEngine.canvas.parentElement.appendChild(stats1.dom);
-            const stats2 = new Stats.default();
-            stats2.showPanel(1); // Panel 1 = ms
-            stats2.dom.style.cssText =
-                "position:absolute;top:0px;left:80px;display:none;";
-            this._renderingEngine.canvas.parentElement.appendChild(stats2.dom);
-            const stats3 = new Stats.default();
-            stats3.showPanel(2); // Panel 2 = ms
-            stats3.dom.style.cssText =
-                "position:absolute;top:0px;left:160px;display:none;";
-            this._renderingEngine.canvas.parentElement.appendChild(stats3.dom);
-            this._stats = {
-                stats: [stats1, stats2, stats3],
-                begin: () => {
-                    stats1.begin();
-                    stats2.begin();
-                    stats3.begin();
-                },
-                end: () => {
-                    stats1.end();
-                    stats2.end();
-                    stats3.end();
-                },
-            };
-        }
-        catch (e) {
-            this._noWebGL = true;
-            throw e;
-        }
-    }
-    render() {
-        this.startAndStopRendering();
-    }
-    resize(width, height) {
-        (this._width = width), (this._height = height);
-        this._renderingEngine.materialLoader.assignPointSize(this._renderingEngine.pointSize);
-    }
-    /**
-     * Must only be called once by the RenderingEngine!
-     */
-    start() {
-        this._animationFrameEngine.addAnimationFrameCallback(this.animate.bind(this));
-        this.startAndStopRendering();
-    }
-    updateShadowMap() {
-        this._updateShadowMapInNextRender = true;
-    }
-    // #endregion Public Methods (10)
-    // #region Private Methods (14)
-    activateBeautyRenderShaders() {
-        this._renderingEngine.renderer.shadowMap.type = THREE.PCFShadowMap;
-        this._renderingEngine.renderer.shadowMap.needsUpdate = true;
-        this._renderingEngine.materialLoader.updateMaterials();
-    }
-    animate(time, deltaTime, runningAnimation) {
-        var _a;
-        // animation loop - part 1: initial discarding
-        if (this._renderingEngine.closed || this._noWebGL)
-            return;
-        this._renderingEngine.evaluateFlagState();
-        // update if needed
-        if (this._renderingEngine.show === true &&
-            this._tree.root.version !==
-                this._renderingEngine.sceneTreeManager.lastRootVersion &&
-            this._renderingEngine.sceneTreeManager.suspendSceneUpdates === false) {
-            this._renderingEngine.sceneTreeManager.updateSceneTree(this._tree.root);
-            this.updateShadowMap();
-            this._animationEngine.updateAnimationData();
-            this.render();
-            this._eventEngine.emitEvent(viewer_shared_services_1.EVENTTYPE_VIEWPORT.VIEWPORT_UPDATED, {
-                viewportId: this._renderingEngine.id,
-            });
-        }
-        if (this._renderingEngine.preRenderingCallback)
-            this._renderingEngine.preRenderingCallback(this._renderingEngine.renderer);
-        if (runningAnimation !== this._runningAnimation)
-            this.render();
-        this._runningAnimation = runningAnimation;
-        if (this._runningAnimation)
-            this._renderingEngine.sceneTreeManager.updateNode(undefined, undefined, { transformationOnly: true });
-        if (this._runningAnimation)
-            (0, SceenTreeManagerUtils_1.updateMorphWeights)(this._tree.root, this._renderingEngine.sceneTreeManager.mainNode);
-        // get the current size
-        const { width, height, adjustedWidth, adjustedHeight } = this.calculateSize();
-        const aspect = width / height;
-        this._sizeChanged =
-            this._lastSize.adjustedHeight !== adjustedHeight ||
-                this._lastSize.adjustedWidth !== adjustedWidth ||
-                this._lastSize.height !== height ||
-                this._lastSize.width !== width;
-        this._lastSize = { width, height, adjustedWidth, adjustedHeight };
-        // animation loop - part 3: update the camera, if there are new movements, they will start / continue the rendering
-        this._cameraChanged = this._renderingEngine.cameraEngine.camera
-            ? this._renderingEngine.cameraManager.updateCamera(deltaTime, aspect)
-            : false;
-        // animation loop - part 4: evaluating state
-        const states = this.evaluateRenderingState();
-        // toggle the blurring
-        this.toggleBusyMode(states.busyMode);
-        // animation loop - part 5: the scene is not even shown
-        if (states.showScene === false) {
-            // toggle on logo
-            this.toggleLogo(true);
-            if (this._hidden === false)
-                this._eventEngine.emitEvent(viewer_shared_services_1.EVENTTYPE.VIEWPORT.VIEWPORT_HIDDEN, { viewportId: this._renderingEngine.id });
-            this._hidden = true;
-            return;
-        }
-        else {
-            // we delay for one render call as some of the postprocessing effects have artefacts in the first call
-            if (this._hideLogo === true && this._hidden === true) {
-                this.toggleLogo(false);
-                this._hideLogo = false;
-                if (this._hidden === true)
-                    this._eventEngine.emitEvent(viewer_shared_services_1.EVENTTYPE.VIEWPORT.VIEWPORT_VISIBLE, { viewportId: this._renderingEngine.id });
-                this._hidden = false;
-            }
-            else {
-                this._hideLogo = true;
-                if (this._hidden === true)
-                    this._renderingEngine.postProcessingManager.changeEffectPass();
-            }
-        }
-        // animation loop - part 6: the scene is shown, but there is no active rendering happening
-        if (states.rendering === false || this._renderingEngine.pause === true)
-            return;
-        // animation loop - part 7: there is actual rendering happening
-        // do the things that have to be done for standard and beauty rendering in the same way
-        this._stats.begin();
-        this.showStatistics();
-        // animation loop - part 8: calculate the current size
-        const currentSize = new THREE.Vector2();
-        this._renderingEngine.renderer.getSize(currentSize);
-        // Performance: Direct property comparison instead of Vector2.equals()
-        if (currentSize.width !== adjustedWidth ||
-            currentSize.height !== adjustedHeight) {
-            this._renderingEngine.renderer.setSize(adjustedWidth, adjustedHeight);
-            this._renderingEngine.postProcessingManager.resize(adjustedWidth, adjustedHeight);
-            this._renderingEngine.renderer.domElement.style.width =
-                width + "px";
-            this._renderingEngine.renderer.domElement.style.height =
-                height + "px";
-            this._renderingEngine.materialLoader.assignPointSize(this._renderingEngine.pointSize);
-        }
-        // animation loop - part 9: adjust the camera (the rendering state would be false if we didn't have a camera)
-        const { camera, matrix } = this._renderingEngine.cameraManager.adjustCamera(aspect);
-        // if a matrix is provided after a camera adjustment
-        // that means that the turntable controls or the object controls are activated
-        if (matrix) {
-            for (let i = 0; i < this._tree.root.children.length; i++) {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                if (!this._tree.root.children[i].sessionNode ||
-                    this._tree.root.children[i].excludeViewports.includes(this._renderingEngine.id))
-                    continue;
-                const transform = this._tree.root.children[i].transformations.find((t) => t.id === "objectRotation");
-                if (transform) {
-                    transform.matrix = matrix;
-                }
-                else {
-                    this._tree.root.children[i].addTransformation({
-                        id: "objectRotation",
-                        matrix,
-                    });
-                }
-            }
-            states.updateShadowMap = true;
-            this._renderingEngine.sceneTreeManager.updateNode(undefined, undefined, { transformationOnly: true });
-        }
-        // animation loop - part 10: adjust the anchor elements
-        this._renderingEngine.htmlElementAnchorLoader.adjustPositions(adjustedWidth / width, adjustedHeight / height);
-        // animation loop - part 11: adjust some scene settings
-        // enable / disable the shadow map
-        const enabled = this._renderingEngine.renderer.shadowMap.enabled;
-        this._renderingEngine.renderer.shadowMap.enabled =
-            this._renderingEngine.usingSwiftShader ||
-                this._renderingEngine.type === viewer_shared_types_1.RENDERER_TYPE.ATTRIBUTES
-                ? false
-                : this._renderingEngine.shadows;
-        if (enabled !== this._renderingEngine.renderer.shadowMap.enabled)
-            this._renderingEngine.materialLoader.updateMaterials();
-        let threeJsLightObject, oldLightVisibility = true;
-        // enable / disable lights
-        if (this._renderingEngine.lights === false) {
-            const ls = this._renderingEngine.lightEngine.lightScene;
-            if (ls) {
-                threeJsLightObject = ls.node.convertedObject[this._renderingEngine.id];
-                if (threeJsLightObject) {
-                    oldLightVisibility = threeJsLightObject.visible;
-                    threeJsLightObject.visible = false;
-                }
-            }
-        }
-        // update shadowMap if need
-        if (states.updateShadowMap) {
-            if (this._renderingEngine.renderer.shadowMap.enabled)
-                this._renderingEngine.renderer.shadowMap.needsUpdate = true;
-            (_a = this._renderingEngine.environmentGeometryManager.contactShadow) === null || _a === void 0 ? void 0 : _a.render();
-        }
-        // enable / disable the background
-        this._renderingEngine.sceneTreeManager.scene.background = this
-            ._renderingEngine.environmentMapAsBackground
-            ? this._renderingEngine.environmentMapLoader.environmentMap
-            : null;
-        // set the background color / alpha
-        this._renderingEngine.renderer.setClearColor(new THREE.Color(this._converter.toThreeJsColorInput(this._renderingEngine.clearColor)), this._renderingEngine.clearAlpha);
-        // check if we should render with post-processing
-        const renderPostProcessing = (this._renderingEngine.postProcessingManager.effects.length > 0 ||
-            this._renderingEngine.postProcessingManager
-                .manualPostProcessing) &&
-            !(this._renderingEngine.postProcessingManager
-                .enablePostProcessingOnMobile === false &&
-                this._systemInfo.isMobile === true);
-        // animation loop - part 12: actual rendering separation
-        if (states.softShadowRendering === true) {
-            this.setShaderProperties();
-            if (renderPostProcessing) {
-                this._renderingEngine.postProcessingManager.render(deltaTime, camera);
-            }
-            else {
-                this._renderingEngine.renderer.render(this._renderingEngine.sceneTreeManager
-                    .scene, camera);
-            }
-            // if the duration was long enough, disable the beauty rendering
-            if (this._softShadowRenderingDurationActive >=
-                this._renderingEngine.beautyRenderBlendingDuration) {
-                this._eventEngine.emitEvent(viewer_shared_services_1.EVENTTYPE.RENDERING.BEAUTY_RENDERING_FINISHED, { viewportId: this._renderingEngine.id });
-                this.deactivateBeautyRenderShaders();
-                this._activeRendering = false;
-            }
-            else {
-                this._softShadowRenderingDurationActive += deltaTime;
-            }
-        }
-        else {
-            if (renderPostProcessing) {
-                this._renderingEngine.postProcessingManager.render(deltaTime, camera);
-            }
-            else {
-                this._renderingEngine.renderer.render(this._renderingEngine.sceneTreeManager
-                    .scene, camera);
-            }
-            // if the beauty rendering was active, disable it
-            if (this._softShadowRenderingActive) {
-                this._eventEngine.emitEvent(viewer_shared_services_1.EVENTTYPE.RENDERING.BEAUTY_RENDERING_FINISHED, { viewportId: this._renderingEngine.id });
-                this.deactivateBeautyRenderShaders();
-                this._activeRendering = false;
-            }
-        }
-        // reset the visibility of the threeJs light object
-        if (threeJsLightObject)
-            threeJsLightObject.visible = oldLightVisibility;
-        if (this._renderingEngine.postRenderingCallback)
-            this._renderingEngine.postRenderingCallback(this._renderingEngine.renderer, this._renderingEngine.scene, this._renderingEngine.camera);
-        this._stats.end();
-    }
-    calculateSize() {
-        if (this._renderingEngine.renderer.pixelRatio !==
-            window.devicePixelRatio) {
-            this._renderingEngine.renderer.setPixelRatio(window.devicePixelRatio);
-        }
-        let width = this._width, height = this._height;
-        if (this._renderingEngine.automaticResizing) {
-            width = this._renderingEngine.canvas.parentNode
-                .clientWidth;
-            height = this._renderingEngine.canvas.parentNode
-                .clientHeight;
-        }
-        const aspect = width / height;
-        let adjustedWidth = width, adjustedHeight = height;
-        if (width > this._renderingEngine.maximumRenderingSize.width ||
-            height > this._renderingEngine.maximumRenderingSize.height) {
-            if ((width - this._renderingEngine.maximumRenderingSize.width) /
-                aspect >
-                height - this._renderingEngine.maximumRenderingSize.height) {
-                adjustedWidth =
-                    this._renderingEngine.maximumRenderingSize.width;
-                adjustedHeight =
-                    this._renderingEngine.maximumRenderingSize.width / aspect;
-            }
-            else {
-                adjustedWidth =
-                    this._renderingEngine.maximumRenderingSize.height * aspect;
-                adjustedHeight =
-                    this._renderingEngine.maximumRenderingSize.height;
-            }
-        }
-        return {
-            width,
-            adjustedWidth,
-            height,
-            adjustedHeight,
-        };
-    }
-    deactivateBeautyRenderShaders() {
-        this._softShadowRenderingTimeout = null;
-        this._softShadowRenderingActive = false;
-        this._softShadowRenderingDurationActive = 0;
-        this._renderingEngine.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-        this._renderingEngine.renderer.shadowMap.needsUpdate = true;
-        this._renderingEngine.materialLoader.updateSoftShadow(this._lightSizeUVStart, 0.1);
-        this._renderingEngine.materialLoader.updateMaterials();
-    }
-    evaluateRenderingState() {
-        // If there is a camera to show the scene and the setting for it is set to true, we show the scene
-        let showScene = false;
-        if (this._renderingEngine.cameraEngine.camera &&
-            this._renderingEngine.show === true)
-            showScene = true;
-        // If we should render at all
-        let rendering = false;
-        if (this._activeRendering === true ||
-            this._cameraChanged === true ||
-            this._sizeChanged === true ||
-            this._runningAnimation === true ||
-            this._continuousRendering === true)
-            rendering = true;
-        let updateShadowMap = false;
-        if (this._runningAnimation === true ||
-            this._continuousShadowMapUpdate === true ||
-            this._updateShadowMapInNextRender === true) {
-            this._updateShadowMapInNextRender = false;
-            updateShadowMap = true;
-        }
-        // special case, autorotation
-        if (this._renderingEngine.cameraEngine.camera) {
-            const camera = this._renderingEngine.cameraEngine.camera;
-            if (camera.type === viewer_rendering_engine_camera_engine_1.CAMERA_TYPE.PERSPECTIVE) {
-                const controls = (camera.controls);
-                if (controls.enableAutoRotation === true &&
-                    controls.autoRotationSpeed !== 0)
-                    return {
-                        showScene,
-                        rendering: true,
-                        updateShadowMap,
-                        busyMode: this._renderingEngine.busy,
-                        softShadowRendering: false,
-                    };
-            }
-        }
-        else {
-            rendering = false;
-        }
-        // If the scene should be blurred
-        let busyMode = false;
-        if (this._renderingEngine.busy)
-            busyMode = true;
-        // If we should render in beauty mode
-        let softShadowRendering = false;
-        if (this._softShadowRenderingActive === true &&
-            busyMode === false &&
-            this._continuousRendering === false &&
-            (this._renderingEngine.shadows || !this._systemInfo.isIOS) &&
-            this._renderingEngine.usingSwiftShader === false &&
-            this._runningAnimation === false &&
-            this._renderingEngine.type !== viewer_shared_types_1.RENDERER_TYPE.ATTRIBUTES)
-            softShadowRendering = true;
-        return {
-            showScene,
-            rendering,
-            updateShadowMap,
-            busyMode,
-            softShadowRendering,
-        };
-    }
-    setShaderProperties() {
-        if (this._renderingEngine.softShadows === false) {
-            this._renderingEngine.materialLoader.updateSoftShadow(this._lightSizeUVStart, 0);
-            return 0;
-        }
-        const deltaTime = Math.min(this._softShadowRenderingDurationActive, this._renderingEngine.beautyRenderBlendingDuration);
-        const percentage = deltaTime / this._renderingEngine.beautyRenderBlendingDuration;
-        if (percentage < 0.25) {
-            const percentageMapped = percentage / 0.25;
-            this._renderingEngine.materialLoader.updateSoftShadow(this._lightSizeUVStart, percentageMapped);
-        }
-        else {
-            const percentageMapped = (percentage - 0.25) / (1 - 0.25);
-            // this._lightSizeUVStart -> this._lightSizeUVEnd
-            this._renderingEngine.materialLoader.updateSoftShadow(this._lightSizeUVStart +
-                (this._lightSizeUVEnd - this._lightSizeUVStart) *
-                    percentageMapped, 1.0);
-        }
-        return percentage;
-    }
-    showStatistics() {
-        if (this._renderingEngine.showStatistics) {
-            for (let i = 0; i < this._stats.stats.length; i++)
-                this._stats.stats[i].dom.style.display = "";
-        }
-        else {
-            for (let i = 0; i < this._stats.stats.length; i++)
-                this._stats.stats[i].dom.style.display = "none";
-        }
-    }
-    startAndStopRendering() {
-        this._activeRendering = true;
-        this.stopBeautyRenderCountdown();
-        this.startBeautyRenderCountdown();
-    }
-    startBeautyRenderCountdown() {
-        this._softShadowRenderingTimeout = setTimeout(() => {
-            this._softShadowRenderingActive = true;
-            this._softShadowRenderingDurationActive = 0;
-            this.activateBeautyRenderShaders();
-        }, this._renderingEngine.beautyRenderDelay);
-    }
-    startRendering() {
-        this._activeRendering = true;
-        this.stopBeautyRenderCountdown();
-    }
-    stopBeautyRenderCountdown() {
-        if (this._softShadowRenderingTimeout)
-            clearTimeout(this._softShadowRenderingTimeout);
-        this.deactivateBeautyRenderShaders();
-    }
-    stopRendering() {
-        this.startBeautyRenderCountdown();
-    }
-    toggleBusyMode(toggle) {
-        if (this._renderingEngine.branding.busyModeDisplay ===
-            viewer_shared_types_1.BUSY_MODE_DISPLAY.BLUR) {
-            this._renderingEngine.htmlElementAnchorLoader.toggleBusyMode(toggle);
-            if (toggle) {
-                if (navigator.userAgent.toLowerCase().indexOf("firefox") > -1 &&
-                    navigator.userAgent.toLowerCase().indexOf("android") > -1)
-                    return;
-                this._renderingEngine.renderer.domElement.style.filter =
-                    "blur(3px)";
-            }
-            else {
-                this._renderingEngine.renderer.domElement.style.filter = "";
-            }
-        }
-        else if (this._renderingEngine.branding.busyModeDisplay ===
-            viewer_shared_types_1.BUSY_MODE_DISPLAY.SPINNER) {
-            if (toggle) {
-                this._renderingEngine.spinnerDivElement.style.visibility =
-                    "visible";
-            }
-            else {
-                this._renderingEngine.spinnerDivElement.style.visibility =
-                    "hidden";
-            }
-        }
-    }
-    toggleLogo(toggle) {
-        if (this._renderingEngine.logoDivElement)
-            this._renderingEngine.logoDivElement.style.display = toggle
-                ? "inherit"
-                : "none";
-        if (this._renderingEngine.canvas)
-            this._renderingEngine.canvas.style.display = !toggle
-                ? "inherit"
-                : "none";
-    }
-}
-exports.RenderingManager = RenderingManager;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderingManager = void 0;
+const viewer_rendering_engine_animation_engine_1 = require("@shapediver/viewer.rendering-engine.animation-engine");
+const viewer_rendering_engine_animation_frame_engine_1 = require("@shapediver/viewer.rendering-engine.animation-frame-engine");
+const viewer_rendering_engine_camera_engine_1 = require("@shapediver/viewer.rendering-engine.camera-engine");
+const viewer_shared_node_tree_1 = require("@shapediver/viewer.shared.node-tree");
+const viewer_shared_services_1 = require("@shapediver/viewer.shared.services");
+const viewer_shared_types_1 = require("@shapediver/viewer.shared.types");
+const Stats = __importStar(require("stats.js"));
+const THREE = __importStar(require("three"));
+const SceenTreeManagerUtils_1 = require("./sceneTree/SceenTreeManagerUtils");
+class RenderingManager {
+    // #endregion Properties (30)
+    // #region Constructors (1)
+    constructor(_renderingEngine) {
+        this._renderingEngine = _renderingEngine;
+        // #region Properties (30)
+        this._animationEngine = viewer_rendering_engine_animation_engine_1.AnimationEngine.instance;
+        this._animationFrameEngine = viewer_rendering_engine_animation_frame_engine_1.AnimationFrameEngine.instance;
+        this._converter = viewer_shared_services_1.Converter.instance;
+        this._eventEngine = viewer_shared_services_1.EventEngine.instance;
+        this._logger = viewer_shared_services_1.Logger.instance;
+        this._systemInfo = viewer_shared_services_1.SystemInfo.instance;
+        this._tree = viewer_shared_node_tree_1.Tree.instance;
+        this._activeRendering = true;
+        this._cameraChanged = false;
+        this._continuousRendering = false;
+        this._continuousShadowMapUpdate = false;
+        this._height = 0;
+        this._hidden = true;
+        this._hiddenCamera = new THREE.PerspectiveCamera();
+        this._hiddenRenderTarget = new THREE.WebGLRenderTarget();
+        this._hideLogo = false;
+        this._lastSize = {
+            adjustedWidth: 0,
+            adjustedHeight: 0,
+            width: 0,
+            height: 0,
+        };
+        this._lightSizeUVEnd = 0.15;
+        this._lightSizeUVStart = 0.025;
+        this._maxTextureUnits = 0;
+        this._minimalRendering = false;
+        this._noWebGL = false;
+        this._runningAnimation = false;
+        this._sizeChanged = false;
+        this._softShadowRenderingActive = false;
+        this._softShadowRenderingDurationActive = 0;
+        this._softShadowRenderingTimeout = null;
+        this._usingSwiftShader = false;
+        this._width = 0;
+        this._updateShadowMapInNextRender = false;
+    }
+    // #endregion Constructors (1)
+    // #region Public Getters And Setters (6)
+    get continuousRendering() {
+        return this._continuousRendering;
+    }
+    set continuousRendering(value) {
+        this._continuousRendering = value;
+    }
+    get continuousShadowMapUpdate() {
+        return this._continuousShadowMapUpdate;
+    }
+    set continuousShadowMapUpdate(value) {
+        this._continuousShadowMapUpdate = value;
+    }
+    get minimalRendering() {
+        return this._minimalRendering;
+    }
+    get usingSwiftShader() {
+        return this._usingSwiftShader;
+    }
+    // #endregion Public Getters And Setters (6)
+    // #region Public Methods (10)
+    addLogo(canvas, branding) {
+        var _a, _b;
+        const logoDivElement = document.createElement("div");
+        logoDivElement.style.backgroundColor = branding.backgroundColor;
+        logoDivElement.classList.add("sdv-logo-container");
+        (_a = canvas.parentElement) === null || _a === void 0 ? void 0 : _a.insertBefore(logoDivElement, (_b = canvas.parentElement) === null || _b === void 0 ? void 0 : _b.firstChild);
+        if (branding.logo) {
+            const img = new Image();
+            img.classList.add("sdv-logo");
+            img.src = branding.logo;
+            logoDivElement.appendChild(img);
+        }
+        return logoDivElement;
+    }
+    addSpinner(canvas, branding) {
+        var _a, _b;
+        const spinnerDivElement = document.createElement("div");
+        spinnerDivElement.classList.add("sdv-spinner-container");
+        spinnerDivElement.style.visibility = "hidden";
+        (_a = canvas.parentElement) === null || _a === void 0 ? void 0 : _a.insertBefore(spinnerDivElement, (_b = canvas.parentElement) === null || _b === void 0 ? void 0 : _b.firstChild);
+        if (branding.busyModeSpinner) {
+            const img = new Image();
+            img.src = branding.busyModeSpinner;
+            img.classList.add("sdv-spinner");
+            img.classList.add("sdv-spinner-" +
+                branding.spinnerPositioning.replace("_", "-").toLowerCase());
+            spinnerDivElement.appendChild(img);
+        }
+        return spinnerDivElement;
+    }
+    createRenderer(canvas) {
+        const renderingProperties = {
+            alpha: true,
+            depth: true,
+            antialias: true,
+            preserveDrawingBuffer: true,
+            stencil: true,
+            premultipliedAlpha: true,
+            canvas,
+        };
+        const renderer = new THREE.WebGLRenderer(renderingProperties);
+        renderer.setPixelRatio(window.devicePixelRatio);
+        const context = renderer.getContext();
+        if (renderer.extensions.has("WEBGL_debug_renderer_info")) {
+            const debugInfo = renderer.extensions.get("WEBGL_debug_renderer_info");
+            // const vendor = context.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
+            const rendererInfo = context.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
+            if (rendererInfo === "Google SwiftShader") {
+                this._usingSwiftShader = true;
+                this._logger.warn("RenderingLogic.createWebGLContext: The current device is using Google SwiftShader, a CPU-based renderer. To achieve better rendering results, please enable GPU-rendering in your settings.");
+            }
+        }
+        if (!renderer.extensions.has("EXT_shader_texture_lod"))
+            this._minimalRendering = true;
+        renderer.outputColorSpace = THREE.SRGBColorSpace;
+        renderer.toneMapping = THREE.NoToneMapping;
+        renderer.shadowMap.enabled = true;
+        renderer.shadowMap.needsUpdate = true;
+        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+        renderer.shadowMap.autoUpdate = false;
+        renderer.localClippingEnabled = true;
+        // Performance: Disable object sorting to save CPU cycles per frame
+        // Objects are sorted by material/program by default which is usually sufficient
+        renderer.sortObjects = false;
+        renderer.setSize(canvas.width, canvas.height);
+        renderer.setClearColor(new THREE.Color("#ffffff"), 1);
+        this._maxTextureUnits = renderer
+            .getContext()
+            .getParameter(renderer.getContext().MAX_TEXTURE_IMAGE_UNITS);
+        return renderer;
+    }
+    evaluateTextureUnitCount(value) {
+        if (value > this._maxTextureUnits) {
+            this._logger.warn("RenderingManager.evaluateTextureUnitCount: Maximum number of texture units exceeded. Disabling shadows.");
+            this._renderingEngine.lightLoader.forceDisabledShadows = true;
+            this._renderingEngine.update("RenderingManager.evaluateTextureUnitCount");
+        }
+        else {
+            this._renderingEngine.lightLoader.forceDisabledShadows = false;
+        }
+    }
+    getScreenshot(type = "image/png", encoderOptions = 1) {
+        return this._renderingEngine.renderer.domElement.toDataURL(type, encoderOptions);
+    }
+    init() {
+        try {
+            this._renderingEngine.materialLoader.updateSoftShadow(this._lightSizeUVEnd, 1.0);
+            this._renderingEngine.renderer.shadowMap.type = THREE.PCFShadowMap;
+            this._renderingEngine.renderer.shadowMap.needsUpdate = true;
+            this._renderingEngine.materialLoader.updateMaterials();
+            this._eventEngine.addListener(viewer_shared_services_1.EVENTTYPE.CAMERA.CAMERA_START, (e) => {
+                const viewerEvent = e;
+                if (viewerEvent.viewportId === this._renderingEngine.id)
+                    this.startRendering();
+            });
+            this._eventEngine.addListener(viewer_shared_services_1.EVENTTYPE.CAMERA.CAMERA_END, (e) => {
+                const viewerEvent = e;
+                if (viewerEvent.viewportId === this._renderingEngine.id)
+                    this.stopRendering();
+            });
+            window.onresize = () => {
+                this.render();
+            };
+            this._renderingEngine.canvas.onresize = () => {
+                this.render();
+            };
+            this._renderingEngine.canvas.parentElement.onresize = () => {
+                this.render();
+            };
+            const stats1 = new Stats.default();
+            stats1.showPanel(0); // Panel 0 = fps
+            stats1.dom.style.cssText =
+                "position:absolute;top:0px;left:0px;display:none;";
+            this._renderingEngine.canvas.parentElement.appendChild(stats1.dom);
+            const stats2 = new Stats.default();
+            stats2.showPanel(1); // Panel 1 = ms
+            stats2.dom.style.cssText =
+                "position:absolute;top:0px;left:80px;display:none;";
+            this._renderingEngine.canvas.parentElement.appendChild(stats2.dom);
+            const stats3 = new Stats.default();
+            stats3.showPanel(2); // Panel 2 = ms
+            stats3.dom.style.cssText =
+                "position:absolute;top:0px;left:160px;display:none;";
+            this._renderingEngine.canvas.parentElement.appendChild(stats3.dom);
+            this._stats = {
+                stats: [stats1, stats2, stats3],
+                begin: () => {
+                    stats1.begin();
+                    stats2.begin();
+                    stats3.begin();
+                },
+                end: () => {
+                    stats1.end();
+                    stats2.end();
+                    stats3.end();
+                },
+            };
+        }
+        catch (e) {
+            this._noWebGL = true;
+            throw e;
+        }
+    }
+    render() {
+        this.startAndStopRendering();
+    }
+    resize(width, height) {
+        (this._width = width), (this._height = height);
+        this._renderingEngine.materialLoader.assignPointSize(this._renderingEngine.pointSize);
+    }
+    /**
+     * Must only be called once by the RenderingEngine!
+     */
+    start() {
+        this._animationFrameEngine.addAnimationFrameCallback(this.animate.bind(this));
+        this.startAndStopRendering();
+    }
+    updateShadowMap() {
+        this._updateShadowMapInNextRender = true;
+    }
+    // #endregion Public Methods (10)
+    // #region Private Methods (14)
+    activateBeautyRenderShaders() {
+        this._renderingEngine.renderer.shadowMap.type = THREE.PCFShadowMap;
+        this._renderingEngine.renderer.shadowMap.needsUpdate = true;
+        this._renderingEngine.materialLoader.updateMaterials();
+    }
+    animate(time, deltaTime, runningAnimation) {
+        var _a;
+        // animation loop - part 1: initial discarding
+        if (this._renderingEngine.closed || this._noWebGL)
+            return;
+        this._renderingEngine.evaluateFlagState();
+        // update if needed
+        if (this._renderingEngine.show === true &&
+            this._tree.root.version !==
+                this._renderingEngine.sceneTreeManager.lastRootVersion &&
+            this._renderingEngine.sceneTreeManager.suspendSceneUpdates === false) {
+            this._renderingEngine.sceneTreeManager.updateSceneTree(this._tree.root);
+            this.updateShadowMap();
+            this._animationEngine.updateAnimationData();
+            this.render();
+            this._eventEngine.emitEvent(viewer_shared_services_1.EVENTTYPE_VIEWPORT.VIEWPORT_UPDATED, {
+                viewportId: this._renderingEngine.id,
+            });
+        }
+        if (this._renderingEngine.preRenderingCallback)
+            this._renderingEngine.preRenderingCallback(this._renderingEngine.renderer);
+        if (runningAnimation !== this._runningAnimation)
+            this.render();
+        this._runningAnimation = runningAnimation;
+        if (this._runningAnimation)
+            this._renderingEngine.sceneTreeManager.updateNode(undefined, undefined, { transformationOnly: true });
+        if (this._runningAnimation)
+            (0, SceenTreeManagerUtils_1.updateMorphWeights)(this._tree.root, this._renderingEngine.sceneTreeManager.mainNode);
+        // get the current size
+        const { width, height, adjustedWidth, adjustedHeight } = this.calculateSize();
+        const aspect = width / height;
+        this._sizeChanged =
+            this._lastSize.adjustedHeight !== adjustedHeight ||
+                this._lastSize.adjustedWidth !== adjustedWidth ||
+                this._lastSize.height !== height ||
+                this._lastSize.width !== width;
+        this._lastSize = { width, height, adjustedWidth, adjustedHeight };
+        // animation loop - part 3: update the camera, if there are new movements, they will start / continue the rendering
+        this._cameraChanged = this._renderingEngine.cameraEngine.camera
+            ? this._renderingEngine.cameraManager.updateCamera(deltaTime, aspect)
+            : false;
+        // animation loop - part 4: evaluating state
+        const states = this.evaluateRenderingState();
+        // toggle the blurring
+        this.toggleBusyMode(states.busyMode);
+        // animation loop - part 5: the scene is not even shown
+        if (states.showScene === false) {
+            // toggle on logo
+            this.toggleLogo(true);
+            if (this._hidden === false)
+                this._eventEngine.emitEvent(viewer_shared_services_1.EVENTTYPE.VIEWPORT.VIEWPORT_HIDDEN, { viewportId: this._renderingEngine.id });
+            this._hidden = true;
+            return;
+        }
+        else {
+            // we delay for one render call as some of the postprocessing effects have artefacts in the first call
+            if (this._hideLogo === true && this._hidden === true) {
+                this.toggleLogo(false);
+                this._hideLogo = false;
+                if (this._hidden === true)
+                    this._eventEngine.emitEvent(viewer_shared_services_1.EVENTTYPE.VIEWPORT.VIEWPORT_VISIBLE, { viewportId: this._renderingEngine.id });
+                this._hidden = false;
+            }
+            else {
+                this._hideLogo = true;
+                if (this._hidden === true)
+                    this._renderingEngine.postProcessingManager.changeEffectPass();
+            }
+        }
+        // animation loop - part 6: the scene is shown, but there is no active rendering happening
+        if (states.rendering === false || this._renderingEngine.pause === true)
+            return;
+        // animation loop - part 7: there is actual rendering happening
+        // do the things that have to be done for standard and beauty rendering in the same way
+        this._stats.begin();
+        this.showStatistics();
+        // animation loop - part 8: calculate the current size
+        const currentSize = new THREE.Vector2();
+        this._renderingEngine.renderer.getSize(currentSize);
+        // Performance: Direct property comparison instead of Vector2.equals()
+        if (currentSize.width !== adjustedWidth ||
+            currentSize.height !== adjustedHeight) {
+            this._renderingEngine.renderer.setSize(adjustedWidth, adjustedHeight);
+            this._renderingEngine.postProcessingManager.resize(adjustedWidth, adjustedHeight);
+            this._renderingEngine.renderer.domElement.style.width =
+                width + "px";
+            this._renderingEngine.renderer.domElement.style.height =
+                height + "px";
+            this._renderingEngine.materialLoader.assignPointSize(this._renderingEngine.pointSize);
+        }
+        // animation loop - part 9: adjust the camera (the rendering state would be false if we didn't have a camera)
+        const { camera, matrix } = this._renderingEngine.cameraManager.adjustCamera(aspect);
+        // if a matrix is provided after a camera adjustment
+        // that means that the turntable controls or the object controls are activated
+        if (matrix) {
+            for (let i = 0; i < this._tree.root.children.length; i++) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                if (!this._tree.root.children[i].sessionNode ||
+                    this._tree.root.children[i].excludeViewports.includes(this._renderingEngine.id))
+                    continue;
+                const transform = this._tree.root.children[i].transformations.find((t) => t.id === "objectRotation");
+                if (transform) {
+                    transform.matrix = matrix;
+                }
+                else {
+                    this._tree.root.children[i].addTransformation({
+                        id: "objectRotation",
+                        matrix,
+                    });
+                }
+            }
+            states.updateShadowMap = true;
+            this._renderingEngine.sceneTreeManager.updateNode(undefined, undefined, { transformationOnly: true });
+        }
+        // animation loop - part 10: adjust the anchor elements
+        this._renderingEngine.htmlElementAnchorLoader.adjustPositions(adjustedWidth / width, adjustedHeight / height);
+        // animation loop - part 11: adjust some scene settings
+        // enable / disable the shadow map
+        const enabled = this._renderingEngine.renderer.shadowMap.enabled;
+        this._renderingEngine.renderer.shadowMap.enabled =
+            this._renderingEngine.usingSwiftShader ||
+                this._renderingEngine.type === viewer_shared_types_1.RENDERER_TYPE.ATTRIBUTES
+                ? false
+                : this._renderingEngine.shadows;
+        if (enabled !== this._renderingEngine.renderer.shadowMap.enabled)
+            this._renderingEngine.materialLoader.updateMaterials();
+        let threeJsLightObject, oldLightVisibility = true;
+        // enable / disable lights
+        if (this._renderingEngine.lights === false) {
+            const ls = this._renderingEngine.lightEngine.lightScene;
+            if (ls) {
+                threeJsLightObject = ls.node.convertedObject[this._renderingEngine.id];
+                if (threeJsLightObject) {
+                    oldLightVisibility = threeJsLightObject.visible;
+                    threeJsLightObject.visible = false;
+                }
+            }
+        }
+        // update shadowMap if need
+        if (states.updateShadowMap) {
+            if (this._renderingEngine.renderer.shadowMap.enabled)
+                this._renderingEngine.renderer.shadowMap.needsUpdate = true;
+            (_a = this._renderingEngine.environmentGeometryManager.contactShadow) === null || _a === void 0 ? void 0 : _a.render();
+        }
+        // enable / disable the background
+        this._renderingEngine.sceneTreeManager.scene.background = this
+            ._renderingEngine.environmentMapAsBackground
+            ? this._renderingEngine.environmentMapLoader.environmentMap
+            : null;
+        // set the background color / alpha
+        this._renderingEngine.renderer.setClearColor(new THREE.Color(this._converter.toThreeJsColorInput(this._renderingEngine.clearColor)), this._renderingEngine.clearAlpha);
+        // check if we should render with post-processing
+        const renderPostProcessing = (this._renderingEngine.postProcessingManager.effects.length > 0 ||
+            this._renderingEngine.postProcessingManager
+                .manualPostProcessing) &&
+            !(this._renderingEngine.postProcessingManager
+                .enablePostProcessingOnMobile === false &&
+                this._systemInfo.isMobile === true);
+        // animation loop - part 12: actual rendering separation
+        if (states.softShadowRendering === true) {
+            this.setShaderProperties();
+            if (renderPostProcessing) {
+                this._renderingEngine.postProcessingManager.render(deltaTime, camera);
+            }
+            else {
+                this._renderingEngine.renderer.render(this._renderingEngine.sceneTreeManager
+                    .scene, camera);
+            }
+            // if the duration was long enough, disable the beauty rendering
+            if (this._softShadowRenderingDurationActive >=
+                this._renderingEngine.beautyRenderBlendingDuration) {
+                this._eventEngine.emitEvent(viewer_shared_services_1.EVENTTYPE.RENDERING.BEAUTY_RENDERING_FINISHED, { viewportId: this._renderingEngine.id });
+                this.deactivateBeautyRenderShaders();
+                this._activeRendering = false;
+            }
+            else {
+                this._softShadowRenderingDurationActive += deltaTime;
+            }
+        }
+        else {
+            if (renderPostProcessing) {
+                this._renderingEngine.postProcessingManager.render(deltaTime, camera);
+            }
+            else {
+                this._renderingEngine.renderer.render(this._renderingEngine.sceneTreeManager
+                    .scene, camera);
+            }
+            // if the beauty rendering was active, disable it
+            if (this._softShadowRenderingActive) {
+                this._eventEngine.emitEvent(viewer_shared_services_1.EVENTTYPE.RENDERING.BEAUTY_RENDERING_FINISHED, { viewportId: this._renderingEngine.id });
+                this.deactivateBeautyRenderShaders();
+                this._activeRendering = false;
+            }
+        }
+        // reset the visibility of the threeJs light object
+        if (threeJsLightObject)
+            threeJsLightObject.visible = oldLightVisibility;
+        if (this._renderingEngine.postRenderingCallback)
+            this._renderingEngine.postRenderingCallback(this._renderingEngine.renderer, this._renderingEngine.scene, this._renderingEngine.camera);
+        this._stats.end();
+    }
+    calculateSize() {
+        if (this._renderingEngine.renderer.pixelRatio !==
+            window.devicePixelRatio) {
+            this._renderingEngine.renderer.setPixelRatio(window.devicePixelRatio);
+        }
+        let width = this._width, height = this._height;
+        if (this._renderingEngine.automaticResizing) {
+            width = this._renderingEngine.canvas.parentNode
+                .clientWidth;
+            height = this._renderingEngine.canvas.parentNode
+                .clientHeight;
+        }
+        const aspect = width / height;
+        let adjustedWidth = width, adjustedHeight = height;
+        if (width > this._renderingEngine.maximumRenderingSize.width ||
+            height > this._renderingEngine.maximumRenderingSize.height) {
+            if ((width - this._renderingEngine.maximumRenderingSize.width) /
+                aspect >
+                height - this._renderingEngine.maximumRenderingSize.height) {
+                adjustedWidth =
+                    this._renderingEngine.maximumRenderingSize.width;
+                adjustedHeight =
+                    this._renderingEngine.maximumRenderingSize.width / aspect;
+            }
+            else {
+                adjustedWidth =
+                    this._renderingEngine.maximumRenderingSize.height * aspect;
+                adjustedHeight =
+                    this._renderingEngine.maximumRenderingSize.height;
+            }
+        }
+        return {
+            width,
+            adjustedWidth,
+            height,
+            adjustedHeight,
+        };
+    }
+    deactivateBeautyRenderShaders() {
+        this._softShadowRenderingTimeout = null;
+        this._softShadowRenderingActive = false;
+        this._softShadowRenderingDurationActive = 0;
+        this._renderingEngine.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+        this._renderingEngine.renderer.shadowMap.needsUpdate = true;
+        this._renderingEngine.materialLoader.updateSoftShadow(this._lightSizeUVStart, 0.1);
+        this._renderingEngine.materialLoader.updateMaterials();
+    }
+    evaluateRenderingState() {
+        // If there is a camera to show the scene and the setting for it is set to true, we show the scene
+        let showScene = false;
+        if (this._renderingEngine.cameraEngine.camera &&
+            this._renderingEngine.show === true)
+            showScene = true;
+        // If we should render at all
+        let rendering = false;
+        if (this._activeRendering === true ||
+            this._cameraChanged === true ||
+            this._sizeChanged === true ||
+            this._runningAnimation === true ||
+            this._continuousRendering === true)
+            rendering = true;
+        let updateShadowMap = false;
+        if (this._runningAnimation === true ||
+            this._continuousShadowMapUpdate === true ||
+            this._updateShadowMapInNextRender === true) {
+            this._updateShadowMapInNextRender = false;
+            updateShadowMap = true;
+        }
+        // special case, autorotation
+        if (this._renderingEngine.cameraEngine.camera) {
+            const camera = this._renderingEngine.cameraEngine.camera;
+            if (camera.type === viewer_rendering_engine_camera_engine_1.CAMERA_TYPE.PERSPECTIVE) {
+                const controls = (camera.controls);
+                if (controls.enableAutoRotation === true &&
+                    controls.autoRotationSpeed !== 0)
+                    return {
+                        showScene,
+                        rendering: true,
+                        updateShadowMap,
+                        busyMode: this._renderingEngine.busy,
+                        softShadowRendering: false,
+                    };
+            }
+        }
+        else {
+            rendering = false;
+        }
+        // If the scene should be blurred
+        let busyMode = false;
+        if (this._renderingEngine.busy)
+            busyMode = true;
+        // If we should render in beauty mode
+        let softShadowRendering = false;
+        if (this._softShadowRenderingActive === true &&
+            busyMode === false &&
+            this._continuousRendering === false &&
+            (this._renderingEngine.shadows || !this._systemInfo.isIOS) &&
+            this._renderingEngine.usingSwiftShader === false &&
+            this._runningAnimation === false &&
+            this._renderingEngine.type !== viewer_shared_types_1.RENDERER_TYPE.ATTRIBUTES)
+            softShadowRendering = true;
+        return {
+            showScene,
+            rendering,
+            updateShadowMap,
+            busyMode,
+            softShadowRendering,
+        };
+    }
+    setShaderProperties() {
+        if (this._renderingEngine.softShadows === false) {
+            this._renderingEngine.materialLoader.updateSoftShadow(this._lightSizeUVStart, 0);
+            return 0;
+        }
+        const deltaTime = Math.min(this._softShadowRenderingDurationActive, this._renderingEngine.beautyRenderBlendingDuration);
+        const percentage = deltaTime / this._renderingEngine.beautyRenderBlendingDuration;
+        if (percentage < 0.25) {
+            const percentageMapped = percentage / 0.25;
+            this._renderingEngine.materialLoader.updateSoftShadow(this._lightSizeUVStart, percentageMapped);
+        }
+        else {
+            const percentageMapped = (percentage - 0.25) / (1 - 0.25);
+            // this._lightSizeUVStart -> this._lightSizeUVEnd
+            this._renderingEngine.materialLoader.updateSoftShadow(this._lightSizeUVStart +
+                (this._lightSizeUVEnd - this._lightSizeUVStart) *
+                    percentageMapped, 1.0);
+        }
+        return percentage;
+    }
+    showStatistics() {
+        if (this._renderingEngine.showStatistics) {
+            for (let i = 0; i < this._stats.stats.length; i++)
+                this._stats.stats[i].dom.style.display = "";
+        }
+        else {
+            for (let i = 0; i < this._stats.stats.length; i++)
+                this._stats.stats[i].dom.style.display = "none";
+        }
+    }
+    startAndStopRendering() {
+        this._activeRendering = true;
+        this.stopBeautyRenderCountdown();
+        this.startBeautyRenderCountdown();
+    }
+    startBeautyRenderCountdown() {
+        this._softShadowRenderingTimeout = setTimeout(() => {
+            this._softShadowRenderingActive = true;
+            this._softShadowRenderingDurationActive = 0;
+            this.activateBeautyRenderShaders();
+        }, this._renderingEngine.beautyRenderDelay);
+    }
+    startRendering() {
+        this._activeRendering = true;
+        this.stopBeautyRenderCountdown();
+    }
+    stopBeautyRenderCountdown() {
+        if (this._softShadowRenderingTimeout)
+            clearTimeout(this._softShadowRenderingTimeout);
+        this.deactivateBeautyRenderShaders();
+    }
+    stopRendering() {
+        this.startBeautyRenderCountdown();
+    }
+    toggleBusyMode(toggle) {
+        if (this._renderingEngine.branding.busyModeDisplay ===
+            viewer_shared_types_1.BUSY_MODE_DISPLAY.BLUR) {
+            this._renderingEngine.htmlElementAnchorLoader.toggleBusyMode(toggle);
+            if (toggle) {
+                if (navigator.userAgent.toLowerCase().indexOf("firefox") > -1 &&
+                    navigator.userAgent.toLowerCase().indexOf("android") > -1)
+                    return;
+                this._renderingEngine.renderer.domElement.style.filter =
+                    "blur(3px)";
+            }
+            else {
+                this._renderingEngine.renderer.domElement.style.filter = "";
+            }
+        }
+        else if (this._renderingEngine.branding.busyModeDisplay ===
+            viewer_shared_types_1.BUSY_MODE_DISPLAY.SPINNER) {
+            if (toggle) {
+                this._renderingEngine.spinnerDivElement.style.visibility =
+                    "visible";
+            }
+            else {
+                this._renderingEngine.spinnerDivElement.style.visibility =
+                    "hidden";
+            }
+        }
+    }
+    toggleLogo(toggle) {
+        if (this._renderingEngine.logoDivElement)
+            this._renderingEngine.logoDivElement.style.display = toggle
+                ? "inherit"
+                : "none";
+        if (this._renderingEngine.canvas)
+            this._renderingEngine.canvas.style.display = !toggle
+                ? "inherit"
+                : "none";
+    }
+}
+exports.RenderingManager = RenderingManager;
 //# sourceMappingURL=RenderingManager.js.map