@pirireis/webglobeplugins 0.17.1 → 1.0.2

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

@@ -1,10 +1,40 @@
-import { createProgram } from '../../../util/webglobjectbuilders';
-import { noRegisterGlobeProgramCache } from '../../../programs/programcache';
-import { CameraUniformBlockString, CameraUniformBlockTotemCache, CameraUniformBlockTotem } from "../../../programs/totems/camerauniformblock";
-const UniformBlockBindingPoints = {
-    ShellBlock: 0,
-    CameraBlock: 1,
-};
+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;
+
 const vertexShader = `#version 300 es
         #define R 6378.137
         #define PI 3.1415926535897932384626433832795
@@ -86,7 +116,8 @@ 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;
@@ -98,244 +129,237 @@ const fragmentShader = `#version 300 es
         void main() {
            outColor = texture(u_texture, v_texture_coordinate);
            outColor.a *= v_opacity;
-        }`;
-class BBOXGlobeShellProgram {
-    constructor(globe) {
-        this.id = "BBOXGlobeShellProgram";
-        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.setGeometry();
-        // this.resize();
-        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"),
-        };
-    }
-    // this method implements data part of flyweight pattern
-    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);
-    }
-    // setRotationAndTranslation(uProjectionMatrix, uModelViewMatrix, uTranslate, resetCurrentProgram = false) {
-    //     const gl = this.gl;
-    //     let currentProgram = null;
-    //     if (resetCurrentProgram) { currentProgram = gl.getParameter(gl.CURRENT_PROGRAM) };
-    //     gl.useProgram(this.programWrapper.program);
-    //     gl.uniformMatrix4fv(this.programWrapper.projection, false, uProjectionMatrix);
-    //     gl.uniformMatrix4fv(this.programWrapper.view, false, uModelViewMatrix);
-    //     this._transformArray.set([uTranslate.x, uTranslate.y, uTranslate.z], 0);
-    //     gl.uniform3fv(this.programWrapper.translate, this._transformArray);
-    //     if (resetCurrentProgram) gl.useProgram(currentProgram);
-    // }
-    // setGeometry() {
-    //     const { globe, gl } = this;
-    //     const { is3D, screenWH, program } = this.programWrapper;
-    //     const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
-    //     const is3D = this.globe.api_GetCurrentGeometry() === 0;
-    //     gl.useProgram(program);
-    //     if (globe.api_GetCurrentGeometry() === globe.api_GeometryTypes().FLAT) {
-    //         gl.uniform2f(screenWH, globe.api_ScrW(), globe.api_ScrH());
-    //     }
-    //     gl.uniform1i(is3D, is3D);
-    //     gl.useProgram(currentProgram);
-    // }
-    // resize() {
-    //     const { gl, globe } = this;
-    //     if (!globe) return;
-    //     const { program, screenWH } = this.programWrapper;
-    //     const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
-    //     gl.useProgram(program);
-    //     if (globe.api_GetCurrentGeometry() === globe.api_GeometryTypes().FLAT) {
-    //         gl.uniform2f(screenWH, globe.api_ScrW(), globe.api_ScrH());
-    //     }
-    //     gl.useProgram(currentProgram);
-    // }
-    // only sets
-    //  data does not draw
-    // draw3D(csRenderPass) {
-    //     const { gl, globe } = this;
-    //     const { program } = this.programWrapper; //view, projection, translate
-    //     gl.disable(gl.DEPTH_TEST);
-    //     gl.useProgram(program);
-    //     // gl.uniformMatrix4fv(projection, false, uProjectionMatrix);
-    //     // gl.uniformMatrix4fv(view, false, uModelViewMatrix);
-    //     // // this._transformArray.set([], 0);
-    //     // gl.uniform3f(translate, uTranslate.x, uTranslate.y, uTranslate.z);
-    //     if (globe.api_GetCurrentGeometry() === 1) {
-    //         const { width, height } = globe.api_GetCurrentWorldWH();
-    //         gl.uniform2fv(this.programWrapper.mapWH, [width, height]);
-    //     }
-    //     gl.enable(gl.DEPTH_TEST);
-    // }
-    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 };
-    }
-}
-class ShellBlockManager {
-    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);
-    }
-});
+        }`;
+
+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);
+    }
+});