@luminocity/lemonate-engine 15.2.2 → 15.2.3

package/dist/Renderer.js

@@ -1,1867 +0,0 @@
-// -----------------------------------------------------------------------------------------------------------
-//  __         ______     __    __     ______     __   __     ______     ______   ______
-// /\ \       /\  ___\   /\ "-./  \   /\  __ \   /\ "-.\ \   /\  __ \   /\__  _\ /\  ___\
-// \ \ \____  \ \  __\   \ \ \-./\ \  \ \ \/\ \  \ \ \-.  \  \ \  __ \  \/_/\ \/ \ \  __\
-//  \ \_____\  \ \_____\  \ \_\ \ \_\  \ \_____\  \ \_\\"\_\  \ \_\ \_\    \ \_\  \ \_____\
-//   \/_____/   \/_____/   \/_/  \/_/   \/_____/   \/_/ \/_/   \/_/\/_/     \/_/   \/_____/
-//
-//
-// Copyright 2023- Luminocity AG
-//
-// "I’m walking here!" - Grand Theft Auto IV (2008)
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy of this software
-// and associated documentation files (the “Software”), to deal in the Software without restriction,
-// including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
-// and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
-// subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in all copies or substantial
-// portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
-// LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
-// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-// WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
-// SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-// -----------------------------------------------------------------------------------------------------------
-// External
-// ----------------------------------------------------------------------------------
-import * as lodash from 'lodash';
-import Stats from "stats-gl";
-import { LoadingManager, ReinhardToneMapping, OrthographicCamera, Vector3, Vector4, Vector2, Quaternion, Raycaster, DataTexture, RGBAFormat, LinearSRGBColorSpace, MeshBasicMaterial, SRGBColorSpace, CineonToneMapping, ACESFilmicToneMapping, NoToneMapping, LinearToneMapping, TextureLoader, Material, PMREMGenerator, UnsignedByteType, Color, AdditiveBlending, LessDepth, Texture, VSMShadowMap, PCFShadowMap, PCFSoftShadowMap, BasicShadowMap, PerspectiveCamera, MeshDepthMaterial, Matrix4 } from "three";
-// Three.js extensions
-// ----------------------------------------------------------------------------------
-import { WebGLRenderer } from "./threejs/WebGLRenderer";
-import "./threejs/Object3DExtensions.js";
-import "./threejs/Box3Extensions.js";
-// Fonts
-// ----------------------------------------------------------------------------------
-import openSansRegularUrl from '../fonts/open-sans-v44-latin-regular.woff2';
-// Subsystems
-// ----------------------------------------------------------------------------------
-import { Composer } from "./subsystems/composer/composer";
-import { GBufferMaterial } from "./subsystems/composer/materials/GBufferMaterial";
-// Helpers
-// ----------------------------------------------------------------------------------
-import { ViewHelper } from "./helpers/ViewHelper";
-// Tools
-// ----------------------------------------------------------------------------------
-import textureTools from "./tools/TextureTools";
-import tools from "./Tools";
-// Other
-// ---------------------------------------------------------------------------------
-import { RenderOptions } from "./RenderOptions";
-import { Canvas } from "./Canvas";
-import { ForwardRenderer } from "./renderers/ForwardRenderer";
-import { RenderPassInfo } from "./RenderPassInfo";
-import { RenderView } from "./RenderView";
-import { loadFontFace } from "./tools/FontTools";
-import { PauseType } from "./Player";
-export var ShadowMode;
-(function (ShadowMode) {
-    ShadowMode[ShadowMode["Basic"] = 1] = "Basic";
-    ShadowMode[ShadowMode["Pcf"] = 2] = "Pcf";
-    ShadowMode[ShadowMode["PcfSoft"] = 3] = "PcfSoft";
-    ShadowMode[ShadowMode["Vsm"] = 4] = "Vsm";
-})(ShadowMode || (ShadowMode = {}));
-const layerIndexHelper = 31;
-const LayerIndexNormalsHelper = 31;
-const LayerIndexGridHelper = 31;
-const LayerIndexAxesHelper = 31;
-const LayerIndexTransformControls = 31;
-const LayerIndexCameraHelper = 31;
-export { layerIndexHelper, LayerIndexGridHelper, LayerIndexNormalsHelper, LayerIndexAxesHelper, LayerIndexTransformControls, LayerIndexCameraHelper };
-export var RenderMode;
-(function (RenderMode) {
-    RenderMode[RenderMode["Forward"] = 0] = "Forward";
-})(RenderMode || (RenderMode = {}));
-export var CameraMode;
-(function (CameraMode) {
-    CameraMode[CameraMode["None"] = -1] = "None";
-    CameraMode[CameraMode["AutomaticUserControllable"] = 0] = "AutomaticUserControllable";
-    CameraMode[CameraMode["MainCamera"] = 1] = "MainCamera";
-    CameraMode[CameraMode["Composer"] = 2] = "Composer";
-    CameraMode[CameraMode["Manual"] = 3] = "Manual";
-})(CameraMode || (CameraMode = {}));
-export var OutputMode;
-(function (OutputMode) {
-    OutputMode[OutputMode["EditorCamera"] = 0] = "EditorCamera";
-    OutputMode[OutputMode["SceneCamera"] = 1] = "SceneCamera";
-    OutputMode[OutputMode["Composition"] = 2] = "Composition";
-})(OutputMode || (OutputMode = {}));
-export class RenderViewport {
-    engine;
-    id;
-    name;
-    rect;
-    renderer;
-    constructor(engine, id, name, rect, renderer) {
-        this.engine = engine;
-        this.id = id;
-        this.name = name;
-        this.rect = rect;
-        this.renderer = renderer;
-    }
-    setViewport(rect) {
-        this.rect = rect;
-    }
-    remove() {
-        this.engine.renderer.additionalRenderViewports.delete(this.id);
-    }
-}
-export const MaxLayerCount = 30;
-export class Renderer {
-    engine;
-    cache;
-    options;
-    renderView = null;
-    webGlRenderer;
-    raycaster;
-    renderers = {};
-    requestFrameFuncs = [];
-    activeComposition;
-    nullCanvas;
-    activeCanvas;
-    composer;
-    particleSystems = [];
-    stats;
-    onResizeFuncs = [];
-    loadingManager;
-    loading = false;
-    loadingProgress = 0;
-    activeCamera;
-    editorCamera;
-    editorCameraWorldMatrix = new Matrix4();
-    renderOptions = new RenderOptions();
-    mainRenderView;
-    mainRenderViewport;
-    additionalRenderViewports = new Map();
-    backgroundOverrideColor;
-    targetAspectRatio;
-    renderMode = RenderMode.Forward;
-    updateRender = false;
-    alwaysRender = false;
-    rendering = false;
-    automaticPointerLock = false;
-    emitFramebuffer = false;
-    info;
-    layers = [];
-    // The size of the actual rendering
-    width = 0;
-    height = 0;
-    // The size of the container render view. This might be bigger due to target aspect ratio
-    viewWidth;
-    viewHeight;
-    mousePos = new Vector2();
-    mousePosDown = new Vector2();
-    mousePosNormalized = new Vector2();
-    mousePosDownNormalized = new Vector2();
-    editorOutputOptions = [];
-    editorOutputOption;
-    viewHelper;
-    rootItem;
-    materials = [];
-    // Default resources (three.js)
-    defaultEnvMap;
-    shadowTexture;
-    wireframeMaterial;
-    wireframeLineMaterial;
-    defaultUvTestTexture;
-    // XR
-    xrControllerModelFactory;
-    xrController1;
-    xrController2;
-    xrSession;
-    getCurrentTime = () => performance.now();
-    timeProviderSet = false;
-    _removeEventListeners;
-    _propagateCollabCameraMatrix;
-    constructor(renderView, engine, cache, options) {
-        if (!cache)
-            throw "Renderer(): cache not set!";
-        this.options = options;
-        this.renderView = renderView;
-        this.engine = engine;
-        this.cache = cache;
-        this.nullCanvas = new Canvas(this, "Null Canvas");
-        this.activeCanvas = this.nullCanvas;
-        this.renderers = {
-            forward: new ForwardRenderer(this.engine)
-        };
-        for (let i = 0; i < MaxLayerCount; i++) {
-            this.layers.push(`Layer ${i + 1}`);
-        }
-        // Initialization of renderer
-        // ---------------------------------------------------------------------
-        let webGlRenderer = new WebGLRenderer(options);
-        webGlRenderer.xr.enabled = true;
-        // This is needed so we can focus the canvas
-        webGlRenderer.domElement.setAttribute("tabindex", 1);
-        if (this.renderView)
-            this.renderView.appendChild(webGlRenderer.domElement);
-        try {
-            if (options.canvas) {
-                this.width = options.canvas.width;
-                this.height = options.canvas.height;
-            }
-            else if (this.renderView) {
-                this.width = this.renderView.clientWidth || 320;
-                this.height = this.renderView.clientHeight || 200;
-            }
-            else {
-                this.width = webGlRenderer.domElement.clientWidth || 320;
-                this.height = webGlRenderer.domElement.clientHeight || 200;
-            }
-        }
-        catch {
-            // todo
-        }
-        webGlRenderer.setSize(this.width, this.height);
-        this.webGlRenderer = webGlRenderer;
-        this.setDevicePixelRatio();
-        this.setShadowType(ShadowMode.Pcf);
-        this.setRendererSettings();
-        //this.setupXrControllers();
-        this.composer = new Composer(this.engine, this);
-        this.raycaster = new Raycaster();
-        this.wireframeMaterial = new MeshBasicMaterial();
-        this.wireframeMaterial.color = new Color(0x808080);
-        this.wireframeMaterial.polygonOffset = true;
-        this.wireframeMaterial.polygonOffsetFactor = 4;
-        this.wireframeMaterial.polygonOffsetUnits = 2;
-        this.wireframeLineMaterial = new MeshBasicMaterial();
-        this.wireframeLineMaterial.color = new Color(0xffffff);
-        this.wireframeLineMaterial.wireframe = true;
-        this.wireframeLineMaterial.transparent = true;
-        this.wireframeLineMaterial.blending = AdditiveBlending;
-        this.wireframeLineMaterial.depthFunc = LessDepth;
-        this.engine.eventBus.$on("item:contentUpdated", () => this.update());
-        for (const key in this.renderers) {
-            this.renderers[key].init(this, this.engine);
-        }
-        // Main and additional render views
-        // ---------------------------------------------------------------------
-        this.mainRenderView = new RenderView(this.engine, this, "MainRenderView", true);
-        this.initLoadingManager();
-        this.initStats();
-        this.hookEvents();
-        // Throttled function to propagate the editor camera matrix to collab server
-        // ---------------------------------------------------------------------
-        this._propagateCollabCameraMatrix = lodash.throttle((matrix) => {
-            const collab = this.engine.apiClient.getCollab();
-            const matrix4Tuple = matrix.toArray();
-            collab.setLocalStateField("camera", matrix4Tuple);
-        }, 500);
-        // When awareness changes, we want to update the avatar cameras in the root scene
-        // ---------------------------------------------------------------------
-        this.engine.eventBus.$on('collab:awareness:changed', (event) => {
-            const rootScene = this.engine.mainSceneGraphCollection.getRootScene();
-            rootScene.updateCollabAvatars(event.users, event.states);
-        });
-    }
-    async init() {
-        await loadFontFace("OpenSansRegular", openSansRegularUrl);
-        this.defaultUvTestTexture = textureTools.generateUVTestTexture();
-    }
-    hookEvents() {
-        if (this.renderView) {
-            // We have to remember the pressed buttons of the pointer controller because we will only ever receive a single
-            // pointerdown event when a button is pressed. if that button is held and a second button is pressed, this will
-            // not cause a second event but it will trigger a pointermove event instead with no actual movement and only
-            // changed buttons. By comparing to our pointerButtonBits, we can produce the correct pointerdown events ourselves.
-            let pointerButtonBits = [];
-            const BIT_TO_BUTTON = [0, 2, 1];
-            const _onPointerDown = (event) => {
-                this.mousePosDown = new Vector2(event.offsetX, event.offsetY);
-                this.mousePosDownNormalized = this.getNormalizedMouseCoords(event);
-                pointerButtonBits = tools.getSetBitPositions(event.buttons);
-                const result = this.transformCoordsToRenderView({ x: event.offsetX, y: event.offsetY });
-                if (result?.isMainRenderView) {
-                    this.engine.player.pushEvent({
-                        type: "pointerdown",
-                        x: result.x,
-                        y: result.y,
-                        button: event.button,
-                    });
-                }
-            };
-            const _onPointerUp = (event) => {
-                this.mousePos = new Vector2(event.offsetX, event.offsetY);
-                this.mousePosNormalized = this.getNormalizedMouseCoords(event);
-                if (this.mousePosDown && this.mousePos) {
-                    const diff = this.mousePosNormalized.distanceTo(this.mousePosDownNormalized);
-                    const shouldRaycast = diff < 0.01 && this.activeCamera && this.raycaster;
-                    if (shouldRaycast) {
-                        const intersections = this.raycast(this.mousePos);
-                        this.engine.eventBus.$emit("engine:raycastResult", {
-                            event,
-                            intersections,
-                        });
-                        this.engine.player.pushEvent({
-                            type: "pick",
-                            intersections: intersections,
-                        });
-                    }
-                }
-                pointerButtonBits = tools.getSetBitPositions(event.buttons);
-                const result = this.transformCoordsToRenderView({ x: event.offsetX, y: event.offsetY });
-                if (result?.isMainRenderView) {
-                    this.engine.player.pushEvent({
-                        type: "pointerup",
-                        x: result.x,
-                        y: result.y,
-                        button: event.button,
-                    });
-                }
-            };
-            const _onPointerMove = (event) => {
-                const newPointerButtonBits = tools.getSetBitPositions(event.buttons);
-                const { added, removed } = tools.arrayDiff(pointerButtonBits, newPointerButtonBits);
-                pointerButtonBits = newPointerButtonBits;
-                const result = this.transformCoordsToRenderView({ x: event.offsetX, y: event.offsetY });
-                if (result?.isMainRenderView) {
-                    for (const bit of added) {
-                        this.engine.player.pushEvent({
-                            type: "pointerdown",
-                            x: result.x,
-                            y: result.y,
-                            button: BIT_TO_BUTTON[bit]
-                        });
-                    }
-                    for (const bit of removed) {
-                        this.engine.player.pushEvent({
-                            type: "pointerup",
-                            x: result.x,
-                            y: result.y,
-                            button: BIT_TO_BUTTON[bit]
-                        });
-                    }
-                    this.engine.player.pushEvent({
-                        type: "pointermove",
-                        x: result.x,
-                        y: result.y,
-                        movementX: event.movementX,
-                        movementY: event.movementY
-                    });
-                }
-            };
-            const _onClick = (event) => {
-                this.lockPointer();
-                const result = this.transformCoordsToRenderView({ x: event.offsetX, y: event.offsetY });
-                if (result?.isMainRenderView) {
-                    if (!this.engine.player.pushEvent({
-                        type: "pointerclick",
-                        x: result.x,
-                        y: result.y,
-                        button: event.button,
-                    })) {
-                        if (this.editorOutputOption.outputMode === OutputMode.EditorCamera)
-                            if (this.viewHelper)
-                                this.viewHelper.handleClick(event);
-                    }
-                }
-            };
-            const _onDoubleClick = (event) => {
-                const result = this.transformCoordsToRenderView({ x: event.offsetX, y: event.offsetY });
-                if (result?.isMainRenderView) {
-                    this.engine.player.pushEvent({
-                        type: "pointerdoubleclick",
-                        x: result.x,
-                        y: result.y,
-                        button: event.button,
-                    });
-                }
-            };
-            const _onWheel = (event) => {
-                // The wheel event is processed by the engine, so we need to prevent its default action.
-                if (this.options.preventWheelEventDefault)
-                    event.preventDefault();
-                const result = this.transformCoordsToRenderView({ x: event.offsetX, y: event.offsetY });
-                if (result?.isMainRenderView) {
-                    this.engine.player.pushEvent({
-                        type: "wheel",
-                        deltaX: event.deltaX,
-                        deltaY: event.deltaY,
-                        deltaZ: event.deltaZ,
-                        deltaMode: event.deltaMode,
-                    });
-                }
-            };
-            const _onPointerOut = (event) => {
-                this.engine.player.pushEvent({
-                    type: "pointerout",
-                    x: event.offsetX,
-                    y: event.offsetY,
-                });
-            };
-            const _onPointerLeave = (event) => {
-                this.engine.player.pushEvent({
-                    type: "pointerleave",
-                    x: event.offsetX,
-                    y: event.offsetY,
-                });
-            };
-            const mapTouches = (touches, event) => {
-                const target = event.currentTarget;
-                if (!target)
-                    return [];
-                const rect = target.getBoundingClientRect();
-                return Array.from(touches)
-                    .map(touch => {
-                    const coords = {
-                        x: touch.clientX - rect.left,
-                        y: touch.clientY - rect.top,
-                    };
-                    // correct coordinates (same as pointerevents)
-                    const result = this.transformCoordsToRenderView(coords);
-                    if (result) {
-                        return {
-                            identifier: touch.identifier,
-                            x: result.x,
-                            y: result.y,
-                            radiusX: touch.radiusX,
-                            radiusY: touch.radiusY,
-                            rotationAngle: touch.rotationAngle,
-                            force: touch.force,
-                        };
-                    }
-                    return null;
-                })
-                    //filter out any touches that were not in a render view.
-                    .filter(Boolean);
-            };
-            const _onTouchStart = (event) => {
-                this.engine.player.pushEvent({
-                    type: "touchstart",
-                    altKey: event.altKey,
-                    metaKey: event.metaKey,
-                    shiftKey: event.shiftKey,
-                    ctrlKey: event.ctrlKey,
-                    touches: mapTouches(event.touches, event),
-                    changedTouches: mapTouches(event.changedTouches, event)
-                });
-            };
-            const _onTouchMove = (event) => {
-                this.engine.player.pushEvent({
-                    type: "touchmove",
-                    altKey: event.altKey,
-                    metaKey: event.metaKey,
-                    shiftKey: event.shiftKey,
-                    ctrlKey: event.ctrlKey,
-                    touches: mapTouches(event.touches, event),
-                    changedTouches: mapTouches(event.changedTouches, event)
-                });
-            };
-            const _onTouchEnd = (event) => {
-                this.engine.player.pushEvent({
-                    type: "touchend",
-                    altKey: event.altKey,
-                    metaKey: event.metaKey,
-                    shiftKey: event.shiftKey,
-                    ctrlKey: event.ctrlKey,
-                    touches: mapTouches(event.touches, event),
-                    changedTouches: mapTouches(event.changedTouches, event)
-                });
-            };
-            const _onTouchCancel = (event) => {
-                this.engine.player.pushEvent({
-                    type: "touchcancel",
-                    altKey: event.altKey,
-                    metaKey: event.metaKey,
-                    shiftKey: event.shiftKey,
-                    ctrlKey: event.ctrlKey,
-                    touches: mapTouches(event.touches, event),
-                    changedTouches: mapTouches(event.changedTouches, event)
-                });
-            };
-            const _onKeyDown = (event) => {
-                // Prevent the default behaviour, because we are handling the event in the engine.
-                if (!this.engine.imgui.wantCaptureKeyboard())
-                    event.preventDefault();
-                // only trigger keydown once
-                if (event.repeat) {
-                    return;
-                }
-                this.engine.player.pushEvent({
-                    type: "keydown",
-                    altKey: event.altKey,
-                    code: event.code,
-                    ctrlKey: event.ctrlKey,
-                    isComposing: event.isComposing,
-                    key: event.key,
-                    location: event.location,
-                    metaKey: event.metaKey,
-                    repeat: event.repeat,
-                    shiftKey: event.shiftKey,
-                });
-            };
-            const _onKeyUp = (event) => {
-                // Prevent the default behaviour, because we are handling the event in the engine.
-                if (!this.engine.imgui.wantCaptureKeyboard())
-                    event.preventDefault();
-                this.engine.player.pushEvent({
-                    type: "keyup",
-                    altKey: event.altKey,
-                    code: event.code,
-                    ctrlKey: event.ctrlKey,
-                    isComposing: event.isComposing,
-                    key: event.key,
-                    location: event.location,
-                    metaKey: event.metaKey,
-                    repeat: event.repeat,
-                    shiftKey: event.shiftKey,
-                });
-            };
-            const _onDragOver = (event) => {
-                event.preventDefault();
-            };
-            const _onDrop = (event) => {
-                if (!this.raycaster)
-                    return;
-                event.preventDefault();
-                if (event.dataTransfer) {
-                    const draggedNodes = JSON.parse(event.dataTransfer.getData("draggedNodes"));
-                    if (Array.isArray(draggedNodes)) {
-                        for (const draggedNode of draggedNodes) {
-                            const { id, type } = draggedNode;
-                            if (!id || !type)
-                                continue;
-                            const mousePos = new Vector2(event.offsetX, event.offsetY);
-                            const intersections = this.raycast(mousePos);
-                            this.engine.eventBus.$emit("renderer:itemDrop", draggedNode, intersections);
-                        }
-                    }
-                }
-            };
-            const _lockChangeAlert = () => {
-                const canvas = this.webGlRenderer.domElement;
-                if (document.pointerLockElement === canvas) {
-                    console.log("The pointer lock status is now locked");
-                }
-                else {
-                    console.log("The pointer lock status is now unlocked");
-                }
-            };
-            const _lockError = (err) => {
-                console.log("Pointer lock failed: ", err);
-            };
-            const _handleVisibilityChange = () => {
-                const eventToEmit = document.visibilityState === "visible" ? "player:resume" : "player:pause";
-                this.engine.eventBus.$emit(eventToEmit, PauseType.TAB);
-            };
-            const _onDeviceOrientation = (event) => {
-                this.engine.player.pushEvent({
-                    type: "deviceorientation",
-                    alpha: event.alpha,
-                    beta: event.beta,
-                    gamma: event.gamma
-                });
-            };
-            const _onDeviceMotion = (event) => {
-                const acc = event.accelerationIncludingGravity;
-                if (acc) {
-                    this.engine.player.pushEvent({
-                        type: "devicemotion",
-                        x: acc.x,
-                        y: acc.y,
-                        z: acc.z
-                    });
-                }
-            };
-            document.addEventListener("pointerlockchange", _lockChangeAlert, false);
-            document.addEventListener("pointerlockerror", _lockError, false);
-            document.addEventListener("visibilitychange", _handleVisibilityChange, false);
-            const passiveEventsSupported = tools.arePassiveEventsSupported();
-            const eventOpts = passiveEventsSupported ? { passive: false, capture: true } : false;
-            this.renderView.addEventListener("pointerdown", _onPointerDown, eventOpts);
-            this.renderView.addEventListener("pointermove", _onPointerMove, eventOpts);
-            this.renderView.addEventListener("click", _onClick, eventOpts);
-            this.renderView.addEventListener("dblclick", _onDoubleClick, eventOpts);
-            this.renderView.addEventListener("wheel", _onWheel, eventOpts);
-            this.renderView.addEventListener("pointerout", _onPointerOut, eventOpts);
-            this.renderView.addEventListener("pointerleave", _onPointerLeave, eventOpts);
-            this.renderView.addEventListener("pointerup", _onPointerUp, eventOpts);
-            this.renderView.addEventListener("dragover", _onDragOver, eventOpts);
-            this.renderView.addEventListener("drop", _onDrop, eventOpts);
-            this.renderView.addEventListener("keydown", _onKeyDown, eventOpts);
-            this.renderView.addEventListener("keyup", _onKeyUp, eventOpts);
-            this.renderView.addEventListener("touchstart", _onTouchStart, eventOpts);
-            this.renderView.addEventListener("touchend", _onTouchEnd, eventOpts);
-            this.renderView.addEventListener("touchcancel", _onTouchCancel, eventOpts);
-            this.renderView.addEventListener("touchmove", _onTouchMove, eventOpts);
-            if (self.DeviceOrientationEvent) {
-                const requestPermission = DeviceOrientationEvent.requestPermission;
-                const iOS = typeof requestPermission === 'function';
-                if (iOS) {
-                    requestPermission().then((response) => {
-                        if (response === 'granted' && this.renderView) {
-                            this.renderView.addEventListener("deviceorientation", _onDeviceOrientation, eventOpts);
-                            this.renderView.addEventListener("devicemotion", _onDeviceMotion, eventOpts);
-                        }
-                    }).catch(console.error);
-                }
-                else {
-                    this.renderView.addEventListener("deviceorientation", _onDeviceOrientation, eventOpts);
-                    this.renderView.addEventListener("devicemotion", _onDeviceMotion, eventOpts);
-                }
-            }
-            this._removeEventListeners = () => {
-                document.removeEventListener("pointerlockchange", _lockChangeAlert);
-                document.removeEventListener("pointerlockerror", _lockError);
-                document.removeEventListener("visibilitychange", _handleVisibilityChange);
-                if (this.renderView) {
-                    this.renderView.removeEventListener("pointerdown", _onPointerDown);
-                    this.renderView.removeEventListener("pointermove", _onPointerMove);
-                    this.renderView.removeEventListener("click", _onClick);
-                    this.renderView.removeEventListener("dblclick", _onDoubleClick);
-                    this.renderView.removeEventListener("wheel", _onWheel);
-                    this.renderView.removeEventListener("pointerout", _onPointerOut);
-                    this.renderView.removeEventListener("pointerleave", _onPointerLeave);
-                    this.renderView.removeEventListener("pointerup", _onPointerUp);
-                    this.renderView.removeEventListener("dragover", _onDragOver);
-                    this.renderView.removeEventListener("drop", _onDrop);
-                    this.renderView.removeEventListener("keydown", _onKeyDown);
-                    this.renderView.removeEventListener("keyup", _onKeyUp);
-                    this.renderView.removeEventListener("touchstart", _onTouchStart);
-                    this.renderView.removeEventListener("touchend", _onTouchEnd);
-                    this.renderView.removeEventListener("touchcancel", _onTouchCancel);
-                    this.renderView.removeEventListener("touchmove", _onTouchMove);
-                    this.renderView.removeEventListener("deviceorientation", _onDeviceOrientation);
-                    this.renderView.removeEventListener("devicemotion", _onDeviceMotion);
-                }
-            };
-        }
-    }
-    getDefaultUvTestTexture() {
-        return this.defaultUvTestTexture;
-    }
-    setTargetAspectRatio(ratio) {
-        this.targetAspectRatio = ratio;
-    }
-    setShadowType(mode) {
-        switch (mode) {
-            case ShadowMode.Basic:
-                this.webGlRenderer.shadowMap.type = BasicShadowMap;
-                break;
-            case ShadowMode.Pcf:
-                this.webGlRenderer.shadowMap.type = PCFShadowMap;
-                break;
-            case ShadowMode.PcfSoft:
-                this.webGlRenderer.shadowMap.type = PCFSoftShadowMap;
-                break;
-            case ShadowMode.Vsm:
-                this.webGlRenderer.shadowMap.type = VSMShadowMap;
-                break;
-        }
-        this.webGlRenderer.shadowMap.enabled = true;
-    }
-    setAutomaticPointerLock(value) {
-        this.automaticPointerLock = value;
-    }
-    async lockPointer(force = false) {
-        // check if we want automatic locking
-        const isPlaying = this.engine.player.isPlaying();
-        if (!isPlaying || !(this.automaticPointerLock || force))
-            return;
-        // check if we already have a locked pointer
-        const canvas = this.webGlRenderer.domElement;
-        if (document.pointerLockElement === canvas)
-            return;
-        try {
-            await canvas.requestPointerLock();
-        }
-        catch (err) {
-            console.error(err);
-        }
-    }
-    unlockPointer() {
-        // check if we have a locked pointer
-        const canvas = this.webGlRenderer.domElement;
-        if (document.pointerLockElement !== canvas)
-            return;
-        try {
-            document.exitPointerLock();
-        }
-        catch (err) {
-            console.error(err);
-        }
-    }
-    isPointerLocked() {
-        const canvas = this.webGlRenderer.domElement;
-        return document.pointerLockElement === canvas;
-    }
-    setRenderMode(mode) {
-        this.renderMode = mode;
-        const impl = this._getRendererImpl();
-        if (impl)
-            impl.refresh();
-    }
-    getExtension(name) {
-        if (this.webGlRenderer) {
-            return this.webGlRenderer.extensions.get(name);
-        }
-        return null;
-    }
-    hasExtension(name) {
-        if (this.webGlRenderer) {
-            return this.webGlRenderer.extensions.has(name);
-        }
-        return false;
-    }
-    isWebGL2() {
-        if (this.webGlRenderer) {
-            const caps = this.webGlRenderer.capabilities;
-            return caps.isWebGL2;
-        }
-        return false;
-    }
-    getInfo() {
-        if (this.webGlRenderer) {
-            return {
-                capabilities: this.webGlRenderer.capabilities,
-                extensions: this.webGlRenderer.extensions,
-                info: this.webGlRenderer.info,
-            };
-        }
-        return null;
-    }
-    ensureShadowTexture() {
-        if (this.shadowTexture)
-            return this.shadowTexture;
-        const pixelSize = 256;
-        const canvas = document.createElement("canvas");
-        canvas.width = pixelSize;
-        canvas.height = pixelSize;
-        const ctx = canvas.getContext("2d");
-        const gradient = ctx.createRadialGradient(pixelSize / 2, pixelSize / 2, 0, pixelSize / 2, pixelSize / 2, pixelSize / 2);
-        for (let i = 0; i < 128; i++) {
-            let grey = (128 - i) / 128;
-            grey *= grey;
-            grey *= 255;
-            gradient.addColorStop(i / 128, `rgb(${grey}, ${grey}, ${grey}`);
-        }
-        ctx.fillStyle = gradient;
-        ctx.fillRect(0, 0, pixelSize, pixelSize);
-        this.shadowTexture = new Texture(canvas);
-        this.shadowTexture.needsUpdate = true;
-        return this.shadowTexture;
-    }
-    ensureDefaultEnvMap() {
-        if (!this.defaultEnvMap) {
-            const width = 128;
-            const height = 128;
-            const size = width * height;
-            const data = new Uint8Array(4 * size);
-            for (let i = 0; i < size; i++) {
-                data[i * 4] = 255;
-                data[i * 4 + 1] = 255;
-                data[i * 4 + 2] = 255;
-                data[i * 4 + 3] = 255;
-            }
-            const dataTexture = new DataTexture(data, width, height, RGBAFormat, UnsignedByteType);
-            dataTexture.needsUpdate = true;
-            const pmremGenerator = new PMREMGenerator(this.webGlRenderer);
-            pmremGenerator.compileEquirectangularShader();
-            const target = pmremGenerator.fromEquirectangular(dataTexture);
-            pmremGenerator.dispose();
-            this.defaultEnvMap = target.texture;
-        }
-        return this.defaultEnvMap;
-    }
-    getEditorOutputOptions() {
-        return this.editorOutputOptions;
-    }
-    getEditorOutputOption() {
-        if (this.editorOutputOption)
-            return this.editorOutputOption.id;
-        else
-            return null;
-    }
-    updateEditorOutputOptions() {
-        const options = [{
-                outputMode: OutputMode.EditorCamera,
-                name: "Free camera",
-                id: "freecam",
-            }];
-        const cameras = this.engine.mainSceneGraphCollection.findItemsByType("Camera");
-        for (const camera of cameras) {
-            options.push({
-                outputMode: OutputMode.SceneCamera,
-                camera: camera,
-                name: `Camera: ${camera.getName() || "unnamed"}`,
-                id: `camera_${camera.getId()}`
-            });
-        }
-        const compositions = this.engine.loadingManager.getItemInstancesOfType("Composition");
-        for (const composition of compositions) {
-            options.push({
-                outputMode: OutputMode.Composition,
-                composition: composition,
-                name: `Composition: ${composition.getName()}`,
-                id: `composition_${composition.getId()}`
-            });
-        }
-        this.editorOutputOptions = options;
-        this.engine.eventBus.$emit('renderer:outputOptionsChanged', options);
-    }
-    updateEditorCameraWorldMatrix() {
-        // This function will update the editor camera's world matrix and propagate it to the collab server
-        const collab = this.engine.apiClient.getCollab();
-        if (this.editorCamera && collab.isActive()) {
-            this.editorCamera.updateWorldMatrix(true, false);
-            if (!this.editorCamera.matrixWorld.equals(this.editorCameraWorldMatrix)) {
-                this.editorCameraWorldMatrix.copy(this.editorCamera.matrixWorld);
-                this._propagateCollabCameraMatrix(this.editorCameraWorldMatrix);
-            }
-        }
-    }
-    setEditorOutputOption(id) {
-        let found = false;
-        const options = this.getEditorOutputOptions();
-        for (const option of options) {
-            if (option.id === id) {
-                this.editorOutputOption = option;
-                found = true;
-                break;
-            }
-        }
-        if (!found) {
-            console.warn("Editor output option not found: " + id);
-            return;
-        }
-        switch (this.editorOutputOption.outputMode) {
-            // The renderer will show one of the 4 editor cameras. Check which one is desired and set it.
-            // ---------------------------------------------------------------------------------------------
-            case OutputMode.EditorCamera: {
-                if (this.activeCamera === this.editorCamera) {
-                    return;
-                }
-                this.activeCamera = this.editorCamera;
-                this.getEditorScene().recreateControls(false, this.activeCamera);
-                break;
-            }
-            // The renderer will show one of the user defined cameras in the scenegraph
-            // ---------------------------------------------------------------------------------------------
-            case OutputMode.SceneCamera: {
-                this.activeCamera = this.editorOutputOption.camera?.getObject();
-                break;
-            }
-            // The renderer will show one of the compositions, so need to do anything here
-            // ---------------------------------------------------------------------------------------------
-            case OutputMode.Composition: {
-                break;
-            }
-        }
-        this.updateRender = true;
-        this.engine.eventBus.$emit('renderer:outputOptionChanged', this.editorOutputOption.id);
-        return this.activeCamera;
-    }
-    setOrbitControls() {
-        this.getEditorScene().setOrbitControls(this.activeCamera);
-    }
-    setFpsControls() {
-        this.getEditorScene().setFpsControls();
-    }
-    setTransformControlItems(items) {
-        this.getEditorScene().setTransformControlItems(items);
-    }
-    setControlsEnabled(value) {
-        this.getEditorScene().setControlsEnabled(value);
-    }
-    removeComposition() {
-        this.setComposition(undefined);
-    }
-    setComposition(composition) {
-        this.activeComposition = composition;
-    }
-    setRootItemIfEmpty(item) {
-        if (!this.rootItem)
-            this.rootItem = item;
-    }
-    listenOnResize(func) {
-        this.onResizeFuncs.push(func);
-    }
-    getNavigatorXr() {
-        if ("xr" in navigator) {
-            return navigator.xr;
-        }
-        return null;
-    }
-    async isVrAvailable() {
-        try {
-            const xr = this.getNavigatorXr();
-            if (xr) {
-                return xr.isSessionSupported("immersive-vr");
-            }
-        }
-        catch (err) {
-            console.error(err);
-        }
-        return false;
-    }
-    isVrActive() {
-        return this.xrSession != null;
-    }
-    toggleVr() {
-        const onSessionStarted = (session) => {
-            session.addEventListener("end", onSessionEnded);
-            this.webGlRenderer.xr.setSession(session);
-            this.xrSession = session;
-        };
-        const onSessionEnded = () => {
-            if (this.xrSession) {
-                this.xrSession.removeEventListener("end", onSessionEnded);
-                this.xrSession = undefined;
-            }
-        };
-        if (!this.xrSession) {
-            const xr = this.getNavigatorXr();
-            xr.requestSession("immersive-vr", {
-                optionalFeatures: ["local-floor", "bounded-floor", "hand-tracking"],
-            }).then(onSessionStarted);
-        }
-        else {
-            this.xrSession.end();
-        }
-    }
-    startVr() {
-        if (!this.isVrActive()) {
-            this.toggleVr();
-        }
-    }
-    stopVr() {
-        if (this.isVrActive()) {
-            this.toggleVr();
-        }
-    }
-    setupXrControllers() {
-        const _this = this;
-        function onSelectStart() {
-            console.log("XR Select start");
-        }
-        function onSelectEnd() {
-            console.log("XR Select end");
-        }
-        function setupController(index) {
-            const xr = _this.webGlRenderer.xr;
-            // Create XR Controller
-            // -------------------------------------------------------------------------------------------------
-            let xrController = xr.getController(index);
-            xrController.name = "XRController";
-            xrController.addEventListener("selectstart", onSelectStart);
-            xrController.addEventListener("selectend", onSelectEnd);
-            xrController.addEventListener("connected", function (event) {
-                console.log("XR Controller connected", event);
-                //this.add( buildController( event.data ) );
-            });
-            xrController.addEventListener("disconnected", function () {
-                console.log("XR Controller disconnected", event);
-                //this.remove( this.children[ 0 ] );
-            });
-            const rootScene = _this.engine.mainSceneGraphCollection.getRootScene();
-            rootScene.add(xrController);
-            // Create XR Controller Grip
-            // -------------------------------------------------------------------------------------------------
-            let xrControllerGrip;
-            if (_this.xrControllerModelFactory) {
-                xrControllerGrip = xr.getControllerGrip(index);
-                xrControllerGrip.name = "XRControllerGrip";
-                xrControllerGrip.add(_this.xrControllerModelFactory.createControllerModel(xrControllerGrip));
-                rootScene.add(xrControllerGrip);
-            }
-            return { controller: xrController, grip: xrControllerGrip };
-        }
-        this.xrController1 = setupController(0);
-        this.xrController2 = setupController(1);
-    }
-    setRendererSettings(renderTarget, outputEncoding, toneMapping, toneMappingExposure) {
-        // Set defaults
-        // -------------------------------------------------
-        if (outputEncoding === undefined)
-            outputEncoding = "Linear";
-        if (toneMappingExposure === undefined)
-            toneMappingExposure = 1.0;
-        if (toneMapping === undefined)
-            toneMapping = "Reinhard";
-        // Create objects
-        // -------------------------------------------------
-        let outputEncodingObj = LinearSRGBColorSpace;
-        switch (outputEncoding) {
-            case "Linear":
-                break;
-            case "sRGB":
-                outputEncodingObj = SRGBColorSpace;
-                break;
-            default:
-                console.error("Unknown output encoding", outputEncoding);
-                break;
-        }
-        let toneMappingObj = ReinhardToneMapping;
-        switch (toneMapping) {
-            case "None":
-                toneMappingObj = NoToneMapping;
-                break;
-            case "Linear":
-                toneMappingObj = LinearToneMapping;
-                break;
-            case "Reinhard":
-                break;
-            case "Cineon":
-                toneMappingObj = CineonToneMapping;
-                break;
-            case "ACESFilmic":
-                toneMappingObj = ACESFilmicToneMapping;
-                break;
-            default:
-                console.error("Unknown tone mapping mode", toneMapping);
-                break;
-        }
-        // Set configuration
-        // -------------------------------------------------
-        this.webGlRenderer.toneMapping = toneMappingObj;
-        this.webGlRenderer.toneMappingExposure = toneMappingExposure;
-        if (!renderTarget) {
-            this.webGlRenderer.outputColorSpace = outputEncodingObj;
-        }
-        else {
-            renderTarget.texture.colorSpace = outputEncodingObj;
-        }
-    }
-    setCameraModeOverride(mode) {
-        this.mainRenderView.setCameraModeOverride(mode);
-    }
-    clearCameraModeOverride() {
-        this.mainRenderView.clearCameraModeOverride();
-    }
-    getCameraMode() {
-        return this.mainRenderView.getCameraMode();
-    }
-    setActiveCamera(camera) {
-        if (camera)
-            this.activeCamera = camera;
-        else
-            this.setEditorOutputOption("freecam");
-    }
-    mapMousePositionToRenderView(pos, normalize = false) {
-        const rect = this.mainRenderViewport || { x: 0, y: 0, width: this.width, height: this.height };
-        pos.x -= rect.x;
-        pos.y -= rect.y;
-        if (normalize) {
-            return {
-                x: pos.x / rect.width * 2 - 1,
-                y: -pos.y / rect.height * 2 + 1,
-            };
-        }
-        else {
-            return pos;
-        }
-    }
-    normalizeMouseCoords(pos, rect) {
-        const r = rect || { x: 0, y: 0, width: this.width, height: this.height };
-        const x = (pos.x / r.width) * 2 - 1;
-        const y = -(pos.y / r.height) * 2 + 1;
-        return new Vector2(x, y);
-    }
-    getNormalizedMouseCoords(event) {
-        return this.normalizeMouseCoords(new Vector2(event.offsetX, event.offsetY));
-    }
-    async shutdown() {
-        console.log("Shutting down renderer.");
-        if (this._removeEventListeners)
-            this._removeEventListeners();
-        this.stopRendering();
-        if (this.wireframeMaterial) {
-            this.wireframeMaterial.dispose();
-        }
-        if (this.wireframeLineMaterial) {
-            this.wireframeLineMaterial.dispose();
-        }
-        if (this.shadowTexture) {
-            this.shadowTexture.dispose();
-        }
-        console.log("Freeing composition...");
-        this.removeComposition();
-        this.composer.dispose();
-        this.composer = null;
-        console.log("Freeing renderer...");
-        if (this.renderView) {
-            this.renderView.removeChild(this.webGlRenderer.domElement);
-        }
-        if (this.mainRenderView) {
-            this.mainRenderView.dispose();
-        }
-        if (this.nullCanvas) {
-            this.nullCanvas.dispose();
-        }
-        this.webGlRenderer.dispose();
-        console.log("Renderer shut down.");
-    }
-    setActiveCanvas(canvas) {
-        this.activeCanvas = canvas || this.nullCanvas;
-    }
-    getActiveCanvas() {
-        return this.activeCanvas;
-    }
-    getWidth() {
-        return this.width;
-    }
-    getHeight() {
-        return this.height;
-    }
-    getCanvas() {
-        if (this.webGlRenderer)
-            return this.webGlRenderer.domElement;
-        return null;
-    }
-    getContext() {
-        if (this.webGlRenderer) {
-            return this.webGlRenderer.getContext();
-        }
-        return null;
-    }
-    verifyShader(type, code) {
-        const gl = this.getContext();
-        const shader = gl.createShader(type === "Vertex" ? gl.VERTEX_SHADER : gl.FRAGMENT_SHADER);
-        gl.shaderSource(shader, code);
-        gl.compileShader(shader);
-        const log = gl.getShaderInfoLog(shader);
-        gl.deleteShader(shader);
-        return log;
-    }
-    initLoadingManager() {
-        this.loadingManager = new LoadingManager();
-        this.loadingManager.onStart = (item, loaded, total) => {
-            this.loadingProgress = (100 / total) * loaded;
-            this.loading = true;
-            this.engine.eventBus.$emit("renderer:loadingStart", item, loaded, total);
-        };
-        this.loadingManager.onProgress = (item, loaded, total) => {
-            this.loadingProgress = (100 / total) * loaded;
-            this.engine.eventBus.$emit("renderer:loadingProgress", item, loaded, total);
-        };
-        this.loadingManager.onError = (url) => {
-            this.engine.eventBus.$emit("renderer:loadingError", url);
-        };
-        this.loadingManager.onLoad = () => {
-            this.loading = false;
-            this.engine.eventBus.$emit("renderer:loadingDone");
-        };
-        this.loadingManager.setURLModifier((url) => {
-            if (this.cache &&
-                !url.startsWith("blob:")) {
-                const objectUrl = this.cache.getObjectUrl(url);
-                if (!objectUrl)
-                    return url;
-                return objectUrl;
-            }
-            else {
-                return url;
-            }
-        });
-    }
-    initStats() {
-        this.stats = new Stats();
-        // this will patch the threejs render function to capture frame times
-        this.stats.init(this.webGlRenderer);
-    }
-    setRenderOptions(options) {
-        // Make sure all values are set and if not, set the default values
-        // --------------------------------------------------------------------
-        if (options.showWireframe === undefined)
-            options.showWireframe = false;
-        if (options.showGrid === undefined)
-            options.showGrid = true;
-        if (options.showAxes === undefined)
-            options.showAxes = true;
-        if (options.showBackground === undefined)
-            options.showBackground = false;
-        if (options.showNormals === undefined)
-            options.showNormals = false;
-        if (options.showHelpers === undefined)
-            options.showHelpers = true;
-        this.updateRender = true;
-        this.renderOptions.set(options);
-    }
-    getEditorScene() {
-        return this.engine.mainSceneGraphCollection.getRootScene();
-    }
-    getRenderOptions() {
-        return this.renderOptions.get();
-    }
-    update() {
-        this.updateRender = true;
-        const impl = this._getRendererImpl();
-        if (impl)
-            impl.refresh();
-    }
-    getEditorCameraTransform() {
-        const cam = this.editorCamera;
-        if (cam)
-            return {
-                position: JSON.parse(JSON.stringify(cam.position)),
-                rotation: { x: cam.quaternion.x, y: cam.quaternion.y, z: cam.quaternion.z, w: cam.quaternion.w }
-            };
-        else
-            return null;
-    }
-    setViewHelperPosition(x, y) {
-        if (this.viewHelper) {
-            this.viewHelper.renderOffset.x = x;
-            this.viewHelper.renderOffset.y = this.height - y;
-        }
-    }
-    initEditorCamera(camTransform, nearPlane, farPlane) {
-        nearPlane = nearPlane || 0.01;
-        farPlane = farPlane || 1000;
-        let camPos = camTransform.position || new Vector3(1, 1, 1);
-        let camQuaternion = camTransform.rotation || new Quaternion();
-        if (!(camPos instanceof Vector3)) {
-            camPos = new Vector3(camPos.x || 0, camPos.y || 0, camPos.z || 0);
-        }
-        if (!(camQuaternion instanceof Quaternion)) {
-            camQuaternion = new Quaternion(camQuaternion.x || 0, camQuaternion.y || 0, camQuaternion.z || 0, camQuaternion.w || 1);
-        }
-        const rootScene = this.engine.mainSceneGraphCollection.getRootScene();
-        this.editorCamera = new PerspectiveCamera(60, 4 / 3, nearPlane, farPlane);
-        this.editorCamera.name = "Free camera";
-        this.editorCamera.position.set(camPos.x, camPos.y, camPos.z);
-        if (camQuaternion)
-            this.editorCamera.quaternion.set(camQuaternion.x, camQuaternion.y, camQuaternion.z, camQuaternion.w);
-        this.editorCamera.layers.enableAll();
-        rootScene.add(this.editorCamera);
-        this.viewHelper = new ViewHelper(this.editorCamera, this.webGlRenderer.domElement, 128);
-        this.updateEditorOutputOptions();
-        return this.setEditorOutputOption("freecam");
-    }
-    /**
-     * Set the cullmode of the editor cameras. cullmode should be an array of all the layers to cull, so for example [0, 4, 31]
-     * @param cullmode
-     */
-    setEditorCameraCullmode(cullmode) {
-        this.editorCamera.layers.enableAll();
-        for (const mode of cullmode) {
-            this.editorCamera.layers.disable(mode);
-        }
-    }
-    getLayers() {
-        return this.layers;
-    }
-    setLayers(layers) {
-        if (!Array.isArray(layers))
-            throw `Layers has to be an array of string entries!`;
-        for (let i = 0; i < MaxLayerCount; i++) {
-            if (layers.length <= i)
-                this.layers[i] = "";
-            else
-                this.layers[i] = layers[i].toString();
-        }
-        this.engine.eventBus.$emit('renderer:layersChanged');
-    }
-    updateEditorCameraPosition(camPos) {
-        if (this.editorCamera) {
-            this.editorCamera.position.set(camPos.x, camPos.y, camPos.z);
-        }
-    }
-    initEditorFeatures(camera) {
-        const editorScene = this.getEditorScene();
-        editorScene.addDefaultGrid();
-        editorScene.addDefaultAxes();
-        editorScene.createFpsControls(camera);
-        editorScene.createTransformControls();
-    }
-    raycast(position, camera, isNormalized = false) {
-        if (!this.raycaster)
-            return [];
-        camera = camera || this.activeCamera;
-        position = position || this.mousePos;
-        if (!camera)
-            return [];
-        let positionNormalized;
-        if (!isNormalized) {
-            // We need to adjust mouse position to the actual render view that it belongs to
-            // -------------------------------------------------------------------------------
-            let rect;
-            if (this.mainRenderViewport) {
-                if (position.x >= this.mainRenderViewport.x &&
-                    position.y >= this.mainRenderViewport.y &&
-                    position.x < this.mainRenderViewport.x + this.mainRenderViewport.width &&
-                    position.y < this.mainRenderViewport.y + this.mainRenderViewport.height) {
-                    position.x -= this.mainRenderViewport.x;
-                    position.y -= this.mainRenderViewport.y;
-                    rect = this.mainRenderViewport;
-                }
-                else {
-                    return [];
-                }
-            }
-            else {
-                rect = { x: 0, y: 0, width: this.width, height: this.height };
-            }
-            positionNormalized = this.normalizeMouseCoords(position, rect);
-        }
-        else {
-            positionNormalized = position;
-        }
-        this.raycaster.setFromCamera(positionNormalized, camera);
-        this.raycaster.layers.mask = camera.layers.mask;
-        this.raycaster.layers.disable(LayerIndexAxesHelper);
-        const scene = this.engine.activeSceneGraphCollection.getRootScene();
-        const intersections = this.raycaster.intersectObjects(scene.children);
-        return intersections;
-    }
-    setMainRenderView(x, y, width, height) {
-        this.mainRenderViewport = { x, y, width, height };
-    }
-    setMainRenderViewFullscreen() {
-        this.mainRenderViewport = undefined;
-    }
-    _transformCoordsToRenderView(coords, rect, targetAspect) {
-        if (targetAspect) {
-            rect = this._rectWithAspect(rect, targetAspect);
-        }
-        if (coords.x >= rect.x &&
-            coords.y >= rect.y &&
-            coords.x < rect.x + rect.width &&
-            coords.y < rect.y + rect.height) {
-            return {
-                x: coords.x - rect.x,
-                y: coords.y - rect.y,
-                renderView: rect,
-                isMainRenderView: false
-            };
-        }
-        return null;
-    }
-    transformCoordsToRenderView(coords) {
-        const mainViewport = this.mainRenderViewport || { x: 0, y: 0, width: this.width, height: this.height };
-        let result = this._transformCoordsToRenderView(coords, mainViewport, this.targetAspectRatio);
-        if (result) {
-            result.isMainRenderView = true;
-            return result;
-        }
-        for (const renderViewport of this.additionalRenderViewports.values()) {
-            result = this._transformCoordsToRenderView(coords, renderViewport.rect);
-            if (result) {
-                result.isMainRenderView = false;
-                return result;
-            }
-        }
-        return null;
-    }
-    addRenderView(name, rect, renderer) {
-        if (typeof (renderer) !== "function" && typeof (renderer?.render) !== 'function') {
-            throw new Error("A renderer has to be submitted that is either a function or an object with a method render()");
-        }
-        const id = tools.createGUID();
-        const renderViewport = new RenderViewport(this.engine, id, name, rect, renderer);
-        this.additionalRenderViewports.set(id, renderViewport);
-        return renderViewport;
-    }
-    renderScreenshot(resizeWidth, resizeHeight, asBase64, quality) {
-        this.emitFramebuffer = true;
-        const listenForScreenshotResult = (resolve, reject) => {
-            this.engine.eventBus.$once("engine:frameBufferResult", frameBufferResult => {
-                const { width, height, pixels } = frameBufferResult;
-                const screenshot = textureTools.encodeToJpeg(pixels, width, height, asBase64, quality ?? 100, resizeWidth, resizeHeight);
-                resolve(screenshot);
-            });
-            const timeout = 3000;
-            setTimeout(() => {
-                reject(`No screenshot event received within ${timeout / 1000} seconds!`);
-            }, timeout);
-        };
-        return new Promise(listenForScreenshotResult);
-    }
-    setTimeProvider(func) {
-        this.getCurrentTime = func;
-        this.timeProviderSet = true;
-    }
-    getDistanceToOrigin() {
-        if (!this.activeCamera) {
-            return "N/A";
-        }
-        return this.activeCamera.position.length();
-    }
-    requestFrame(func) {
-        if (this.rendering)
-            this.requestFrameFuncs.push(func);
-        else
-            func();
-    }
-    _executeRequestFrameFuncs() {
-        if (!this.requestFrameFuncs.length)
-            return false;
-        const funcs = this.requestFrameFuncs;
-        this.requestFrameFuncs = [];
-        for (const func of funcs) {
-            try {
-                func();
-            }
-            catch (err) {
-                console.error(err);
-            }
-        }
-        return true;
-    }
-    _getRendererImpl() {
-        if (this.renderOptions &&
-            (this.renderOptions.showHelpers ||
-                this.renderOptions.showGrid ||
-                this.renderOptions.showNormals ||
-                this.renderOptions.showWireframe)) {
-            // If we show any of the above elements, use the forward renderer, otherwise choose
-            // the one depending on renderMode
-            return this.renderers.forward;
-        }
-        switch (this.renderMode) {
-            case RenderMode.Forward:
-                return this.renderers.forward;
-            default:
-                console.error("No renderer implementation found for render mode: " +
-                    this.renderMode);
-                return null;
-        }
-    }
-    renderScene(renderPassInfo) {
-        return this.engine.profiler.measure("Renderer", "renderScene", () => {
-            const camera = renderPassInfo.camera;
-            if (!camera) {
-                console.error("Cannot render without a camera!");
-                return;
-            }
-            // Grab the root scene from the scenegraph collection and also get width/height/aspect properties
-            // -------------------------------------------------------------------------------------------------
-            const scene = renderPassInfo.sceneGraphCollection.getRootScene();
-            const w = renderPassInfo.resolution.x;
-            const h = renderPassInfo.resolution.y;
-            const aspect = w / h;
-            // Update the camera
-            // -------------------------------------------------------------------------------------------------
-            if (camera instanceof PerspectiveCamera) {
-                if (camera.aspect !== aspect) {
-                    camera.aspect = aspect;
-                    camera.updateProjectionMatrix();
-                }
-            }
-            else if (camera instanceof OrthographicCamera) {
-                const width = camera.right - camera.left;
-                const height = camera.top - camera.bottom;
-                const center = camera.bottom + height / 2;
-                const newHeight = width / aspect;
-                if (height !== newHeight) {
-                    camera.top = center + newHeight / 2;
-                    camera.bottom = center - newHeight / 2;
-                    camera.updateProjectionMatrix();
-                }
-            }
-            // Update the particle system FOV
-            // -------------------------------------------------------------------------------------------------
-            if (this.particleSystems && camera instanceof PerspectiveCamera) {
-                this.particleSystems.forEach(system => system.setCamera(camera));
-            }
-            // Get the renderer implementation to use
-            // -------------------------------------------------------------------------------------------------
-            const rendererImpl = this._getRendererImpl();
-            rendererImpl.update(scene);
-            const overrideMaterial = renderPassInfo.overrideMaterial;
-            this.webGlRenderer.info.autoReset = false;
-            // Save original background & overrideMaterial
-            // -------------------------------------------------------------------------------------------------
-            const originalBackground = scene.background;
-            const originalOverride = scene.overrideMaterial;
-            if (renderPassInfo.disableBackground)
-                scene.background = null;
-            if (overrideMaterial)
-                scene.overrideMaterial = overrideMaterial;
-            const originalVisible = new Map();
-            scene.traverse(object => {
-                const mesh = object;
-                if (mesh.material) {
-                    originalVisible.set(mesh, mesh.visible);
-                    const original = mesh.material;
-                    const needsDepthSkip = overrideMaterial instanceof GBufferMaterial && original.depthWrite === false;
-                    const needsVisibilityChange = overrideMaterial instanceof MeshDepthMaterial && original.depthWrite === false;
-                    const skipTransparent = renderPassInfo.skipTransparent && original.transparent;
-                    if (needsDepthSkip || needsVisibilityChange || skipTransparent) {
-                        object.visible = false;
-                    }
-                }
-            });
-            // Render the scene using the renderer implementation
-            // -------------------------------------------------------------------------------------------------
-            rendererImpl.render(scene, camera, renderPassInfo.cameraDidMove, renderPassInfo.currentPlayerTimeMs, renderPassInfo.resolution, function (newPassIndex) {
-                renderPassInfo.index = newPassIndex;
-            });
-            // Restore original state
-            // -------------------------------------------------------------------------------------------------
-            if (renderPassInfo.disableBackground) {
-                scene.background = originalBackground;
-            }
-            // Restore visibility
-            // -------------------------------------------------------------------------------------------------
-            originalVisible.forEach((visible, object) => {
-                object.visible = visible;
-            });
-            // Restore state
-            // -------------------------------------------------------------------------------------------------
-            if (renderPassInfo.disableBackground)
-                scene.background = originalBackground;
-            if (overrideMaterial)
-                scene.overrideMaterial = originalOverride;
-        });
-    }
-    async renderFrame() {
-        return this.startRendering(true);
-    }
-    calculateMainCanvasRect() {
-        let rect = this.mainRenderViewport || { x: 0, y: 0, width: this.width, height: this.height };
-        if (this.targetAspectRatio)
-            rect = this._rectWithAspect(rect, this.targetAspectRatio);
-        return rect;
-    }
-    _rectWithAspect(rect, targetAspect) {
-        rect = structuredClone(rect);
-        const aspect = rect.width / rect.height;
-        if (aspect > targetAspect) {
-            const newWidth = Math.floor(rect.height * targetAspect);
-            rect.x += (rect.width - newWidth) / 2;
-            rect.width = newWidth;
-        }
-        else {
-            const newHeight = Math.floor(rect.width / targetAspect);
-            rect.y += (rect.height - newHeight) / 2;
-            rect.height = newHeight;
-        }
-        return rect;
-    }
-    async withViewport(rect, func, renderPassInfo, targetAspect) {
-        const savedViewport = new Vector4();
-        this.webGlRenderer.getCurrentViewport(savedViewport);
-        let options;
-        if (targetAspect) {
-            rect = this._rectWithAspect(rect, targetAspect);
-            options = { aspect: targetAspect, viewport: rect };
-        }
-        else {
-            options = { viewport: rect };
-        }
-        if (renderPassInfo) {
-            renderPassInfo = renderPassInfo.withResolution(rect.width, rect.height, options);
-        }
-        try {
-            this.webGlRenderer.setScissorTest(true);
-            this.webGlRenderer.setScissor(rect.x, this.height - rect.height - rect.y, rect.width, rect.height);
-            this.webGlRenderer.setViewport(rect.x, this.height - rect.height - rect.y, rect.width, rect.height);
-            await func(renderPassInfo);
-        }
-        finally {
-            this.webGlRenderer.setViewport(savedViewport);
-            this.webGlRenderer.setScissorTest(false);
-        }
-    }
-    async _renderViewports(renderPassInfo) {
-        // Render the main render view to either fullscreen (default) or a reduced viewport if configured
-        // -------------------------------------------------------------------------------------------------
-        let mainRenderViewport = this.mainRenderViewport || { x: 0, y: 0, width: this.width, height: this.height };
-        await this.withViewport(mainRenderViewport, async (renderPassInfoMain) => {
-            this.engine.imgui.setViewport(renderPassInfoMain.viewport);
-            await this.mainRenderView.render(renderPassInfoMain);
-        }, renderPassInfo, this.targetAspectRatio);
-        // Render all additional registered render views
-        // -------------------------------------------------------------------------------------------------
-        for (const renderView of this.additionalRenderViewports.values()) {
-            const { renderer, rect, name } = renderView;
-            const renderTask = this.engine.profiler.start("Renderer", `renderView:${name}`);
-            try {
-                if (rect.width > 0 && rect.height > 0) {
-                    const renderPassInfoViewport = renderPassInfo.withResolution(rect.width, rect.height, { viewport: rect });
-                    await this.withViewport(rect, async () => {
-                        if (typeof (renderer) === 'function')
-                            await renderer(renderPassInfoViewport);
-                        else if (typeof (renderer) === 'object' && typeof (renderer.render) === 'function')
-                            await renderer.render(renderPassInfoViewport);
-                    });
-                }
-            }
-            catch (err) {
-                console.error("Error rendering additional render view.", err);
-            }
-            finally {
-                renderTask.done();
-            }
-        }
-    }
-    getTransformControlMode() {
-        return this.getEditorScene().getTransformControlMode();
-    }
-    setTransformControlMode(mode) {
-        this.getEditorScene().setTransformControlMode(mode);
-    }
-    async startRendering(singleFrame = false) {
-        const renderPassInfo = new RenderPassInfo({
-            sceneGraphCollection: this.engine.mainSceneGraphCollection,
-            camera: this.activeCamera,
-            renderOptions: this.renderOptions,
-            singleFrame: singleFrame,
-            lastMovementMs: 0,
-            didMove: true,
-            cameraIsStill: false,
-            lastPlayerTimeMs: 0,
-            lastTimeMs: this.getCurrentTime(),
-            screenWasResized: false,
-        });
-        const renderCallback = async (time) => {
-            try {
-                renderPassInfo.camera = this.activeCamera;
-                this.engine.profiler.startRecord();
-                if (!this.rendering) {
-                    this.activeCamera = undefined;
-                    return;
-                }
-                // Check if anything resized
-                // ----------------------------------------------------------------------------------
-                renderPassInfo.screenWasResized = this.checkResize();
-                const width = this.mainRenderViewport ? this.mainRenderViewport.width : this.width;
-                const height = this.mainRenderViewport ? this.mainRenderViewport.height : this.height;
-                renderPassInfo.setResolution(width * window.devicePixelRatio, height * window.devicePixelRatio);
-                // TODO: move!
-                this.getEditorScene().checkGridSize();
-                renderPassInfo.playerIsPaused = this.engine.player.isPaused();
-                // Propagate editor camera matrix
-                // ----------------------------------------------------------------------------------
-                this.updateEditorCameraWorldMatrix();
-                // First execute any render calls that were registered through requestFrame()
-                // ----------------------------------------------------------------------------------
-                this._executeRequestFrameFuncs();
-                // Determine time and time deltas
-                // ----------------------------------------------------------------------------------
-                this.engine.player.updateTimes();
-                const currentTimeMs = this.getCurrentTime();
-                const timeDeltaMs = currentTimeMs - renderPassInfo.lastTimeMs;
-                const currentPlayerTimeMs = this.engine.player.getGameTime();
-                // on the first frame after stopping, the player will return a gametime of 0.
-                // to avoid having a negative deltaPlayerTimeMs, we set lastPlayerTimeMs to 0
-                if (renderPassInfo.lastPlayerTimeMs > currentPlayerTimeMs) {
-                    renderPassInfo.lastPlayerTimeMs = 0;
-                }
-                const deltaPlayerTimeMs = currentPlayerTimeMs - renderPassInfo.lastPlayerTimeMs;
-                renderPassInfo.timeDeltaMs = timeDeltaMs;
-                renderPassInfo.lastPlayerTimeMs = currentPlayerTimeMs;
-                renderPassInfo.currentPlayerTimeMs = currentPlayerTimeMs;
-                renderPassInfo.lastTimeMs = currentTimeMs;
-                renderPassInfo.currentTimeMs = currentTimeMs;
-                renderPassInfo.deltaPlayerTimeMs = deltaPlayerTimeMs;
-                // Render viewports
-                // ----------------------------------------------------------------------------------
-                await this._renderViewports(renderPassInfo);
-                // After rendering, update infos
-                // ----------------------------------------------------------------------------------
-                this.updateRender = false;
-                this.info = {
-                    memory: tools.clone(this.webGlRenderer.info.memory),
-                    render: tools.clone(this.webGlRenderer.info.render),
-                };
-                this.webGlRenderer.info.reset();
-                if (this.stats)
-                    this.stats.update();
-            }
-            catch (err) {
-                console.error("Error in render loop: ", err);
-            }
-            finally {
-                this.engine.profiler.endRecord();
-                if (this.rendering && !renderPassInfo.singleFrame)
-                    requestAnimationFrame(renderCallback);
-            }
-        };
-        if (singleFrame) {
-            this.rendering = true;
-            await renderCallback(0);
-            this.rendering = false;
-        }
-        else {
-            this.rendering = true;
-            requestAnimationFrame(renderCallback);
-        }
-    }
-    renderParticleSystems(renderPassInfo) {
-        if (this.particleSystems && !renderPassInfo.playerIsPaused) {
-            this.engine.profiler.measure("Particles", "render", async () => {
-                this.particleSystems.forEach(system => {
-                    system.setSize(renderPassInfo.resolution.x, renderPassInfo.resolution.y);
-                    // in the testing environment a time provider has been set.
-                    // in that case use the testing time (incorporated in timeDeltaMs)
-                    const timeToRender = this.timeProviderSet || !this.engine.player.isPlaying()
-                        ? renderPassInfo.timeDeltaMs
-                        : renderPassInfo.deltaPlayerTimeMs;
-                    system.render(timeToRender / 1000);
-                });
-            });
-        }
-    }
-    updateViewHelper(renderPassInfo) {
-        if (this.viewHelper) {
-            this.viewHelper.update(renderPassInfo.timeDeltaMs / 1000);
-        }
-    }
-    updateControls(renderPassInfo) {
-        this.getEditorScene().updateControls(renderPassInfo);
-    }
-    stopRendering() {
-        this.rendering = false;
-    }
-    updateMaterialUniforms(time, resolution) {
-        const uniforms = {
-            iTime: time,
-            iResolution: resolution,
-        };
-        for (const material of this.materials) {
-            let matObj;
-            if (material instanceof Material)
-                matObj = material;
-            else
-                matObj = material.getObject();
-            if (matObj.uniforms) {
-                for (const uniform in uniforms) {
-                    if (matObj.uniforms[uniform]) {
-                        matObj.uniforms[uniform].value = uniforms[uniform];
-                    }
-                }
-            }
-        }
-    }
-    _waitForNextFrame() {
-        return new Promise(requestAnimationFrame);
-    }
-    getChannels() {
-        const _this = this;
-        const channels = {};
-        function defineChannel(field, name) {
-            channels[field] = {
-                name: name,
-                available: false,
-                _active: true,
-            };
-            Object.defineProperty(channels[field], "active", {
-                get: function () {
-                    return this._active;
-                },
-                set: function (value) {
-                    this._active = value;
-                    for (const mat of _this.materials) {
-                        if (mat instanceof Material) {
-                            // cannot do that on three.js materials
-                        }
-                        else {
-                            mat.setChannelActive(field, value);
-                        }
-                    }
-                    _this.updateRender = true;
-                },
-            });
-        }
-        // Query one of the materials for a list of channels and define them
-        // ----------------------------------------------------------------------
-        const materials = this.engine.loadingManager.getItemInstancesOfType("Material");
-        if (materials.length) {
-            const mat = this.materials[0];
-            if ("getChannels" in mat) {
-                for (const channel of mat.getChannels()) {
-                    defineChannel(channel.name, channel.displayName);
-                }
-            }
-        }
-        // Now go through all of them and see which are actively used
-        // ----------------------------------------------------------------------
-        for (const mat of materials) {
-            for (const channel of mat.getChannels()) {
-                if (channel.active) {
-                    channels[channel.name].available = true;
-                }
-            }
-        }
-        return channels;
-    }
-    setDevicePixelRatio() {
-        if (!this.webGlRenderer) {
-            return;
-        }
-        // limit DPR to two for mobile performance
-        const pixelRatio = Math.min(window.devicePixelRatio, 2);
-        this.webGlRenderer.setPixelRatio(pixelRatio);
-    }
-    checkResize() {
-        let changed = false;
-        if (!this.renderView)
-            return changed;
-        const renderViewWidth = this.renderView.clientWidth;
-        const renderViewHeight = this.renderView.clientHeight;
-        let w = renderViewWidth;
-        let h = renderViewHeight;
-        if (this.width !== w || this.height !== h || this.viewWidth !== renderViewWidth || this.viewHeight !== renderViewHeight) {
-            for (const func of this.onResizeFuncs) {
-                func(w, h);
-            }
-            if (this.webGlRenderer) {
-                this.webGlRenderer.setSize(w, h);
-                this.webGlRenderer.domElement.style.position = 'absolute';
-                this.webGlRenderer.domElement.style.top = `${(renderViewHeight - h) / 2}px`;
-                this.webGlRenderer.domElement.style.left = `${(renderViewWidth - w) / 2}px`;
-            }
-            // set DPR on renderer on resize in case the window
-            // moves between screens with different DPR
-            this.setDevicePixelRatio();
-            this.width = w;
-            this.height = h;
-            this.viewWidth = renderViewWidth;
-            this.viewHeight = renderViewHeight;
-            changed = true;
-        }
-        return changed;
-    }
-    removeMaterial(material) {
-        this.materials.removeObject(material);
-    }
-    addMaterial(material) {
-        this.materials.push(material);
-    }
-    createTexture(data, width, height) {
-        return new DataTexture(data, width, height, RGBAFormat);
-    }
-    loadTexture(url) {
-        let textureLoader = new TextureLoader();
-        return new Promise((resolve, reject) => {
-            textureLoader.load(url, (texture) => {
-                resolve(texture);
-            }, (event) => { }, (event) => {
-                reject(event);
-            });
-        });
-    }
-    createBasicMaterial(color) {
-        if (color === undefined)
-            color = 0xffffff;
-        return new MeshBasicMaterial({ color: color });
-    }
-    addToScene(obj) {
-        const rootScene = this.engine.mainSceneGraphCollection.getRootScene();
-        rootScene.add(obj);
-    }
-    removeFromScene(obj) {
-        const rootScene = this.engine.mainSceneGraphCollection.getRootScene();
-        rootScene.remove(obj);
-    }
-    setActiveComposition() {
-        if (!this.activeComposition)
-            return;
-        this.composer.setComposition(this.activeComposition);
-    }
-    addParticleSystem(system) {
-        this.particleSystems.push(system);
-    }
-    removeParticleSystem(system) {
-        this.particleSystems = this.particleSystems.filter(item => item !== system);
-    }
-}
-//# sourceMappingURL=Renderer.js.map