@pirireis/webglobeplugins 0.16.4 → 0.17.0

package/programs/line-on-globe/naive-accurate-flexible.js

@@ -144,7 +144,6 @@ class Logic {
             gl.uniform1f(this._opacityLocation, opacity);
             this._lastOpacity = opacity;
         }
-        // this._setFlexibleUniforms(flexibleOptions);
         const vertexCount = globe.api_GetCurrentGeometry() === 0 ? GLOBE_MIDPOINT_COUNT : 2;
         const ubo = flexibleUBO || _defaultFlexibleUBO;
         ubo.bind();

package/programs/picking/pickable-polygon-renderer.js

@@ -1,4 +1,4 @@
-import { createProgram } from "../../util";
+import { createProgram } from "../../util/webglobjectbuilders";
 import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems";
 import { mercatorXYToGLPosition, cartesian3DToGLPosition, R_3D, R } from "../../util/shaderfunctions/geometrytransformations";
 import { noRegisterGlobeProgramCache } from "../programcache";

package/programs/picking/pickable-renderer.js

@@ -1,8 +1,8 @@
-import { createProgram } from "../../util";
+import { createProgram } from "../../util/webglobjectbuilders";
 import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems";
 import { mercatorXYToGLPosition, cartesian3DToGLPosition, R_3D, R } from "../../util/shaderfunctions/geometrytransformations";
 import { noRegisterGlobeProgramCache } from "../programcache";
-import { drawArrays, DrawRangeIndexParams } from "../../util/gl-util/draw-options/methods";
+import { drawArrays } from "../../util/gl-util/draw-options/methods"; //DrawRangeIndexParams 
 import { attributeLoader } from "../../util/gl-util/buffer/attribute-loader";
 import { UniformBlockManager } from "../../util/gl-util/uniform-block/manager";
 const uniformBindingPoints = {

package/programs/point-on-globe/element-globe-surface-glow.js

@@ -6,8 +6,8 @@
  *        *
  */
 import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems";
-import { PI, mercatorXYToGLPosition, cartesian3DToGLPosition, circleLimpFromLongLatRadCenterCartesian3D_accurate } from "../../util/shaderfunctions/geometrytransformations";
-import { createProgram } from "../../util";
+import { PI, cartesian3DToGLPosition, circleLimpFromLongLatRadCenterCartesian3D_accurate } from "../../util/shaderfunctions/geometrytransformations";
+import { createProgram } from "../../util/webglobjectbuilders";
 import { noRegisterGlobeProgramCache } from "../programcache";
 import { attributeLoader } from "../../util/gl-util/buffer/attribute-loader";
 import { drawInstanced } from "../../util/gl-util/draw-options/methods";

package/programs/point-on-globe/element-point-glow.js

@@ -1,4 +1,4 @@
-import { createProgram } from "../../util";
+import { createProgram } from "../../util/webglobjectbuilders";
 import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems";
 import { mercatorXYToGLPosition, cartesian3DToGLPosition } from "../../util/shaderfunctions/geometrytransformations";
 import { noRegisterGlobeProgramCache } from "../programcache";

package/programs/point-on-globe/square-pixel-point.js

@@ -1,4 +1,4 @@
-import { createProgram } from "../../util";
+import { createProgram } from "../../util/webglobjectbuilders";
 import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems";
 import { mercatorXYToGLPosition, cartesian3DToGLPosition } from "../../util/shaderfunctions/geometrytransformations";
 import { noRegisterGlobeProgramCache } from "../programcache";

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

@@ -0,0 +1,204 @@
+import { TextureDemTriangles } from "./texture-dem-triangles";
+import { partialTest } from "../../Math/tessellation/triangle-tessellation";
+/**
+ * Loads a plugin with test data for TextureDemTriangles
+ */
+const createTestBBOXES = () => {
+    const bboxes = [];
+    for (let i = 0; i < 6; i++) {
+        const north = Math.random() * Math.PI / 2 / 1.4; // random latitude
+        const west = Math.random() * -1 * Math.PI / 10; // random longitude
+        const south = north - Math.PI / 30; // random latitude
+        const east = west + Math.PI / 30; // random longitude
+        const nw = [west, north]; // random northWest
+        const se = [east, south]; // random southEast
+        bboxes.push({ northWest: nw, southEast: se });
+    }
+    return bboxes;
+};
+const demTextureBBOX = createTestBBOXES();
+function showTextureBBoxes(bboxes, demData = []) {
+    for (let i = 0; i < bboxes.length; i++) {
+        const bbox = bboxes[i];
+        console.log(`Texture BBOX ${i}: NW(${(bbox.northWest[0] * 180 / Math.PI).toFixed(2)}, ${(bbox.northWest[1] * 180 / Math.PI).toFixed(2)}) SE(${(bbox.southEast[0] * 180 / Math.PI).toFixed(2)}, ${(bbox.southEast[1] * 180 / Math.PI).toFixed(2)})`);
+        if (demData.length > i) {
+            const dem = demData[i];
+            let demStr = "DEM: \n";
+            for (let j = 0; j < dem.length; j++) {
+                demStr += dem[j].toFixed(1) + " ";
+                if ((j + 1) % 5 === 0) {
+                    demStr += "\n";
+                }
+            }
+            console.log(demStr);
+        }
+    }
+}
+const createTestDemTextures = () => {
+    const textures = [];
+    for (let i = 0; i < 6; i++) {
+        const texture = [];
+        for (let j = 0; j < 5 * 5; j++) {
+            const value = 100 * Math.random(); // random elevation value
+            texture.push(value);
+        }
+        textures.push(texture);
+    }
+    return textures;
+};
+// TODO: NAME IT longlat degree or radian
+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;
+    id;
+    uboTriangleStyle = null;
+    uboStringStyle = null;
+    showDemPoints = false;
+    bboxZooms = [];
+    constructor(id) {
+        this.id = id;
+        this.bboxZooms = [];
+    }
+    init(globe) {
+        this.globe = globe;
+        this.textureDemTriangles = new TextureDemTriangles(globe);
+        // set bboxes and dem textures
+        const demTextures = createTestDemTextures();
+        // const demTextureBBOX = createTestBBOXES();
+        this.textureDemTriangles.setDemTextures(demTextures, demTextureBBOX);
+        // 
+        // const baseZoom = 5;
+        showTextureBBoxes(demTextureBBOX, demTextures);
+        this.uboTriangleStyle = this.textureDemTriangles.createUBO();
+        this.uboStringStyle = this.textureDemTriangles.createUBO();
+        this.uboTriangleStyle.updateSingle("u_color", new Float32Array([1.0, 0.0, 0.0, 0.0]));
+        this.uboStringStyle.updateSingle("u_color", new Float32Array([.3, .3, .0, 1.0]));
+        const elementBuffer = globe.gl.createBuffer();
+        const bufferInfo = {
+            pos3dBufferInfo: {
+                buffer: globe.gl.createBuffer(),
+                stride: 0,
+                offset: 0,
+            },
+            longLatBufferInfo: {
+                buffer: globe.gl.createBuffer(),
+                stride: 0,
+                offset: 0,
+            },
+            elementBufferInfo: {
+                buffer: elementBuffer,
+                stride: 0,
+                offset: 0,
+            },
+            drawOptions: {
+                drawRange: { count: 0, first: 0 },
+                drawMode: globe.gl.TRIANGLES,
+                elementBuffer: elementBuffer,
+                elementBufferIndexType: globe.gl.UNSIGNED_INT
+            },
+            drawOptionsPoint: {
+                drawRange: { count: 0, first: 0 },
+                drawMode: globe.gl.POINTS,
+            },
+        };
+        this.vao = this.textureDemTriangles.createVAO(bufferInfo.pos3dBufferInfo, bufferInfo.longLatBufferInfo);
+        this.bufferInfo = bufferInfo;
+        this.setZoom(5);
+    }
+    setUniform(key, value) {
+        if (this.uboTriangleStyle) {
+            this.uboTriangleStyle.updateSingle(key, value);
+        }
+        if (this.uboStringStyle) {
+            this.uboStringStyle.updateSingle(key, value);
+        }
+        this.globe?.DrawRender();
+    }
+    setZoom(zoomLevel) {
+        this.bboxZooms = demTextureBBOX.map((bbox, index) => {
+            return {
+                bbox: {
+                    min: [bbox.northWest[0], bbox.southEast[1]], max: [bbox.southEast[0], bbox.northWest[1]]
+                }, zoom: index + zoomLevel + 1
+            };
+        });
+        // all world
+        this.bboxZooms.push({
+            bbox: {
+                min: [-180, -90],
+                max: [180, 90]
+            },
+            zoom: zoomLevel
+        });
+        if (!this.globe || !this.textureDemTriangles || !this.bufferInfo)
+            return;
+        // const p1: LongLatRadian = [-20 * Math.PI / 180, 50 * Math.PI / 180];
+        // const p2: LongLatRadian = [20 * Math.PI / 180, 50 * Math.PI / 180];
+        // const p3: LongLatRadian = [0, -10 * Math.PI / 180];
+        const p1 = [-60 * Math.PI / 180, 60 * Math.PI / 180];
+        const p2 = [60 * Math.PI / 180, 60 * Math.PI / 180];
+        const p3 = [0, -60 * Math.PI / 180];
+        // const p1_1: LongLatRadian = [-20 * Math.PI / 180, 30 * Math.PI / 180];
+        // const p2_2: LongLatRadian = [20 * Math.PI / 180, 20 * Math.PI / 180];
+        // const p3_3: LongLatRadian = [5, -20 * Math.PI / 180];
+        // const { vec3s, longLats, indices } = test1(zoomLevel, p1, p2, p3);
+        // const {vec3s, longLats, indices} = test1(5, p1_1, p2_2, p3_3);
+        const { vec3s, longLats, indices } = partialTest(this.bboxZooms, p1, p2, p3);
+        const bufferInfo = this.bufferInfo;
+        bufferInfo.drawOptions.drawRange.first = 0;
+        bufferInfo.drawOptions.drawRange.count = indices.length;
+        bufferInfo.drawOptionsPoint.drawRange.first = 0;
+        bufferInfo.drawOptionsPoint.drawRange.count = longLats.length / 2;
+        const gl = this.globe.gl;
+        // const longLatArray = createTestLongLatArray();
+        // const pos3dArray = createTestPos3dArray(longLatArray);
+        // @ts-ignore
+        gl.bindBuffer(gl.ARRAY_BUFFER, bufferInfo.pos3dBufferInfo.buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vec3s), gl.STATIC_DRAW);
+        // @ts-ignore
+        gl.bindBuffer(gl.ARRAY_BUFFER, bufferInfo.longLatBufferInfo.buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(longLats), gl.STATIC_DRAW);
+        // @ts-ignore
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, bufferInfo.elementBufferInfo.buffer);
+        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(indices), gl.STATIC_DRAW);
+        this.globe.DrawRender();
+        console.log("DrawIInfo", this.bufferInfo);
+    }
+    setShowDemPoints(show) {
+        this.showDemPoints = show;
+    }
+    draw3D() {
+        if (!this.globe || !this.textureDemTriangles || !this.vao || !this.bufferInfo)
+            return;
+        const gl = this.globe.gl;
+        gl.frontFace(gl.CW);
+        // @ts-ignore
+        this.textureDemTriangles.draw(this.vao, this.bufferInfo.drawOptions, this.uboTriangleStyle);
+        if (this.showDemPoints) {
+            // @ts-ignore
+            this.textureDemTriangles.draw(this.vao, this.bufferInfo.drawOptionsPoint, this.uboStringStyle);
+        }
+        gl.frontFace(gl.CCW);
+    }
+}

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 { 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 = 5.0; //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);
@@ -103,6 +117,7 @@ export class TextureDemTriangles {
         this.gl.texStorage3D(this.gl.TEXTURE_2D_ARRAY, 1, this.gl.R32F, 5, 5, 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);
@@ -147,21 +162,75 @@ 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.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
         gl.bindVertexArray(vao);
+        // bind UBO for style
+        ubo.bind();
+        drawOnTopBegin(gl);
         drawArrays(gl, gl.POINTS, drawOptions);
+        drawOnTopEnd(gl);
         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;
+    }
+}
+function drawOnTopBegin(gl) {
+    // gl.disable(gl.DEPTH_TEST);
+    // gl.enable(gl.POLYGON_OFFSET_FILL);
+    // // Use an offset to "nudge" the depth value slightly closer or farther.
+    // // Common values are gl.polygonOffset(1.0, 1.0) or gl.polygonOffset(0.5, 0.5)
+    // gl.polygonOffset(1.0, 1.0);
+    // gl.depthRange(0.0, 0.0001);  // Use near 0.01% of depth range
+    // gl.enable(gl.POLYGON_OFFSET_FILL);
+    // You will need to experiment with these values!
+    // A good starting point is -1.0, -1.0.
+    // Negative values "pull" the fragments closer to the camera.
+    // gl.polygonOffset(-1.0, -1.0);
+    gl.enable(gl.POLYGON_OFFSET_FILL);
+    gl.polygonOffset(-1.0, -2.0);
+}
+function drawOnTopEnd(gl) {
+    // gl.enable(gl.DEPTH_TEST);
+    // gl.disable(gl.POLYGON_OFFSET_FILL);
+    // gl.disable(gl.POLYGON_OFFSET_FILL);
+    // gl.depthRange(0.0, 1.0);  // Restore full depth range
+    gl.disable(gl.POLYGON_OFFSET_FILL);
 }

package/programs/rings/partial-ring/piece-of-pie.js

@@ -147,34 +147,32 @@ export class Logic {
         this._lastAlphaMultiplier = 1.0;
         this.program = createProgram(this.gl, vertexShaderSource, fragmentShaderSource);
         const { gl, program } = this;
-        { // set attributes locations 
-            gl.bindAttribLocation(program, 0, 'center2d');
-            gl.bindAttribLocation(program, 1, 'center3d');
-            gl.bindAttribLocation(program, 2, 'start_angle2d');
-            gl.bindAttribLocation(program, 3, 'tail_angle2d');
-            gl.bindAttribLocation(program, 4, 'start_angle3d');
-            gl.bindAttribLocation(program, 5, 'tail_angle3d');
-            gl.bindAttribLocation(program, 6, 'color');
-            gl.bindAttribLocation(program, 7, 'radius');
-            gl.bindAttribLocation(program, 8, 'filling_mode');
-            // vao
-            // instanced draw read 1 
-        }
-        { // Uniforms
-            this._edgeCountLocation = gl.getUniformLocation(program, 'edge_count');
-            this._draw_modeLocation = gl.getUniformLocation(program, 'draw_mode');
-            const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
-            gl.useProgram(program);
-            gl.uniform1i(this._draw_modeLocation, this._lastMode);
-            gl.uniform1f(this._edgeCountLocation, this._lastEdgeCount);
-            this.cameraBlockBindingPoint = 0;
-            this.cameraBlockTotem = globeProgramCache.getProgram(globe, CameraUniformBlockTotem);
-            const cameraBlockIndex = gl.getUniformBlockIndex(program, "CameraUniformBlock");
-            gl.uniformBlockBinding(program, cameraBlockIndex, this.cameraBlockBindingPoint);
-            flexibleBlockManager.assignBindingPoint(gl, program);
-            this._defaultFlexibleUBO = flexibleBlockManager.createUBO(gl);
-            gl.useProgram(currentProgram);
-        }
+        // set attributes locations 
+        gl.bindAttribLocation(program, 0, 'center2d');
+        gl.bindAttribLocation(program, 1, 'center3d');
+        gl.bindAttribLocation(program, 2, 'start_angle2d');
+        gl.bindAttribLocation(program, 3, 'tail_angle2d');
+        gl.bindAttribLocation(program, 4, 'start_angle3d');
+        gl.bindAttribLocation(program, 5, 'tail_angle3d');
+        gl.bindAttribLocation(program, 6, 'color');
+        gl.bindAttribLocation(program, 7, 'radius');
+        gl.bindAttribLocation(program, 8, 'filling_mode');
+        // vao
+        // instanced draw read 1 
+        // Uniforms
+        this._edgeCountLocation = gl.getUniformLocation(program, 'edge_count');
+        this._draw_modeLocation = gl.getUniformLocation(program, 'draw_mode');
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(program);
+        gl.uniform1i(this._draw_modeLocation, this._lastMode);
+        gl.uniform1f(this._edgeCountLocation, this._lastEdgeCount);
+        this.cameraBlockBindingPoint = 0;
+        this.cameraBlockTotem = globeProgramCache.getProgram(globe, CameraUniformBlockTotem);
+        const cameraBlockIndex = gl.getUniformBlockIndex(program, "CameraUniformBlock");
+        gl.uniformBlockBinding(program, cameraBlockIndex, this.cameraBlockBindingPoint);
+        flexibleBlockManager.assignBindingPoint(gl, program);
+        this._defaultFlexibleUBO = flexibleBlockManager.createUBO(gl);
+        gl.useProgram(currentProgram);
     }
     draw(length, vao, edgeCount, drawMode, ubo = null) {
         const { gl, program, cameraBlockTotem, cameraBlockBindingPoint } = this;
@@ -240,7 +238,6 @@ export class Logic {
     }
     createUBO() {
         const { gl } = this;
-        const bufferReadType = gl.DYNAMIC_DRAW;
         const ubo = flexibleBlockManager.createUBO(gl, "STATIC_DRAW");
         this._ubosPublished.push(ubo);
         return ubo;