@aibee/owlly 1.0.25

package/src/owlly/utils/texture-cache.ts

@@ -0,0 +1,132 @@
+import { Externals, NS_THREE } from '../stage/externals';
+import { EventHub } from './event-hub';
+import { LruCache } from './lru-cache';
+
+class TextureCache {
+  private textureLoader: NS_THREE.TextureLoader;
+
+  private textureCache: LruCache<NS_THREE.Texture>;
+
+  private workingTasks: Map<string, Promise<NS_THREE.Texture> >;
+
+  private static sharedHdFaceTextureCache: TextureCache;
+
+  private static sharedLdFaceTextureCache: TextureCache;
+
+  // public static hdFaceTexturesCache: TextureCache;
+
+  // public static ldFaceTexturesCache: TextureCache;
+
+  public static disposeAll(): void {
+    this.hdFaceTexturesCache.dispose();
+    this.ldFaceTexturesCache.dispose();
+  }
+
+  public static get hdFaceTexturesCache(): TextureCache {
+    if (!TextureCache.sharedHdFaceTextureCache) TextureCache.sharedHdFaceTextureCache = new TextureCache(32);
+    return TextureCache.sharedHdFaceTextureCache;
+  }
+
+  public static get ldFaceTexturesCache(): TextureCache {
+    if (!TextureCache.sharedLdFaceTextureCache) TextureCache.sharedLdFaceTextureCache = new TextureCache(32);
+    return TextureCache.sharedLdFaceTextureCache;
+  }
+
+  dispose(): void {
+    this.textureCache.clear((key: string, value: NS_THREE.Texture) => {
+      value.dispose();
+    });
+  }
+
+  constructor(capacity: number) {
+    const { THREE } = Externals.getInstance();
+    // if (!TextureCache.hdFaceTexturesCache) TextureCache.hdFaceTexturesCache = new TextureCache(32);
+    // if (!TextureCache.ldFaceTexturesCache) TextureCache.ldFaceTexturesCache = new TextureCache(64);
+    this.textureLoader = new THREE.TextureLoader();
+    this.textureCache = new LruCache<NS_THREE.Texture>(capacity);
+    this.workingTasks = new Map<string, Promise<NS_THREE.Texture> >();
+  }
+
+  /**
+   * @ignore
+   * 获取贴图，先从缓存中获取，若未命中则异步加载贴图
+   * @param textureURL 贴图的图像URL
+   */
+  public async loadTexture(textureURL: string, cacheAnyway: boolean|undefined = true): Promise<NS_THREE.Texture> {
+    const retTexture = this.textureCache.get(textureURL);
+    if (retTexture) {
+      // console.log(`#TiledCube# Use cached Texture:${textureURL}`);
+      return retTexture;
+    }
+
+    let workingTask = this.workingTasks.get(textureURL);
+    if (!workingTask) {
+      workingTask = new Promise((resolve, reject) => {
+        // console.log(`#PanoCtrl# Will load Texture:${textureURL}`);
+        this.textureLoader.load(textureURL,
+          (texture) => {
+            // console.info(`#TiledCube# Texture loaded for key '${textureURL}':`, texture);
+            // console.log(`#PanoCtrl# cacheAnyway=${cacheAnyway}`);
+            this.textureCache.put(textureURL, texture, (k: string, v: NS_THREE.Texture) => {
+              // 销毁立方体贴图资源
+              // console.log(`#PanoCtrl# By evicting retTexture with key '${k}', dispose it`);
+              v.dispose();
+            }, !cacheAnyway);
+            this.workingTasks.delete(textureURL);
+            resolve(texture);
+          },
+          () => {},
+          (event: ErrorEvent) => {
+            // console.log(`#PanoCtrl# Error with key '${textureURL}', event=${event}`);
+            EventHub.emit('error', `Loading '${textureURL}' failed.`);
+            this.workingTasks.delete(textureURL);
+            reject(event);
+          });
+      });
+      this.workingTasks.set(textureURL, workingTask);
+    }
+    return workingTask;
+  }
+
+  /**
+   * 获取一组贴图，若没命中则异步加载
+   * @param textureURLs 需要获取的贴图URL数组
+   * @param waitForReadyCount 指定函数必须在textureURLsArray中的前多少个贴图获取到以后才能返回
+   */
+  public async preloadTextures(
+    textureURLs: (string|undefined)[],
+    waitForReadyCount: number,
+  ): Promise<NS_THREE.Texture[]> {
+    const waitCount = waitForReadyCount > textureURLs.length ? textureURLs.length : waitForReadyCount;
+    // console.info('#TiledCube# preloadTextures:', textureURLs);
+    const promises: (Promise<NS_THREE.Texture>|undefined)[] = textureURLs.map(
+      (textureURL: string, index: number) => {
+        if (textureURL) {
+          return this.loadTexture(textureURL, index < waitForReadyCount);
+        }
+        return undefined;
+      },
+    );
+    const mustPromises: Promise<NS_THREE.Texture>[] = [];
+    for (let i = 0; i < waitCount; i += 1) {
+      const promise = promises[i];
+      if (promise) {
+        mustPromises.push(promise);
+      }
+    }
+    return Promise.all(mustPromises);
+  }
+
+  public recycleTexture(textureURL: string): boolean {
+    // console.log(`#TiledCube# TextureCache.recycleTexture(${textureURL})`);
+    return this.textureCache.recycle(textureURL, (key: string, value: NS_THREE.Texture) => {
+      value.dispose();
+    });
+  }
+
+  public getCapacity(): number { return this.textureCache.getCapacity(); }
+
+  public getTotalCost(): number { return this.textureCache.getTotalCost(); }
+}
+
+export { TextureCache };

package/src/owlly/utils/tile-util.ts

@@ -0,0 +1,563 @@
+/* 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;
+
+// 配置接口
+interface TileConfig {
+  textPixel?: number;
+  imgTextPixel?: number;
+}
+
+// 全局配置对象
+let tileConfig: TileConfig = {};
+
+// 获取配置的 TEXT_PIXEL 值
+function getTextPixel(): number {
+  return tileConfig.textPixel || DEFAULT_TEXT_PIXEL;
+}
+
+// 获取配置的 IMG_TEXT_PIXEL 值
+function getImgTextPixel(): number {
+  return tileConfig.imgTextPixel || DEFAULT_IMG_TEXT_PIXEL;
+}
+
+// 设置瓦片配置
+function setTileConfig(config: TileConfig): void {
+  tileConfig = { ...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: number, level: number, index: number): string {
+  return `${pid}-${level}-${index}`;
+}
+
+interface FaceConfig {
+  normal: NS_THREE.Vector3;
+  trans: NS_THREE.Vector3;
+  euler?: NS_THREE.Euler;
+  face: number; // 0.1-0.6，是right,left, top, bottom, front, back,
+  flipX: boolean;
+  flipY: boolean;
+  revers: boolean;
+}
+
+/**
+ * 六面配置
+ */
+const CubeFaceConfig: FaceConfig[] = [
+
+  {
+    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,
+    // revers: true,
+  },
+
+  {
+    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: number, index: number, revers: boolean, flipX: boolean, flipY: boolean):
+ NS_THREE.Vector3[] {
+  const { THREE } = Externals.getInstance();
+
+  const vertices = [] as NS_THREE.Vector3[];
+  const base = new THREE.Vector3(-0.5, -0.5, 0);
+  const segment = 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 */
+  public pfid: number;
+
+  /** @ignore 纹理坐标 */
+  public textureIndex: number;
+
+  /** @ignore 等级 */
+  public level: number;
+
+  /** @ignore 坐标 */
+  public index: number;
+
+  /** @ignore 冻结 */
+  public frize: boolean;
+
+  /** @ignore 是否在相机内 */
+  public isInCamera: boolean;
+
+  /** @ignore 是否将要在相机内 */
+  public willIsInCamera: boolean;
+
+  /** @ignore 顶点 */
+  private _originVertices: NS_THREE.Vector3[];
+
+  /** @ignore */
+  public rootUrl: string;
+
+  /** @ignore */
+  public offLineRootUrl: string;
+
+  /** @ignore */
+  public offLineLevel = -1;
+
+  /** @ignore */
+  public time: number;
+
+  /** @ignore */
+  public centerDis: number;
+
+  /**
+   * 构造
+   * @ignore
+   * @param pfid 全景面id
+   * @param textureIndex 纹理下标
+   * @param level 等级
+   * @param index 下标
+   * @param rootUrl 根地址
+   */
+  constructor(pfid?: number, textureIndex?: number, level?: number, index?: number,
+    rootUrl?: string, offLineLevel?: number, offLineRootUrl?: string) {
+    this.pfid = pfid as number;
+    this.textureIndex = textureIndex as number;
+    this.level = level as number;
+    this.index = index as number;
+    this.isInCamera = false;
+    this.rootUrl = rootUrl || '';
+    this.offLineLevel = offLineLevel == null ? -1 : offLineLevel;
+    this.offLineRootUrl = offLineRootUrl || '';
+  }
+
+  /** @ignore */
+  public get id(): string {
+    return getTileInfoId(this.pfid, this.level, this.index);
+  }
+
+  /** @ignore */
+  public get originVertices(): NS_THREE.Vector3[] {
+    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
+   */
+  public inCamera(matrix: NS_THREE.Matrix4, camera: NS_THREE.Camera): boolean {
+    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
+   */
+  public get targetTid(): number {
+    return Math.floor(this.pfid);
+  }
+}
+/**
+ * 瓦片工具类
+ */
+class TileUtil {
+  /** 美帧最大纹理更新个数 */
+  public static updateTextureMax = 1;
+
+  /**  等级最小限制  */
+  public static levelMin = 0;
+
+  /**  等级最大限制  */
+  public static levelMax = 2;
+
+  /** 优先重置大小 */
+  public static resizeFirst = false;
+
+  /**
+   * 获取xy
+   * @ignore
+   * @param value 目标值
+   * @param segment 分段
+   * @returns {x,y}
+   */
+  public static getXY(value: number, segment: number): { x: number; y: number } {
+    const y = Math.floor(value / segment);
+    const x = value % segment;
+    return { x, y };
+  }
+
+  /**
+   * 根据level等级获取分段
+   * @ignore
+   * @param level 等级
+   * @returns 分段数
+   */
+  public static getSegment(level: number): number {
+    return 2 ** level;
+  }
+
+  /**
+   * 根据level等级获取总数量
+   * @ignore
+   * @param level 等级
+   * @returns 总数量
+   */
+  public static getCount(level: number): number {
+    const segment = TileUtil.getSegment(level);
+    return segment * segment;
+  }
+
+  /**
+   * 获取图片信息
+   * @ignore
+   * @param pid 全景id
+   * @param index 下标
+   * @param level 等级
+   * @returns {url, id}
+   */
+  public static getImageInfo2(
+    pfid: number, index: number, level: number, rootUrl: string,
+  ): {
+    url: string; id: string;
+  } {
+    // 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
+   */
+  public static getImageInfo(info: TileTextureInfo): { url: string; id: string } {
+    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 };
+  }
+
+  public static getTileInfoId = getTileInfoId;
+
+  public static getVertices = getVertices;
+
+  /**
+   * 防抖
+   * @param cb
+   * @param time
+   * @returns
+   */
+  public static antiShake(cb: Function, time: number): Function {
+    let timer: any;
+    return (...args: any[]): void => {
+      if (timer) {
+        clearTimeout(timer);
+      }
+      timer = setTimeout(() => {
+        cb(...args);
+        timer = null;
+      }, time);
+    };
+  }
+
+  /**
+   * 节流
+   * @param cb
+   * @param time
+   * @returns
+   */
+  public static throttle(cb: Function, time: number): Function {
+    let timer: any;
+    return (...args: any[]): void => {
+      if (timer) {
+        return;
+      }
+      timer = setTimeout(() => {
+        cb(...args);
+        timer = null;
+      }, time);
+    };
+  }
+}
+export {
+  TileUtil,
+  TileTextureInfo,
+  TEXT_MAX,
+  TEXT_SEGMENT,
+  VertexShader,
+  FragmentShader,
+  FaceConfig,
+  CubeFaceConfig,
+  USE_CANVAS,
+  USE_TEXTURE_BLACK,
+  getTextPixel,
+  getImgTextPixel,
+  setTileConfig,
+  TileConfig,
+};