@pirireis/webglobeplugins 0.8.6 → 0.8.7

package/programs/globeshell/wiggle/logic.js

@@ -2,7 +2,7 @@ import { createProgram } from '../../../util';
 
 
 
-export default class {
+export default class Logic {
     constructor() {
         this.id = "GlobeShellProgram";
         this.description = "This program implements flyweight pattern for globe." +
@@ -41,21 +41,17 @@ export default class {
             float u_opacity;
         };
 
-
         uniform mat4 u_model_view_matrix;
         uniform mat4 u_projection_matrix;
         uniform vec3 u_translate;
 
-
         uniform vec2 u_mapWH;
         uniform vec2 u_scrWH;
 
-
-        uniform bool u_is3D; // TODO: Calculate 2 position from resolution, u_grid_size_rad and u_grid_offset_rad
+        uniform bool u_is3D; 
 
         out float v_opacity;
         out vec2 v_texture_coordinate;
-
         
         vec2 f_texCoord(){
 
@@ -225,7 +221,7 @@ export default class {
 
     draw(texture, shellBlockDataManager, drawLines = false) {
         const { gl, programWrapper, _vao, _drawCount } = this;
-        const { program, u_texture, u_time } = programWrapper;
+        const { program, u_texture } = programWrapper;
         gl.useProgram(program);
         gl.bindVertexArray(_vao);
         gl.activeTexture(gl.TEXTURE0);

package/programs/globeshell/wiggle/object.js

@@ -13,7 +13,7 @@ export default class GlobeShell {
             u_opacity = 1,
             wiggleInKM = 0,
             wiggleSpeed = 0,
-            eastWestTied,
+            // eastWestTied, Not implemented yet
         } = {}) {
         this.gl = gl;
         this.globe = globe;
@@ -86,7 +86,6 @@ export default class GlobeShell {
 
 
     free() {
-        // TODO: What else to free. Does textures and buffers need to be freed?
         globeProgramCache.releaseProgram(this.globe, GlobeShellProgram);
         this.shellBlockManager.free();
     }

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

@@ -1,7 +1,8 @@
 import { createProgram } from "../../util/webglobjectbuilders";
 import { CameraUniformBlockString, CameraUniformBlockTotemCache } from "../totems/camerauniformblock";
 import { noRegisterGlobeProgramCache } from "../programcache";
-import { vaoAttributeLoader } from "../../util/account/util";
+// import { vaoAttributeLoader } from "../../util/account/util";
+import { attributeLoader } from "../../util/gl-util/buffer/integrate-buffer";
 import {
     longLatRadToMercator, longLatRadToCartesian3D, cartesian3DToGLPosition, mercatorXYToGLPosition, realDistanceOnSphereR1,
     circleLimpFromLongLatRadCenterCartesian3D_accurate,
@@ -40,6 +41,7 @@ in float radius;
 in vec4 color;
 in float dash_ratio;
 in float dash_opacity;
+in float initial_angle;
 
 out float interpolation;
 out vec4 v_color;
@@ -49,7 +51,7 @@ void main() {
     interpolation = float( gl_VertexID ) / ${EDGE_COUNT_ON_SPHERE}.0;
     if ( is3D ) {
         float angle = PI * 2.0 * interpolation;
-        vec3 position = circleLimpFromLongLatRadCenterCartesian3D_accurate(center_position3d, radius, angle);
+        vec3 position = circleLimpFromLongLatRadCenterCartesian3D_accurate(center_position3d, radius, angle + initial_angle);
         gl_Position = cartesian3DToGLPosition(position);
     } else {
         return;
@@ -109,6 +111,7 @@ class Logic {
             gl.bindAttribLocation(program, 2, "color");
             gl.bindAttribLocation(program, 3, "dash_ratio");
             gl.bindAttribLocation(program, 4, "dash_opacity");
+            gl.bindAttribLocation(program, 5, "initial_angle");
         }
 
         this.cameraBindingPoint = 0;
@@ -117,31 +120,21 @@ class Logic {
         gl.uniformBlockBinding(program, cameraBlockLocation, this.cameraBindingPoint);
     }
 
-    createVAO(center3dObj, radiusObj, colorObj, dashRatioObj, dashOpacityObj) {
+    createVAO(center3dObj, radiusObj, colorObj, dashRatioObj, dashOpacityObj, initialAngleObj) {
         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 } = center3dObj;
-            vaoAttributeLoader(gl, buffer, 0, 3, stride, offset, divisor);
-        }
-        {
-            const { buffer, stride = 0, offset = 0 } = radiusObj;
-            vaoAttributeLoader(gl, buffer, 1, 1, stride, offset, divisor);
-        }
-        {
-            const { buffer, stride = 0, offset = 0 } = colorObj;
-            vaoAttributeLoader(gl, buffer, 2, 4, stride, offset, divisor);
-        }
-        {
-            const { buffer, stride = 0, offset = 0 } = dashRatioObj;
-            vaoAttributeLoader(gl, buffer, 3, 1, stride, offset, divisor);
-        }
-        {
-            const { buffer, stride = 0, offset = 0 } = dashOpacityObj;
-            vaoAttributeLoader(gl, buffer, 4, 1, stride, offset, divisor);
-        }
+
+        attributeLoader(gl, center3dObj, 0, 3, { divisor });
+        attributeLoader(gl, radiusObj, 1, 1, { divisor });
+        attributeLoader(gl, colorObj, 2, 4, { divisor });
+        attributeLoader(gl, dashRatioObj, 3, 1, { divisor });
+        attributeLoader(gl, dashOpacityObj, 4, 1, { divisor });
+        attributeLoader(gl, initialAngleObj, 5, 1, { divisor, escapeValues: [0] });
+
+
         gl.bindVertexArray(null);
         gl.bindVertexArray(null);
         return vao;

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

@@ -69,7 +69,11 @@ 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; }
+    if ( v_limp.x < -POLE || v_limp.x > POLE || v_limp.y < -POLE || v_limp.y > POLE ){ 
+        discard;
+        // 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;
@@ -98,23 +102,19 @@ class Logic {
             mercator_calculation_mode: gl.getUniformLocation(program, "mercator_calculation_mode")
         };
 
-        { // initial uniform values
-            const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
-            gl.useProgram(program);
-            gl.uniform1f(program.uniforms.opacity, 1.0);
-            gl.uniform1i(program.uniforms.edgeCount, EDGE_COUNT);
-            gl.uniform1i(program.uniforms.mercator_calculation_mode, 0);
-            gl.useProgram(currentProgram);
-
-
-        }
+        // initial uniform values
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(program);
+        gl.uniform1f(program.uniforms.opacity, 1.0);
+        gl.uniform1i(program.uniforms.edgeCount, EDGE_COUNT);
+        gl.uniform1i(program.uniforms.mercator_calculation_mode, 0);
+        gl.useProgram(currentProgram);
 
-        {   // assign attribute locations
-            gl.bindAttribLocation(program, 0, "position2d");
-            gl.bindAttribLocation(program, 1, "color");
-            gl.bindAttribLocation(program, 2, "dash_ratio");
-            gl.bindAttribLocation(program, 3, "dash_opacity");
-        }
+        // assign attribute locations
+        gl.bindAttribLocation(program, 0, "position2d");
+        gl.bindAttribLocation(program, 1, "color");
+        gl.bindAttribLocation(program, 2, "dash_ratio");
+        gl.bindAttribLocation(program, 3, "dash_opacity");
 
         this.cameraBindingPoint = 0;
         this.cameraBlockTotem = CameraUniformBlockTotemCache.get(globe);
@@ -128,20 +128,20 @@ class Logic {
         const vao = gl.createVertexArray();
         gl.bindVertexArray(vao);
         {  // make this a function end import from account module. 
-            const { buffer, stride = 0, offset = 0, divisor = 1 } = centerObj;
+            const { buffer, stride = 0, offset = 0 } = centerObj;
             vaoAttributeLoader(gl, buffer, 0, 2, stride, offset, null);
         }
 
         {
-            const { buffer, stride = 0, offset = 0, divisor = 1 } = colorObj;
+            const { buffer, stride = 0, offset = 0 } = colorObj;
             vaoAttributeLoader(gl, buffer, 1, 4, stride, offset, null);
         }
         {
-            const { buffer, stride = 0, offset = 0, divisor = 1 } = dashRatioObj;
+            const { buffer, stride = 0, offset = 0 } = dashRatioObj;
             vaoAttributeLoader(gl, buffer, 2, 1, stride, offset, null);
         }
         {
-            const { buffer, stride = 0, offset = 0, divisor = 1 } = dashOpacityObj;
+            const { buffer, stride = 0, offset = 0 } = dashOpacityObj;
             vaoAttributeLoader(gl, buffer, 3, 1, stride, offset, null);
         }
         gl.bindVertexArray(null);

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

@@ -2,8 +2,8 @@ import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totem
 import { mercatorXYToGLPosition, POLE } from "../../util/shaderfunctions/geometrytransformations";
 import { noRegisterGlobeProgramCache } from "../programcache";
 import { createProgram } from "../../util";
-import { vaoAttributeLoader } from "../../util/account/util";
 import { Z_ALPHA_MODE } from "./util";
+import { attributeLoader } from "../../util/gl-util/buffer/integrate-buffer";
 
 /**
  * This program draws line between points provided from the first and second buffer.
@@ -97,17 +97,16 @@ class Logic {
         }
         gl.useProgram(currentProgram);
     }
-    createVAO(posAObj, posBObj, colorObj) {
 
+
+    createVAO(posAObj, posBObj, colorObj) {
         const { gl } = this;
         const vao = gl.createVertexArray();
-        const type = gl.Float;
         const divisor = 1;
         gl.bindVertexArray(vao);
-        [posAObj, posBObj, colorObj].forEach((obj, index) => {
-            const { buffer, size, stride, offset } = obj;
-            vaoAttributeLoader(gl, buffer, index, size, stride, offset, divisor, type);
-        });
+        attributeLoader(gl, posAObj, 0, 2, { divisor });
+        attributeLoader(gl, posBObj, 1, 2, { divisor });
+        attributeLoader(gl, colorObj, 2, 4, { divisor });
         gl.bindVertexArray(null);
         return vao;
     }

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

@@ -0,0 +1,239 @@
+import { CameraUniformBlockString, CameraUniformBlockTotemCache } from "../totems";
+import { slerp, POLE, R_3D, mercatorXYToGLPosition, cartesian3DToGLPosition } from "../../util/shaderfunctions/geometrytransformations";
+import { createProgram } from "../../util";
+import { noRegisterGlobeProgramCache } from "../programcache";
+import { attributeLoader } from "../../util/gl-util/buffer/integrate-buffer";
+import { UniformBlockManager } from "../../util/gl-util/uniform-block/manager";
+
+import "../../util/gl-util/draw-options/types";
+import { drawInstanced } from "../../util/gl-util/draw-options/methods";
+
+const GLOBE_MIDPOINT_COUNT = 30;
+
+const escapeValue = -1.0;
+
+
+const uniformBindingPoints = {
+    camera: 0,
+    flexible: 1
+}
+
+
+const uniformBlockManager = new UniformBlockManager(
+    'FlexibleAttibutes',
+    [
+        { name: 'u_color', type: 'vec4' },
+        { name: 'u_dash_ratio', type: 'float' },
+        { name: 'u_dash_opacity', type: 'float' }
+    ],
+    uniformBindingPoints.flexible
+)
+
+const vertexShader = `#version 300 es
+precision highp float;
+
+${R_3D}
+${CameraUniformBlockString}
+${slerp}
+${mercatorXYToGLPosition}
+${cartesian3DToGLPosition}
+
+${uniformBlockManager.glslCode()}
+
+in vec2 start_position;
+in vec3 start_position3d;
+in vec2 end_position;
+in vec3 end_position3d;
+
+in float dash_ratio;
+in float dash_opacity;
+in vec4 color;
+
+out float v_dash_ratio;
+out float v_dash_opacity;
+out vec4 v_color;
+
+out vec2 v_limp;
+out float interpolation;
+
+void main() {
+    vec2 longLat;
+
+    v_color = (color.r == -1.0) ? u_color: color;
+    v_dash_ratio = (dash_ratio == -1.0) ? u_dash_ratio : dash_ratio;
+    v_dash_opacity = (dash_opacity == -1.0) ? u_dash_opacity : dash_opacity;
+
+    if (is3D) {
+        interpolation = float(gl_VertexID) / ${GLOBE_MIDPOINT_COUNT - 1}.0;
+        vec3 cartesian = slerp(start_position3d, end_position3d, interpolation);
+        gl_Position = cartesian3DToGLPosition(cartesian);
+        v_limp = vec2(0.0, 0.0);
+    } else {
+        if ( distance( start_position, end_position) > 30000000.0) { return; }
+        interpolation = float(gl_VertexID);
+        if (gl_VertexID % 2 == 0) {
+            longLat = start_position;
+        } else {
+            longLat = end_position;
+        }
+        v_limp = longLat;
+        gl_Position = mercatorXYToGLPosition(longLat);
+    }
+}
+`;
+
+const fragmentShader = `#version 300 es
+${POLE}
+precision highp float;
+
+uniform float opacity;
+
+in float interpolation;
+in vec2 v_limp;
+in vec4 v_color;
+in float v_dash_ratio;
+in float v_dash_opacity;
+
+out vec4 color;
+
+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 ( v_dash_ratio >= 1.0 ) { return; }
+    if (interpolation > 0.95) { return; }
+    if (fract(interpolation / (2.0 * v_dash_ratio)) < 0.5) { color.a *= v_dash_opacity; }
+
+}
+`;
+
+
+class Logic {
+    vaosPublished = [];
+    isFreed = false;
+    constructor(globe) {
+        this.globe = globe;
+        this.gl = globe.gl;
+        this.program = createProgram(this.gl, vertexShader, fragmentShader);
+        this._lastOpacity = 1.0;
+        const { gl, program } = this;
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(program);
+
+        // assign attribute locations
+        gl.bindAttribLocation(program, 0, "start_position");
+        gl.bindAttribLocation(program, 1, "start_position3d");
+        gl.bindAttribLocation(program, 2, "end_position");
+        gl.bindAttribLocation(program, 3, "end_position3d");
+        gl.bindAttribLocation(program, 4, "dash_ratio");
+        gl.bindAttribLocation(program, 5, "dash_opacity");
+        gl.bindAttribLocation(program, 6, "color");
+        this._opacityLocation = gl.getUniformLocation(program, "opacity");
+
+        gl.uniform1f(this._opacityLocation, this._lastOpacity);
+
+        gl.useProgram(currentProgram);
+
+
+
+        this.cameraBlockTotem = CameraUniformBlockTotemCache.get(globe);
+        this.cameraBlockTotem.assignBindingPoint(program, uniformBindingPoints.camera);
+
+
+        this._ubosPublished = [];
+        uniformBlockManager.assignBindingPoint(this.gl, this.program);
+        this._defaultFlexibleUBO = this.createUBO();
+    }
+
+
+    /**
+     * 
+     * @param {*} vao 
+     * @param {DrawRangeIndexParams} drawOptions
+     * @param {number} opacity
+     * @param {Object} flexibleOptions
+     * @param {Array<number, number, number, number>} flexibleOptions.color // 0-1
+     * @param {number} flexibleOptions.dash_opacity
+     * @param {number} flexibleOptions.dash_ratio
+     */
+    draw(vao, drawOptions, opacity, flexibleUBO = null) {
+        const { gl, program, globe, cameraBlockTotem, _defaultFlexibleUBO } = this;
+        gl.useProgram(program);
+        cameraBlockTotem.bind(uniformBindingPoints.camera);
+        gl.bindVertexArray(vao);
+        if (opacity !== this._lastOpacity) {
+            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();
+        drawInstanced(gl, gl.LINE_STRIP, drawOptions, vertexCount);
+        ubo.unbind();
+        gl.bindVertexArray(null);
+        cameraBlockTotem.unbind(uniformBindingPoints.camera);
+    }
+
+
+    createUBO(bufferReadType = "STATIC_DRAW") {
+        const ubo = uniformBlockManager.createUBO(this.gl, bufferReadType);
+        this._ubosPublished.push(ubo);
+        ubo.update(
+            new Map([
+                ["u_color", [1, 1, 1, 1]],
+                ["u_dash_ratio", [1]],
+                ["u_dash_opacity", [1]]
+            ])
+        );
+        return ubo;
+    }
+
+
+
+
+    createVAO(
+        startPotisionBufferObj, startPotision3DBufferObj,
+        endPositionBufferObj, endPosition3DBufferObj,
+        dashRatioBufferObj,
+        dashOpacityBufferObj,
+        colorBufferObj) {
+
+        const { gl } = this;
+        const vao = gl.createVertexArray();
+        gl.bindVertexArray(vao);
+
+        const divisor = 1;
+
+        attributeLoader(gl, startPotisionBufferObj, 0, 2, { divisor });
+        attributeLoader(gl, startPotision3DBufferObj, 1, 3, { divisor });
+        attributeLoader(gl, endPositionBufferObj, 2, 2, { divisor });
+        attributeLoader(gl, endPosition3DBufferObj, 3, 3, { divisor });
+        attributeLoader(gl, dashRatioBufferObj, 4, 1, { divisor, escapeValues: [escapeValue] });
+        attributeLoader(gl, dashOpacityBufferObj, 5, 1, { divisor, escapeValues: [escapeValue] });
+        attributeLoader(gl, colorBufferObj, 6, 4, { divisor, escapeValues: [escapeValue, escapeValue, escapeValue, escapeValue] });
+
+        gl.bindVertexArray(null);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        this.vaosPublished.push(vao);
+        return vao;
+    }
+
+
+    free() {
+        if (this.isFreed) return;
+        CameraUniformBlockTotemCache.release(this.globe);
+        this.gl.deleteProgram(this.program);
+        this.vaosPublished.forEach(vao => this.gl.deleteVertexArray(vao));
+        this._ubosPublished.forEach(ubo => ubo.free());
+        this.isFreed = true;
+    }
+}
+
+
+
+export const LineOnGlobeCache = Object.freeze({
+    get: (globe) => { return noRegisterGlobeProgramCache.getProgram(globe, Logic) },
+    release: (globe) => { return noRegisterGlobeProgramCache.releaseProgram(globe, Logic) }
+});
+

package/programs/line-on-globe/to-the-surface.js

@@ -0,0 +1,129 @@
+import { createProgram } from './util'
+
+import { CameraUniformBlockTotemCache, CameraUniformBlockString } from '../totems';
+import { cartesian3DToGLPosition, R_3D } from '../../util/shaderfunctions/geometrytransformations';
+import { noRegisterGlobeProgramCache } from '../programcache';
+import { attributeLoader } from '../../util/gl-util/buffer/integrate-buffer';
+import '../draw-options/types';
+import { drawInstanced } from '../draw-options/methods';
+
+const vs = `#version 300 es
+${R_3D}
+${CameraUniformBlockString}
+${cartesian3DToGLPosition}
+in vec3 pos3D
+in vec4 color;
+out float ratio;
+out flat vec4 vColor;
+void main(){
+ if ( gl_VertexID  == 0) {
+  gl_Position = cartesian3DToGLPosition(pos3D);
+  ratio =0.0;
+ } else {
+  vec3 sea_level_pos3D = norm(pos3D) * R_3D;
+  gl_Position = cartesian3DToGLPosition(pos3D);
+  ratio = 1.0;
+ }
+ vColor = color;   
+}`;
+
+const fs = `#version 300 es
+uniform float opacity;
+uniform float phase;
+uniform float fadeOpacity;
+in flat vec4 vColor;
+in float ratio;
+out vec4 fragColor;
+void main(){
+ fragColor = vec4( vColor.rgb, vColor.a * opacity);
+ if (fadeOpacity < 1.0) {
+  float alpha= mix( fadeOpacity, vColor.a, fract( ratio + phase ));
+  fragColor.a *= alpha;
+ } 
+}`;
+
+
+
+
+class Logic {
+    constructor(globe) {
+        this.globe = globe;
+        this.gl = globe.gl;
+
+        this.program = createProgram(this.gl, vs, fs);
+        const { gl, program } = this;
+
+        this._opacity = {
+            lastValue: 1.0,
+            location: gl.getUniformLocation(program, 'opacity')
+        }
+        this._phase = {
+            lastValue: 1.0,
+            location: gl.getUniformLocation(program, 'phase')
+        }
+        this._fadeOpacity = {
+            lastValue: 1.0,
+            location: gl.getUniformBlockLocation(program, 'fadeOpacity')
+        }
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(program);
+        [this._opacity, this._phase, this._fadeOpacity].forEach((wrapper) => gl.uniform1f(wrapper.location, wrapper.lastValue))
+        gl.useProgram(currentProgram)
+        gl.useProgram(program);
+        gl.bindAttribLocation(program, 0, 'pos3D');
+        gl.bindAttribLocation(program, 1, 'color');
+
+        this.cameraUniformBlockTotem = new CameraUniformBlockTotemCache.get(globe);
+        this.cameraBlockBindingPoint = 0;
+        const cameraBlockIndex = gl.getUniformBlockLocation(program, 'CameraUniformBlock');
+        gl.uniformBlockBinding(program, cameraBlockIndex, this.cameraBlockBindingPoint)
+    }
+
+    createVao(pos3DObj, colorObj) {
+        const { gl } = this;
+        const vao = gl.createVertexArray();
+        const divisor = 1;
+        gl.bindVertexArray(vao);
+
+        attributeLoader(gl, pos3DObj, 0, 3, { divisor });
+        attributeLoader(gl, colorObj, 1, 4, { divisor, escapeValue: [-1, -1, -1, -1] });
+
+        gl.bindVertexArray(null);
+        this._vaoCache.push(vao);
+        return vao;
+    }
+
+
+    /**
+     * 
+     * @param {WebGL2RenderingContext.vertexArrayObject} vao 
+     * @param {Render} drawOptions
+     */
+    draw(vao, drawOptions, { opacity = 1.0, fadeOpacity = 1.0, }) {
+
+        const { globe, gl, program, _opacity, _fadeOpacity } = this;
+        gl.useProgram(program);
+        gl.bindVertexArray(vao);
+
+        if (fadeOpacity < 1.0) {
+            this._updatePhase();
+            globe.drawRender();
+        }
+        if (fadeOpacity !== _fadeOpacity.lastValue) {
+            _fadeOpacity.lastValue = fadeOpacity;
+            gl.uniform1f(_fadeOpacity.location, fadeOpacity);
+        }
+        if (opacity !== _opacity.lastValue) {
+            _opacity.lastValue = opacity;
+            gl.uniform1f(_opacity.location, opacity);
+        }
+        drawInstanced(gl, gl.TRIANGLE_FAN, drawOptions)
+    }
+
+
+    _updatePhase() {
+        this._phase.lastValue = (Date.now() / 3.0) % 1000;
+        gl.uniform1f(_phase.location, _phase.lastValue);
+    }
+}
+