@pirireis/webglobeplugins 0.17.1 → 1.0.3

package/util/gl-util/uniform-block/manager.js

@@ -10,7 +10,9 @@ const typeSizes = {
     'ivec2': 8,
     'ivec3': 16,
     'ivec4': 16,
-    'bool': 4
+    'uvec4': 16,
+    'uint': 4,
+    'bool': 4,
 };
 const typeAlignments = {
     'float': 4,
@@ -24,7 +26,9 @@ const typeAlignments = {
     'ivec2': 8,
     'ivec3': 16,
     'ivec4': 16,
-    'bool': 4
+    'uvec4': 16,
+    'uint': 4,
+    'bool': 4,
 };
 const typeArrayConstructors = {
     'float': Float32Array,
@@ -38,8 +42,16 @@ const typeArrayConstructors = {
     'ivec2': Int32Array,
     'ivec3': Int32Array,
     'ivec4': Int32Array,
-    'bool': Float32Array
+    'bool': Float32Array,
+    'uint': Uint32Array,
+    'uvec2': Uint32Array,
+    'uvec3': Uint32Array,
+    'uvec4': Uint32Array,
 };
+// TODO: the input types should be all same for a single block.
+// no need to ask for typed array constructor in the constructor
+// eacher remove it and raise error when different types are used in the same block
+// or implicitly manage multiple blocks with different types
 export class UniformBlockManager {
     /**
      *
@@ -104,20 +116,19 @@ export class UniformBlockManager {
         if (offset === undefined) {
             throw new Error(`Uniform block member ${key} not found in offset map.\nPossible members: ${Array.from(this.offsetMap.keys()).join(", ")}`);
         }
-        // @ts-ignore
-        const type = this.blockMembers.find(member => member.name === key).type;
+        const memberType = this.blockMembers.find(member => member.name === key).type;
         let data;
         if (Array.isArray(value)) {
-            data = new typeArrayConstructors[type](value);
+            data = new typeArrayConstructors[memberType](value);
         }
         else if (typeof value === 'number') {
-            data = new typeArrayConstructors[type]([value]);
+            data = new typeArrayConstructors[memberType]([value]);
         }
         else if (value instanceof ArrayBuffer) {
-            data = new typeArrayConstructors[type](value);
+            data = new typeArrayConstructors[memberType](value);
         }
         else if (ArrayBuffer.isView(value) && !(value instanceof DataView)) {
-            data = (typeof value === 'number') ? new typeArrayConstructors[type]([value]) : new typeArrayConstructors[type](value);
+            data = (typeof value === 'number') ? new typeArrayConstructors[memberType]([value]) : new typeArrayConstructors[memberType](value);
         }
         else {
             throw new Error(`Unsupported value type for ${key}: ${typeof value}.\n Supported types are: number, Array, ArrayBuffer, TypedArray.`);
@@ -132,7 +143,6 @@ export class UniformBlockManager {
             if (offset === undefined) {
                 throw new Error(`Uniform block member ${name} not found in offset map.\nPossible members: ${Array.from(this.offsetMap.keys()).join(", ")}`);
             }
-            // @ts-ignore
             const type = this.blockMembers.find(member => member.name === name).type;
             let data;
             if (Array.isArray(value)) {

package/util/helper-methods.js

@@ -0,0 +1,8 @@
+export function hashColorTo4IntArray(pickedColor) {
+    const pickedHex = pickedColor.replace('#', '');
+    const pickedR = parseInt(pickedHex.substring(0, 2), 16) / 255;
+    const pickedG = parseInt(pickedHex.substring(2, 4), 16) / 255;
+    const pickedB = parseInt(pickedHex.substring(4, 6), 16) / 255;
+    const pickedA = parseInt(pickedHex.substring(6, 8) || 'FF', 16) / 255;
+    return [pickedR, pickedG, pickedB, pickedA];
+}

package/util/picking/fence.js

@@ -4,6 +4,10 @@ const fence = (gl) => new Promise((resolve, reject) => {
     // 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);
+    if (!sync) {
+        reject(new Error('Failed to create fence sync object.'));
+        return;
+    }
     gl.flush();
     // There are TWO possible ways to check on the status of a WebGLSync object.
     // 1. This will check it using clientWaitSync()
@@ -26,8 +30,6 @@ const fence = (gl) => new Promise((resolve, reject) => {
     // 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();

package/util/picking/picker-displayer.js

@@ -6,15 +6,40 @@ import { textureOnCanvasProgramCache } from "../programs/draw-texture-on-canvas"
 import { fence } from "./fence";
 const ESCAPE_VALUE = -1;
 class PickerDisplayer {
-    constructor(globe) {
+    globe;
+    gl;
+    colorTexture;
+    indexTexture;
+    fbo;
+    _pbo;
+    _pboSize;
+    displayer;
+    _inProgress;
+    _indexType; // R32I for Integer, R32F for Float
+    _typedArrayConstructor;
+    constructor(globe, indexType = "R32I") {
         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();
+        if (indexType === "R32F" && this.gl.getExtension("EXT_color_buffer_float") === null) {
+            throw new Error("EXT_color_buffer_float extension is required for R32F index type.");
+        }
+        this._indexType = indexType;
+        if (indexType === "R32I") {
+            this._typedArrayConstructor = Int32Array;
+        }
+        else if (indexType === "R32F") {
+            this._typedArrayConstructor = Float32Array;
+        }
+        else {
+            throw new Error("Invalid index type. Must be 'R32I' or 'R32F'.");
+        }
         this._pbo = undefined;
         this._pboSize = 0;
+        this._inProgress = false;
         this.resize();
         this.displayer = textureOnCanvasProgramCache.get(this.gl);
     }
@@ -27,12 +52,13 @@ class PickerDisplayer {
         gl.deleteTexture(colorTexture);
         gl.deleteTexture(indexTexture);
         const colorTextureNew = gl.createTexture();
+        gl.activeTexture(gl.TEXTURE0);
         gl.bindTexture(gl.TEXTURE_2D, colorTextureNew);
         gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGBA8, width, height);
         const indexTextureNew = gl.createTexture();
+        gl.activeTexture(gl.TEXTURE1);
         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.texStorage2D(gl.TEXTURE_2D, 1, gl[this._indexType], width, height); //  gl.R32I or gl.R32F
         gl.bindTexture(gl.TEXTURE_2D, null);
         this.colorTexture = colorTextureNew;
         this.indexTexture = indexTextureNew;
@@ -41,7 +67,12 @@ class PickerDisplayer {
         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]));
+        if (this._indexType === "R32I") {
+            gl.clearBufferiv(gl.COLOR, 1, new Int32Array([-1, -1, -1, -1]));
+        }
+        else {
+            gl.clearBufferfv(gl.COLOR, 1, new Float32Array([-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]));
@@ -57,20 +88,26 @@ class PickerDisplayer {
         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]);
+        const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
+        if (status !== gl.FRAMEBUFFER_COMPLETE) {
+            throw new Error(`Framebuffer is not complete: ${status.toString(16)}`);
+        }
     }
     // call after drawing the scene with gl picker shader
     drawColorTexture() {
         const { gl, colorTexture } = this;
         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.disable(gl.DEPTH_TEST);
         this.displayer.draw(colorTexture);
+        gl.enable(gl.DEPTH_TEST);
     }
     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);
+        return 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);
+        const size = (right - left) * (bottom - top);
+        return this._pick(size, left, top, right - left, bottom - top, callback);
     }
     _pick(size, startX, startY, lengthX, lengthY, callback) {
         if (this._inProgress)
@@ -81,14 +118,16 @@ class PickerDisplayer {
         gl.bindBuffer(gl.PIXEL_PACK_BUFFER, _pbo);
         this.bindFBO();
         gl.readBuffer(gl.COLOR_ATTACHMENT1); // This is the attachment we want to read
+        const format = this._indexType === "R32I" ? gl.RED_INTEGER : gl.RED;
+        const type = this._indexType === "R32I" ? gl.INT : gl.FLOAT;
         gl.readPixels(// This will read the pixels to the buffer asynchronously
-        startX, startY, lengthX, lengthY, gl.RED_INTEGER, gl.INT, 0);
+        startX, startY, lengthX, lengthY, format, type, 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);
+            const data = new this._typedArrayConstructor(size); // Int32Array or Float32Array
             gl.getBufferSubData(gl.PIXEL_PACK_BUFFER, 0, data);
             gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
             const result = this._pickFromBuffer(data, size);
@@ -128,6 +167,9 @@ class PickerDisplayer {
         gl.deleteTexture(colorTexture);
         gl.deleteTexture(indexTexture);
         gl.deleteFramebuffer(fbo);
+        if (this._pbo) {
+            gl.deleteBuffer(this._pbo);
+        }
         textureOnCanvasProgramCache.release(this.gl);
     }
 }

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

@@ -15,7 +15,7 @@ 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;
 
@@ -24,6 +24,13 @@ void main() {
     fragColor.a *= u_opacity;
 }`;
 class TextureOnCanvasProgram {
+    gl;
+    vao;
+    buffer;
+    program;
+    uniforms;
+    _lastOpacity;
+    _isFreed = false;
     constructor(gl) {
         this.gl = gl;
         this.vao = this.gl.createVertexArray();
@@ -41,20 +48,16 @@ class TextureOnCanvasProgram {
         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);
-        }
+        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, { opacity = 1.0 } = {}) {
         const { gl, program, uniforms, vao } = this;

package/util/shaderfunctions/geometrytransformations.js

@@ -189,6 +189,34 @@ float circleCircumferenceInterPolationOf2PointsRadian(vec2 center, vec2 target,
     return angle;
 }
 `;
+export const slopeFromTexture = R + PI + `
+float slopeFromTexture(highp sampler2DArray heightMap, vec3 uv, vec2 texelSize) {
+    float hL = texture(heightMap, uv - vec3(texelSize.x, 0.0, 0.0)).r;
+    float hR = texture(heightMap, uv + vec3(texelSize.x, 0.0, 0.0)).r;
+    float hD = texture(heightMap, uv - vec3(0.0, texelSize.y, 0.0)).r;
+    float hU = texture(heightMap, uv + vec3(0.0, texelSize.y, 0.0)).r;
+    float dX = (hR - hL) / (2.0 * texelSize.x);
+    float dY = (hU - hD) / (2.0 * texelSize.y);
+    float slope = sqrt(dX * dX + dY * dY);
+    return slope;
+}
+`;
+export const normalFromTexture = `
+vec3 normalFromTexture(highp sampler2DArray heightMap, vec3 uv, vec2 texelSize, float strength) {
+    float hL = texture(heightMap, uv - vec3(texelSize.x, 0.0, 0.0)).r;
+    float hR = texture(heightMap, uv + vec3(texelSize.x, 0.0, 0.0)).r;
+    float hD = texture(heightMap, uv - vec3(0.0, texelSize.y, 0.0)).r;
+    float hU = texture(heightMap, uv + vec3(0.0, texelSize.y, 0.0)).r;
+    
+    // Calculate gradient
+    // Strength factor controls how "bumpy" the terrain looks
+    float dX = (hR - hL) * strength;
+    float dY = (hU - hD) * strength;
+    
+    // Return normalized surface normal (-dX, -dY, 1.0)
+    return normalize(vec3(-dX, -dY, 1.0));
+}
+`;
 export const realDistanceOnSphereR1 = `
 float realDistanceOnSphereR1(vec2 longLat1, vec2 longLat2) {
     float dLat = longLat2.y - longLat1.y;
@@ -200,7 +228,45 @@ float realDistanceOnSphereR1(vec2 longLat1, vec2 longLat2) {
 `;
 export const isPointInBBox = `
 bool isPointInBBox(vec2 point, vec4 bbox) {
-    return point.x >= bbox.x && point.x <= bbox.z && point.y >= bbox.y && point.y <= bbox.w;
+    return point.x + ${EPSILON} >= bbox.x && point.x <= bbox.z + ${EPSILON}&& point.y + ${EPSILON} >= bbox.y && point.y <= bbox.w + ${EPSILON};
+}
+`;
+export const relativeBBoxPositionRadian = `
+${PI}
+${isPointInBBox}
+vec2 relativeBBoxPositionRadian(vec2 point, vec4 bbox) {
+    if ( bbox.z > bbox.x) {
+        if ( isPointInBBox(point, bbox) ) {
+            float x_ratio = (point.x - bbox.x) / (bbox.z - bbox.x);
+            float y_ratio = (point.y - bbox.y) / (bbox.w - bbox.y);
+            return vec2(x_ratio, y_ratio);
+        }
+        return vec2(-1.0, -1.0);
+    }
+    else {
+        // BBox crosses the antimeridian
+        if ( isPointInBBox(point, vec4(bbox.x, bbox.y, PI , bbox.w) ) ) {
+            float x_ratio = (point.x - bbox.x) / (PI - bbox.x);
+            float y_ratio = (point.y - bbox.y) / (bbox.w - bbox.y);
+            return vec2(x_ratio, y_ratio);
+        }
+        else if ( isPointInBBox(point, vec4(-PI, bbox.y, bbox.z, bbox.w) ) ) {
+            float x_ratio = (point.x + PI) / (bbox.z + PI);
+            float y_ratio = (point.y - bbox.y) / (bbox.w - bbox.y);
+            return vec2(x_ratio, y_ratio);
+        }
+    }
+    return vec2(-1.0, -1.0);
+}
+`;
+export const isPointInBBox2 = `
+bool isPointInBBox(vec2 point, vec4 bbox) {
+    float horizontal_epsilon = (bbox.z - bbox.x) * 0.05;
+    float vertical_epsilon = (bbox.w - bbox.y) * 0.05;
+    return point.x + horizontal_epsilon >= bbox.x &&
+     point.x <= bbox.z + horizontal_epsilon &&
+      point.y + vertical_epsilon >= bbox.y &&
+       point.y <= bbox.w + vertical_epsilon;
 }
 `;
 const pointsOnSphereBetween = `