@needle-tools/engine 3.28.6-beta → 3.28.7-beta.1

package/lib/engine-components/Renderer.js

@@ -1,1030 +1,1030 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { Behaviour, GameObject } from "./Component.js";
-import * as THREE from "three";
-// import { RendererCustomShader } from "./RendererCustomShader.js";
-import { RendererLightmap } from "./RendererLightmap.js";
-import { FrameEvent } from "../engine/engine_setup.js";
-import { getParam } from "../engine/engine_utils.js";
-import { serializable } from "../engine/engine_serialization_decorator.js";
-import { AxesHelper, Material, Object3D, SkinnedMesh, Vector4 } from "three";
-import { NEEDLE_render_objects } from "../engine/extensions/NEEDLE_render_objects.js";
-import { NEEDLE_progressive } from "../engine/extensions/NEEDLE_progressive.js";
-import { $instancingAutoUpdateBounds, $instancingRenderer, InstancingUtil, NEED_UPDATE_INSTANCE_KEY } from "../engine/engine_instancing.js";
-import { ReflectionProbe } from "./ReflectionProbe.js";
-import { setCustomVisibility } from "../engine/js-extensions/Layers.js";
-import { isLocalNetwork } from "../engine/engine_networking_utils.js";
-import { showBalloonWarning } from "../engine/debug/index.js";
-import { Gizmos } from "../engine/engine_gizmos.js";
-import { getTempVector } from "../engine/engine_three_utils.js";
-// for staying compatible with old code
-export { InstancingUtil } from "../engine/engine_instancing.js";
-const debugRenderer = getParam("debugrenderer");
-const debugskinnedmesh = getParam("debugskinnedmesh");
-const suppressInstancing = getParam("noInstancing");
-const debugInstancing = getParam("debuginstancing");
-const debugProgressiveLoading = getParam("debugprogressive");
-const suppressProgressiveLoading = getParam("noprogressive");
-const showWireframe = getParam("wireframe");
-export var ReflectionProbeUsage;
-(function (ReflectionProbeUsage) {
-    ReflectionProbeUsage[ReflectionProbeUsage["Off"] = 0] = "Off";
-    ReflectionProbeUsage[ReflectionProbeUsage["BlendProbes"] = 1] = "BlendProbes";
-    ReflectionProbeUsage[ReflectionProbeUsage["BlendProbesAndSkybox"] = 2] = "BlendProbesAndSkybox";
-    ReflectionProbeUsage[ReflectionProbeUsage["Simple"] = 3] = "Simple";
-})(ReflectionProbeUsage || (ReflectionProbeUsage = {}));
-export class FieldWithDefault {
-    path = null;
-    asset = null;
-    default;
-}
-export var RenderState;
-(function (RenderState) {
-    RenderState[RenderState["Both"] = 0] = "Both";
-    RenderState[RenderState["Back"] = 1] = "Back";
-    RenderState[RenderState["Front"] = 2] = "Front";
-})(RenderState || (RenderState = {}));
-// support sharedMaterials[index] assigning materials directly to the objects
-class SharedMaterialArray {
-    _renderer;
-    _targets = [];
-    _indexMapMaxIndex;
-    _indexMap;
-    _changed = false;
-    get changed() {
-        return this._changed;
-    }
-    set changed(value) {
-        if (value === true) {
-            if (debugRenderer)
-                console.warn("SharedMaterials have changed: " + this._renderer.name, this);
-        }
-        this._changed = value;
-    }
-    is(renderer) {
-        return this._renderer === renderer;
-    }
-    constructor(renderer, originalMaterials) {
-        this._renderer = renderer;
-        const setMaterial = this.setMaterial.bind(this);
-        const getMaterial = this.getMaterial.bind(this);
-        const go = renderer.gameObject;
-        this._targets = [];
-        if (go) {
-            switch (go.type) {
-                case "Group":
-                    this._targets = [...go.children];
-                    break;
-                case "SkinnedMesh":
-                case "Mesh":
-                    this._targets.push(go);
-                    break;
-            }
-        }
-        // this is useful to have an index map when e.g. materials are trying to be assigned by index
-        let hasMissingMaterials = false;
-        let indexMap = undefined;
-        let maxIndex = 0;
-        for (let i = 0; i < this._targets.length; i++) {
-            const target = this._targets[i];
-            if (!target)
-                continue;
-            const mat = target.material;
-            if (!mat)
-                continue;
-            // set the shadow side to the same as the side of the material, three flips this for some reason
-            mat.shadowSide = mat.side;
-            for (let k = 0; k < originalMaterials.length; k++) {
-                const orig = originalMaterials[k];
-                if (!orig) {
-                    hasMissingMaterials = true;
-                    continue;
-                }
-                if (mat.name === orig.name) {
-                    if (indexMap === undefined)
-                        indexMap = new Map();
-                    indexMap.set(k, i);
-                    maxIndex = Math.max(maxIndex, k);
-                    // console.log(`Material ${mat.name} at ${k} was found at index ${i} in renderer ${renderer.name}.`)
-                    break;
-                }
-            }
-        }
-        if (hasMissingMaterials) {
-            this._indexMapMaxIndex = maxIndex;
-            this._indexMap = indexMap;
-            const warningMessage = `Renderer ${renderer.name} was initialized with missing materials - this may lead to unexpected behaviour when trying to access sharedMaterials by index.`;
-            console.warn(warningMessage);
-            if (isLocalNetwork())
-                showBalloonWarning("Found renderer with missing materials: please check the console for details.");
-        }
-        // this lets us override the javascript indexer, only works in ES6 tho
-        // but like that we can use sharedMaterials[index] and it will be assigned to the object directly
-        return new Proxy(this, {
-            get(target, key) {
-                if (typeof key === "string") {
-                    const index = parseInt(key);
-                    if (!isNaN(index)) {
-                        return getMaterial(index);
-                    }
-                }
-                return target[key];
-            },
-            set(target, key, value) {
-                if (typeof key === "string")
-                    setMaterial(value, Number.parseInt(key));
-                // console.log(target, key, value);
-                if (Reflect.set(target, key, value)) {
-                    if (value instanceof Material)
-                        target.changed = true;
-                    return true;
-                }
-                return false;
-            }
-        });
-    }
-    get length() {
-        if (this._indexMapMaxIndex !== undefined)
-            return this._indexMapMaxIndex + 1;
-        return this._targets.length;
-    }
-    // iterator to support: for(const mat of sharedMaterials)
-    *[Symbol.iterator]() {
-        for (let i = 0; i < this.length; i++) {
-            yield this.getMaterial(i);
-        }
-    }
-    resolveIndex(index) {
-        const map = this._indexMap;
-        // if we have a index map it means that some materials were missing
-        if (map) {
-            if (map.has(index))
-                return map.get(index);
-            // return -1;
-        }
-        return index;
-    }
-    setMaterial(mat, index) {
-        index = this.resolveIndex(index);
-        if (index < 0 || index >= this._targets.length)
-            return;
-        const target = this._targets[index];
-        if (!target || target["material"] === undefined)
-            return;
-        target["material"] = mat;
-        this.changed = true;
-    }
-    getMaterial(index) {
-        index = this.resolveIndex(index);
-        if (index < 0)
-            return null;
-        const obj = this._targets;
-        if (index >= obj.length)
-            return null;
-        const target = obj[index];
-        if (!target)
-            return null;
-        return target["material"];
-    }
-}
-export class Renderer extends Behaviour {
-    /** Set the rendering state only of an object (makes it visible or invisible) without affecting component state or child hierarchy visibility! You can also just enable/disable the Renderer component on that object for the same effect!
-     *
-     * If you want to activate or deactivate a complete object you can use obj.visible as usual (it acts the same as setActive in Unity) */
-    static setVisible(obj, visible) {
-        setCustomVisibility(obj, visible);
-    }
-    receiveShadows = false;
-    shadowCastingMode = ShadowCastingMode.Off;
-    lightmapIndex = -1;
-    lightmapScaleOffset = new THREE.Vector4(1, 1, 0, 0);
-    enableInstancing = undefined;
-    renderOrder = undefined;
-    allowOcclusionWhenDynamic = true;
-    probeAnchor;
-    reflectionProbeUsage = ReflectionProbeUsage.Off;
-    // custom shader
-    // get materialProperties(): Array<MaterialProperties> | undefined {
-    //     return this._materialProperties;
-    // }
-    // set materialProperties(value: Array<MaterialProperties> | undefined) {
-    //     this._materialProperties = value;
-    // }
-    // private customShaderHandler: RendererCustomShader | undefined = undefined;
-    // private _materialProperties: Array<MaterialProperties> | undefined = undefined;
-    _lightmaps;
-    get sharedMesh() {
-        if (this.gameObject.type === "Mesh") {
-            return this.gameObject;
-        }
-        else if (this.gameObject.type === "SkinnesMesh") {
-            return this.gameObject;
-        }
-        else if (this.gameObject.type === "Group") {
-            return this.gameObject.children[0];
-        }
-        return undefined;
-    }
-    get sharedMaterial() {
-        return this.sharedMaterials[0];
-    }
-    set sharedMaterial(mat) {
-        const cur = this.sharedMaterials[0];
-        if (cur === mat)
-            return;
-        this.sharedMaterials[0] = mat;
-        this.applyLightmapping();
-    }
-    /**@deprecated please use sharedMaterial */
-    get material() {
-        return this.sharedMaterials[0];
-    }
-    /**@deprecated please use sharedMaterial */
-    set material(mat) {
-        this.sharedMaterial = mat;
-    }
-    _sharedMaterials;
-    _originalMaterials;
-    // this is just available during deserialization
-    set sharedMaterials(_val) {
-        // TODO: elements in the array might be missing at the moment which leads to problems if an index is serialized
-        if (!this._originalMaterials) {
-            this._originalMaterials = _val;
-        }
-        else if (_val) {
-            let didWarn = false;
-            for (let i = 0; i < this._sharedMaterials.length; i++) {
-                const mat = i < _val.length ? _val[i] : null;
-                if (mat && mat instanceof Material) {
-                    this.sharedMaterials[i] = mat;
-                }
-                else {
-                    if (!didWarn) {
-                        didWarn = true;
-                        console.warn("Can not assign null as material: " + this.name, mat);
-                    }
-                }
-            }
-        }
-    }
-    //@ts-ignore
-    get sharedMaterials() {
-        if (!this._sharedMaterials || !this._sharedMaterials.is(this)) {
-            if (!this._originalMaterials)
-                this._originalMaterials = [];
-            this._sharedMaterials = new SharedMaterialArray(this, this._originalMaterials);
-        }
-        return this._sharedMaterials;
-    }
-    static get shouldSuppressInstancing() {
-        return suppressInstancing;
-    }
-    _lightmapTextureOverride = undefined;
-    get lightmap() {
-        if (this._lightmaps?.length) {
-            return this._lightmaps[0].lightmap;
-        }
-        return null;
-    }
-    /** set undefined to return to default lightmap */
-    set lightmap(tex) {
-        this._lightmapTextureOverride = tex;
-        if (tex === undefined) {
-            tex = this.context.lightmaps.tryGetLightmap(this.sourceId, this.lightmapIndex);
-        }
-        if (this._lightmaps?.length) {
-            for (const lm of this._lightmaps) {
-                lm.lightmap = tex;
-            }
-        }
-    }
-    get hasLightmap() {
-        const lm = this.lightmap;
-        return lm !== null && lm !== undefined;
-    }
-    allowProgressiveLoading = true;
-    registering() {
-        if (!this.enabled) {
-            this.setVisibility(false);
-        }
-    }
-    awake() {
-        if (debugRenderer)
-            console.log("Renderer ", this.name, this);
-        this.clearInstancingState();
-        if (this.probeAnchor && debugRenderer)
-            this.probeAnchor.add(new AxesHelper(.2));
-        this._reflectionProbe = null;
-        if (this.isMultiMaterialObject(this.gameObject)) {
-            for (const child of this.gameObject.children) {
-                this.context.addBeforeRenderListener(child, this.onBeforeRenderThree);
-                child.layers.mask = this.gameObject.layers.mask;
-            }
-            if (this.renderOrder !== undefined) {
-                // Objects can have nested renderers (e.g. contain 2 meshes and then again another group)
-                // or perhaps just regular child objects that have their own renderer component (?)
-                let index = 0;
-                for (let i = 0; i < this.gameObject.children.length; i++) {
-                    const ch = this.gameObject.children[i];
-                    // ignore nested groups or objects that have their own renderer (aka their own render order settings)
-                    if (!this.isMeshOrSkinnedMesh(ch) || GameObject.getComponent(ch, Renderer))
-                        continue;
-                    if (this.renderOrder.length <= index) {
-                        console.warn("Incorrect renderOrder element count", this, this.renderOrder.length + " but expected " + this.gameObject.children.length, "Index: " + index, "ChildElement:", ch);
-                        continue;
-                    }
-                    // if(debugRenderer) console.log("Setting render order", ch, this.renderOrder[index])
-                    ch.renderOrder = this.renderOrder[index];
-                    index += 1;
-                }
-            }
-        }
-        // TODO: custom shader with sub materials
-        else if (this.isMeshOrSkinnedMesh(this.gameObject)) {
-            this.context.addBeforeRenderListener(this.gameObject, this.onBeforeRenderThree);
-            if (this.renderOrder !== undefined && this.renderOrder.length > 0)
-                this.gameObject.renderOrder = this.renderOrder[0];
-        }
-        else {
-            this.context.addBeforeRenderListener(this.gameObject, this.onBeforeRenderThree);
-        }
-        this.applyLightmapping();
-        if (showWireframe) {
-            for (let i = 0; i < this.sharedMaterials.length; i++) {
-                const mat = this.sharedMaterials[i];
-                if (mat) {
-                    mat.wireframe = true;
-                }
-            }
-        }
-    }
-    applyLightmapping() {
-        if (this.lightmapIndex >= 0) {
-            const type = this.gameObject.type;
-            // use the override lightmap if its not undefined
-            const tex = this._lightmapTextureOverride !== undefined
-                ? this._lightmapTextureOverride
-                : this.context.lightmaps.tryGetLightmap(this.sourceId, this.lightmapIndex);
-            if (tex) {
-                if (!this._lightmaps)
-                    this._lightmaps = [];
-                if (type === "Mesh") {
-                    const mat = this.gameObject["material"];
-                    if (!mat?.isMeshBasicMaterial) {
-                        if (this._lightmaps.length <= 0) {
-                            const rm = new RendererLightmap(this.gameObject, this.context);
-                            this._lightmaps.push(rm);
-                        }
-                        const rm = this._lightmaps[0];
-                        rm.init(this.lightmapIndex, this.lightmapScaleOffset, tex);
-                    }
-                    else {
-                        if (mat)
-                            console.warn("Lightmapping is not supported on MeshBasicMaterial", mat.name);
-                    }
-                }
-                // for multi materials we need to loop through children 
-                // and then we add a lightmap renderer component to each of them
-                else if (this.isMultiMaterialObject(this.gameObject) && this.sharedMaterials.length > 0) {
-                    for (let i = 0; i < this.gameObject.children.length; i++) {
-                        const child = this.gameObject.children[i];
-                        if (!child["material"]?.isMeshBasicMaterial) {
-                            let rm = undefined;
-                            if (i >= this._lightmaps.length) {
-                                rm = new RendererLightmap(child, this.context);
-                                this._lightmaps.push(rm);
-                            }
-                            else
-                                rm = this._lightmaps[i];
-                            rm.init(this.lightmapIndex, this.lightmapScaleOffset, tex);
-                        }
-                    }
-                }
-            }
-            else {
-                if (debugRenderer)
-                    console.warn("Lightmap not found", this.sourceId, this.lightmapIndex);
-            }
-        }
-    }
-    _isInstancingEnabled = false;
-    handles = undefined;
-    prevLayers = undefined;
-    clearInstancingState() {
-        this._isInstancingEnabled = false;
-        this.handles = undefined;
-        this.prevLayers = undefined;
-    }
-    setInstancingEnabled(enabled) {
-        if (this._isInstancingEnabled === enabled)
-            return enabled && (this.handles === undefined || this.handles != null && this.handles.length > 0);
-        this._isInstancingEnabled = enabled;
-        if (enabled) {
-            if (this.handles === undefined) {
-                this.handles = instancing.setup(this, this.gameObject, this.context, null, { rend: this, foundMeshes: 0, useMatrixWorldAutoUpdate: this.useInstanceMatrixWorldAutoUpdate() });
-                if (this.handles) {
-                    GameObject.markAsInstancedRendered(this.gameObject, true);
-                    return true;
-                }
-            }
-            else if (this.handles !== null) {
-                for (const handler of this.handles) {
-                    handler.updateInstanceMatrix(true);
-                    handler.add();
-                }
-                GameObject.markAsInstancedRendered(this.gameObject, true);
-                return true;
-            }
-        }
-        else {
-            if (this.handles) {
-                for (const handler of this.handles) {
-                    handler.remove();
-                }
-            }
-            return true;
-        }
-        return false;
-    }
-    /** Return true to wrap matrix update events for instanced rendering to update instance matrices automatically when matrixWorld changes
-     * This is a separate method to be overrideable from user code
-     */
-    useInstanceMatrixWorldAutoUpdate() {
-        return true;
-    }
-    start() {
-        if (this.enableInstancing && !suppressInstancing) {
-            this.setInstancingEnabled(true);
-            // make sure the instance is marked dirty once for cases where e.g. an animator animates the instanced object
-            // in the first frame we want the updated matrix then to be applied immediately to the instancing
-            InstancingUtil.markDirty(this.gameObject);
-        }
-        this.gameObject.frustumCulled = this.allowOcclusionWhenDynamic;
-        if (this.isMultiMaterialObject(this.gameObject)) {
-            for (let i = 0; i < this.gameObject.children.length; i++) {
-                const ch = this.gameObject.children[i];
-                ch.frustumCulled = this.allowOcclusionWhenDynamic;
-            }
-        }
-    }
-    onEnable() {
-        this.setVisibility(true);
-        if (this._isInstancingEnabled) {
-            this.setInstancingEnabled(true);
-        }
-        else if (this.enabled) {
-            // this.gameObject.visible = true;
-            this.applyStencil();
-        }
-        this.updateReflectionProbe();
-    }
-    onDisable() {
-        this.setVisibility(false);
-        if (this.handles && this.handles.length > 0) {
-            this.setInstancingEnabled(false);
-        }
-    }
-    onDestroy() {
-        this.handles = null;
-        if (this.isMultiMaterialObject(this.gameObject)) {
-            for (const child of this.gameObject.children) {
-                this.context.removeBeforeRenderListener(child, this.onBeforeRenderThree);
-            }
-        }
-        else {
-            this.context.removeBeforeRenderListener(this.gameObject, this.onBeforeRenderThree);
-        }
-    }
-    applyStencil() {
-        NEEDLE_render_objects.applyStencil(this);
-    }
-    onBeforeRender() {
-        if (!this.gameObject) {
-            return;
-        }
-        if (this.isMultiMaterialObject(this.gameObject) && this.gameObject.children?.length > 0) {
-            for (const ch of this.gameObject.children) {
-                this.applySettings(ch);
-            }
-        }
-        else {
-            this.applySettings(this.gameObject);
-        }
-        if (this.sharedMaterials.changed) {
-            this.sharedMaterials.changed = false;
-            this.applyLightmapping();
-        }
-        if (this.handles?.length) {
-            // if (this.name === "Darbouka")
-            //     console.log(this.name, this.gameObject.matrixWorldNeedsUpdate);
-            const needsUpdate = this.gameObject[NEED_UPDATE_INSTANCE_KEY] === true; // || this.gameObject.matrixWorldNeedsUpdate;
-            if (needsUpdate) {
-                if (debugInstancing)
-                    console.log("UPDATE INSTANCED MATRICES", this.context.time.frame);
-                this.gameObject[NEED_UPDATE_INSTANCE_KEY] = false;
-                const remove = false; // Math.random() < .01;
-                for (let i = this.handles.length - 1; i >= 0; i--) {
-                    const h = this.handles[i];
-                    if (remove) {
-                        h.remove();
-                        this.handles.splice(i, 1);
-                    }
-                    else
-                        h.updateInstanceMatrix();
-                }
-                this.gameObject.matrixWorldNeedsUpdate = false;
-            }
-        }
-        if (this.handles && this.handles.length <= 0) {
-            GameObject.markAsInstancedRendered(this.gameObject, false);
-        }
-        if (this._isInstancingEnabled && this.handles) {
-            for (let i = 0; i < this.handles.length; i++) {
-                const handle = this.handles[i];
-                if (!this.prevLayers)
-                    this.prevLayers = [];
-                const layer = handle.object.layers.mask;
-                if (i >= this.prevLayers.length)
-                    this.prevLayers.push(layer);
-                else
-                    this.prevLayers[i] = layer;
-                handle.object.layers.disableAll();
-            }
-        }
-        for (const mat of this.sharedMaterials) {
-            if (mat)
-                this.loadProgressiveTextures(mat);
-        }
-        if (this.reflectionProbeUsage !== ReflectionProbeUsage.Off && this._reflectionProbe) {
-            this._reflectionProbe.onSet(this);
-        }
-    }
-    onBeforeRenderThree = (_renderer, _scene, _camera, _geometry, material, _group) => {
-        if (material.envMapIntensity !== undefined) {
-            const factor = this.hasLightmap ? Math.PI : 1;
-            const environmentIntensity = this.context.mainCameraComponent?.environmentIntensity ?? 1;
-            material.envMapIntensity = Math.max(0, environmentIntensity * this.context.sceneLighting.environmentIntensity / factor);
-        }
-        // if (this._reflectionProbe?.texture) {
-        //     material.envMap = this._reflectionProbe.texture;
-        //     // this.context.renderer.prop
-        //     // console.log(material.name);
-        //     // this.context.renderer.properties.get(material);
-        //     // this.context.renderer.properties.update(material, "environment", this._reflectionProbe.texture);
-        // }
-        //     _scene.environment = null;
-        // else _scene.environment = Renderer.envmap;
-        // if (!material.envmap)
-        //     material.envMap = Renderer.envmap;
-        // material.needsUpdate = true;
-        // if (!camera) {
-        //     let isXRCamera = false;
-        //     if (this.context.isInXR) {
-        //         // @ts-ignore
-        //         const arr = this.context.renderer.xr.getCamera() as ArrayCamera;
-        //         if (arr.cameras?.length > 0) {
-        //             camera = arr;
-        //             isXRCamera = true;
-        //         }
-        //     }
-        // }
-        // if (this.customShaderHandler) {
-        //     this.customShaderHandler.onBeforeRender(renderer, scene, camera, geometry, material, group);
-        // }
-        // else if (this.rawShaderHandler) {
-        //     for (const h of this.rawShaderHandler) {
-        //         h.onBeforeRender(this.gameObject, camera);
-        //     }
-        // }
-        if (this._lightmaps) {
-            for (const lm of this._lightmaps) {
-                lm.updateLightmapUniforms(material);
-            }
-        }
-    };
-    onAfterRender() {
-        if (this._isInstancingEnabled && this.handles && this.prevLayers && this.prevLayers.length >= this.handles.length) {
-            for (let i = 0; i < this.handles.length; i++) {
-                const handle = this.handles[i];
-                handle.object.layers.mask = this.prevLayers[i];
-            }
-        }
-        if (this.reflectionProbeUsage !== ReflectionProbeUsage.Off && this._reflectionProbe) {
-            this._reflectionProbe.onUnset(this);
-        }
-    }
-    loadProgressiveTextures(material) {
-        // progressive load before rendering so we only load textures for visible materials
-        if (!suppressProgressiveLoading && material) {
-            if (material["_didRequestTextureLOD"] === undefined && this.allowProgressiveLoading) {
-                material["_didRequestTextureLOD"] = 0;
-                if (debugProgressiveLoading) {
-                    console.log("Load material LOD", material.name);
-                }
-                return NEEDLE_progressive.assignTextureLOD(this.context, this.sourceId, material);
-            }
-        }
-        return Promise.resolve(true);
-    }
-    applySettings(go) {
-        go.receiveShadow = this.receiveShadows;
-        if (this.shadowCastingMode == ShadowCastingMode.On) {
-            go.castShadow = true;
-        }
-        else
-            go.castShadow = false;
-    }
-    _reflectionProbe = null;
-    updateReflectionProbe() {
-        // handle reflection probe
-        this._reflectionProbe = null;
-        if (this.reflectionProbeUsage !== ReflectionProbeUsage.Off) {
-            if (!this.probeAnchor)
-                return;
-            // update the reflection probe right before rendering
-            // if we do it immediately the reflection probe might not be enabled yet 
-            // (since this method is called from onEnable)
-            this.startCoroutine(this._updateReflectionProbe(), FrameEvent.LateUpdate);
-        }
-    }
-    *_updateReflectionProbe() {
-        const obj = this.probeAnchor || this.gameObject;
-        const isAnchor = this.probeAnchor ? true : false;
-        this._reflectionProbe = ReflectionProbe.get(obj, this.context, isAnchor, this.probeAnchor);
-    }
-    setVisibility(visible) {
-        if (!this.isMultiMaterialObject(this.gameObject)) {
-            setCustomVisibility(this.gameObject, visible);
-        }
-        else {
-            for (const ch of this.gameObject.children) {
-                if (this.isMeshOrSkinnedMesh(ch)) {
-                    setCustomVisibility(ch, visible);
-                }
-            }
-        }
-    }
-    isMultiMaterialObject(obj) {
-        return obj.type === "Group";
-    }
-    isMeshOrSkinnedMesh(obj) {
-        return obj.type === "Mesh" || obj.type === "SkinnedMesh";
-    }
-}
-__decorate([
-    serializable()
-], Renderer.prototype, "receiveShadows", void 0);
-__decorate([
-    serializable()
-], Renderer.prototype, "shadowCastingMode", void 0);
-__decorate([
-    serializable()
-], Renderer.prototype, "lightmapIndex", void 0);
-__decorate([
-    serializable(Vector4)
-], Renderer.prototype, "lightmapScaleOffset", void 0);
-__decorate([
-    serializable()
-], Renderer.prototype, "enableInstancing", void 0);
-__decorate([
-    serializable()
-], Renderer.prototype, "renderOrder", void 0);
-__decorate([
-    serializable()
-], Renderer.prototype, "allowOcclusionWhenDynamic", void 0);
-__decorate([
-    serializable(Object3D)
-], Renderer.prototype, "probeAnchor", void 0);
-__decorate([
-    serializable()
-], Renderer.prototype, "reflectionProbeUsage", void 0);
-export class MeshRenderer extends Renderer {
-}
-export class SkinnedMeshRenderer extends MeshRenderer {
-    awake() {
-        super.awake();
-        // disable skinned mesh occlusion because of https://github.com/mrdoob/three.js/issues/14499
-        this.allowOcclusionWhenDynamic = false;
-        // If we don't do that here the bounding sphere matrix used for raycasts will be wrong. Not sure *why* this is necessary
-        this.gameObject.parent?.updateWorldMatrix(false, true);
-    }
-    onBeforeRender() {
-        super.onBeforeRender();
-        if (debugskinnedmesh && this.gameObject instanceof SkinnedMesh && this.gameObject.boundingSphere) {
-            const tempCenter = getTempVector(this.gameObject.boundingSphere.center).applyMatrix4(this.gameObject.matrixWorld);
-            Gizmos.DrawWireSphere(tempCenter, this.gameObject.boundingSphere.radius, "red");
-        }
-    }
-}
-export var ShadowCastingMode;
-(function (ShadowCastingMode) {
-    /// <summary>
-    ///   <para>No shadows are cast from this object.</para>
-    /// </summary>
-    ShadowCastingMode[ShadowCastingMode["Off"] = 0] = "Off";
-    /// <summary>
-    ///   <para>Shadows are cast from this object.</para>
-    /// </summary>
-    ShadowCastingMode[ShadowCastingMode["On"] = 1] = "On";
-    /// <summary>
-    ///   <para>Shadows are cast from this object, treating it as two-sided.</para>
-    /// </summary>
-    ShadowCastingMode[ShadowCastingMode["TwoSided"] = 2] = "TwoSided";
-    /// <summary>
-    ///   <para>Object casts shadows, but is otherwise invisible in the Scene.</para>
-    /// </summary>
-    ShadowCastingMode[ShadowCastingMode["ShadowsOnly"] = 3] = "ShadowsOnly";
-})(ShadowCastingMode || (ShadowCastingMode = {}));
-;
-class InstancingHandler {
-    objs = [];
-    setup(renderer, obj, context, handlesArray, args, level = 0) {
-        // make sure setting casting settings are applied so when we add the mesh to the InstancedMesh we can ask for the correct cast shadow setting
-        renderer.applySettings(obj);
-        const res = this.tryCreateOrAddInstance(obj, context, args);
-        if (res) {
-            renderer.loadProgressiveTextures(res.instancer.material);
-            if (handlesArray === null)
-                handlesArray = [];
-            handlesArray.push(res);
-        }
-        else if (level <= 0 && obj.type !== "Mesh") {
-            const nextLevel = level + 1;
-            for (const ch of obj.children) {
-                handlesArray = this.setup(renderer, ch, context, handlesArray, args, nextLevel);
-            }
-        }
-        if (level === 0) {
-            // For multi material objects we only want to track the root object's matrix
-            if (args.useMatrixWorldAutoUpdate && handlesArray && handlesArray.length >= 0) {
-                this.autoUpdateInstanceMatrix(obj);
-            }
-        }
-        return handlesArray;
-    }
-    tryCreateOrAddInstance(obj, context, args) {
-        if (obj.type === "Mesh") {
-            const index = args.foundMeshes;
-            args.foundMeshes += 1;
-            if (!args.rend.enableInstancing)
-                return null;
-            if (index >= args.rend.enableInstancing.length) {
-                // console.error("Something is wrong with instance setup", obj, args.rend.enableInstancing, index);
-                return null;
-            }
-            if (!args.rend.enableInstancing[index]) {
-                // instancing is disabled
-                // console.log("Instancing is disabled", obj);
-                return null;
-            }
-            // instancing is enabled:
-            const mesh = obj;
-            const geo = mesh.geometry;
-            const mat = mesh.material;
-            for (const i of this.objs) {
-                if (i.isFull())
-                    continue;
-                if (i.geo === geo && i.material === mat) {
-                    const handle = i.addInstance(mesh);
-                    return handle;
-                }
-            }
-            // console.log("Add new instance mesh renderer", obj);
-            const i = new InstancedMeshRenderer(obj.name, geo, mat, 200, context);
-            this.objs.push(i);
-            const handle = i.addInstance(mesh);
-            return handle;
-        }
-        return null;
-    }
-    autoUpdateInstanceMatrix(obj) {
-        const original = obj.matrixWorld["multiplyMatrices"].bind(obj.matrixWorld);
-        const previousMatrix = obj.matrixWorld.clone();
-        const matrixChangeWrapper = (a, b) => {
-            const newMatrixWorld = original(a, b);
-            if (obj[NEED_UPDATE_INSTANCE_KEY] || previousMatrix.equals(newMatrixWorld) === false) {
-                previousMatrix.copy(newMatrixWorld);
-                obj[NEED_UPDATE_INSTANCE_KEY] = true;
-            }
-            return newMatrixWorld;
-        };
-        obj.matrixWorld["multiplyMatrices"] = matrixChangeWrapper;
-        // wrap matrixWorldNeedsUpdate
-        // let originalMatrixWorldNeedsUpdate = obj.matrixWorldNeedsUpdate;
-        // Object.defineProperty(obj, "matrixWorldNeedsUpdate", {
-        //     get: () => {
-        //         return originalMatrixWorldNeedsUpdate;
-        //     },
-        //     set: (value: boolean) => {
-        //         if(value) console.warn("SET MATRIX WORLD NEEDS UPDATE");
-        //         originalMatrixWorldNeedsUpdate = value;
-        //     }
-        // });
-    }
-}
-const instancing = new InstancingHandler();
-class InstanceHandle {
-    get name() {
-        return this.object.name;
-    }
-    instanceIndex = -1;
-    object;
-    instancer;
-    constructor(instanceIndex, originalObject, instancer) {
-        this.instanceIndex = instanceIndex;
-        this.object = originalObject;
-        this.instancer = instancer;
-        originalObject[$instancingRenderer] = instancer;
-        GameObject.markAsInstancedRendered(originalObject, true);
-    }
-    updateInstanceMatrix(updateChildren = false) {
-        if (this.instanceIndex < 0)
-            return;
-        this.object.updateWorldMatrix(true, updateChildren);
-        this.instancer.updateInstance(this.object.matrixWorld, this.instanceIndex);
-    }
-    setMatrix(matrix) {
-        if (this.instanceIndex < 0)
-            return;
-        this.instancer.updateInstance(matrix, this.instanceIndex);
-    }
-    add() {
-        if (this.instanceIndex >= 0)
-            return;
-        this.instancer.add(this);
-    }
-    remove() {
-        if (this.instanceIndex < 0)
-            return;
-        this.instancer.remove(this);
-    }
-}
-class InstancedMeshRenderer {
-    /** The three instanced mesh
-     * @link https://threejs.org/docs/#api/en/objects/InstancedMesh
-     */
-    get mesh() {
-        return this.inst;
-    }
-    get visible() {
-        return this.inst.visible;
-    }
-    set visible(val) {
-        this.inst.visible = val;
-    }
-    get castShadow() {
-        return this.inst.castShadow;
-    }
-    set castShadow(val) {
-        this.inst.castShadow = val;
-    }
-    set receiveShadow(val) {
-        this.inst.receiveShadow = val;
-    }
-    updateBounds(box = true, sphere = true) {
-        this._needUpdateBounds = false;
-        if (box)
-            this.inst.computeBoundingBox();
-        if (sphere)
-            this.inst.computeBoundingSphere();
-    }
-    name = "";
-    geo;
-    material;
-    get currentCount() { return this.inst.count; }
-    context;
-    inst;
-    handles = [];
-    maxCount;
-    static nullMatrix = new THREE.Matrix4();
-    isFull() {
-        return this.currentCount >= this.maxCount;
-    }
-    _needUpdateBounds = false;
-    constructor(name, geo, material, count, context) {
-        this.name = name;
-        this.geo = geo;
-        this.material = material;
-        this.context = context;
-        this.maxCount = count;
-        if (debugInstancing) {
-            material = new THREE.MeshBasicMaterial({ color: this.randomColor() });
-        }
-        this.inst = new THREE.InstancedMesh(geo, material, count);
-        this.inst[$instancingAutoUpdateBounds] = true;
-        this.inst.count = 0;
-        this.inst.layers.set(2);
-        this.inst.visible = true;
-        // Not handled by RawShaderMaterial, so we need to set the define explicitly.
-        // Edge case: theoretically some users of the material could use it in an
-        // instanced fashion, and some others not. In that case, the material would not
-        // be able to be shared between the two use cases. We could probably add a
-        // onBeforeRender call for the InstancedMesh and set the define there.
-        // Same would apply if we support skinning - 
-        // there we would have to split instanced batches so that the ones using skinning
-        // are all in the same batch.
-        if (material instanceof THREE.RawShaderMaterial) {
-            material.defines["USE_INSTANCING"] = true;
-            material.needsUpdate = true;
-        }
-        // this.inst.castShadow = true;
-        // this.inst.receiveShadow = true;
-        this.context.scene.add(this.inst);
-        context.pre_render_callbacks.push(this.onBeforeRender);
-        // console.log(this.inst);
-        // this.context.pre_render_callbacks.push(this.onPreRender.bind(this));
-        // setInterval(() => {
-        //     this.inst.visible = !this.inst.visible;
-        // }, 500);
-    }
-    onBeforeRender = () => {
-        if (this._needUpdateBounds && this.inst[$instancingAutoUpdateBounds] === true) {
-            if (debugInstancing)
-                console.log("Update instancing bounds", this.name, this.inst.matrixWorldNeedsUpdate);
-            this.updateBounds();
-        }
-    };
-    randomColor() {
-        return new THREE.Color(Math.random(), Math.random(), Math.random());
-    }
-    addInstance(obj) {
-        if (this.currentCount >= this.maxCount) {
-            console.error("TOO MANY INSTANCES - resize is not yet implemented!", this.inst.count); // todo: make it resize
-            return null;
-        }
-        const handle = new InstanceHandle(-1, obj, this);
-        if (obj.castShadow === true && this.inst.castShadow === false) {
-            this.inst.castShadow = true;
-        }
-        if (obj.receiveShadow === true && this.inst.receiveShadow === false) {
-            this.inst.receiveShadow = true;
-        }
-        this.add(handle);
-        return handle;
-    }
-    add(handle) {
-        if (handle.instanceIndex < 0) {
-            handle.instanceIndex = this.currentCount;
-            // console.log(handle.instanceIndex, this.currentCount);
-            if (handle.instanceIndex >= this.handles.length)
-                this.handles.push(handle);
-            else
-                this.handles[handle.instanceIndex] = handle;
-        }
-        // console.log("Handle instance");
-        handle.object.updateWorldMatrix(true, true);
-        this.inst.setMatrixAt(handle.instanceIndex, handle.object.matrixWorld);
-        this.inst.instanceMatrix.needsUpdate = true;
-        this.inst.count += 1;
-        this._needUpdateBounds = true;
-        if (this.inst.count > 0)
-            this.inst.visible = true;
-        // console.log("Added", this.name, this.inst.count, this.handles);
-    }
-    remove(handle) {
-        if (!handle)
-            return;
-        if (handle.instanceIndex < 0 || handle.instanceIndex >= this.handles.length || this.inst.count <= 0) {
-            return;
-        }
-        if (this.handles[handle.instanceIndex] !== handle) {
-            console.error("instance handle is not part of renderer, was it removed before?", handle.instanceIndex, this.name);
-            const index = this.handles.indexOf(handle);
-            if (index < 0)
-                return;
-            handle.instanceIndex = index;
-        }
-        this.handles[handle.instanceIndex] = null;
-        this.inst.setMatrixAt(handle.instanceIndex, InstancedMeshRenderer.nullMatrix);
-        const removedLastElement = handle.instanceIndex >= this.currentCount - 1;
-        // console.log(removedLastElement, this.currentCount, handle.instanceIndex, this.handles);
-        if (!removedLastElement && this.currentCount > 0) {
-            const lastElement = this.handles[this.currentCount - 1];
-            if (lastElement) {
-                lastElement.instanceIndex = handle.instanceIndex;
-                lastElement.updateInstanceMatrix();
-                this.handles[handle.instanceIndex] = lastElement;
-                this.handles[this.currentCount - 1] = null;
-                // this.inst.setMatrixAt(handle.instanceIndex, lastElement.object.matrixWorld);
-                // this.inst.setMatrixAt(this.currentCount - 1, InstancedMeshRenderer.nullMatrix);
-            }
-        }
-        if (this.inst.count > 0)
-            this.inst.count -= 1;
-        handle.instanceIndex = -1;
-        this._needUpdateBounds = true;
-        if (this.inst.count <= 0)
-            this.inst.visible = false;
-        this.inst.instanceMatrix.needsUpdate = true;
-    }
-    updateInstance(mat, index) {
-        this.inst.setMatrixAt(index, mat);
-        this.inst.instanceMatrix.needsUpdate = true;
-        this._needUpdateBounds = true;
-    }
-}
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Behaviour, GameObject } from "./Component.js";
+import * as THREE from "three";
+// import { RendererCustomShader } from "./RendererCustomShader.js";
+import { RendererLightmap } from "./RendererLightmap.js";
+import { FrameEvent } from "../engine/engine_setup.js";
+import { getParam } from "../engine/engine_utils.js";
+import { serializable } from "../engine/engine_serialization_decorator.js";
+import { AxesHelper, Material, Object3D, SkinnedMesh, Vector4 } from "three";
+import { NEEDLE_render_objects } from "../engine/extensions/NEEDLE_render_objects.js";
+import { NEEDLE_progressive } from "../engine/extensions/NEEDLE_progressive.js";
+import { $instancingAutoUpdateBounds, $instancingRenderer, InstancingUtil, NEED_UPDATE_INSTANCE_KEY } from "../engine/engine_instancing.js";
+import { ReflectionProbe } from "./ReflectionProbe.js";
+import { setCustomVisibility } from "../engine/js-extensions/Layers.js";
+import { isLocalNetwork } from "../engine/engine_networking_utils.js";
+import { showBalloonWarning } from "../engine/debug/index.js";
+import { Gizmos } from "../engine/engine_gizmos.js";
+import { getTempVector } from "../engine/engine_three_utils.js";
+// for staying compatible with old code
+export { InstancingUtil } from "../engine/engine_instancing.js";
+const debugRenderer = getParam("debugrenderer");
+const debugskinnedmesh = getParam("debugskinnedmesh");
+const suppressInstancing = getParam("noInstancing");
+const debugInstancing = getParam("debuginstancing");
+const debugProgressiveLoading = getParam("debugprogressive");
+const suppressProgressiveLoading = getParam("noprogressive");
+const showWireframe = getParam("wireframe");
+export var ReflectionProbeUsage;
+(function (ReflectionProbeUsage) {
+    ReflectionProbeUsage[ReflectionProbeUsage["Off"] = 0] = "Off";
+    ReflectionProbeUsage[ReflectionProbeUsage["BlendProbes"] = 1] = "BlendProbes";
+    ReflectionProbeUsage[ReflectionProbeUsage["BlendProbesAndSkybox"] = 2] = "BlendProbesAndSkybox";
+    ReflectionProbeUsage[ReflectionProbeUsage["Simple"] = 3] = "Simple";
+})(ReflectionProbeUsage || (ReflectionProbeUsage = {}));
+export class FieldWithDefault {
+    path = null;
+    asset = null;
+    default;
+}
+export var RenderState;
+(function (RenderState) {
+    RenderState[RenderState["Both"] = 0] = "Both";
+    RenderState[RenderState["Back"] = 1] = "Back";
+    RenderState[RenderState["Front"] = 2] = "Front";
+})(RenderState || (RenderState = {}));
+// support sharedMaterials[index] assigning materials directly to the objects
+class SharedMaterialArray {
+    _renderer;
+    _targets = [];
+    _indexMapMaxIndex;
+    _indexMap;
+    _changed = false;
+    get changed() {
+        return this._changed;
+    }
+    set changed(value) {
+        if (value === true) {
+            if (debugRenderer)
+                console.warn("SharedMaterials have changed: " + this._renderer.name, this);
+        }
+        this._changed = value;
+    }
+    is(renderer) {
+        return this._renderer === renderer;
+    }
+    constructor(renderer, originalMaterials) {
+        this._renderer = renderer;
+        const setMaterial = this.setMaterial.bind(this);
+        const getMaterial = this.getMaterial.bind(this);
+        const go = renderer.gameObject;
+        this._targets = [];
+        if (go) {
+            switch (go.type) {
+                case "Group":
+                    this._targets = [...go.children];
+                    break;
+                case "SkinnedMesh":
+                case "Mesh":
+                    this._targets.push(go);
+                    break;
+            }
+        }
+        // this is useful to have an index map when e.g. materials are trying to be assigned by index
+        let hasMissingMaterials = false;
+        let indexMap = undefined;
+        let maxIndex = 0;
+        for (let i = 0; i < this._targets.length; i++) {
+            const target = this._targets[i];
+            if (!target)
+                continue;
+            const mat = target.material;
+            if (!mat)
+                continue;
+            // set the shadow side to the same as the side of the material, three flips this for some reason
+            mat.shadowSide = mat.side;
+            for (let k = 0; k < originalMaterials.length; k++) {
+                const orig = originalMaterials[k];
+                if (!orig) {
+                    hasMissingMaterials = true;
+                    continue;
+                }
+                if (mat.name === orig.name) {
+                    if (indexMap === undefined)
+                        indexMap = new Map();
+                    indexMap.set(k, i);
+                    maxIndex = Math.max(maxIndex, k);
+                    // console.log(`Material ${mat.name} at ${k} was found at index ${i} in renderer ${renderer.name}.`)
+                    break;
+                }
+            }
+        }
+        if (hasMissingMaterials) {
+            this._indexMapMaxIndex = maxIndex;
+            this._indexMap = indexMap;
+            const warningMessage = `Renderer ${renderer.name} was initialized with missing materials - this may lead to unexpected behaviour when trying to access sharedMaterials by index.`;
+            console.warn(warningMessage);
+            if (isLocalNetwork())
+                showBalloonWarning("Found renderer with missing materials: please check the console for details.");
+        }
+        // this lets us override the javascript indexer, only works in ES6 tho
+        // but like that we can use sharedMaterials[index] and it will be assigned to the object directly
+        return new Proxy(this, {
+            get(target, key) {
+                if (typeof key === "string") {
+                    const index = parseInt(key);
+                    if (!isNaN(index)) {
+                        return getMaterial(index);
+                    }
+                }
+                return target[key];
+            },
+            set(target, key, value) {
+                if (typeof key === "string")
+                    setMaterial(value, Number.parseInt(key));
+                // console.log(target, key, value);
+                if (Reflect.set(target, key, value)) {
+                    if (value instanceof Material)
+                        target.changed = true;
+                    return true;
+                }
+                return false;
+            }
+        });
+    }
+    get length() {
+        if (this._indexMapMaxIndex !== undefined)
+            return this._indexMapMaxIndex + 1;
+        return this._targets.length;
+    }
+    // iterator to support: for(const mat of sharedMaterials)
+    *[Symbol.iterator]() {
+        for (let i = 0; i < this.length; i++) {
+            yield this.getMaterial(i);
+        }
+    }
+    resolveIndex(index) {
+        const map = this._indexMap;
+        // if we have a index map it means that some materials were missing
+        if (map) {
+            if (map.has(index))
+                return map.get(index);
+            // return -1;
+        }
+        return index;
+    }
+    setMaterial(mat, index) {
+        index = this.resolveIndex(index);
+        if (index < 0 || index >= this._targets.length)
+            return;
+        const target = this._targets[index];
+        if (!target || target["material"] === undefined)
+            return;
+        target["material"] = mat;
+        this.changed = true;
+    }
+    getMaterial(index) {
+        index = this.resolveIndex(index);
+        if (index < 0)
+            return null;
+        const obj = this._targets;
+        if (index >= obj.length)
+            return null;
+        const target = obj[index];
+        if (!target)
+            return null;
+        return target["material"];
+    }
+}
+export class Renderer extends Behaviour {
+    /** Set the rendering state only of an object (makes it visible or invisible) without affecting component state or child hierarchy visibility! You can also just enable/disable the Renderer component on that object for the same effect!
+     *
+     * If you want to activate or deactivate a complete object you can use obj.visible as usual (it acts the same as setActive in Unity) */
+    static setVisible(obj, visible) {
+        setCustomVisibility(obj, visible);
+    }
+    receiveShadows = false;
+    shadowCastingMode = ShadowCastingMode.Off;
+    lightmapIndex = -1;
+    lightmapScaleOffset = new THREE.Vector4(1, 1, 0, 0);
+    enableInstancing = undefined;
+    renderOrder = undefined;
+    allowOcclusionWhenDynamic = true;
+    probeAnchor;
+    reflectionProbeUsage = ReflectionProbeUsage.Off;
+    // custom shader
+    // get materialProperties(): Array<MaterialProperties> | undefined {
+    //     return this._materialProperties;
+    // }
+    // set materialProperties(value: Array<MaterialProperties> | undefined) {
+    //     this._materialProperties = value;
+    // }
+    // private customShaderHandler: RendererCustomShader | undefined = undefined;
+    // private _materialProperties: Array<MaterialProperties> | undefined = undefined;
+    _lightmaps;
+    get sharedMesh() {
+        if (this.gameObject.type === "Mesh") {
+            return this.gameObject;
+        }
+        else if (this.gameObject.type === "SkinnesMesh") {
+            return this.gameObject;
+        }
+        else if (this.gameObject.type === "Group") {
+            return this.gameObject.children[0];
+        }
+        return undefined;
+    }
+    get sharedMaterial() {
+        return this.sharedMaterials[0];
+    }
+    set sharedMaterial(mat) {
+        const cur = this.sharedMaterials[0];
+        if (cur === mat)
+            return;
+        this.sharedMaterials[0] = mat;
+        this.applyLightmapping();
+    }
+    /**@deprecated please use sharedMaterial */
+    get material() {
+        return this.sharedMaterials[0];
+    }
+    /**@deprecated please use sharedMaterial */
+    set material(mat) {
+        this.sharedMaterial = mat;
+    }
+    _sharedMaterials;
+    _originalMaterials;
+    // this is just available during deserialization
+    set sharedMaterials(_val) {
+        // TODO: elements in the array might be missing at the moment which leads to problems if an index is serialized
+        if (!this._originalMaterials) {
+            this._originalMaterials = _val;
+        }
+        else if (_val) {
+            let didWarn = false;
+            for (let i = 0; i < this._sharedMaterials.length; i++) {
+                const mat = i < _val.length ? _val[i] : null;
+                if (mat && mat instanceof Material) {
+                    this.sharedMaterials[i] = mat;
+                }
+                else {
+                    if (!didWarn) {
+                        didWarn = true;
+                        console.warn("Can not assign null as material: " + this.name, mat);
+                    }
+                }
+            }
+        }
+    }
+    //@ts-ignore
+    get sharedMaterials() {
+        if (!this._sharedMaterials || !this._sharedMaterials.is(this)) {
+            if (!this._originalMaterials)
+                this._originalMaterials = [];
+            this._sharedMaterials = new SharedMaterialArray(this, this._originalMaterials);
+        }
+        return this._sharedMaterials;
+    }
+    static get shouldSuppressInstancing() {
+        return suppressInstancing;
+    }
+    _lightmapTextureOverride = undefined;
+    get lightmap() {
+        if (this._lightmaps?.length) {
+            return this._lightmaps[0].lightmap;
+        }
+        return null;
+    }
+    /** set undefined to return to default lightmap */
+    set lightmap(tex) {
+        this._lightmapTextureOverride = tex;
+        if (tex === undefined) {
+            tex = this.context.lightmaps.tryGetLightmap(this.sourceId, this.lightmapIndex);
+        }
+        if (this._lightmaps?.length) {
+            for (const lm of this._lightmaps) {
+                lm.lightmap = tex;
+            }
+        }
+    }
+    get hasLightmap() {
+        const lm = this.lightmap;
+        return lm !== null && lm !== undefined;
+    }
+    allowProgressiveLoading = true;
+    registering() {
+        if (!this.enabled) {
+            this.setVisibility(false);
+        }
+    }
+    awake() {
+        if (debugRenderer)
+            console.log("Renderer ", this.name, this);
+        this.clearInstancingState();
+        if (this.probeAnchor && debugRenderer)
+            this.probeAnchor.add(new AxesHelper(.2));
+        this._reflectionProbe = null;
+        if (this.isMultiMaterialObject(this.gameObject)) {
+            for (const child of this.gameObject.children) {
+                this.context.addBeforeRenderListener(child, this.onBeforeRenderThree);
+                child.layers.mask = this.gameObject.layers.mask;
+            }
+            if (this.renderOrder !== undefined) {
+                // Objects can have nested renderers (e.g. contain 2 meshes and then again another group)
+                // or perhaps just regular child objects that have their own renderer component (?)
+                let index = 0;
+                for (let i = 0; i < this.gameObject.children.length; i++) {
+                    const ch = this.gameObject.children[i];
+                    // ignore nested groups or objects that have their own renderer (aka their own render order settings)
+                    if (!this.isMeshOrSkinnedMesh(ch) || GameObject.getComponent(ch, Renderer))
+                        continue;
+                    if (this.renderOrder.length <= index) {
+                        console.warn("Incorrect renderOrder element count", this, this.renderOrder.length + " but expected " + this.gameObject.children.length, "Index: " + index, "ChildElement:", ch);
+                        continue;
+                    }
+                    // if(debugRenderer) console.log("Setting render order", ch, this.renderOrder[index])
+                    ch.renderOrder = this.renderOrder[index];
+                    index += 1;
+                }
+            }
+        }
+        // TODO: custom shader with sub materials
+        else if (this.isMeshOrSkinnedMesh(this.gameObject)) {
+            this.context.addBeforeRenderListener(this.gameObject, this.onBeforeRenderThree);
+            if (this.renderOrder !== undefined && this.renderOrder.length > 0)
+                this.gameObject.renderOrder = this.renderOrder[0];
+        }
+        else {
+            this.context.addBeforeRenderListener(this.gameObject, this.onBeforeRenderThree);
+        }
+        this.applyLightmapping();
+        if (showWireframe) {
+            for (let i = 0; i < this.sharedMaterials.length; i++) {
+                const mat = this.sharedMaterials[i];
+                if (mat) {
+                    mat.wireframe = true;
+                }
+            }
+        }
+    }
+    applyLightmapping() {
+        if (this.lightmapIndex >= 0) {
+            const type = this.gameObject.type;
+            // use the override lightmap if its not undefined
+            const tex = this._lightmapTextureOverride !== undefined
+                ? this._lightmapTextureOverride
+                : this.context.lightmaps.tryGetLightmap(this.sourceId, this.lightmapIndex);
+            if (tex) {
+                if (!this._lightmaps)
+                    this._lightmaps = [];
+                if (type === "Mesh") {
+                    const mat = this.gameObject["material"];
+                    if (!mat?.isMeshBasicMaterial) {
+                        if (this._lightmaps.length <= 0) {
+                            const rm = new RendererLightmap(this.gameObject, this.context);
+                            this._lightmaps.push(rm);
+                        }
+                        const rm = this._lightmaps[0];
+                        rm.init(this.lightmapIndex, this.lightmapScaleOffset, tex);
+                    }
+                    else {
+                        if (mat)
+                            console.warn("Lightmapping is not supported on MeshBasicMaterial", mat.name);
+                    }
+                }
+                // for multi materials we need to loop through children 
+                // and then we add a lightmap renderer component to each of them
+                else if (this.isMultiMaterialObject(this.gameObject) && this.sharedMaterials.length > 0) {
+                    for (let i = 0; i < this.gameObject.children.length; i++) {
+                        const child = this.gameObject.children[i];
+                        if (!child["material"]?.isMeshBasicMaterial) {
+                            let rm = undefined;
+                            if (i >= this._lightmaps.length) {
+                                rm = new RendererLightmap(child, this.context);
+                                this._lightmaps.push(rm);
+                            }
+                            else
+                                rm = this._lightmaps[i];
+                            rm.init(this.lightmapIndex, this.lightmapScaleOffset, tex);
+                        }
+                    }
+                }
+            }
+            else {
+                if (debugRenderer)
+                    console.warn("Lightmap not found", this.sourceId, this.lightmapIndex);
+            }
+        }
+    }
+    _isInstancingEnabled = false;
+    handles = undefined;
+    prevLayers = undefined;
+    clearInstancingState() {
+        this._isInstancingEnabled = false;
+        this.handles = undefined;
+        this.prevLayers = undefined;
+    }
+    setInstancingEnabled(enabled) {
+        if (this._isInstancingEnabled === enabled)
+            return enabled && (this.handles === undefined || this.handles != null && this.handles.length > 0);
+        this._isInstancingEnabled = enabled;
+        if (enabled) {
+            if (this.handles === undefined) {
+                this.handles = instancing.setup(this, this.gameObject, this.context, null, { rend: this, foundMeshes: 0, useMatrixWorldAutoUpdate: this.useInstanceMatrixWorldAutoUpdate() });
+                if (this.handles) {
+                    GameObject.markAsInstancedRendered(this.gameObject, true);
+                    return true;
+                }
+            }
+            else if (this.handles !== null) {
+                for (const handler of this.handles) {
+                    handler.updateInstanceMatrix(true);
+                    handler.add();
+                }
+                GameObject.markAsInstancedRendered(this.gameObject, true);
+                return true;
+            }
+        }
+        else {
+            if (this.handles) {
+                for (const handler of this.handles) {
+                    handler.remove();
+                }
+            }
+            return true;
+        }
+        return false;
+    }
+    /** Return true to wrap matrix update events for instanced rendering to update instance matrices automatically when matrixWorld changes
+     * This is a separate method to be overrideable from user code
+     */
+    useInstanceMatrixWorldAutoUpdate() {
+        return true;
+    }
+    start() {
+        if (this.enableInstancing && !suppressInstancing) {
+            this.setInstancingEnabled(true);
+            // make sure the instance is marked dirty once for cases where e.g. an animator animates the instanced object
+            // in the first frame we want the updated matrix then to be applied immediately to the instancing
+            InstancingUtil.markDirty(this.gameObject);
+        }
+        this.gameObject.frustumCulled = this.allowOcclusionWhenDynamic;
+        if (this.isMultiMaterialObject(this.gameObject)) {
+            for (let i = 0; i < this.gameObject.children.length; i++) {
+                const ch = this.gameObject.children[i];
+                ch.frustumCulled = this.allowOcclusionWhenDynamic;
+            }
+        }
+    }
+    onEnable() {
+        this.setVisibility(true);
+        if (this._isInstancingEnabled) {
+            this.setInstancingEnabled(true);
+        }
+        else if (this.enabled) {
+            // this.gameObject.visible = true;
+            this.applyStencil();
+        }
+        this.updateReflectionProbe();
+    }
+    onDisable() {
+        this.setVisibility(false);
+        if (this.handles && this.handles.length > 0) {
+            this.setInstancingEnabled(false);
+        }
+    }
+    onDestroy() {
+        this.handles = null;
+        if (this.isMultiMaterialObject(this.gameObject)) {
+            for (const child of this.gameObject.children) {
+                this.context.removeBeforeRenderListener(child, this.onBeforeRenderThree);
+            }
+        }
+        else {
+            this.context.removeBeforeRenderListener(this.gameObject, this.onBeforeRenderThree);
+        }
+    }
+    applyStencil() {
+        NEEDLE_render_objects.applyStencil(this);
+    }
+    onBeforeRender() {
+        if (!this.gameObject) {
+            return;
+        }
+        if (this.isMultiMaterialObject(this.gameObject) && this.gameObject.children?.length > 0) {
+            for (const ch of this.gameObject.children) {
+                this.applySettings(ch);
+            }
+        }
+        else {
+            this.applySettings(this.gameObject);
+        }
+        if (this.sharedMaterials.changed) {
+            this.sharedMaterials.changed = false;
+            this.applyLightmapping();
+        }
+        if (this.handles?.length) {
+            // if (this.name === "Darbouka")
+            //     console.log(this.name, this.gameObject.matrixWorldNeedsUpdate);
+            const needsUpdate = this.gameObject[NEED_UPDATE_INSTANCE_KEY] === true; // || this.gameObject.matrixWorldNeedsUpdate;
+            if (needsUpdate) {
+                if (debugInstancing)
+                    console.log("UPDATE INSTANCED MATRICES", this.context.time.frame);
+                this.gameObject[NEED_UPDATE_INSTANCE_KEY] = false;
+                const remove = false; // Math.random() < .01;
+                for (let i = this.handles.length - 1; i >= 0; i--) {
+                    const h = this.handles[i];
+                    if (remove) {
+                        h.remove();
+                        this.handles.splice(i, 1);
+                    }
+                    else
+                        h.updateInstanceMatrix();
+                }
+                this.gameObject.matrixWorldNeedsUpdate = false;
+            }
+        }
+        if (this.handles && this.handles.length <= 0) {
+            GameObject.markAsInstancedRendered(this.gameObject, false);
+        }
+        if (this._isInstancingEnabled && this.handles) {
+            for (let i = 0; i < this.handles.length; i++) {
+                const handle = this.handles[i];
+                if (!this.prevLayers)
+                    this.prevLayers = [];
+                const layer = handle.object.layers.mask;
+                if (i >= this.prevLayers.length)
+                    this.prevLayers.push(layer);
+                else
+                    this.prevLayers[i] = layer;
+                handle.object.layers.disableAll();
+            }
+        }
+        for (const mat of this.sharedMaterials) {
+            if (mat)
+                this.loadProgressiveTextures(mat);
+        }
+        if (this.reflectionProbeUsage !== ReflectionProbeUsage.Off && this._reflectionProbe) {
+            this._reflectionProbe.onSet(this);
+        }
+    }
+    onBeforeRenderThree = (_renderer, _scene, _camera, _geometry, material, _group) => {
+        if (material.envMapIntensity !== undefined) {
+            const factor = this.hasLightmap ? Math.PI : 1;
+            const environmentIntensity = this.context.mainCameraComponent?.environmentIntensity ?? 1;
+            material.envMapIntensity = Math.max(0, environmentIntensity * this.context.sceneLighting.environmentIntensity / factor);
+        }
+        // if (this._reflectionProbe?.texture) {
+        //     material.envMap = this._reflectionProbe.texture;
+        //     // this.context.renderer.prop
+        //     // console.log(material.name);
+        //     // this.context.renderer.properties.get(material);
+        //     // this.context.renderer.properties.update(material, "environment", this._reflectionProbe.texture);
+        // }
+        //     _scene.environment = null;
+        // else _scene.environment = Renderer.envmap;
+        // if (!material.envmap)
+        //     material.envMap = Renderer.envmap;
+        // material.needsUpdate = true;
+        // if (!camera) {
+        //     let isXRCamera = false;
+        //     if (this.context.isInXR) {
+        //         // @ts-ignore
+        //         const arr = this.context.renderer.xr.getCamera() as ArrayCamera;
+        //         if (arr.cameras?.length > 0) {
+        //             camera = arr;
+        //             isXRCamera = true;
+        //         }
+        //     }
+        // }
+        // if (this.customShaderHandler) {
+        //     this.customShaderHandler.onBeforeRender(renderer, scene, camera, geometry, material, group);
+        // }
+        // else if (this.rawShaderHandler) {
+        //     for (const h of this.rawShaderHandler) {
+        //         h.onBeforeRender(this.gameObject, camera);
+        //     }
+        // }
+        if (this._lightmaps) {
+            for (const lm of this._lightmaps) {
+                lm.updateLightmapUniforms(material);
+            }
+        }
+    };
+    onAfterRender() {
+        if (this._isInstancingEnabled && this.handles && this.prevLayers && this.prevLayers.length >= this.handles.length) {
+            for (let i = 0; i < this.handles.length; i++) {
+                const handle = this.handles[i];
+                handle.object.layers.mask = this.prevLayers[i];
+            }
+        }
+        if (this.reflectionProbeUsage !== ReflectionProbeUsage.Off && this._reflectionProbe) {
+            this._reflectionProbe.onUnset(this);
+        }
+    }
+    loadProgressiveTextures(material) {
+        // progressive load before rendering so we only load textures for visible materials
+        if (!suppressProgressiveLoading && material) {
+            if (material["_didRequestTextureLOD"] === undefined && this.allowProgressiveLoading) {
+                material["_didRequestTextureLOD"] = 0;
+                if (debugProgressiveLoading) {
+                    console.log("Load material LOD", material.name);
+                }
+                return NEEDLE_progressive.assignTextureLOD(this.context, this.sourceId, material);
+            }
+        }
+        return Promise.resolve(true);
+    }
+    applySettings(go) {
+        go.receiveShadow = this.receiveShadows;
+        if (this.shadowCastingMode == ShadowCastingMode.On) {
+            go.castShadow = true;
+        }
+        else
+            go.castShadow = false;
+    }
+    _reflectionProbe = null;
+    updateReflectionProbe() {
+        // handle reflection probe
+        this._reflectionProbe = null;
+        if (this.reflectionProbeUsage !== ReflectionProbeUsage.Off) {
+            if (!this.probeAnchor)
+                return;
+            // update the reflection probe right before rendering
+            // if we do it immediately the reflection probe might not be enabled yet 
+            // (since this method is called from onEnable)
+            this.startCoroutine(this._updateReflectionProbe(), FrameEvent.LateUpdate);
+        }
+    }
+    *_updateReflectionProbe() {
+        const obj = this.probeAnchor || this.gameObject;
+        const isAnchor = this.probeAnchor ? true : false;
+        this._reflectionProbe = ReflectionProbe.get(obj, this.context, isAnchor, this.probeAnchor);
+    }
+    setVisibility(visible) {
+        if (!this.isMultiMaterialObject(this.gameObject)) {
+            setCustomVisibility(this.gameObject, visible);
+        }
+        else {
+            for (const ch of this.gameObject.children) {
+                if (this.isMeshOrSkinnedMesh(ch)) {
+                    setCustomVisibility(ch, visible);
+                }
+            }
+        }
+    }
+    isMultiMaterialObject(obj) {
+        return obj.type === "Group";
+    }
+    isMeshOrSkinnedMesh(obj) {
+        return obj.type === "Mesh" || obj.type === "SkinnedMesh";
+    }
+}
+__decorate([
+    serializable()
+], Renderer.prototype, "receiveShadows", void 0);
+__decorate([
+    serializable()
+], Renderer.prototype, "shadowCastingMode", void 0);
+__decorate([
+    serializable()
+], Renderer.prototype, "lightmapIndex", void 0);
+__decorate([
+    serializable(Vector4)
+], Renderer.prototype, "lightmapScaleOffset", void 0);
+__decorate([
+    serializable()
+], Renderer.prototype, "enableInstancing", void 0);
+__decorate([
+    serializable()
+], Renderer.prototype, "renderOrder", void 0);
+__decorate([
+    serializable()
+], Renderer.prototype, "allowOcclusionWhenDynamic", void 0);
+__decorate([
+    serializable(Object3D)
+], Renderer.prototype, "probeAnchor", void 0);
+__decorate([
+    serializable()
+], Renderer.prototype, "reflectionProbeUsage", void 0);
+export class MeshRenderer extends Renderer {
+}
+export class SkinnedMeshRenderer extends MeshRenderer {
+    awake() {
+        super.awake();
+        // disable skinned mesh occlusion because of https://github.com/mrdoob/three.js/issues/14499
+        this.allowOcclusionWhenDynamic = false;
+        // If we don't do that here the bounding sphere matrix used for raycasts will be wrong. Not sure *why* this is necessary
+        this.gameObject.parent?.updateWorldMatrix(false, true);
+    }
+    onBeforeRender() {
+        super.onBeforeRender();
+        if (debugskinnedmesh && this.gameObject instanceof SkinnedMesh && this.gameObject.boundingSphere) {
+            const tempCenter = getTempVector(this.gameObject.boundingSphere.center).applyMatrix4(this.gameObject.matrixWorld);
+            Gizmos.DrawWireSphere(tempCenter, this.gameObject.boundingSphere.radius, "red");
+        }
+    }
+}
+export var ShadowCastingMode;
+(function (ShadowCastingMode) {
+    /// <summary>
+    ///   <para>No shadows are cast from this object.</para>
+    /// </summary>
+    ShadowCastingMode[ShadowCastingMode["Off"] = 0] = "Off";
+    /// <summary>
+    ///   <para>Shadows are cast from this object.</para>
+    /// </summary>
+    ShadowCastingMode[ShadowCastingMode["On"] = 1] = "On";
+    /// <summary>
+    ///   <para>Shadows are cast from this object, treating it as two-sided.</para>
+    /// </summary>
+    ShadowCastingMode[ShadowCastingMode["TwoSided"] = 2] = "TwoSided";
+    /// <summary>
+    ///   <para>Object casts shadows, but is otherwise invisible in the Scene.</para>
+    /// </summary>
+    ShadowCastingMode[ShadowCastingMode["ShadowsOnly"] = 3] = "ShadowsOnly";
+})(ShadowCastingMode || (ShadowCastingMode = {}));
+;
+class InstancingHandler {
+    objs = [];
+    setup(renderer, obj, context, handlesArray, args, level = 0) {
+        // make sure setting casting settings are applied so when we add the mesh to the InstancedMesh we can ask for the correct cast shadow setting
+        renderer.applySettings(obj);
+        const res = this.tryCreateOrAddInstance(obj, context, args);
+        if (res) {
+            renderer.loadProgressiveTextures(res.instancer.material);
+            if (handlesArray === null)
+                handlesArray = [];
+            handlesArray.push(res);
+        }
+        else if (level <= 0 && obj.type !== "Mesh") {
+            const nextLevel = level + 1;
+            for (const ch of obj.children) {
+                handlesArray = this.setup(renderer, ch, context, handlesArray, args, nextLevel);
+            }
+        }
+        if (level === 0) {
+            // For multi material objects we only want to track the root object's matrix
+            if (args.useMatrixWorldAutoUpdate && handlesArray && handlesArray.length >= 0) {
+                this.autoUpdateInstanceMatrix(obj);
+            }
+        }
+        return handlesArray;
+    }
+    tryCreateOrAddInstance(obj, context, args) {
+        if (obj.type === "Mesh") {
+            const index = args.foundMeshes;
+            args.foundMeshes += 1;
+            if (!args.rend.enableInstancing)
+                return null;
+            if (index >= args.rend.enableInstancing.length) {
+                // console.error("Something is wrong with instance setup", obj, args.rend.enableInstancing, index);
+                return null;
+            }
+            if (!args.rend.enableInstancing[index]) {
+                // instancing is disabled
+                // console.log("Instancing is disabled", obj);
+                return null;
+            }
+            // instancing is enabled:
+            const mesh = obj;
+            const geo = mesh.geometry;
+            const mat = mesh.material;
+            for (const i of this.objs) {
+                if (i.isFull())
+                    continue;
+                if (i.geo === geo && i.material === mat) {
+                    const handle = i.addInstance(mesh);
+                    return handle;
+                }
+            }
+            // console.log("Add new instance mesh renderer", obj);
+            const i = new InstancedMeshRenderer(obj.name, geo, mat, 200, context);
+            this.objs.push(i);
+            const handle = i.addInstance(mesh);
+            return handle;
+        }
+        return null;
+    }
+    autoUpdateInstanceMatrix(obj) {
+        const original = obj.matrixWorld["multiplyMatrices"].bind(obj.matrixWorld);
+        const previousMatrix = obj.matrixWorld.clone();
+        const matrixChangeWrapper = (a, b) => {
+            const newMatrixWorld = original(a, b);
+            if (obj[NEED_UPDATE_INSTANCE_KEY] || previousMatrix.equals(newMatrixWorld) === false) {
+                previousMatrix.copy(newMatrixWorld);
+                obj[NEED_UPDATE_INSTANCE_KEY] = true;
+            }
+            return newMatrixWorld;
+        };
+        obj.matrixWorld["multiplyMatrices"] = matrixChangeWrapper;
+        // wrap matrixWorldNeedsUpdate
+        // let originalMatrixWorldNeedsUpdate = obj.matrixWorldNeedsUpdate;
+        // Object.defineProperty(obj, "matrixWorldNeedsUpdate", {
+        //     get: () => {
+        //         return originalMatrixWorldNeedsUpdate;
+        //     },
+        //     set: (value: boolean) => {
+        //         if(value) console.warn("SET MATRIX WORLD NEEDS UPDATE");
+        //         originalMatrixWorldNeedsUpdate = value;
+        //     }
+        // });
+    }
+}
+const instancing = new InstancingHandler();
+class InstanceHandle {
+    get name() {
+        return this.object.name;
+    }
+    instanceIndex = -1;
+    object;
+    instancer;
+    constructor(instanceIndex, originalObject, instancer) {
+        this.instanceIndex = instanceIndex;
+        this.object = originalObject;
+        this.instancer = instancer;
+        originalObject[$instancingRenderer] = instancer;
+        GameObject.markAsInstancedRendered(originalObject, true);
+    }
+    updateInstanceMatrix(updateChildren = false) {
+        if (this.instanceIndex < 0)
+            return;
+        this.object.updateWorldMatrix(true, updateChildren);
+        this.instancer.updateInstance(this.object.matrixWorld, this.instanceIndex);
+    }
+    setMatrix(matrix) {
+        if (this.instanceIndex < 0)
+            return;
+        this.instancer.updateInstance(matrix, this.instanceIndex);
+    }
+    add() {
+        if (this.instanceIndex >= 0)
+            return;
+        this.instancer.add(this);
+    }
+    remove() {
+        if (this.instanceIndex < 0)
+            return;
+        this.instancer.remove(this);
+    }
+}
+class InstancedMeshRenderer {
+    /** The three instanced mesh
+     * @link https://threejs.org/docs/#api/en/objects/InstancedMesh
+     */
+    get mesh() {
+        return this.inst;
+    }
+    get visible() {
+        return this.inst.visible;
+    }
+    set visible(val) {
+        this.inst.visible = val;
+    }
+    get castShadow() {
+        return this.inst.castShadow;
+    }
+    set castShadow(val) {
+        this.inst.castShadow = val;
+    }
+    set receiveShadow(val) {
+        this.inst.receiveShadow = val;
+    }
+    updateBounds(box = true, sphere = true) {
+        this._needUpdateBounds = false;
+        if (box)
+            this.inst.computeBoundingBox();
+        if (sphere)
+            this.inst.computeBoundingSphere();
+    }
+    name = "";
+    geo;
+    material;
+    get currentCount() { return this.inst.count; }
+    context;
+    inst;
+    handles = [];
+    maxCount;
+    static nullMatrix = new THREE.Matrix4();
+    isFull() {
+        return this.currentCount >= this.maxCount;
+    }
+    _needUpdateBounds = false;
+    constructor(name, geo, material, count, context) {
+        this.name = name;
+        this.geo = geo;
+        this.material = material;
+        this.context = context;
+        this.maxCount = count;
+        if (debugInstancing) {
+            material = new THREE.MeshBasicMaterial({ color: this.randomColor() });
+        }
+        this.inst = new THREE.InstancedMesh(geo, material, count);
+        this.inst[$instancingAutoUpdateBounds] = true;
+        this.inst.count = 0;
+        this.inst.layers.set(2);
+        this.inst.visible = true;
+        // Not handled by RawShaderMaterial, so we need to set the define explicitly.
+        // Edge case: theoretically some users of the material could use it in an
+        // instanced fashion, and some others not. In that case, the material would not
+        // be able to be shared between the two use cases. We could probably add a
+        // onBeforeRender call for the InstancedMesh and set the define there.
+        // Same would apply if we support skinning - 
+        // there we would have to split instanced batches so that the ones using skinning
+        // are all in the same batch.
+        if (material instanceof THREE.RawShaderMaterial) {
+            material.defines["USE_INSTANCING"] = true;
+            material.needsUpdate = true;
+        }
+        // this.inst.castShadow = true;
+        // this.inst.receiveShadow = true;
+        this.context.scene.add(this.inst);
+        context.pre_render_callbacks.push(this.onBeforeRender);
+        // console.log(this.inst);
+        // this.context.pre_render_callbacks.push(this.onPreRender.bind(this));
+        // setInterval(() => {
+        //     this.inst.visible = !this.inst.visible;
+        // }, 500);
+    }
+    onBeforeRender = () => {
+        if (this._needUpdateBounds && this.inst[$instancingAutoUpdateBounds] === true) {
+            if (debugInstancing)
+                console.log("Update instancing bounds", this.name, this.inst.matrixWorldNeedsUpdate);
+            this.updateBounds();
+        }
+    };
+    randomColor() {
+        return new THREE.Color(Math.random(), Math.random(), Math.random());
+    }
+    addInstance(obj) {
+        if (this.currentCount >= this.maxCount) {
+            console.error("TOO MANY INSTANCES - resize is not yet implemented!", this.inst.count); // todo: make it resize
+            return null;
+        }
+        const handle = new InstanceHandle(-1, obj, this);
+        if (obj.castShadow === true && this.inst.castShadow === false) {
+            this.inst.castShadow = true;
+        }
+        if (obj.receiveShadow === true && this.inst.receiveShadow === false) {
+            this.inst.receiveShadow = true;
+        }
+        this.add(handle);
+        return handle;
+    }
+    add(handle) {
+        if (handle.instanceIndex < 0) {
+            handle.instanceIndex = this.currentCount;
+            // console.log(handle.instanceIndex, this.currentCount);
+            if (handle.instanceIndex >= this.handles.length)
+                this.handles.push(handle);
+            else
+                this.handles[handle.instanceIndex] = handle;
+        }
+        // console.log("Handle instance");
+        handle.object.updateWorldMatrix(true, true);
+        this.inst.setMatrixAt(handle.instanceIndex, handle.object.matrixWorld);
+        this.inst.instanceMatrix.needsUpdate = true;
+        this.inst.count += 1;
+        this._needUpdateBounds = true;
+        if (this.inst.count > 0)
+            this.inst.visible = true;
+        // console.log("Added", this.name, this.inst.count, this.handles);
+    }
+    remove(handle) {
+        if (!handle)
+            return;
+        if (handle.instanceIndex < 0 || handle.instanceIndex >= this.handles.length || this.inst.count <= 0) {
+            return;
+        }
+        if (this.handles[handle.instanceIndex] !== handle) {
+            console.error("instance handle is not part of renderer, was it removed before?", handle.instanceIndex, this.name);
+            const index = this.handles.indexOf(handle);
+            if (index < 0)
+                return;
+            handle.instanceIndex = index;
+        }
+        this.handles[handle.instanceIndex] = null;
+        this.inst.setMatrixAt(handle.instanceIndex, InstancedMeshRenderer.nullMatrix);
+        const removedLastElement = handle.instanceIndex >= this.currentCount - 1;
+        // console.log(removedLastElement, this.currentCount, handle.instanceIndex, this.handles);
+        if (!removedLastElement && this.currentCount > 0) {
+            const lastElement = this.handles[this.currentCount - 1];
+            if (lastElement) {
+                lastElement.instanceIndex = handle.instanceIndex;
+                lastElement.updateInstanceMatrix();
+                this.handles[handle.instanceIndex] = lastElement;
+                this.handles[this.currentCount - 1] = null;
+                // this.inst.setMatrixAt(handle.instanceIndex, lastElement.object.matrixWorld);
+                // this.inst.setMatrixAt(this.currentCount - 1, InstancedMeshRenderer.nullMatrix);
+            }
+        }
+        if (this.inst.count > 0)
+            this.inst.count -= 1;
+        handle.instanceIndex = -1;
+        this._needUpdateBounds = true;
+        if (this.inst.count <= 0)
+            this.inst.visible = false;
+        this.inst.instanceMatrix.needsUpdate = true;
+    }
+    updateInstance(mat, index) {
+        this.inst.setMatrixAt(index, mat);
+        this.inst.instanceMatrix.needsUpdate = true;
+        this._needUpdateBounds = true;
+    }
+}
 //# sourceMappingURL=Renderer.js.map