@pirireis/webglobeplugins 0.15.34 → 0.16.0

package/util/picking/fence.js

@@ -1,43 +1,46 @@
-const fence = (gl) => new Promise((resolve, reject) => {
-    // This will create a fence. If this follows a `readPixels()` call, then it
-    // will signal to WebGL that the read instruction should be asynchronous. 
-    // This means JS can continue to work on other tasks while the read instruction
-    // completes.
-    const sync = gl.fenceSync(gl.SYNC_GPU_COMMANDS_COMPLETE, 0);
-    gl.flush();
-    // There are TWO possible ways to check on the status of a WebGLSync object.
-    // 1. This will check it using clientWaitSync()
-    const checkStatus_v1 = () => {
-        const status = gl.clientWaitSync(sync, 0, 0);
-        // There are four possible values for status:
-        // a. ALREADY_SIGNALED and CONDITION_SATISFIED (done)
-        // b. TIMEOUT_EXPIRED (check again later)
-        // c. WAIT_FAILED (there was an error)
-        if (status === gl.TIMEOUT_EXPIRED) {
-            setTimeout(checkStatus_v1, 1);
-        }
-        else if (status === gl.ALREADY_SIGNALED || status === gl.CONDITION_SATISFIED) {
-            gl.deleteSync(sync);
-            resolve();
-        }
-        else {
-            gl.deleteSync(sync);
-            reject(new Error('Fence did not resolve normally for some reason'));
-        }
-    };
-    // 2. This will check with getSyncParameter(s, gl.SYNC_STATUS)
-    const checkStatus_v2 = () => {
-        const status = gl.getSyncParameter(sync, gl.SYNC_STATUS);
-        // There are only two possible values for status: SIGNALED and UNSIGNALED
-        // Note that there is no `error` signal, so there is no reason to use `reject()` here
-        if (status === gl.SIGNALED) {
-            gl.deleteSync(sync);
-            resolve();
-        }
-        else {
-            setTimeout(checkStatus_v2, 1);
-        }
-    };
-    setTimeout(checkStatus_v2, 1);
-});
-export { fence };
+const fence = (gl) => new Promise((resolve, reject) => {
+    // This will create a fence. If this follows a `readPixels()` call, then it
+    // will signal to WebGL that the read instruction should be asynchronous. 
+    // This means JS can continue to work on other tasks while the read instruction
+    // completes.
+    const sync = gl.fenceSync(gl.SYNC_GPU_COMMANDS_COMPLETE, 0);
+    gl.flush();
+
+    // There are TWO possible ways to check on the status of a WebGLSync object.
+
+    // 1. This will check it using clientWaitSync()
+    const checkStatus_v1 = () => {
+        const status = gl.clientWaitSync(sync, 0, 0);
+
+        // There are four possible values for status:
+        // a. ALREADY_SIGNALED and CONDITION_SATISFIED (done)
+        // b. TIMEOUT_EXPIRED (check again later)
+        // c. WAIT_FAILED (there was an error)
+        if (status === gl.TIMEOUT_EXPIRED) {
+            setTimeout(checkStatus_v1, 1);
+        } else if (status === gl.ALREADY_SIGNALED || status === gl.CONDITION_SATISFIED) {
+            gl.deleteSync(sync);
+            resolve();
+        } else {
+            gl.deleteSync(sync);
+            reject(new Error('Fence did not resolve normally for some reason'));
+        }
+    };
+
+    // 2. This will check with getSyncParameter(s, gl.SYNC_STATUS)
+    const checkStatus_v2 = () => {
+        const status = gl.getSyncParameter(sync, gl.SYNC_STATUS);
+
+        // There are only two possible values for status: SIGNALED and UNSIGNALED
+        // Note that there is no `error` signal, so there is no reason to use `reject()` here
+        if (status === gl.SIGNALED) {
+            gl.deleteSync(sync);
+            resolve();
+        } else {
+            setTimeout(checkStatus_v2, 1);
+        }
+    };
+    setTimeout(checkStatus_v2, 1);
+});
+
+export { fence };

package/util/picking/picker-displayer.js

@@ -1,136 +1,177 @@
-/**
- * add implicit texture display program for color
- * add fence on query return and return id.
-*/
-import { textureOnCanvasProgramCache } from "../programs/draw-texture-on-canvas";
-import { fence } from "./fence";
-const ESCAPE_VALUE = -1;
-class PickerDisplayer {
-    constructor(globe) {
-        this.globe = globe;
-        this.gl = globe.gl;
-        const gl = this.gl;
-        this.colorTexture = gl.createTexture(); // bind to color attachment 0
-        this.indexTexture = gl.createTexture(); // bind to color attachment 1
-        this.fbo = gl.createFramebuffer();
-        this._pbo = undefined;
-        this._pboSize = 0;
-        this.resize();
-        this.displayer = textureOnCanvasProgramCache.get(this.gl);
-    }
-    resize(width = null, height = null) {
-        if (width === null || height === null) {
-            width = this.globe.api_ScrW();
-            height = this.globe.api_ScrH();
-        }
-        const { gl, colorTexture, indexTexture } = this;
-        gl.deleteTexture(colorTexture);
-        gl.deleteTexture(indexTexture);
-        const colorTextureNew = gl.createTexture();
-        gl.bindTexture(gl.TEXTURE_2D, colorTextureNew);
-        gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGBA8, width, height);
-        const indexTextureNew = gl.createTexture();
-        gl.bindTexture(gl.TEXTURE_2D, indexTextureNew);
-        // gl.texStorage2D(gl.TEXTURE_2D, 1, gl.R16I, width, height);
-        gl.texStorage2D(gl.TEXTURE_2D, 1, gl.R32I, width, height);
-        gl.bindTexture(gl.TEXTURE_2D, null);
-        this.colorTexture = colorTextureNew;
-        this.indexTexture = indexTextureNew;
-    }
-    clearTextures() {
-        const { gl, colorTexture, indexTexture } = this;
-        gl.activeTexture(gl.TEXTURE1);
-        gl.bindTexture(gl.TEXTURE_2D, indexTexture);
-        gl.clearBufferiv(gl.COLOR, 1, new Int32Array([-1, -1, -1, -1]));
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, colorTexture);
-        gl.clearBufferfv(gl.COLOR, 0, new Float32Array([0, 0, 0, 0]));
-    }
-    // call before drawing the scene with gl picker shader
-    bindFBO() {
-        const { gl, colorTexture, indexTexture, fbo } = this;
-        gl.activeTexture(gl.TEXTURE1);
-        gl.bindTexture(gl.TEXTURE_2D, indexTexture);
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, colorTexture);
-        { // bind framebuffer
-            gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
-            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.colorTexture, 0);
-            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT1, gl.TEXTURE_2D, this.indexTexture, 0);
-            gl.drawBuffers([gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1]);
-        }
-    }
-    // call after drawing the scene with gl picker shader
-    drawColorTexture() {
-        const { colorTexture } = this;
-        this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
-        this.displayer.draw(colorTexture);
-    }
-    pickXY(x, y, selectionPointFilling = 1, callback = () => { }) {
-        const size = Math.pow(1 + 2 * selectionPointFilling, 2);
-        this._pick(size, x - selectionPointFilling, y - selectionPointFilling, 1 + 2 * selectionPointFilling, 1 + 2 * selectionPointFilling, callback);
-    }
-    pickBbox(left, top, right, bottom, callback) {
-        const size = (right - left) * (bottom - top) * 4;
-        this._pick(size, left, top, right - left, bottom - top, callback);
-    }
-    _pick(size, startX, startY, lengthX, lengthY, callback) {
-        if (this._inProgress)
-            return false;
-        this._inProgress = true;
-        this._initHoldBuffer(size * 4);
-        const { gl, _pbo } = this;
-        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, _pbo);
-        this.bindFBO();
-        gl.readBuffer(gl.COLOR_ATTACHMENT1); // This is the attachment we want to read
-        gl.readPixels(// This will read the pixels to the buffer asynchronously
-        startX, startY, lengthX, lengthY, gl.RED_INTEGER, gl.INT, 0);
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
-        fence(this.gl).then(() => {
-            gl.bindBuffer(gl.PIXEL_PACK_BUFFER, _pbo);
-            // const data = new Int16Array(size);
-            const data = new Int32Array(size);
-            gl.getBufferSubData(gl.PIXEL_PACK_BUFFER, 0, data);
-            gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
-            const result = this._pickFromBuffer(data, size);
-            callback(result);
-            // gl.deleteBuffer(pbo);
-            this._inProgress = false;
-        });
-        return true;
-    }
-    _pickFromBuffer(array, size) {
-        const selectedObjects = new Set();
-        for (let i = 0; i < size; i += 1) {
-            const id = array[i];
-            if (id !== ESCAPE_VALUE) {
-                selectedObjects.add(id);
-            }
-        }
-        return selectedObjects;
-    }
-    _initHoldBuffer(size) {
-        if (this._pbo && this._pboSize >= size) {
-            return;
-        }
-        const { gl } = this;
-        const pbo = gl.createBuffer();
-        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, pbo);
-        gl.bufferData(gl.PIXEL_PACK_BUFFER, size, gl.STREAM_READ);
-        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
-        this._pboSize = size;
-        if (this._pbo !== undefined) {
-            gl.deleteBuffer(this._pbo);
-        }
-        this._pbo = pbo;
-    }
-    free() {
-        const { gl, colorTexture, indexTexture, fbo } = this;
-        gl.deleteTexture(colorTexture);
-        gl.deleteTexture(indexTexture);
-        gl.deleteFramebuffer(fbo);
-        textureOnCanvasProgramCache.release(this.gl);
-    }
-}
-export { PickerDisplayer };
+/**
+ * add implicit texture display program for color
+ * add fence on query return and return id.
+*/
+
+import { textureOnCanvasProgramCache } from "../programs/draw-texture-on-canvas";
+import { fence } from "./fence";
+
+const ESCAPE_VALUE = -1;
+
+
+class PickerDisplayer {
+    constructor(globe) {
+        this.globe = globe;
+        this.gl = globe.gl;
+        const gl = this.gl;
+        this.colorTexture = gl.createTexture(); // bind to color attachment 0
+        this.indexTexture = gl.createTexture(); // bind to color attachment 1
+        this.fbo = gl.createFramebuffer();
+
+        this._pbo = undefined;
+        this._pboSize = 0;
+        this.resize();
+
+        this.displayer = textureOnCanvasProgramCache.get(this.gl);
+
+    }
+
+    resize(width = null, height = null) {
+        if (width === null || height === null) {
+            width = this.globe.api_ScrW();
+            height = this.globe.api_ScrH();
+        }
+        const { gl, colorTexture, indexTexture } = this;
+
+        gl.deleteTexture(colorTexture);
+        gl.deleteTexture(indexTexture);
+        const colorTextureNew = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, colorTextureNew);
+        gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGBA8, width, height);
+        const indexTextureNew = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, indexTextureNew);
+        // gl.texStorage2D(gl.TEXTURE_2D, 1, gl.R16I, width, height);
+        gl.texStorage2D(gl.TEXTURE_2D, 1, gl.R32I, width, height);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+
+        this.colorTexture = colorTextureNew;
+        this.indexTexture = indexTextureNew;
+    }
+
+
+    clearTextures() {
+        const { gl, colorTexture, indexTexture } = this;
+        gl.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, indexTexture);
+        gl.clearBufferiv(gl.COLOR, 1, new Int32Array([-1, -1, -1, -1]));
+
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, colorTexture);
+        gl.clearBufferfv(gl.COLOR, 0, new Float32Array([0, 0, 0, 0]));
+    }
+
+
+    // call before drawing the scene with gl picker shader
+    bindFBO() {
+        const { gl, colorTexture, indexTexture, fbo } = this;
+        gl.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, indexTexture);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, colorTexture);
+        { // bind framebuffer
+            gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.colorTexture, 0);
+            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT1, gl.TEXTURE_2D, this.indexTexture, 0);
+            gl.drawBuffers([gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1]);
+        }
+    }
+
+
+    // call after drawing the scene with gl picker shader
+    drawColorTexture() {
+        const { colorTexture } = this;
+        this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
+        this.displayer.draw(colorTexture);
+    }
+
+
+    pickXY(x, y, selectionPointFilling = 1, callback = () => { }) {
+        const size = Math.pow(1 + 2 * selectionPointFilling, 2);
+        this._pick(size,
+            x - selectionPointFilling,
+            y - selectionPointFilling,
+            1 + 2 * selectionPointFilling,
+            1 + 2 * selectionPointFilling,
+            callback);
+    }
+
+
+
+    pickBbox(left, top, right, bottom, callback) {
+        const size = (right - left) * (bottom - top) * 4;
+        this._pick(size, left, top, right - left, bottom - top, callback);
+    }
+
+
+    _pick(size, startX, startY, lengthX, lengthY, callback) {
+        if (this._inProgress) return false;
+        this._inProgress = true;
+
+        this._initHoldBuffer(size * 4);
+        const { gl, _pbo } = this;
+        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, _pbo);
+        this.bindFBO();
+        gl.readBuffer(gl.COLOR_ATTACHMENT1); // This is the attachment we want to read
+        gl.readPixels(						 // This will read the pixels to the buffer asynchronously
+            startX, startY, lengthX, lengthY,
+            gl.RED_INTEGER, gl.INT,
+            0
+        );
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
+        fence(this.gl).then(() => {
+            gl.bindBuffer(gl.PIXEL_PACK_BUFFER, _pbo);
+            // const data = new Int16Array(size);
+            const data = new Int32Array(size);
+            gl.getBufferSubData(gl.PIXEL_PACK_BUFFER, 0, data);
+            gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
+            const result = this._pickFromBuffer(data, size);
+            callback(result);
+            // gl.deleteBuffer(pbo);
+            this._inProgress = false
+        }
+        );
+        return true;
+    }
+
+
+    _pickFromBuffer(array, size) {
+        const selectedObjects = new Set();
+        for (let i = 0; i < size; i += 1) {
+            const id = array[i];
+            if (id !== ESCAPE_VALUE) {
+                selectedObjects.add(id);
+            }
+        }
+        return selectedObjects;
+    }
+
+
+    _initHoldBuffer(size) {
+        if (this._pbo && this._pboSize >= size) {
+            return
+        }
+        const { gl } = this;
+        const pbo = gl.createBuffer();
+        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, pbo);
+        gl.bufferData(gl.PIXEL_PACK_BUFFER, size, gl.STREAM_READ);
+        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
+        this._pboSize = size;
+        if (this._pbo !== undefined) {
+            gl.deleteBuffer(this._pbo);
+        }
+        this._pbo = pbo;
+    }
+
+
+    free() {
+        const { gl, colorTexture, indexTexture, fbo } = this;
+        gl.deleteTexture(colorTexture);
+        gl.deleteTexture(indexTexture);
+        gl.deleteFramebuffer(fbo);
+        textureOnCanvasProgramCache.release(this.gl);
+    }
+}
+
+
+export { PickerDisplayer };

package/util/programs/draw-texture-on-canvas.js

@@ -1,6 +1,8 @@
-import { createProgram } from "../webglobjectbuilders";
-import { glProgramCache } from "../../programs";
-// import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../../programs/totems";
+import { createProgram } from "../webglobjectbuilders";
+import { glProgramCache } from "../../programs";
+// import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../../programs/totems";
+
+
 const vs = `#version 300 es
 precision highp float;
 
@@ -10,7 +12,8 @@ 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;
 
@@ -22,65 +25,78 @@ 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 };
+}`;
+
+
+
+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 };

package/util/programs/index.js

@@ -1 +1 @@
-export * from "./shapesonglobe";
+export * from "./shapesonglobe";