@aibee/owlly 1.0.26 → 1.0.29

package/lib/owlly/utils/tile-util.js

@@ -0,0 +1,456 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { NS_THREE, Externals } from '../stage/externals';
+const TEXT_MAX = 16;
+const TEXT_SEGMENT = 4;
+// 默认配置值
+const DEFAULT_TEXT_PIXEL = 512;
+const DEFAULT_IMG_TEXT_PIXEL = 2048;
+// 全局配置对象
+let tileConfig = {};
+// 获取配置的 TEXT_PIXEL 值
+function getTextPixel() {
+    return tileConfig.textPixel || DEFAULT_TEXT_PIXEL;
+}
+// 获取配置的 IMG_TEXT_PIXEL 值
+function getImgTextPixel() {
+    return tileConfig.imgTextPixel || DEFAULT_IMG_TEXT_PIXEL;
+}
+// 设置瓦片配置
+function setTileConfig(config) {
+    tileConfig = Object.assign(Object.assign({}, tileConfig), config);
+}
+// 导出常量（使用函数获取当前配置值）
+export const TEXT_PIXEL = getTextPixel();
+export const IMG_TEXT_PIXEL = getImgTextPixel();
+// const IMG_TEXT_PIXEL = 4096;
+// const IMG_URL = './imgs/';
+const USE_CANVAS = false;
+// const USE_TEXTURE_INDEX = true;
+const USE_TEXTURE_BLACK = false;
+// const testSides = ['right', 'left', 'up', 'down', 'front', 'back'];
+// const sides = ['r', 'l', 't', 'd', 'f', 'b'];
+const VertexShader = `
+          attribute vec3 uvi;
+          varying vec3 vUv;
+          uniform bool flipX;
+          uniform bool flipY;
+
+          void main(){
+            vUv = uvi;
+            bool useCanvas = ${USE_CANVAS};
+            if(flipX){
+              vUv.x = 1.0-vUv.x;
+            }
+            if(flipY){
+              vUv.y = 1.0-vUv.y;
+            }
+            if(useCanvas){
+              vUv.y = 1.0-vUv.y;
+            }
+            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+          }
+          `;
+const FragmentShader = `
+            uniform sampler2D mTexture0;
+            uniform sampler2D mTexture1;
+            uniform sampler2D mTexture2;
+            uniform sampler2D mTexture3;
+            uniform sampler2D mTexture4;
+            uniform sampler2D mTexture5;
+            uniform sampler2D mTexture6;
+            uniform sampler2D mTexture7;
+            uniform sampler2D mTexture8;
+            uniform sampler2D mTexture9;
+            uniform sampler2D mTexture10;
+            uniform sampler2D mTexture11;
+            uniform sampler2D mTexture12;
+            uniform sampler2D mTexture13;
+            uniform sampler2D mTexture14;
+            uniform sampler2D mTexture15;
+
+            uniform int uvMax;
+            varying vec3 vUv;
+            uniform bool black;
+
+            int modi(int x, int y) {
+              int result = x - ((x / y) * y);
+              return result < 0 ? result + y : result;
+            }
+
+            float modf(float x, float y){
+              float result = x - y * floor(x/y);
+              return result < 0.0 ? result + y : result;
+            }
+
+            int getInt(float value) {
+              // 添加边界检查
+              if (value < 0.0) return 0;
+              if (value > float(0x7FFFFFFF)) return 0x7FFFFFFF;
+
+              float m = modf(value, 1.0);
+              return m < 1.0 && m > 0.6 ? int(value) + 1 : int(value);
+            }
+
+            vec4 getSample(int index, vec2 uv) {
+              if (index == 0) return texture2D(mTexture0, uv);
+              if (index == 1) return texture2D(mTexture1, uv);
+              if (index == 2) return texture2D(mTexture2, uv);
+              if (index == 3) return texture2D(mTexture3, uv);
+              if (index == 4) return texture2D(mTexture4, uv);
+              if (index == 5) return texture2D(mTexture5, uv);
+              if (index == 6) return texture2D(mTexture6, uv);
+              if (index == 7) return texture2D(mTexture7, uv);
+              if (index == 8) return texture2D(mTexture8, uv);
+              if (index == 9) return texture2D(mTexture9, uv);
+              if (index == 10) return texture2D(mTexture10, uv);
+              if (index == 11) return texture2D(mTexture11, uv);
+              if (index == 12) return texture2D(mTexture12, uv);
+              if (index == 13) return texture2D(mTexture13, uv);
+              if (index == 14) return texture2D(mTexture14, uv);
+              if (index == 15) return texture2D(mTexture15, uv);
+              return vec4(0.0, 0.0, 0.0, 1.0); // 默认返回透明黑色
+            }
+
+            vec2 getUv(vec2 uvs, int pos){
+              // 严格的边界保护
+              float min2 = 1.0 / 4096.0;
+              float max2 = 1.0 - min2;
+              vec2 clampedUvs = clamp(uvs, vec2(min2), vec2(max2));
+
+              vec2 tuv = clampedUvs / 4.0;
+              int x = modi(pos, 4);
+              int y = pos / 4;
+
+              float segment = 1.0 / 4.0;
+              vec2 base = vec2(float(x) * segment, float(y) * segment);
+
+              // 添加额外的边界检查
+              return clamp(tuv + base, vec2(0.0), vec2(1.0));
+            }
+
+            void main(){
+              vec2 tuv = vUv.xy;
+              int indexPos = getInt(vUv.z);
+              int index = indexPos / 100;
+              int pos = modi(indexPos, 100);
+              tuv = getUv(tuv, pos);
+              gl_FragColor = getSample(index, tuv);
+            }`;
+/**
+ * 获取瓦片信息id
+ * @ignore
+ * @param pid pid
+ * @param level 等级
+ * @param index 下标
+ * @returns id字符串
+ */
+function getTileInfoId(pid, level, index) {
+    return `${pid}-${level}-${index}`;
+}
+/**
+ * 六面配置
+ */
+const CubeFaceConfig = [
+    {
+        normal: new NS_THREE.Vector3(0, 0, 1),
+        trans: new NS_THREE.Vector3(0, 0, 0.5),
+        euler: new NS_THREE.Euler(0, Math.PI / 2, -Math.PI / 2),
+        face: 0,
+        flipX: false,
+        flipY: false,
+        revers: false,
+    },
+    {
+        normal: new NS_THREE.Vector3(0, 0, 1),
+        trans: new NS_THREE.Vector3(0, 0, 0.5),
+        euler: new NS_THREE.Euler(0, -Math.PI / 2, -Math.PI / 2),
+        face: 1,
+        flipX: true,
+        flipY: true,
+        revers: false,
+    },
+    {
+        normal: new NS_THREE.Vector3(0, 0, 1),
+        trans: new NS_THREE.Vector3(0, 0, 0.5),
+        face: 2,
+        flipX: false,
+        flipY: false,
+        revers: false,
+    },
+    {
+        normal: new NS_THREE.Vector3(0, 0, 1),
+        trans: new NS_THREE.Vector3(0, 0, -0.5),
+        face: 3,
+        flipX: false,
+        flipY: true,
+        revers: true,
+    },
+    {
+        normal: new NS_THREE.Vector3(0, 0, 1),
+        trans: new NS_THREE.Vector3(0, 0, -0.5),
+        euler: new NS_THREE.Euler(Math.PI / 2, 0, 0),
+        face: 4,
+        flipX: false,
+        flipY: true,
+        revers: true,
+    },
+    {
+        normal: new NS_THREE.Vector3(0, 0, 1),
+        trans: new NS_THREE.Vector3(0, 0, -0.5),
+        euler: new NS_THREE.Euler(-Math.PI / 2, 0, 0),
+        face: 5,
+        flipX: true,
+        flipY: false,
+        revers: true,
+    },
+];
+/**
+ * 根据参数获取顶点数据
+ * @ignore
+ * @param level 等级
+ * @param index 下标
+ * @param revers 逆转
+ * @param flipX x翻转
+ * @param flipY y翻转
+ * @returns 顶点数组
+ */
+function getVertices(level, index, revers, flipX, flipY) {
+    const { THREE } = Externals.getInstance();
+    const vertices = [];
+    const base = new THREE.Vector3(-0.5, -0.5, 0);
+    const segment = Math.pow(2, level);
+    const segmentSize = 1 / segment;
+    let j = index % segment;
+    let i = Math.floor(index / segment);
+    if (!revers) {
+        j = segment - 1 - j;
+        i = segment - 1 - i;
+    }
+    if (flipX) {
+        i = segment - 1 - i;
+    }
+    if (flipY) {
+        j = segment - 1 - j;
+    }
+    const x0 = base.x + j * segmentSize;
+    const y0 = base.y + i * segmentSize;
+    const x1 = x0;
+    const y1 = y0 + segmentSize;
+    const x2 = x0 + segmentSize;
+    const y2 = y0 + segmentSize;
+    const x3 = x0 + segmentSize;
+    const y3 = y0;
+    vertices.push(new THREE.Vector3(x0, y0, 0));
+    vertices.push(new THREE.Vector3(x1, y1, 0));
+    vertices.push(new THREE.Vector3(x2, y2, 0));
+    vertices.push(new THREE.Vector3(x3, y3, 0));
+    return vertices;
+}
+/**
+ * info说明  TileTextureInfo
+ * pid  pid.index // pid为全景id， index为0-5的该场景的面小标
+ * textureIndex index*100 + pos // index 为textures的下标， 该纹理的区域位置，以2048*2048算的话现在为0-15
+ * level  当前的level等级
+ * index  该level等级下的平面所在区域
+ */
+class TileTextureInfo {
+    /**
+     * 构造
+     * @ignore
+     * @param pfid 全景面id
+     * @param textureIndex 纹理下标
+     * @param level 等级
+     * @param index 下标
+     * @param rootUrl 根地址
+     */
+    constructor(pfid, textureIndex, level, index, rootUrl, offLineLevel, offLineRootUrl) {
+        /** @ignore */
+        this.offLineLevel = -1;
+        this.pfid = pfid;
+        this.textureIndex = textureIndex;
+        this.level = level;
+        this.index = index;
+        this.isInCamera = false;
+        this.rootUrl = rootUrl || '';
+        this.offLineLevel = offLineLevel == null ? -1 : offLineLevel;
+        this.offLineRootUrl = offLineRootUrl || '';
+    }
+    /** @ignore */
+    get id() {
+        return getTileInfoId(this.pfid, this.level, this.index);
+    }
+    /** @ignore */
+    get originVertices() {
+        let vertices = this._originVertices;
+        if (!vertices) {
+            const face = (this.pfid * 10) % 10 - 1;
+            const config = CubeFaceConfig[face];
+            const { revers, flipX, flipY } = config;
+            vertices = this._originVertices = getVertices(this.level, this.index, revers, flipX, flipY);
+        }
+        return vertices;
+    }
+    /**
+     * 判定是否在相机内
+     * @ignore
+     * @param matrix 矩阵
+     * @param camera 相机
+     * @returns bool
+     */
+    inCamera(matrix, camera) {
+        const { THREE } = Externals.getInstance();
+        const vertices = this.originVertices;
+        const center = new THREE.Vector3(0, 0, 0);
+        center.applyMatrix4(matrix);
+        center.project(camera);
+        this.centerDis = center.length();
+        for (let i = 0; i < vertices.length; i++) {
+            const vertex = vertices[i].clone();
+            vertex.applyMatrix4(matrix);
+            vertex.project(camera);
+            if (vertex.x > -1 && vertex.x < 1 && vertex.y > -1 && vertex.y < 1 && vertex.z > -1 && vertex.z < 1) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * @ignore
+     * 目标id
+     */
+    get targetTid() {
+        return Math.floor(this.pfid);
+    }
+}
+/**
+ * 瓦片工具类
+ */
+class TileUtil {
+    /**
+     * 获取xy
+     * @ignore
+     * @param value 目标值
+     * @param segment 分段
+     * @returns {x,y}
+     */
+    static getXY(value, segment) {
+        const y = Math.floor(value / segment);
+        const x = value % segment;
+        return { x, y };
+    }
+    /**
+     * 根据level等级获取分段
+     * @ignore
+     * @param level 等级
+     * @returns 分段数
+     */
+    static getSegment(level) {
+        return Math.pow(2, level);
+    }
+    /**
+     * 根据level等级获取总数量
+     * @ignore
+     * @param level 等级
+     * @returns 总数量
+     */
+    static getCount(level) {
+        const segment = TileUtil.getSegment(level);
+        return segment * segment;
+    }
+    /**
+     * 获取图片信息
+     * @ignore
+     * @param pid 全景id
+     * @param index 下标
+     * @param level 等级
+     * @returns {url, id}
+     */
+    static getImageInfo2(pfid, index, level, rootUrl) {
+        // const tt = (pfid * 10) % 10 - 1;
+        // const type = testSides[tt];
+        const segment = TileUtil.getSegment(level);
+        const imgPx = getImgTextPixel() / segment;
+        let { x, y } = TileUtil.getXY(index, segment);
+        x = segment - 1 - x;
+        y = segment - 1 - y;
+        const crop = `/crop,x_${imgPx * x},y_${imgPx * y},w_${imgPx},h_${imgPx}`;
+        const resize = `/resize,m_lfit,w_${getTextPixel()},h_${getTextPixel()}`;
+        const url = `${rootUrl}?x-bce-process=image${crop}${resize}`;
+        // const url = `https://robot-vr-public.cdn.bcebos.com/image/panoramas/0/43_${sides[tt]}.jpg?x-bce-process=image${crop}${resize}`;
+        const id = `${pfid}-${level}-${x}-${y}`;
+        return { id, url };
+    }
+    /**
+     * 获取图片信息
+     * @param info
+     * @returns
+     */
+    static getImageInfo(info) {
+        const { pfid, index, level, rootUrl, offLineLevel, offLineRootUrl, } = info;
+        const segment = TileUtil.getSegment(level);
+        const imgPx = getImgTextPixel() / segment;
+        let { x, y } = TileUtil.getXY(index, segment);
+        x = segment - 1 - x;
+        y = segment - 1 - y;
+        let url = '';
+        if (level <= offLineLevel) {
+            url = `${offLineRootUrl}_${level}_${index}.jpg`;
+        }
+        else {
+            const crop = `/crop,x_${imgPx * x},y_${imgPx * y},w_${imgPx},h_${imgPx}`;
+            const resize = `/resize,m_lfit,w_${getTextPixel()},h_${getTextPixel()}`;
+            const fistR = TileUtil.resizeFirst ? `/resize,m_lfit,w_${getImgTextPixel()},h_${getImgTextPixel()}` : '';
+            url = `${rootUrl}?x-bce-process=image${fistR}${crop}${resize}`;
+            // const url = `https://robot-vr-public.cdn.bcebos.com/image/panoramas/0/43_${sides[tt]}.jpg?x-bce-process=image${crop}${resize}`;
+        }
+        const id = `${pfid}-${level}-${x}-${y}`;
+        return { id, url };
+    }
+    /**
+     * 防抖
+     * @param cb
+     * @param time
+     * @returns
+     */
+    static antiShake(cb, time) {
+        let timer;
+        return (...args) => {
+            if (timer) {
+                clearTimeout(timer);
+            }
+            timer = setTimeout(() => {
+                cb(...args);
+                timer = null;
+            }, time);
+        };
+    }
+    /**
+     * 节流
+     * @param cb
+     * @param time
+     * @returns
+     */
+    static throttle(cb, time) {
+        let timer;
+        return (...args) => {
+            if (timer) {
+                return;
+            }
+            timer = setTimeout(() => {
+                cb(...args);
+                timer = null;
+            }, time);
+        };
+    }
+}
+/** 美帧最大纹理更新个数 */
+TileUtil.updateTextureMax = 1;
+/**  等级最小限制  */
+TileUtil.levelMin = 0;
+/**  等级最大限制  */
+TileUtil.levelMax = 2;
+/** 优先重置大小 */
+TileUtil.resizeFirst = false;
+TileUtil.getTileInfoId = getTileInfoId;
+TileUtil.getVertices = getVertices;
+export { TileUtil, TileTextureInfo, TEXT_MAX, TEXT_SEGMENT, VertexShader, FragmentShader, CubeFaceConfig, USE_CANVAS, USE_TEXTURE_BLACK, getTextPixel, getImgTextPixel, setTileConfig, };

package/lib/owlly/utils/time-profiler.d.ts

@@ -0,0 +1,21 @@
+declare class TimeProfiler {
+    private frameTimeMillses;
+    private timingIntervalMills;
+    private fps;
+    /**
+     * 初始化FPS统计
+     * @param timingIntervalMills 统计FPS的时间区间间隔长度，单位毫秒
+     */
+    constructor(timingIntervalMills?: number);
+    reset(): void;
+    /**
+     * Tick一帧
+     * @param frameTimeMills 时间戳，是当前帧的相对时间，不是两帧之间的间隔。单位毫秒
+     */
+    tick(frameTimeMills: number): void;
+    /**
+     * 获得当前统计的FPS值
+     */
+    getFPS(): number | undefined;
+}
+export { TimeProfiler };

package/lib/owlly/utils/time-profiler.js

@@ -0,0 +1,48 @@
+class TimeProfiler {
+    /**
+     * 初始化FPS统计
+     * @param timingIntervalMills 统计FPS的时间区间间隔长度，单位毫秒
+     */
+    constructor(timingIntervalMills = 1000) {
+        this.timingIntervalMills = timingIntervalMills;
+        this.frameTimeMillses = [];
+    }
+    reset() {
+        this.frameTimeMillses = [];
+        this.fps = undefined;
+    }
+    /**
+     * Tick一帧
+     * @param frameTimeMills 时间戳，是当前帧的相对时间，不是两帧之间的间隔。单位毫秒
+     */
+    tick(frameTimeMills) {
+        if (this.timingIntervalMills <= 0) {
+            if (this.frameTimeMillses.length === 0) {
+                this.frameTimeMillses.push(frameTimeMills, 0);
+            }
+            else {
+                this.frameTimeMillses[1] += 1;
+                this.fps = 1000 * this.frameTimeMillses[1] / (frameTimeMills - this.frameTimeMillses[0]);
+            }
+        }
+        else {
+            this.frameTimeMillses.push(frameTimeMills);
+            const frames = this.frameTimeMillses.length - 1;
+            if (frames > 0) {
+                let time = this.frameTimeMillses[this.frameTimeMillses.length - 1] - this.frameTimeMillses[0];
+                this.fps = 1000 * frames / time;
+                while (time > this.timingIntervalMills) {
+                    this.frameTimeMillses.shift();
+                    time = this.frameTimeMillses[this.frameTimeMillses.length - 1] - this.frameTimeMillses[0];
+                }
+            }
+        }
+    }
+    /**
+     * 获得当前统计的FPS值
+     */
+    getFPS() {
+        return this.fps;
+    }
+}
+export { TimeProfiler };

package/lib/owlly/view/camera-view.d.ts

@@ -0,0 +1,35 @@
+import { NS_THREE } from '../stage/externals';
+import { View } from './view';
+import { Camera } from '../element/camera';
+/** 相机元素视图, 渲染相机元素所看到的图像, 用于虚拟部署, 需要在新版本中更新 */
+declare class CameraView extends View {
+    container: HTMLElement;
+    renderer: NS_THREE.WebGL1Renderer;
+    private activeCamera;
+    private eventListeners;
+    /**
+     * @param container 目标容器
+     */
+    constructor(container: HTMLElement);
+    /** @ignore */
+    resize(): void;
+    /** @ignore */
+    render(scene: NS_THREE.Scene): void;
+    dispose(): void;
+    /**
+     * 绑定相机元素, 绑定后视图将显示传入相机元素所看到的图像
+     * @param camera 绑定的相机元素
+     */
+    bindCamera(camera: Camera): void;
+    /**
+     * 解绑相机元素
+     * 取消相机辅助线，并清空画布
+     * edited by kxiao
+     */
+    unbindCamera(): void;
+    /**
+     * 获取当前绑定的相机元素
+     */
+    getActiveCamera(): Camera | undefined | null;
+}
+export { CameraView };

package/lib/owlly/view/camera-view.js

@@ -0,0 +1,101 @@
+import { Externals } from '../stage/externals';
+import { View } from './view';
+import { Camera } from '../element/camera';
+import { EventHub } from '../utils/event-hub';
+import { OwllyEvents } from '../utils/events';
+/** 相机元素视图, 渲染相机元素所看到的图像, 用于虚拟部署, 需要在新版本中更新 */
+class CameraView extends View {
+    /**
+     * @param container 目标容器
+     */
+    constructor(container) {
+        super();
+        // init renderer
+        const { THREE } = Externals.getInstance();
+        this.container = container;
+        this.renderer = new THREE.WebGL1Renderer();
+        this.renderer.setPixelRatio(window.devicePixelRatio);
+        this.renderer.setSize(container.clientWidth, container.clientHeight);
+        this.container.appendChild(this.renderer.domElement);
+        this.container.style.setProperty('display', 'flex');
+        this.container.style.setProperty('align-items', 'center');
+        this.container.style.setProperty('justify-content', 'center');
+        this.eventListeners = {
+            onCameraSelected: (camera) => {
+                if (!(camera instanceof Camera))
+                    return;
+                this.bindCamera(camera);
+            },
+        };
+        EventHub.on(OwllyEvents.ELEMENT_SELECTED, this.eventListeners.onCameraSelected);
+    }
+    /** @ignore */
+    resize() {
+        if (!this.activeCamera)
+            return;
+        const { clientWidth, clientHeight } = this.container;
+        const containerAspect = clientWidth / clientHeight || 1;
+        const { resolution: { height, width }, } = this.activeCamera.getIntrinsic();
+        const cameraRatio = width / height;
+        if (containerAspect > cameraRatio) {
+            const targetHeight = clientHeight;
+            const targetWidth = clientHeight * cameraRatio;
+            super.resize(targetWidth, targetHeight);
+            this.renderer.setSize(targetWidth, targetHeight);
+        }
+        else {
+            const targetWidth = clientWidth;
+            const targetHeight = clientWidth / cameraRatio;
+            super.resize(targetWidth, targetHeight);
+            this.renderer.setSize(targetWidth, targetHeight);
+        }
+    }
+    /** @ignore */
+    render(scene) {
+        if (!this.enabled || !this.activeCamera)
+            return;
+        this.activeCamera.setCameraHelperVisible(false);
+        this.renderer.render(scene, this.activeCamera.getThreeCamera());
+        this.activeCamera.setCameraHelperVisible(true);
+    }
+    dispose() {
+        super.dispose();
+        this.unbindCamera();
+        EventHub.off(OwllyEvents.ELEMENT_SELECTED, this.eventListeners.onCameraSelected);
+        this.container.removeChild(this.renderer.domElement);
+        this.renderer.dispose();
+    }
+    /**
+     * 绑定相机元素, 绑定后视图将显示传入相机元素所看到的图像
+     * @param camera 绑定的相机元素
+     */
+    bindCamera(camera) {
+        if (this.activeCamera)
+            this.activeCamera.setCameraHelperVisible(false, true);
+        this.activeCamera = camera;
+        this.activeCamera.updateLookAt();
+        this.activeCamera.setCameraHelperVisible(true, true);
+        this.resize();
+    }
+    /**
+     * 解绑相机元素
+     * 取消相机辅助线，并清空画布
+     * edited by kxiao
+     */
+    unbindCamera() {
+        if (!this.activeCamera) {
+            return;
+        }
+        this.activeCamera.setCameraHelperVisible(false, false);
+        this.activeCamera.updateLookAt();
+        this.activeCamera = null;
+        this.renderer.clear();
+    }
+    /**
+     * 获取当前绑定的相机元素
+     */
+    getActiveCamera() {
+        return this.activeCamera;
+    }
+}
+export { CameraView };

package/lib/owlly/view/index.d.ts

@@ -0,0 +1,3 @@
+export * from './view';
+export * from './perspective-view';
+export * from './orthographic-view';

package/lib/owlly/view/index.js

@@ -0,0 +1,5 @@
+export * from './view';
+export * from './perspective-view';
+export * from './orthographic-view';
+// export * from './svg-map-view';
+// export * from './camera-view';