@pirireis/webglobeplugins 0.17.0 → 0.17.1

package/vectorfield/wind/plugin.js

@@ -2,6 +2,7 @@
  * Author: Toprak Nihat Deniz Ozturk
  */
 import { createImageFromBase64, createProgramWrapper, createTexture, createBuffer, bindAttribute, bindFramebuffer, bindTexture, getColorRamp } from "../../util/webglobjectbuilders";
+import { defaultblendfunction } from "../../util/webglobe/gldefaultstates";
 import imageToMagnitude, { imageToRadianAngle } from "./imagetovectorfieldandmagnitude";
 import { TexturePointSampler } from "../../heatwave/texture-point-sampler";
 /**
@@ -111,7 +112,6 @@ void main() {
 
     // take EPSG:4236 distortion into account for calculating where the particle moved
     // float distortion = 1.0; //cos(radians(pos.y * 180.0 - 90.0));
-    // vec2 offset = vec2(velocity.x / distortion, -velocity.y) * 0.0001 * u_speed_factor;
     vec2 offset = vec2(velocity.x, velocity.y) * 0.0001 * u_speed_factor;
 
     // update particle position, wrapping around the date line
@@ -638,12 +638,12 @@ export default class WindPlugin {
     // globe calls `draw3D` method on each frame
     draw3D(projMatrix, modelviewMatrix, transPos) {
         const gl = this.gl;
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-        this.transPos.set([transPos.x, transPos.y, transPos.z], 0);
-        this.projMatrix = projMatrix;
-        this.modelviewMatrix = modelviewMatrix;
-        gl.activeTexture(gl.TEXTURE0);
         if (this._doDraw()) {
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+            this.transPos.set([transPos.x, transPos.y, transPos.z], 0);
+            this.projMatrix = projMatrix;
+            this.modelviewMatrix = modelviewMatrix;
+            gl.activeTexture(gl.TEXTURE0);
             const depthTest = gl.isEnabled(gl.DEPTH_TEST);
             if (depthTest)
                 gl.disable(gl.DEPTH_TEST);
@@ -651,17 +651,16 @@ export default class WindPlugin {
             this._draw();
             if (depthTest)
                 gl.enable(gl.DEPTH_TEST);
+            // test visuals
+            // gl.viewport(0, 0, 100, 100);
+            // this._drawTexture(this.windTexture, 1.0);
+            // gl.viewport(0, 100, 100, 100);
+            // this._drawTexture(this.particleStateTexture0, 1.0);
+            // gl.viewport(0, 200, 100, 100);
+            // this._drawTexture(this.colorRampTexture, 1.0);
+            this._resetMachineStates();
+            this.globe.DrawRender();
         }
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-        // test visuals
-        // gl.viewport(0, 0, 100, 100);
-        // this._drawTexture(this.windTexture, 1.0);
-        // gl.viewport(0, 100, 100, 100);
-        // this._drawTexture(this.particleStateTexture0, 1.0);
-        // gl.viewport(0, 200, 100, 100);
-        // this._drawTexture(this.colorRampTexture, 1.0);
-        this._resetMachineStates();
-        this.globe.DrawRender();
     }
     _drawScreen() {
         const { gl, globe } = this;
@@ -676,7 +675,7 @@ export default class WindPlugin {
         this._drawParticles();
         bindFramebuffer(gl, null);
         this._drawTexture(this.screenTexture, 1.0);
-        gl.disable(gl.BLEND);
+        // gl.disable(gl.BLEND);
         // save the current screen as the background for the next frame
         const temp = this.backgroundTexture;
         this.backgroundTexture = this.screenTexture;
@@ -691,6 +690,8 @@ export default class WindPlugin {
         gl.uniform1i(program.u_screen, 2);
         gl.uniform1f(program.u_opacity, opacity);
         gl.drawArrays(gl.TRIANGLES, 0, 6);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        gl.activeTexture(gl.TEXTURE0);
     }
     _loadRampMax() {
         const { gl } = this;
@@ -761,6 +762,7 @@ export default class WindPlugin {
     _updateParticles() {
         const gl = this.gl;
         const program = this.updateProgram;
+        gl.disable(gl.BLEND);
         gl.useProgram(program.program);
         gl.viewport(0, 0, this.particleStateResolution, this.particleStateResolution);
         bindAttribute(gl, this.quadBuffer, program.a_pos, 2);
@@ -774,12 +776,24 @@ export default class WindPlugin {
         const temp = this.particleStateTexture0;
         this.particleStateTexture0 = this.particleStateTexture1;
         this.particleStateTexture1 = temp;
+        // Add this line to restore the viewport
+        gl.viewport(0, 0, this.globe.api_ScrW(), this.globe.api_ScrH());
     }
     _resetMachineStates() {
         const { gl, globe } = this;
-        // gl.disable(gl.DEPTH_TEST);
-        // gl.disable(gl.STENCIL_TEST);
+        // Unbind all textures
+        for (let i = 0; i < 3; i++) {
+            gl.activeTexture(gl.TEXTURE0 + i);
+            gl.bindTexture(gl.TEXTURE_2D, null);
+        }
         gl.activeTexture(gl.TEXTURE0);
+        // Unbind buffers
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+        gl.bindVertexArray(null); // Add this line
+        gl.enable(gl.BLEND);
+        defaultblendfunction(gl);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
         gl.viewport(0, 0, globe.api_ScrW(), globe.api_ScrH());
     }
     _loadHeight() {

package/write-text/context-text4.js

@@ -103,8 +103,9 @@ export class ContextTextWriter4 {
             }, style.zMode === CSZMode.Z_MSL);
             textFont.size = sizeMultiplier * textSize;
             textFont.position = position;
-            if (x !== null && y !== null)
+            if (x !== null && y !== null) {
                 globe.api_DrawContextTextMultiLine(text, textFont, o, { x: x + xOffset, y: y - yOffset }, angleIsOn, angle);
+            }
         }
         textFont.size = textSize;
     }

package/programs/polygon-on-globe/partial-tesselation.js

@@ -1 +0,0 @@
-"use strict";

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

@@ -1,118 +0,0 @@
-import { TextureDemTriangles } from "./texture-dem-triangles";
-/**
- * Loads a plugin with test data for TextureDemTriangles
- */
-const TEST_ITEM_COUNT = 1000000;
-function createTestLongLatArray() {
-    const arr = new Float32Array(TEST_ITEM_COUNT * 2);
-    for (let i = 0; i < TEST_ITEM_COUNT; i++) {
-        arr[i * 2 + 0] = (Math.random() - 0.5) * Math.PI * 2; // longitude
-        arr[i * 2 + 1] = (Math.random() - 0.5) * Math.PI; // latitude
-    }
-    return arr;
-}
-function createTestPos3dArray(longLatArray) {
-    const arr = new Float32Array(TEST_ITEM_COUNT * 3);
-    for (let i = 0; i < TEST_ITEM_COUNT; i++) {
-        const long = longLatArray[i * 2 + 0];
-        const lat = longLatArray[i * 2 + 1];
-        // Convert long/lat to 3D position (simplified)
-        arr[i * 3 + 0] = Math.cos(lat) * Math.cos(long);
-        arr[i * 3 + 1] = Math.cos(lat) * Math.sin(long);
-        arr[i * 3 + 2] = Math.sin(lat);
-    }
-    return arr;
-}
-const createTestBBOXES = () => {
-    const bboxes = [];
-    for (let i = 0; i < 6; i++) {
-        const north = Math.random(); // random latitude
-        const west = Math.random() * -1; // random longitude
-        const south = north - Math.PI / 6; // random latitude
-        const east = west + Math.PI / 6; // random longitude
-        const nw = [west, north]; // random northWest
-        const se = [east, south]; // random southEast
-        bboxes.push({ northWest: nw, southEast: se });
-    }
-    return bboxes;
-};
-const createTestDemTextures = () => {
-    const textures = [];
-    for (let i = 0; i < 6; i++) {
-        const texture = [];
-        for (let j = 0; j < 5 * 5; j++) {
-            const value = 1000 * Math.random(); // random elevation value
-            texture.push(value);
-        }
-        textures.push(texture);
-    }
-    return textures;
-};
-export function createBuffersAndFill(gl, vec3s, longLats, indices) {
-    const positionBuffer = gl.createBuffer();
-    const longLatBuffer = gl.createBuffer();
-    const indexBuffer = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vec3s), gl.STATIC_DRAW);
-    gl.bindBuffer(gl.ARRAY_BUFFER, longLatBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(longLats), gl.STATIC_DRAW);
-    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
-    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
-    return {
-        buffers: {
-            positionBuffer,
-            longLatBuffer,
-            indexBuffer
-        }
-    };
-}
-export class TextureDemTrianglesTestPlugin {
-    globe = null;
-    textureDemTriangles = null;
-    vao = null;
-    drawOptions = null;
-    bufferInfo = null;
-    ubo = null;
-    id;
-    constructor(id) {
-        this.id = id;
-    }
-    init(globe) {
-        this.globe = globe;
-        this.textureDemTriangles = new TextureDemTriangles(globe);
-        // set bboxes and dem textures
-        const demTextures = createTestDemTextures();
-        const demTextureBBOX = createTestBBOXES();
-        this.textureDemTriangles.setDemTextures(demTextures, demTextureBBOX);
-        // 
-        this.ubo = this.textureDemTriangles.createUBO();
-        this.ubo.updateSingle("u_color", new Float32Array([1.0, 0.0, 0.0, 0.0]));
-        const bufferInfo = {
-            pos3dBufferInfo: {
-                buffer: globe.gl.createBuffer(),
-                stride: 0,
-                offset: 0,
-            },
-            longLatBufferInfo: {
-                buffer: globe.gl.createBuffer(),
-                stride: 0,
-                offset: 0,
-            },
-            drawOptions: { drawRange: { count: TEST_ITEM_COUNT, first: 0 } }
-        };
-        this.vao = this.textureDemTriangles.createVAO(bufferInfo.pos3dBufferInfo, bufferInfo.longLatBufferInfo);
-        const gl = globe.gl;
-        const longLatArray = createTestLongLatArray();
-        const pos3dArray = createTestPos3dArray(longLatArray);
-        gl.bindBuffer(gl.ARRAY_BUFFER, bufferInfo.pos3dBufferInfo.buffer);
-        gl.bufferData(gl.ARRAY_BUFFER, pos3dArray, gl.STATIC_DRAW);
-        gl.bindBuffer(gl.ARRAY_BUFFER, bufferInfo.longLatBufferInfo.buffer);
-        gl.bufferData(gl.ARRAY_BUFFER, longLatArray, gl.STATIC_DRAW);
-        this.bufferInfo = bufferInfo;
-    }
-    draw3D() {
-        if (!this.globe || !this.textureDemTriangles || !this.vao || !this.bufferInfo || !this.ubo)
-            return;
-        this.textureDemTriangles.draw(this.vao, this.bufferInfo.drawOptions, this.ubo);
-    }
-}

package/util/webglobe/rasteroverlay.js

@@ -1,76 +0,0 @@
-/**
- * Iceride bir canvas uretir ve degisiklikler bu kanvasta yapilir
- */
-// this class loads texture to raster overlay
-// TODO: IS DEADCODE? 
-class RasterOverlayLoader {
-    constructor(id, globe, { opacity = 1.0, minLon = -180, minLat = -90, maxLon = 180, maxLat = 90, beforeObject = null, canvas = null, callBack = null } = {}) {
-        this.canvas = canvas || document.createElement('canvas');
-        this.gl = this.canvas.getContext('webgl2');
-        this.globe = globe;
-        this.id = id;
-        this._opacity = opacity;
-        this.bbox = { ll: { x: minLon, y: minLat }, ur: { x: maxLon, y: maxLat } };
-        this._beforeObject = beforeObject;
-        this._isProcessing = false;
-        this._callBack = callBack;
-    }
-    getGL() {
-        return this.gl;
-    }
-    getCanvasURL() {
-        return this.canvas.toDataURL();
-    }
-    setBBox(minLon, minLat, maxLon, maxLat) {
-        this.bbox = { ll: { x: minLon, y: minLat }, ur: { x: maxLon, y: maxLat } };
-        this.draw();
-    }
-    setCanvasWidthHeight(width, height) {
-        this.canvas.width = width;
-        this.canvas.height = height;
-        this.gl.viewport(0, 0, width, height);
-    }
-    draw() {
-        if (!this._isProcessing) {
-            requestAnimationFrame(this._draw.bind(this));
-            this._isProcessing = true;
-        }
-    }
-    _draw() {
-        this.globe.api_DeleteImageOverlay(this.id);
-        const id = this.id;
-        const imgUrl = this.getCanvasURL();
-        const bbox = this.bbox;
-        const opacity = this._opacity;
-        const rotDeg = 0;
-        const color = null;
-        const beforeObject = this._beforeObject;
-        const callback = this._callBack || function () { };
-        this.globe.api_AddImageOverlay(id, imgUrl, bbox, color, opacity, rotDeg, beforeObject, callback);
-        this._isProcessing = false;
-    }
-    setBeforeObject(beforeObject) {
-        this._beforeObject = beforeObject;
-        this.draw();
-    }
-    setCallback(callback) {
-        this._callBack = callback;
-    }
-    setOpacity(opacity) {
-        if (opacity < 0 || opacity > 1) {
-            return;
-        }
-        this._opacity = opacity;
-        this.globe.api_SetImageOverlayColor(this.id, null, opacity);
-    }
-    free() {
-        this.globe.api_DeleteImageOverlay(this.id);
-    }
-    on() {
-        this.draw();
-    }
-    off() {
-        this.globe.api_DeleteImageOverlay(this.id);
-    }
-}
-export { RasterOverlayLoader };

package/write-text/attached-text-writer.js

@@ -1,95 +0,0 @@
-import { CSZMode } from "@pirireis/webglobe";
-import { isTextFont, opacityCheck } from "../util/check/typecheck";
-/**
- * Light wight version of context text writer.
- * The parameters by text are calculated on user side and inserted as items. (ContextTextWriter3 constructs text data from items)
- *
- * Good side of ContextTextWriters pattern is that there is only one way to create text.
- * The glue is inside the plugin.
- * This makes the code more readable and maintainable.
- *
- * With AttachedTextWriter the glue is created by user.
- * I observed that the users generally uses a wrapper around the plugin logic anyway. This wrapper can be used as the glue for plugin and attached writer.
- */
-export class AttachedTextWriter {
-    constructor(globe, { style = {
-        textFont: {
-            name: 'Arial',
-            textColor: '#FFFFFF', // beyaz
-            hollowColor: '#000000', // siyah
-            size: 12, // piksel
-            hollow: true,
-            bold: true,
-            italic: false,
-        },
-        opacity: 1.0,
-        zMode: CSZMode.Z_GROUND_PERVERTEX,
-    }, doDraw = true, angleOnSphere = false, zoomLevelAdaptor = (zoomLevel) => (item) => {
-        return {
-            opacityMultiplier: 1,
-            sizeMultiplier: 1
-        };
-    }, } = {}) {
-        this.globe = globe;
-        this._itemMap = new Map();
-        this.doDraw = doDraw;
-        this.angleOnSphere = angleOnSphere;
-        this.zoomLevelAdaptor = zoomLevelAdaptor;
-        this.setStyle(style);
-    }
-    setOpacity(opacity) {
-        opacityCheck(opacity);
-        this._style.opacity = opacity;
-        this.globe.DrawRender();
-    }
-    setStyle(style) {
-        isTextFont(style.textFont);
-        this._style = style;
-        this.globe.DrawRender();
-    }
-    /**
-     *
-     * @param {{text, long, lat, z = 0, xOffset = 0, yOffset = 0, isAngleOn = false, Angle = 0 }} item
-     * @returns
-     */
-    insertItem(item) {
-        const key = this.keyAdaptor ? this.keyAdaptor(item) : item;
-        this._itemMap.set(key, item);
-        this.globe.DrawRender();
-    }
-    removeItem(item) {
-        const key = this.keyAdaptor ? this.keyAdaptor(item) : item;
-        if (this._itemMap.delete(key)) {
-            this.globe.DrawRender();
-            return true;
-        }
-        return false;
-    }
-    // TODO: use item style 
-    draw() {
-        if (!this.doDraw) {
-            return;
-        }
-        const { globe, _itemMap, _style } = this;
-        const { zMode, textFont, opacity } = _style;
-        const is3D = globe.api_GetCurrentGeometry() === 0;
-        const angleIsOn = is3D ? true : this.angleOnSphere;
-        const zoomLevel = globe.api_GetCurrentLODWithDecimal();
-        const zoomAdaptor = this.zoomLevelAdaptor(zoomLevel);
-        const theSize = textFont.size;
-        _itemMap.forEach((item, key) => {
-            const { text, long, lat, z = 0, xOffset = 0, yOffset = 0, isAngleOn = false, angle = 0 } = item;
-            const { x, y } = globe.api_GetScreenPointFromGeo({
-                long,
-                lat,
-                z
-            }, zMode);
-            const { opacityMultiplier, sizeMultiplier } = zoomAdaptor(item);
-            textFont.size = sizeMultiplier * theSize;
-            if (x !== null && y !== null) {
-                globe.api_DrawContextText(text, textFont, opacityMultiplier * opacity, { x: x + xOffset, y: y - yOffset }, (isAngleOn && angleIsOn), angle);
-            }
-        });
-        textFont.size = theSize;
-    }
-}