@pirireis/webglobeplugins 0.16.7 → 0.17.1

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";
@@ -25,19 +25,14 @@ ${CameraUniformBlockString}
 
 ${cartesian3DToGLPosition}
 in vec3 a_position;
-in vec2 a_longLat;
+in vec2 a_xy;
 uniform sampler2DArray u_demTexture; // <-- changed from array to single
 uniform vec4 u_demTextureBBOX[6];
-
+uniform vec2 u_textureDataCoverRatio[6];
+uniform int u_breakLoopIndex;
 
 ${styleBlockManager.glslCode()}
-
-
-// TODO: light directioni 
-// out vec3 v_position;
-// out vec3 v_normal;
-// out vec2 v_textureCoord;
-
+// Todo: light direction. 
 out vec4 v_color;
 
 
@@ -46,23 +41,35 @@ ${isPointInBBox}
 void main() {
 
     float elevation = ${WORLD_RADIUS_3D}; // default elevation at sea level
+    float altitude = 0.0;
     v_color = vec4(1.0, 1.0, 1.0, 1.0); // default color white
+
     for (int i = 0; i < 6; i++) {
-        if (isPointInBBox(a_longLat, u_demTextureBBOX[i])) {
-            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 / 100.0); // color from blue to red based on altitude
-            break;
-     }
+        if (isPointInBBox(a_xy, u_demTextureBBOX[i])) {
+            vec2 uv = (a_xy - u_demTextureBBOX[i].xy) / (u_demTextureBBOX[i].zw - u_demTextureBBOX[i].xy); 
+            // uv.y = 1.0 - uv.y; // flip y coordinate
+            // rescale and transform uv to fit in the texture data cover bbox
+            uv *= u_textureDataCoverRatio[i];
+            altitude = texture(u_demTexture, vec3(uv, float(i))).r;
+            if (altitude != 0.0) {
+                break;
+            }
+        }
     }
     if (u_color.a > 0.0) {
         v_color = u_color;
+    } else {
+        if ( altitude > 0.00001 ) {
+            v_color = mix(vec4(1.0, 1.0, 1.0, 1.0), vec4(1.0, 0.2, 0.2, 1.0), altitude / 2.0); // color from white to red based on altitude
+        } else {
+            // white 
+            v_color = vec4(1.0, 1.0, 1.0, 0.5);
+        }
     }
     v_color.a *= u_opacity; 
-    vec3 position = a_position * elevation;
+    vec3 position = a_position * (elevation + altitude * 2.0);
     gl_Position = cartesian3DToGLPosition(position);
-    gl_PointSize = u_pointSize;
+    gl_PointSize = 6.0; //u_pointSize;
 }
 `;
 const fragmentShaderSource = `#version 300 es
@@ -75,6 +82,10 @@ void main() {
     outColor = v_color;
 }
 `;
+function resCalculation(sourceResolution, mergeCount) {
+    return sourceResolution + (mergeCount - 1) * (sourceResolution - 1);
+}
+const RESOLUTION = resCalculation(5, 12); // 5 is tile dimension length, 12 is merge count
 export class TextureDemTriangles {
     globe;
     gl;
@@ -88,12 +99,14 @@ export class TextureDemTriangles {
     locations = {
         attributes: {
             a_position: -1,
-            a_longLat: -1,
+            a_xy: -1,
         },
         uniforms: {
             u_demTexture: -1,
             u_demTextureBBOX: -1,
+            u_textureDataCoverRatio: -1,
             u_style: -1,
+            u_breakLoopIndex: -1,
         }
     };
     constructor(globe) {
@@ -104,19 +117,23 @@ export class TextureDemTriangles {
         this.cameraUniformBlock.assignBindingPoint(this.program, uniformBindingPoints.camera);
         // get attribute locations
         this.locations.attributes.a_position = this.gl.getAttribLocation(this.program, 'a_position');
-        this.locations.attributes.a_longLat = this.gl.getAttribLocation(this.program, 'a_longLat');
+        this.locations.attributes.a_xy = this.gl.getAttribLocation(this.program, 'a_xy');
         // 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_textureDataCoverRatio = this.gl.getUniformLocation(this.program, 'u_textureDataCoverRatio');
+        this.locations.uniforms.u_breakLoopIndex = this.gl.getUniformLocation(this.program, 'u_breakLoopIndex');
         this.locations.uniforms.u_style = this.gl.getUniformBlockIndex(this.program, 'Style');
         this.gl.uniformBlockBinding(this.program, this.locations.uniforms.u_style, uniformBindingPoints.style);
         // create 3d texture
         const texture = this.gl.createTexture();
         this.gl.bindTexture(this.gl.TEXTURE_2D_ARRAY, texture);
-        // this.gl.texImage3D(this.gl.TEXTURE_2D_ARRAY, 0, this.gl.R32F, 25, 25, 6, 0, this.gl.RED, this.gl.FLOAT, null);
-        this.gl.texStorage3D(this.gl.TEXTURE_2D_ARRAY, 1, this.gl.R32F, 5, 5, 6);
+        // Calculate correct size: tileDimensionLength + (mergeCount - 1) * (tileDimensionLength - 1)
+        // For tileDimensionLength=5, mergeCount=8: 5 + 7*4 = RESOLUTION
+        this.gl.texStorage3D(this.gl.TEXTURE_2D_ARRAY, 1, this.gl.R32F, RESOLUTION, RESOLUTION, 6);
         // set texture parameters
         const ext = this.gl.getExtension('OES_texture_float_linear');
+        console.log('OES_texture_float_linear extension:', ext);
         this.gl.texParameteri(this.gl.TEXTURE_2D_ARRAY, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
         this.gl.texParameteri(this.gl.TEXTURE_2D_ARRAY, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
         this.gl.texParameteri(this.gl.TEXTURE_2D_ARRAY, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
@@ -128,11 +145,17 @@ export class TextureDemTriangles {
         const vao = this.gl.createVertexArray();
         this.gl.bindVertexArray(vao);
         attributeLoader(this.gl, pos3dBufferInfo, this.locations.attributes.a_position, 3);
-        attributeLoader(this.gl, longLatBufferInfo, this.locations.attributes.a_longLat, 2);
+        attributeLoader(this.gl, longLatBufferInfo, this.locations.attributes.a_xy, 2);
         this.gl.bindVertexArray(null);
         return vao;
     }
-    setDemTextures(demTexturesData, demTextureBBOX) {
+    setDemTextures(demTexturesData, demTextureBBOX, coverRatio) {
+        // Add validation for maximum layers
+        const maxLayers = this.gl.getParameter(this.gl.MAX_ARRAY_TEXTURE_LAYERS);
+        if (demTexturesData.length > Math.min(maxLayers, 6)) {
+            console.error(`Too many DEM textures: ${demTexturesData.length}, max supported: ${Math.min(maxLayers, 6)}`);
+            return;
+        }
         // bind textures to texture units
         const gl = this.gl;
         gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.texture);
@@ -142,23 +165,33 @@ export class TextureDemTriangles {
         // bind and upload each texture to the 3D texture array
         for (let i = 0; i < demTexturesData.length; i++) {
             const data = demTexturesData[i];
-            if (data.length === 5 * 5) { // <-- FIXED
-                gl.texSubImage3D(gl.TEXTURE_2D_ARRAY, 0, 0, 0, i, 5, 5, 1, gl.RED, gl.FLOAT, new Float32Array(data));
+            if (data.length === RESOLUTION * RESOLUTION) { // <-- FIXED
+                gl.texSubImage3D(gl.TEXTURE_2D_ARRAY, 0, 0, 0, i, RESOLUTION, RESOLUTION, 1, gl.RED, gl.FLOAT, new Float32Array(data));
+            }
+            else {
+                console.warn(`DEM texture ${i} has incorrect size: ${data.length}, expected: ${RESOLUTION * RESOLUTION}`);
             }
         }
         // set uniform for texture units
         const bboxVec4Array = new Float32Array(6 * 4);
         for (let i = 0; i < demTextureBBOX.length; i++) {
             const bbox = demTextureBBOX[i];
-            bboxVec4Array[i * 4 + 0] = bbox.northWest[0];
-            bboxVec4Array[i * 4 + 1] = bbox.southEast[1];
-            bboxVec4Array[i * 4 + 2] = bbox.southEast[0];
-            bboxVec4Array[i * 4 + 3] = bbox.northWest[1];
+            bboxVec4Array[i * 4 + 0] = bbox.ll[0];
+            bboxVec4Array[i * 4 + 1] = bbox.ll[1];
+            bboxVec4Array[i * 4 + 2] = bbox.ur[0];
+            bboxVec4Array[i * 4 + 3] = bbox.ur[1];
         }
         const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
         gl.useProgram(this.program);
         gl.uniform4fv(this.locations.uniforms.u_demTextureBBOX, bboxVec4Array);
+        if (coverRatio) {
+            gl.uniform2fv(this.locations.uniforms.u_textureDataCoverRatio, new Float32Array(coverRatio.flatMap(ratio => [ratio.x, ratio.y])));
+        }
+        else {
+            gl.uniform2fv(this.locations.uniforms.u_textureDataCoverRatio, new Float32Array(12).fill(1.0));
+        }
         gl.bindTexture(gl.TEXTURE_2D_ARRAY, null);
+        gl.uniform1i(this.locations.uniforms.u_breakLoopIndex, demTexturesData.length);
         gl.useProgram(currentProgram);
     }
     createUBO(bufferReadType = "STATIC_DRAW") {
@@ -178,7 +211,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 +223,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 +244,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.RESOLUTION, 0.RESOLUTION)
+    // 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;

package/programs/totems/camerauniformblock.js

@@ -2,7 +2,6 @@ import { globeProgramCache } from "../programcache";
 import { fromLongLatToUnitVector } from "../../Math/vec3";
 import { RADIAN } from "../../Math/methods";
 import { GlobeChangeObserver } from "./globe-changes";
-// import { approximatedZoomLevel } from "../../util/geometry/index";
 export const CameraUniformBlockString = `
 layout(std140) uniform CameraUniformBlock {
     mat4 view; // 64 bytes           0
@@ -93,49 +92,39 @@ export class CameraUniformBlockTotem {
         const globe = this.globe;
         this._globeChangeObserver?.checkChanges();
         gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
-        {
-            // view, projection, translate
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 0, modelView);
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 64, projection);
-            traslateFloat32.set([translate.x, translate.y, translate.z], 0);
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 128, traslateFloat32);
-        }
-        {
-            // zoom level
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 160, new Float32Array([globe.api_GetCurrentLODWithDecimal()]));
-        }
-        {
-            // mapWH
-            if (globe.api_GetCurrentGeometry() === 1) {
-                const { width, height } = globe.api_GetCurrentWorldWH();
-                mapWHFloat32.set([width, height]);
-                gl.bufferSubData(gl.UNIFORM_BUFFER, 144, mapWHFloat32);
-            }
-        }
-        {
-            // float world_distance; // 4 bytes 164
-            // float world_tilt; // 4 bytes     168
-            // float world_north_angle; // 4 bytes 172
-            // vec2 world_center_radian; // 8 bytes    180
-            const { CenterLong, CenterLat, Distance, Tilt, NorthAng } = globe.api_GetCurrentLookInfo();
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 164, new Float32Array([
-                Distance,
-                Radian * Tilt,
-                Radian * NorthAng,
-                Radian * CenterLong,
-                Radian * CenterLat,
-            ]));
+        // view, projection, translate
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 0, modelView);
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 64, projection);
+        traslateFloat32.set([translate.x, translate.y, translate.z], 0);
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 128, traslateFloat32);
+        // zoom level
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 160, new Float32Array([globe.api_GetCurrentLODWithDecimal()]));
+        // mapWH
+        if (globe.api_GetCurrentGeometry() === 1) {
+            const { width, height } = globe.api_GetCurrentWorldWH();
+            mapWHFloat32.set([width, height]);
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 144, mapWHFloat32);
         }
+        // float world_distance; // 4 bytes 164
+        // float world_tilt; // 4 bytes     168
+        // float world_north_angle; // 4 bytes 172
+        // vec2 world_center_radian; // 8 bytes    180
+        const { CenterLong, CenterLat, Distance, Tilt, NorthAng } = globe.api_GetCurrentLookInfo();
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 164, new Float32Array([
+            Distance,
+            Radian * Tilt,
+            Radian * NorthAng,
+            Radian * CenterLong,
+            Radian * CenterLat,
+        ]));
         // this._frustumPlanes = getFrustumPlanes(projection, translate);
         gl.bindBuffer(gl.UNIFORM_BUFFER, null);
-        {
-            // isMoved
-            const currentLOD = globe.api_GetCurrentLODWithDecimal();
-            this._isMovedParams.isMoved =
-                this._isMovedParams.lastLod !== currentLOD ||
-                    globe.api_IsScreenMoving();
-            this._isMovedParams.lastLod = currentLOD;
-        }
+        // isMoved
+        const currentLOD = globe.api_GetCurrentLODWithDecimal();
+        this._isMovedParams.isMoved =
+            this._isMovedParams.lastLod !== currentLOD ||
+                globe.api_IsScreenMoving();
+        this._isMovedParams.lastLod = currentLOD;
         this.__setCameraVectors();
         // this._calculateAproximatedLOD();
     }
@@ -146,7 +135,7 @@ export class CameraUniformBlockTotem {
         const globe = this.globe;
         const currentGeom = globe.api_GetCurrentGeometry();
         if (currentGeom === 0) {
-            const { Fp, FUPos } = globe;
+            const { Fp } = globe; // FUPos
             const cameraVector = [Fp.x, Fp.y, Fp.z];
             const length = Math.sqrt(cameraVector.reduce((sum, val) => sum + val * val, 0));
             this._normalizedCameraVector[0] = cameraVector[0] / length;

package/programs/two-d/pixel-padding-for-compass.js

@@ -1,4 +1,4 @@
-import { createProgram } from "../../util";
+import { createProgram } from "../../util/webglobjectbuilders";
 import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems";
 import { noRegisterGlobeProgramCache } from "../programcache";
 const vertexCount = 720;
@@ -73,29 +73,19 @@ class Logic {
         this._lastOpacity = 1;
         this.program = createProgram(this.gl, vertexShaderSource, fragmentShaderSource);
         const { gl, program } = this;
-        { // assign attribute locations
-            //             in vec2 screen_coordinate;
-            // in float pixel_radius_small_ratio;
-            // in float pixel_radius_big_ratio;
-            // in vec4 rgba;
-            gl.bindAttribLocation(program, 0, "screen_coordinate");
-            gl.bindAttribLocation(program, 1, "pixel_radius_small_ratio");
-            gl.bindAttribLocation(program, 2, "pixel_radius_big_ratio");
-            gl.bindAttribLocation(program, 3, "rgba");
-        }
-        {
-            this._opacityLocation = gl.getUniformLocation(program, "plugin_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);
-        }
+        gl.bindAttribLocation(program, 0, "screen_coordinate");
+        gl.bindAttribLocation(program, 1, "pixel_radius_small_ratio");
+        gl.bindAttribLocation(program, 2, "pixel_radius_big_ratio");
+        gl.bindAttribLocation(program, 3, "rgba");
+        this._opacityLocation = gl.getUniformLocation(program, "plugin_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 { globe, gl, program, cameraBlockTotem, cameraBlockBindingPoint, _opacityLocation } = this;

package/programs/vectorfields/logics/drawrectangleparticles.js

@@ -1,5 +1,4 @@
-import { createProgram } from "../../../util";
-import { UBO_BINDING_POINT, shaderUboSource } from "./ubo.js";
+import { createProgram } from "../../../util/webglobjectbuilders";
 import { glProgramCache } from "../../programcache";
 import { SeaWaveUbo } from "./ubo-new";
 /**
@@ -64,10 +63,12 @@ void main(){
     outColor = vec4(base_color, 1.0);
 }`;
 class Logic {
+    gl;
+    program;
+    _vector_field_location;
     constructor(gl) {
         this.gl = gl;
-        [this.program,
-            this._vector_field_location] = this._createProgram();
+        [this.program, this._vector_field_location] = this._createProgram();
         // this.decoyBuffer = new DecoyBufferManager(gl);
     }
     _createProgram() {
@@ -76,13 +77,13 @@ class Logic {
         // ubo point
         // const ubo_location = gl.getUniformBlockIndex(program, 'UBO');
         // gl.uniformBlockBinding(program, ubo_location, UBO_BINDING_POINT);
-        SeaWaveUbo.assignBindingPoint(gl, program, 0);
+        SeaWaveUbo.assignBindingPoint(gl, program);
         return [program, gl.getUniformLocation(program, 'u_vector_field')];
     }
     /**
-     * @param {*} bufferManager | PingPongBufferManager
-     * @param {*} vectorTexture | RG32F texture R: x, G: y
-     * @param {*} uboManager | WaveParticalUboManager under ubo.js
+     * @param bufferManager | PingPongBufferManager
+     * @param vectorTexture | RG32F texture R: x, G: y
+     * @param uboManager | WaveParticalUboManager under ubo.js
      */
     draw(bufferManager, vectorTexture, uboManager) {
         const { gl, program } = this;

package/programs/vectorfields/logics/drawrectangleparticles1.js

@@ -0,0 +1,112 @@
+import { createProgram } from "../../../util/webglobjectbuilders";
+import { glProgramCache } from "../../programcache";
+import { SeaWaveUbo } from "./ubo-new";
+/**
+ * [+] ubo
+ */
+const vertexShaderSource = `#version 300 es
+precision highp float;
+` + SeaWaveUbo.glslCode() + `
+uniform sampler2D u_vector_field;
+in vec2 in_position;
+out vec3 base_color;
+
+
+vec2 read_value(const vec2 uv) {
+    vec2 value = texture(u_vector_field, uv).rg;
+    if ( value.x == escape_value || value.y == escape_value) {
+        return vec2(0.0);
+    }
+    return value;
+}
+    
+
+vec2 lookup_wind(const vec2 uv) { // gerek kalmayabilir. sampler linear methodu ayni isi yapiyor 
+    // return texture(u_vector_field, uv).rg; // lower-res hardware filtering
+    vec2 res = vec2(textureSize(u_vector_field, 0));
+    vec2 px = 1.0 / res;
+    vec2 vc = (floor(uv * res)) * px;
+    vec2 f = fract(uv * res);
+    vec2 tl = read_value(vc).rg;
+    vec2 tr = read_value(vc + vec2(px.x, 0)).rg;
+    vec2 bl = read_value(vc + vec2(0, px.y)).rg;
+    vec2 br = read_value(vc + px).rg;
+
+    return mix(mix(tl, tr, f.x), mix(bl, br, f.x), f.y);
+}
+
+
+void main(){
+    vec2 direction_vector = lookup_wind(in_position);
+    if (direction_vector.r == 0.0 && direction_vector.g == 0.0) return;
+    
+
+    vec2 limp;
+    if ( 0 == gl_VertexID) { limp = -tail_wing_base_limp; }
+    else if ( 1 == gl_VertexID) { limp = vec2( tail_wing_base_limp.x, -tail_wing_base_limp.y); }
+    else if ( 2 == gl_VertexID) { limp = tail_wing_base_limp; }
+    else  { limp = vec2(-tail_wing_base_limp.x,  tail_wing_base_limp.y); } // if ( 3 == gl_VertexID)
+
+    limp = (limp  * mat2( 
+        direction_vector.x, -direction_vector.y,
+        direction_vector.y, direction_vector.x)) / draw_texture_size;
+
+    vec2 pos = in_position * 2.0 - 1.0;
+    gl_Position = vec4(pos + limp, 0.0, 1.0);
+    base_color = color;
+}`;
+const fragmentShaderSource = `#version 300 es
+precision highp float;
+out vec4 outColor;
+in vec3 base_color;
+void main(){
+    outColor = vec4(base_color, 1.0);
+}`;
+class Logic {
+    constructor(gl) {
+        this.gl = gl;
+        [this.program,
+            this._vector_field_location] = this._createProgram();
+        // this.decoyBuffer = new DecoyBufferManager(gl);
+    }
+    _createProgram() {
+        const gl = this.gl;
+        const program = createProgram(gl, vertexShaderSource, fragmentShaderSource);
+        // ubo point
+        // const ubo_location = gl.getUniformBlockIndex(program, 'UBO');
+        // gl.uniformBlockBinding(program, ubo_location, UBO_BINDING_POINT);
+        SeaWaveUbo.assignBindingPoint(gl, program, 0);
+        return [program, gl.getUniformLocation(program, 'u_vector_field')];
+    }
+    /**
+     * @param {*} bufferManager | PingPongBufferManager
+     * @param {*} vectorTexture | RG32F texture R: x, G: y
+     * @param {*} uboManager | WaveParticalUboManager under ubo.js
+     */
+    draw(bufferManager, vectorTexture, uboManager) {
+        const { gl, program } = this;
+        gl.useProgram(program);
+        gl.bindVertexArray(bufferManager.getSourceVao());
+        // gl.bindVertexArray(this.decoyBuffer.getSourceVao());
+        uboManager.bind();
+        gl.activeTexture(gl.TEXTURE0);
+        gl.uniform1i(this._vector_field_location, 0);
+        gl.bindTexture(gl.TEXTURE_2D, vectorTexture);
+        gl.drawArraysInstanced(gl.TRIANGLE_FAN, 0, 4, bufferManager.length);
+        gl.drawArraysInstanced(gl.POINTS, 0, 4, bufferManager.length);
+        gl.bindVertexArray(null);
+        uboManager.unbind();
+    }
+    free() {
+        this.gl.deleteProgram(this.program);
+        this.program = null;
+    }
+}
+export const drawRectangleParticlesProgramCache = Object.freeze({
+    getProgram: (gl) => {
+        return glProgramCache.getProgram(gl, Logic);
+    },
+    releaseProgram: (gl) => {
+        glProgramCache.releaseProgram(gl, Logic);
+    }
+});

package/programs/vectorfields/logics/pixelbased.js

@@ -1,5 +1,4 @@
-import { createShader } from "../../../util";
-import { UBO_SIZE, UBO_BINDING_POINT, shaderUboSource } from "./ubo.js";
+import { createShader } from "../../../util/webglobjectbuilders";
 import { glProgramCache } from "../../programcache";
 import { SeaWaveUbo } from "./ubo-new";
 // program output is buffer

package/programs/vectorfields/pingpongbuffermanager.js

@@ -5,7 +5,7 @@
  *
  * update coords and draw particles programs will use this class.
  */
-export default class {
+export class PingPongBufferManager {
     constructor(gl, particleCount, inPositionLocation = 0) {
         this.gl = gl;
         this._inPositionLocation = inPositionLocation;

package/range-tools-on-terrain/bearing-line/adapters.js

@@ -18,7 +18,7 @@ export const flatLinesInputAdapter = (bearingLine) => {
     };
 };
 export const flatLinesBearingInputAdapter = (bearingLine) => {
-    const { long, lat, rgba, key, bearingLat = 0, bearingLong = 0, msl } = bearingLine;
+    const { long, lat, rgba, key, bearingLat = 0, bearingLong = 0 } = bearingLine;
     return {
         key: key,
         start: [long, lat],

package/range-tools-on-terrain/circle-line-chain/adapters.js

@@ -1,9 +1,4 @@
 export const keyMethod = (chainKey, nodeKey) => `${chainKey}_${nodeKey}`;
-const distance = (node1, node2) => {
-    const dx = node1.long - node2.long;
-    const dy = node1.lat - node2.lat;
-    return Math.sqrt(dx * dx + dy * dy);
-};
 export const circleDataAdaptor = (globe, chain) => {
     const circleInputs = [];
     const { chainKey, chainProperties, nodes } = chain;

package/range-tools-on-terrain/circle-line-chain/plugin.js

@@ -102,7 +102,7 @@ export class CircleLineChainPlugin {
             return;
         const chainKeys = [];
         const chainsToClean = [];
-        for (const { chainKey, chainProperties, nodes } of chains) {
+        for (const { chainKey } of chains) {
             if (this._chainListMap.hasChain(chainKey)) {
                 chainsToClean.push(chainKey);
             }