@pirireis/webglobeplugins 0.15.35 → 0.16.0

package/programs/arrowfield/index.js

@@ -1,2 +1,2 @@
-import ArrowField from './object';
-export default ArrowField;
+import ArrowField from './object';
+export default ArrowField;

package/programs/arrowfield/logic.js

@@ -1,6 +1,7 @@
-import { createProgram } from "../../util";
-import { globeProgramCache } from "../programcache";
-import { CameraUniformBlockTotem } from "../totems";
+import { createProgram } from "../../util";
+import { globeProgramCache } from "../programcache";
+import { CameraUniformBlockTotem } from "../totems";
+
 const arrowVertexShader = `#version 300 es
 #define R 6378.137
 #define PI 3.1415926535897932384626433832795
@@ -106,7 +107,9 @@ void main() {
     v_color = u_color;
     gl_PointSize = 4.0;
 }
-`;
+`;
+
+
 const arrowFragmentShader = `#version 300 es
 precision highp float;
 in vec4 v_color;
@@ -115,140 +118,169 @@ out vec4 outColor;
 void main() {
     outColor = v_color;
 }
-`;
-export default class ArrowFieldLogic {
-    constructor() {
-        this.gl = null;
-        this.globe = null;
-        this.cameraUniformBlockTotem = null;
-        this.program = null;
-        this.cameraBlockBindingPoint = 0;
-        this.arrayBlockBindingPoint = 1;
-    }
-    init(globe, gl) {
-        this.gl = gl;
-        this.globe = globe;
-        this.cameraUniformBlockTotem = globeProgramCache.getProgram(globe, CameraUniformBlockTotem);
-        this.program = this._createProgram();
-    }
-    _createProgram() {
-        const gl = this.gl;
-        const program = createProgram(gl, arrowVertexShader, arrowFragmentShader);
-        const cameraBlockIndex = gl.getUniformBlockIndex(program, "CameraBlock");
-        gl.uniformBlockBinding(program, cameraBlockIndex, this.cameraBlockBindingPoint);
-        const arrowBlockIndex = gl.getUniformBlockIndex(program, "ArrowBlock");
-        gl.uniformBlockBinding(program, arrowBlockIndex, this.arrayBlockBindingPoint);
-        this.textureLocations = {
-            rotationLocation: gl.getUniformLocation(program, "rotation"),
-        };
-        return program;
-    }
-    getArrowBlockBufferManager() {
-        return new ArrowBlockBufferManager(this.gl, this.arrayBlockBindingPoint);
-    }
-    // initial load type is static. 
-    // after that, it is dynamic.
-    getTextureManager(width, height) {
-        return new TextureManager(this.gl, width, height, this.textureLocations);
-    }
-    draw(arrowBlockManager, textureManager, instanceCount) {
-        const { gl, cameraBlockBindingPoint, cameraUniformBlockTotem } = this;
-        gl.useProgram(this.program);
-        arrowBlockManager.bind();
-        textureManager.activate();
-        cameraUniformBlockTotem.bind(cameraBlockBindingPoint);
-        gl.drawArraysInstanced(gl.LINES, 0, 6, instanceCount);
-        // gl.drawArraysInstanced(gl.POINTS, 0, 4, instanceCount);
-        cameraUniformBlockTotem.unbind(cameraBlockBindingPoint);
-        arrowBlockManager.unbind();
-    }
-    free() {
-        const { gl, program } = this;
-        gl.deleteProgram(program);
-        globeProgramCache.releaseProgram(this.globe, CameraUniformBlockTotem);
-    }
-}
-class ArrowBlockBufferManager {
-    constructor(gl, bindingPoint) {
-        this.gl = gl;
-        this.bindingPoint = bindingPoint;
-        this.ubo = gl.createBuffer();
-        gl.bindBuffer(gl.UNIFORM_BUFFER, this.ubo);
-        // 4 + 2+ 2 + 2 + 1 +1 +1 +1+1= 15 ~= 16
-        gl.bufferData(gl.UNIFORM_BUFFER, 56, gl.DYNAMIC_DRAW);
-        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
-    }
-    update({ color = null, bboxOffsetRad = null, bboxSizeRad = null, resolution = null, tailLengthRatio = null, wingLengthRatio = null, height = null, opacity = null, noDataValue = null, } = {}) {
-        const { gl, ubo } = this;
-        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
-        if (color !== null)
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 0, new Float32Array(color));
-        if (opacity !== null)
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 12, new Float32Array([opacity]));
-        if (bboxOffsetRad !== null)
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 16, new Float32Array(bboxOffsetRad));
-        if (bboxSizeRad !== null)
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 24, new Float32Array(bboxSizeRad));
-        if (resolution !== null)
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 32, new Float32Array(resolution));
-        if (tailLengthRatio !== null)
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 40, new Float32Array([tailLengthRatio]));
-        if (wingLengthRatio !== null)
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 44, new Float32Array([wingLengthRatio]));
-        if (height !== null)
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 48, new Float32Array([height]));
-        if (noDataValue !== null)
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 52, new Float32Array([noDataValue]));
-        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
-    }
-    bind() {
-        const { gl, ubo, bindingPoint } = this;
-        gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, ubo);
-    }
-    unbind() {
-        const { gl, bindingPoint } = this;
-        gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, null);
-    }
-    free() {
-        const { gl, ubo } = this;
-        gl.deleteBuffer(ubo);
-    }
-}
-class TextureManager {
-    constructor(gl, width, height, { rotationLocation }) {
-        this.gl = gl;
-        this.width = width;
-        this.height = height;
-        this.rotationLocation = rotationLocation;
-        this.rotationTexture = this._createFloatTexture();
-    }
-    _createFloatTexture() {
-        const { gl, width, height } = this;
-        const texture = gl.createTexture();
-        gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.R32F, width, height, 0, gl.RED, gl.FLOAT, null);
-        gl.bindTexture(gl.TEXTURE_2D, null);
-        return texture;
-    }
-    setData(rotation) {
-        const { gl, rotationTexture, width, height } = this;
-        // gl flip y axis
-        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
-        gl.bindTexture(gl.TEXTURE_2D, rotationTexture);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.R32F, width, height, 0, gl.RED, gl.FLOAT, rotation);
-        gl.bindTexture(gl.TEXTURE_2D, null);
-        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
-    }
-    activate() {
-        const { gl, rotationTexture } = this;
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, rotationTexture);
-        gl.uniform1i(this.rotationLocation, 0);
-    }
-    free() {
-        const { gl, rotationTexture } = this;
-        gl.deleteTexture(rotationTexture);
-    }
-}
+`;
+
+
+export default class ArrowFieldLogic {
+
+    constructor() {
+        this.gl = null;
+        this.globe = null;
+        this.cameraUniformBlockTotem = null;
+        this.program = null;
+        this.cameraBlockBindingPoint = 0;
+        this.arrayBlockBindingPoint = 1;
+    }
+
+    init(globe, gl) {
+        this.gl = gl;
+        this.globe = globe;
+        this.cameraUniformBlockTotem = globeProgramCache.getProgram(globe, CameraUniformBlockTotem);
+        this.program = this._createProgram();
+    }
+
+    _createProgram() {
+        const gl = this.gl;
+        const program = createProgram(gl, arrowVertexShader, arrowFragmentShader);
+
+        const cameraBlockIndex = gl.getUniformBlockIndex(program, "CameraBlock");
+        gl.uniformBlockBinding(program, cameraBlockIndex, this.cameraBlockBindingPoint);
+
+
+
+        const arrowBlockIndex = gl.getUniformBlockIndex(program, "ArrowBlock");
+        gl.uniformBlockBinding(program, arrowBlockIndex, this.arrayBlockBindingPoint);
+
+        this.textureLocations = {
+            rotationLocation: gl.getUniformLocation(program, "rotation"),
+        }
+
+        return program;
+    }
+
+    getArrowBlockBufferManager() {
+        return new ArrowBlockBufferManager(this.gl, this.arrayBlockBindingPoint);
+    }
+
+    // initial load type is static. 
+    // after that, it is dynamic.
+    getTextureManager(width, height) {
+        return new TextureManager(this.gl, width, height, this.textureLocations);
+    }
+
+    draw(arrowBlockManager, textureManager, instanceCount) {
+        const { gl, cameraBlockBindingPoint, cameraUniformBlockTotem } = this;
+        gl.useProgram(this.program);
+        arrowBlockManager.bind();
+        textureManager.activate();
+        cameraUniformBlockTotem.bind(cameraBlockBindingPoint);
+        gl.drawArraysInstanced(gl.LINES, 0, 6, instanceCount);
+        // gl.drawArraysInstanced(gl.POINTS, 0, 4, instanceCount);
+        cameraUniformBlockTotem.unbind(cameraBlockBindingPoint);
+        arrowBlockManager.unbind();
+    }
+
+    free() {
+        const { gl, program } = this;
+        gl.deleteProgram(program);
+        globeProgramCache.releaseProgram(this.globe, CameraUniformBlockTotem);
+    }
+}
+
+
+class ArrowBlockBufferManager {
+    constructor(gl, bindingPoint) {
+        this.gl = gl;
+        this.bindingPoint = bindingPoint;
+        this.ubo = gl.createBuffer();
+        gl.bindBuffer(gl.UNIFORM_BUFFER, this.ubo);
+        // 4 + 2+ 2 + 2 + 1 +1 +1 +1+1= 15 ~= 16
+        gl.bufferData(gl.UNIFORM_BUFFER, 56, gl.DYNAMIC_DRAW);
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }
+
+    update({
+        color = null,
+        bboxOffsetRad = null,
+        bboxSizeRad = null,
+        resolution = null,
+        tailLengthRatio = null,
+        wingLengthRatio = null,
+        height = null,
+        opacity = null,
+        noDataValue = null,
+    } = {}) {
+        const { gl, ubo } = this;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        if (color !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 0, new Float32Array(color));
+        if (opacity !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 12, new Float32Array([opacity]));
+        if (bboxOffsetRad !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 16, new Float32Array(bboxOffsetRad));
+        if (bboxSizeRad !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 24, new Float32Array(bboxSizeRad));
+        if (resolution !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 32, new Float32Array(resolution));
+        if (tailLengthRatio !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 40, new Float32Array([tailLengthRatio]));
+        if (wingLengthRatio !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 44, new Float32Array([wingLengthRatio]));
+        if (height !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 48, new Float32Array([height]));
+        if (noDataValue !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 52, new Float32Array([noDataValue]));
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }
+
+    bind() {
+        const { gl, ubo, bindingPoint } = this;
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, ubo);
+    }
+
+    unbind() {
+        const { gl, bindingPoint } = this;
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, null);
+    }
+
+    free() {
+        const { gl, ubo } = this;
+        gl.deleteBuffer(ubo);
+    }
+}
+
+class TextureManager {
+
+    constructor(gl, width, height, { rotationLocation }) {
+        this.gl = gl;
+        this.width = width;
+        this.height = height;
+        this.rotationLocation = rotationLocation;
+        this.rotationTexture = this._createFloatTexture();
+    }
+
+    _createFloatTexture() {
+        const { gl, width, height } = this;
+        const texture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.R32F, width, height, 0, gl.RED, gl.FLOAT, null);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        return texture;
+    }
+
+    setData(rotation) {
+        const { gl, rotationTexture, width, height } = this;
+        // gl flip y axis
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+        gl.bindTexture(gl.TEXTURE_2D, rotationTexture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.R32F, width, height, 0, gl.RED, gl.FLOAT, rotation);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+    }
+
+    activate() {
+        const { gl, rotationTexture } = this;
+
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, rotationTexture);
+        gl.uniform1i(this.rotationLocation, 0);
+    }
+
+    free() {
+        const { gl, rotationTexture } = this;
+        gl.deleteTexture(rotationTexture);
+    }
+}

package/programs/arrowfield/object.js

@@ -1,60 +1,89 @@
-// this contains vao, drawCount, ArrowBufferBlock, vao,
-// how to, where to set instanced parameters
-// the vectorfield buffer should be managed outside, since it can be static or dynamic.
-import Logic from './logic';
-import { globeProgramCache } from '../programcache';
-import { longlatbbox2normalbbox } from "../util";
-export default class ArrowField {
-    constructor(gl, globe, { minLon = -180, maxLon = 180, minLat = -90, maxLat = 90, height = 0, opacity = 1, color = [0.04, 0.2, 0.8], targetWidth = 100, targetHeight = 100, dataWidth = null, dataHeight = null, tailLengthRatio = 1, wingLengthRatio = 0.5, noDataValue = null,
-    // maxMagnitude = null
-     } = {}) {
-        this.gl = gl;
-        this.globe = globe;
-        this.program = globeProgramCache.getProgram(globe, Logic);
-        this.arrowBlockManager = this.program.getArrowBlockBufferManager();
-        this.instanceCount = targetWidth * targetHeight;
-        this.arrowBlockManager.update({ resolution: [targetWidth, targetHeight] });
-        this.textureManager = this.program.getTextureManager(dataWidth, dataHeight);
-        this.setBBox({ minLon, maxLon, minLat, maxLat });
-        this.update({ height, opacity, color, tailLengthRatio, wingLengthRatio, noDataValue });
-    }
-    setBBox({ minLon = -180, maxLon = 180, minLat = -90, maxLat = 90 } = {}) {
-        this.bbox = { minLon, maxLon, minLat, maxLat };
-        const { bboxSizeRad, bboxOffsetRad } = longlatbbox2normalbbox(this.bbox);
-        this.arrowBlockManager.update({ bboxSizeRad, bboxOffsetRad });
-        this.globe.DrawRender();
-    }
-    update({ height, opacity, color, resolution, tailLengthRatio, wingLengthRatio, noDataValue } = {}) {
-        if (resolution) {
-            this.instanceCount = resolution[0] * resolution[1];
-        }
-        this.arrowBlockManager.update({
-            color,
-            resolution,
-            height,
-            opacity,
-            tailLengthRatio,
-            wingLengthRatio,
-            noDataValue,
-        });
-        this.globe.DrawRender();
-    }
-    setTargetResolution(width, height) {
-        this.instanceCount = width * height;
-        this.arrowBlockManager.update({ resolution: [width, height] });
-        this.globe.DrawRender();
-    }
-    draw() {
-        const { program, arrowBlockManager, textureManager, instanceCount } = this;
-        program.draw(arrowBlockManager, textureManager, instanceCount);
-    }
-    setData(rotation) {
-        this.textureManager.setData(rotation);
-        this.globe.DrawRender();
-    }
-    free() {
-        this.arrowBlockManager.free();
-        this.textureManager.free();
-        globeProgramCache.releaseProgram(this.gl, Logic);
-    }
-}
+// this contains vao, drawCount, ArrowBufferBlock, vao,
+// how to, where to set instanced parameters
+// the vectorfield buffer should be managed outside, since it can be static or dynamic.
+
+import Logic from './logic';
+import { globeProgramCache } from '../programcache';
+import { longlatbbox2normalbbox } from "../util";
+
+export default class ArrowField {
+    constructor(gl, globe, {
+        minLon = -180,
+        maxLon = 180,
+        minLat = -90,
+        maxLat = 90,
+        height = 0,
+        opacity = 1,
+        color = [0.04, 0.2, 0.8],
+        targetWidth = 100,
+        targetHeight = 100,
+        dataWidth = null,
+        dataHeight = null,
+        tailLengthRatio = 1,
+        wingLengthRatio = 0.5,
+        noDataValue = null,
+        // maxMagnitude = null
+    } = {}) {
+        this.gl = gl;
+        this.globe = globe;
+
+        this.program = globeProgramCache.getProgram(globe, Logic);
+        this.arrowBlockManager = this.program.getArrowBlockBufferManager();
+        this.instanceCount = targetWidth * targetHeight;
+        this.arrowBlockManager.update({ resolution: [targetWidth, targetHeight] });
+        this.textureManager = this.program.getTextureManager(dataWidth, dataHeight);
+        this.setBBox({ minLon, maxLon, minLat, maxLat });
+        this.update({ height, opacity, color, tailLengthRatio, wingLengthRatio, noDataValue });
+    }
+
+
+    setBBox({ minLon = -180, maxLon = 180, minLat = -90, maxLat = 90 } = {}) {
+        this.bbox = { minLon, maxLon, minLat, maxLat };
+        const { bboxSizeRad, bboxOffsetRad } = longlatbbox2normalbbox(this.bbox);
+        this.arrowBlockManager.update({ bboxSizeRad, bboxOffsetRad });
+        this.globe.DrawRender();
+    }
+
+
+    update({ height, opacity, color, resolution, tailLengthRatio, wingLengthRatio, noDataValue } = {}) {
+        if (resolution) {
+            this.instanceCount = resolution[0] * resolution[1];
+        }
+        this.arrowBlockManager.update({
+            color,
+            resolution,
+            height,
+            opacity,
+            tailLengthRatio,
+            wingLengthRatio,
+            noDataValue,
+        });
+        this.globe.DrawRender();
+    }
+
+    setTargetResolution(width, height) {
+        this.instanceCount = width * height;
+        this.arrowBlockManager.update({ resolution: [width, height] });
+
+        this.globe.DrawRender();
+    }
+
+    draw() {
+        const { program, arrowBlockManager, textureManager, instanceCount } = this;
+        program.draw(arrowBlockManager, textureManager, instanceCount);
+    }
+
+
+    setData(rotation) {
+        this.textureManager.setData(rotation);
+        this.globe.DrawRender();
+    }
+
+
+    free() {
+        this.arrowBlockManager.free();
+        this.textureManager.free();
+        globeProgramCache.releaseProgram(this.gl, Logic);
+    }
+}
+