@pirireis/webglobeplugins 0.2.0 → 0.3.0

package/programs/line-on-globe/angled-line.js

@@ -0,0 +1,206 @@
+// angle radius, rgba, dashRatio, rgbaMode
+
+
+import { createProgram } from "../../util";
+import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems";
+import {
+    longLatRadToMercator, longLatRadToCartesian3D, cartesian3DToGLPosition, mercatorXYToGLPosition,
+    circleLimpFromLongLatRadCenterCartesian3D,
+    circleLimpFromLongLatRadCenterMercatorCompass,
+    circleLimpFromLongLatRadCenterMercatorRealDistance,
+    POLE
+} from "../../util/shaderfunctions/geometrytransformations";
+import { noRegisterGlobeProgramCache } from "../programcache";
+
+
+const EDGE_COUNT_ON_SPHERE = 50;
+
+const vertexShaderSource = `#version 300 es
+precision highp float;
+
+${CameraUniformBlockString}
+${longLatRadToMercator}
+${longLatRadToCartesian3D}
+${cartesian3DToGLPosition}
+${mercatorXYToGLPosition}
+${circleLimpFromLongLatRadCenterCartesian3D}
+${circleLimpFromLongLatRadCenterMercatorCompass}
+${circleLimpFromLongLatRadCenterMercatorRealDistance}
+
+in vec2 center_point;
+in float angle;
+in float radius;
+in vec4 rgba;
+in float dash_ratio;
+in float dash_opacity;
+
+out vec4 v_color;
+out float v_dash_ratio;
+out float interpolation;
+out float v_dash_opacity;
+out vec2 v_limp;
+// TODO: Draw World Boundaries 
+void main() {
+    if ( is3D ) {
+        interpolation = float( gl_VertexID ) / ${EDGE_COUNT_ON_SPHERE - 1}.0;
+        float radius_ = radius* interpolation;
+        vec3 position = circleLimpFromLongLatRadCenterCartesian3D( center_point, radius_, angle);
+        gl_Position = cartesian3DToGLPosition( position);
+        v_limp = vec2(0.0, 0.0);
+    } else {
+        interpolation = float( gl_VertexID );
+        float radius_ = radius * interpolation;
+        vec2 position = circleLimpFromLongLatRadCenterMercatorRealDistance( center_point, radius_, angle);
+        v_limp = position;
+        gl_Position = mercatorXYToGLPosition( position);
+    }
+    v_dash_opacity = dash_opacity;
+    v_color = rgba;
+    v_dash_ratio = dash_ratio;
+}`;
+
+
+
+const fragmentShaderSource = `#version 300 es
+${POLE}
+precision highp float;
+
+uniform float opacity;
+in vec4 v_color;
+in float v_dash_ratio;
+in float v_dash_opacity;
+in float interpolation;
+in vec2 v_limp;
+out vec4 color;
+
+void main() {
+    if ( v_limp.x < -POLE || v_limp.x > POLE || v_limp.y < -POLE || v_limp.y > POLE ){ color = vec4(0.0,0.0,0.0,0.0); return; }
+    color = vec4(v_color.rgb, v_color.a * opacity);
+    if (fract(interpolation / (2.0 * v_dash_ratio)) < 0.5 ) {
+        color.a *= v_dash_opacity;
+    }   
+}`;
+
+
+class Logic {
+
+    constructor(globe) {
+
+        this.globe = globe;
+        this.gl = globe.gl;
+        this.program = createProgram(this.gl, vertexShaderSource, fragmentShaderSource);
+        this._lastOpacity = 1;
+
+        const { gl, program } = this;
+        { // assign attribute locations
+            gl.bindAttribLocation(program, 0, "center_point");
+            gl.bindAttribLocation(program, 1, "angle");
+            gl.bindAttribLocation(program, 2, "radius");
+            gl.bindAttribLocation(program, 3, "rgba");
+            gl.bindAttribLocation(program, 4, "dash_ratio");
+            gl.bindAttribLocation(program, 5, "dash_opacity");
+        }
+
+        {
+            this._opacityLocation = gl.getUniformLocation(program, "opacity");
+            const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+            gl.useProgram(program);
+            gl.uniform1f(this._opacityLocation, this._lastOpacity);
+            gl.useProgram(currentProgram);
+        }
+
+        this.cameraBlockBindingPoint = 0;
+        const cameraBlockIndex = gl.getUniformBlockIndex(program, "CameraUniformBlock");
+        this.cameraBlockTotem = CameraUniformBlockTotemCache.get(globe);
+        gl.uniformBlockBinding(program, cameraBlockIndex, this.cameraBlockBindingPoint);
+
+    }
+
+
+    draw(vao, length, opacity) {
+        const { gl, program, globe, cameraBlockTotem, cameraBlockBindingPoint } = this;
+        gl.useProgram(program);
+        if (opacity !== this._lastOpacity) {
+            gl.uniform1f(this._opacityLocation, opacity);
+            this._lastOpacity = opacity;
+        }
+        const drawCount = globe.api_GetCurrentGeometry() === 0 ? EDGE_COUNT_ON_SPHERE : 2;
+        gl.bindVertexArray(vao);
+        cameraBlockTotem.bind(cameraBlockBindingPoint)
+        // gl.disable(gl.DEPTH_TEST);
+        gl.drawArraysInstanced(gl.LINE_STRIP, 0, drawCount, length);
+        gl.bindVertexArray(null);
+        cameraBlockTotem.unbind(cameraBlockBindingPoint);
+        // gl.enable(gl.DEPTH_TEST);
+    }
+
+
+    createVAO(centerCoords, angle, radius, rgba, dashRatio, dashOpacity) {
+
+        const { gl } = this;
+        const vao = gl.createVertexArray();
+        gl.bindVertexArray(vao);
+        {
+            const { buffer, stride = 0, offset = 0 } = centerCoords;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(0);
+            gl.vertexAttribPointer(0, 2, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(0, 1);
+        }
+        {
+            const { buffer, stride = 0, offset = 0 } = angle;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(1);
+            gl.vertexAttribPointer(1, 1, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(1, 1);
+        }
+        {
+            const { buffer, stride = 0, offset = 0 } = radius;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(2);
+            gl.vertexAttribPointer(2, 1, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(2, 1);
+        }
+
+        {
+            const { buffer, stride = 0, offset = 0 } = rgba;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(3);
+            gl.vertexAttribPointer(3, 4, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(3, 1);
+        }
+        {
+            const { buffer, stride = 0, offset = 0 } = dashRatio;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(4);
+            gl.vertexAttribPointer(4, 1, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(4, 1);
+        }
+        {
+            const { buffer, stride = 0, offset = 0 } = dashOpacity;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(5);
+            gl.vertexAttribPointer(5, 1, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(5, 1);
+        }
+        gl.bindVertexArray(null);
+        return vao;
+    }
+
+
+    free() {
+        if (this.isFreed) return;
+        CameraUniformBlockTotemCache.release(this.globe);
+        this.cameraBlockTotem = null;
+        this.gl.deleteProgram(this.program);
+        this.isFreed = true;
+    }
+
+
+}
+
+
+export const AngledLineProgramCache = Object.freeze({
+    get: (globe) => { return noRegisterGlobeProgramCache.getProgram(globe, Logic) },
+    release: (globe) => { return noRegisterGlobeProgramCache.releaseProgram(globe, Logic) }
+});

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

@@ -0,0 +1,193 @@
+import { createProgram } from "../../util/webglobjectbuilders";
+import { CameraUniformBlockString, CameraUniformBlockTotemCache } from "../totems/camerauniformblock";
+import { noRegisterGlobeProgramCache } from "../programcache";
+import { vaoAttributeLoader } from "../../util/account/util";
+import {
+    longLatRadToMercator, longLatRadToCartesian3D, cartesian3DToGLPosition, mercatorXYToGLPosition, realDistanceOnSphereR1,
+    circleLimpFromLongLatRadCenterCartesian3D,
+    circleLimpFromLongLatRadCenterMercatorCompass,
+    circleLimpFromLongLatRadCenterMercatorRealDistance,
+    POLE
+} from "../../util/shaderfunctions/geometrytransformations";
+
+
+/**
+ * TODO: 
+ * 1. integrate geometry functions for radius angle and center
+ * 2. integrate attributes
+ * 
+ * TODO:
+ * center_position is too small or doenst loaded as expected.
+ */
+const EDGE_COUNT_ON_SPHERE = 360;
+
+const vertexShaderSource = `#version 300 es
+precision highp float;
+${CameraUniformBlockString}
+${longLatRadToMercator}
+${longLatRadToCartesian3D}
+${cartesian3DToGLPosition}
+${mercatorXYToGLPosition}
+${realDistanceOnSphereR1}
+${circleLimpFromLongLatRadCenterCartesian3D}
+${circleLimpFromLongLatRadCenterMercatorCompass}
+${circleLimpFromLongLatRadCenterMercatorRealDistance}
+
+uniform float edge_count;
+
+in vec2 center_position;
+in float start_angle;
+in float radius;
+in vec4 color;
+in float dash_ratio;
+in float dash_opacity;
+
+out float interpolation;
+out vec4 v_color;
+out float v_dash_ratio;
+out float v_dash_opacity;
+out vec2 v_limp;
+void main() {
+    interpolation = float( gl_VertexID ) / ${EDGE_COUNT_ON_SPHERE}.0;
+    float angle = PI * 2.0 * interpolation;
+    if ( is3D ) {
+        vec3 position = circleLimpFromLongLatRadCenterCartesian3D( center_position, radius, angle);
+        gl_Position = cartesian3DToGLPosition(position);
+        v_limp = vec2(0.0, 0.0);
+    } else {
+        vec2 position = circleLimpFromLongLatRadCenterMercatorRealDistance( center_position, radius, angle);
+        v_limp = position;
+        gl_Position = mercatorXYToGLPosition( position);
+
+    }
+    v_dash_ratio = dash_ratio;
+    v_dash_opacity = dash_opacity;
+    v_color = color;
+
+}`
+
+const fragmentShaderSource = `#version 300 es
+${POLE}
+precision highp float;
+uniform float opacity;
+in vec4 v_color;
+in float v_dash_ratio;
+in float v_dash_opacity;
+in float interpolation;
+in vec2 v_limp;
+out vec4 color;
+void main() {
+    if ( v_limp.x < -POLE || v_limp.x > POLE || v_limp.y < -POLE || v_limp.y > POLE ){ color = vec4(0.0,0.0,0.0,0.0); return; }
+    color = v_color;
+    color.a *= opacity;
+    if ( v_dash_ratio == 1.0 || v_dash_ratio == 0.0 ) return;
+    if (fract(interpolation / (2.0 * v_dash_ratio)) < 0.5 ) {
+        color.a *= v_dash_opacity;
+    }   
+}
+`;
+
+
+
+class Logic {
+
+    constructor(globe) {
+        this.globe = globe;
+        this.gl = globe.gl;
+        this._lastOpacity = 1.0;
+
+        this.program = createProgram(this.gl, vertexShaderSource, fragmentShaderSource);
+
+        const { gl, program } = this;
+        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_position");
+            gl.bindAttribLocation(program, 1, "start_angle");
+            gl.bindAttribLocation(program, 2, "radius");
+            gl.bindAttribLocation(program, 3, "color");
+            gl.bindAttribLocation(program, 4, "dash_ratio");
+            gl.bindAttribLocation(program, 5, "dash_opacity");
+        }
+
+        this.cameraBindingPoint = 0;
+        this.cameraBlockTotem = CameraUniformBlockTotemCache.get(globe);
+        console.log("Logic constructor", this.cameraBlockTotem);
+        const cameraBlockLocation = gl.getUniformBlockIndex(program, "CameraUniformBlock");
+        gl.uniformBlockBinding(program, cameraBlockLocation, this.cameraBindingPoint);
+    }
+
+    createVAO(centerObj, startAngleObj, radiusObj, colorObj, dashRatioObj, dashOpacityObj) {
+        const { gl } = this;
+        const vao = gl.createVertexArray();
+        const divisor = 1;
+        gl.bindVertexArray(vao);
+        {  // make this a function end import from account module. 
+            const { buffer, stride = 0, offset = 0 } = centerObj;
+            vaoAttributeLoader(gl, buffer, 0, 2, stride, offset, divisor);
+        }
+        {
+            const { buffer, stride = 0, offset = 0 } = startAngleObj;
+            vaoAttributeLoader(gl, buffer, 1, 1, stride, offset, divisor);
+        }
+        {
+            const { buffer, stride = 0, offset = 0 } = radiusObj;
+            vaoAttributeLoader(gl, buffer, 2, 1, stride, offset, divisor);
+        }
+        {
+            const { buffer, stride = 0, offset = 0 } = colorObj;
+            vaoAttributeLoader(gl, buffer, 3, 4, stride, offset, divisor);
+        }
+        {
+            const { buffer, stride = 0, offset = 0 } = dashRatioObj;
+            vaoAttributeLoader(gl, buffer, 4, 1, stride, offset, divisor);
+        }
+        {
+            const { buffer, stride = 0, offset = 0 } = dashOpacityObj;
+            vaoAttributeLoader(gl, buffer, 5, 1, stride, offset, divisor);
+        }
+        gl.bindVertexArray(null);
+        gl.bindVertexArray(null);
+        return vao;
+    }
+
+    draw(vao, length, opacity) {
+        const { gl, program, cameraBlockTotem, cameraBindingPoint } = this;
+        gl.useProgram(program);
+
+        if (this._lastOpacity !== opacity) {
+            gl.uniform1f(program.uniforms.opacity, opacity);
+            this._lastOpacity = opacity;
+        }
+        gl.bindVertexArray(vao);
+        cameraBlockTotem.bind(cameraBindingPoint);
+        gl.drawArraysInstanced(gl.LINE_STRIP, 0, EDGE_COUNT_ON_SPHERE + 1, length);
+        cameraBlockTotem.unbind(cameraBindingPoint);
+        gl.bindVertexArray(null);
+    }
+
+
+
+    free() {
+        if (this.isFreed) return;
+        CameraUniformBlockTotemCache.release(this.globe);
+        this.gl.deleteProgram(this.program);
+        this.isFreed = true;
+    }
+}
+
+
+
+export const CircleCache = Object.freeze({
+    get: (globe) => noRegisterGlobeProgramCache.getProgram(globe, Logic),
+    release: (globe) => noRegisterGlobeProgramCache.releaseProgram(globe, Logic)
+});

package/programs/line-on-globe/index.js

@@ -1 +0,0 @@
-import { LineOnGlobeCache } from './program.js';

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

@@ -1,11 +1,12 @@
 import { CameraUniformBlockString, CameraUniformBlockTotem } from "../totems";
-import { longLatRadToMercator, longLatRadToCartesian3D, cartesian3DToGLPosition, mercatorXYTo2DPoint } from "../../util/shaderfunctions/geometrytransformations";
+import { longLatRadToMercator, longLatRadToCartesian3D, cartesian3DToGLPosition, mercatorXYToGLPosition, POLE } from "../../util/shaderfunctions/geometrytransformations";
 import { createProgram } from "../../util";
 import { noRegisterGlobeProgramCache, globeProgramCache } from "../programcache";
 import BufferOffsetManger from "../../util/account/bufferoffsetmanager";
+import { programCache } from "../rings/distancering/circleflatprogram";
 const Radian = Math.PI / 180.0;
 const GLOBE_MIDPOINT_COUNT = 100;
-const ITEM_SIZE = 8;
+const ITEM_SIZE = 9;
 
 const vertexShader = `#version 300 es
 precision highp float;
@@ -13,44 +14,63 @@ ${CameraUniformBlockString}
 ${longLatRadToMercator}
 ${longLatRadToCartesian3D}
 ${cartesian3DToGLPosition}
-${mercatorXYTo2DPoint}
+${mercatorXYToGLPosition}
+
 
 in vec2 start_position;
 in vec2 end_position;
+in float dash_ratio;
 in vec4 color;
 out vec4 v_color;
+out vec2 v_limp;
+out float interpolation;
+out float v_dash_ratio;
+
 
 void main() {
-    
     vec2 longLat;
     if (is3D) {
-        float interpolation = float(gl_VertexID) / ${GLOBE_MIDPOINT_COUNT}.0;
+        interpolation = float(gl_VertexID) / ${GLOBE_MIDPOINT_COUNT - 1}.0;
         longLat = mix(start_position, end_position, interpolation);
         vec3 cartesian = longLatRadToCartesian3D(longLat);
         gl_Position = cartesian3DToGLPosition(cartesian);
+        v_limp = vec2(0.0, 0.0);
     } else {
-        if ( gl_VertexID == 0 ) {
+        interpolation = float(gl_VertexID);
+        if (gl_VertexID % 2 == 0) {
             longLat = start_position;
         } else {
             longLat = end_position;
         }
         vec2 mercator = longLatRadToMercator(longLat);
-        gl_Position = mercatorXYTo2DPoint(mercator);
+        v_limp = mercator;
+        gl_Position = mercatorXYToGLPosition(mercator);
     }
+    // if ( gl_VertexID % 2 == 0) {v_color = color;}
+    // else {v_color = vec4(0.0, 0.0, 0.0, 0.0);}
     v_color = color;
+    v_dash_ratio = dash_ratio;
 }
-`
+`;
 
 const fragmentShader = `#version 300 es
+${POLE}
 precision highp float;
 uniform float opacity;
 in vec4 v_color;
 out vec4 color;
+in float interpolation;
+in float v_dash_ratio;
+in vec2 v_limp;
 void main() {
+    if (v_limp.x < -POLE || v_limp.x > POLE || v_limp.y < -POLE || v_limp.y > POLE) { discard; }
     color = v_color;
     color.a *= opacity;
+    if (interpolation > 0.95) { return; }
+    if (fract(interpolation / (2.0 * v_dash_ratio)) < 0.5) { color.a /= 4.0; }
+
 }
-`
+`;
 
 
 class Logic {
@@ -65,7 +85,8 @@ class Logic {
             // assign attribute locations
             gl.bindAttribLocation(program, 0, "start_position");
             gl.bindAttribLocation(program, 1, "end_position");
-            gl.bindAttribLocation(program, 2, "color");
+            gl.bindAttribLocation(program, 2, "dash_ratio");
+            gl.bindAttribLocation(program, 3, "color");
         }
 
         {
@@ -87,9 +108,8 @@ class Logic {
 
 
     draw(vao, length, opacity) {
-        const { gl, program, globe } = this;
+        const { gl, program, globe, cameraBlockTotem, cameraBlockBindingPoint } = this;
         gl.useProgram(program);
-        const { cameraBlockTotem, cameraBlockBindingPoint } = this;
         cameraBlockTotem.bind(cameraBlockBindingPoint);
         gl.bindVertexArray(vao);
         if (opacity !== this._lastOpacity) {
@@ -97,23 +117,75 @@ class Logic {
             this._lastOpacity = opacity;
         }
         const drawCount = globe.api_GetCurrentGeometry() === 0 ? GLOBE_MIDPOINT_COUNT : 2;
-        gl.disable(gl.DEPTH_TEST);
+        // gl.disable(gl.DEPTH_TEST);
         gl.drawArraysInstanced(gl.LINE_STRIP, 0, drawCount, length);
         gl.bindVertexArray(null);
         cameraBlockTotem.unbind(cameraBlockBindingPoint);
-        gl.enable(gl.DEPTH_TEST);
+        // gl.enable(gl.DEPTH_TEST);
     }
 
 
     createBufferManager({ capacity = 10, bufferType = "DYNAMIC_DRAW" } = {}) {
         return new BufferManager(this.globe, { capacity, bufferType });
     }
+
+
+
+    //
+    createVAO(startPotisionBufferObj, endPositionBufferObj, dashRatioBufferObj, colorBufferObj) {
+        const { gl } = this;
+        const vao = gl.createVertexArray();
+        gl.bindVertexArray(vao);
+        {
+            const { buffer, stride = 0, offset = 0 } = startPotisionBufferObj;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(0);
+            gl.vertexAttribPointer(0, 2, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(0, 1);
+        }
+        {
+
+            const { buffer, stride = 0, offset = 0 } = endPositionBufferObj;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(1);
+            gl.vertexAttribPointer(1, 2, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(1, 1);
+        }
+
+        {
+            const { buffer, stride = 0, offset = 0 } = dashRatioBufferObj;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(2);
+            gl.vertexAttribPointer(2, 1, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(2, 1);
+        }
+
+        {
+            const { buffer, stride = 0, offset = 0 } = colorBufferObj;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(3);
+            gl.vertexAttribPointer(3, 4, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(3, 1);
+        }
+        gl.bindVertexArray(null);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        return vao;
+
+    }
+
+
+    free() {
+        if (this.isFreed) return;
+        programCache.releaseProgram(this.globe, CameraUniformBlockTotem);
+        this.gl.deleteProgram(this.program);
+        this.isFreed = true;
+    }
 }
 
 
 class BufferManager extends BufferOffsetManger {
 
-    constructor(globe, { capacity = 10, bufferType = "DYNAMIC_DRAW" } = {}) {
+    constructor(globe, { capacity = 10, bufferType = "DYNAMIC_DRAW", } = {}) {
         super(ITEM_SIZE, { capacity, bufferType });
         this.globe = globe
         this.gl = globe.gl;
@@ -133,10 +205,13 @@ class BufferManager extends BufferOffsetManger {
             gl.enableVertexAttribArray(1);
             gl.vertexAttribPointer(1, 2, gl.FLOAT, false, ITEM_SIZE * 4, 8);
             gl.enableVertexAttribArray(2);
-            gl.vertexAttribPointer(2, 4, gl.FLOAT, false, ITEM_SIZE * 4, 16);
+            gl.vertexAttribPointer(2, 1, gl.FLOAT, false, ITEM_SIZE * 4, 16);
+            gl.enableVertexAttribArray(3);
+            gl.vertexAttribPointer(3, 4, gl.FLOAT, false, ITEM_SIZE * 4, 20);
             gl.vertexAttribDivisor(0, 1);
             gl.vertexAttribDivisor(1, 1);
             gl.vertexAttribDivisor(2, 1);
+            gl.vertexAttribDivisor(3, 1);
             gl.bindVertexArray(null);
         }
     }
@@ -150,14 +225,16 @@ class BufferManager extends BufferOffsetManger {
         this.autoExtendBuffer(items.length)
         const { gl, buffer, globe } = this;
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-        for (let { key, long, lat, endLong, endLat, rgba } of items) {
-
+        for (let { key, long, lat, endLong, endLat, rgba, dashRatio = 1 } of items) {
+            console.log(key, dashRatio, "dashRatio");
             const payload = new Float32Array([
                 long,
                 lat,
                 endLong,
                 endLat,
+                dashRatio,
                 ...rgba]);
+
             const offset = this.getOffset(key) | this.nextOffset();
             gl.bufferSubData(gl.ARRAY_BUFFER, offset, payload);
             this.setOffset(key, offset);
@@ -173,12 +250,13 @@ class BufferManager extends BufferOffsetManger {
     updateBulk(items) {
         const { gl, buffer, globe } = this;
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-        for (let { key, long, lat, endLong, endLat, rgba } of items) {
+        for (let { key, long, lat, endLong, endLat, rgba, dashRatio = 1 } of items) {
             const payload = new Float32Array([
                 long,
                 lat,
                 endLong,
                 endLat,
+                dashRatio,
                 ...rgba]);
             const offset = this.getOffset(key);
             if (offset !== undefined) {
@@ -198,12 +276,13 @@ class BufferManager extends BufferOffsetManger {
     updateCoordinatesBulk(items) {
         const { gl, buffer, globe } = this;
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-        for (let { key, long, lat, endLong, endLat } of items) {
+        for (let { key, long, lat, endLong, endLat, dashRatio = 1 } of items) {
             const payload = new Float32Array([
                 long,
                 lat,
                 endLong,
-                endLat]);
+                endLat,
+                dashRatio]);
             const offset = this.getOffset(key);
             if (offset !== undefined) {
                 gl.bufferSubData(gl.ARRAY_BUFFER, offset, payload);
@@ -227,7 +306,7 @@ class BufferManager extends BufferOffsetManger {
             const payload = new Float32Array([...rgba]);
             const offset = this.getOffset(key);
             if (offset !== undefined) {
-                gl.bufferSubData(gl.ARRAY_BUFFER, offset + 16, payload);
+                gl.bufferSubData(gl.ARRAY_BUFFER, offset + 20, payload);
             } else {
                 console.warn("key not found", key);
             }
@@ -262,6 +341,6 @@ class BufferManager extends BufferOffsetManger {
 
 export const LineOnGlobeCache = Object.freeze({
     get: (globe) => { return noRegisterGlobeProgramCache.getProgram(globe, Logic) },
-    free: (globe) => { return noRegisterGlobeProgramCache.releaseProgram(globe, Logic) }
+    release: (globe) => { return noRegisterGlobeProgramCache.releaseProgram(globe, Logic) }
 });
 

package/programs/rings/distancering/circleflatprogram.js

@@ -9,7 +9,7 @@ const vertexShader = `#version 300 es ` +
     shaderfunctions.R +
     shaderfunctions.POLE +
     CameraUniformBlockString +
-    shaderfunctions.mercatorXYTo2DPoint +
+    shaderfunctions.mercatorXYToGLPosition +
     shaderfunctions.longLatRadToMercator +
     shaderfunctions.longLatRadToCartesian3D +
     shaderfunctions.circleLimpFromLongLatRadCenterCartesian3D +
@@ -46,7 +46,7 @@ void main() {
         limp = circleLimpFromLongLatRadCenterMercatorRealDistance(center, radius, angle);
     }   
     v_limp = limp;
-    gl_Position = mercatorXYTo2DPoint(limp);
+    gl_Position = mercatorXYToGLPosition(limp);
     
 }`;