@pirireis/webglobeplugins 0.17.1 → 1.0.3

package/programs/polygon-on-globe/texture-dem-triangles.js

@@ -1,19 +1,27 @@
 import { createProgram } from "../../util/webglobjectbuilders";
 import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems/camerauniformblock";
-import { cartesian3DToGLPosition, } from "../../util/shaderfunctions/geometrytransformations";
-import { isPointInBBox } from "../../util/shaderfunctions/geometrytransformations";
+import { DemTextureManagerCache, DEM_TEXTURE_BLOCK_STRING } from "../totems/dem-textures-manager";
+import { cartesian3DToGLPosition, mercatorXYToGLPosition, POLE_BY_PI } from "../../util/shaderfunctions/geometrytransformations";
+import { relativeBBoxPositionRadian } from "../../util/shaderfunctions/geometrytransformations";
 import { drawArrays } from "../../util/gl-util/draw-options/methods";
 import { attributeLoader } from "../../util/gl-util/buffer/attribute-loader";
 import { WORLD_RADIUS_3D } from "../../Math/constants";
 import { UniformBlockManager } from "../../util/gl-util/uniform-block/manager";
+// const ESCAPE_VALUE = 0.123456;
 const uniformBindingPoints = {
     camera: 0,
     style: 1,
+    dem: 2,
+    selection: 3,
 };
+export const IndexAttributeEscapeValue = -1;
 const styleBlockManager = new UniformBlockManager('Style', [
-    { name: "u_color", type: "vec4", value: new Float32Array([0.0, 0.0, 0.0, 0.0]) },
-    { name: "u_pointSize", type: "float", value: new Float32Array([1.0]) },
-    { name: "u_opacity", type: "float", value: new Float32Array([1.0]) },
+    { name: "defaultColor", type: "vec4", value: new Float32Array([0.0, 0.0, 0.0, 0.0]) },
+    { name: "pickedColor", type: "vec4", value: new Float32Array([0, 0, 0, 0]) },
+    { name: "u_pointSize", type: "float", value: new Float32Array([6.0]) },
+    { name: "opacity", type: "float", value: new Float32Array([1.0]) },
+    { name: "private_isPickedOn", type: "float", value: new Float32Array([0]) },
+    { name: "private_pickedIndex", type: "float", value: new Float32Array([0]) },
 ], uniformBindingPoints.style);
 const vertexShaderSource = `#version 300 es
 #pragma vscode_glsllint_stage : vert
@@ -22,84 +30,106 @@ precision highp float;
 precision highp sampler2DArray;
 
 ${CameraUniformBlockString}
-
+${POLE_BY_PI}
 ${cartesian3DToGLPosition}
+${mercatorXYToGLPosition}
+
+${DEM_TEXTURE_BLOCK_STRING}
+
 in vec3 a_position;
 in vec2 a_xy;
-uniform sampler2DArray u_demTexture; // <-- changed from array to single
-uniform vec4 u_demTextureBBOX[6];
-uniform vec2 u_textureDataCoverRatio[6];
-uniform int u_breakLoopIndex;
+in float a_index;
+in vec4 a_color;
 
 ${styleBlockManager.glslCode()}
-// Todo: light direction. 
+
 out vec4 v_color;
+flat out int v_index;
 
+${relativeBBoxPositionRadian}
 
-${isPointInBBox}
 
 void main() {
-
-    float elevation = ${WORLD_RADIUS_3D}; // default elevation at sea level
+    float elevation = ${WORLD_RADIUS_3D};
     float altitude = 0.0;
-    v_color = vec4(1.0, 1.0, 1.0, 1.0); // default color white
+    v_color = (a_color.a != -1.0) ? a_color : defaultColor;
+
+    if (is3D == true) {
+        for (int i = 0; i < 6; i++) {
+            if( i == u_breakLoopIndex - 1 ) {
+                break;
+            }
+            vec2 uv = relativeBBoxPositionRadian(a_xy, u_demTextureBBOX[i]);
+            if (uv.x != -1.0) {
+                uv.y = 1.0 - uv.y; // flip y coordinate
+                // rescale and transform uv to fit in the texture data cover bbox
+                uv *= u_textureDataCoverRatio[i].xy;
 
-    for (int i = 0; i < 6; i++) {
-        if (isPointInBBox(a_xy, u_demTextureBBOX[i])) {
-            vec2 uv = (a_xy - u_demTextureBBOX[i].xy) / (u_demTextureBBOX[i].zw - u_demTextureBBOX[i].xy); 
-            // uv.y = 1.0 - uv.y; // flip y coordinate
-            // rescale and transform uv to fit in the texture data cover bbox
-            uv *= u_textureDataCoverRatio[i];
-            altitude = texture(u_demTexture, vec3(uv, float(i))).r;
-            if (altitude != 0.0) {
+                //
+                altitude = texture(u_demTexture, vec3(uv, float(i))).r;
                 break;
             }
         }
-    }
-    if (u_color.a > 0.0) {
-        v_color = u_color;
+        vec3 position = a_position * (elevation + altitude);
+        gl_Position = cartesian3DToGLPosition(position);
     } else {
-        if ( altitude > 0.00001 ) {
-            v_color = mix(vec4(1.0, 1.0, 1.0, 1.0), vec4(1.0, 0.2, 0.2, 1.0), altitude / 2.0); // color from white to red based on altitude
-        } else {
-            // white 
-            v_color = vec4(1.0, 1.0, 1.0, 0.5);
+        vec2 mercatorXY = a_xy * POLE_BY_PI;
+        gl_Position = mercatorXYToGLPosition(mercatorXY);
+    }
+
+    if (private_isPickedOn ==  1.0){
+        if (a_index == private_pickedIndex) {
+            v_color = pickedColor;
         }
+        v_index = int(a_index + 0.5); // +0.5 to avoid rounding issues
     }
-    v_color.a *= u_opacity; 
-    vec3 position = a_position * (elevation + altitude * 2.0);
-    gl_Position = cartesian3DToGLPosition(position);
-    gl_PointSize = 6.0; //u_pointSize;
+
+    
+    v_color.a *= opacity; 
+    gl_PointSize = u_pointSize;
 }
 `;
 const fragmentShaderSource = `#version 300 es
 #pragma vscode_glsllint_stage : frag
 
+
+
 precision highp float;
-in vec4 v_color;
-out vec4 outColor;
+precision highp int;
+
+
+in vec4 v_color; // color from vertex shader
+flat in int v_index; // index from vertex shader
+layout(location = 0) out vec4 outColor;
+layout(location = 1) out int outIndex;
+
 void main() {
     outColor = v_color;
+    outIndex = v_index;
 }
 `;
 function resCalculation(sourceResolution, mergeCount) {
     return sourceResolution + (mergeCount - 1) * (sourceResolution - 1);
 }
-const RESOLUTION = resCalculation(5, 12); // 5 is tile dimension length, 12 is merge count
+const RESOLUTION = resCalculation(5, 20); // 5 is tile dimension length, 12 is merge count
 export class TextureDemTriangles {
     globe;
     gl;
     program;
     // Later an injection will handle demTextures and demTextureBBOX
-    texture;
+    // texture: WebGLTexture;
     // demTextures: WebGLTexture[] = [];
     // demTextureBBOX: Float32Array = new Float32Array(6 * 4); // 6 bounding boxes
     cameraUniformBlock;
+    demTextureManager;
+    _defaultSelectionUBO;
     _publishedUBOs = [];
     locations = {
         attributes: {
             a_position: -1,
             a_xy: -1,
+            a_index: -1,
+            a_color: -1,
         },
         uniforms: {
             u_demTexture: -1,
@@ -115,9 +145,12 @@ export class TextureDemTriangles {
         this.program = createProgram(this.gl, vertexShaderSource, fragmentShaderSource);
         this.cameraUniformBlock = CameraUniformBlockTotemCache.get(this.globe);
         this.cameraUniformBlock.assignBindingPoint(this.program, uniformBindingPoints.camera);
+        styleBlockManager.assignBindingPoint(this.gl, this.program);
         // get attribute locations
         this.locations.attributes.a_position = this.gl.getAttribLocation(this.program, 'a_position');
         this.locations.attributes.a_xy = this.gl.getAttribLocation(this.program, 'a_xy');
+        this.locations.attributes.a_index = this.gl.getAttribLocation(this.program, 'a_index');
+        this.locations.attributes.a_color = this.gl.getAttribLocation(this.program, 'a_color');
         // get uniform locations
         this.locations.uniforms.u_demTexture = this.gl.getUniformLocation(this.program, 'u_demTexture');
         this.locations.uniforms.u_demTextureBBOX = this.gl.getUniformLocation(this.program, 'u_demTextureBBOX');
@@ -125,75 +158,24 @@ export class TextureDemTriangles {
         this.locations.uniforms.u_breakLoopIndex = this.gl.getUniformLocation(this.program, 'u_breakLoopIndex');
         this.locations.uniforms.u_style = this.gl.getUniformBlockIndex(this.program, 'Style');
         this.gl.uniformBlockBinding(this.program, this.locations.uniforms.u_style, uniformBindingPoints.style);
-        // create 3d texture
-        const texture = this.gl.createTexture();
-        this.gl.bindTexture(this.gl.TEXTURE_2D_ARRAY, texture);
-        // Calculate correct size: tileDimensionLength + (mergeCount - 1) * (tileDimensionLength - 1)
-        // For tileDimensionLength=5, mergeCount=8: 5 + 7*4 = RESOLUTION
-        this.gl.texStorage3D(this.gl.TEXTURE_2D_ARRAY, 1, this.gl.R32F, RESOLUTION, RESOLUTION, 6);
-        // set texture parameters
-        const ext = this.gl.getExtension('OES_texture_float_linear');
-        console.log('OES_texture_float_linear extension:', ext);
-        this.gl.texParameteri(this.gl.TEXTURE_2D_ARRAY, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
-        this.gl.texParameteri(this.gl.TEXTURE_2D_ARRAY, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
-        this.gl.texParameteri(this.gl.TEXTURE_2D_ARRAY, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
-        this.gl.texParameteri(this.gl.TEXTURE_2D_ARRAY, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
-        this.gl.bindTexture(this.gl.TEXTURE_2D_ARRAY, null);
-        this.texture = texture;
+        this.demTextureManager = DemTextureManagerCache.get(this.globe);
+        this.demTextureManager.assignBindingPoint(this.program, uniformBindingPoints.dem);
     }
-    createVAO(pos3dBufferInfo, longLatBufferInfo) {
+    createVAO(pos3dBufferInfo, longLatBufferInfo, indexBufferInfo, variativeColorBuffer) {
         const vao = this.gl.createVertexArray();
         this.gl.bindVertexArray(vao);
         attributeLoader(this.gl, pos3dBufferInfo, this.locations.attributes.a_position, 3);
         attributeLoader(this.gl, longLatBufferInfo, this.locations.attributes.a_xy, 2);
+        attributeLoader(this.gl, indexBufferInfo, this.locations.attributes.a_index, 1, {
+            escapeValues: [IndexAttributeEscapeValue],
+            normalized: false,
+        });
+        attributeLoader(this.gl, variativeColorBuffer, this.locations.attributes.a_color, 4, {
+            escapeValues: [IndexAttributeEscapeValue, IndexAttributeEscapeValue, IndexAttributeEscapeValue, IndexAttributeEscapeValue]
+        });
         this.gl.bindVertexArray(null);
         return vao;
     }
-    setDemTextures(demTexturesData, demTextureBBOX, coverRatio) {
-        // Add validation for maximum layers
-        const maxLayers = this.gl.getParameter(this.gl.MAX_ARRAY_TEXTURE_LAYERS);
-        if (demTexturesData.length > Math.min(maxLayers, 6)) {
-            console.error(`Too many DEM textures: ${demTexturesData.length}, max supported: ${Math.min(maxLayers, 6)}`);
-            return;
-        }
-        // bind textures to texture units
-        const gl = this.gl;
-        gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.texture);
-        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
-        // turn off premultiply alpha
-        gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
-        // bind and upload each texture to the 3D texture array
-        for (let i = 0; i < demTexturesData.length; i++) {
-            const data = demTexturesData[i];
-            if (data.length === RESOLUTION * RESOLUTION) { // <-- FIXED
-                gl.texSubImage3D(gl.TEXTURE_2D_ARRAY, 0, 0, 0, i, RESOLUTION, RESOLUTION, 1, gl.RED, gl.FLOAT, new Float32Array(data));
-            }
-            else {
-                console.warn(`DEM texture ${i} has incorrect size: ${data.length}, expected: ${RESOLUTION * RESOLUTION}`);
-            }
-        }
-        // set uniform for texture units
-        const bboxVec4Array = new Float32Array(6 * 4);
-        for (let i = 0; i < demTextureBBOX.length; i++) {
-            const bbox = demTextureBBOX[i];
-            bboxVec4Array[i * 4 + 0] = bbox.ll[0];
-            bboxVec4Array[i * 4 + 1] = bbox.ll[1];
-            bboxVec4Array[i * 4 + 2] = bbox.ur[0];
-            bboxVec4Array[i * 4 + 3] = bbox.ur[1];
-        }
-        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
-        gl.useProgram(this.program);
-        gl.uniform4fv(this.locations.uniforms.u_demTextureBBOX, bboxVec4Array);
-        if (coverRatio) {
-            gl.uniform2fv(this.locations.uniforms.u_textureDataCoverRatio, new Float32Array(coverRatio.flatMap(ratio => [ratio.x, ratio.y])));
-        }
-        else {
-            gl.uniform2fv(this.locations.uniforms.u_textureDataCoverRatio, new Float32Array(12).fill(1.0));
-        }
-        gl.bindTexture(gl.TEXTURE_2D_ARRAY, null);
-        gl.uniform1i(this.locations.uniforms.u_breakLoopIndex, demTexturesData.length);
-        gl.useProgram(currentProgram);
-    }
     createUBO(bufferReadType = "STATIC_DRAW") {
         const ubo = styleBlockManager.createUBO(this.gl, bufferReadType);
         this._publishedUBOs.push(ubo);
@@ -201,31 +183,27 @@ export class TextureDemTriangles {
     }
     free() {
         this.gl.deleteProgram(this.program);
-        this.gl.deleteTexture(this.texture);
+        // this.gl.deleteTexture(this.texture);
         this._publishedUBOs.forEach(ubo => ubo.free());
         this._publishedUBOs = [];
+        DemTextureManagerCache.release(this.globe);
         CameraUniformBlockTotemCache.release(this.globe);
     }
     draw(vao, drawOptions, ubo) {
         const gl = this.gl;
         gl.useProgram(this.program);
         this.cameraUniformBlock.bind(uniformBindingPoints.camera);
-        // TURN OFF flip y for texture
-        // gl.disable(gl.DEPTH_TEST);
-        // gl.depthMask(false);
-        // gl.depthRange(0.0, 0.01);  // Use near 1% of depth range
-        // Step 3: Optionally: Set depth func to ALWAYS (to ignore previous depth)
-        //    This ensures your new geometry passes depth test regardless of prior depth values
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.texture);
-        gl.uniform1i(this.locations.uniforms.u_demTexture, 0); // texture unit 0
-        // bind VAO and draw
+        this.demTextureManager.bindData(0, uniformBindingPoints.dem);
         gl.bindVertexArray(vao);
-        // bind UBO for style
         ubo.bind();
-        drawOnTopBegin(gl);
-        drawArrays(gl, gl.POINTS, drawOptions);
-        drawOnTopEnd(gl);
+        if (this.globe.api_GetCurrentLODWithDecimal() < 14.5) {
+            drawOnTopBegin(gl);
+        }
+        drawArrays(gl, gl.TRIANGLES, drawOptions);
+        if (this.globe.api_GetCurrentLODWithDecimal() < 14.5) {
+            drawOnTopEnd(gl);
+        }
+        this.demTextureManager.unbindData(0, uniformBindingPoints.dem);
         gl.bindVertexArray(null);
         gl.bindTexture(gl.TEXTURE_2D_ARRAY, null);
         gl.useProgram(null);
@@ -235,7 +213,7 @@ export class TextureDemTriangles {
     _getUniformBlockOffset(name) {
         // hardcoded offsets based on std140 layout rules
         const offsets = {
-            'u_color': 0,
+            'defaultColor': 0,
         };
         const result = offsets[name];
         if (result === undefined) {

package/programs/totems/camera-totem-attactment-interface.js

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

package/programs/totems/camerauniformblock.js

@@ -4,19 +4,21 @@ import { RADIAN } from "../../Math/methods";
 import { GlobeChangeObserver } from "./globe-changes";
 export const CameraUniformBlockString = `
 layout(std140) uniform CameraUniformBlock {
-    mat4 view; // 64 bytes           0
-    mat4 projection; // 64 bytes     64
-    vec3 translate; // 12 bytes      128
-    bool is3D; // 4 bytes            140
-    vec2 mapWH; // 8 bytes           144
-    vec2 screenWH; //  8 bytes       152
-    float z_level; // 4 bytes        160 | 164
-    float world_distance; // 4 bytes 164
-    float world_tilt; // 4 bytes     168
-    float world_north_angle; // 4 bytes 172
-    vec2 world_center_radian; // 8 bytes    176 | 184
-}; // 14 lines
+    mat4 view; // 64 bytes                0
+    mat4 projection; // 64 bytes          64
+    vec3 translate; // 12 bytes           128
+    bool is3D; // 4 bytes                 140
+    vec2 mapWH; // 8 bytes                144
+    vec2 screenWH; //  8 bytes             152
+    float z_level; // 4 bytes                160 
+    float world_distance; // 4 bytes         164
+    float world_tilt; // 4 bytes             168
+    float world_north_angle; // 4 bytes      172
+    vec2 world_center_radian; // 8 bytes     176
+    float NaN; // padding to 16 bytes         184
+};  // 188 bytes total
 `;
+// TODO: Remove NaN
 const Radian = Math.PI / 180.0;
 const _0vec3 = [0, 0, 0];
 export class CameraUniformBlockTotem {
@@ -32,11 +34,13 @@ export class CameraUniformBlockTotem {
     // _frustumPlanes: any; // Uncomment and type if used
     _aproximatedLOD = -1;
     _globeChangeObserver = null;
+    attachments = new Set();
     constructor() {
         this.id = "CameraUniformBlockTotem";
-        this.description =
-            `Sets a uniform block and provides buffer for it. The following is the glsl uniform block:` +
-                CameraUniformBlockString;
+        this.description = `Provides and updates camera related uniform block
+Should be on top of DrawOrder.
+Attachments can register to process right after camera data is updated without creating other plugins listed on DrawOrder
+The following is the glsl uniform block: ${CameraUniformBlockString}`;
         this.gl = null;
         this.globe = null;
         this.ubo = null;
@@ -65,6 +69,8 @@ export class CameraUniformBlockTotem {
         // 184 bytes in reality. Overflow on linux for some reason. So, 200 bytes.
         gl.bufferData(gl.UNIFORM_BUFFER, 200, gl.STREAM_DRAW);
         gl.bindBufferBase(gl.UNIFORM_BUFFER, 0, ubo);
+        // assign NaN to padding float
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 184, new Float32Array([NaN]));
         gl.bindBuffer(gl.UNIFORM_BUFFER, null);
         return ubo;
     }
@@ -127,6 +133,9 @@ export class CameraUniformBlockTotem {
         this._isMovedParams.lastLod = currentLOD;
         this.__setCameraVectors();
         // this._calculateAproximatedLOD();
+        for (const attachment of this.attachments) {
+            attachment.update();
+        }
     }
     __setCameraVectors() {
         if (!this.globe) {
@@ -192,17 +201,19 @@ export class CameraUniformBlockTotem {
     getGlobeChanges() {
         return this._globeChangeObserver?.getChanges();
     }
-    // getApproximatedLOD(): number {
-    //     return this._aproximatedLOD;
-    // }
-    // _calculateAproximatedLOD(){
-    //     const globe = this.globe!;
-    //     this._aproximatedLOD = approximatedZoomLevel(globe)
-    // }
+    registerAttachment(attachment) {
+        this.attachments.add(attachment);
+    }
+    unregisterAttachment(attachment) {
+        this.attachments.delete(attachment);
+    }
     free() {
         const gl = this.gl;
         const ubo = this.ubo;
         gl.deleteBuffer(ubo);
+        if (this.attachments.size > 0) {
+            throw new Error("There are still attachments registered to CameraUniformBlockTotem during free()");
+        }
     }
     readBuffer() {
         const gl = this.gl;