@pirireis/webglobeplugins 0.0.1

package/programs/arrowfield/logic.js

@@ -0,0 +1,284 @@
+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
+#define POLE 20037508.34
+#define POLE_BY_PI 6366198.2
+#define HALF_PI 1.5707963267948966192313216916398
+
+uniform sampler2D rotation; // rotation of arrow
+
+out vec4 v_color;
+
+layout(std140) uniform CameraBlock {
+    mat4 u_view;
+    mat4 u_projection;
+    vec3 u_translate;
+    bool u_is3D;
+    vec2 u_mapWH;
+    vec2 u_scrWH;
+    float u_zlevel;
+};
+
+layout(std140) uniform ArrowBlock {
+    vec4 u_color;
+    vec2 u_bbox_offset_rad;
+    vec2 u_bbox_size_rad;
+    vec2 u_resolution;
+    float u_length_ratio;
+    float u_width_ratio;
+    float u_height;
+    float u_no_data_value;
+};
+
+vec2 f_texCoord(){
+    float fID = float(gl_InstanceID);
+    float x = mod( fID, u_resolution.x ) / ( u_resolution.x - 1.0);
+    float y = 1.0 - floor( fID / u_resolution.x ) / ( u_resolution.y - 1.0);
+    return vec2(x, y);
+}
+
+vec2 f_radCoord(vec2 texCoord){
+    float x = (texCoord.x * u_bbox_size_rad.x ) + u_bbox_offset_rad.x;
+    float y = (texCoord.y * u_bbox_size_rad.y ) + u_bbox_offset_rad.y;
+    return vec2(x, y);
+}
+
+vec3 f_onSphere(vec2 radCoord){
+    float x = sin(radCoord.y) * cos(radCoord.x);
+    float y = sin(radCoord.y) * sin(radCoord.x);
+    float z = cos(radCoord.y);
+    return vec3(x, y, z) * (R + u_height);
+}
+
+
+vec2 f_onFlat(vec2 radCoord){
+    float mercX = radCoord.x * POLE_BY_PI;
+    float mercY = log(tan(HALF_PI - radCoord.y * 0.5)) * POLE_BY_PI;
+    float normX = ( mercX - u_translate.x ) / u_mapWH.x;
+    float normY = ( mercY - u_translate.y ) / u_mapWH.y;
+    return vec2(normX, normY);
+}
+
+void main() {
+    // escape if no data
+    vec2 texCoord = f_texCoord();
+    vec2 geoCoord = vec2( texCoord.x , 1.0 - texCoord.y );
+
+
+    float angle = texture(rotation, texCoord).r;
+
+    if ( angle == u_no_data_value ) {
+        gl_Position = vec4(-2.0, -2.0, 0.0, 1.0);
+        return;
+    }
+    vec2 arrowLimb;
+    if (0.0 == mod(float(gl_VertexID), 2.0)) {
+        arrowLimb = vec2(0.0, 0.0);
+    } else if (gl_VertexID == 1) {
+        // tail
+        arrowLimb = vec2( cos(angle), sin(angle)) * u_length_ratio / (170.0 );
+    } else if (gl_VertexID == 3) {
+        // right wing
+        arrowLimb = vec2( cos(angle + 0.45), sin(angle + 0.45)) * u_width_ratio / (170.0 );
+    } else if (gl_VertexID == 5) {
+        // left wing
+        arrowLimb = vec2( cos(angle - 0.45), sin(angle - 0.45)) * u_width_ratio / (170.0 );
+    }
+
+
+    vec2 radCoord = f_radCoord(geoCoord + arrowLimb);
+    if ( u_is3D ) {
+        vec3 spherePos = f_onSphere(radCoord);
+        gl_Position = u_projection * u_view * vec4(spherePos - u_translate, 1.0);
+    } else {
+        vec2 flatPos = f_onFlat(radCoord);
+        gl_Position = u_projection * vec4(
+            flatPos.x * u_scrWH.x, 
+            (1.0 - flatPos.y) * u_scrWH.y,
+            0.0, 1.0
+        );
+    }
+
+
+    v_color = u_color;
+    gl_PointSize = 4.0;
+}
+`;
+
+
+const arrowFragmentShader = `#version 300 es
+precision highp float;
+in vec4 v_color;
+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 buffer = this.cameraUniformBlockTotem.getUBO();
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, this.cameraBlockBindingPoint, buffer);
+
+        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 } = this;
+        gl.useProgram(this.program);
+        arrowBlockManager.bind();
+        textureManager.activate();
+        gl.drawArraysInstanced(gl.LINES, 0, 6, instanceCount);
+        // gl.drawArraysInstanced(gl.POINTS, 0, 4, instanceCount);
+        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);
+
+    }
+
+    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

@@ -0,0 +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);
+    }
+}
+

package/programs/float2legendwithratio/index.js

@@ -0,0 +1,3 @@
+import Float2LegendWithRatio from './object';
+
+export { Float2LegendWithRatio };

package/programs/float2legendwithratio/logic.js

@@ -0,0 +1,189 @@
+import { createProgram } from "../../util";
+
+export default class {
+
+
+    constructor(gl) {
+        this.gl = gl;
+        // console.log("Float2LegendWithRatioProgram gl:", gl);
+        this._width = 1;
+        this._height = 1;
+
+        this._blendRatio = 0.0;
+        this.programWrapper = this._createProgramWrapper();
+    }
+
+
+    _createProgramWrapper() {
+        const vertexShaderSource = `#version 300 es
+        precision highp float;
+
+        in vec2 a_position;
+        out vec2 v_texcoord;
+         
+        void main() {
+            gl_Position = vec4(a_position, 0.0, 1.0);
+            v_texcoord = a_position * 0.5 + 0.5;
+            v_texcoord.y = 1.0 - v_texcoord.y;
+        }
+        `;
+
+        const fragmentShaderSource = `#version 300 es
+        precision highp float;
+
+        in vec2 v_texcoord;
+        uniform sampler2D u_float_texture0;
+        uniform sampler2D u_float_texture1;
+        uniform sampler2D u_color_texture;
+        
+        layout(std140) uniform HeatParametersBlock {
+            vec2 u_color_ramp_range; // x is min, y is range ( max - min)
+            vec2 u_min_max;
+            float u_escape_value;
+            float u_blend_ratio;
+        };
+
+        out vec4 outColor;
+
+        void main() {
+            
+            float f0 = texture(u_float_texture0, v_texcoord).r;
+            float f1 = texture(u_float_texture1, v_texcoord).r;
+            // outColor = vec4(
+
+            if (f0 == u_escape_value || f1 == u_escape_value) {   
+                outColor = vec4(0.0, 0.0, 0.0, 0.0);
+                return;
+            }
+            float x  = mix(f0, f1, u_blend_ratio);
+            if ( x < u_min_max.x || x > u_min_max.y) {
+                outColor = vec4(0.0, 0.0, 0.0, 0.0);
+                return;    
+            }
+            x = (x - u_color_ramp_range.x) / u_color_ramp_range.y;            
+            outColor = texture(u_color_texture, vec2(x, 0.5));
+        }
+        `;
+
+        const gl = this.gl;
+        const program = createProgram(gl, vertexShaderSource, fragmentShaderSource);
+        const vao = gl.createVertexArray();
+        gl.bindVertexArray(vao);
+        const buffer = gl.createBuffer();
+        this._buffer = buffer;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+            -1, -1,
+            1, -1,
+            1, 1,
+            -1, 1
+        ]), gl.STATIC_DRAW);
+        const positionLocation = gl.getAttribLocation(program, "a_position");
+        gl.enableVertexAttribArray(positionLocation);
+        gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
+        gl.bindVertexArray(null);
+
+        this.heatParametersBlockBindingPoint = 0;
+
+        const heatParametersBlockIndex = gl.getUniformBlockIndex(program, "HeatParametersBlock");
+        gl.uniformBlockBinding(program, heatParametersBlockIndex, this.heatParametersBlockBindingPoint);
+
+
+        return {
+            program,
+            vao,
+            u_float_texture0: gl.getUniformLocation(program, "u_float_texture0"),
+            u_float_texture1: gl.getUniformLocation(program, "u_float_texture1"),
+            u_color_texture: gl.getUniformLocation(program, "u_color_texture"),
+            u_blend_ratio: gl.getUniformLocation(program, "u_blend_ratio"),
+            u_color_ramp_range: gl.getUniformLocation(program, "u_color_ramp_range"),
+            u_min_max: gl.getUniformLocation(program, "u_min_max"),
+            u_escape_value: gl.getUniformLocation(program, "u_escape_value")
+        };
+    }
+
+
+    getUniformBlockManager() {
+        return new HeatParametersBlockManager(this.gl);
+    }
+    draw(texture0, texture1, colorRampTexture, heatParametersBlockManager) {
+        const { gl, programWrapper } = this;
+        const { program, u_float_texture0, u_float_texture1, u_color_texture } = programWrapper;
+
+        gl.useProgram(program);
+        gl.bindVertexArray(programWrapper.vao);
+        gl.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, texture1);
+        gl.uniform1i(u_float_texture1, 1);
+        gl.activeTexture(gl.TEXTURE2);
+        gl.bindTexture(gl.TEXTURE_2D, colorRampTexture);
+        gl.uniform1i(u_color_texture, 2);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, texture0);
+        gl.uniform1i(u_float_texture0, 0);
+        heatParametersBlockManager.bind();
+        gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
+        gl.bindVertexArray(null);
+        heatParametersBlockManager.unbind();
+    }
+
+
+    free() {
+        const gl = this.gl;
+        gl.deleteBuffer(this._buffer);
+        gl.deleteProgram(this.programWrapper.program);
+        gl.deleteVertexArray(this.programWrapper.vao);
+    }
+
+}
+
+
+class HeatParametersBlockManager {
+    constructor(gl) {
+        this.gl = gl;
+        this.buffer = gl.createBuffer();
+        gl.bindBuffer(gl.UNIFORM_BUFFER, this.buffer);
+        gl.bufferData(gl.UNIFORM_BUFFER, 24, gl.DYNAMIC_DRAW);
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }
+
+
+    /*
+    * @param {Array<number>} color_ramp_range  [minValue,( maxValue - minValue)]
+    * @param {Array<number>} min_max [minEdge, maxEdge]
+    * @param {number} escape_value // value that will be ignored
+    * @param {number} blend_ratio // ratio of blending between two textures
+    * */
+    update({ color_ramp_range = null, min_max = null, escape_value = null, blend_ratio = null }) {
+        const { gl, buffer } = this;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, buffer);
+        if (color_ramp_range) {
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 0, new Float32Array(color_ramp_range));
+        }
+        if (min_max) {
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 8, new Float32Array(min_max));
+        }
+        if (escape_value) {
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 16, new Float32Array([escape_value]));
+        }
+        if (blend_ratio) {
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 20, new Float32Array([blend_ratio]));
+        }
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }
+
+    bind() {
+        const { gl, buffer } = this;
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, this.heatParametersBlockBindingPoint, buffer);
+    }
+
+    free() {
+        this.gl.deleteBuffer(this.buffer);
+    }
+
+    unbind() {
+        const { gl } = this;
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, this.heatParametersBlockBindingPoint, null);
+    }
+
+}

package/programs/float2legendwithratio/object.js

@@ -0,0 +1,132 @@
+import Float2LegentWithRatioProgram from './logic';
+import { glProgramCache } from '../programcache';
+
+// Uniform Buffer Objects use this 
+
+export default class {
+    constructor(gl, {
+        width = 1,
+        height = 1,
+        texture0 = null,
+        texture1 = null,
+        colorRampTexture = null,
+        colorRampRange = null,
+        escapeValue = 99999,
+        blendRatio = 0.0,
+        minMaxEdges = null,
+    } = {}) {
+        this.gl = gl;
+        this.programlogic = glProgramCache.getProgram(gl, Float2LegentWithRatioProgram);
+        this.heatParametersBlockManager = this.programlogic.getUniformBlockManager();
+        this.width = width;
+        this.height = height;
+        this.texture0 = texture0 || this._createColorRampTexture(width, height);
+        this.texture1 = texture1 || this._createColorRampTexture(width, height);
+        this.colorRampTexture = colorRampTexture || this._createColorRampTexture();
+        this.minMaxEdges = minMaxEdges || new Float32Array([-99999, 99999]);
+        this.heatParametersBlockManager.update({
+            escape_value: escapeValue,
+            blend_ratio: blendRatio,
+            min_max: minMaxEdges,
+            color_ramp_range: colorRampRange
+
+        });
+
+    }
+
+
+    _bindBlock() {
+        const gl = this.gl;
+        const program = this.programlogic.programWrapper.program;
+        gl.uniformBlockBinding(program, gl.getUniformBlockIndex(program, 'Block'), 0);
+
+    }
+
+
+    _createColorRampTexture() {
+        const { gl } = this;
+        const texture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        return texture;
+    }
+
+    setBlendRatio(ratio) {
+        if (ratio < 0 || ratio > 1) {
+            console.warn('Invalid blend ratio');
+            return;
+        }
+        this.heatParametersBlockManager.update({ blend_ratio: ratio });
+    }
+
+    setEscapeValue(value) {
+        this.heatParametersBlockManager.update({ escape_value: value });
+    }
+
+
+    setTexture0(texture) {
+        this.texture0 = texture;
+    }
+
+    setTexture1(texture) {
+        this.texture1 = texture;
+    }
+
+    setColorRampTexture(texture) {
+        this.colorRampTexture = texture;
+    }
+
+
+    setDataWidthHeight(width, height) {
+        this.width = width;
+        this.height = height;
+    }
+
+
+    setFloatTextureData(data0, data1, width, height) {
+        const { texture0, texture1, gl } = this;
+        gl.bindTexture(gl.TEXTURE_2D, texture0);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.R16F, width, height, 0, gl.RED, gl.FLOAT, data0);
+        gl.bindTexture(gl.TEXTURE_2D, texture1);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.R16F, width, height, 0, gl.RED, gl.FLOAT, data1);
+    }
+
+
+    setColorRampTextureData(data, size) {
+        const { gl, colorRampTexture } = this;
+        gl.bindTexture(gl.TEXTURE_2D, colorRampTexture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
+    }
+
+    setColorRampRange(min, max) {
+        if (min > max) {
+            console.warn('Invalid min max values');
+            return;
+        }
+        const range = max - min;
+        this.heatParametersBlockManager.update({ color_ramp_range: new Float32Array([min, range]) });
+    }
+
+    setMinMaxEdges(min, max) {
+        if (min) this.minMaxEdges[0] = min;
+        if (max) this.minMaxEdges[1] = max;
+        this.heatParametersBlockManager.update({ min_max: this.minMaxEdges });
+    }
+
+    draw() {
+        this.programlogic.draw(this.texture0, this.texture1, this.colorRampTexture, this.heatParametersBlockManager);
+    }
+
+
+
+    free() {
+        // TODO: What else to free. Does textures and buffers need to be freed?
+        glProgramCache.releaseProgram(this.gl, Float2LegentWithRatioProgram);
+        this.heatParametersBlockManager.free();
+
+    }
+}

package/programs/globeshell/index.js

@@ -0,0 +1,2 @@
+import GlobeShellWiggle from "./globeshell/wiggle";
+export { GlobeShellWiggle };