@pirireis/webglobeplugins 0.17.1 → 1.0.2

package/programs/float2legendwithratio/object.js

@@ -1,104 +1,141 @@
-import { Float2LegentWithRatioProgram } from './logic';
-import { glProgramCache } from '../programcache';
-// Uniform Buffer Objects use this 
-export default class DataObject {
-    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, yFlip = false) {
-        const { texture0, texture1, gl } = this;
-        gl.bindTexture(gl.TEXTURE_2D, texture0);
-        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, yFlip);
-        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);
-        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
-    }
-    discard() {
-        this.heatParametersBlockManager.update({ blend_ratio: -1 });
-    }
-    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() {
-        const { gl, texture0, texture1, colorRampTexture } = this;
-        gl.deleteTexture(texture0);
-        gl.deleteTexture(texture1);
-        gl.deleteTexture(colorRampTexture);
-        glProgramCache.releaseProgram(this.gl, Float2LegentWithRatioProgram);
-        this.heatParametersBlockManager.free();
-    }
-}
+import { Float2LegentWithRatioProgram } from './logic';
+import { glProgramCache } from '../programcache';
+
+// Uniform Buffer Objects use this 
+
+export default class DataObject {
+    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, yFlip = false) {
+        const { texture0, texture1, gl } = this;
+
+        gl.bindTexture(gl.TEXTURE_2D, texture0);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, yFlip);
+        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);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+    }
+
+
+    discard() {
+        this.heatParametersBlockManager.update({ blend_ratio: -1 });
+    }
+
+
+    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() {
+        const { gl, texture0, texture1, colorRampTexture } = this;
+        gl.deleteTexture(texture0);
+        gl.deleteTexture(texture1);
+        gl.deleteTexture(colorRampTexture);
+        glProgramCache.releaseProgram(this.gl, Float2LegentWithRatioProgram);
+        this.heatParametersBlockManager.free();
+
+    }
+}

package/programs/helpers/blender.js

@@ -1,7 +1,10 @@
-import { createProgram } from "../util/webglobeplugins";
-/**
- * Blends two float32textures with given ratio.
- */
+import { createProgram } from "../util/webglobeplugins";
+
+
+/**
+ * Blends two float32textures with given ratio.
+ */
+
 const vertexShader = `#version 300 es
 in vec2 a_position;
 out vec2 v_texCoord;
@@ -9,7 +12,8 @@ void main() {
     gl_Position = vec4(a_position, 0.0, 1.0);
     v_texCoord = a_position * 0.5 + 0.5;
 }
-`;
+`;
+
 const fragmentShader = `#version 300 es
 uniform sampler2D u_texture0;
 uniform sampler2D u_texture1;
@@ -21,56 +25,67 @@ void main() {
     vec4 color1 = texture(u_texture1, v_texCoord);
     outColor = mix(color0, color1, u_ratio);
 }
-`;
-export default class BlenderProgram {
-    constructor(gl) {
-        this.gl = gl;
-        this.programWrapper = this._createProgramWrapper();
-    }
-    _craeteProgramWrapper() {
-        const gl = this.gl;
-        const program = createProgram(gl, vertexShader, fragmentShader);
-        this.vao = gl.createVertexArray();
-        gl.bindVertexArray(this.vao);
-        this._buffer = gl.createBuffer();
-        gl.bindBuffer(gl.ARRAY_BUFFER, this._buffer);
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-            -1, -1,
-            1, -1,
-            -1, 1,
-            -1, 1,
-            1, -1,
-            1, 1,
-        ]), gl.STATIC_DRAW);
-        gl.enableVertexAttribArray(0);
-        gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
-        gl.bindVertexArray(null);
-        gl.bindBuffer(gl.ARRAY_BUFFER, null);
-        return { program, uniforms: { u_texture0: gl.getUniformLocation(program, 'u_texture0'), u_texture1: gl.getUniformLocation(program, 'u_texture1'), u_ratio: gl.getUniformLocation(program, 'u_ratio') } };
-    }
-    draw(ratio, texture0, texture1) {
-        const gl = this.gl;
-        gl.useProgram(this.programWrapper.program);
-        gl.bindVertexArray(this.vao);
-        gl.activeTexture(gl.TEXTURE1);
-        gl.bindTexture(gl.TEXTURE_2D, texture1);
-        gl.uniform1i(this.programWrapper.uniforms.u_texture1, 1);
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, texture0);
-        gl.uniform1i(this.programWrapper.uniforms.u_texture0, 0);
-        gl.uniform1f(this.programWrapper.uniforms.u_ratio, ratio);
-        gl.drawArrays(gl.TRIANGLES, 0, 6);
-        gl.bindVertexArray(null);
-    }
-    createFloat32Texture(width, height) {
-        const gl = this.gl;
-        const texture = gl.createTexture();
-        gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.R32F, width, height, 0, gl.RED, gl.FLOAT, null);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-        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);
-        return texture;
-    }
-}
+`;
+
+export default class BlenderProgram {
+    constructor(gl) {
+        this.gl = gl;
+        this.programWrapper = this._createProgramWrapper();
+    }
+
+
+
+    _craeteProgramWrapper() {
+
+        const gl = this.gl;
+
+        const program = createProgram(gl, vertexShader, fragmentShader);
+
+        this.vao = gl.createVertexArray();
+        gl.bindVertexArray(this.vao);
+        this._buffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+            -1, -1,
+            1, -1,
+            -1, 1,
+            -1, 1,
+            1, -1,
+            1, 1,
+        ]), gl.STATIC_DRAW);
+        gl.enableVertexAttribArray(0);
+        gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+        gl.bindVertexArray(null);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        return { program, uniforms: { u_texture0: gl.getUniformLocation(program, 'u_texture0'), u_texture1: gl.getUniformLocation(program, 'u_texture1'), u_ratio: gl.getUniformLocation(program, 'u_ratio') } };
+    }
+
+    draw(ratio, texture0, texture1) {
+        const gl = this.gl;
+        gl.useProgram(this.programWrapper.program);
+        gl.bindVertexArray(this.vao);
+        gl.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, texture1);
+        gl.uniform1i(this.programWrapper.uniforms.u_texture1, 1);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, texture0);
+        gl.uniform1i(this.programWrapper.uniforms.u_texture0, 0);
+        gl.uniform1f(this.programWrapper.uniforms.u_ratio, ratio);
+        gl.drawArrays(gl.TRIANGLES, 0, 6);
+        gl.bindVertexArray(null);
+    }
+
+    createFloat32Texture(width, height) {
+        const gl = this.gl;
+        const texture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.R32F, width, height, 0, gl.RED, gl.FLOAT, null);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+        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);
+        return texture;
+    }
+}
+
+

package/programs/helpers/{fadeaway.js → fadeaway.ts}

@@ -1,5 +1,6 @@
-import { createProgram } from "../../util/webglobjectbuilders";
-import { glProgramCache } from "../programcache";
+import { createProgram } from "../../util/webglobjectbuilders";
+import { glProgramCache } from "../programcache";
+
 const vertexShaderSource = `#version 300 es
 precision highp float; 
 in vec2 a_position;
@@ -8,7 +9,8 @@ void main() {
     gl_Position = vec4(a_position, 0.0, 1.0);
     v_texCoord = a_position * 0.5 + vec2(0.5);
 }
-`;
+`;
+
 const fragmentShaderSource = `#version 300 es
 precision highp float;
 uniform float opacity;
@@ -24,55 +26,71 @@ void main() {
     }
     outColor = vec4(color.rgb, color.a * opacity);
 }
-`;
-class FadeAwayProgram {
-    constructor(gl) {
-        this.gl = gl;
-        this.program = createProgram(gl, vertexShaderSource, fragmentShaderSource);
-        this.vao = gl.createVertexArray();
-        gl.bindVertexArray(this.vao);
-        this._buffer = gl.createBuffer();
-        gl.bindBuffer(gl.ARRAY_BUFFER, this._buffer);
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-            -1, -1,
-            1, -1,
-            -1, 1,
-            -1, 1,
-            1, -1,
-            1, 1,
-        ]), gl.STATIC_DRAW);
-        gl.enableVertexAttribArray(0);
-        gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
-        gl.bindVertexArray(null);
-        gl.bindBuffer(gl.ARRAY_BUFFER, null);
-        this.uniforms = {
-            u_texture: gl.getUniformLocation(this.program, 'u_texture'),
-            opacity: gl.getUniformLocation(this.program, 'opacity')
-        };
-    }
-    draw(texture, opacity) {
-        const { gl, vao, uniforms, program } = this;
-        gl.useProgram(program);
-        gl.bindVertexArray(vao);
-        gl.uniform1f(uniforms.opacity, opacity);
-        gl.uniform1i(uniforms.u_texture, 0);
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.drawArrays(gl.TRIANGLES, 0, 6);
-        gl.bindVertexArray(null);
-    }
-    free() {
-        const { gl, vao, _buffer, program } = this;
-        gl.deleteVertexArray(vao);
-        gl.deleteProgram(program);
-        gl.deleteBuffer(_buffer);
-    }
-}
-export const FadeAwayProgramCache = Object.freeze({
-    get: (gl) => {
-        return glProgramCache.getProgram(gl, FadeAwayProgram);
-    },
-    release: (gl) => {
-        return glProgramCache.releaseProgram(gl, FadeAwayProgram);
-    }
-});
+`;
+
+interface Uniforms {
+    u_texture: WebGLUniformLocation | null;
+    opacity: WebGLUniformLocation | null;
+}
+
+export class FadeAwayProgram {
+    public readonly gl: WebGL2RenderingContext;
+    public readonly program: WebGLProgram;
+    public readonly vao: WebGLVertexArrayObject;
+    public readonly uniforms: Uniforms;
+    private readonly _buffer: WebGLBuffer;
+
+    constructor(gl: WebGL2RenderingContext) {
+        this.gl = gl;
+        this.program = createProgram(gl, vertexShaderSource, fragmentShaderSource);
+        this.vao = gl.createVertexArray()!;
+        gl.bindVertexArray(this.vao);
+        this._buffer = gl.createBuffer()!;
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+            -1, -1,
+            1, -1,
+            -1, 1,
+            -1, 1,
+            1, -1,
+            1, 1,
+        ]), gl.STATIC_DRAW);
+        gl.enableVertexAttribArray(0);
+        gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+        gl.bindVertexArray(null);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+
+        this.uniforms = {
+            u_texture: gl.getUniformLocation(this.program, 'u_texture'),
+            opacity: gl.getUniformLocation(this.program, 'opacity')
+        };
+    }
+
+    public draw(texture: WebGLTexture, opacity: number): void {
+        const { gl, vao, uniforms, program } = this;
+        gl.useProgram(program);
+        gl.bindVertexArray(vao);
+        gl.uniform1f(uniforms.opacity, opacity);
+        gl.uniform1i(uniforms.u_texture, 0);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.drawArrays(gl.TRIANGLES, 0, 6);
+        gl.bindVertexArray(null);
+    }
+
+    public free(): void {
+        const { gl, vao, _buffer, program } = this;
+        gl.deleteVertexArray(vao);
+        gl.deleteProgram(program);
+        gl.deleteBuffer(_buffer);
+    }
+}
+
+export const FadeAwayProgramCache = Object.freeze({
+    get: (gl: WebGL2RenderingContext): FadeAwayProgram => {
+        return glProgramCache.getProgram(gl, FadeAwayProgram);
+    },
+    release: (gl: WebGL2RenderingContext): void => {
+        return glProgramCache.releaseProgram(gl, FadeAwayProgram);
+    }
+});

package/programs/index.js

@@ -1,20 +1,19 @@
-"use strict";
-// import { Float2LegendWithRatio } from "./float2legendwithratio";
-// import { GlobeShellWiggle } from "./globeshell/wiggle";
-// import { CameraUniformBlockTotem, CameraUniformBlockString } from "./totems/index";
-// import ArrowField from "./arrowfield";
-// import { glProgramCache, globeProgramCache, noRegisterGlobeProgramCache } from "./programcache";
-// import { FadeAway } from "./helpers";
-// import * as rings from "./rings";
-// export {
-//     Float2LegendWithRatio,
-//     GlobeShellWiggle,
-//     ArrowField,
-//     CameraUniformBlockTotem,
-//     CameraUniformBlockString,
-//     glProgramCache,
-//     globeProgramCache,
-//     noRegisterGlobeProgramCache,
-//     FadeAway,
-//     rings
-// };
+// import { Float2LegendWithRatio } from "./float2legendwithratio";
+// import { GlobeShellWiggle } from "./globeshell/wiggle";
+// import { CameraUniformBlockTotem, CameraUniformBlockString } from "./totems/index";
+// import ArrowField from "./arrowfield";
+// import { glProgramCache, globeProgramCache, noRegisterGlobeProgramCache } from "./programcache";
+// import { FadeAway } from "./helpers";
+// import * as rings from "./rings";
+// export {
+//     Float2LegendWithRatio,
+//     GlobeShellWiggle,
+//     ArrowField,
+//     CameraUniformBlockTotem,
+//     CameraUniformBlockString,
+//     glProgramCache,
+//     globeProgramCache,
+//     noRegisterGlobeProgramCache,
+//     FadeAway,
+//     rings
+// };