@pirireis/webglobeplugins 0.16.4 → 0.16.7

package/programs/polygon-on-globe/texture-dem-triangle-test-plugin.js

@@ -6,16 +6,16 @@ const TEST_ITEM_COUNT = 1000000;
 function createTestLongLatArray() {
     const arr = new Float32Array(TEST_ITEM_COUNT * 2);
     for (let i = 0; i < TEST_ITEM_COUNT; i++) {
-        arr[i * 2 + 0] = Math.random() * 360 - 180; // longitude
-        arr[i * 2 + 1] = Math.random() * 180 - 90; // latitude
+        arr[i * 2 + 0] = (Math.random() - 0.5) * Math.PI * 2; // longitude
+        arr[i * 2 + 1] = (Math.random() - 0.5) * Math.PI; // latitude
     }
     return arr;
 }
 function createTestPos3dArray(longLatArray) {
     const arr = new Float32Array(TEST_ITEM_COUNT * 3);
     for (let i = 0; i < TEST_ITEM_COUNT; i++) {
-        const long = longLatArray[i * 2 + 0] / 180 * Math.PI;
-        const lat = longLatArray[i * 2 + 1] / 180 * Math.PI;
+        const long = longLatArray[i * 2 + 0];
+        const lat = longLatArray[i * 2 + 1];
         // Convert long/lat to 3D position (simplified)
         arr[i * 3 + 0] = Math.cos(lat) * Math.cos(long);
         arr[i * 3 + 1] = Math.cos(lat) * Math.sin(long);
@@ -26,10 +26,10 @@ function createTestPos3dArray(longLatArray) {
 const createTestBBOXES = () => {
     const bboxes = [];
     for (let i = 0; i < 6; i++) {
-        const north = Math.random() * 90; // random latitude
-        const west = Math.random() * -180; // random longitude
-        const south = north - 30; // random latitude
-        const east = west + 30; // random longitude
+        const north = Math.random(); // random latitude
+        const west = Math.random() * -1; // random longitude
+        const south = north - Math.PI / 6; // random latitude
+        const east = west + Math.PI / 6; // random longitude
         const nw = [west, north]; // random northWest
         const se = [east, south]; // random southEast
         bboxes.push({ northWest: nw, southEast: se });
@@ -48,12 +48,31 @@ const createTestDemTextures = () => {
     }
     return textures;
 };
+export function createBuffersAndFill(gl, vec3s, longLats, indices) {
+    const positionBuffer = gl.createBuffer();
+    const longLatBuffer = gl.createBuffer();
+    const indexBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vec3s), gl.STATIC_DRAW);
+    gl.bindBuffer(gl.ARRAY_BUFFER, longLatBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(longLats), gl.STATIC_DRAW);
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
+    return {
+        buffers: {
+            positionBuffer,
+            longLatBuffer,
+            indexBuffer
+        }
+    };
+}
 export class TextureDemTrianglesTestPlugin {
     globe = null;
     textureDemTriangles = null;
     vao = null;
     drawOptions = null;
     bufferInfo = null;
+    ubo = null;
     id;
     constructor(id) {
         this.id = id;
@@ -66,6 +85,8 @@ export class TextureDemTrianglesTestPlugin {
         const demTextureBBOX = createTestBBOXES();
         this.textureDemTriangles.setDemTextures(demTextures, demTextureBBOX);
         // 
+        this.ubo = this.textureDemTriangles.createUBO();
+        this.ubo.updateSingle("u_color", new Float32Array([1.0, 0.0, 0.0, 0.0]));
         const bufferInfo = {
             pos3dBufferInfo: {
                 buffer: globe.gl.createBuffer(),
@@ -90,8 +111,8 @@ export class TextureDemTrianglesTestPlugin {
         this.bufferInfo = bufferInfo;
     }
     draw3D() {
-        if (!this.globe || !this.textureDemTriangles || !this.vao || !this.bufferInfo)
+        if (!this.globe || !this.textureDemTriangles || !this.vao || !this.bufferInfo || !this.ubo)
             return;
-        this.textureDemTriangles.draw(this.vao, this.bufferInfo.drawOptions);
+        this.textureDemTriangles.draw(this.vao, this.bufferInfo.drawOptions, this.ubo);
     }
 }

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

@@ -1,12 +1,20 @@
 import { createProgram } from "../../util/webglobjectbuilders";
 import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems/camerauniformblock";
 import { cartesian3DToGLPosition } from "../../util/shaderfunctions/geometrytransformations";
+import { isPointInBBox } 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 uniformBindingPoints = {
     camera: 0,
+    style: 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]) },
+], uniformBindingPoints.style);
 const vertexShaderSource = `#version 300 es
 #pragma vscode_glsllint_stage : vert
 
@@ -22,6 +30,8 @@ uniform sampler2DArray u_demTexture; // <-- changed from array to single
 uniform vec4 u_demTextureBBOX[6];
 
 
+${styleBlockManager.glslCode()}
+
 
 // TODO: light directioni 
 // out vec3 v_position;
@@ -30,9 +40,8 @@ uniform vec4 u_demTextureBBOX[6];
 
 out vec4 v_color;
 
-bool isPointInBBox(vec2 point, vec4 bbox) {
-    return point.x >= bbox.x && point.x <= bbox.z && point.y >= bbox.y && point.y <= bbox.w;
-}
+
+${isPointInBBox}
 
 void main() {
 
@@ -43,16 +52,17 @@ void main() {
             vec2 uv = (a_longLat - u_demTextureBBOX[i].xy) / (u_demTextureBBOX[i].zw - u_demTextureBBOX[i].xy);
             float altitude = texture(u_demTexture, vec3(uv, float(i))).r;
             elevation += altitude;
-            v_color = mix(vec4(0.0, 0.0, 1.0, 1.0), vec4(1.0, 0.0, 0.0, 1.0), altitude / 1000.0); // color from blue to red based on altitude
-            // elevation += 1000.0 * float(i); // temporary for testing
+            v_color = mix(vec4(0.0, 0.0, 1.0, 1.0), vec4(1.0, 0.0, 0.0, 1.0), altitude / 100.0); // color from blue to red based on altitude
             break;
      }
     }
-    
-
+    if (u_color.a > 0.0) {
+        v_color = u_color;
+    }
+    v_color.a *= u_opacity; 
     vec3 position = a_position * elevation;
     gl_Position = cartesian3DToGLPosition(position);
-    gl_PointSize = 1.0; // for POINTS rendering
+    gl_PointSize = u_pointSize;
 }
 `;
 const fragmentShaderSource = `#version 300 es
@@ -62,7 +72,7 @@ precision highp float;
 in vec4 v_color;
 out vec4 outColor;
 void main() {
-    outColor = v_color; // use the varying color from the vertex shader
+    outColor = v_color;
 }
 `;
 export class TextureDemTriangles {
@@ -74,6 +84,7 @@ export class TextureDemTriangles {
     // demTextures: WebGLTexture[] = [];
     // demTextureBBOX: Float32Array = new Float32Array(6 * 4); // 6 bounding boxes
     cameraUniformBlock;
+    _publishedUBOs = [];
     locations = {
         attributes: {
             a_position: -1,
@@ -82,6 +93,7 @@ export class TextureDemTriangles {
         uniforms: {
             u_demTexture: -1,
             u_demTextureBBOX: -1,
+            u_style: -1,
         }
     };
     constructor(globe) {
@@ -96,6 +108,8 @@ export class TextureDemTriangles {
         // 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');
+        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);
@@ -147,21 +161,49 @@ export class TextureDemTriangles {
         gl.bindTexture(gl.TEXTURE_2D_ARRAY, null);
         gl.useProgram(currentProgram);
     }
-    draw(vao, drawOptions, ubo = null) {
+    createUBO(bufferReadType = "STATIC_DRAW") {
+        const ubo = styleBlockManager.createUBO(this.gl, bufferReadType);
+        this._publishedUBOs.push(ubo);
+        return ubo;
+    }
+    free() {
+        this.gl.deleteProgram(this.program);
+        this.gl.deleteTexture(this.texture);
+        this._publishedUBOs.forEach(ubo => ubo.free());
+        this._publishedUBOs = [];
+        CameraUniformBlockTotemCache.release(this.globe);
+    }
+    draw(vao, drawOptions, ubo) {
         const gl = this.gl;
-        console.log('Drawing TextureDemTriangles drawOptions:', drawOptions);
         gl.useProgram(this.program);
         this.cameraUniformBlock.bind(uniformBindingPoints.camera);
         // TURN OFF flip y for texture
+        gl.disable(gl.DEPTH_TEST);
         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
         gl.bindVertexArray(vao);
+        // bind UBO for style
+        ubo.bind();
         drawArrays(gl, gl.POINTS, drawOptions);
+        gl.enable(gl.DEPTH_TEST);
+        // unbind everything
         gl.bindVertexArray(null);
         gl.bindTexture(gl.TEXTURE_2D_ARRAY, null);
         gl.useProgram(null);
+        ubo.unbind();
         this.cameraUniformBlock.unbind(uniformBindingPoints.camera);
     }
+    _getUniformBlockOffset(name) {
+        // hardcoded offsets based on std140 layout rules
+        const offsets = {
+            'u_color': 0,
+        };
+        const result = offsets[name];
+        if (result === undefined) {
+            throw new Error(`Unknown uniform block member: ${name}, names are: ${Object.keys(offsets).join(", ")}`);
+        }
+        return result;
+    }
 }

package/programs/totems/camerauniformblock.js

@@ -1,6 +1,6 @@
 import { globeProgramCache } from "../programcache";
 import { fromLongLatToUnitVector } from "../../Math/vec3";
-import { RADIANS } from "../../Math/methods";
+import { RADIAN } from "../../Math/methods";
 import { GlobeChangeObserver } from "./globe-changes";
 // import { approximatedZoomLevel } from "../../util/geometry/index";
 export const CameraUniformBlockString = `
@@ -155,7 +155,7 @@ export class CameraUniformBlockTotem {
         }
         else if (currentGeom === 1) {
             const { CenterLong, CenterLat } = globe.api_GetCurrentLookInfo();
-            fromLongLatToUnitVector(_0vec3, [CenterLong * RADIANS, CenterLat * RADIANS]);
+            fromLongLatToUnitVector(_0vec3, [CenterLong * RADIAN, CenterLat * RADIAN]);
             this._normalizedCameraVector[0] = _0vec3[0];
             this._normalizedCameraVector[1] = _0vec3[1];
             this._normalizedCameraVector[2] = _0vec3[2];
@@ -197,7 +197,7 @@ export class CameraUniformBlockTotem {
         const globe = this.globe;
         const { CenterLong, CenterLat } = globe.api_GetCurrentLookInfo();
         const result = [0, 0, 0];
-        fromLongLatToUnitVector(result, [CenterLong * RADIANS, CenterLat * RADIANS]);
+        fromLongLatToUnitVector(result, [CenterLong * RADIAN, CenterLat * RADIAN]);
         return result;
     }
     getGlobeChanges() {

package/semiplugins/shape-on-terrain/arc-plugin.js

@@ -3,7 +3,7 @@ import { LineStripProgramCache } from "../../programs/line-on-globe/linestrip/li
 import { createBufferAndReadInfo } from "../../util/gl-util/buffer/attribute-loader";
 // import { populateFloat32Array } from "../../util/jshelpers/data-filler";
 import { BufferManager, BufferOrchestrator } from "../../util/account/single-attribute-buffer-management/index";
-import { globe3Dcoordinates, globe2Dcoordinates, RADIANS } from "../../Math/methods";
+import { globe3Dcoordinates, globe2Dcoordinates, RADIAN } from "../../Math/methods";
 import { generateArcPoints, evenlySpacedArcPoints } from "../../Math/arc-cdf-points";
 import { StaticDynamicState, StaticDynamicStrategy } from "../../util/build-strategy/static-dynamic";
 import { opacityCheck } from "../../util/check/typecheck";
@@ -19,8 +19,8 @@ const _start = [0, 0, 0];
 const _end = [0, 0, 0];
 const _0arc = arc.create([1, 0, 0], [0, 1, 0]); // zero arc for intersection tests
 function createArc(start, end) {
-    vec3.fromLongLatToUnitVector(_start, [start[0] * RADIANS, start[1] * RADIANS]);
-    vec3.fromLongLatToUnitVector(_end, [end[0] * RADIANS, end[1] * RADIANS]);
+    vec3.fromLongLatToUnitVector(_start, [start[0] * RADIAN, start[1] * RADIAN]);
+    vec3.fromLongLatToUnitVector(_end, [end[0] * RADIAN, end[1] * RADIAN]);
     return arc.create(_start, _end);
 }
 export class ArcOnTerrainPlugin {
@@ -302,7 +302,7 @@ export class ArcOnTerrainPlugin {
             for (let i = 0; i < generatedPoints.length; i++) {
                 const point = generatedPoints[i];
                 vec3.fromUnitVectorToLongLat(longLat, point);
-                longLatArr.set([longLat[0] / RADIANS, longLat[1] / RADIANS], i * 2);
+                longLatArr.set([longLat[0] / RADIAN, longLat[1] / RADIAN], i * 2);
             }
             data[0].key = key;
             data[0].height = arcInput.height ?? this._options.defaultHeightFromGroundIn3D;
@@ -365,7 +365,7 @@ export class ArcOnTerrainPlugin {
             for (let i = 0; i < generatedPoints.length; i++) {
                 const point = generatedPoints[i];
                 vec3.fromUnitVectorToLongLat(longLat, point);
-                longLatArr.set([longLat[0] / RADIANS, longLat[1] / RADIANS], i * 2);
+                longLatArr.set([longLat[0] / RADIAN, longLat[1] / RADIAN], i * 2);
             }
             result.push({
                 key: key,

package/semiplugins/shape-on-terrain/padding-1-degree.js

@@ -437,7 +437,6 @@ export class Padding1DegreePlugin {
     }
     __innerCircle(subSetIDs = null) {
         // Implement inner circle padding logic
-        console.log("innerCircle Level Update");
         const datas = this._dataMap;
         let keys;
         if (subSetIDs) {

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

@@ -103,7 +103,7 @@ export class UniformBlockManager {
         gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
         const offset = this.offsetMap.get(key);
         if (offset === undefined) {
-            throw new Error(`Uniform block member ${key} not found in offset map.`);
+            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;
@@ -121,7 +121,7 @@ export class UniformBlockManager {
             data = (typeof value === 'number') ? new typeArrayConstructors[type]([value]) : new typeArrayConstructors[type](value);
         }
         else {
-            throw new Error(`Unsupported value type for ${key}: ${typeof value}`);
+            throw new Error(`Unsupported value type for ${key}: ${typeof value}.\n Supported types are: number, Array, ArrayBuffer, TypedArray.`);
         }
         gl.bufferSubData(gl.UNIFORM_BUFFER, offset, data);
         gl.bindBuffer(gl.UNIFORM_BUFFER, null);
@@ -131,7 +131,7 @@ export class UniformBlockManager {
         for (const [name, value] of nameValueMap.entries()) {
             const offset = this.offsetMap.get(name);
             if (offset === undefined) {
-                throw new Error(`Uniform block member ${name} not found in offset map.`);
+                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;
@@ -148,7 +148,7 @@ export class UniformBlockManager {
             else if (ArrayBuffer.isView(value) && !(value instanceof DataView))
                 data = (typeof value === 'number') ? new typeArrayConstructors[type]([value]) : new typeArrayConstructors[type](value);
             else {
-                throw new Error(`Unsupported value type for ${name}: ${typeof value}`);
+                throw new Error(`Unsupported value type for ${name}: ${typeof value}.\n Supported types are: number, Array, ArrayBuffer, TypedArray.`);
             }
             gl.bufferSubData(gl.UNIFORM_BUFFER, offset, data);
         }

package/util/shaderfunctions/geometrytransformations.js

@@ -1,5 +1,6 @@
 // Z in kolometers
 // 
+const EPSILON = 0.00001;
 export const POLE = `
 #ifndef POLE
 #define POLE 20037508.34
@@ -197,6 +198,11 @@ float realDistanceOnSphereR1(vec2 longLat1, vec2 longLat2) {
     return c;
 }
 `;
+export const isPointInBBox = `
+bool isPointInBBox(vec2 point, vec4 bbox) {
+    return point.x + ${EPSILON} >= bbox.x && point.x <= bbox.z + ${EPSILON} && point.y + ${EPSILON} >= bbox.y && point.y <= bbox.w + ${EPSILON};
+}
+`;
 const pointsOnSphereBetween = `
 vec3 pointsOnSphereBetween(vec3 a, vec3 b, float ratio) {
     // Normalize the input points to ensure they are on the unit sphere