@needle-tools/engine 2.24.0-pre

package/src/engine-components/GltfExport.ts

@@ -0,0 +1,232 @@
+import { Behaviour, GameObject } from "./Component";
+import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
+import GLTFMeshGPUInstancingExtension from '../include/three/EXT_mesh_gpu_instancing_exporter.js';
+import { Renderer } from "./Renderer";
+import { Object3D, Vector3 } from "three";
+import { SerializationContext } from "../engine/engine_serialization_core";
+import { NEEDLE_components } from "../engine/extensions/NEEDLE_components";
+import { getWorldPosition } from "../engine/engine_three_utils";
+import { BoxHelperComponent } from "./BoxHelperComponent";
+import { AnimationClip } from "three";
+
+
+declare type ExportOptions = {
+    binary: boolean,
+    pivot?: THREE.Vector3
+}
+
+export const componentsArrayExportKey = "$___Export_Components";
+
+// @generate-component
+export class GltfExportBox extends BoxHelperComponent {
+    sceneRoot?: THREE.Object3D;
+
+    start() {
+        this.startCoroutine(this.updateGltfBox());
+    }
+
+    *updateGltfBox() {
+        while (true) {
+            for (let i = 0; i < 10; i++) yield;
+
+        }
+    }
+}
+
+export class GltfExport extends Behaviour {
+    binary: boolean = true;
+    objects: Object3D[] = [];
+
+    private exporter?: GLTFExporter;
+    private ext?: NEEDLE_components;
+
+    async exportNow(name: string) {
+        console.log("DO EXPORT", this.objects);
+        const opts = { binary: this.binary, pivot: GltfExport.calculateCenter(this.objects) };
+        const res = await this.export(this.objects, opts);
+
+        if (!this.binary) {
+            if (!name.endsWith(".gltf"))
+                name += ".gltf";
+        }
+        else if (!name.endsWith(".glb"))
+            name += ".glb";
+        if (this.binary)
+            GltfExport.saveArrayBuffer(res, name);
+        else
+            GltfExport.saveJson(res, name);
+    }
+
+    async export(objectsToExport: Object3D[], opts?: ExportOptions): Promise<any> {
+
+        if (objectsToExport === null || objectsToExport.length <= 0) {
+            console.log("no objects set to export");
+            return;
+        }
+
+        if (!this.exporter) {
+            // Instantiate a exporter
+            this.exporter = new GLTFExporter();
+            //@ts-ignore
+            this.exporter.register(writer => new GLTFMeshGPUInstancingExtension(writer));
+
+            this.ext = new NEEDLE_components();
+            //@ts-ignore
+            this.ext.registerExport(this.exporter);
+        }
+
+        GltfExport.filterTopmostParent(objectsToExport);
+
+        // TODO export only worldglb BUT exclude "World" child which contains all build tools
+        // TODO add filtering / tags for what to export and what not
+
+        // https://threejs.org/docs/#examples/en/exporters/GLTFExporter
+        const options = {
+            trs: false,
+            onlyVisible: true,
+            truncateDrawRange: false,
+            binary: opts?.binary ?? true,
+            maxTextureSize: Infinity, // To prevent NaN value,
+            embedImages: true,
+            includeCustomExtensions: true,
+            animations: GltfExport.collectAnimations(objectsToExport),
+        };
+
+        // hide objects that we don't want to export
+
+        const exportScene = new Object3D();
+        // set the pivot position
+        if (opts?.pivot) exportScene.position.sub(opts.pivot);
+        // console.log(exportScene.position);
+
+        // add objects for export
+        console.log("EXPORT", objectsToExport);
+        objectsToExport.forEach(obj => {
+            if (obj) {
+                // adding directly does not require us to change parents and mess with the hierarchy actually
+                exportScene.children.push(obj);
+                // TODO: we should probably be doing this before writing nodes?? apply world scale, position, rotation etc for export only
+                obj.matrixAutoUpdate = false;
+                obj.matrix.copy(obj.matrixWorld);
+                // disable instancing
+                GameObject.getComponentsInChildren(obj, Renderer).forEach(r => {
+                    if (GameObject.isActiveInHierarchy(r.gameObject)) r.setInstancingEnabled(false)
+                });
+            }
+        });
+
+        const serializationContext = new SerializationContext(exportScene);
+        this.ext!.context = serializationContext;
+
+        return new Promise((resolve, reject) => {
+
+            try {
+                // Parse the input and generate the glTF output
+                this.exporter?.parse(
+                    exportScene,
+                    // called when the gltf has been generated
+                    res => {
+                        cleanup();
+                        resolve(res);
+                    },
+                    // called when there is an error in the generation
+                    err => {
+                        cleanup();
+                        reject(err);
+                    },
+                    //@ts-ignore
+                    options
+                );
+            }
+            catch (err) {
+                console.error(err);
+                reject(err);
+            }
+            finally {
+                console.log("FINALLY");
+            }
+        });
+
+        function cleanup() {
+            objectsToExport.forEach(obj => {
+                if (!obj) return;
+                obj.matrixAutoUpdate = true;
+                GameObject.getComponentsInChildren(obj, Renderer).forEach(r => {
+                    if (GameObject.isActiveInHierarchy(r.gameObject)) r.setInstancingEnabled(false)
+                });
+            });
+        }
+    };
+
+    private static saveArrayBuffer(buffer, filename) {
+        this.save(new Blob([buffer], { type: 'application/octet-stream' }), filename);
+    }
+
+    private static saveJson(json, filename) {
+        this.save("data: text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(json)), filename);
+    }
+
+    private static save(blob, filename) {
+        const link = document.createElement('a');
+        link.style.display = 'none';
+        document.body.appendChild(link); // Firefox workaround, see #6594
+        if (typeof blob === "string")
+            link.href = blob;
+        else
+            link.href = URL.createObjectURL(blob);
+        link.download = filename;
+        link.click();
+        link.remove();
+        // console.log(link.href);
+        // URL.revokeObjectURL( url ); breaks Firefox...
+    }
+
+    private static collectAnimations(objs: THREE.Object3D[], target?: Array<AnimationClip>): Array<AnimationClip> {
+        target = target || [];
+        for (const obj of objs) {
+            if (!obj) continue;
+            obj.traverseVisible(o => {
+                if (o.animations && o.animations.length > 0)
+                    target!.push(...o.animations);
+            });
+        }
+        return target;
+    }
+
+
+    private static calculateCenter(objs: THREE.Object3D[], target?: Vector3): Vector3 {
+        const center = target || new Vector3();
+        center.set(0, 0, 0);
+        objs.forEach(obj => {
+            center.add(getWorldPosition(obj));
+        });
+        console.log(center);
+        center.divideScalar(objs.length);
+        // center.y -= 1;
+        return center;
+    }
+
+    private static filterTopmostParent(objs: THREE.Object3D[]) {
+        if (objs.length <= 0) return;
+        for (let index = 0; index < objs.length; index++) {
+            let obj = objs[index];
+            if (!obj) {
+                objs.splice(index, 1);
+                index--;
+                continue;
+            }
+            // loop hierarchy up and kick object if any of its parents is already in this list
+            // because then this object will already be exported (and we dont want to export it)
+            while (obj.parent) {
+                if (objs.includes(obj.parent)) {
+                    // console.log("FILTER", objs[index]);
+                    objs.splice(index, 1);
+                    index--;
+                    break;
+                }
+                obj = obj.parent;
+            }
+        }
+    }
+
+}

package/src/engine-components/GridHelper.ts

@@ -0,0 +1,32 @@
+import { Behaviour } from "./Component";
+import { serializeable } from "../engine/engine_serialization_decorator";
+import * as params from "../engine/engine_default_parameters";
+import { Color, GridHelper as _GridHelper } from "three";
+
+export class GridHelper extends Behaviour {
+
+    @serializeable()
+    public isGizmo:boolean = false;
+    @serializeable(Color)
+    private color0!: THREE.Color;
+    @serializeable(Color)
+    private color1!: THREE.Color;
+
+    private gridHelper!: THREE.GridHelper | null;
+    private size!: number;
+    private divisions!: number;
+    private offset!: number;
+
+    onEnable() {
+        if (this.isGizmo && !params.showGizmos) return;
+
+        const size = this.size;
+        const divisions = this.divisions;
+        if (!this.gridHelper) {
+            this.gridHelper = new _GridHelper(size, divisions, this.color0 ?? new Color(.4, .4, .4), this.color1 ?? new Color(.6,.6,.6));
+            if (this.offset !== undefined)
+                this.gridHelper.position.y += this.offset;
+            this.gameObject.add(this.gridHelper);
+        }
+    }
+}

package/src/engine-components/GroundProjection.ts

@@ -0,0 +1,75 @@
+import { Behaviour, GameObject } from "./Component";
+import { GroundProjectedEnv as GroundProjection } from 'three/examples/jsm/objects/GroundProjectedEnv.js';
+import { serializeable } from "../engine/engine_serialization_decorator";
+import { Watch as Watch } from "../engine/engine_utils";
+import { Texture } from "three";
+
+
+export class GroundProjectedEnv extends Behaviour {
+
+    @serializeable()
+    set scale(val: number) {
+        this._scale = val;
+        this.env?.scale.setScalar(val);
+    }
+    get scale(): number {
+        return this._scale;
+    }
+    private _scale: number = 20;
+
+    @serializeable()
+    set radius(val: number) {
+        this._radius = val;
+        if (this.env)
+            this.env.height = val;
+    }
+    get radius(): number { return this._radius; }
+    private _radius: number = 100;
+
+    @serializeable()
+    set height(val: number) {
+        this._height = val;
+        if (this.env)
+            this.env.height = val;
+    }
+    get height(): number { return this._height; }
+    private _height: number = 100;
+
+    private _lastEnvironment?: Texture;
+    private env?: GroundProjection;
+    private _watcher?: Watch;
+
+
+    onEnable() {
+        this.updateProjection();
+        if (!this._watcher) {
+            this._watcher = new Watch(this.context.scene, "environment");
+            this._watcher.subscribeWrite(this.updateProjection.bind(this));
+        }
+        this._watcher.apply();
+    }
+
+    onDisable() {
+        this._watcher?.revoke();
+        this.env?.removeFromParent();
+    }
+
+    updateProjection() {
+        if (!this.context.scene.environment) return;
+        if (!this.env || this.context.scene.environment !== this._lastEnvironment) {
+            console.log("Create/Update Ground Projection", this.context.scene.environment.name);
+            this.env = new GroundProjection(this.context.scene.environment);
+        }
+        this._lastEnvironment = this.context.scene.environment;
+        if (!this.env.parent)
+            this.gameObject.add(this.env);
+        this.env.scale.setScalar(this._scale);
+        this.env.radius = this._radius;
+        this.env.height = this._height;
+        // dont make the ground projection raycastable by default
+        if (this.env.isObject3D === true) {
+            this.env.layers.set(2);
+        }
+    }
+
+}

package/src/engine-components/Interactable.ts

@@ -0,0 +1,28 @@
+import { Behaviour } from "./Component";
+import { IPointerClickHandler, IPointerEnterHandler, PointerEventData } from "./ui/PointerEvents";
+
+
+export class Interactable extends Behaviour implements IPointerClickHandler {
+
+    canGrab : boolean = true;
+
+    onPointerClick(_args: PointerEventData) {
+        // console.log("CLICK");
+    }
+
+    // OnPointerEnter(args: PointerEventData) {
+    //     console.log("ENTER");
+    // }
+
+    // OnPointerExit(args: PointerEventData) {
+    //     console.log("Exit");
+    // }
+}
+
+
+// TODO: how do we sync things like that...
+export class UsageMarker extends Behaviour
+{
+    public isUsed : boolean = true;
+    public usedBy : any = null;
+}

package/src/engine-components/LODGroup.ts

@@ -0,0 +1,173 @@
+import { Behaviour, GameObject } from "./Component";
+import * as THREE from "three";
+import { Renderer } from "./Renderer";
+import { getParam } from "../engine/engine_utils";
+import { serializeable } from "../engine/engine_serialization_decorator";
+import { Vector3 } from "three";
+
+const debug = getParam("debugLODs");
+const noLods = getParam("noLODs");
+
+enum LODFadeMode {
+    None = 0,
+    CrossFade = 1,
+    SpeedTree = 2,
+}
+
+export class LODModel {
+    @serializeable()
+    screenRelativeTransitionHeight!: number;
+    @serializeable()
+    distance!: number;
+    @serializeable()
+    renderers!: string[];
+}
+
+class LOD {
+    model: LODModel;
+    renderers: Renderer[];
+
+    constructor(group: LODGroup, model: LODModel) {
+        this.model = model;
+        this.renderers = [];
+        for (const guid of model.renderers) {
+            const rend = this.findRenderer(guid, group.gameObject);// GameObject.findByGuid(guid, group.gameObject) as Renderer;
+            if (rend && rend.gameObject) {
+                this.renderers.push(rend);
+            }
+            else if(debug){
+                console.warn("Renderer not found: " + guid, group.gameObject);
+            }
+        }
+    }
+
+    findRenderer(guid: string, go : GameObject) : Renderer | null {
+        const res = GameObject.foreachComponent(go, comp => {
+            if(comp.guid === guid) return comp;
+            // explanation: https://github.com/needle-tools/needle-tiny-playground/issues/218#issuecomment-1150234346
+            const prototypeGuid = Object.getPrototypeOf(comp)?.guid;
+            if(prototypeGuid === guid) return comp;
+            return null;
+        });
+        if(res) return res;
+        for(const ch of go.children){
+            const rend = this.findRenderer(guid, ch as GameObject);
+            if(rend) return rend;
+        }
+        return null;
+    }
+}
+
+declare class LODSetting {
+    lod: THREE.LOD;
+    levelIndex: number;
+    distance: number;
+}
+
+export class LODGroup extends Behaviour {
+
+    fadeMode: LODFadeMode = LODFadeMode.None;
+    @serializeable(Vector3)
+    localReferencePoint: THREE.Vector3 | undefined = undefined;
+    lodCount: number = 0;
+    size: number = 0;
+    animateCrossFading: boolean = false;
+
+    @serializeable(LODModel)
+    lodModels?: LODModel[];
+
+    private _lods: LOD[] = [];
+    private _settings: LODSetting[] = [];
+
+    // https://threejs.org/docs/#api/en/objects/LOD
+    private _lodsHandler?: Array<THREE.LOD>;
+
+    start(): void {
+        if (noLods) return;
+        if (this._lodsHandler) return;
+        if (!this.gameObject) return;
+        if (debug)
+            console.log(this);
+
+        if (this.lodModels && Array.isArray(this.lodModels)) {
+            let maxDistance = 0;
+            let renderers: Renderer[] = [];
+            for (const model of this.lodModels) {
+                maxDistance = Math.max(model.distance, maxDistance);
+                const lod = new LOD(this, model);
+                this._lods.push(lod);
+                for (const rend of lod.renderers) {
+                    if (!renderers.includes(rend))
+                        renderers.push(rend);
+                }
+            }
+            this._lodsHandler = new Array<THREE.LOD>();
+            for (let i = 0; i < renderers.length; i++) {
+                const handler = new THREE.LOD();
+                this._lodsHandler.push(handler);
+                this.gameObject.add(handler);
+            }
+            const empty = new THREE.Object3D();
+            if (debug)
+                console.log(renderers);
+            for (let i = 0; i < renderers.length; i++) {
+                const rend = renderers[i];
+                const handler = this._lodsHandler[i];
+                const obj = rend.gameObject;
+                let maxDistance = 0;
+                let lodDistanceDiff = 0;
+                if (debug)
+                    console.log(i, obj.name);
+                for (const lod of this._lods) {
+
+                    // get object to be lodded, it can be empty
+                    let object: THREE.Object3D | null = null;
+                    if (lod.renderers.includes(rend)) object = obj;
+                    else {
+                        object = empty;
+                    }
+                    if (debug)
+                        console.log("add", lod.model.distance, object.name);
+
+                    const dist = lod.model.distance;
+                    lodDistanceDiff = dist - maxDistance;
+                    maxDistance = Math.max(dist, maxDistance);
+                    this.onAddLodLevel(handler, object, dist);
+                }
+                const cullDistance = maxDistance + lodDistanceDiff;
+                if (debug) {
+                    console.log("cull", cullDistance);
+                }
+                this.onAddLodLevel(handler, empty, cullDistance);
+            }
+        }
+    }
+
+    update() {
+        if (!this.gameObject) return;
+        if (!this._lodsHandler) return;
+        const cam = this.context.mainCamera;
+        if (!cam) return;
+
+        for (const h of this._lodsHandler) {
+            h.update(cam);
+        }
+    }
+
+    private onAddLodLevel(lod: THREE.LOD, obj: THREE.Object3D, dist: number) {
+        lod.addLevel(obj, dist * this._distanceFactor);
+        const setting = { lod: lod, levelIndex: lod.levels.length - 1, distance: dist };
+        this._settings.push(setting)
+    }
+
+    private _distanceFactor = 1;
+
+    distanceFactor(factor: number) {
+        if (factor === this._distanceFactor) return;
+        this._distanceFactor = factor;
+        for (const setting of this._settings) {
+            const level = setting.lod.levels[setting.levelIndex];
+            level.distance = setting.distance * factor;
+        }
+    }
+}