@aibee/owlly 1.0.25

package/src/owlly/element/tile-plane.ts

@@ -0,0 +1,430 @@
+import { NS_THREE, Externals } from '../stage/externals';
+import { Element, ElementFrameContext, View } from '..';
+import {
+  FragmentShader, VertexShader, TileTextureInfo, TileUtil, CubeFaceConfig,
+} from '../utils/tile-util';
+
+const TILE_PLANE_SIZE = 2;
+
+/**
+ * 瓦片平面，可以是平面，也可以是曲面
+ */
+class TilePlane extends Element {
+  private initialized: boolean;
+
+  /** 全景面id @ignore */
+  public pfid: number;
+
+  private planeGeometry: NS_THREE.BufferGeometry;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private uniforms: any;
+
+  private plane: NS_THREE.Mesh;
+
+  private needsUpdate: boolean;
+
+  /** @ignore */
+  public textureMap: Map<string, TileTextureInfo>
+
+  /** @ignore */
+  public level: number;
+
+  /** @ignore */
+  public revers: boolean;
+
+  /** @ignore */
+  public face: number;
+
+  /** @ignore */
+  public flipX: boolean;
+
+  /** @ignore */
+  public flipY: boolean;
+
+  /** @ignore */
+  public textureRootUrl: string;
+
+  /** @ignore */
+  public offLineTextureRootUrl?: string;
+
+  /** @ignore */
+  public offLineTextureLevel = -1;
+
+  /**
+   * 构造
+   * @param face 面数
+   * @param flipX x翻转
+   * @param flipY y翻转
+   */
+  constructor(face: number, flipX?: boolean, flipY?: boolean) {
+    super();
+    this.face = face;
+    this.flipX = flipX || false;
+    this.flipY = flipY || false;
+    // if (textureRootUrl) { this.textureRootUrl = textureRootUrl; }
+    this.textureMap = new Map<string, TileTextureInfo>();
+    this.needsUpdate = false;
+    const uniforms = this.uniforms = {
+      mTexture0: {
+        type: 't',
+        value: null,
+      },
+      mTexture1: {
+        type: 't',
+        value: null,
+      },
+      mTexture2: {
+        type: 't',
+        value: null,
+      },
+      mTexture3: {
+        type: 't',
+        value: null,
+      },
+      mTexture4: {
+        type: 't',
+        value: null,
+      },
+      mTexture5: {
+        type: 't',
+        value: null,
+      },
+      mTexture6: {
+        type: 't',
+        value: null,
+      },
+      mTexture7: {
+        type: 't',
+        value: null,
+      },
+      mTexture8: {
+        type: 't',
+        value: null,
+      },
+      mTexture9: {
+        type: 't',
+        value: null,
+      },
+      mTexture10: {
+        type: 't',
+        value: null,
+      },
+      mTexture11: {
+        type: 't',
+        value: null,
+      },
+      mTexture12: {
+        type: 't',
+        value: null,
+      },
+      mTexture13: {
+        type: 't',
+        value: null,
+      },
+      mTexture14: {
+        type: 't',
+        value: null,
+      },
+      mTexture15: {
+        type: 't',
+        value: null,
+      },
+      uvMax: {
+        type: 'i',
+        value: 0,
+      },
+      flipX: {
+        type: 'b',
+        value: false,
+      },
+      flipY: {
+        type: 'b',
+        value: false,
+      },
+      black: {
+        type: 'b',
+        value: false,
+      },
+    };
+    const { THREE } = Externals.getInstance();
+    const material = new THREE.ShaderMaterial({
+      fragmentShader: FragmentShader,
+      vertexShader: VertexShader,
+      uniforms,
+      depthTest: false,
+      side: NS_THREE.BackSide,
+      transparent: false, // 禁用透明度以提高性能
+    });
+    const planeGeometry = new THREE.BufferGeometry();
+    // const planeGeometry = new PlaneBufferGeometry(2, 2);
+    this.planeGeometry = planeGeometry;
+    const plane = this.plane = new THREE.Mesh(planeGeometry, material);
+    plane.visible = true;
+    plane.frustumCulled = false;
+    plane.material = material;
+    plane.renderOrder = 100;
+    this.add(plane);
+    // TilePlaneController.instance.addPlane(this.pfid, this, true);
+  }
+
+  /**
+   * 更新面id
+   * @ignore
+   * @param pfid 全景面id
+   * @param level 全景等级
+   */
+  public updatePfid(pfid: number, level: number): void {
+    if (this.pfid !== pfid) {
+      // TilePlaneController.instance.deletePlane(this.pfid);
+      this.pfid = pfid;
+      // TilePlaneController.instance.addPlane(this.pfid, this);
+    }
+    this.level = level;
+  }
+
+  /**
+   * 设置纹理
+   * @param max
+   * @param textures
+   */
+  private setTexturesUniforms(max: number, textures: NS_THREE.Texture[]): void {
+    this.uniforms.uvMax.value = max;
+
+    textures.forEach((i, j) => {
+      this.uniforms[`mTexture${j}`].value = i;
+    });
+    // this.uniforms.mTextures.value = textures;
+    this.uniforms.flipX.value = this.flipX;
+    this.uniforms.flipY.value = this.flipY;
+    if (this.face !== 0) {
+      this.uniforms.black.value = true;
+    }
+    this.needsUpdate = true;
+  }
+
+  /**
+   * 更新纹理
+   * @param textures
+   * @param textureMap
+   */
+  public updateTextures(textures: NS_THREE.Texture[], textureMap: Map<string, TileTextureInfo>): void {
+    // console.log('textures.length', textures.length, 'textureMap.size', textureMap.size);
+    this.setTexturesUniforms(textures.length, textures);
+    this.updateInfos(textureMap);
+  }
+
+  /**
+   * 更新纹理图
+   * @ignore
+   * @param textureMap
+   */
+  public updateInfos(textureMap: Map<string, TileTextureInfo>): void {
+    this.textureMap = textureMap;
+    const infos = Array.from(this.textureMap.values());
+    infos.sort((a, b): number => a.level - b.level);
+    // const list = infos.map((info) => info.textureIndex);
+    // console.log('textureInfos', textureInfos.length, 'infos', infos.length);
+    // console.log(list);
+    const revers = this.revers;
+
+    // console.log('infos.length', this.pfid, infos.length);
+    const geometry = this.planeGeometry;
+    const vertices = [] as number[];
+    const normals = [] as number[];
+    const indices = [] as number[];
+    const uvi = [] as number[];// 定位索引
+    const computeOne = (ti: TileTextureInfo, index: number): void => {
+      const level = ti.level;
+      const uIndex = ti.textureIndex;
+      const tIndex = ti.index;
+      const vs = TileUtil.getVertices(level, tIndex, revers, this.flipX, this.flipY);
+      vs.forEach((v) => {
+        vertices.push(v.x, v.y, v.z);
+      });
+      normals.push(0, 0, 1);
+      normals.push(0, 0, 1);
+      normals.push(0, 0, 1);
+      normals.push(0, 0, 1);
+      uvi.push(0, 0, uIndex);
+      uvi.push(0, 1, uIndex);
+      uvi.push(1, 1, uIndex);
+      uvi.push(1, 0, uIndex);
+      const t = index * 4;
+      if (revers) {
+        indices.push(t + 1, t + 2, t);
+        indices.push(t + 2, t + 3, t);
+      } else {
+        indices.push(t, t + 2, t + 1);
+        indices.push(t, t + 3, t + 2);
+      }
+    };
+    for (let i = 0; i < infos.length; i++) {
+      computeOne(infos[i], i);
+    }
+    const { THREE } = Externals.getInstance();
+    geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
+    geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));
+    geometry.setAttribute('uvi', new THREE.Float32BufferAttribute(uvi, 3));
+    geometry.setIndex(indices);
+  }
+
+  /**
+   * 更新在相机中的信息
+   * @ignore
+   * @param view
+   * @returns
+   */
+  public udpateInCamera(view: View): TileTextureInfo[] {
+    const {
+      textureMap, pfid, level, textureRootUrl, offLineTextureLevel, offLineTextureRootUrl,
+    } = this;
+    const updates = [] as TileTextureInfo[];
+    if (view.camera) {
+      this.textureMap.forEach((info) => {
+        if (info.level > level) {
+          info.willIsInCamera = false;
+          if (info.willIsInCamera !== info.isInCamera) {
+            info.isInCamera = info.willIsInCamera;
+            updates.push(info);
+          }
+        }
+      });
+      const count = TileUtil.getCount(this.level);
+      for (let i = 0; i < count; i++) {
+        const id = TileUtil.getTileInfoId(pfid, level, i);
+        const info = textureMap.get(id) || new TileTextureInfo(
+          pfid, 0, level, i, textureRootUrl, offLineTextureLevel, offLineTextureRootUrl,
+        );
+        info.willIsInCamera = info.inCamera(this.matrixWorld, view.camera);
+        if (info.willIsInCamera !== info.isInCamera) {
+          info.isInCamera = info.willIsInCamera;
+          updates.push(info);
+        }
+      }
+    }
+    // const us = updates.map((info) => info.index);
+    // console.log(us);
+    return updates;
+  }
+
+  /**
+   * 更新
+   * @returns
+   */
+  public update(): ElementFrameContext {
+    const frameContext = new ElementFrameContext(this);
+    if (!this.initialized) {
+      this.initialized = true;
+      frameContext.needUpdate = true;
+    } else if (this.needsUpdate) {
+      frameContext.needUpdate = true;
+      (this.plane.material as NS_THREE.ShaderMaterial).uniformsNeedUpdate = true;
+    }
+    if (this.initialized && !this.parent) {
+      frameContext.shouldPlaceElement = true;
+    }
+    return frameContext;
+  }
+
+  public renderOnce(): void {
+    this.updateInfos(this.textureMap);
+  }
+
+  // public renderingViewChanged(view: View): void {
+  //   super.renderingViewChanged(view);
+  // }
+}
+
+/** 全局瓦片平面，挂载在全景节点下面 */
+const tilePlanes = [] as TilePlane[];
+/**
+ * 瓦片平面工具类
+ */
+class TilePlaneUtil {
+  private static cubeMatrix: NS_THREE.Matrix4[];
+
+  /**
+   * 设置平面可见性
+   * @ignore
+   * @param visible
+   */
+  public static setPlanesVisible(visible: boolean): void {
+    tilePlanes.forEach((plane) => {
+      plane.visible = visible;
+    });
+  }
+
+  /**
+   * 根据矩阵获取平面组
+   * @ignore
+   * @param pid 全景id
+   * @param level 瓦片等级
+   * @param textureUrls 纹理地址
+   * @returns
+   */
+  public static getPlanesByMatrix(
+    pid: number, level: number, textureUrls: string[], offLineTextureLevel?: number, offLineTextureUrls?: string[],
+  ): TilePlane[] {
+    const cubeMatrix = TilePlaneUtil.getCubeMatrix();
+    const planes = cubeMatrix.map((pm, index): TilePlane => {
+      // pm.multiplyScalar(size);
+      // pm.premultiply(matrix);
+      let plane = tilePlanes[index];
+      const {
+        face, revers, flipX, flipY,
+      } = CubeFaceConfig[index];
+      if (!plane) {
+        plane = tilePlanes[index] = new TilePlane(face, flipX, flipY);
+        plane.revers = revers || false;
+        plane.applyMatrix4(pm);
+      }
+      plane.level = level;
+      const pPfid = pid + (face + 1) / 10;
+      plane.pfid = pPfid;
+      plane.level = 0;
+      plane.textureRootUrl = textureUrls[index];
+      if (offLineTextureUrls) {
+        plane.offLineTextureRootUrl = offLineTextureUrls[index];
+      }
+      if (offLineTextureLevel != null) {
+        plane.offLineTextureLevel = offLineTextureLevel;
+      }
+      return plane;
+    });
+    return planes;
+  }
+
+  /**
+   * 获取cube平面矩阵
+   * @returns
+   */
+  public static getCubeMatrix(): NS_THREE.Matrix4[] {
+    const { THREE } = Externals.getInstance();
+    if (!TilePlaneUtil.cubeMatrix) {
+      const cubeMatrix = [] as NS_THREE.Matrix4[];
+      const ti = new THREE.Matrix4();
+      for (let i = 0; i < CubeFaceConfig.length; i++) {
+        const conf = CubeFaceConfig[i];
+        const {
+          trans, euler,
+        } = conf;
+        const t = new THREE.Matrix4();
+        if (euler) {
+          t.multiply(ti.makeRotationFromEuler(euler));
+        }
+        t.multiply(ti.makeTranslation(trans.x, trans.y, trans.z));
+        t.multiplyScalar(TILE_PLANE_SIZE);
+        // 默认姿态
+        const INIT_EULER = new THREE.Euler(Math.PI / 2, 0, 0);
+        t.premultiply(ti.makeRotationFromEuler(INIT_EULER));
+        cubeMatrix[i] = t;
+      }
+      TilePlaneUtil.cubeMatrix = cubeMatrix;
+    }
+    // return TilePlaneUtil.cubeMatrix.map((matrix) => matrix.clone());
+    return TilePlaneUtil.cubeMatrix;
+  }
+}
+
+export { TilePlane, TilePlaneUtil };

package/src/owlly/element/video-element.ts

@@ -0,0 +1,190 @@
+import { Externals, NS_THREE } from '../stage/externals';
+import { BasicTools } from '../utils/basic-tools';
+import { Element, ElementFrameContext } from './element';
+
+class SharedVideo {
+  video: HTMLVideoElement;
+
+  count: number;
+
+  playing: boolean;
+
+  playSet: Set<number>;
+
+  texture: NS_THREE.VideoTexture;
+
+  private listeners: { [key: string]: EventListener };
+
+  constructor(videoSrc: string) {
+    const { THREE } = Externals.getInstance();
+    this.count = 0;
+    this.playSet = new Set<number>();
+    this.playing = false;
+    this.listeners = {
+      onPlaying: (): void => { this.playing = true; },
+      onPaused: (): void => { this.playing = false; },
+    };
+
+    const video = document.createElement('video');
+    video.setAttribute('webkit-playsinline', 'true');
+    video.setAttribute('x5-playsinline', 'true');
+    video.setAttribute('playsinline', 'true');
+    video.setAttribute('crossOrigin', 'anonymous');
+    video.setAttribute('autoplay', 'false');
+    video.setAttribute('muted', 'true');
+
+    video.muted = true;
+    video.src = videoSrc;
+    video.loop = true;
+    video.volume = 0;
+
+    video.addEventListener('playing', this.listeners.onPlaying);
+    video.addEventListener('pause', this.listeners.onPaused);
+
+    this.video = video;
+    this.texture = new THREE.VideoTexture(this.video);
+  }
+
+  play(identifier?: number): void {
+    if (this.playSet.size < 1) this.video.play();
+    if (identifier) this.playSet.add(identifier);
+  }
+
+  pause(identifier?: number): void {
+    if (identifier) this.playSet.delete(identifier);
+    if (this.playSet.size === 0) this.video.pause();
+  }
+
+  destroy(): void {
+    if (this.texture) this.texture.dispose();
+    if (!this.video) return;
+    this.video.removeEventListener('playing', this.listeners.onPlaying);
+    this.video.removeEventListener('pause', this.listeners.onPaused);
+    this.video.pause();
+    this.video.removeAttribute('src');
+    this.video.load();
+  }
+}
+
+class VideoElement extends Element {
+  public static Videos: Map<string, SharedVideo>;
+
+  private initialized: boolean;
+
+  private video: SharedVideo;
+
+  private videoPlane: NS_THREE.Mesh;
+
+  private videoVisible: boolean;
+
+  constructor(videoSrc: string) {
+    super();
+    if (!VideoElement.Videos) VideoElement.Videos = new Map<string, SharedVideo>();
+
+    this.initialized = false;
+    this.up.set(0, 0, 1);
+
+    this.visible = false;
+    this.videoVisible = false;
+
+    if (videoSrc) this.setVideoSrc(videoSrc);
+  }
+
+  private static RemoveVideo(videoSrc: string): void {
+    if (!VideoElement.Videos.has(videoSrc)) return;
+    const sharedVideo = VideoElement.Videos.get(videoSrc)!;
+    if (sharedVideo.count - 1 === 0) {
+      sharedVideo.destroy();
+      VideoElement.Videos.delete(videoSrc);
+    } else {
+      sharedVideo.count -= 1;
+      VideoElement.Videos.set(videoSrc, sharedVideo);
+    }
+  }
+
+  private static AddVideo(videoSrc: string): SharedVideo {
+    if (!VideoElement.Videos.has(videoSrc)) {
+      const video = new SharedVideo(videoSrc);
+      VideoElement.Videos.set(videoSrc, video);
+    }
+    const video = VideoElement.Videos.get(videoSrc)!;
+    video.count += 1;
+    return video;
+  }
+
+  private createVideoPlane(): void {
+    const { THREE } = Externals.getInstance();
+    const geometry = new THREE.PlaneBufferGeometry(1.6, 0.9);
+    const material = new THREE.MeshBasicMaterial({
+      map: this.video.texture,
+      side: THREE.DoubleSide,
+      transparent: false,
+      depthTest: false,
+      depthWrite: false,
+    });
+    this.videoPlane = new THREE.Mesh(geometry, material);
+    this.add(this.videoPlane);
+    this.initialized = true;
+    this.videoVisible = true;
+  }
+
+  setVideoSrc(videoSrc: string): void {
+    const video = VideoElement.AddVideo(videoSrc);
+    if (this.video) {
+      (this.videoPlane.material as NS_THREE.MeshBasicMaterial).map = null;
+      VideoElement.RemoveVideo(this.video.video.src);
+    }
+    this.video = video;
+    if (this.videoPlane && this.videoPlane.material) {
+      (this.videoPlane.material as NS_THREE.MeshBasicMaterial).map = this.video.texture;
+    }
+
+    if (!this.videoPlane) this.createVideoPlane();
+  }
+
+  setVideoVisible(visible: boolean): void {
+    this.videoVisible = visible;
+  }
+
+  setVideoSize(width: number, height: number): void {
+    if (!this.videoPlane) return;
+    const { THREE } = Externals.getInstance();
+    const { geometry } = this.videoPlane;
+    const newGeometry = new THREE.PlaneBufferGeometry(width, height);
+    this.videoPlane.geometry = newGeometry;
+    geometry.dispose();
+  }
+
+  play(identifier?: number): void {
+    if (!this.video) return;
+    this.video.play(identifier);
+    this.videoPlane.renderOrder = 150;
+  }
+
+  stop(identifier?: number): void {
+    if (!this.video) return;
+    this.video.pause(identifier);
+    this.videoPlane.renderOrder = 1;
+  }
+
+  update(): ElementFrameContext {
+    const frameContext = new ElementFrameContext(this);
+    if (this.initialized && !this.parent) {
+      frameContext.shouldPlaceElement = true;
+      frameContext.needUpdate = true;
+    }
+    this.visible = this.videoVisible && this.video && this.video.playing;
+    if (this.visible) {
+      frameContext.needUpdate = true;
+    }
+    return frameContext;
+  }
+
+  dispose(): void {
+    if (this.video) VideoElement.RemoveVideo(this.video.video.src);
+    super.dispose();
+    BasicTools.dispose(this, true);
+  }
+}
+
+export { VideoElement };