@rings-webgpu/core 1.0.0 → 1.0.2

package/dist/src/io/InputSystem.js

@@ -0,0 +1,382 @@
+import { CEvent } from "../event/CEvent";
+import { CEventDispatcher } from "../event/CEventDispatcher";
+import { KeyEvent } from "../event/eventConst/KeyEvent";
+import { PointerEvent3D } from "../event/eventConst/PointerEvent3D";
+import { Vector3 } from "../math/Vector3";
+import { TouchData } from "./TouchData";
+export class InputSystem extends CEventDispatcher {
+    constructor() {
+        super(...arguments);
+        this.canvasX = 0;
+        this.canvasY = 0;
+        this.isMouseDown = false;
+        this.isRightMouseDown = false;
+        this.mouseX = 0;
+        this.mouseY = 0;
+        this.wheelDelta = 0;
+        this.mouseOffsetX = 0;
+        this.mouseOffsetY = 0;
+        this.mouseLastX = 0;
+        this.mouseLastY = 0;
+        this._time = 0;
+        this.mouseLock = false;
+        this._oldPosition1 = null;
+        this._oldPosition2 = null;
+        this._downTime = 0;
+    }
+    initCanvas(canvas) {
+        this.canvas = canvas;
+        // temp vars to check click
+        let _t = 0, _x = 0, _y = 0, _button = 0;
+        canvas.onpointerdown = (ev) => {
+            _t = performance.now();
+            _x = ev.clientX;
+            _y = ev.clientY;
+            _button = ev.button;
+            if (ev.button == 0) {
+                this.mouseStart(ev);
+            }
+            else if (ev.button == 1) {
+                this.middleDown(ev);
+            }
+            else if (ev.button == 2) {
+                this.isRightMouseDown = true;
+                this.mouseStart(ev);
+            }
+            canvas.setPointerCapture(ev.pointerId);
+        };
+        canvas.onpointerup = (ev) => {
+            if (ev.button == 0) {
+                this.mouseEnd(ev);
+            }
+            else if (ev.button == 1) {
+                this.middleUp(ev);
+            }
+            else if (ev.button == 2) {
+                this.isRightMouseDown = false;
+                this.mouseEnd(ev);
+            }
+            if (ev.button === _button &&
+                performance.now() - _t < 300 &&
+                Math.abs(_x - ev.clientX) < 20 &&
+                Math.abs(_y - ev.clientY) < 20) {
+                ev.button === 0 ? this.mouseClick(ev) : this.rightClick(ev);
+            }
+            canvas.releasePointerCapture(ev.pointerId);
+        };
+        canvas.onpointerenter = (ev) => {
+            this.mouseOver(ev);
+        };
+        canvas.onpointermove = (ev) => {
+            this.mouseMove(ev);
+        };
+        canvas.onpointercancel = (ev) => {
+            canvas.releasePointerCapture(ev.pointerId);
+            if (ev.button == 1)
+                this.middleUp(ev);
+            else
+                this.mouseEnd(ev);
+        };
+        canvas.addEventListener(`wheel`, (e) => this.mouseWheel(e), {
+            passive: false,
+        });
+        window.addEventListener("keydown", (e) => this.keyDown(e), true);
+        window.addEventListener("keyup", (e) => this.keyUp(e), true);
+        canvas.oncontextmenu = function () {
+            return false;
+        };
+        //window.addEventListener("resize", (e: UIEvent) => this.onWindowsResize(e), true);
+        let rect = this.canvas.getBoundingClientRect();
+        this.canvasX = rect.left; // parseInt( this.canvas.style.left.split("px")[0] );
+        this.canvasY = rect.top; //rect parseInt(this.canvas.style.top.split("px")[0]);
+        this._keyStatus = {};
+        this._mouseStatus = {};
+        this._isTouchStart = false;
+        this._keyEvent3d = new KeyEvent();
+        this._pointerEvent3D = new PointerEvent3D();
+        this._windowsEvent3d = new CEvent();
+    }
+    useMouseLock() {
+        if (this.mouseLock)
+            return;
+        this.canvas.requestPointerLock();
+        this.mouseLock = true;
+        document.addEventListener("mousemove", (e) => this.onMouseLockMove(e), false);
+    }
+    releaseMouseLock() {
+        this.mouseLock = false;
+        document.exitPointerLock();
+        document.removeEventListener("mousemove", (e) => this.onMouseLockMove(e), false);
+    }
+    onMouseLockMove(e) {
+        this.mouseLastX = this.mouseX;
+        this.mouseLastY = this.mouseY;
+        this.mouseX =
+            e.clientX - this.canvasX; /*- Input.canvas.x + Input.canvas.offsetX*/
+        this.mouseY =
+            e.clientY - this.canvasY; /*- Input.canvas.y + Input.canvas.offsetY*/
+        this.mouseOffsetX = e.movementX;
+        this.mouseOffsetY = e.movementY;
+        this._pointerEvent3D.reset();
+        this._pointerEvent3D.type = PointerEvent3D.POINTER_MOVE;
+        this._pointerEvent3D.ctrlKey = e.ctrlKey;
+        this._pointerEvent3D.altKey = e.altKey;
+        this._pointerEvent3D.shiftKey = e.shiftKey;
+        this._pointerEvent3D.mouseX = this.mouseX;
+        this._pointerEvent3D.mouseY = this.mouseY;
+        this._pointerEvent3D.movementX = e.movementX;
+        this._pointerEvent3D.movementY = e.movementY;
+        this.dispatchEvent(this._pointerEvent3D);
+    }
+    onPinch(x1, y1, x2, y2) {
+        this._oldPosition1 = new Vector3(x1, y1);
+        this._oldPosition2 = new Vector3(x2, y2);
+    }
+    onSwipe(x, y) {
+        this.mouseX = x;
+        this.mouseY = y;
+        this._oldPosition1 = null;
+        this._oldPosition2 = null;
+        this._time = new Date().getTime();
+    }
+    GetTargetTouches(targetTouches) {
+        var array = new Array();
+        for (var i = 0; i < targetTouches.length; i++) {
+            var touchData = new TouchData(targetTouches[i]);
+            array.push(touchData);
+        }
+        return array;
+    }
+    rightClick(e) {
+        this._pointerEvent3D.reset();
+        this._pointerEvent3D.mouseCode = e.button;
+        this._pointerEvent3D.mouseX = e.clientX - this.canvasX;
+        this._pointerEvent3D.mouseY = e.clientY - this.canvasY;
+        // this._pointerEvent3D.target = this;
+        this._pointerEvent3D.type = PointerEvent3D.POINTER_RIGHT_CLICK;
+        this._pointerEvent3D.ctrlKey = e.ctrlKey;
+        this._pointerEvent3D.altKey = e.altKey;
+        this._pointerEvent3D.shiftKey = e.shiftKey;
+        this.dispatchEvent(this._pointerEvent3D);
+    }
+    middleDown(e) {
+        this._pointerEvent3D.reset();
+        this._pointerEvent3D.mouseCode = e.button;
+        this._pointerEvent3D.mouseX = e.clientX - this.canvasX;
+        this._pointerEvent3D.mouseY = e.clientY - this.canvasY;
+        // this._pointerEvent3D.target = this;
+        this._pointerEvent3D.type = PointerEvent3D.POINTER_MID_DOWN;
+        this._pointerEvent3D.ctrlKey = e.ctrlKey;
+        this._pointerEvent3D.altKey = e.altKey;
+        this._pointerEvent3D.shiftKey = e.shiftKey;
+        this._pointerEvent3D.pointerId = e[`pointerId`] ? e[`pointerId`] : 0;
+        this._pointerEvent3D.pointerType = e[`pointerType`] ? e[`pointerType`] : 0;
+        this._pointerEvent3D.isPrimary = e[`isPrimary`] ? e[`isPrimary`] : 0;
+        this._pointerEvent3D.pressure = e[`pressure`] ? e[`pressure`] : 0;
+        this.dispatchEvent(this._pointerEvent3D);
+    }
+    middleUp(e) {
+        this._pointerEvent3D.reset();
+        this._pointerEvent3D.mouseCode = e.button;
+        this._pointerEvent3D.mouseX = e.clientX - this.canvasX;
+        this._pointerEvent3D.mouseY = e.clientY - this.canvasY;
+        this._pointerEvent3D.type = PointerEvent3D.POINTER_MID_UP;
+        this._pointerEvent3D.ctrlKey = e.ctrlKey;
+        this._pointerEvent3D.metaKey = e.metaKey;
+        this._pointerEvent3D.altKey = e.altKey;
+        this._pointerEvent3D.shiftKey = e.shiftKey;
+        this._pointerEvent3D.pointerId = e.pointerId;
+        this._pointerEvent3D.pointerType = e.pointerType;
+        this._pointerEvent3D.isPrimary = e.isPrimary;
+        this._pointerEvent3D.pressure = e.pressure;
+        this.dispatchEvent(this._pointerEvent3D);
+    }
+    mouseClick(e) {
+        this._pointerEvent3D.reset();
+        this._pointerEvent3D.mouseCode = e.button;
+        this._pointerEvent3D.mouseX = e.clientX - this.canvasX;
+        this._pointerEvent3D.mouseY = e.clientY - this.canvasY;
+        this._pointerEvent3D.type = PointerEvent3D.POINTER_CLICK;
+        this._pointerEvent3D.ctrlKey = e.ctrlKey;
+        this._pointerEvent3D.metaKey = e.metaKey;
+        this._pointerEvent3D.altKey = e.altKey;
+        this._pointerEvent3D.shiftKey = e.shiftKey;
+        this.dispatchEvent(this._pointerEvent3D);
+    }
+    mouseEnd(e) {
+        this.isMouseDown = false;
+        this.mouseLastX = this.mouseX;
+        this.mouseLastY = this.mouseY;
+        this.mouseX =
+            e.clientX - this.canvasX; /*- Input.canvas.x + Input.canvas.offsetX*/
+        this.mouseY =
+            e.clientY - this.canvasY; /*- Input.canvas.y + Input.canvas.offsetY*/
+        this.mouseOffsetX = this.mouseX - this.mouseLastX;
+        this.mouseOffsetY = this.mouseY - this.mouseLastY;
+        this._pointerEvent3D.reset();
+        this._pointerEvent3D.mouseCode = e.button;
+        this._mouseStatus[this._pointerEvent3D.mouseCode] = false;
+        this._pointerEvent3D.type = PointerEvent3D.POINTER_UP;
+        this._pointerEvent3D.ctrlKey = e.ctrlKey;
+        this._pointerEvent3D.metaKey = e.metaKey;
+        this._pointerEvent3D.altKey = e.altKey;
+        this._pointerEvent3D.shiftKey = e.shiftKey;
+        this._pointerEvent3D.pointerId = e.pointerId;
+        this._pointerEvent3D.pointerType = e.pointerType;
+        this._pointerEvent3D.isPrimary = e.isPrimary;
+        this._pointerEvent3D.pressure = e.pressure;
+        this._pointerEvent3D.mouseX = this.mouseX;
+        this._pointerEvent3D.mouseY = this.mouseY;
+        this.dispatchEvent(this._pointerEvent3D);
+    }
+    mouseStart(e) {
+        this.isMouseDown = true;
+        this.mouseLastX = this.mouseX;
+        this.mouseLastY = this.mouseY;
+        this.mouseX =
+            e.clientX - this.canvasX; /*- Input.canvas.x + Input.canvas.offsetX*/
+        this.mouseY =
+            e.clientY - this.canvasY; /*- Input.canvas.y + Input.canvas.offsetY*/
+        this.mouseOffsetX = this.mouseX - this.mouseLastX;
+        this.mouseOffsetY = this.mouseY - this.mouseLastY;
+        this._pointerEvent3D.reset();
+        this._pointerEvent3D.mouseCode = e.button;
+        this._pointerEvent3D.ctrlKey = e.ctrlKey;
+        this._pointerEvent3D.metaKey = e.metaKey;
+        this._pointerEvent3D.altKey = e.altKey;
+        this._pointerEvent3D.shiftKey = e.shiftKey;
+        this._pointerEvent3D.pointerId = e[`pointerId`] ? e[`pointerId`] : 0;
+        this._pointerEvent3D.pointerType = e[`pointerType`] ? e[`pointerType`] : 0;
+        this._pointerEvent3D.isPrimary = e[`isPrimary`] ? e[`isPrimary`] : 0;
+        this._pointerEvent3D.pressure = e[`pressure`] ? e[`pressure`] : 0;
+        this._pointerEvent3D.mouseX = this.mouseX;
+        this._pointerEvent3D.mouseY = this.mouseY;
+        this._pointerEvent3D.type = PointerEvent3D.POINTER_DOWN;
+        this.dispatchEvent(this._pointerEvent3D);
+    }
+    mouseMove(e) {
+        this.mouseLastX = this.mouseX;
+        this.mouseLastY = this.mouseY;
+        this.mouseX =
+            e.clientX - this.canvasX; /*- Input.canvas.x + Input.canvas.offsetX*/
+        this.mouseY =
+            e.clientY - this.canvasY; /*- Input.canvas.y + Input.canvas.offsetY*/
+        this.mouseOffsetX = this.mouseX - this.mouseLastX;
+        this.mouseOffsetY = this.mouseY - this.mouseLastY;
+        this._pointerEvent3D.reset();
+        this._pointerEvent3D.type = PointerEvent3D.POINTER_MOVE;
+        this._pointerEvent3D.ctrlKey = e.ctrlKey;
+        this._pointerEvent3D.metaKey = e.metaKey;
+        this._pointerEvent3D.altKey = e.altKey;
+        this._pointerEvent3D.shiftKey = e.shiftKey;
+        this._pointerEvent3D.pointerId = e.pointerId;
+        this._pointerEvent3D.pointerType = e.pointerType;
+        this._pointerEvent3D.isPrimary = e.isPrimary;
+        this._pointerEvent3D.pressure = e.pressure;
+        this._pointerEvent3D.mouseX = this.mouseX;
+        this._pointerEvent3D.mouseY = this.mouseY;
+        this._pointerEvent3D.movementX = e.movementX;
+        this._pointerEvent3D.movementY = e.movementY;
+        this.dispatchEvent(this._pointerEvent3D);
+    }
+    mouseOver(e) {
+        this.isMouseDown = false;
+        this.mouseLastX = this.mouseX;
+        this.mouseLastY = this.mouseY;
+        this.mouseX =
+            e.clientX - this.canvasX; /*- Input.canvas.x + Input.canvas.offsetX*/
+        this.mouseY =
+            e.clientY - this.canvasY; /*- Input.canvas.y + Input.canvas.offsetY*/
+        this.mouseOffsetX = this.mouseX - this.mouseLastX;
+        this.mouseOffsetY = this.mouseY - this.mouseLastY;
+        this._pointerEvent3D.reset();
+        this._pointerEvent3D.type = PointerEvent3D.POINTER_OVER;
+        this._pointerEvent3D.ctrlKey = e.ctrlKey;
+        this._pointerEvent3D.metaKey = e.metaKey;
+        this._pointerEvent3D.altKey = e.altKey;
+        this._pointerEvent3D.shiftKey = e.shiftKey;
+        this._pointerEvent3D.pointerId = e.pointerId;
+        this._pointerEvent3D.pointerType = e.pointerType;
+        this._pointerEvent3D.isPrimary = e.isPrimary;
+        this._pointerEvent3D.pressure = e.pressure;
+        this._pointerEvent3D.mouseX = this.mouseX;
+        this._pointerEvent3D.mouseY = this.mouseY;
+        this.dispatchEvent(this._pointerEvent3D);
+    }
+    mouseWheel(e) {
+        //            e.stopImmediatePropagation();
+        e.preventDefault();
+        this.mouseLastX = this.mouseX;
+        this.mouseLastY = this.mouseY;
+        this.mouseX =
+            e.clientX - this.canvasX; /*- Input.canvas.x + Input.canvas.offsetX*/
+        this.mouseY =
+            e.clientY - this.canvasY; /*- Input.canvas.y + Input.canvas.offsetY*/
+        this.mouseOffsetX = this.mouseX - this.mouseLastX;
+        this.mouseOffsetY = this.mouseY - this.mouseLastY;
+        if (`wheelDelta` in e) {
+            this._pointerEvent3D.delay = e[`wheelDelta`];
+            this.wheelDelta = e[`wheelDelta`];
+        }
+        else if (`delta` in e) {
+            this.wheelDelta = e[`delta`];
+        }
+        this._pointerEvent3D.reset();
+        this._pointerEvent3D.type = PointerEvent3D.POINTER_WHEEL;
+        this._pointerEvent3D.ctrlKey = e.ctrlKey;
+        this._pointerEvent3D.metaKey = e.metaKey;
+        this._pointerEvent3D.altKey = e.altKey;
+        this._pointerEvent3D.shiftKey = e.shiftKey;
+        this._pointerEvent3D.mouseX = this.mouseX;
+        this._pointerEvent3D.mouseY = this.mouseY;
+        this._pointerEvent3D.deltaX = e.deltaX;
+        this._pointerEvent3D.deltaY = e.deltaY;
+        this._pointerEvent3D.deltaZ = e.deltaZ;
+        this.dispatchEvent(this._pointerEvent3D);
+    }
+    keyDown(e) {
+        this._keyEvent3d.reset();
+        this._keyEvent3d.keyCode = e.keyCode;
+        this._keyEvent3d.ctrlKey = e.ctrlKey;
+        this._keyEvent3d.altKey = e.altKey;
+        this._keyEvent3d.shiftKey = e.shiftKey;
+        if (!this._keyStatus[e.keyCode]) {
+            this._keyStatus[e.keyCode] = true;
+            this._keyEvent3d.type = KeyEvent.KEY_DOWN;
+            this.dispatchEvent(this._keyEvent3d);
+        }
+    }
+    keyUp(e) {
+        this._keyEvent3d.reset();
+        this._keyEvent3d.keyCode = e.keyCode;
+        this._keyStatus[e.keyCode] = false;
+        this._keyEvent3d.type = KeyEvent.KEY_UP;
+        this.dispatchEvent(this._keyEvent3d);
+    }
+    GetSlideAngle(dx, dy) {
+        return (Math.atan2(dy, dx) * 180) / Math.PI;
+    }
+    GetSlideDirection(startX, startY, endX, endY) {
+        var dy = startY - endY;
+        var dx = endX - startX;
+        var result = 0;
+        if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
+            return result;
+        }
+        var angle = this.GetSlideAngle(dx, dy);
+        if (angle >= -45 && angle < 45) {
+            result = 4;
+        }
+        else if (angle >= 45 && angle < 135) {
+            result = 1;
+        }
+        else if (angle >= -135 && angle < -45) {
+            result = 2;
+        }
+        else if ((angle >= 135 && angle <= 180) ||
+            (angle >= -180 && angle < -135)) {
+            result = 3;
+        }
+        return result;
+    }
+}

package/dist/src/io/OutlineManager.d.ts

@@ -0,0 +1,11 @@
+import { Object3D } from "../core/entities/Object3D";
+import { Color } from "../math/Color";
+export declare class OutlinePostManager {
+    private _tempIndexArray;
+    setOutline(objectList: Object3D[], color?: Color): void;
+    setOutlineList(groupList: Object3D[][], colorList?: Color[]): void;
+    clearOutline(): this;
+    private _rendererList;
+    private getEntityIdList;
+}
+export declare let outlinePostManager: OutlinePostManager;

package/dist/src/io/OutlineManager.js

@@ -0,0 +1,39 @@
+import { MeshRenderer } from "../components/renderer/MeshRenderer";
+import { outlinePostData } from "./OutlinePostData";
+export class OutlinePostManager {
+    constructor() {
+        this._tempIndexArray = [];
+        this._rendererList = [];
+    }
+    setOutline(objectList, color) {
+        this.setOutlineList([objectList], color ? [color] : null);
+    }
+    setOutlineList(groupList, colorList) {
+        groupList ||= [];
+        let defaultColor = outlinePostData.defaultColor;
+        let maxGroup = outlinePostData.SlotCount;
+        for (let i = 0; i < maxGroup; i++) {
+            this._tempIndexArray.length = 0;
+            let group = groupList[i];
+            let color = (colorList ? colorList[i] : null) || defaultColor;
+            if (group) {
+                for (const item of group) {
+                    this.getEntityIdList(item, this._tempIndexArray);
+                }
+            }
+            outlinePostData.fillDataAt(i, this._tempIndexArray, color);
+        }
+    }
+    clearOutline() {
+        outlinePostData.clear();
+        return this;
+    }
+    getEntityIdList(item, target) {
+        this._rendererList.length = 0;
+        let renderers = item.getComponents(MeshRenderer, this._rendererList);
+        for (const render of renderers) {
+            target.push(render.object3D.transform._worldMatrix.index);
+        }
+    }
+}
+export let outlinePostManager = new OutlinePostManager();

package/dist/src/io/OutlinePostData.d.ts

@@ -0,0 +1,22 @@
+import { Color } from "../math/Color";
+export declare class OutlinePostSlot {
+    indexList: Float32Array;
+    color: Color;
+    count: number;
+}
+export declare class OutlinePostData {
+    readonly SlotCount: number;
+    readonly MaxEntities: number;
+    readonly defaultColor: Color;
+    private readonly slots;
+    private dataDirty;
+    constructor();
+    clear(): void;
+    clearAt(slotIndex: number): this;
+    fillDataAt(slot: number, indexList: number[], color: Color): this;
+    fetchData(target: {
+        dirty: boolean;
+        slots: OutlinePostSlot[];
+    }): this;
+}
+export declare let outlinePostData: OutlinePostData;

package/dist/src/io/OutlinePostData.js

@@ -0,0 +1,54 @@
+import { Engine3D } from "../Engine3D";
+import { Color } from "../math/Color";
+export class OutlinePostSlot {
+}
+export class OutlinePostData {
+    constructor() {
+        this.SlotCount = 8;
+        this.MaxEntities = 16;
+        this.defaultColor = new Color(0.2, 1, 1, 1);
+        this.slots = [];
+        this.dataDirty = true;
+        let groupCount = Engine3D.setting.render.postProcessing.outline.groupCount;
+        this.SlotCount = Math.max(1, Math.min(groupCount, this.SlotCount));
+        for (let i = 0; i < this.SlotCount; i++) {
+            let slot = (this.slots[i] = new OutlinePostSlot());
+            slot.indexList = new Float32Array(this.MaxEntities);
+            slot.color = this.defaultColor.clone();
+            slot.count = 0;
+        }
+    }
+    clear() {
+        for (let i = 0; i < this.SlotCount; i++) {
+            this.clearAt(i);
+        }
+    }
+    clearAt(slotIndex) {
+        this.dataDirty = true;
+        let slot = this.slots[slotIndex];
+        slot.color.copyFrom(this.defaultColor);
+        slot.indexList.fill(-1);
+        slot.count = 0;
+        return this;
+    }
+    fillDataAt(slot, indexList, color) {
+        this.dataDirty = true;
+        let data = this.slots[slot];
+        if (data) {
+            data.indexList.fill(-1);
+            for (let i = 0, c = indexList.length; i < c; i++) {
+                data.indexList[i] = indexList[i];
+            }
+            data.count = indexList.length;
+            data.color.copyFrom(color);
+        }
+        return this;
+    }
+    fetchData(target) {
+        target.dirty = this.dataDirty;
+        target.slots = this.slots;
+        this.dataDirty = false;
+        return this;
+    }
+}
+export let outlinePostData = new OutlinePostData();

package/dist/src/io/PickFire.d.ts

@@ -0,0 +1,32 @@
+import { CEventDispatcher } from "../event/CEventDispatcher";
+import { Ray } from "../math/Ray";
+import { ColliderComponent } from "../components/ColliderComponent";
+import { View3D } from "../core/View3D";
+export declare class PickFire extends CEventDispatcher {
+    ray: Ray;
+    isTouching: boolean;
+    private _mouseCode;
+    private _pickEvent;
+    private _outEvent;
+    private _overEvent;
+    private _upEvent;
+    private _downEvent;
+    private _mouseMove;
+    private _pickCompute;
+    private _lastDownTarget;
+    mouseEnableMap: Map<number, ColliderComponent>;
+    private _view;
+    constructor(view: View3D);
+    private init;
+    start(): void;
+    stop(): void;
+    private onTouchStart;
+    private onTouchEnd;
+    private _lastFocus;
+    private getPickInfo;
+    private onTouchMove;
+    private onTouchOnce;
+    private findNearestObj;
+    private _interestList;
+    private pick;
+}