@aibee/owlly 1.0.26 → 1.0.29

package/lib/owlly/element/tile-plane.d.ts

@@ -0,0 +1,105 @@
+import { NS_THREE } from '../stage/externals';
+import { Element, ElementFrameContext, View } from '..';
+import { TileTextureInfo } from '../utils/tile-util';
+/**
+ * 瓦片平面，可以是平面，也可以是曲面
+ */
+declare class TilePlane extends Element {
+    private initialized;
+    /** 全景面id @ignore */
+    pfid: number;
+    private planeGeometry;
+    private uniforms;
+    private plane;
+    private needsUpdate;
+    /** @ignore */
+    textureMap: Map<string, TileTextureInfo>;
+    /** @ignore */
+    level: number;
+    /** @ignore */
+    revers: boolean;
+    /** @ignore */
+    face: number;
+    /** @ignore */
+    flipX: boolean;
+    /** @ignore */
+    flipY: boolean;
+    /** @ignore */
+    textureRootUrl: string;
+    /** @ignore */
+    offLineTextureRootUrl?: string;
+    /** @ignore */
+    offLineTextureLevel: number;
+    /**
+     * 构造
+     * @param face 面数
+     * @param flipX x翻转
+     * @param flipY y翻转
+     */
+    constructor(face: number, flipX?: boolean, flipY?: boolean);
+    /**
+     * 更新面id
+     * @ignore
+     * @param pfid 全景面id
+     * @param level 全景等级
+     */
+    updatePfid(pfid: number, level: number): void;
+    /**
+     * 设置纹理
+     * @param max
+     * @param textures
+     */
+    private setTexturesUniforms;
+    /**
+     * 更新纹理
+     * @param textures
+     * @param textureMap
+     */
+    updateTextures(textures: NS_THREE.Texture[], textureMap: Map<string, TileTextureInfo>): void;
+    /**
+     * 更新纹理图
+     * @ignore
+     * @param textureMap
+     */
+    updateInfos(textureMap: Map<string, TileTextureInfo>): void;
+    /**
+     * 更新在相机中的信息
+     * @ignore
+     * @param view
+     * @returns
+     */
+    udpateInCamera(view: View): TileTextureInfo[];
+    /**
+     * 更新
+     * @returns
+     */
+    update(): ElementFrameContext;
+    renderOnce(): void;
+}
+/**
+ * 瓦片平面工具类
+ */
+declare class TilePlaneUtil {
+    private static cubeMatrix;
+    /**
+     * 设置平面可见性
+     * @ignore
+     * @param visible
+     */
+    static setPlanesVisible(visible: boolean): void;
+    /**
+     * 根据矩阵获取平面组
+     * @ignore
+     * @param pid 全景id
+     * @param level 瓦片等级
+     * @param textureUrls 纹理地址
+     * @returns
+     */
+    static getPlanesByMatrix(pid: number, level: number, textureUrls: string[], offLineTextureLevel?: number, offLineTextureUrls?: string[]): TilePlane[];
+    /**
+     * 获取cube平面矩阵
+     * @returns
+     */
+    static getCubeMatrix(): NS_THREE.Matrix4[];
+}
+export { TilePlane, TilePlaneUtil };

package/lib/owlly/element/tile-plane.js

@@ -0,0 +1,360 @@
+import { NS_THREE, Externals } from '../stage/externals';
+import { Element, ElementFrameContext } from '..';
+import { FragmentShader, VertexShader, TileTextureInfo, TileUtil, CubeFaceConfig, } from '../utils/tile-util';
+const TILE_PLANE_SIZE = 2;
+/**
+ * 瓦片平面，可以是平面，也可以是曲面
+ */
+class TilePlane extends Element {
+    /**
+     * 构造
+     * @param face 面数
+     * @param flipX x翻转
+     * @param flipY y翻转
+     */
+    constructor(face, flipX, flipY) {
+        super();
+        /** @ignore */
+        this.offLineTextureLevel = -1;
+        this.face = face;
+        this.flipX = flipX || false;
+        this.flipY = flipY || false;
+        // if (textureRootUrl) { this.textureRootUrl = textureRootUrl; }
+        this.textureMap = new Map();
+        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 全景等级
+     */
+    updatePfid(pfid, level) {
+        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
+     */
+    setTexturesUniforms(max, textures) {
+        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
+     */
+    updateTextures(textures, textureMap) {
+        // console.log('textures.length', textures.length, 'textureMap.size', textureMap.size);
+        this.setTexturesUniforms(textures.length, textures);
+        this.updateInfos(textureMap);
+    }
+    /**
+     * 更新纹理图
+     * @ignore
+     * @param textureMap
+     */
+    updateInfos(textureMap) {
+        this.textureMap = textureMap;
+        const infos = Array.from(this.textureMap.values());
+        infos.sort((a, b) => 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 = [];
+        const normals = [];
+        const indices = [];
+        const uvi = []; // 定位索引
+        const computeOne = (ti, index) => {
+            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
+     */
+    udpateInCamera(view) {
+        const { textureMap, pfid, level, textureRootUrl, offLineTextureLevel, offLineTextureRootUrl, } = this;
+        const updates = [];
+        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
+     */
+    update() {
+        const frameContext = new ElementFrameContext(this);
+        if (!this.initialized) {
+            this.initialized = true;
+            frameContext.needUpdate = true;
+        }
+        else if (this.needsUpdate) {
+            frameContext.needUpdate = true;
+            this.plane.material.uniformsNeedUpdate = true;
+        }
+        if (this.initialized && !this.parent) {
+            frameContext.shouldPlaceElement = true;
+        }
+        return frameContext;
+    }
+    renderOnce() {
+        this.updateInfos(this.textureMap);
+    }
+}
+/** 全局瓦片平面，挂载在全景节点下面 */
+const tilePlanes = [];
+/**
+ * 瓦片平面工具类
+ */
+class TilePlaneUtil {
+    /**
+     * 设置平面可见性
+     * @ignore
+     * @param visible
+     */
+    static setPlanesVisible(visible) {
+        tilePlanes.forEach((plane) => {
+            plane.visible = visible;
+        });
+    }
+    /**
+     * 根据矩阵获取平面组
+     * @ignore
+     * @param pid 全景id
+     * @param level 瓦片等级
+     * @param textureUrls 纹理地址
+     * @returns
+     */
+    static getPlanesByMatrix(pid, level, textureUrls, offLineTextureLevel, offLineTextureUrls) {
+        const cubeMatrix = TilePlaneUtil.getCubeMatrix();
+        const planes = cubeMatrix.map((pm, index) => {
+            // 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
+     */
+    static getCubeMatrix() {
+        const { THREE } = Externals.getInstance();
+        if (!TilePlaneUtil.cubeMatrix) {
+            const cubeMatrix = [];
+            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/lib/owlly/element/video-element.d.ts

@@ -0,0 +1,33 @@
+import { NS_THREE } from '../stage/externals';
+import { Element, ElementFrameContext } from './element';
+declare class SharedVideo {
+    video: HTMLVideoElement;
+    count: number;
+    playing: boolean;
+    playSet: Set<number>;
+    texture: NS_THREE.VideoTexture;
+    private listeners;
+    constructor(videoSrc: string);
+    play(identifier?: number): void;
+    pause(identifier?: number): void;
+    destroy(): void;
+}
+declare class VideoElement extends Element {
+    static Videos: Map<string, SharedVideo>;
+    private initialized;
+    private video;
+    private videoPlane;
+    private videoVisible;
+    constructor(videoSrc: string);
+    private static RemoveVideo;
+    private static AddVideo;
+    private createVideoPlane;
+    setVideoSrc(videoSrc: string): void;
+    setVideoVisible(visible: boolean): void;
+    setVideoSize(width: number, height: number): void;
+    play(identifier?: number): void;
+    stop(identifier?: number): void;
+    update(): ElementFrameContext;
+    dispose(): void;
+}
+export { VideoElement };

package/lib/owlly/element/video-element.js

@@ -0,0 +1,159 @@
+import { Externals } from '../stage/externals';
+import { BasicTools } from '../utils/basic-tools';
+import { Element, ElementFrameContext } from './element';
+class SharedVideo {
+    constructor(videoSrc) {
+        const { THREE } = Externals.getInstance();
+        this.count = 0;
+        this.playSet = new Set();
+        this.playing = false;
+        this.listeners = {
+            onPlaying: () => { this.playing = true; },
+            onPaused: () => { 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) {
+        if (this.playSet.size < 1)
+            this.video.play();
+        if (identifier)
+            this.playSet.add(identifier);
+    }
+    pause(identifier) {
+        if (identifier)
+            this.playSet.delete(identifier);
+        if (this.playSet.size === 0)
+            this.video.pause();
+    }
+    destroy() {
+        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 {
+    constructor(videoSrc) {
+        super();
+        if (!VideoElement.Videos)
+            VideoElement.Videos = new Map();
+        this.initialized = false;
+        this.up.set(0, 0, 1);
+        this.visible = false;
+        this.videoVisible = false;
+        if (videoSrc)
+            this.setVideoSrc(videoSrc);
+    }
+    static RemoveVideo(videoSrc) {
+        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);
+        }
+    }
+    static AddVideo(videoSrc) {
+        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;
+    }
+    createVideoPlane() {
+        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) {
+        const video = VideoElement.AddVideo(videoSrc);
+        if (this.video) {
+            this.videoPlane.material.map = null;
+            VideoElement.RemoveVideo(this.video.video.src);
+        }
+        this.video = video;
+        if (this.videoPlane && this.videoPlane.material) {
+            this.videoPlane.material.map = this.video.texture;
+        }
+        if (!this.videoPlane)
+            this.createVideoPlane();
+    }
+    setVideoVisible(visible) {
+        this.videoVisible = visible;
+    }
+    setVideoSize(width, height) {
+        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) {
+        if (!this.video)
+            return;
+        this.video.play(identifier);
+        this.videoPlane.renderOrder = 150;
+    }
+    stop(identifier) {
+        if (!this.video)
+            return;
+        this.video.pause(identifier);
+        this.videoPlane.renderOrder = 1;
+    }
+    update() {
+        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() {
+        if (this.video)
+            VideoElement.RemoveVideo(this.video.video.src);
+        super.dispose();
+        BasicTools.dispose(this, true);
+    }
+}
+export { VideoElement };

package/lib/owlly/geometries/ExtrudeGeometry2.d.ts

@@ -0,0 +1,15 @@
+import { NS_THREE } from '../stage/externals';
+export interface ExtrudeGeometry2Options {
+    extrudePath: NS_THREE.Vector3[];
+    closed: boolean;
+}
+export interface UVGenerator2 {
+    generateTopUV(geometry: ExtrudeGeometry2, vertices: number[], indexA: number, indexB: number, indexC: number): THREE.Vector2[];
+    generateSideWallUV(geometry: ExtrudeGeometry2, vertices: number[], indexA: number, indexB: number, indexC: number, indexD: number): THREE.Vector2[];
+}
+declare class ExtrudeGeometry2 extends NS_THREE.BufferGeometry {
+    private parameters;
+    constructor(shapes: NS_THREE.Shape | NS_THREE.Shape[], options: ExtrudeGeometry2Options);
+    toJSON(): any;
+}
+export { ExtrudeGeometry2, ExtrudeGeometry2 as ExtrudeBufferGeometry2 };