@pirireis/webglobeplugins 1.0.2 → 1.0.4

package/{semiplugins/shell/bbox-renderer/logic.ts → webglobeplugins/semiplugins/shell/bbox-renderer/logic.js}

@@ -1,40 +1,10 @@
-import { createProgram } from '../../../util/webglobjectbuilders';
-import { noRegisterGlobeProgramCache } from '../../../programs/programcache';
-import {
-    CameraUniformBlockString,
-    CameraUniformBlockTotemCache,
-    CameraUniformBlockTotem
-} from "../../../programs/totems/camerauniformblock";
-import { Globe } from '../../../types';
-
-
-interface ProgramWrapper {
-    program: WebGLProgram;
-    u_texture: WebGLUniformLocation | null;
-    u_mesh_resolution: WebGLUniformLocation | null;
-    u_time: WebGLUniformLocation | null;
-}
-
-interface MeshConfig {
-    xRes: number;
-    yRes: number;
-    eastWestTied: boolean;
-}
-
-interface ShellBlockUpdateParams {
-    gridSizeRad?: [number, number] | null;
-    gridOffsetRad?: [number, number] | null;
-    height?: number | null;
-    wiggleInKM?: number | null;
-    innerTime?: number | null;
-    opacity?: number | null;
-}
-
-const UniformBlockBindingPoints = {
-    ShellBlock: 0,
-    CameraBlock: 1,
-} as const;
-
+import { createProgram } from '../../../util/webglobjectbuilders';
+import { noRegisterGlobeProgramCache } from '../../../programs/programcache';
+import { CameraUniformBlockString, CameraUniformBlockTotemCache } from "../../../programs/totems/camerauniformblock";
+const UniformBlockBindingPoints = {
+    ShellBlock: 0,
+    CameraBlock: 1,
+};
 const vertexShader = `#version 300 es
         #define R 6378.137
         #define PI 3.1415926535897932384626433832795
@@ -116,8 +86,7 @@ const vertexShader = `#version 300 es
             v_texture_coordinate = texCoord;
             v_opacity = u_opacity;
         }
-        `;
-
+        `;
 const fragmentShader = `#version 300 es
         precision lowp float;
         in vec2 v_texture_coordinate;
@@ -129,237 +98,204 @@ const fragmentShader = `#version 300 es
         void main() {
            outColor = texture(u_texture, v_texture_coordinate);
            outColor.a *= v_opacity;
-        }`;
-
-export class BBOXGlobeShellProgram {
-    public readonly id: string = "BBOXGlobeShellProgram";
-    public readonly description: string;
-    public readonly gl: WebGL2RenderingContext;
-    public readonly globe: Globe;
-    public readonly programWrapper: ProgramWrapper;
-    public readonly cameraBlockTotem: CameraUniformBlockTotem;
-
-    private readonly _transformArray: Float32Array;
-    private _xRes!: number;
-    private _yRes!: number;
-    private _vao!: WebGLVertexArrayObject;
-    private _indexBuffer!: WebGLBuffer;
-    private _drawCount!: number;
-
-    constructor(globe: Globe) {
-        this.description = "This program implements flyweight pattern for globe." +
-            "At globes draw3D call stack, this program should be prior to any program that uses it." +
-            "draw3D method of this object only sets Projetion, ModelView and Translate matrices and if the mode is 2D mapWH .";
-
-        this.gl = globe.gl;
-        this.globe = globe;
-        this.programWrapper = this._createProgramWrapper();
-        this.cameraBlockTotem = CameraUniformBlockTotemCache.get(globe);
-        this.cameraBlockTotem.assignBindingPoint(this.programWrapper.program, UniformBlockBindingPoints.CameraBlock);
-
-        this._transformArray = new Float32Array(3);
-        this.updateTime(0);
-        this.setMesh({ xRes: 64, yRes: 64, eastWestTied: false });
-    }
-
-    private _createProgramWrapper(): ProgramWrapper {
-        const gl = this.gl;
-        const program = createProgram(gl, vertexShader, fragmentShader);
-        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
-        gl.useProgram(program);
-        const shellBlockIndex = gl.getUniformBlockIndex(program, "ShellBlock");
-        gl.uniformBlockBinding(program, shellBlockIndex, UniformBlockBindingPoints.ShellBlock);
-        gl.useProgram(currentProgram);
-
-        return {
-            program,
-            u_texture: gl.getUniformLocation(program, "u_texture"),
-            u_mesh_resolution: gl.getUniformLocation(program, "u_mesh_resolution"),
-            u_time: gl.getUniformLocation(program, "u_time")
-        };
-    }
-
-    public getShellBlockBufferManager(): ShellBlockManager {
-        return new ShellBlockManager(this.gl);
-    }
-
-    public updateTime(time: number): void {
-        const { gl, programWrapper } = this;
-        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
-        gl.useProgram(programWrapper.program);
-        gl.uniform1f(this.programWrapper.u_time, time);
-        gl.useProgram(currentProgram);
-    }
-
-    public draw(
-        texture: WebGLTexture,
-        shellBlockDataManager: ShellBlockManager,
-        drawLines: boolean = false,
-        csRenderPass?: any
-    ): void {
-        const { gl, programWrapper, _vao, _drawCount } = this;
-        const { program, u_texture } = programWrapper;
-        gl.useProgram(program);
-        gl.bindVertexArray(_vao);
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.uniform1i(u_texture, 0);
-        shellBlockDataManager.bind();
-        this.cameraBlockTotem.bind(UniformBlockBindingPoints.CameraBlock);
-        if (drawLines) gl.drawElements(gl.LINES, _drawCount, gl.UNSIGNED_SHORT, 0);
-        gl.clearColor(0, 0, 0, 0);
-        gl.drawElements(gl.TRIANGLES, _drawCount, gl.UNSIGNED_SHORT, 0);
-        shellBlockDataManager.unbind();
-        this.cameraBlockTotem.unbind(UniformBlockBindingPoints.CameraBlock);
-        gl.bindVertexArray(null);
-    }
-
-    public free(): void {
-        const { gl, programWrapper, _vao, _indexBuffer } = this;
-        CameraUniformBlockTotemCache.release(this.globe);
-        gl.deleteBuffer(_indexBuffer);
-        gl.deleteVertexArray(_vao);
-        gl.deleteProgram(programWrapper.program);
-    }
-
-    public setMesh({ xRes, yRes, eastWestTied }: MeshConfig): void {
-        this._xRes = xRes;
-        this._yRes = yRes;
-        const { _vao } = this._meshUP(xRes, yRes, eastWestTied);
-        this._vao = _vao;
-        this._setUMeshResolution(xRes, yRes);
-    }
-
-    private _setUMeshResolution(xRes: number, yRes: number): void {
-        const { gl, programWrapper } = this;
-        const { u_mesh_resolution } = programWrapper;
-        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
-        gl.useProgram(programWrapper.program);
-        gl.uniform2f(u_mesh_resolution, xRes, yRes);
-        gl.useProgram(currentProgram);
-        this._drawCount = 6 * ((xRes - 1) * (yRes - 1));
-    }
-
-    private _meshUP(xRes: number, yRes: number, eastWestTied: boolean): { _vao: WebGLVertexArrayObject } {
-        this._drawCount = 6 * ((xRes - 1) * (yRes - 1));
-        const indices = new Uint16Array(this._drawCount);
-        {
-            let indicesIndex = 0;
-            let index = 0;
-            for (let j = 0; j < yRes - 1; j++) {
-                for (let i = 0; i < xRes - 1; i++) {
-                    const ind = index + i;
-                    indices[indicesIndex++] = ind + xRes;
-                    indices[indicesIndex++] = ind + 1;
-                    indices[indicesIndex++] = ind;
-                    indices[indicesIndex++] = ind + xRes + 1;
-                    indices[indicesIndex++] = ind + 1;
-                    indices[indicesIndex++] = ind + xRes;
-                }
-                index += xRes;
-            }
-            if (eastWestTied) {
-                let left = (yRes - 1);
-                let right = 0;
-                for (let i = 0; i < xRes - 1; i++) {
-                    indices[indicesIndex++] = left + xRes;
-                    indices[indicesIndex++] = right;
-                    indices[indicesIndex++] = left;
-                    indices[indicesIndex++] = right + xRes;
-                    indices[indicesIndex++] = right;
-                    indices[indicesIndex++] = left + xRes;
-                    left += xRes;
-                    right += xRes;
-                }
-            }
-        }
-        const gl = this.gl;
-        const _vao = gl.createVertexArray()!;
-        gl.bindVertexArray(_vao);
-        const indexBuffer = gl.createBuffer()!;
-        this._indexBuffer = indexBuffer;
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
-        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
-        gl.bindVertexArray(null);
-        return { _vao };
-    }
-}
-
-export class ShellBlockManager {
-    public readonly gl: WebGL2RenderingContext;
-    public readonly buffer: WebGLBuffer;
-
-    constructor(gl: WebGL2RenderingContext) {
-        this.gl = gl;
-        this.buffer = gl.createBuffer()!;
-        gl.bindBuffer(gl.UNIFORM_BUFFER, this.buffer);
-        gl.bufferData(gl.UNIFORM_BUFFER, 32, gl.DYNAMIC_DRAW);
-        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
-    }
-
-    public update({
-        gridSizeRad = null,
-        gridOffsetRad = null,
-        height = null,
-        wiggleInKM = null,
-        innerTime = null,
-        opacity = null
-    }: ShellBlockUpdateParams = {}): void {
-        const { gl, buffer } = this;
-        gl.bindBuffer(gl.UNIFORM_BUFFER, buffer);
-
-        if (gridOffsetRad !== null) {
-            const offset = new Float32Array(gridOffsetRad);
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 0, offset);
-        }
-        if (gridSizeRad !== null) {
-            const size = new Float32Array(gridSizeRad);
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 8, size);
-        }
-        if (height !== null) {
-            const heightArray = new Float32Array([height]);
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 16, heightArray);
-        }
-        if (wiggleInKM !== null) {
-            const wiggleArray = new Float32Array([wiggleInKM]);
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 20, wiggleArray);
-        }
-        if (innerTime !== null) {
-            const innerTimeArray = new Float32Array([innerTime]);
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 24, innerTimeArray);
-        }
-        if (opacity !== null) {
-            if (opacity < 0 || opacity > 1) {
-                console.warn('Invalid opacity value');
-                return;
-            }
-            const op = new Float32Array([opacity]);
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 28, op);
-        }
-        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
-    }
-
-    public bind(): void {
-        const { gl, buffer } = this;
-        gl.bindBufferBase(gl.UNIFORM_BUFFER, UniformBlockBindingPoints.ShellBlock, buffer);
-    }
-
-    public free(): void {
-        const { gl, buffer } = this;
-        gl.deleteBuffer(buffer);
-    }
-
-    public unbind(): void {
-        const { gl } = this;
-        gl.bindBufferBase(gl.UNIFORM_BUFFER, UniformBlockBindingPoints.ShellBlock, null);
-    }
-}
-
-export const BBOXGlobeShellProgramCache = Object.freeze({
-    get: function (globe: Globe): BBOXGlobeShellProgram {
-        return noRegisterGlobeProgramCache.getProgram(globe, BBOXGlobeShellProgram);
-    },
-    release: function (globe: Globe): void {
-        noRegisterGlobeProgramCache.releaseProgram(globe, BBOXGlobeShellProgram);
-    }
-});
+        }`;
+export class BBOXGlobeShellProgram {
+    id = "BBOXGlobeShellProgram";
+    description;
+    gl;
+    globe;
+    programWrapper;
+    cameraBlockTotem;
+    _transformArray;
+    _xRes;
+    _yRes;
+    _vao;
+    _indexBuffer;
+    _drawCount;
+    constructor(globe) {
+        this.description = "This program implements flyweight pattern for globe." +
+            "At globes draw3D call stack, this program should be prior to any program that uses it." +
+            "draw3D method of this object only sets Projetion, ModelView and Translate matrices and if the mode is 2D mapWH .";
+        this.gl = globe.gl;
+        this.globe = globe;
+        this.programWrapper = this._createProgramWrapper();
+        this.cameraBlockTotem = CameraUniformBlockTotemCache.get(globe);
+        this.cameraBlockTotem.assignBindingPoint(this.programWrapper.program, UniformBlockBindingPoints.CameraBlock);
+        this._transformArray = new Float32Array(3);
+        this.updateTime(0);
+        this.setMesh({ xRes: 64, yRes: 64, eastWestTied: false });
+    }
+    _createProgramWrapper() {
+        const gl = this.gl;
+        const program = createProgram(gl, vertexShader, fragmentShader);
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(program);
+        const shellBlockIndex = gl.getUniformBlockIndex(program, "ShellBlock");
+        gl.uniformBlockBinding(program, shellBlockIndex, UniformBlockBindingPoints.ShellBlock);
+        gl.useProgram(currentProgram);
+        return {
+            program,
+            u_texture: gl.getUniformLocation(program, "u_texture"),
+            u_mesh_resolution: gl.getUniformLocation(program, "u_mesh_resolution"),
+            u_time: gl.getUniformLocation(program, "u_time")
+        };
+    }
+    getShellBlockBufferManager() {
+        return new ShellBlockManager(this.gl);
+    }
+    updateTime(time) {
+        const { gl, programWrapper } = this;
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(programWrapper.program);
+        gl.uniform1f(this.programWrapper.u_time, time);
+        gl.useProgram(currentProgram);
+    }
+    draw(texture, shellBlockDataManager, drawLines = false, csRenderPass) {
+        const { gl, programWrapper, _vao, _drawCount } = this;
+        const { program, u_texture } = programWrapper;
+        gl.useProgram(program);
+        gl.bindVertexArray(_vao);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.uniform1i(u_texture, 0);
+        shellBlockDataManager.bind();
+        this.cameraBlockTotem.bind(UniformBlockBindingPoints.CameraBlock);
+        if (drawLines)
+            gl.drawElements(gl.LINES, _drawCount, gl.UNSIGNED_SHORT, 0);
+        gl.clearColor(0, 0, 0, 0);
+        gl.drawElements(gl.TRIANGLES, _drawCount, gl.UNSIGNED_SHORT, 0);
+        shellBlockDataManager.unbind();
+        this.cameraBlockTotem.unbind(UniformBlockBindingPoints.CameraBlock);
+        gl.bindVertexArray(null);
+    }
+    free() {
+        const { gl, programWrapper, _vao, _indexBuffer } = this;
+        CameraUniformBlockTotemCache.release(this.globe);
+        gl.deleteBuffer(_indexBuffer);
+        gl.deleteVertexArray(_vao);
+        gl.deleteProgram(programWrapper.program);
+    }
+    setMesh({ xRes, yRes, eastWestTied }) {
+        this._xRes = xRes;
+        this._yRes = yRes;
+        const { _vao } = this._meshUP(xRes, yRes, eastWestTied);
+        this._vao = _vao;
+        this._setUMeshResolution(xRes, yRes);
+    }
+    _setUMeshResolution(xRes, yRes) {
+        const { gl, programWrapper } = this;
+        const { u_mesh_resolution } = programWrapper;
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(programWrapper.program);
+        gl.uniform2f(u_mesh_resolution, xRes, yRes);
+        gl.useProgram(currentProgram);
+        this._drawCount = 6 * ((xRes - 1) * (yRes - 1));
+    }
+    _meshUP(xRes, yRes, eastWestTied) {
+        this._drawCount = 6 * ((xRes - 1) * (yRes - 1));
+        const indices = new Uint16Array(this._drawCount);
+        {
+            let indicesIndex = 0;
+            let index = 0;
+            for (let j = 0; j < yRes - 1; j++) {
+                for (let i = 0; i < xRes - 1; i++) {
+                    const ind = index + i;
+                    indices[indicesIndex++] = ind + xRes;
+                    indices[indicesIndex++] = ind + 1;
+                    indices[indicesIndex++] = ind;
+                    indices[indicesIndex++] = ind + xRes + 1;
+                    indices[indicesIndex++] = ind + 1;
+                    indices[indicesIndex++] = ind + xRes;
+                }
+                index += xRes;
+            }
+            if (eastWestTied) {
+                let left = (yRes - 1);
+                let right = 0;
+                for (let i = 0; i < xRes - 1; i++) {
+                    indices[indicesIndex++] = left + xRes;
+                    indices[indicesIndex++] = right;
+                    indices[indicesIndex++] = left;
+                    indices[indicesIndex++] = right + xRes;
+                    indices[indicesIndex++] = right;
+                    indices[indicesIndex++] = left + xRes;
+                    left += xRes;
+                    right += xRes;
+                }
+            }
+        }
+        const gl = this.gl;
+        const _vao = gl.createVertexArray();
+        gl.bindVertexArray(_vao);
+        const indexBuffer = gl.createBuffer();
+        this._indexBuffer = indexBuffer;
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
+        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
+        gl.bindVertexArray(null);
+        return { _vao };
+    }
+}
+export class ShellBlockManager {
+    gl;
+    buffer;
+    constructor(gl) {
+        this.gl = gl;
+        this.buffer = gl.createBuffer();
+        gl.bindBuffer(gl.UNIFORM_BUFFER, this.buffer);
+        gl.bufferData(gl.UNIFORM_BUFFER, 32, gl.DYNAMIC_DRAW);
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }
+    update({ gridSizeRad = null, gridOffsetRad = null, height = null, wiggleInKM = null, innerTime = null, opacity = null } = {}) {
+        const { gl, buffer } = this;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, buffer);
+        if (gridOffsetRad !== null) {
+            const offset = new Float32Array(gridOffsetRad);
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 0, offset);
+        }
+        if (gridSizeRad !== null) {
+            const size = new Float32Array(gridSizeRad);
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 8, size);
+        }
+        if (height !== null) {
+            const heightArray = new Float32Array([height]);
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 16, heightArray);
+        }
+        if (wiggleInKM !== null) {
+            const wiggleArray = new Float32Array([wiggleInKM]);
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 20, wiggleArray);
+        }
+        if (innerTime !== null) {
+            const innerTimeArray = new Float32Array([innerTime]);
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 24, innerTimeArray);
+        }
+        if (opacity !== null) {
+            if (opacity < 0 || opacity > 1) {
+                console.warn('Invalid opacity value');
+                return;
+            }
+            const op = new Float32Array([opacity]);
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 28, op);
+        }
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }
+    bind() {
+        const { gl, buffer } = this;
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, UniformBlockBindingPoints.ShellBlock, buffer);
+    }
+    free() {
+        const { gl, buffer } = this;
+        gl.deleteBuffer(buffer);
+    }
+    unbind() {
+        const { gl } = this;
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, UniformBlockBindingPoints.ShellBlock, null);
+    }
+}
+export const BBOXGlobeShellProgramCache = Object.freeze({
+    get: function (globe) {
+        return noRegisterGlobeProgramCache.getProgram(globe, BBOXGlobeShellProgram);
+    },
+    release: function (globe) {
+        noRegisterGlobeProgramCache.releaseProgram(globe, BBOXGlobeShellProgram);
+    }
+});

package/webglobeplugins/semiplugins/shell/bbox-renderer/object.js

@@ -0,0 +1,78 @@
+import { BBOXGlobeShellProgramCache } from './logic';
+export class BBOXGlobeShell {
+    gl;
+    globe;
+    program;
+    shellBlockManager;
+    innerTime;
+    texture;
+    bbox;
+    wiggleInKM;
+    wiggleSpeed;
+    constructor(gl, globe, { minLon = -180, maxLon = 180, minLat = -90, maxLat = 90, height = 0, u_opacity = 1, wiggleInKM = 0, wiggleSpeed = 0, } = {}) {
+        this.gl = gl;
+        this.globe = globe;
+        this.program = BBOXGlobeShellProgramCache.get(globe);
+        this.shellBlockManager = this.program.getShellBlockBufferManager();
+        this.innerTime = 0;
+        this.wiggleInKM = wiggleInKM;
+        this.wiggleSpeed = wiggleSpeed;
+        this.setBBox({ minLon, maxLon, minLat, maxLat });
+        this.setOpacity(u_opacity);
+        this.setHeight(height);
+        this.setWiggle({ wiggleSpeed, wiggleInKM });
+    }
+    setTexture(texture) {
+        this.texture = texture;
+        this.globe.DrawRender();
+    }
+    setHeight(height) {
+        this.shellBlockManager.update({ height });
+        this.globe.DrawRender();
+    }
+    // public update(data: any): void {
+    //     console.log("BBOXGlobeShell update", data);
+    //     this.shellBlockManager.update(data);
+    //     this.globe.DrawRender();
+    // }
+    setOpacity(opacity) {
+        this.shellBlockManager.update({ opacity });
+        this.globe.DrawRender();
+    }
+    setBBox({ minLon = -180, maxLon = 180, minLat = -90, maxLat = 90 } = {}) {
+        this.bbox = { minLon, maxLon, minLat, maxLat };
+        // x
+        const horOffset = (minLon) * Math.PI / 180;
+        const horSize = (maxLon - minLon) * Math.PI / 180;
+        // y
+        const vertOffset = (90 - maxLat) * Math.PI / 180;
+        const vertSize = (maxLat - minLat) * Math.PI / 180;
+        this.shellBlockManager.update({
+            gridSizeRad: [horSize, vertSize],
+            gridOffsetRad: [horOffset, vertOffset]
+        });
+        this.globe.DrawRender();
+    }
+    setWiggle({ wiggleSpeed = null, wiggleInKM = null }) {
+        if (wiggleInKM !== null)
+            this.wiggleInKM = wiggleInKM;
+        if (wiggleSpeed !== null)
+            this.wiggleSpeed = wiggleSpeed;
+        this.shellBlockManager.update({ wiggleInKM });
+    }
+    /**
+     * @param csRenderPass - modelView, projection, translate, mapWH, scrWH, should be set before calling this function
+     */
+    draw(csRenderPass) {
+        this.program.draw(this.texture, this.shellBlockManager, false, csRenderPass);
+        if (this.wiggleInKM > 0 && this.wiggleSpeed > 0) {
+            this.innerTime += this.wiggleSpeed;
+            this.shellBlockManager.update({ innerTime: this.innerTime });
+            this.globe.DrawRender();
+        }
+    }
+    free() {
+        BBOXGlobeShellProgramCache.release(this.globe);
+        this.shellBlockManager.free();
+    }
+}

package/webglobeplugins/semiplugins/type.js

@@ -0,0 +1 @@
+export {};