diff --git a/.eslintrc.js b/.eslintrc.js index 4b9f6b8..91f5c6b 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -6,7 +6,6 @@ module.exports = { }, globals: { 'Image': true, - 'Path2D': true, 'Canvas': true }, rules: { diff --git a/.npmignore b/.npmignore index 5357fd9..7608c6b 100644 --- a/.npmignore +++ b/.npmignore @@ -2,3 +2,4 @@ node_modules/ server/ .DS_Store npm-debug.log +test/ diff --git a/LICENSE b/LICENSE index ee1ca63..8c5e977 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ BSD 3-Clause License -Copyright (c) 2019, Narayana Swamy +Copyright (c) 2019, Narayana Swamy(narayanaswamy14@gmail.com) All rights reserved. Redistribution and use in source and binary forms, with or without diff --git a/README.md b/README.md index e420a99..c5e87f0 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,7 @@ # Visual-Heatmap Js [![npm](https://img.shields.io/npm/v/visual-heatmap.svg)](https://www.npmjs.com/package/visual-heatmap) [![Downloads](https://img.shields.io/npm/dm/visual-heatmap.svg)](https://www.npmjs.com/package/visual-heatmap) -Open source javascript module for rendering high performance, large scale heatmap. - -Visual Heatmap is based on advanced graphical rendering context - WebGL/Shaders. It can render 500,000+ data points with a good framerate. +Visual Heatmap, an open-source JavaScript module, emerges as a powerful tool designed to render large-scale heatmaps with exceptional performance. This framework is based on advanced graphical rendering - WebGL/Shaders. It can render 500,000+ data points with a good framerate. +### Examples:

@@ -24,7 +23,7 @@ Download source code from below links Visual-Heatmap is written in ES6 Modules. To import use below syntax -Importing everthing into namespace +Importing everything into namespace ``` import Heatmap from 'visual-heatmap' ``` @@ -40,9 +39,9 @@ let instance = Heatmap('#containerId', { min: 0, // if not set, will be derived from data intensity: 1.0, background: { - url: "path", - width: 100, // if not set, naturalWidth of the image will be considered - height: 100, // if not set, naturalWidth of the image will be considered + url: "urlPath", + width: 100, // if not set, viewport width of the image will be considered + height: 100, // if not set, viewport height of the image will be considered x: 0, y: 0 }, @@ -70,16 +69,16 @@ let instance = Heatmap('#containerId', { Object with config properties. ``` { -size : Radius of the data point, in pixels. -max : Max data Value for relative gradient computation. -min : Min data Value for relative gradient computation. -intensity : intensity factor. -opacity : Opacity factor. -rotationAngle : Rotation angle. -translate : translate vector [x, y]. -zoom : Zoom Factor. -gradient : Color Gradient, array of objects with color value and offset. -background: To set background of the heatMap + size : Radius of the data point, in pixels. + max : Max data Value for relative gradient computation. + min : Min data Value for relative gradient computation. + intensity : intensity factor. + opacity : Opacity factor. + rotationAngle : Rotation angle. + translate : translate vector [x, y]. + zoom : Zoom Factor. + gradient : Color Gradient, array of objects with color value and offset. + background: To set background of the heatMap } ``` @@ -123,11 +122,11 @@ Try [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html) ### instance.setBackgroundImage({ url: , x: , y: , height: , width: }) Api to set Background image. Accepts Object with { Url, height, width, x, and y} properties as input -Try [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmap_withImage.html) +Try [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html) ### instance.projection({x: , y: }) Api to get projected co-ordinates relative to the heatmap layer. -Try [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html) +Try [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmapWithLabels.html) ### instance.clear() Api to clear canvas. diff --git a/demo/heatmap1.html b/demo/heatmap1.html index e8e4176..c4ca57c 100644 --- a/demo/heatmap1.html +++ b/demo/heatmap1.html @@ -43,7 +43,7 @@ var gui = new dat.GUI(); var Params = function() { - this.points = 20000; + this.points = 10000; this.size = 15; this.opacity = 1.0; this.intensity = 1.0; @@ -56,7 +56,7 @@ }; var params = new Params(); - gui.add( params, 'points', 1, 1000000 ).onChange( function () { + gui.add( params, 'points', 1, 500000 ).onChange( function () { data = generateData(params.points); instance.renderData(data); } ); @@ -82,7 +82,7 @@ instance.setRotationAngle(params.rotationAngle); } ); - data = generateData(20000); + data = generateData(10000); instance.renderData(data); function generateData (count) { diff --git a/demo/heatmap2.html b/demo/heatmap2.html index 3e70061..5f0b60f 100644 --- a/demo/heatmap2.html +++ b/demo/heatmap2.html @@ -17,7 +17,7 @@ let data = []; let instance = Heatmap('#canvas', { - size: 15.0, + size: 25.0, max: 100, backgroundImage: { url: "./world_map_PNG14.png", @@ -43,8 +43,8 @@ var gui = new dat.GUI(); var ParamsCon = function() { - this.points = 100000; - this.size = 15; + this.points = 10000; + this.size = 25; this.opacity = 1.0; this.intensity = 1.0; this.transalteX = 0; @@ -56,7 +56,7 @@ }; var params = new ParamsCon(); - gui.add( params, 'size', 10, 100 ).onChange( function () { + gui.add( params, 'size', 5, 100 ).onChange( function () { instance.setSize(params.size); } ); gui.add( params, 'opacity', 0, 1 ).onChange( function () { @@ -93,7 +93,7 @@ } return data; } - data = generateData(100000); + data = generateData(10000); call(); function call () { diff --git a/demo/heatmap3.html b/demo/heatmap3.html index 12469b8..315c529 100644 --- a/demo/heatmap3.html +++ b/demo/heatmap3.html @@ -60,7 +60,7 @@ }; var params = new ParamsCon(); - gui.add( params, 'size', 1, 100 ).onChange( function () { + gui.add( params, 'size', 1, 200 ).onChange( function () { instance.setSize(params.size); } ); gui.add( params, 'opacity', 0, 1 ).onChange( function () { diff --git a/demo/heatmapWithLabels.html b/demo/heatmapWithLabels.html index 1ca9125..585438a 100644 --- a/demo/heatmapWithLabels.html +++ b/demo/heatmapWithLabels.html @@ -45,7 +45,6 @@ var gui = new dat.GUI(); var ParamsCon = function() { - this.points = 100; this.size = 50; this.opacity = 1.0; this.intensity = 1.0; @@ -59,11 +58,6 @@ }; var params = new ParamsCon(); - gui.add( params, 'points', 1, 1000000 ).onChange( function () { - data = generateData(params.points); - instance.renderData(data); - params.updateLabels(); - } ); gui.add( params, 'size', 50, 100 ).onChange( function () { instance.setSize(params.size); params.updateLabels(); @@ -93,7 +87,7 @@ params.updateLabels(); } ); - data = generateData(100); + data = generateData(200); instance.renderData(data); diff --git a/dist/visualHeatmap.esm.js b/dist/visualHeatmap.esm.js index 6081a79..92cdeda 100644 --- a/dist/visualHeatmap.esm.js +++ b/dist/visualHeatmap.esm.js @@ -1,6 +1,6 @@ /*! * Heatmap v1.0.5 - * (c) 2023 Narayana Swamy (narayanaswamy14@gmail.com) + * (c) 2024 Narayana Swamy (narayanaswamy14@gmail.com) * @license BSD-3-Clause */ function Heatmap (context, config = {}) { @@ -568,15 +568,16 @@ function getPixlRatio (ctx) { } var GradShaders = { - vertex: `attribute vec2 a_position; - attribute float a_intensity; + vertex: `#version 300 es + in vec2 a_position; + in float a_intensity; uniform float u_size; uniform vec2 u_resolution; uniform vec2 u_translate; uniform float u_zoom; uniform float u_angle; uniform float u_density; - varying float v_i; + out float v_i; vec2 rotation(vec2 v, float a, float aspect) { float s = sin(a); float c = cos(a); mat2 m = mat2(c, -s, s, c); @@ -600,11 +601,13 @@ var GradShaders = { gl_PointSize = u_size * u_density; v_i = a_intensity; }`, - fragment: `precision mediump float; + fragment: `#version 300 es + precision mediump float; uniform float u_max; uniform float u_min; uniform float u_intensity; - varying float v_i; + in float v_i; + out vec4 fragColor; void main() { float r = 0.0; vec2 cxy = 2.0 * gl_PointCoord - 1.0; @@ -614,83 +617,64 @@ var GradShaders = { deno = 1.0; } if(r <= 1.0) { - gl_FragColor = vec4(0, 0, 0, ((v_i - u_min) / (deno)) * u_intensity * (1.0 - sqrt(r))); + fragColor = vec4(0, 0, 0, ((v_i - u_min) / (deno)) * u_intensity * (1.0 - sqrt(r))); } }` }; var ColorShader = { vertex: `#version 300 es - precision highp float; - in vec2 a_texCoord; - out vec2 v_texCoord; - void main() { - vec2 clipSpace = a_texCoord * 2.0 - 1.0; - gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1); - v_texCoord = a_texCoord; - }`, + precision highp float; + in vec2 a_texCoord; + out vec2 v_texCoord; + void main() { + vec2 clipSpace = a_texCoord * 2.0 - 1.0; + gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1); + v_texCoord = a_texCoord; + } + `, fragment: `#version 300 es - precision mediump float; - in vec2 v_texCoord; - out vec4 fragColor; - uniform sampler2D u_framebuffer; - uniform vec4 u_colorArr[11]; - uniform float u_colorCount; - uniform float u_opacity; - uniform float u_offset[11]; - - float remap ( float minval, float maxval, float curval ) { - return ( curval - minval ) / ( maxval - minval ); - } + precision mediump float; + in vec2 v_texCoord; + out vec4 fragColor; + uniform sampler2D u_framebuffer; + uniform vec4 u_colorArr[20]; + uniform float u_colorCount; + uniform float u_opacity; + uniform float u_offset[20]; + + float remap ( float minval, float maxval, float curval ) { + return ( curval - minval ) / ( maxval - minval ); + } - void main() { - float alpha = texture(u_framebuffer, v_texCoord.xy).a; - if (alpha > 0.0 && alpha <= 1.0) { - vec4 color_; - if (alpha <= u_offset[0]) { - color_ = u_colorArr[0]; - } else if (alpha <= u_offset[1]) { - color_ = mix( u_colorArr[0], u_colorArr[1], remap( u_offset[0], u_offset[1], alpha ) ); - color_ = color_ * mix( u_colorArr[0][3], u_colorArr[1][3], remap( u_offset[0], u_offset[1], alpha )); - } else if (alpha <= u_offset[2]) { - color_ = mix( u_colorArr[1], u_colorArr[2], remap( u_offset[1], u_offset[2], alpha ) ); - color_ = color_ * mix( u_colorArr[1][3], u_colorArr[2][3], remap( u_offset[1], u_offset[2], alpha )); - } else if (alpha <= u_offset[3]) { - color_ = mix( u_colorArr[2], u_colorArr[3], remap( u_offset[2], u_offset[3], alpha ) ); - color_ = color_ * mix( u_colorArr[2][3], u_colorArr[3][3], remap( u_offset[2], u_offset[3], alpha )); - } else if (alpha <= u_offset[4]) { - color_ = mix( u_colorArr[3], u_colorArr[4], remap( u_offset[3], u_offset[4], alpha ) ); - color_ = color_ * mix( u_colorArr[3][3], u_colorArr[4][3], remap( u_offset[3], u_offset[4], alpha )); - } else if (alpha <= u_offset[5]) { - color_ = mix( u_colorArr[4], u_colorArr[5], remap( u_offset[4], u_offset[5], alpha ) ); - color_ = color_ * mix( u_colorArr[4][3], u_colorArr[5][3], remap( u_offset[4], u_offset[5], alpha )); - } else if (alpha <= u_offset[6]) { - color_ = mix( u_colorArr[5], u_colorArr[6], remap( u_offset[5], u_offset[6], alpha ) ); - color_ = color_ * mix( u_colorArr[5][3], u_colorArr[6][3], remap( u_offset[5], u_offset[6], alpha )); - } else if (alpha <= u_offset[7]) { - color_ = mix( u_colorArr[6], u_colorArr[7], remap( u_offset[6], u_offset[7], alpha ) ); - color_ = color_ * mix( u_colorArr[6][3], u_colorArr[7][3], remap( u_offset[6], u_offset[7], alpha )); - } else if (alpha <= u_offset[8]) { - color_ = mix( u_colorArr[7], u_colorArr[8], remap( u_offset[7], u_offset[8], alpha ) ); - color_ = color_ * mix( u_colorArr[7][3], u_colorArr[8][3], remap( u_offset[7], u_offset[8], alpha )); - } else if (alpha <= u_offset[9]) { - color_ = mix( u_colorArr[8], u_colorArr[9], remap( u_offset[8], u_offset[9], alpha ) ); - color_ = color_ * mix( u_colorArr[8][3], u_colorArr[9][3], remap( u_offset[8], u_offset[9], alpha )); - } else if (alpha <= u_offset[10]) { - color_ = mix( u_colorArr[9], u_colorArr[10], remap( u_offset[9], u_offset[10], alpha ) ); - color_ = color_ * mix( u_colorArr[9][3], u_colorArr[10][3], remap( u_offset[9], u_offset[10], alpha )); - } else { - color_ = vec4(0.0, 0.0, 0.0, 0.0); - } - color_ = color_ * u_opacity; - if (color_.a < 0.0) { - color_.a = 0.0; - } - fragColor = color_; - } else { - fragColor = vec4(0.0, 0.0, 0.0, 0.0); - } - }` + void main() { + float alpha = texture(u_framebuffer, v_texCoord.xy).a; + if (alpha > 0.0 && alpha <= 1.0) { + vec4 color_; + + if (alpha <= u_offset[0]) { + color_ = u_colorArr[0]; + } else { + for (int i = 1; i <= 10; ++i) { + if (alpha <= u_offset[i]) { + color_ = mix( u_colorArr[i - 1], u_colorArr[i], remap( u_offset[i - 1], u_offset[i], alpha ) ); + color_ = color_ * mix( u_colorArr[i - 1][3], u_colorArr[i][3], remap( u_offset[i - 1], u_offset[i], alpha )); + + break; + } + } + } + + color_ = color_ * u_opacity; + if (color_.a < 0.0) { + color_.a = 0.0; + } + fragColor = color_; + } else { + fragColor = vec4(0.0, 0.0, 0.0, 0.0); + } + } + ` }; var imageShaders = { diff --git a/dist/visualHeatmap.esm.min.js b/dist/visualHeatmap.esm.min.js index 4175c16..7771ce4 100644 --- a/dist/visualHeatmap.esm.min.js +++ b/dist/visualHeatmap.esm.min.js @@ -1,6 +1,6 @@ /*! * Heatmap v1.0.5 - * (c) 2023 Narayana Swamy (narayanaswamy14@gmail.com) + * (c) 2024 Narayana Swamy (narayanaswamy14@gmail.com) * @license BSD-3-Clause */ -function t(t,a={}){let i,n,u,s,f,l=[],c=[],h=0,_=null,m=null,d=null;function g(t,o,e){var r=t.createShader(t[o]);if(t.shaderSource(r,e),t.compileShader(r),!t.getShaderParameter(r,t.COMPILE_STATUS)){var a=t.getShaderInfoLog(r);console.error("*** Error compiling shader '"+r+"':"+a),t.deleteShader(r)}return r}function p(t,o){var e=g(t,"VERTEX_SHADER",o.vertex),r=g(t,"FRAGMENT_SHADER",o.fragment),a=t.createProgram();if(t.attachShader(a,e),t.attachShader(a,r),t.linkProgram(a),t.getProgramParameter(a,t.LINK_STATUS))return a;var i=t.getProgramInfoLog(a);return console.error("Error in program linking:"+i),t.deleteProgram(a),null}function x(t,a){let n;if("string"==typeof t)n=document.querySelector(t);else{if(!(t instanceof Element))throw new Error("Context must be either a string or an Element");n=t}const u=n.clientHeight,s=n.clientWidth,f=document.createElement("canvas"),l=f.getContext("webgl2",{premultipliedAlpha:!1,depth:!1,antialias:!0,alpha:!0,preserveDrawingBuffer:!1});i=function(t){const o=window.devicePixelRatio||1,e=t.webkitBackingStorePixelRatio||t.mozBackingStorePixelRatio||t.msBackingStorePixelRatio||t.oBackingStorePixelRatio||t.backingStorePixelRatio||1;return o/e}(l),l.clearColor(0,0,0,0),l.enable(l.BLEND),l.blendEquation(l.FUNC_ADD),l.blendFunc(l.ONE,l.ONE_MINUS_SRC_ALPHA),l.depthMask(!0),f.setAttribute("height",u*i),f.setAttribute("width",s*i),f.style.height=`${u}px`,f.style.width=`${s}px`,f.style.position="absolute",n.appendChild(f),this.gradient=function(t){const o=[],e=t.length,r=[];return t.forEach((function(t){o.push(t.color[0]/255),o.push(t.color[1]/255),o.push(t.color[2]/255),o.push(void 0===t.color[3]?1:t.color[3]),r.push(t.offset)})),{value:new Float32Array(o),length:e,offset:r}}(a.gradient),this.ctx=l,this.width=s,this.height=u,this.layer=f,this.dom=n,this.gradShadOP=function(t){var e=p(t,o);return{program:e,attr:[{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:2,attribute:t.getAttribLocation(e,"a_position"),data:new Float32Array([])},{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:1,attribute:t.getAttribLocation(e,"a_intensity"),data:new Float32Array([])}],uniform:{u_resolution:t.getUniformLocation(e,"u_resolution"),u_max:t.getUniformLocation(e,"u_max"),u_min:t.getUniformLocation(e,"u_min"),u_size:t.getUniformLocation(e,"u_size"),u_intensity:t.getUniformLocation(e,"u_intensity"),u_translate:t.getUniformLocation(e,"u_translate"),u_zoom:t.getUniformLocation(e,"u_zoom"),u_angle:t.getUniformLocation(e,"u_angle"),u_density:t.getUniformLocation(e,"u_density")}}}(this.ctx),this.colorShadOP=function(t){var o=p(t,e);return{program:o,attr:[{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:2,attribute:t.getAttribLocation(o,"a_texCoord"),data:new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1])}],uniform:{u_framebuffer:t.getUniformLocation(o,"u_framebuffer"),u_colorArr:t.getUniformLocation(o,"u_colorArr"),u_colorCount:t.getUniformLocation(o,"u_colorCount"),u_opacity:t.getUniformLocation(o,"u_opacity"),u_offset:t.getUniformLocation(o,"u_offset")}}}(this.ctx),this.imageShaOP=function(t){var o=p(t,r);return{program:o,attr:[{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:2,attribute:t.getAttribLocation(o,"a_position"),data:new Float32Array([])},{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:2,attribute:t.getAttribLocation(o,"a_texCoord"),data:new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1])}],uniform:{u_resolution:t.getUniformLocation(o,"u_resolution"),u_image:t.getUniformLocation(o,"u_image"),u_translate:t.getUniformLocation(o,"u_translate"),u_zoom:t.getUniformLocation(o,"u_zoom"),u_angle:t.getUniformLocation(o,"u_angle"),u_density:t.getUniformLocation(o,"u_density")}}}(this.ctx),this.fbTexObj=l.createTexture(),this.fbo=l.createFramebuffer(),this.size=a.size?a.size:20,m=a.max?a.max:null,_=a.min?a.min:null,this.intensity=a.intensity?a.intensity:1,this.translate=a.translate&&2===a.translate.length?a.translate:[0,0],this.zoom=a.zoom?a.zoom:1,this.angle=a.rotationAngle?a.rotationAngle:0,this.opacity=a.opacity?a.opacity:1,this.ratio=i,a.backgroundImage&&a.backgroundImage.url&&this.setBackgroundImage(a.backgroundImage),this.rawData=[],l.viewport(0,0,l.canvas.width,l.canvas.height),this.render(this.exData||{})}function T(t,o){t.useProgram(this.gradShadOP.program),this.min=null!==_?_:o?.minMax?.min??0,this.max=null!==m?m:o?.minMax?.max??0,this.gradShadOP.attr[0].data=o.posVec||[],this.gradShadOP.attr[1].data=o.rVec||[],t.uniform2fv(this.gradShadOP.uniform.u_resolution,new Float32Array([this.width*this.ratio,this.height*this.ratio])),t.uniform2fv(this.gradShadOP.uniform.u_translate,new Float32Array([this.translate[0],this.translate[1]])),t.uniform1f(this.gradShadOP.uniform.u_zoom,this.zoom?this.zoom:.01),t.uniform1f(this.gradShadOP.uniform.u_angle,this.angle),t.uniform1f(this.gradShadOP.uniform.u_density,this.ratio),t.uniform1f(this.gradShadOP.uniform.u_max,this.max),t.uniform1f(this.gradShadOP.uniform.u_min,this.min),t.uniform1f(this.gradShadOP.uniform.u_size,this.size),t.uniform1f(this.gradShadOP.uniform.u_intensity,this.intensity),this.gradShadOP.attr.forEach((function(o){t.bindBuffer(o.bufferType,o.buffer),t.bufferData(o.bufferType,o.data,o.drawType),t.enableVertexAttribArray(o.attribute),t.vertexAttribPointer(o.attribute,o.size,o.valueType,!0,0,0)})),t.drawArrays(t.POINTS,0,(this.exData.posVec||[]).length/2)}function A(t){const{x:o=0,y:e=0,width:r=0,height:a=0}=this.imageConfig;t.useProgram(this.imageShaOP.program),t.uniform2fv(this.imageShaOP.uniform.u_resolution,new Float32Array([this.width*this.ratio,this.height*this.ratio])),t.uniform2fv(this.imageShaOP.uniform.u_translate,new Float32Array([this.translate[0],this.translate[1]])),t.uniform1f(this.imageShaOP.uniform.u_zoom,this.zoom?this.zoom:.01),t.uniform1f(this.imageShaOP.uniform.u_angle,this.angle),t.uniform1f(this.imageShaOP.uniform.u_density,this.ratio),this.imageShaOP.attr[0].data=new Float32Array([o,e,o+r,e,o,e+a,o,e+a,o+r,e,o+r,e+a]),this.imageShaOP.attr.forEach((function(o){t.bindBuffer(o.bufferType,o.buffer),t.bufferData(o.bufferType,o.data,o.drawType),t.enableVertexAttribArray(o.attribute),t.vertexAttribPointer(o.attribute,o.size,o.valueType,!0,0,0)})),t.uniform1i(this.imageShaOP.uniform.u_image,0),t.activeTexture(this.ctx.TEXTURE0),t.bindTexture(this.ctx.TEXTURE_2D,this.imageTexture),t.drawArrays(t.TRIANGLES,0,6)}function y(t){t.useProgram(this.colorShadOP.program),t.uniform4fv(this.colorShadOP.uniform.u_colorArr,this.gradient.value),t.uniform1f(this.colorShadOP.uniform.u_colorCount,this.gradient.length),t.uniform1fv(this.colorShadOP.uniform.u_offset,new Float32Array(this.gradient.offset)),t.uniform1f(this.colorShadOP.uniform.u_opacity,this.opacity),this.colorShadOP.attr.forEach((function(o){t.bindBuffer(o.bufferType,o.buffer),t.bufferData(o.bufferType,o.data,o.drawType),t.enableVertexAttribArray(o.attribute),t.vertexAttribPointer(o.attribute,o.size,o.valueType,!0,0,0)})),t.uniform1i(this.colorShadOP.uniform.u_framebuffer,0),t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,this.fbTexObj),t.drawArrays(t.TRIANGLES,0,6)}function v(t){const o=this.zoom||.1,e=this.width/2,r=this.height/2,a=this.angle;let i=(t.x-e)/e*o,n=(t.y-r)/r*o;if(0!==a){const t=Math.cos(a),o=Math.sin(a),e=t*i-o*n;n=o*i+t*n,i=e}return i=i*e+e-this.translate[0],n=n*r+r-this.translate[1],{x:i,y:n}}return x.prototype.resize=function(){const t=this.dom.clientHeight,o=this.dom.clientWidth;this.layer.setAttribute("height",t*i),this.layer.setAttribute("width",o*i),this.layer.style.height=`${t}px`,this.layer.style.width=`${o}px`,this.width=o,this.height=t,this.ctx.viewport(0,0,this.width*i,this.height*i),this.render(this.exData)},x.prototype.clear=function(){this.ctx.clear(this.ctx.COLOR_BUFFER_BIT|this.ctx.DEPTH_BUFFER_BIT)},x.prototype.setMax=function(t){m=t,this.render(this.exData)},x.prototype.setMin=function(t){_=t,this.render(this.exData)},x.prototype.setTranslate=function(t){this.translate=2===t.length?t:[0,0],this.render(this.exData)},x.prototype.setZoom=function(t){this.zoom=void 0!==t?t:1,this.render(this.exData)},x.prototype.setRotationAngle=function(t){this.angle=void 0!==t?t:0,this.render(this.exData)},x.prototype.setSize=function(t){this.size=void 0!==t?t:20,this.render(this.exData)},x.prototype.setIntensity=function(t){this.intensity=void 0!==t?t:1,this.render(this.exData)},x.prototype.setOpacity=function(t){this.opacity=void 0!==t?t:1,this.render(this.exData)},x.prototype.setBackgroundImage=function(t){const o=this;t.url&&(d=this.ctx.getParameter(this.ctx.MAX_TEXTURE_SIZE),this.imageTexture=this.ctx.createTexture(),this.type="TEXTURE_2D",this.imageConfig=null,s=t.width||this.width,f=t.height||this.height,s=s>d?d:s,f=f>d?d:f,function(t,o,e){const r=new Image;r.crossOrigin="anonymous",r.onload=o,r.onerror=e,r.src=t}(t.url,(function(){o.ctx.activeTexture(o.ctx.TEXTURE0),o.ctx.bindTexture(o.ctx.TEXTURE_2D,o.imageTexture),o.ctx.texParameteri(o.ctx.TEXTURE_2D,o.ctx.TEXTURE_WRAP_S,o.ctx.CLAMP_TO_EDGE),o.ctx.texParameteri(o.ctx.TEXTURE_2D,o.ctx.TEXTURE_WRAP_T,o.ctx.CLAMP_TO_EDGE),o.ctx.texParameteri(o.ctx.TEXTURE_2D,o.ctx.TEXTURE_MIN_FILTER,o.ctx.LINEAR),o.ctx.texParameteri(o.ctx.TEXTURE_2D,o.ctx.TEXTURE_MAG_FILTER,o.ctx.LINEAR),o.ctx.texImage2D(o.ctx.TEXTURE_2D,0,o.ctx.RGBA,this.naturalWidth,this.naturalHeight,0,o.ctx.RGBA,o.ctx.UNSIGNED_BYTE,this),o.imageConfig={x:t.x||0,y:t.y||0,height:f,width:s,image:this},o.render(o.exData||{})}),(function(t){console.error("Image Load Error",t)})))},x.prototype.addData=function(t,o){const e=this;for(let r=0;rt[r].value&&(e.min=t[r].value),e.max 0.0 && alpha <= 1.0) {\n\t\t\tvec4 color_;\n\t\t\tif (alpha <= u_offset[0]) {\n\t\t\t\tcolor_ = u_colorArr[0];\n\t\t\t} else if (alpha <= u_offset[1]) {\n\t\t\t\tcolor_ = mix( u_colorArr[0], u_colorArr[1], remap( u_offset[0], u_offset[1], alpha ) );\n\t\t\t\tcolor_ = color_ * mix( u_colorArr[0][3], u_colorArr[1][3], remap( u_offset[0], u_offset[1], alpha ));\n\t\t\t} else if (alpha <= u_offset[2]) {\n\t\t\t\tcolor_ = mix( u_colorArr[1], u_colorArr[2], remap( u_offset[1], u_offset[2], alpha ) );\n\t\t\t\tcolor_ = color_ * mix( u_colorArr[1][3], u_colorArr[2][3], remap( u_offset[1], u_offset[2], alpha ));\n\t\t\t} else if (alpha <= u_offset[3]) {\n\t\t\t\tcolor_ = mix( u_colorArr[2], u_colorArr[3], remap( u_offset[2], u_offset[3], alpha ) );\n\t\t\t\tcolor_ = color_ * mix( u_colorArr[2][3], u_colorArr[3][3], remap( u_offset[2], u_offset[3], alpha ));\n\t\t\t} else if (alpha <= u_offset[4]) {\n\t\t\t\tcolor_ = mix( u_colorArr[3], u_colorArr[4], remap( u_offset[3], u_offset[4], alpha ) );\n\t\t\t\tcolor_ = color_ * mix( u_colorArr[3][3], u_colorArr[4][3], remap( u_offset[3], u_offset[4], alpha ));\n\t\t\t} else if (alpha <= u_offset[5]) {\n\t\t\t\tcolor_ = mix( u_colorArr[4], u_colorArr[5], remap( u_offset[4], u_offset[5], alpha ) );\n\t\t\t\tcolor_ = color_ * mix( u_colorArr[4][3], u_colorArr[5][3], remap( u_offset[4], u_offset[5], alpha ));\n\t\t\t} else if (alpha <= u_offset[6]) {\n\t\t\t\tcolor_ = mix( u_colorArr[5], u_colorArr[6], remap( u_offset[5], u_offset[6], alpha ) );\n\t\t\t\tcolor_ = color_ * mix( u_colorArr[5][3], u_colorArr[6][3], remap( u_offset[5], u_offset[6], alpha ));\n\t\t\t} else if (alpha <= u_offset[7]) {\n\t\t\t\tcolor_ = mix( u_colorArr[6], u_colorArr[7], remap( u_offset[6], u_offset[7], alpha ) );\n\t\t\t\tcolor_ = color_ * mix( u_colorArr[6][3], u_colorArr[7][3], remap( u_offset[6], u_offset[7], alpha ));\n\t\t\t} else if (alpha <= u_offset[8]) {\n\t\t\t\tcolor_ = mix( u_colorArr[7], u_colorArr[8], remap( u_offset[7], u_offset[8], alpha ) );\n\t\t\t\tcolor_ = color_ * mix( u_colorArr[7][3], u_colorArr[8][3], remap( u_offset[7], u_offset[8], alpha ));\n\t\t\t} else if (alpha <= u_offset[9]) {\n\t\t\t\tcolor_ = mix( u_colorArr[8], u_colorArr[9], remap( u_offset[8], u_offset[9], alpha ) );\n\t\t\t\tcolor_ = color_ * mix( u_colorArr[8][3], u_colorArr[9][3], remap( u_offset[8], u_offset[9], alpha ));\n\t\t\t} else if (alpha <= u_offset[10]) {\n\t\t\t\tcolor_ = mix( u_colorArr[9], u_colorArr[10], remap( u_offset[9], u_offset[10], alpha ) );\n\t\t\t\tcolor_ = color_ * mix( u_colorArr[9][3], u_colorArr[10][3], remap( u_offset[9], u_offset[10], alpha ));\n\t\t\t} else {\n\t\t\t\tcolor_ = vec4(0.0, 0.0, 0.0, 0.0);\n\t\t\t}\n\t\t\tcolor_ = color_ * u_opacity;\n\t\t\tif (color_.a < 0.0) {\n\t\t\t\tcolor_.a = 0.0;\n\t\t\t}\n\t\t\tfragColor = color_;\n\t\t} else {\n\t\t\tfragColor = vec4(0.0, 0.0, 0.0, 0.0);\n\t\t}\n\t}"},r={vertex:"#version 300 es\n precision highp float;\n in vec2 a_position;\n in vec2 a_texCoord;\n uniform vec2 u_resolution;\n\t\t\t\t\tuniform vec2 u_translate; \n\t\t\t\t\tuniform float u_zoom; \n\t\t\t\t\tuniform float u_angle; \n\t\t\t\t\tuniform float u_density;\n out vec2 v_texCoord;\n\n vec2 rotation(vec2 v, float a, float aspect) {\n\t\t\t\t\t\tfloat s = sin(a); float c = cos(a); mat2 m = mat2(c, -s, s, c);\n\t\t\t\t\t\tmat2 scaleMat = mat2(aspect, 0.0, 0.0, 1.0);\n\t\t\t\t\t\tmat2 scaleMatInv = mat2(1.0/aspect, 0.0, 0.0, 1.0);\n\t\t\t\t\t\treturn scaleMatInv * m * scaleMat * v;\n\t\t\t\t\t}\n\n void main() {\n \tvec2 zeroToOne = (a_position * u_density + u_translate * u_density) / (u_resolution);\n \tzeroToOne.y = 1.0 - zeroToOne.y;\n\t\t\t\t\t\tvec2 zeroToTwo = zeroToOne * 2.0 - 1.0;\n\t\t\t\t\t\tfloat zoomFactor = u_zoom;\n\t\t\t\t\t\tif (zoomFactor == 0.0) {\n\t\t\t\t\t\t\tzoomFactor = 0.1;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tzeroToTwo = zeroToTwo / zoomFactor;\n\t\t\t\t\t\tif (u_angle != 0.0) {\n\t\t\t\t\t\t\tzeroToTwo = rotation(zeroToTwo, u_angle * -1.0, u_resolution.x / u_resolution.y);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tgl_Position = vec4(zeroToTwo , 0, 1);\n\t\t\t\t\t\tv_texCoord = a_texCoord;\n }\n \t\t",fragment:"#version 300 es\n precision mediump float;\n uniform sampler2D u_image;\n in vec2 v_texCoord;\n out vec4 fragColor;\n void main() {\n fragColor = texture(u_image, v_texCoord);\n }\n "};export{t as default}; \ No newline at end of file +function t(t,r={}){let n,a,s,u,f,h=[],c=[],l=0,m=null,_=null,d=null;function g(t,e,o){var i=t.createShader(t[e]);if(t.shaderSource(i,o),t.compileShader(i),!t.getShaderParameter(i,t.COMPILE_STATUS)){var r=t.getShaderInfoLog(i);console.error("*** Error compiling shader '"+i+"':"+r),t.deleteShader(i)}return i}function T(t,e){var o=g(t,"VERTEX_SHADER",e.vertex),i=g(t,"FRAGMENT_SHADER",e.fragment),r=t.createProgram();if(t.attachShader(r,o),t.attachShader(r,i),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS))return r;var n=t.getProgramInfoLog(r);return console.error("Error in program linking:"+n),t.deleteProgram(r),null}function x(t,r){let a;if("string"==typeof t)a=document.querySelector(t);else{if(!(t instanceof Element))throw new Error("Context must be either a string or an Element");a=t}const s=a.clientHeight,u=a.clientWidth,f=document.createElement("canvas"),h=f.getContext("webgl2",{premultipliedAlpha:!1,depth:!1,antialias:!0,alpha:!0,preserveDrawingBuffer:!1});n=function(t){const e=window.devicePixelRatio||1,o=t.webkitBackingStorePixelRatio||t.mozBackingStorePixelRatio||t.msBackingStorePixelRatio||t.oBackingStorePixelRatio||t.backingStorePixelRatio||1;return e/o}(h),h.clearColor(0,0,0,0),h.enable(h.BLEND),h.blendEquation(h.FUNC_ADD),h.blendFunc(h.ONE,h.ONE_MINUS_SRC_ALPHA),h.depthMask(!0),f.setAttribute("height",s*n),f.setAttribute("width",u*n),f.style.height=`${s}px`,f.style.width=`${u}px`,f.style.position="absolute",a.appendChild(f),this.gradient=function(t){const e=[],o=t.length,i=[];return t.forEach((function(t){e.push(t.color[0]/255),e.push(t.color[1]/255),e.push(t.color[2]/255),e.push(void 0===t.color[3]?1:t.color[3]),i.push(t.offset)})),{value:new Float32Array(e),length:o,offset:i}}(r.gradient),this.ctx=h,this.width=u,this.height=s,this.layer=f,this.dom=a,this.gradShadOP=function(t){var o=T(t,e);return{program:o,attr:[{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:2,attribute:t.getAttribLocation(o,"a_position"),data:new Float32Array([])},{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:1,attribute:t.getAttribLocation(o,"a_intensity"),data:new Float32Array([])}],uniform:{u_resolution:t.getUniformLocation(o,"u_resolution"),u_max:t.getUniformLocation(o,"u_max"),u_min:t.getUniformLocation(o,"u_min"),u_size:t.getUniformLocation(o,"u_size"),u_intensity:t.getUniformLocation(o,"u_intensity"),u_translate:t.getUniformLocation(o,"u_translate"),u_zoom:t.getUniformLocation(o,"u_zoom"),u_angle:t.getUniformLocation(o,"u_angle"),u_density:t.getUniformLocation(o,"u_density")}}}(this.ctx),this.colorShadOP=function(t){var e=T(t,o);return{program:e,attr:[{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:2,attribute:t.getAttribLocation(e,"a_texCoord"),data:new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1])}],uniform:{u_framebuffer:t.getUniformLocation(e,"u_framebuffer"),u_colorArr:t.getUniformLocation(e,"u_colorArr"),u_colorCount:t.getUniformLocation(e,"u_colorCount"),u_opacity:t.getUniformLocation(e,"u_opacity"),u_offset:t.getUniformLocation(e,"u_offset")}}}(this.ctx),this.imageShaOP=function(t){var e=T(t,i);return{program:e,attr:[{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:2,attribute:t.getAttribLocation(e,"a_position"),data:new Float32Array([])},{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:2,attribute:t.getAttribLocation(e,"a_texCoord"),data:new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1])}],uniform:{u_resolution:t.getUniformLocation(e,"u_resolution"),u_image:t.getUniformLocation(e,"u_image"),u_translate:t.getUniformLocation(e,"u_translate"),u_zoom:t.getUniformLocation(e,"u_zoom"),u_angle:t.getUniformLocation(e,"u_angle"),u_density:t.getUniformLocation(e,"u_density")}}}(this.ctx),this.fbTexObj=h.createTexture(),this.fbo=h.createFramebuffer(),this.size=r.size?r.size:20,_=r.max?r.max:null,m=r.min?r.min:null,this.intensity=r.intensity?r.intensity:1,this.translate=r.translate&&2===r.translate.length?r.translate:[0,0],this.zoom=r.zoom?r.zoom:1,this.angle=r.rotationAngle?r.rotationAngle:0,this.opacity=r.opacity?r.opacity:1,this.ratio=n,r.backgroundImage&&r.backgroundImage.url&&this.setBackgroundImage(r.backgroundImage),this.rawData=[],h.viewport(0,0,h.canvas.width,h.canvas.height),this.render(this.exData||{})}function p(t,e){t.useProgram(this.gradShadOP.program),this.min=null!==m?m:e?.minMax?.min??0,this.max=null!==_?_:e?.minMax?.max??0,this.gradShadOP.attr[0].data=e.posVec||[],this.gradShadOP.attr[1].data=e.rVec||[],t.uniform2fv(this.gradShadOP.uniform.u_resolution,new Float32Array([this.width*this.ratio,this.height*this.ratio])),t.uniform2fv(this.gradShadOP.uniform.u_translate,new Float32Array([this.translate[0],this.translate[1]])),t.uniform1f(this.gradShadOP.uniform.u_zoom,this.zoom?this.zoom:.01),t.uniform1f(this.gradShadOP.uniform.u_angle,this.angle),t.uniform1f(this.gradShadOP.uniform.u_density,this.ratio),t.uniform1f(this.gradShadOP.uniform.u_max,this.max),t.uniform1f(this.gradShadOP.uniform.u_min,this.min),t.uniform1f(this.gradShadOP.uniform.u_size,this.size),t.uniform1f(this.gradShadOP.uniform.u_intensity,this.intensity),this.gradShadOP.attr.forEach((function(e){t.bindBuffer(e.bufferType,e.buffer),t.bufferData(e.bufferType,e.data,e.drawType),t.enableVertexAttribArray(e.attribute),t.vertexAttribPointer(e.attribute,e.size,e.valueType,!0,0,0)})),t.drawArrays(t.POINTS,0,(this.exData.posVec||[]).length/2)}function y(t){const{x:e=0,y:o=0,width:i=0,height:r=0}=this.imageConfig;t.useProgram(this.imageShaOP.program),t.uniform2fv(this.imageShaOP.uniform.u_resolution,new Float32Array([this.width*this.ratio,this.height*this.ratio])),t.uniform2fv(this.imageShaOP.uniform.u_translate,new Float32Array([this.translate[0],this.translate[1]])),t.uniform1f(this.imageShaOP.uniform.u_zoom,this.zoom?this.zoom:.01),t.uniform1f(this.imageShaOP.uniform.u_angle,this.angle),t.uniform1f(this.imageShaOP.uniform.u_density,this.ratio),this.imageShaOP.attr[0].data=new Float32Array([e,o,e+i,o,e,o+r,e,o+r,e+i,o,e+i,o+r]),this.imageShaOP.attr.forEach((function(e){t.bindBuffer(e.bufferType,e.buffer),t.bufferData(e.bufferType,e.data,e.drawType),t.enableVertexAttribArray(e.attribute),t.vertexAttribPointer(e.attribute,e.size,e.valueType,!0,0,0)})),t.uniform1i(this.imageShaOP.uniform.u_image,0),t.activeTexture(this.ctx.TEXTURE0),t.bindTexture(this.ctx.TEXTURE_2D,this.imageTexture),t.drawArrays(t.TRIANGLES,0,6)}function v(t){t.useProgram(this.colorShadOP.program),t.uniform4fv(this.colorShadOP.uniform.u_colorArr,this.gradient.value),t.uniform1f(this.colorShadOP.uniform.u_colorCount,this.gradient.length),t.uniform1fv(this.colorShadOP.uniform.u_offset,new Float32Array(this.gradient.offset)),t.uniform1f(this.colorShadOP.uniform.u_opacity,this.opacity),this.colorShadOP.attr.forEach((function(e){t.bindBuffer(e.bufferType,e.buffer),t.bufferData(e.bufferType,e.data,e.drawType),t.enableVertexAttribArray(e.attribute),t.vertexAttribPointer(e.attribute,e.size,e.valueType,!0,0,0)})),t.uniform1i(this.colorShadOP.uniform.u_framebuffer,0),t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,this.fbTexObj),t.drawArrays(t.TRIANGLES,0,6)}function E(t){const e=this.zoom||.1,o=this.width/2,i=this.height/2,r=this.angle;let n=(t.x-o)/o*e,a=(t.y-i)/i*e;if(0!==r){const t=Math.cos(r),e=Math.sin(r),o=t*n-e*a;a=e*n+t*a,n=o}return n=n*o+o-this.translate[0],a=a*i+i-this.translate[1],{x:n,y:a}}return x.prototype.resize=function(){const t=this.dom.clientHeight,e=this.dom.clientWidth;this.layer.setAttribute("height",t*n),this.layer.setAttribute("width",e*n),this.layer.style.height=`${t}px`,this.layer.style.width=`${e}px`,this.width=e,this.height=t,this.ctx.viewport(0,0,this.width*n,this.height*n),this.render(this.exData)},x.prototype.clear=function(){this.ctx.clear(this.ctx.COLOR_BUFFER_BIT|this.ctx.DEPTH_BUFFER_BIT)},x.prototype.setMax=function(t){_=t,this.render(this.exData)},x.prototype.setMin=function(t){m=t,this.render(this.exData)},x.prototype.setTranslate=function(t){this.translate=2===t.length?t:[0,0],this.render(this.exData)},x.prototype.setZoom=function(t){this.zoom=void 0!==t?t:1,this.render(this.exData)},x.prototype.setRotationAngle=function(t){this.angle=void 0!==t?t:0,this.render(this.exData)},x.prototype.setSize=function(t){this.size=void 0!==t?t:20,this.render(this.exData)},x.prototype.setIntensity=function(t){this.intensity=void 0!==t?t:1,this.render(this.exData)},x.prototype.setOpacity=function(t){this.opacity=void 0!==t?t:1,this.render(this.exData)},x.prototype.setBackgroundImage=function(t){const e=this;t.url&&(d=this.ctx.getParameter(this.ctx.MAX_TEXTURE_SIZE),this.imageTexture=this.ctx.createTexture(),this.type="TEXTURE_2D",this.imageConfig=null,u=t.width||this.width,f=t.height||this.height,u=u>d?d:u,f=f>d?d:f,function(t,e,o){const i=new Image;i.crossOrigin="anonymous",i.onload=e,i.onerror=o,i.src=t}(t.url,(function(){e.ctx.activeTexture(e.ctx.TEXTURE0),e.ctx.bindTexture(e.ctx.TEXTURE_2D,e.imageTexture),e.ctx.texParameteri(e.ctx.TEXTURE_2D,e.ctx.TEXTURE_WRAP_S,e.ctx.CLAMP_TO_EDGE),e.ctx.texParameteri(e.ctx.TEXTURE_2D,e.ctx.TEXTURE_WRAP_T,e.ctx.CLAMP_TO_EDGE),e.ctx.texParameteri(e.ctx.TEXTURE_2D,e.ctx.TEXTURE_MIN_FILTER,e.ctx.LINEAR),e.ctx.texParameteri(e.ctx.TEXTURE_2D,e.ctx.TEXTURE_MAG_FILTER,e.ctx.LINEAR),e.ctx.texImage2D(e.ctx.TEXTURE_2D,0,e.ctx.RGBA,this.naturalWidth,this.naturalHeight,0,e.ctx.RGBA,e.ctx.UNSIGNED_BYTE,this),e.imageConfig={x:t.x||0,y:t.y||0,height:f,width:u,image:this},e.render(e.exData||{})}),(function(t){console.error("Image Load Error",t)})))},x.prototype.addData=function(t,e){const o=this;for(let i=0;it[i].value&&(o.min=t[i].value),o.max 0.0 && alpha <= 1.0) {\n\t\t\t\t\t\t\tvec4 color_;\n\n\t\t\t\t\t\t\tif (alpha <= u_offset[0]) {\n\t\t\t\t\t\t\t\tcolor_ = u_colorArr[0];\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tfor (int i = 1; i <= 10; ++i) {\n\t\t\t\t\t\t\t\t\tif (alpha <= u_offset[i]) {\n\t\t\t\t\t\t\t\t\t\tcolor_ = mix( u_colorArr[i - 1], u_colorArr[i], remap( u_offset[i - 1], u_offset[i], alpha ) );\n\t\t\t\t\t\t\t\t\t\tcolor_ = color_ * mix( u_colorArr[i - 1][3], u_colorArr[i][3], remap( u_offset[i - 1], u_offset[i], alpha ));\n\n\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tcolor_ = color_ * u_opacity;\n\t\t\t\t\t\t\tif (color_.a < 0.0) {\n\t\t\t\t\t\t\t\tcolor_.a = 0.0;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tfragColor = color_;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tfragColor = vec4(0.0, 0.0, 0.0, 0.0);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t"},i={vertex:"#version 300 es\n precision highp float;\n in vec2 a_position;\n in vec2 a_texCoord;\n uniform vec2 u_resolution;\n\t\t\t\t\tuniform vec2 u_translate; \n\t\t\t\t\tuniform float u_zoom; \n\t\t\t\t\tuniform float u_angle; \n\t\t\t\t\tuniform float u_density;\n out vec2 v_texCoord;\n\n vec2 rotation(vec2 v, float a, float aspect) {\n\t\t\t\t\t\tfloat s = sin(a); float c = cos(a); mat2 m = mat2(c, -s, s, c);\n\t\t\t\t\t\tmat2 scaleMat = mat2(aspect, 0.0, 0.0, 1.0);\n\t\t\t\t\t\tmat2 scaleMatInv = mat2(1.0/aspect, 0.0, 0.0, 1.0);\n\t\t\t\t\t\treturn scaleMatInv * m * scaleMat * v;\n\t\t\t\t\t}\n\n void main() {\n \tvec2 zeroToOne = (a_position * u_density + u_translate * u_density) / (u_resolution);\n \tzeroToOne.y = 1.0 - zeroToOne.y;\n\t\t\t\t\t\tvec2 zeroToTwo = zeroToOne * 2.0 - 1.0;\n\t\t\t\t\t\tfloat zoomFactor = u_zoom;\n\t\t\t\t\t\tif (zoomFactor == 0.0) {\n\t\t\t\t\t\t\tzoomFactor = 0.1;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tzeroToTwo = zeroToTwo / zoomFactor;\n\t\t\t\t\t\tif (u_angle != 0.0) {\n\t\t\t\t\t\t\tzeroToTwo = rotation(zeroToTwo, u_angle * -1.0, u_resolution.x / u_resolution.y);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tgl_Position = vec4(zeroToTwo , 0, 1);\n\t\t\t\t\t\tv_texCoord = a_texCoord;\n }\n \t\t",fragment:"#version 300 es\n precision mediump float;\n uniform sampler2D u_image;\n in vec2 v_texCoord;\n out vec4 fragColor;\n void main() {\n fragColor = texture(u_image, v_texCoord);\n }\n "};export{t as default}; \ No newline at end of file diff --git a/dist/visualHeatmap.js b/dist/visualHeatmap.js index 41b8e5b..a34c404 100644 --- a/dist/visualHeatmap.js +++ b/dist/visualHeatmap.js @@ -1,6 +1,6 @@ /*! * Heatmap v1.0.5 - * (c) 2023 Narayana Swamy (narayanaswamy14@gmail.com) + * (c) 2024 Narayana Swamy (narayanaswamy14@gmail.com) * @license BSD-3-Clause */ (function (global, factory) { @@ -574,15 +574,16 @@ } var GradShaders = { - vertex: `attribute vec2 a_position; - attribute float a_intensity; + vertex: `#version 300 es + in vec2 a_position; + in float a_intensity; uniform float u_size; uniform vec2 u_resolution; uniform vec2 u_translate; uniform float u_zoom; uniform float u_angle; uniform float u_density; - varying float v_i; + out float v_i; vec2 rotation(vec2 v, float a, float aspect) { float s = sin(a); float c = cos(a); mat2 m = mat2(c, -s, s, c); @@ -606,11 +607,13 @@ gl_PointSize = u_size * u_density; v_i = a_intensity; }`, - fragment: `precision mediump float; + fragment: `#version 300 es + precision mediump float; uniform float u_max; uniform float u_min; uniform float u_intensity; - varying float v_i; + in float v_i; + out vec4 fragColor; void main() { float r = 0.0; vec2 cxy = 2.0 * gl_PointCoord - 1.0; @@ -620,83 +623,64 @@ deno = 1.0; } if(r <= 1.0) { - gl_FragColor = vec4(0, 0, 0, ((v_i - u_min) / (deno)) * u_intensity * (1.0 - sqrt(r))); + fragColor = vec4(0, 0, 0, ((v_i - u_min) / (deno)) * u_intensity * (1.0 - sqrt(r))); } }` }; var ColorShader = { vertex: `#version 300 es - precision highp float; - in vec2 a_texCoord; - out vec2 v_texCoord; - void main() { - vec2 clipSpace = a_texCoord * 2.0 - 1.0; - gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1); - v_texCoord = a_texCoord; - }`, + precision highp float; + in vec2 a_texCoord; + out vec2 v_texCoord; + void main() { + vec2 clipSpace = a_texCoord * 2.0 - 1.0; + gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1); + v_texCoord = a_texCoord; + } + `, fragment: `#version 300 es - precision mediump float; - in vec2 v_texCoord; - out vec4 fragColor; - uniform sampler2D u_framebuffer; - uniform vec4 u_colorArr[11]; - uniform float u_colorCount; - uniform float u_opacity; - uniform float u_offset[11]; - - float remap ( float minval, float maxval, float curval ) { - return ( curval - minval ) / ( maxval - minval ); - } + precision mediump float; + in vec2 v_texCoord; + out vec4 fragColor; + uniform sampler2D u_framebuffer; + uniform vec4 u_colorArr[20]; + uniform float u_colorCount; + uniform float u_opacity; + uniform float u_offset[20]; + + float remap ( float minval, float maxval, float curval ) { + return ( curval - minval ) / ( maxval - minval ); + } - void main() { - float alpha = texture(u_framebuffer, v_texCoord.xy).a; - if (alpha > 0.0 && alpha <= 1.0) { - vec4 color_; - if (alpha <= u_offset[0]) { - color_ = u_colorArr[0]; - } else if (alpha <= u_offset[1]) { - color_ = mix( u_colorArr[0], u_colorArr[1], remap( u_offset[0], u_offset[1], alpha ) ); - color_ = color_ * mix( u_colorArr[0][3], u_colorArr[1][3], remap( u_offset[0], u_offset[1], alpha )); - } else if (alpha <= u_offset[2]) { - color_ = mix( u_colorArr[1], u_colorArr[2], remap( u_offset[1], u_offset[2], alpha ) ); - color_ = color_ * mix( u_colorArr[1][3], u_colorArr[2][3], remap( u_offset[1], u_offset[2], alpha )); - } else if (alpha <= u_offset[3]) { - color_ = mix( u_colorArr[2], u_colorArr[3], remap( u_offset[2], u_offset[3], alpha ) ); - color_ = color_ * mix( u_colorArr[2][3], u_colorArr[3][3], remap( u_offset[2], u_offset[3], alpha )); - } else if (alpha <= u_offset[4]) { - color_ = mix( u_colorArr[3], u_colorArr[4], remap( u_offset[3], u_offset[4], alpha ) ); - color_ = color_ * mix( u_colorArr[3][3], u_colorArr[4][3], remap( u_offset[3], u_offset[4], alpha )); - } else if (alpha <= u_offset[5]) { - color_ = mix( u_colorArr[4], u_colorArr[5], remap( u_offset[4], u_offset[5], alpha ) ); - color_ = color_ * mix( u_colorArr[4][3], u_colorArr[5][3], remap( u_offset[4], u_offset[5], alpha )); - } else if (alpha <= u_offset[6]) { - color_ = mix( u_colorArr[5], u_colorArr[6], remap( u_offset[5], u_offset[6], alpha ) ); - color_ = color_ * mix( u_colorArr[5][3], u_colorArr[6][3], remap( u_offset[5], u_offset[6], alpha )); - } else if (alpha <= u_offset[7]) { - color_ = mix( u_colorArr[6], u_colorArr[7], remap( u_offset[6], u_offset[7], alpha ) ); - color_ = color_ * mix( u_colorArr[6][3], u_colorArr[7][3], remap( u_offset[6], u_offset[7], alpha )); - } else if (alpha <= u_offset[8]) { - color_ = mix( u_colorArr[7], u_colorArr[8], remap( u_offset[7], u_offset[8], alpha ) ); - color_ = color_ * mix( u_colorArr[7][3], u_colorArr[8][3], remap( u_offset[7], u_offset[8], alpha )); - } else if (alpha <= u_offset[9]) { - color_ = mix( u_colorArr[8], u_colorArr[9], remap( u_offset[8], u_offset[9], alpha ) ); - color_ = color_ * mix( u_colorArr[8][3], u_colorArr[9][3], remap( u_offset[8], u_offset[9], alpha )); - } else if (alpha <= u_offset[10]) { - color_ = mix( u_colorArr[9], u_colorArr[10], remap( u_offset[9], u_offset[10], alpha ) ); - color_ = color_ * mix( u_colorArr[9][3], u_colorArr[10][3], remap( u_offset[9], u_offset[10], alpha )); - } else { - color_ = vec4(0.0, 0.0, 0.0, 0.0); - } - color_ = color_ * u_opacity; - if (color_.a < 0.0) { - color_.a = 0.0; - } - fragColor = color_; - } else { - fragColor = vec4(0.0, 0.0, 0.0, 0.0); - } - }` + void main() { + float alpha = texture(u_framebuffer, v_texCoord.xy).a; + if (alpha > 0.0 && alpha <= 1.0) { + vec4 color_; + + if (alpha <= u_offset[0]) { + color_ = u_colorArr[0]; + } else { + for (int i = 1; i <= 10; ++i) { + if (alpha <= u_offset[i]) { + color_ = mix( u_colorArr[i - 1], u_colorArr[i], remap( u_offset[i - 1], u_offset[i], alpha ) ); + color_ = color_ * mix( u_colorArr[i - 1][3], u_colorArr[i][3], remap( u_offset[i - 1], u_offset[i], alpha )); + + break; + } + } + } + + color_ = color_ * u_opacity; + if (color_.a < 0.0) { + color_.a = 0.0; + } + fragColor = color_; + } else { + fragColor = vec4(0.0, 0.0, 0.0, 0.0); + } + } + ` }; var imageShaders = { diff --git a/dist/visualHeatmap.min.js b/dist/visualHeatmap.min.js index fca4ab6..1ab2b47 100644 --- a/dist/visualHeatmap.min.js +++ b/dist/visualHeatmap.min.js @@ -1,6 +1,6 @@ /*! * Heatmap v1.0.5 - * (c) 2023 Narayana Swamy (narayanaswamy14@gmail.com) + * (c) 2024 Narayana Swamy (narayanaswamy14@gmail.com) * @license BSD-3-Clause */ -!function(t,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o():"function"==typeof define&&define.amd?define(o):(t="undefined"!=typeof globalThis?globalThis:t||self).visualHeatmap=o()}(this,(function(){"use strict";var t={vertex:"attribute vec2 a_position;\n\tattribute float a_intensity;\n\tuniform float u_size;\n\tuniform vec2 u_resolution;\n\tuniform vec2 u_translate; \n\tuniform float u_zoom; \n\tuniform float u_angle; \n\tuniform float u_density;\n\tvarying float v_i;\n\n\tvec2 rotation(vec2 v, float a, float aspect) {\n\t\tfloat s = sin(a); float c = cos(a); mat2 m = mat2(c, -s, s, c); \n\t\tmat2 scaleMat = mat2(aspect, 0.0, 0.0, 1.0);\n\t\tmat2 scaleMatInv = mat2(1.0/aspect, 0.0, 0.0, 1.0);\n\t\treturn scaleMatInv * m * scaleMat * v;\n\t}\n\n\tvoid main() {\n\t\tvec2 zeroToOne = (a_position * u_density + u_translate * u_density) / (u_resolution);\n\t\tvec2 zeroToTwo = zeroToOne * 2.0 - 1.0;\n\t\tfloat zoomFactor = u_zoom;\n\t\tif (zoomFactor == 0.0) {\n\t\t\tzoomFactor = 0.1;\n\t\t}\n\t\tzeroToTwo = zeroToTwo / zoomFactor;\n\t\tif (u_angle != 0.0) {\n\t\t\tzeroToTwo = rotation(zeroToTwo, u_angle, u_resolution.x / u_resolution.y);\n\t\t}\n\t\tgl_Position = vec4(zeroToTwo , 0, 1);\n\t\tgl_PointSize = u_size * u_density;\n\t\tv_i = a_intensity;\n\t}",fragment:"precision mediump float;\n\tuniform float u_max;\n\tuniform float u_min;\n\tuniform float u_intensity;\n\tvarying float v_i;\n\tvoid main() {\n\t\tfloat r = 0.0; \n\t\tvec2 cxy = 2.0 * gl_PointCoord - 1.0;\n\t\tr = dot(cxy, cxy);\n\t\tfloat deno = u_max - u_min;\n\t\tif (deno <= 0.0) {\n\t\t\tdeno = 1.0;\n\t\t}\n\t\tif(r <= 1.0) {\n\t\t\tgl_FragColor = vec4(0, 0, 0, ((v_i - u_min) / (deno)) * u_intensity * (1.0 - sqrt(r)));\n\t\t}\n\t}"},o={vertex:"#version 300 es\n\tprecision highp float;\n\tin vec2 a_texCoord;\n\tout vec2 v_texCoord;\n\tvoid main() {\n\t\tvec2 clipSpace = a_texCoord * 2.0 - 1.0;\n\t\tgl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\n\t\tv_texCoord = a_texCoord;\n\t}",fragment:"#version 300 es\n\tprecision mediump float;\n\tin vec2 v_texCoord;\n\tout vec4 fragColor;\n\tuniform sampler2D u_framebuffer;\n\tuniform vec4 u_colorArr[11];\n\tuniform float u_colorCount;\n\tuniform float u_opacity;\n\tuniform float u_offset[11];\n\n\tfloat remap ( float minval, float maxval, float curval ) {\n\t\treturn ( curval - minval ) / ( maxval - minval );\n\t}\n\n\tvoid main() {\n\t\tfloat alpha = texture(u_framebuffer, v_texCoord.xy).a;\n\t\tif (alpha > 0.0 && alpha <= 1.0) {\n\t\t\tvec4 color_;\n\t\t\tif (alpha <= u_offset[0]) {\n\t\t\t\tcolor_ = u_colorArr[0];\n\t\t\t} else if (alpha <= u_offset[1]) {\n\t\t\t\tcolor_ = mix( u_colorArr[0], u_colorArr[1], remap( u_offset[0], u_offset[1], alpha ) );\n\t\t\t\tcolor_ = color_ * mix( u_colorArr[0][3], u_colorArr[1][3], remap( u_offset[0], u_offset[1], alpha ));\n\t\t\t} else if (alpha <= u_offset[2]) {\n\t\t\t\tcolor_ = mix( u_colorArr[1], u_colorArr[2], remap( u_offset[1], u_offset[2], alpha ) );\n\t\t\t\tcolor_ = color_ * mix( u_colorArr[1][3], u_colorArr[2][3], remap( u_offset[1], u_offset[2], alpha ));\n\t\t\t} else if (alpha <= u_offset[3]) {\n\t\t\t\tcolor_ = mix( u_colorArr[2], u_colorArr[3], remap( u_offset[2], u_offset[3], alpha ) );\n\t\t\t\tcolor_ = color_ * mix( u_colorArr[2][3], u_colorArr[3][3], remap( u_offset[2], u_offset[3], alpha ));\n\t\t\t} else if (alpha <= u_offset[4]) {\n\t\t\t\tcolor_ = mix( u_colorArr[3], u_colorArr[4], remap( u_offset[3], u_offset[4], alpha ) );\n\t\t\t\tcolor_ = color_ * mix( u_colorArr[3][3], u_colorArr[4][3], remap( u_offset[3], u_offset[4], alpha ));\n\t\t\t} else if (alpha <= u_offset[5]) {\n\t\t\t\tcolor_ = mix( u_colorArr[4], u_colorArr[5], remap( u_offset[4], u_offset[5], alpha ) );\n\t\t\t\tcolor_ = color_ * mix( u_colorArr[4][3], u_colorArr[5][3], remap( u_offset[4], u_offset[5], alpha ));\n\t\t\t} else if (alpha <= u_offset[6]) {\n\t\t\t\tcolor_ = mix( u_colorArr[5], u_colorArr[6], remap( u_offset[5], u_offset[6], alpha ) );\n\t\t\t\tcolor_ = color_ * mix( u_colorArr[5][3], u_colorArr[6][3], remap( u_offset[5], u_offset[6], alpha ));\n\t\t\t} else if (alpha <= u_offset[7]) {\n\t\t\t\tcolor_ = mix( u_colorArr[6], u_colorArr[7], remap( u_offset[6], u_offset[7], alpha ) );\n\t\t\t\tcolor_ = color_ * mix( u_colorArr[6][3], u_colorArr[7][3], remap( u_offset[6], u_offset[7], alpha ));\n\t\t\t} else if (alpha <= u_offset[8]) {\n\t\t\t\tcolor_ = mix( u_colorArr[7], u_colorArr[8], remap( u_offset[7], u_offset[8], alpha ) );\n\t\t\t\tcolor_ = color_ * mix( u_colorArr[7][3], u_colorArr[8][3], remap( u_offset[7], u_offset[8], alpha ));\n\t\t\t} else if (alpha <= u_offset[9]) {\n\t\t\t\tcolor_ = mix( u_colorArr[8], u_colorArr[9], remap( u_offset[8], u_offset[9], alpha ) );\n\t\t\t\tcolor_ = color_ * mix( u_colorArr[8][3], u_colorArr[9][3], remap( u_offset[8], u_offset[9], alpha ));\n\t\t\t} else if (alpha <= u_offset[10]) {\n\t\t\t\tcolor_ = mix( u_colorArr[9], u_colorArr[10], remap( u_offset[9], u_offset[10], alpha ) );\n\t\t\t\tcolor_ = color_ * mix( u_colorArr[9][3], u_colorArr[10][3], remap( u_offset[9], u_offset[10], alpha ));\n\t\t\t} else {\n\t\t\t\tcolor_ = vec4(0.0, 0.0, 0.0, 0.0);\n\t\t\t}\n\t\t\tcolor_ = color_ * u_opacity;\n\t\t\tif (color_.a < 0.0) {\n\t\t\t\tcolor_.a = 0.0;\n\t\t\t}\n\t\t\tfragColor = color_;\n\t\t} else {\n\t\t\tfragColor = vec4(0.0, 0.0, 0.0, 0.0);\n\t\t}\n\t}"},e={vertex:"#version 300 es\n precision highp float;\n in vec2 a_position;\n in vec2 a_texCoord;\n uniform vec2 u_resolution;\n\t\t\t\t\tuniform vec2 u_translate; \n\t\t\t\t\tuniform float u_zoom; \n\t\t\t\t\tuniform float u_angle; \n\t\t\t\t\tuniform float u_density;\n out vec2 v_texCoord;\n\n vec2 rotation(vec2 v, float a, float aspect) {\n\t\t\t\t\t\tfloat s = sin(a); float c = cos(a); mat2 m = mat2(c, -s, s, c);\n\t\t\t\t\t\tmat2 scaleMat = mat2(aspect, 0.0, 0.0, 1.0);\n\t\t\t\t\t\tmat2 scaleMatInv = mat2(1.0/aspect, 0.0, 0.0, 1.0);\n\t\t\t\t\t\treturn scaleMatInv * m * scaleMat * v;\n\t\t\t\t\t}\n\n void main() {\n \tvec2 zeroToOne = (a_position * u_density + u_translate * u_density) / (u_resolution);\n \tzeroToOne.y = 1.0 - zeroToOne.y;\n\t\t\t\t\t\tvec2 zeroToTwo = zeroToOne * 2.0 - 1.0;\n\t\t\t\t\t\tfloat zoomFactor = u_zoom;\n\t\t\t\t\t\tif (zoomFactor == 0.0) {\n\t\t\t\t\t\t\tzoomFactor = 0.1;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tzeroToTwo = zeroToTwo / zoomFactor;\n\t\t\t\t\t\tif (u_angle != 0.0) {\n\t\t\t\t\t\t\tzeroToTwo = rotation(zeroToTwo, u_angle * -1.0, u_resolution.x / u_resolution.y);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tgl_Position = vec4(zeroToTwo , 0, 1);\n\t\t\t\t\t\tv_texCoord = a_texCoord;\n }\n \t\t",fragment:"#version 300 es\n precision mediump float;\n uniform sampler2D u_image;\n in vec2 v_texCoord;\n out vec4 fragColor;\n void main() {\n fragColor = texture(u_image, v_texCoord);\n }\n "};return function(r,a={}){let i,n,u,s,f,l=[],c=[],h=0,_=null,m=null,d=null;function p(t,o,e){var r=t.createShader(t[o]);if(t.shaderSource(r,e),t.compileShader(r),!t.getShaderParameter(r,t.COMPILE_STATUS)){var a=t.getShaderInfoLog(r);console.error("*** Error compiling shader '"+r+"':"+a),t.deleteShader(r)}return r}function g(t,o){var e=p(t,"VERTEX_SHADER",o.vertex),r=p(t,"FRAGMENT_SHADER",o.fragment),a=t.createProgram();if(t.attachShader(a,e),t.attachShader(a,r),t.linkProgram(a),t.getProgramParameter(a,t.LINK_STATUS))return a;var i=t.getProgramInfoLog(a);return console.error("Error in program linking:"+i),t.deleteProgram(a),null}function T(r,a){let n;if("string"==typeof r)n=document.querySelector(r);else{if(!(r instanceof Element))throw new Error("Context must be either a string or an Element");n=r}const u=n.clientHeight,s=n.clientWidth,f=document.createElement("canvas"),l=f.getContext("webgl2",{premultipliedAlpha:!1,depth:!1,antialias:!0,alpha:!0,preserveDrawingBuffer:!1});i=function(t){const o=window.devicePixelRatio||1,e=t.webkitBackingStorePixelRatio||t.mozBackingStorePixelRatio||t.msBackingStorePixelRatio||t.oBackingStorePixelRatio||t.backingStorePixelRatio||1;return o/e}(l),l.clearColor(0,0,0,0),l.enable(l.BLEND),l.blendEquation(l.FUNC_ADD),l.blendFunc(l.ONE,l.ONE_MINUS_SRC_ALPHA),l.depthMask(!0),f.setAttribute("height",u*i),f.setAttribute("width",s*i),f.style.height=`${u}px`,f.style.width=`${s}px`,f.style.position="absolute",n.appendChild(f),this.gradient=function(t){const o=[],e=t.length,r=[];return t.forEach((function(t){o.push(t.color[0]/255),o.push(t.color[1]/255),o.push(t.color[2]/255),o.push(void 0===t.color[3]?1:t.color[3]),r.push(t.offset)})),{value:new Float32Array(o),length:e,offset:r}}(a.gradient),this.ctx=l,this.width=s,this.height=u,this.layer=f,this.dom=n,this.gradShadOP=function(o){var e=g(o,t);return{program:e,attr:[{bufferType:o.ARRAY_BUFFER,buffer:o.createBuffer(),drawType:o.STATIC_DRAW,valueType:o.FLOAT,size:2,attribute:o.getAttribLocation(e,"a_position"),data:new Float32Array([])},{bufferType:o.ARRAY_BUFFER,buffer:o.createBuffer(),drawType:o.STATIC_DRAW,valueType:o.FLOAT,size:1,attribute:o.getAttribLocation(e,"a_intensity"),data:new Float32Array([])}],uniform:{u_resolution:o.getUniformLocation(e,"u_resolution"),u_max:o.getUniformLocation(e,"u_max"),u_min:o.getUniformLocation(e,"u_min"),u_size:o.getUniformLocation(e,"u_size"),u_intensity:o.getUniformLocation(e,"u_intensity"),u_translate:o.getUniformLocation(e,"u_translate"),u_zoom:o.getUniformLocation(e,"u_zoom"),u_angle:o.getUniformLocation(e,"u_angle"),u_density:o.getUniformLocation(e,"u_density")}}}(this.ctx),this.colorShadOP=function(t){var e=g(t,o);return{program:e,attr:[{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:2,attribute:t.getAttribLocation(e,"a_texCoord"),data:new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1])}],uniform:{u_framebuffer:t.getUniformLocation(e,"u_framebuffer"),u_colorArr:t.getUniformLocation(e,"u_colorArr"),u_colorCount:t.getUniformLocation(e,"u_colorCount"),u_opacity:t.getUniformLocation(e,"u_opacity"),u_offset:t.getUniformLocation(e,"u_offset")}}}(this.ctx),this.imageShaOP=function(t){var o=g(t,e);return{program:o,attr:[{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:2,attribute:t.getAttribLocation(o,"a_position"),data:new Float32Array([])},{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:2,attribute:t.getAttribLocation(o,"a_texCoord"),data:new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1])}],uniform:{u_resolution:t.getUniformLocation(o,"u_resolution"),u_image:t.getUniformLocation(o,"u_image"),u_translate:t.getUniformLocation(o,"u_translate"),u_zoom:t.getUniformLocation(o,"u_zoom"),u_angle:t.getUniformLocation(o,"u_angle"),u_density:t.getUniformLocation(o,"u_density")}}}(this.ctx),this.fbTexObj=l.createTexture(),this.fbo=l.createFramebuffer(),this.size=a.size?a.size:20,m=a.max?a.max:null,_=a.min?a.min:null,this.intensity=a.intensity?a.intensity:1,this.translate=a.translate&&2===a.translate.length?a.translate:[0,0],this.zoom=a.zoom?a.zoom:1,this.angle=a.rotationAngle?a.rotationAngle:0,this.opacity=a.opacity?a.opacity:1,this.ratio=i,a.backgroundImage&&a.backgroundImage.url&&this.setBackgroundImage(a.backgroundImage),this.rawData=[],l.viewport(0,0,l.canvas.width,l.canvas.height),this.render(this.exData||{})}function x(t,o){t.useProgram(this.gradShadOP.program),this.min=null!==_?_:o?.minMax?.min??0,this.max=null!==m?m:o?.minMax?.max??0,this.gradShadOP.attr[0].data=o.posVec||[],this.gradShadOP.attr[1].data=o.rVec||[],t.uniform2fv(this.gradShadOP.uniform.u_resolution,new Float32Array([this.width*this.ratio,this.height*this.ratio])),t.uniform2fv(this.gradShadOP.uniform.u_translate,new Float32Array([this.translate[0],this.translate[1]])),t.uniform1f(this.gradShadOP.uniform.u_zoom,this.zoom?this.zoom:.01),t.uniform1f(this.gradShadOP.uniform.u_angle,this.angle),t.uniform1f(this.gradShadOP.uniform.u_density,this.ratio),t.uniform1f(this.gradShadOP.uniform.u_max,this.max),t.uniform1f(this.gradShadOP.uniform.u_min,this.min),t.uniform1f(this.gradShadOP.uniform.u_size,this.size),t.uniform1f(this.gradShadOP.uniform.u_intensity,this.intensity),this.gradShadOP.attr.forEach((function(o){t.bindBuffer(o.bufferType,o.buffer),t.bufferData(o.bufferType,o.data,o.drawType),t.enableVertexAttribArray(o.attribute),t.vertexAttribPointer(o.attribute,o.size,o.valueType,!0,0,0)})),t.drawArrays(t.POINTS,0,(this.exData.posVec||[]).length/2)}function A(t){const{x:o=0,y:e=0,width:r=0,height:a=0}=this.imageConfig;t.useProgram(this.imageShaOP.program),t.uniform2fv(this.imageShaOP.uniform.u_resolution,new Float32Array([this.width*this.ratio,this.height*this.ratio])),t.uniform2fv(this.imageShaOP.uniform.u_translate,new Float32Array([this.translate[0],this.translate[1]])),t.uniform1f(this.imageShaOP.uniform.u_zoom,this.zoom?this.zoom:.01),t.uniform1f(this.imageShaOP.uniform.u_angle,this.angle),t.uniform1f(this.imageShaOP.uniform.u_density,this.ratio),this.imageShaOP.attr[0].data=new Float32Array([o,e,o+r,e,o,e+a,o,e+a,o+r,e,o+r,e+a]),this.imageShaOP.attr.forEach((function(o){t.bindBuffer(o.bufferType,o.buffer),t.bufferData(o.bufferType,o.data,o.drawType),t.enableVertexAttribArray(o.attribute),t.vertexAttribPointer(o.attribute,o.size,o.valueType,!0,0,0)})),t.uniform1i(this.imageShaOP.uniform.u_image,0),t.activeTexture(this.ctx.TEXTURE0),t.bindTexture(this.ctx.TEXTURE_2D,this.imageTexture),t.drawArrays(t.TRIANGLES,0,6)}function y(t){t.useProgram(this.colorShadOP.program),t.uniform4fv(this.colorShadOP.uniform.u_colorArr,this.gradient.value),t.uniform1f(this.colorShadOP.uniform.u_colorCount,this.gradient.length),t.uniform1fv(this.colorShadOP.uniform.u_offset,new Float32Array(this.gradient.offset)),t.uniform1f(this.colorShadOP.uniform.u_opacity,this.opacity),this.colorShadOP.attr.forEach((function(o){t.bindBuffer(o.bufferType,o.buffer),t.bufferData(o.bufferType,o.data,o.drawType),t.enableVertexAttribArray(o.attribute),t.vertexAttribPointer(o.attribute,o.size,o.valueType,!0,0,0)})),t.uniform1i(this.colorShadOP.uniform.u_framebuffer,0),t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,this.fbTexObj),t.drawArrays(t.TRIANGLES,0,6)}function v(t){const o=this.zoom||.1,e=this.width/2,r=this.height/2,a=this.angle;let i=(t.x-e)/e*o,n=(t.y-r)/r*o;if(0!==a){const t=Math.cos(a),o=Math.sin(a),e=t*i-o*n;n=o*i+t*n,i=e}return i=i*e+e-this.translate[0],n=n*r+r-this.translate[1],{x:i,y:n}}return T.prototype.resize=function(){const t=this.dom.clientHeight,o=this.dom.clientWidth;this.layer.setAttribute("height",t*i),this.layer.setAttribute("width",o*i),this.layer.style.height=`${t}px`,this.layer.style.width=`${o}px`,this.width=o,this.height=t,this.ctx.viewport(0,0,this.width*i,this.height*i),this.render(this.exData)},T.prototype.clear=function(){this.ctx.clear(this.ctx.COLOR_BUFFER_BIT|this.ctx.DEPTH_BUFFER_BIT)},T.prototype.setMax=function(t){m=t,this.render(this.exData)},T.prototype.setMin=function(t){_=t,this.render(this.exData)},T.prototype.setTranslate=function(t){this.translate=2===t.length?t:[0,0],this.render(this.exData)},T.prototype.setZoom=function(t){this.zoom=void 0!==t?t:1,this.render(this.exData)},T.prototype.setRotationAngle=function(t){this.angle=void 0!==t?t:0,this.render(this.exData)},T.prototype.setSize=function(t){this.size=void 0!==t?t:20,this.render(this.exData)},T.prototype.setIntensity=function(t){this.intensity=void 0!==t?t:1,this.render(this.exData)},T.prototype.setOpacity=function(t){this.opacity=void 0!==t?t:1,this.render(this.exData)},T.prototype.setBackgroundImage=function(t){const o=this;t.url&&(d=this.ctx.getParameter(this.ctx.MAX_TEXTURE_SIZE),this.imageTexture=this.ctx.createTexture(),this.type="TEXTURE_2D",this.imageConfig=null,s=t.width||this.width,f=t.height||this.height,s=s>d?d:s,f=f>d?d:f,function(t,o,e){const r=new Image;r.crossOrigin="anonymous",r.onload=o,r.onerror=e,r.src=t}(t.url,(function(){o.ctx.activeTexture(o.ctx.TEXTURE0),o.ctx.bindTexture(o.ctx.TEXTURE_2D,o.imageTexture),o.ctx.texParameteri(o.ctx.TEXTURE_2D,o.ctx.TEXTURE_WRAP_S,o.ctx.CLAMP_TO_EDGE),o.ctx.texParameteri(o.ctx.TEXTURE_2D,o.ctx.TEXTURE_WRAP_T,o.ctx.CLAMP_TO_EDGE),o.ctx.texParameteri(o.ctx.TEXTURE_2D,o.ctx.TEXTURE_MIN_FILTER,o.ctx.LINEAR),o.ctx.texParameteri(o.ctx.TEXTURE_2D,o.ctx.TEXTURE_MAG_FILTER,o.ctx.LINEAR),o.ctx.texImage2D(o.ctx.TEXTURE_2D,0,o.ctx.RGBA,this.naturalWidth,this.naturalHeight,0,o.ctx.RGBA,o.ctx.UNSIGNED_BYTE,this),o.imageConfig={x:t.x||0,y:t.y||0,height:f,width:s,image:this},o.render(o.exData||{})}),(function(t){console.error("Image Load Error",t)})))},T.prototype.addData=function(t,o){const e=this;for(let r=0;rt[r].value&&(e.min=t[r].value),e.max 0.0 && alpha <= 1.0) {\n\t\t\t\t\t\t\tvec4 color_;\n\n\t\t\t\t\t\t\tif (alpha <= u_offset[0]) {\n\t\t\t\t\t\t\t\tcolor_ = u_colorArr[0];\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tfor (int i = 1; i <= 10; ++i) {\n\t\t\t\t\t\t\t\t\tif (alpha <= u_offset[i]) {\n\t\t\t\t\t\t\t\t\t\tcolor_ = mix( u_colorArr[i - 1], u_colorArr[i], remap( u_offset[i - 1], u_offset[i], alpha ) );\n\t\t\t\t\t\t\t\t\t\tcolor_ = color_ * mix( u_colorArr[i - 1][3], u_colorArr[i][3], remap( u_offset[i - 1], u_offset[i], alpha ));\n\n\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tcolor_ = color_ * u_opacity;\n\t\t\t\t\t\t\tif (color_.a < 0.0) {\n\t\t\t\t\t\t\t\tcolor_.a = 0.0;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tfragColor = color_;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tfragColor = vec4(0.0, 0.0, 0.0, 0.0);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t"},o={vertex:"#version 300 es\n precision highp float;\n in vec2 a_position;\n in vec2 a_texCoord;\n uniform vec2 u_resolution;\n\t\t\t\t\tuniform vec2 u_translate; \n\t\t\t\t\tuniform float u_zoom; \n\t\t\t\t\tuniform float u_angle; \n\t\t\t\t\tuniform float u_density;\n out vec2 v_texCoord;\n\n vec2 rotation(vec2 v, float a, float aspect) {\n\t\t\t\t\t\tfloat s = sin(a); float c = cos(a); mat2 m = mat2(c, -s, s, c);\n\t\t\t\t\t\tmat2 scaleMat = mat2(aspect, 0.0, 0.0, 1.0);\n\t\t\t\t\t\tmat2 scaleMatInv = mat2(1.0/aspect, 0.0, 0.0, 1.0);\n\t\t\t\t\t\treturn scaleMatInv * m * scaleMat * v;\n\t\t\t\t\t}\n\n void main() {\n \tvec2 zeroToOne = (a_position * u_density + u_translate * u_density) / (u_resolution);\n \tzeroToOne.y = 1.0 - zeroToOne.y;\n\t\t\t\t\t\tvec2 zeroToTwo = zeroToOne * 2.0 - 1.0;\n\t\t\t\t\t\tfloat zoomFactor = u_zoom;\n\t\t\t\t\t\tif (zoomFactor == 0.0) {\n\t\t\t\t\t\t\tzoomFactor = 0.1;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tzeroToTwo = zeroToTwo / zoomFactor;\n\t\t\t\t\t\tif (u_angle != 0.0) {\n\t\t\t\t\t\t\tzeroToTwo = rotation(zeroToTwo, u_angle * -1.0, u_resolution.x / u_resolution.y);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tgl_Position = vec4(zeroToTwo , 0, 1);\n\t\t\t\t\t\tv_texCoord = a_texCoord;\n }\n \t\t",fragment:"#version 300 es\n precision mediump float;\n uniform sampler2D u_image;\n in vec2 v_texCoord;\n out vec4 fragColor;\n void main() {\n fragColor = texture(u_image, v_texCoord);\n }\n "};return function(i,r={}){let n,a,s,u,f,h=[],l=[],c=0,m=null,_=null,d=null;function g(t,e,o){var i=t.createShader(t[e]);if(t.shaderSource(i,o),t.compileShader(i),!t.getShaderParameter(i,t.COMPILE_STATUS)){var r=t.getShaderInfoLog(i);console.error("*** Error compiling shader '"+i+"':"+r),t.deleteShader(i)}return i}function T(t,e){var o=g(t,"VERTEX_SHADER",e.vertex),i=g(t,"FRAGMENT_SHADER",e.fragment),r=t.createProgram();if(t.attachShader(r,o),t.attachShader(r,i),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS))return r;var n=t.getProgramInfoLog(r);return console.error("Error in program linking:"+n),t.deleteProgram(r),null}function x(i,r){let a;if("string"==typeof i)a=document.querySelector(i);else{if(!(i instanceof Element))throw new Error("Context must be either a string or an Element");a=i}const s=a.clientHeight,u=a.clientWidth,f=document.createElement("canvas"),h=f.getContext("webgl2",{premultipliedAlpha:!1,depth:!1,antialias:!0,alpha:!0,preserveDrawingBuffer:!1});n=function(t){const e=window.devicePixelRatio||1,o=t.webkitBackingStorePixelRatio||t.mozBackingStorePixelRatio||t.msBackingStorePixelRatio||t.oBackingStorePixelRatio||t.backingStorePixelRatio||1;return e/o}(h),h.clearColor(0,0,0,0),h.enable(h.BLEND),h.blendEquation(h.FUNC_ADD),h.blendFunc(h.ONE,h.ONE_MINUS_SRC_ALPHA),h.depthMask(!0),f.setAttribute("height",s*n),f.setAttribute("width",u*n),f.style.height=`${s}px`,f.style.width=`${u}px`,f.style.position="absolute",a.appendChild(f),this.gradient=function(t){const e=[],o=t.length,i=[];return t.forEach((function(t){e.push(t.color[0]/255),e.push(t.color[1]/255),e.push(t.color[2]/255),e.push(void 0===t.color[3]?1:t.color[3]),i.push(t.offset)})),{value:new Float32Array(e),length:o,offset:i}}(r.gradient),this.ctx=h,this.width=u,this.height=s,this.layer=f,this.dom=a,this.gradShadOP=function(e){var o=T(e,t);return{program:o,attr:[{bufferType:e.ARRAY_BUFFER,buffer:e.createBuffer(),drawType:e.STATIC_DRAW,valueType:e.FLOAT,size:2,attribute:e.getAttribLocation(o,"a_position"),data:new Float32Array([])},{bufferType:e.ARRAY_BUFFER,buffer:e.createBuffer(),drawType:e.STATIC_DRAW,valueType:e.FLOAT,size:1,attribute:e.getAttribLocation(o,"a_intensity"),data:new Float32Array([])}],uniform:{u_resolution:e.getUniformLocation(o,"u_resolution"),u_max:e.getUniformLocation(o,"u_max"),u_min:e.getUniformLocation(o,"u_min"),u_size:e.getUniformLocation(o,"u_size"),u_intensity:e.getUniformLocation(o,"u_intensity"),u_translate:e.getUniformLocation(o,"u_translate"),u_zoom:e.getUniformLocation(o,"u_zoom"),u_angle:e.getUniformLocation(o,"u_angle"),u_density:e.getUniformLocation(o,"u_density")}}}(this.ctx),this.colorShadOP=function(t){var o=T(t,e);return{program:o,attr:[{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:2,attribute:t.getAttribLocation(o,"a_texCoord"),data:new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1])}],uniform:{u_framebuffer:t.getUniformLocation(o,"u_framebuffer"),u_colorArr:t.getUniformLocation(o,"u_colorArr"),u_colorCount:t.getUniformLocation(o,"u_colorCount"),u_opacity:t.getUniformLocation(o,"u_opacity"),u_offset:t.getUniformLocation(o,"u_offset")}}}(this.ctx),this.imageShaOP=function(t){var e=T(t,o);return{program:e,attr:[{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:2,attribute:t.getAttribLocation(e,"a_position"),data:new Float32Array([])},{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:2,attribute:t.getAttribLocation(e,"a_texCoord"),data:new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1])}],uniform:{u_resolution:t.getUniformLocation(e,"u_resolution"),u_image:t.getUniformLocation(e,"u_image"),u_translate:t.getUniformLocation(e,"u_translate"),u_zoom:t.getUniformLocation(e,"u_zoom"),u_angle:t.getUniformLocation(e,"u_angle"),u_density:t.getUniformLocation(e,"u_density")}}}(this.ctx),this.fbTexObj=h.createTexture(),this.fbo=h.createFramebuffer(),this.size=r.size?r.size:20,_=r.max?r.max:null,m=r.min?r.min:null,this.intensity=r.intensity?r.intensity:1,this.translate=r.translate&&2===r.translate.length?r.translate:[0,0],this.zoom=r.zoom?r.zoom:1,this.angle=r.rotationAngle?r.rotationAngle:0,this.opacity=r.opacity?r.opacity:1,this.ratio=n,r.backgroundImage&&r.backgroundImage.url&&this.setBackgroundImage(r.backgroundImage),this.rawData=[],h.viewport(0,0,h.canvas.width,h.canvas.height),this.render(this.exData||{})}function p(t,e){t.useProgram(this.gradShadOP.program),this.min=null!==m?m:e?.minMax?.min??0,this.max=null!==_?_:e?.minMax?.max??0,this.gradShadOP.attr[0].data=e.posVec||[],this.gradShadOP.attr[1].data=e.rVec||[],t.uniform2fv(this.gradShadOP.uniform.u_resolution,new Float32Array([this.width*this.ratio,this.height*this.ratio])),t.uniform2fv(this.gradShadOP.uniform.u_translate,new Float32Array([this.translate[0],this.translate[1]])),t.uniform1f(this.gradShadOP.uniform.u_zoom,this.zoom?this.zoom:.01),t.uniform1f(this.gradShadOP.uniform.u_angle,this.angle),t.uniform1f(this.gradShadOP.uniform.u_density,this.ratio),t.uniform1f(this.gradShadOP.uniform.u_max,this.max),t.uniform1f(this.gradShadOP.uniform.u_min,this.min),t.uniform1f(this.gradShadOP.uniform.u_size,this.size),t.uniform1f(this.gradShadOP.uniform.u_intensity,this.intensity),this.gradShadOP.attr.forEach((function(e){t.bindBuffer(e.bufferType,e.buffer),t.bufferData(e.bufferType,e.data,e.drawType),t.enableVertexAttribArray(e.attribute),t.vertexAttribPointer(e.attribute,e.size,e.valueType,!0,0,0)})),t.drawArrays(t.POINTS,0,(this.exData.posVec||[]).length/2)}function y(t){const{x:e=0,y:o=0,width:i=0,height:r=0}=this.imageConfig;t.useProgram(this.imageShaOP.program),t.uniform2fv(this.imageShaOP.uniform.u_resolution,new Float32Array([this.width*this.ratio,this.height*this.ratio])),t.uniform2fv(this.imageShaOP.uniform.u_translate,new Float32Array([this.translate[0],this.translate[1]])),t.uniform1f(this.imageShaOP.uniform.u_zoom,this.zoom?this.zoom:.01),t.uniform1f(this.imageShaOP.uniform.u_angle,this.angle),t.uniform1f(this.imageShaOP.uniform.u_density,this.ratio),this.imageShaOP.attr[0].data=new Float32Array([e,o,e+i,o,e,o+r,e,o+r,e+i,o,e+i,o+r]),this.imageShaOP.attr.forEach((function(e){t.bindBuffer(e.bufferType,e.buffer),t.bufferData(e.bufferType,e.data,e.drawType),t.enableVertexAttribArray(e.attribute),t.vertexAttribPointer(e.attribute,e.size,e.valueType,!0,0,0)})),t.uniform1i(this.imageShaOP.uniform.u_image,0),t.activeTexture(this.ctx.TEXTURE0),t.bindTexture(this.ctx.TEXTURE_2D,this.imageTexture),t.drawArrays(t.TRIANGLES,0,6)}function v(t){t.useProgram(this.colorShadOP.program),t.uniform4fv(this.colorShadOP.uniform.u_colorArr,this.gradient.value),t.uniform1f(this.colorShadOP.uniform.u_colorCount,this.gradient.length),t.uniform1fv(this.colorShadOP.uniform.u_offset,new Float32Array(this.gradient.offset)),t.uniform1f(this.colorShadOP.uniform.u_opacity,this.opacity),this.colorShadOP.attr.forEach((function(e){t.bindBuffer(e.bufferType,e.buffer),t.bufferData(e.bufferType,e.data,e.drawType),t.enableVertexAttribArray(e.attribute),t.vertexAttribPointer(e.attribute,e.size,e.valueType,!0,0,0)})),t.uniform1i(this.colorShadOP.uniform.u_framebuffer,0),t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,this.fbTexObj),t.drawArrays(t.TRIANGLES,0,6)}function E(t){const e=this.zoom||.1,o=this.width/2,i=this.height/2,r=this.angle;let n=(t.x-o)/o*e,a=(t.y-i)/i*e;if(0!==r){const t=Math.cos(r),e=Math.sin(r),o=t*n-e*a;a=e*n+t*a,n=o}return n=n*o+o-this.translate[0],a=a*i+i-this.translate[1],{x:n,y:a}}return x.prototype.resize=function(){const t=this.dom.clientHeight,e=this.dom.clientWidth;this.layer.setAttribute("height",t*n),this.layer.setAttribute("width",e*n),this.layer.style.height=`${t}px`,this.layer.style.width=`${e}px`,this.width=e,this.height=t,this.ctx.viewport(0,0,this.width*n,this.height*n),this.render(this.exData)},x.prototype.clear=function(){this.ctx.clear(this.ctx.COLOR_BUFFER_BIT|this.ctx.DEPTH_BUFFER_BIT)},x.prototype.setMax=function(t){_=t,this.render(this.exData)},x.prototype.setMin=function(t){m=t,this.render(this.exData)},x.prototype.setTranslate=function(t){this.translate=2===t.length?t:[0,0],this.render(this.exData)},x.prototype.setZoom=function(t){this.zoom=void 0!==t?t:1,this.render(this.exData)},x.prototype.setRotationAngle=function(t){this.angle=void 0!==t?t:0,this.render(this.exData)},x.prototype.setSize=function(t){this.size=void 0!==t?t:20,this.render(this.exData)},x.prototype.setIntensity=function(t){this.intensity=void 0!==t?t:1,this.render(this.exData)},x.prototype.setOpacity=function(t){this.opacity=void 0!==t?t:1,this.render(this.exData)},x.prototype.setBackgroundImage=function(t){const e=this;t.url&&(d=this.ctx.getParameter(this.ctx.MAX_TEXTURE_SIZE),this.imageTexture=this.ctx.createTexture(),this.type="TEXTURE_2D",this.imageConfig=null,u=t.width||this.width,f=t.height||this.height,u=u>d?d:u,f=f>d?d:f,function(t,e,o){const i=new Image;i.crossOrigin="anonymous",i.onload=e,i.onerror=o,i.src=t}(t.url,(function(){e.ctx.activeTexture(e.ctx.TEXTURE0),e.ctx.bindTexture(e.ctx.TEXTURE_2D,e.imageTexture),e.ctx.texParameteri(e.ctx.TEXTURE_2D,e.ctx.TEXTURE_WRAP_S,e.ctx.CLAMP_TO_EDGE),e.ctx.texParameteri(e.ctx.TEXTURE_2D,e.ctx.TEXTURE_WRAP_T,e.ctx.CLAMP_TO_EDGE),e.ctx.texParameteri(e.ctx.TEXTURE_2D,e.ctx.TEXTURE_MIN_FILTER,e.ctx.LINEAR),e.ctx.texParameteri(e.ctx.TEXTURE_2D,e.ctx.TEXTURE_MAG_FILTER,e.ctx.LINEAR),e.ctx.texImage2D(e.ctx.TEXTURE_2D,0,e.ctx.RGBA,this.naturalWidth,this.naturalHeight,0,e.ctx.RGBA,e.ctx.UNSIGNED_BYTE,this),e.imageConfig={x:t.x||0,y:t.y||0,height:f,width:u,image:this},e.render(e.exData||{})}),(function(t){console.error("Image Load Error",t)})))},x.prototype.addData=function(t,e){const o=this;for(let i=0;it[i].value&&(o.min=t[i].value),o.max 0.0 && alpha <= 1.0) { - vec4 color_; - if (alpha <= u_offset[0]) { - color_ = u_colorArr[0]; - } else if (alpha <= u_offset[1]) { - color_ = mix( u_colorArr[0], u_colorArr[1], remap( u_offset[0], u_offset[1], alpha ) ); - color_ = color_ * mix( u_colorArr[0][3], u_colorArr[1][3], remap( u_offset[0], u_offset[1], alpha )); - } else if (alpha <= u_offset[2]) { - color_ = mix( u_colorArr[1], u_colorArr[2], remap( u_offset[1], u_offset[2], alpha ) ); - color_ = color_ * mix( u_colorArr[1][3], u_colorArr[2][3], remap( u_offset[1], u_offset[2], alpha )); - } else if (alpha <= u_offset[3]) { - color_ = mix( u_colorArr[2], u_colorArr[3], remap( u_offset[2], u_offset[3], alpha ) ); - color_ = color_ * mix( u_colorArr[2][3], u_colorArr[3][3], remap( u_offset[2], u_offset[3], alpha )); - } else if (alpha <= u_offset[4]) { - color_ = mix( u_colorArr[3], u_colorArr[4], remap( u_offset[3], u_offset[4], alpha ) ); - color_ = color_ * mix( u_colorArr[3][3], u_colorArr[4][3], remap( u_offset[3], u_offset[4], alpha )); - } else if (alpha <= u_offset[5]) { - color_ = mix( u_colorArr[4], u_colorArr[5], remap( u_offset[4], u_offset[5], alpha ) ); - color_ = color_ * mix( u_colorArr[4][3], u_colorArr[5][3], remap( u_offset[4], u_offset[5], alpha )); - } else if (alpha <= u_offset[6]) { - color_ = mix( u_colorArr[5], u_colorArr[6], remap( u_offset[5], u_offset[6], alpha ) ); - color_ = color_ * mix( u_colorArr[5][3], u_colorArr[6][3], remap( u_offset[5], u_offset[6], alpha )); - } else if (alpha <= u_offset[7]) { - color_ = mix( u_colorArr[6], u_colorArr[7], remap( u_offset[6], u_offset[7], alpha ) ); - color_ = color_ * mix( u_colorArr[6][3], u_colorArr[7][3], remap( u_offset[6], u_offset[7], alpha )); - } else if (alpha <= u_offset[8]) { - color_ = mix( u_colorArr[7], u_colorArr[8], remap( u_offset[7], u_offset[8], alpha ) ); - color_ = color_ * mix( u_colorArr[7][3], u_colorArr[8][3], remap( u_offset[7], u_offset[8], alpha )); - } else if (alpha <= u_offset[9]) { - color_ = mix( u_colorArr[8], u_colorArr[9], remap( u_offset[8], u_offset[9], alpha ) ); - color_ = color_ * mix( u_colorArr[8][3], u_colorArr[9][3], remap( u_offset[8], u_offset[9], alpha )); - } else if (alpha <= u_offset[10]) { - color_ = mix( u_colorArr[9], u_colorArr[10], remap( u_offset[9], u_offset[10], alpha ) ); - color_ = color_ * mix( u_colorArr[9][3], u_colorArr[10][3], remap( u_offset[9], u_offset[10], alpha )); - } else { - color_ = vec4(0.0, 0.0, 0.0, 0.0); - } - color_ = color_ * u_opacity; - if (color_.a < 0.0) { - color_.a = 0.0; - } - fragColor = color_; - } else { - fragColor = vec4(0.0, 0.0, 0.0, 0.0); - } - }` + void main() { + float alpha = texture(u_framebuffer, v_texCoord.xy).a; + if (alpha > 0.0 && alpha <= 1.0) { + vec4 color_; + + if (alpha <= u_offset[0]) { + color_ = u_colorArr[0]; + } else { + for (int i = 1; i <= 10; ++i) { + if (alpha <= u_offset[i]) { + color_ = mix( u_colorArr[i - 1], u_colorArr[i], remap( u_offset[i - 1], u_offset[i], alpha ) ); + color_ = color_ * mix( u_colorArr[i - 1][3], u_colorArr[i][3], remap( u_offset[i - 1], u_offset[i], alpha )); + + break; + } + } + } + + color_ = color_ * u_opacity; + if (color_.a < 0.0) { + color_.a = 0.0; + } + fragColor = color_; + } else { + fragColor = vec4(0.0, 0.0, 0.0, 0.0); + } + } + ` }; var imageShaders = {