@pirireis/webglobeplugins 0.16.7 → 0.17.0

package/programs/data2legend/density-to-legend.js

@@ -1,4 +1,4 @@
-import { createProgram } from "../../util/";
+import { createProgram } from "../../util/webglobjectbuilders";
 import { noRegisterGlobeProgramCache } from "../programcache";
 const vs = `#version 300 es
 precision highp float;
@@ -38,34 +38,29 @@ class DensityToLegendProgram {
             legendTexture: gl.getUniformLocation(program, "u_legend_texture"),
             opacity: gl.getUniformLocation(program, "u_opacity"),
         };
-        { // assign attribute locations
-            gl.bindAttribLocation(program, 0, "a_position");
-        }
-        {
-            this.vao = gl.createVertexArray();
-            const a_positionLocation = gl.getAttribLocation(program, "a_position");
-            gl.bindVertexArray(this.vao);
-            const buffer = gl.createBuffer();
-            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-                -1, -1,
-                1, -1,
-                1, 1,
-                -1, 1,
-            ]), gl.STATIC_DRAW);
-            gl.enableVertexAttribArray(a_positionLocation);
-            gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
-            gl.bindVertexArray(null);
-            // gl.bindBuffer(gl.ARRAY_BUFFER, null);
-            this._buffer = buffer;
-        }
-        {
-            this._lastOpacity = 1;
-            const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
-            gl.useProgram(program);
-            gl.uniform1f(this.uniforms.opacity, this._lastOpacity);
-            gl.useProgram(currentProgram);
-        }
+        // assign attribute locations
+        gl.bindAttribLocation(program, 0, "a_position");
+        this.vao = gl.createVertexArray();
+        const a_positionLocation = gl.getAttribLocation(program, "a_position");
+        gl.bindVertexArray(this.vao);
+        const buffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+            -1, -1,
+            1, -1,
+            1, 1,
+            -1, 1,
+        ]), gl.STATIC_DRAW);
+        gl.enableVertexAttribArray(a_positionLocation);
+        gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+        gl.bindVertexArray(null);
+        // gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        this._buffer = buffer;
+        this._lastOpacity = 1;
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(program);
+        gl.uniform1f(this.uniforms.opacity, this._lastOpacity);
+        gl.useProgram(currentProgram);
     }
     draw(densityTexture, legendTexture, opacity) {
         const { gl, program, uniforms } = this;

package/programs/data2legend/point-to-density-texture.js

@@ -1,4 +1,4 @@
-import { createProgram } from "../../util/";
+import { createProgram } from "../../util/webglobjectbuilders";
 import { noRegisterGlobeProgramCache } from "../programcache";
 import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems/camerauniformblock";
 import { mercatorXYToGLPosition, cartesian3DToGLPosition } from "../../util/shaderfunctions/geometrytransformations";
@@ -41,22 +41,19 @@ class PointHeatmapProgram {
         this.uniforms = {
             pointSize: gl.getUniformLocation(this.program, "pointSize"),
         };
-        { // assign attribute locations 
-            gl.bindAttribLocation(program, 0, "position");
-        }
-        { // arrange camera uniform block
-            this.cameraBlockBingingPoint = 0;
-            this.cameraBlockTotem = CameraUniformBlockTotemCache.get(globe);
-            const cameraBlockIndex = gl.getUniformBlockIndex(program, "CameraUniformBlock");
-            gl.uniformBlockBinding(program, cameraBlockIndex, this.cameraBlockBingingPoint);
-        }
-        { // last values
-            this._lastPointSize = 0;
-            const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
-            gl.useProgram(program);
-            gl.uniform1f(this.uniforms.pointSize, this._lastPointSize);
-            gl.useProgram(currentProgram);
-        }
+        // assign attribute locations 
+        gl.bindAttribLocation(program, 0, "position");
+        // arrange camera uniform block
+        this.cameraBlockBingingPoint = 0;
+        this.cameraBlockTotem = CameraUniformBlockTotemCache.get(globe);
+        const cameraBlockIndex = gl.getUniformBlockIndex(program, "CameraUniformBlock");
+        gl.uniformBlockBinding(program, cameraBlockIndex, this.cameraBlockBingingPoint);
+        // last values
+        this._lastPointSize = 0;
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(program);
+        gl.uniform1f(this.uniforms.pointSize, this._lastPointSize);
+        gl.useProgram(currentProgram);
     }
     createVAO(positionBuffer, vectorSize) {
         const gl = this.gl;

package/programs/float2legendwithratio/logic.js

@@ -1,5 +1,5 @@
-import { createProgram } from "../../util";
-export default class {
+import { createProgram } from "../../util/webglobjectbuilders";
+export class Float2LegentWithRatioProgram {
     constructor(gl) {
         this.gl = gl;
         this._width = 1;

package/programs/float2legendwithratio/object.js

@@ -1,4 +1,4 @@
-import Float2LegentWithRatioProgram from './logic';
+import { Float2LegentWithRatioProgram } from './logic';
 import { glProgramCache } from '../programcache';
 // Uniform Buffer Objects use this 
 export default class DataObject {

package/programs/helpers/{blender/program.js → blender.js}

@@ -1,4 +1,4 @@
-import { createProgram } from "../util";
+import { createProgram } from "../util/webglobeplugins";
 /**
  * Blends two float32textures with given ratio.
  */

package/programs/helpers/{fadeaway/logic.js → fadeaway.js}

@@ -1,4 +1,5 @@
-import { createProgram } from "../../../util";
+import { createProgram } from "../../util/webglobjectbuilders";
+import { glProgramCache } from "../programcache";
 const vertexShaderSource = `#version 300 es
 precision highp float; 
 in vec2 a_position;
@@ -24,7 +25,7 @@ void main() {
     outColor = vec4(color.rgb, color.a * opacity);
 }
 `;
-export default class FadeAwayProgram {
+class FadeAwayProgram {
     constructor(gl) {
         this.gl = gl;
         this.program = createProgram(gl, vertexShaderSource, fragmentShaderSource);
@@ -67,3 +68,11 @@ export default class FadeAwayProgram {
         gl.deleteBuffer(_buffer);
     }
 }
+export const FadeAwayProgramCache = Object.freeze({
+    get: (gl) => {
+        return glProgramCache.getProgram(gl, FadeAwayProgram);
+    },
+    release: (gl) => {
+        return glProgramCache.releaseProgram(gl, FadeAwayProgram);
+    }
+});

package/programs/index.js

@@ -1,9 +1,20 @@
-import { Float2LegendWithRatio } from "./float2legendwithratio";
-import { GlobeShellWiggle } from "./globeshell/wiggle";
-import { CameraUniformBlockTotem, CameraUniformBlockString } from "./totems/index";
-import ArrowField from "./arrowfield";
-import { glProgramCache, globeProgramCache, noRegisterGlobeProgramCache } from "./programcache";
-import * as vectorfield from "./vectorfields/index";
-import { FadeAway } from "./helpers";
-import * as rings from "./rings";
-export { Float2LegendWithRatio, GlobeShellWiggle, ArrowField, CameraUniformBlockTotem, CameraUniformBlockString, glProgramCache, globeProgramCache, noRegisterGlobeProgramCache, vectorfield, FadeAway, rings };
+"use strict";
+// import { Float2LegendWithRatio } from "./float2legendwithratio";
+// import { GlobeShellWiggle } from "./globeshell/wiggle";
+// import { CameraUniformBlockTotem, CameraUniformBlockString } from "./totems/index";
+// import ArrowField from "./arrowfield";
+// import { glProgramCache, globeProgramCache, noRegisterGlobeProgramCache } from "./programcache";
+// import { FadeAway } from "./helpers";
+// import * as rings from "./rings";
+// export {
+//     Float2LegendWithRatio,
+//     GlobeShellWiggle,
+//     ArrowField,
+//     CameraUniformBlockTotem,
+//     CameraUniformBlockString,
+//     glProgramCache,
+//     globeProgramCache,
+//     noRegisterGlobeProgramCache,
+//     FadeAway,
+//     rings
+// };

package/programs/line-on-globe/circle-accurate-3d.js

@@ -3,7 +3,7 @@ import { CameraUniformBlockString, CameraUniformBlockTotemCache } from "../totem
 import { noRegisterGlobeProgramCache } from "../programcache";
 // import { vaoAttributeLoader } from "../../util/account/util";
 import { attributeLoader } from "../../util/gl-util/buffer/attribute-loader";
-import { cartesian3DToGLPosition, circleLimpFromLongLatRadCenterCartesian3D_accurate, circleOnSphere, POLE, PI } from "../../util/shaderfunctions/geometrytransformations";
+import { cartesian3DToGLPosition, circleOnSphere, POLE, PI } from "../../util/shaderfunctions/geometrytransformations";
 /**
  * TODO:
  * 1. integrate geometry functions for radius angle and center
@@ -77,19 +77,17 @@ class Logic {
         this.program.uniforms = {
             opacity: gl.getUniformLocation(program, "opacity")
         };
-        { // initial uniform values
-            const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
-            gl.useProgram(program);
-            gl.uniform1f(program.uniforms.opacity, 1.0);
-            gl.useProgram(currentProgram);
-        }
-        { // assign attribute locations
-            gl.bindAttribLocation(program, 0, "center_position3d");
-            gl.bindAttribLocation(program, 1, "target_position3d");
-            gl.bindAttribLocation(program, 2, "color");
-            gl.bindAttribLocation(program, 3, "dash_ratio");
-            gl.bindAttribLocation(program, 4, "dash_opacity");
-        }
+        // initial uniform values
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(program);
+        gl.uniform1f(program.uniforms.opacity, 1.0);
+        gl.useProgram(currentProgram);
+        // assign attribute locations
+        gl.bindAttribLocation(program, 0, "center_position3d");
+        gl.bindAttribLocation(program, 1, "target_position3d");
+        gl.bindAttribLocation(program, 2, "color");
+        gl.bindAttribLocation(program, 3, "dash_ratio");
+        gl.bindAttribLocation(program, 4, "dash_opacity");
         this.cameraBindingPoint = 0;
         this.cameraBlockTotem = CameraUniformBlockTotemCache.get(globe);
         const cameraBlockLocation = gl.getUniformBlockIndex(program, "CameraUniformBlock");

package/programs/line-on-globe/circle-accurate-flat.js

@@ -3,7 +3,6 @@ import { CameraUniformBlockString, CameraUniformBlockTotemCache } from "../totem
 import { noRegisterGlobeProgramCache } from "../programcache";
 import { vaoAttributeLoader } from "../../util/account/util";
 import { mercatorXYToGLPosition, POLE } from "../../util/shaderfunctions/geometrytransformations";
-const Pole = 20037508.34;
 /**
 * Warning:
 * Insert the points from the second index and skip 1 point as you placed 361 points

package/programs/line-on-globe/degree-padding-around-circle-3d.js

@@ -84,21 +84,19 @@ class Logic {
             stepAngle: gl.getUniformLocation(program, "step_angle"),
             zAlphaMode: gl.getUniformLocation(program, "z_alpha_on")
         };
-        { // initial uniform values
-            const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
-            gl.useProgram(program);
-            gl.uniform1f(program.uniforms.opacity, 1.0);
-            gl.uniform1f(program.uniforms.edgeCount, INITIAL_EDGE_COUNT * 2);
-            gl.uniform1f(program.uniforms.stepAngle, this._lastStepAngle * Math.PI / 360);
-            gl.uniform1i(program.uniforms.zAlphaMode, Z_ALPHA_MODE.ON);
-            gl.useProgram(currentProgram);
-        }
-        { // assign attribute locations
-            gl.bindAttribLocation(program, 0, "center_position3d");
-            gl.bindAttribLocation(program, 1, "big_radius");
-            gl.bindAttribLocation(program, 2, "small_radius");
-            gl.bindAttribLocation(program, 3, "color");
-        }
+        // initial uniform values
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(program);
+        gl.uniform1f(program.uniforms.opacity, 1.0);
+        gl.uniform1f(program.uniforms.edgeCount, INITIAL_EDGE_COUNT * 2);
+        gl.uniform1f(program.uniforms.stepAngle, this._lastStepAngle * Math.PI / 360);
+        gl.uniform1i(program.uniforms.zAlphaMode, Z_ALPHA_MODE.ON);
+        gl.useProgram(currentProgram);
+        // assign attribute locations
+        gl.bindAttribLocation(program, 0, "center_position3d");
+        gl.bindAttribLocation(program, 1, "big_radius");
+        gl.bindAttribLocation(program, 2, "small_radius");
+        gl.bindAttribLocation(program, 3, "color");
         this.cameraBindingPoint = 0;
         this.cameraBlockTotem = CameraUniformBlockTotemCache.get(globe);
         const cameraBlockLocation = gl.getUniformBlockIndex(program, "CameraUniformBlock");

package/programs/line-on-globe/lines-color-instanced-flat.js

@@ -1,7 +1,7 @@
 import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems";
 import { mercatorXYToGLPosition, POLE } from "../../util/shaderfunctions/geometrytransformations";
 import { noRegisterGlobeProgramCache } from "../programcache";
-import { createProgram } from "../../util";
+import { createProgram } from "../../util/webglobjectbuilders";
 import { Z_ALPHA_MODE } from "./util";
 import { attributeLoader } from "../../util/gl-util/buffer/attribute-loader";
 /**
@@ -68,23 +68,20 @@ class Logic {
         const { gl, program } = this;
         const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
         gl.useProgram(program);
-        { // assign attribute locations
-            gl.bindAttribLocation(program, 0, 'posA');
-            gl.bindAttribLocation(program, 1, 'posB');
-            gl.bindAttribLocation(program, 2, 'color');
-        }
-        { // uniform locations
-            this._opacityLocation = gl.getUniformLocation(program, 'opacity');
-            this._zAlphaOnLocation = gl.getUniformLocation(program, 'z_alpha_on');
-            gl.uniform1i(this._zAlphaOnLocation, this._lastZAlphaOn);
-            gl.uniform1f(this._opacityLocation, this._lastOpicity);
-        }
-        { // uniform block
-            this._cameraUniformBlock = CameraUniformBlockTotemCache.get(globe);
-            this._cameraBindingPoint = 0;
-            const cameraBlockBindingIndex = gl.getUniformBlockIndex(program, 'CameraUniformBlock');
-            gl.uniformBlockBinding(program, cameraBlockBindingIndex, this._cameraBindingPoint);
-        }
+        // assign attribute locations
+        gl.bindAttribLocation(program, 0, 'posA');
+        gl.bindAttribLocation(program, 1, 'posB');
+        gl.bindAttribLocation(program, 2, 'color');
+        // uniform locations
+        this._opacityLocation = gl.getUniformLocation(program, 'opacity');
+        this._zAlphaOnLocation = gl.getUniformLocation(program, 'z_alpha_on');
+        gl.uniform1i(this._zAlphaOnLocation, this._lastZAlphaOn);
+        gl.uniform1f(this._opacityLocation, this._lastOpicity);
+        // uniform block
+        this._cameraUniformBlock = CameraUniformBlockTotemCache.get(globe);
+        this._cameraBindingPoint = 0;
+        const cameraBlockBindingIndex = gl.getUniformBlockIndex(program, 'CameraUniformBlock');
+        gl.uniformBlockBinding(program, cameraBlockBindingIndex, this._cameraBindingPoint);
         gl.useProgram(currentProgram);
     }
     createVAO(posAObj, posBObj, colorObj) {

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

@@ -1,5 +1,5 @@
 import { TextureDemTriangles } from "./texture-dem-triangles";
-import { test1 } from "../../Math/tessellation/triangle-tessellation";
+import { partialTest } from "../../Math/tessellation/triangle-tessellation";
 /**
  * Loads a plugin with test data for TextureDemTriangles
  */
@@ -16,6 +16,7 @@ const createTestBBOXES = () => {
     }
     return bboxes;
 };
+const demTextureBBOX = createTestBBOXES();
 function showTextureBBoxes(bboxes, demData = []) {
     for (let i = 0; i < bboxes.length; i++) {
         const bbox = bboxes[i];
@@ -74,17 +75,20 @@ export class TextureDemTrianglesTestPlugin {
     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();
+        // const demTextureBBOX = createTestBBOXES();
         this.textureDemTriangles.setDemTextures(demTextures, demTextureBBOX);
         // 
+        // const baseZoom = 5;
         showTextureBBoxes(demTextureBBOX, demTextures);
         this.uboTriangleStyle = this.textureDemTriangles.createUBO();
         this.uboStringStyle = this.textureDemTriangles.createUBO();
@@ -132,16 +136,35 @@ export class TextureDemTrianglesTestPlugin {
         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 = [-20 * Math.PI / 180, 50 * Math.PI / 180];
-        const p2 = [20 * Math.PI / 180, 50 * Math.PI / 180];
-        const p3 = [0, -10 * Math.PI / 180];
+        // 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(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;
@@ -168,11 +191,14 @@ export class TextureDemTrianglesTestPlugin {
     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-triangles.js

@@ -1,6 +1,6 @@
 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";
@@ -62,7 +62,7 @@ void main() {
     v_color.a *= u_opacity; 
     vec3 position = a_position * elevation;
     gl_Position = cartesian3DToGLPosition(position);
-    gl_PointSize = u_pointSize;
+    gl_PointSize = 5.0; //u_pointSize;
 }
 `;
 const fragmentShaderSource = `#version 300 es
@@ -117,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);
@@ -178,7 +179,11 @@ export class TextureDemTriangles {
         gl.useProgram(this.program);
         this.cameraUniformBlock.bind(uniformBindingPoints.camera);
         // TURN OFF flip y for texture
-        gl.disable(gl.DEPTH_TEST);
+        // 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
@@ -186,9 +191,9 @@ export class TextureDemTriangles {
         gl.bindVertexArray(vao);
         // bind UBO for style
         ubo.bind();
+        drawOnTopBegin(gl);
         drawArrays(gl, gl.POINTS, drawOptions);
-        gl.enable(gl.DEPTH_TEST);
-        // unbind everything
+        drawOnTopEnd(gl);
         gl.bindVertexArray(null);
         gl.bindTexture(gl.TEXTURE_2D_ARRAY, null);
         gl.useProgram(null);
@@ -207,3 +212,25 @@ export class TextureDemTriangles {
         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;