@pirireis/webglobeplugins 0.17.1 → 1.0.2

package/util/programs/draw-from-pixel-coords.js

@@ -1,44 +1,56 @@
-import { createProgram } from "../webglobjectbuilders";
-import { CameraUniformBlockString, CameraUniformBlockTotemCache } from "../../programs/totems/camerauniformblock";
-import { pixelXYToCartesian2DPoint, pixelXYToCartesian3DPoint } from "../shaderfunctions";
-const drawModeFunc = (gl) => {
-    return (mode) => {
-        return {
-            "point": gl.POINTS,
-            "line": gl.LINES,
-            "line_strip": gl.LINE_STRIP,
-            "line_loop": gl.LINE_LOOP,
-            "triangle": gl.TRIANGLES,
-            "triangle_strip": gl.TRIANGLE_STRIP,
-            "triangle_fan": gl.TRIANGLE_FAN
-        }[mode];
-    };
-};
-export class DrawFromPixelCoords {
-    constructor(gl, globe, drawMode = 'point') {
-        this.globe = globe;
-        this.gl = gl;
-        this._getDraw = drawModeFunc(gl);
-        this._drawMode = this._getDraw(drawMode);
-        this._is3D = true;
-        this._inBuffer = gl.createBuffer();
-        this._programWrapper = this._createProgramWrapper();
-        this._initUniforms();
-        this.setScreenWH();
-    }
-    _initUniforms() {
-        const { gl, _programWrapper } = this;
-        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
-        this._getDrawMode = drawModeFunc(gl);
-        gl.useProgram(_programWrapper.program);
-        gl.uniform1f(_programWrapper.u_opacity, 1.0);
-        gl.uniform1f(_programWrapper.u_is3D, 1.0);
-        gl.uniform1f(_programWrapper.height, 0.0);
-        gl.uniform1f(_programWrapper.u_point_size, 1.0);
-        gl.useProgram(currentProgram);
-    }
-    _createProgramWrapper() {
-        const { gl, globe } = this;
+import { createProgram } from "../webglobjectbuilders";
+import { CameraUniformBlockString, CameraUniformBlockTotemCache } from "../../programs/totems/camerauniformblock";
+import { pixelXYToCartesian2DPoint, pixelXYToCartesian3DPoint }
+    from "../shaderfunctions";
+
+const drawModeFunc = (gl) => {
+    return (mode) => {
+        return {
+            "point": gl.POINTS,
+            "line": gl.LINES,
+            "line_strip": gl.LINE_STRIP,
+            "line_loop": gl.LINE_LOOP,
+            "triangle": gl.TRIANGLES,
+            "triangle_strip": gl.TRIANGLE_STRIP,
+            "triangle_fan": gl.TRIANGLE_FAN
+        }[mode];
+    }
+}
+
+
+
+export class DrawFromPixelCoords {
+    constructor(gl, globe, drawMode = 'point') {
+        this.globe = globe;
+        this.gl = gl;
+        this._getDraw = drawModeFunc(gl);
+        this._drawMode = this._getDraw(drawMode);
+        this._is3D = true;
+        this._inBuffer = gl.createBuffer();
+
+        this._programWrapper = this._createProgramWrapper();
+        this._initUniforms();
+
+        this.setScreenWH();
+    }
+
+    _initUniforms() {
+
+        const { gl, _programWrapper } = this;
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        this._getDrawMode = drawModeFunc(gl);
+
+        gl.useProgram(_programWrapper.program);
+        gl.uniform1f(_programWrapper.u_opacity, 1.0);
+        gl.uniform1f(_programWrapper.u_is3D, 1.0);
+        gl.uniform1f(_programWrapper.height, 0.0);
+        gl.uniform1f(_programWrapper.u_point_size, 1.0);
+        gl.useProgram(currentProgram);
+
+    }
+
+    _createProgramWrapper() {
+        const { gl, globe } = this;
         const vertexSource = `#version 300 es
             precision highp float;
             ${CameraUniformBlockString}
@@ -70,7 +82,8 @@ export class DrawFromPixelCoords {
                 gl_PointSize = u_point_size;
                 v_color = a_color;
             }
-            `;
+            `;
+
         const fragmentSource = `#version 300 es
             precision highp float;
 
@@ -83,125 +96,149 @@ export class DrawFromPixelCoords {
                 outColor = v_color;
                 outColor.a = u_opacity;
             }   
-            `;
-        const program = createProgram(gl, vertexSource, fragmentSource);
-        const a_position = gl.getAttribLocation(program, 'a_position');
-        const a_color = gl.getAttribLocation(program, 'a_color');
-        // vao and buffer. 
-        const vao = gl.createVertexArray();
-        gl.bindVertexArray(vao);
-        gl.bindBuffer(gl.ARRAY_BUFFER, this._inBuffer);
-        gl.enableVertexAttribArray(a_position);
-        gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 6 * 4, 0);
-        gl.enableVertexAttribArray(a_color);
-        gl.vertexAttribPointer(a_color, 4, gl.FLOAT, false, 6 * 4, 2 * 4);
-        gl.bindVertexArray(null);
-        const cm = CameraUniformBlockTotemCache.get(globe);
-        const bindingPoint = 0;
-        const cmIndex = gl.getUniformBlockIndex(program, "CameraUniformBlock");
-        gl.uniformBlockBinding(program, cmIndex, bindingPoint);
-        return {
-            program: program,
-            vao: vao,
-            u_point_size: gl.getUniformLocation(program, 'u_point_size'),
-            u_opacity: gl.getUniformLocation(program, 'u_opacity'),
-            bindCamera: () => cm.bind(bindingPoint),
-            unbindCamera: () => cm.unbind(bindingPoint)
-        };
-    }
-    draw(uProjectionMatrix, uModelViewMatrix, uTranslate, drawRanges) {
-        const { gl, _programWrapper, _is3D } = this;
-        const deepTest = gl.isEnabled(gl.DEPTH_TEST);
-        gl.disable(gl.DEPTH_TEST);
-        gl.useProgram(_programWrapper.program);
-        gl.bindVertexArray(_programWrapper.vao);
-        gl.uniformMatrix4fv(_programWrapper.u_model_view_matrix, false, uModelViewMatrix);
-        gl.uniformMatrix4fv(_programWrapper.u_proj_matrix, false, uProjectionMatrix);
-        gl.uniform3f(_programWrapper.u_transpos, uTranslate.x, uTranslate.y, uTranslate.z);
-        gl.bindVertexArray(_programWrapper.vao);
-        _programWrapper.bindCamera();
-        if (!_is3D) {
-            const mapWH = this.globe.api_GetCurrentWorldWH();
-            gl.uniform2f(_programWrapper.u_mapWH, mapWH.width, mapWH.height);
-        }
-        for (const drawRange of drawRanges) {
-            gl.drawArrays(this._drawMode, drawRange[0], drawRange[1]);
-            // gl.drawArrays(gl.POINTS, drawRange[0], 1);
-        }
-        _programWrapper.unbindCamera();
-        gl.bindVertexArray(null);
-        if (deepTest) {
-            gl.enable(gl.DEPTH_TEST);
-        }
-    }
-    setOpacity(opacity) {
-        if (opacity < 0 || opacity > 1) {
-            throw new Error('Invalid opacity value');
-        }
-        ;
-        const { gl, _programWrapper } = this;
-        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
-        gl.useProgram(_programWrapper.program);
-        gl.uniform1f(_programWrapper.u_opacity, opacity);
-        gl.useProgram(currentProgram);
-        this.globe.DrawRender();
-    }
-    setPointSize(size) {
-        const { gl, _programWrapper } = this;
-        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
-        gl.useProgram(_programWrapper.program);
-        gl.uniform1f(_programWrapper.u_point_size, size);
-        gl.useProgram(currentProgram);
-        this.globe.DrawRender();
-    }
-    setDrawMode(mode) {
-        const modegl = this._getDraw(mode);
-        if (modegl) {
-            this._drawMode = modegl;
-        }
-        else {
-            throw new Error('Invalid draw mode ' + mode);
-        }
-    }
-    setScreenWH() {
-        const { gl, _programWrapper, globe } = this;
-        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
-        gl.useProgram(_programWrapper.program);
-        gl.uniform2f(_programWrapper.u_scrWH, globe.api_ScrW(), globe.api_ScrH());
-        gl.useProgram(currentProgram);
-    }
-    resize(width, height) {
-        const { gl, _programWrapper, globe } = this;
-        width = width || globe.api_ScrW();
-        height = height || globe.api_ScrH();
-        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
-        gl.useProgram(_programWrapper.program);
-        gl.uniform2f(_programWrapper.u_scrWH, width, height);
-        gl.useProgram(currentProgram);
-    }
-    setGeometry() {
-        const { gl, globe, _programWrapper } = this;
-        this._is3D = globe.api_GetCurrentGeometry() === 0;
-        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
-        gl.useProgram(_programWrapper.program);
-        gl.uniform1f(_programWrapper.u_is3D, this._is3D ? 1.0 : 0.0);
-        gl.useProgram(currentProgram);
-        this.resize();
-    }
-    free() {
-        const { gl, _programWrapper } = this;
-        gl.deleteProgram(_programWrapper.program);
-        gl.deleteVertexArray(_programWrapper.vao);
-        gl.deleteBuffer(this._inBuffer);
-    }
-    /**
-     *
-     * @param {Float32Array} data
-     * @format [x, y, r, g, b, a, x, y, r, g, b, a, x, y, r, g, b, a, x, y, r, g, b, a]
-     */
-    setBufferData(data) {
-        const { gl } = this;
-        gl.bindBuffer(gl.ARRAY_BUFFER, this._inBuffer);
-        gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
-    }
-}
+            `;
+
+        const program = createProgram(gl, vertexSource, fragmentSource);
+
+        const a_position = gl.getAttribLocation(program, 'a_position');
+        const a_color = gl.getAttribLocation(program, 'a_color');
+
+        // vao and buffer. 
+        const vao = gl.createVertexArray();
+
+        gl.bindVertexArray(vao);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._inBuffer);
+        gl.enableVertexAttribArray(a_position);
+        gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 6 * 4, 0);
+        gl.enableVertexAttribArray(a_color);
+        gl.vertexAttribPointer(a_color, 4, gl.FLOAT, false, 6 * 4, 2 * 4);
+        gl.bindVertexArray(null);
+
+        const cm = CameraUniformBlockTotemCache.get(globe);
+        const bindingPoint = 0;
+        const cmIndex = gl.getUniformBlockIndex(program, "CameraUniformBlock");
+        gl.uniformBlockBinding(program, cmIndex, bindingPoint);
+
+        return {
+            program: program,
+            vao: vao,
+            u_point_size: gl.getUniformLocation(program, 'u_point_size'),
+            u_opacity: gl.getUniformLocation(program, 'u_opacity'),
+            bindCamera: () => cm.bind(bindingPoint),
+            unbindCamera: () => cm.unbind(bindingPoint)
+        };
+    }
+
+
+
+    draw(uProjectionMatrix, uModelViewMatrix, uTranslate, drawRanges) {
+        const { gl, _programWrapper, _is3D } = this;
+
+        const deepTest = gl.isEnabled(gl.DEPTH_TEST);
+        gl.disable(gl.DEPTH_TEST);
+
+        gl.useProgram(_programWrapper.program);
+        gl.bindVertexArray(_programWrapper.vao);
+        gl.uniformMatrix4fv(_programWrapper.u_model_view_matrix, false, uModelViewMatrix);
+        gl.uniformMatrix4fv(_programWrapper.u_proj_matrix, false, uProjectionMatrix);
+        gl.uniform3f(_programWrapper.u_transpos, uTranslate.x, uTranslate.y, uTranslate.z);
+        gl.bindVertexArray(_programWrapper.vao);
+        _programWrapper.bindCamera();
+        if (!_is3D) {
+            const mapWH = this.globe.api_GetCurrentWorldWH();
+            gl.uniform2f(_programWrapper.u_mapWH, mapWH.width, mapWH.height);
+
+        }
+
+        for (const drawRange of drawRanges) {
+            gl.drawArrays(this._drawMode, drawRange[0], drawRange[1]);
+            // gl.drawArrays(gl.POINTS, drawRange[0], 1);
+        }
+        _programWrapper.unbindCamera();
+
+        gl.bindVertexArray(null);
+        if (deepTest) {
+            gl.enable(gl.DEPTH_TEST);
+        }
+    }
+
+    setOpacity(opacity) {
+        if (opacity < 0 || opacity > 1) {
+            throw new Error('Invalid opacity value');
+        };
+        const { gl, _programWrapper } = this;
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(_programWrapper.program);
+        gl.uniform1f(_programWrapper.u_opacity, opacity);
+        gl.useProgram(currentProgram);
+        this.globe.DrawRender();
+    }
+
+    setPointSize(size) {
+        const { gl, _programWrapper } = this;
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(_programWrapper.program);
+        gl.uniform1f(_programWrapper.u_point_size, size);
+        gl.useProgram(currentProgram);
+        this.globe.DrawRender();
+
+    }
+
+
+    setDrawMode(mode) {
+        const modegl = this._getDraw(mode);
+        if (modegl) {
+            this._drawMode = modegl;
+        } else {
+            throw new Error('Invalid draw mode ' + mode);
+        }
+    }
+
+    setScreenWH() {
+        const { gl, _programWrapper, globe } = this;
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(_programWrapper.program);
+        gl.uniform2f(_programWrapper.u_scrWH, globe.api_ScrW(), globe.api_ScrH());
+        gl.useProgram(currentProgram);
+    }
+
+
+    resize(width, height) {
+        const { gl, _programWrapper, globe } = this;
+        width = width || globe.api_ScrW();
+        height = height || globe.api_ScrH();
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(_programWrapper.program);
+        gl.uniform2f(_programWrapper.u_scrWH, width, height);
+        gl.useProgram(currentProgram);
+    }
+
+    setGeometry() {
+        const { gl, globe, _programWrapper } = this;
+        this._is3D = globe.api_GetCurrentGeometry() === 0;
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(_programWrapper.program);
+        gl.uniform1f(_programWrapper.u_is3D, this._is3D ? 1.0 : 0.0);
+        gl.useProgram(currentProgram);
+        this.resize();
+    }
+
+    free() {
+        const { gl, _programWrapper } = this;
+        gl.deleteProgram(_programWrapper.program);
+        gl.deleteVertexArray(_programWrapper.vao);
+        gl.deleteBuffer(this._inBuffer);
+    }
+
+
+    /**
+     * 
+     * @param {Float32Array} data
+     * @format [x, y, r, g, b, a, x, y, r, g, b, a, x, y, r, g, b, a, x, y, r, g, b, a] 
+     */
+    setBufferData(data) {
+        const { gl } = this;
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._inBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+    }
+}

package/util/programs/{draw-texture-on-canvas.js → draw-texture-on-canvas.ts}

@@ -1,6 +1,8 @@
-import { createProgram } from "../webglobjectbuilders";
-import { glProgramCache } from "../../programs/programcache";
-// import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../../programs/totems";
+import { createProgram } from "../webglobjectbuilders";
+import { glProgramCache } from "../../programs/programcache";
+// import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../../programs/totems";
+
+
 const vs = `#version 300 es
 precision highp float;
 
@@ -10,77 +12,100 @@ out vec2 v_texcoord;
 void main() {
     gl_Position = vec4(a_position, 0.0, 1.0);
     v_texcoord = a_position * 0.5 + 0.5;
-}`;
+}`;
+
 const fs = `#version 300 es
 precision highp float;
 
 uniform sampler2D u_texture;
-uniform float u_opacity;    
+uniform float u_opacity;
 in vec2 v_texcoord;
 out vec4 fragColor;
 
 void main() {
     fragColor = texture(u_texture, v_texcoord);
     fragColor.a *= u_opacity;
-}`;
-class TextureOnCanvasProgram {
-    constructor(gl) {
-        this.gl = gl;
-        this.vao = this.gl.createVertexArray();
-        this.buffer = this.gl.createBuffer();
-        this.gl.bindVertexArray(this.vao);
-        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffer);
-        this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array([
-            -1, -1,
-            1, -1,
-            1, 1,
-            -1, 1
-        ]), this.gl.STATIC_DRAW);
-        this.gl.enableVertexAttribArray(0);
-        this.gl.vertexAttribPointer(0, 2, this.gl.FLOAT, false, 0, 0);
-        this.gl.bindVertexArray(null);
-        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);
-        this.program = createProgram(this.gl, vs, fs);
-        {
-            const { gl, program } = this;
-            this.uniforms = {
-                texture: gl.getUniformLocation(program, "u_texture"),
-                opacity: gl.getUniformLocation(program, "u_opacity"),
-            };
-        }
-        {
-            this._lastOpacity = 1.0;
-            const currentProgram = this.gl.getParameter(this.gl.CURRENT_PROGRAM);
-            this.gl.useProgram(this.program);
-            this.gl.uniform1f(this.uniforms.opacity, this._lastOpacity);
-            this.gl.useProgram(currentProgram);
-        }
-    }
-    draw(texture, { opacity = 1.0 } = {}) {
-        const { gl, program, uniforms, vao } = this;
-        gl.useProgram(program);
-        gl.bindVertexArray(vao);
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.uniform1i(uniforms.texture, 0);
-        if (this._lastOpacity !== opacity) {
-            gl.uniform1f(uniforms.opacity, opacity);
-            this._lastOpacity = opacity;
-        }
-        gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
-        gl.bindVertexArray(null);
-    }
-    free() {
-        if (this._isFreed)
-            return;
-        this.gl.deleteVertexArray(this.vao);
-        this.gl.deleteBuffer(this.buffer);
-        this.gl.deleteProgram(this.program);
-        this._isFreed = true;
-    }
-}
-const textureOnCanvasProgramCache = Object.freeze({
-    get: (gl) => glProgramCache.getProgram(gl, TextureOnCanvasProgram),
-    release: (gl) => glProgramCache.releaseProgram(gl, TextureOnCanvasProgram)
-});
-export { textureOnCanvasProgramCache };
+}`;
+
+
+interface ITextureOnCanvasProgramUniforms {
+    texture: WebGLUniformLocation | null;
+    opacity: WebGLUniformLocation | null;
+}
+
+class TextureOnCanvasProgram {
+    private gl: WebGL2RenderingContext;
+    private vao: WebGLVertexArrayObject | null;
+    private buffer: WebGLBuffer | null;
+    private program: WebGLProgram | null;
+    private uniforms: ITextureOnCanvasProgramUniforms;
+    private _lastOpacity: number;
+    private _isFreed: boolean = false;
+
+    constructor(gl: WebGL2RenderingContext) {
+        this.gl = gl;
+
+        this.vao = this.gl.createVertexArray();
+        this.buffer = this.gl.createBuffer();
+        this.gl.bindVertexArray(this.vao);
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffer);
+        this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array([
+            -1, -1,
+            1, -1,
+            1, 1,
+            -1, 1
+        ]), this.gl.STATIC_DRAW);
+        this.gl.enableVertexAttribArray(0);
+        this.gl.vertexAttribPointer(0, 2, this.gl.FLOAT, false, 0, 0);
+        this.gl.bindVertexArray(null);
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);
+
+        this.program = createProgram(this.gl, vs, fs);
+
+        const { program } = this;
+        this.uniforms = {
+            texture: gl.getUniformLocation(program, "u_texture"),
+            opacity: gl.getUniformLocation(program, "u_opacity"),
+        };
+
+        this._lastOpacity = 1.0;
+        const currentProgram = this.gl.getParameter(this.gl.CURRENT_PROGRAM);
+        this.gl.useProgram(this.program);
+        this.gl.uniform1f(this.uniforms.opacity, this._lastOpacity);
+        this.gl.useProgram(currentProgram);
+    }
+
+
+    draw(texture: WebGLTexture, { opacity = 1.0 } = {}): void {
+
+        const { gl, program, uniforms, vao } = this;
+        gl.useProgram(program);
+        gl.bindVertexArray(vao);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.uniform1i(uniforms.texture, 0);
+        if (this._lastOpacity !== opacity) {
+            gl.uniform1f(uniforms.opacity, opacity);
+            this._lastOpacity = opacity;
+        }
+        gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
+        gl.bindVertexArray(null);
+    }
+
+    free(): void {
+        if (this._isFreed) return;
+        this.gl.deleteVertexArray(this.vao);
+        this.gl.deleteBuffer(this.buffer);
+        this.gl.deleteProgram(this.program);
+        this._isFreed = true;
+    }
+
+}
+
+const textureOnCanvasProgramCache = Object.freeze({
+    get: (gl: WebGL2RenderingContext): TextureOnCanvasProgram => glProgramCache.getProgram(gl, TextureOnCanvasProgram),
+    release: (gl: WebGL2RenderingContext): void => glProgramCache.releaseProgram(gl, TextureOnCanvasProgram)
+});
+
+
+export { textureOnCanvasProgramCache };