From 6b5a837be9eda90d40da3f23e35fb6131c9fd273 Mon Sep 17 00:00:00 2001 From: Reinder Nijhoff Date: Tue, 30 Apr 2024 09:45:52 +0200 Subject: [PATCH] example build fix --- example/dist/bundle.js | 2 +- example/package.json | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/example/dist/bundle.js b/example/dist/bundle.js index b46039c..737255b 100644 --- a/example/dist/bundle.js +++ b/example/dist/bundle.js @@ -1 +1 @@ -(()=>{"use strict";var t,e;!function(t){t[t.SHADERTOY_WEBGL=0]="SHADERTOY_WEBGL",t[t.SHADERTOY_WEBGL2=1]="SHADERTOY_WEBGL2",t[t.ONESHADER_WEBGL=2]="ONESHADER_WEBGL",t[t.ONESHADER_WEBGL2=3]="ONESHADER_WEBGL2"}(t=t||(t={}));class i{constructor(e,i){this.initialized=!1,this.type=t.SHADERTOY_WEBGL,this.vsSource="",this.fsSource="",this.uniformLocations={},this.attributeLocations={},this._shaderCompiled=!1,this.gl=e;const s=e.context;this.ext=s.getExtension("KHR_parallel_shader_compile"),this._program=s.createProgram(),this.vs=s.createShader(s.VERTEX_SHADER),this.fs=s.createShader(s.FRAGMENT_SHADER),this.type=this.detectType(i),this.vsSource=this.getVertexShader(this.type),s.shaderSource(this.vs,this.vsSource),s.compileShader(this.vs),this.fsSource=`${this.getFragmentShader(this.type)}${i}`,s.shaderSource(this.fs,this.fsSource),s.compileShader(this.fs),s.attachShader(this._program,this.vs),s.attachShader(this._program,this.fs),s.linkProgram(this._program)}get program(){if(this.initialized)return this._program;this.initialized=!0;const t=this.gl.context;let e=t.getShaderParameter(this.vs,t.COMPILE_STATUS);if(!e)throw console.table(this.vsSource.split("\n")),new Error(`ImageEffectRenderer: Vertex shader compilation failed: ${t.getShaderInfoLog(this.vs)}`);if(e=t.getShaderParameter(this.fs,t.COMPILE_STATUS),!e)throw console.table(this.fsSource.split("\n")),new Error(`ImageEffectRenderer: Shader compilation failed: ${t.getShaderInfoLog(this.fs)}`);if(e=t.getProgramParameter(this._program,t.LINK_STATUS),!e)throw new Error(`ImageEffectRenderer: Program linking failed: ${t.getProgramInfoLog(this._program)}`);return this._program}get shaderCompiled(){return this._shaderCompiled=this._shaderCompiled||!this.ext||this.gl.context.getProgramParameter(this._program,this.ext.COMPLETION_STATUS_KHR),this._shaderCompiled}use(){this.gl.context.useProgram(this.program)}getUniformLocation(t){return void 0!==this.uniformLocations[t]?this.uniformLocations[t]:this.uniformLocations[t]=this.gl.context.getUniformLocation(this._program,t)}getAttributeLocation(t){return void 0!==this.attributeLocations[t]?this.attributeLocations[t]:(this.gl.context.useProgram(this.program),this.attributeLocations[t]=this.gl.context.getAttribLocation(this._program,t))}detectType(e){return/mainImage/gim.exec(e)?this.gl.isWebGL2?t.SHADERTOY_WEBGL2:t.SHADERTOY_WEBGL:/^#version[\s]+300[\s]+es[\s]+/gim.exec(e)?t.ONESHADER_WEBGL2:t.ONESHADER_WEBGL}getFragmentShader(e){switch(e){case t.SHADERTOY_WEBGL:return`precision highp float;\n\n ${this.getUniformShader()}\n\n varying vec2 vUV0;\n void mainImage(out vec4, vec2);\n\n vec4 texture(sampler2D tex, vec2 uv) {\n return texture2D(tex, uv);\n }\n\n void main(void) {\n gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n mainImage(gl_FragColor, vUV0 * iResolution.xy);\n }\n `;case t.SHADERTOY_WEBGL2:return`#version 300 es\n precision highp float;\n\n ${this.getUniformShader()}\n\n in vec2 vUV0;\n out vec4 outFragColor;\n\n void mainImage(out vec4, vec2);\n\n vec4 texture2D(sampler2D tex, vec2 uv) {\n return texture(tex, uv);\n }\n\n void main(void) {\n outFragColor = vec4(0.0, 0.0, 0.0, 1.0);\n mainImage(outFragColor, vUV0 * iResolution.xy);\n }\n `;default:return""}}getVertexShader(e){switch(e){case t.SHADERTOY_WEBGL:return"attribute vec2 aPos;\n attribute vec2 aUV;\n\n varying vec2 vUV0;\n\n void main(void) {\n vUV0 = aUV;\n gl_Position = vec4(aPos, 0.0, 1.0);\n }\n ";case t.SHADERTOY_WEBGL2:return"#version 300 es\n in vec2 aPos;\n in vec2 aUV;\n\n out vec2 vUV0;\n\n void main(void) {\n vUV0 = aUV;\n gl_Position = vec4(aPos, 0.0, 1.0);\n }\n ";case t.ONESHADER_WEBGL:return"attribute vec3 aPos;\n attribute vec2 aUV;\n\n uniform float iAspect;\n\n varying vec2 vScreen;\n varying vec2 vUV0;\n\n void main(void) {\n vUV0 = aUV;\n vScreen = aPos.xy;\n vScreen.x *= iAspect;\n gl_Position = vec4(aPos, 1.0);\n }";case t.ONESHADER_WEBGL2:default:return"#version 300 es\n in vec3 aPos;\n in vec2 aUV;\n\n uniform float iAspect;\n\n out vec2 vScreen;\n out vec2 vUV0;\n\n void main(void) {\n vUV0 = aUV;\n vScreen = aPos.xy;\n vScreen.x *= iAspect;\n gl_Position = vec4(aPos, 1.0);\n }"}}getUniformShader(){return"\n uniform vec2 iResolution;\n uniform float iTime;\n uniform float iGlobalTime;\n uniform float iAspect;\n uniform int iFrame;\n uniform vec4 iMouse;\n\n uniform highp sampler2D iChannel0;\n uniform highp sampler2D iChannel1;\n uniform highp sampler2D iChannel2;\n uniform highp sampler2D iChannel3;\n\n uniform vec2 iChannelResolution0;\n uniform vec2 iChannelResolution1;\n uniform vec2 iChannelResolution2;\n uniform vec2 iChannelResolution3;\n "}}!function(t){t[t.INT=0]="INT",t[t.FLOAT=1]="FLOAT",t[t.VEC2=2]="VEC2",t[t.VEC3=3]="VEC3",t[t.VEC4=4]="VEC4",t[t.MATRIX=5]="MATRIX"}(e=e||(e={}));class s{constructor(t,e){this.x=0,this.y=0,this.z=0,this.w=0,this.type=t,this.name=e}}class n{constructor(t=void 0){this.isWebGL2=!0,this.lastQuadVBO=void 0,this.sharedPrograms={},this.sharedTextures={},this.canvas=t||document.createElement("canvas");const e={premultipliedAlpha:!0,alpha:!0,preserveDrawingBuffer:!1,antialias:!1,depth:!1,stencil:!1};this.context=this.canvas.getContext("webgl2",e),this.context||(this.context=this.canvas.getContext("webgl",e),this.isWebGL2=!1),this.context.getExtension("WEBGL_color_buffer_float"),this.context.getExtension("EXT_color_buffer_float"),this.context.getExtension("OES_texture_float"),this.context.getExtension("OES_texture_float_linear"),this.context.getExtension("KHR_parallel_shader_compile"),this.context.clearColor(0,0,0,0),this.context.clear(this.context.COLOR_BUFFER_BIT),this.context.enable(this.context.BLEND),this.context.blendFunc(this.context.ONE,this.context.ONE_MINUS_SRC_ALPHA),this.quadVBO=this.generateQuad()}generateQuad(){const t=this.context,e=new Float32Array([-1,1,0,1,-1,-1,0,0,1,1,1,1,1,-1,1,0]),i=t.createBuffer();return t.bindBuffer(t.ARRAY_BUFFER,i),t.bufferData(t.ARRAY_BUFFER,e,t.STATIC_DRAW),i}drawQuad(t,e){const i=this.context;this.lastQuadVBO!==this.quadVBO&&(this.lastQuadVBO=this.quadVBO,i.bindBuffer(i.ARRAY_BUFFER,this.quadVBO),i.enableVertexAttribArray(t),i.vertexAttribPointer(t,2,i.FLOAT,!1,16,0),i.enableVertexAttribArray(e),i.vertexAttribPointer(e,2,i.FLOAT,!1,16,8)),i.drawArrays(i.TRIANGLE_STRIP,0,4)}getCachedTexture(t,e){const i=`${t}_${e.clampX}_${e.clampY}_${e.useMipmap}`;return this.sharedTextures[t]?this.sharedTextures[i]:this.sharedTextures[i]=this.context.createTexture()}compileShader(t){return this.sharedPrograms[t]?this.sharedPrograms[t]:this.sharedPrograms[t]=new i(this,t)}setTextureParameter(t,e){const i=this.context;i.bindTexture(i.TEXTURE_2D,t),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_WRAP_S,e.clampX?i.CLAMP_TO_EDGE:i.REPEAT),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_WRAP_T,e.clampY?i.CLAMP_TO_EDGE:i.REPEAT),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_MAG_FILTER,e.magFilterLinear?i.LINEAR:i.NEAREST),e.useMipmap?(i.texParameteri(i.TEXTURE_2D,i.TEXTURE_MIN_FILTER,i.LINEAR_MIPMAP_LINEAR),i.generateMipmap(i.TEXTURE_2D)):i.texParameteri(i.TEXTURE_2D,i.TEXTURE_MIN_FILTER,e.minFilterLinear?i.LINEAR:i.NEAREST)}bindTextures(t){const e=this.context;for(let i=0;i<8;i++){e.activeTexture(e.TEXTURE0+i);const s=t[i];s&&s.buffer?e.bindTexture(e.TEXTURE_2D,s.buffer.src.texture):s&&s.texture?e.bindTexture(e.TEXTURE_2D,s.texture):e.bindTexture(e.TEXTURE_2D,null)}}setUniforms(t,i){const s=this.context;Object.values(t).forEach((t=>{const n=i.getUniformLocation(t.name);if(null!==n)switch(t.type){case e.INT:s.uniform1i(n,t.x);break;case e.FLOAT:s.uniform1f(n,t.x);break;case e.VEC2:s.uniform2f(n,t.x,t.y);break;case e.VEC3:s.uniform3f(n,t.x,t.y,t.z);break;case e.VEC4:s.uniform4f(n,t.x,t.y,t.z,t.w);break;case e.MATRIX:s.uniformMatrix4fv(n,!1,t.matrix)}}))}}class r{constructor(t){this.width=0,this.height=0,this.frame=0,this.uniforms={},this.textures=[],this.gl=t}setImage(t,e,i={}){if(t>=8)throw new Error("ImageEffectRenderer: A maximum of 8 slots is available, slotIndex is out of bounds.");this.setUniformInt(`iChannel${t}`,t),this.setUniformVec2(`iChannelResolution${t}`,e.width,e.height);const s=this.gl.context,n=this.textures[t];if(e instanceof r){n&&n.texture&&!n.cached&&s.deleteTexture(n.texture);const r={...e.options,...i};this.textures[t]={texture:void 0,buffer:e,cached:!1},this.gl.setTextureParameter(e.src.texture,r),this.gl.setTextureParameter(e.dest.texture,r)}else{const o={...r.defaultImageOptions,...i};o.useCache=o.useCache&&e instanceof HTMLImageElement,o.useCache&&n&&n.texture&&!n.cached&&(s.deleteTexture(n.texture),n.texture=void 0);let a=n&&n.texture;o.useCache&&e instanceof HTMLImageElement&&(a=this.gl.getCachedTexture(e.src,o)),a||(a=s.createTexture()),this.textures[t]={texture:a,buffer:void 0,cached:o.useCache},s.bindTexture(s.TEXTURE_2D,a),s.pixelStorei(s.UNPACK_FLIP_Y_WEBGL,i.flipY?1:0),s.texImage2D(s.TEXTURE_2D,0,s.RGBA,s.RGBA,s.UNSIGNED_BYTE,e),this.gl.setTextureParameter(a,o)}}setUniformFloat(t,i){this.setUniform(t,e.FLOAT,i,0,0,0,void 0)}setUniformInt(t,i){this.setUniform(t,e.INT,i,0,0,0,void 0)}setUniformVec2(t,i,s){this.setUniform(t,e.VEC2,i,s,0,0,void 0)}setUniformVec3(t,i,s,n){this.setUniform(t,e.VEC3,i,s,n,0,void 0)}setUniformVec4(t,i,s,n,r){this.setUniform(t,e.VEC4,i,s,n,r,void 0)}setUniformMatrix(t,i){this.setUniform(t,e.MATRIX,0,0,0,0,i)}draw(t=0,e,i){this.width=0|e,this.height=0|i,this.program.use(),this.setUniformFloat("iGlobalTime",t),this.setUniformFloat("iTime",t),this.setUniformInt("iFrame",this.frame),this.setUniformFloat("iAspect",e/i),this.setUniformVec2("iResolution",e,i),this.gl.setUniforms(this.uniforms,this.program),this.gl.bindTextures(this.textures),this.gl.drawQuad(this.program.getAttributeLocation("aPos"),this.program.getAttributeLocation("aUV")),this.frame++}get shaderCompiled(){return this.program.shaderCompiled}setUniform(t,e,i,n,r,o,a){let h=this.uniforms[t];h||(h=this.uniforms[t]=new s(e,t)),h.x=i,h.y=n,h.z=r,h.w=o,h.matrix=a}destruct(){const t=this.gl.context;Object.values(this.textures).forEach((e=>{e.texture&&!e.cached&&t.deleteTexture(e.texture)})),this.textures=[],this.uniforms={}}}r.defaultImageOptions={clampX:!0,clampY:!0,flipY:!1,useMipmap:!0,useCache:!0,minFilterLinear:!0,magFilterLinear:!0};class o{constructor(t,e=WebGLRenderingContext.UNSIGNED_BYTE){if(this.width=0,this.height=0,this.format=WebGLRenderingContext.RGBA,this.internalFormat=WebGLRenderingContext.RGBA,this.type=WebGLRenderingContext.UNSIGNED_BYTE,this.gl=t,this.type=e,t.isWebGL2)switch(e){case WebGLRenderingContext.UNSIGNED_BYTE:this.internalFormat=WebGL2RenderingContext.RGBA8;break;case WebGLRenderingContext.FLOAT:this.internalFormat=WebGL2RenderingContext.RGBA32F}else this.internalFormat=this.format;const i=t.context;this.texture=i.createTexture(),this.resize(16,16),this.frameBuffer=i.createFramebuffer(),i.bindFramebuffer(i.FRAMEBUFFER,this.frameBuffer),i.framebufferTexture2D(i.FRAMEBUFFER,i.COLOR_ATTACHMENT0,i.TEXTURE_2D,this.texture,0),i.bindFramebuffer(i.FRAMEBUFFER,null)}resize(t,e){if(this.width===(0|t)&&this.height===(0|e))return;this.width=0|t,this.height=0|e;const i=this.gl.context;i.bindTexture(i.TEXTURE_2D,this.texture),i.pixelStorei(i.UNPACK_FLIP_Y_WEBGL,0),this.gl.isWebGL2?i.texImage2D(i.TEXTURE_2D,0,this.internalFormat,this.width,this.height,0,this.format,this.type,null):i.texImage2D(i.TEXTURE_2D,0,this.format,this.width,this.height,0,this.format,this.type,null)}destruct(){const t=this.gl.context;this.frameBuffer&&t.deleteFramebuffer(this.frameBuffer),this.texture&&t.deleteTexture(this.texture)}}class a extends r{constructor(t,e={}){super(t),this.options={...a.defaultBufferOptions,...e},this.frameBuffer0=new o(t,this.options.type),this.frameBuffer1=new o(t,this.options.type)}draw(t=0,e,i){if(e<=0||i<=0)return;const s=this.gl.context,n=this.dest;n.resize(e,i),s.bindFramebuffer(s.FRAMEBUFFER,n.frameBuffer),s.clear(s.COLOR_BUFFER_BIT),super.draw(t,e,i),s.bindFramebuffer(s.FRAMEBUFFER,null)}get src(){return this.frame%2==0?this.frameBuffer0:this.frameBuffer1}get dest(){return this.frame%2==1?this.frameBuffer0:this.frameBuffer1}destruct(){super.destruct(),this.frameBuffer0.destruct(),this.frameBuffer1.destruct()}}a.defaultBufferOptions={...r.defaultImageOptions,useMipmap:!1,useCache:!1,type:WebGLRenderingContext.UNSIGNED_BYTE};class h extends r{constructor(t,e,s,n={}){if(super(t),this.buffers=[],this.time=0,this.tickFuncs=[],this.readyFuncs=[],this.startTime=-1,this.drawOneFrame=!1,this.animationRequestId=0,this._ready=!1,this.options={...u.defaultOptions,...n},this.index=h.index++,this.container=e,this.main=this,this.options.useSharedContext){this.canvas=document.createElement("canvas");const t=this.canvas.getContext("2d");t.fillStyle="#00000000",t.clearRect(0,0,this.canvas.width,this.canvas.height)}else this.canvas=this.gl.canvas;this.canvas.style.width="100%",this.canvas.style.height="100%",this.container.appendChild(this.canvas),this.program=new i(this.gl,s),this.resizeObserver=new ResizeObserver((()=>{this.options.autoResize&&this.updateSize()})),this.resizeObserver.observe(e),this.options.useSharedContext||this.drawingLoop(0)}play(){this.options.loop=!0}stop(){this.options.loop=!1}createBuffer(t,e,i={}){const s=this.buffers[t];s&&s.destruct();const n=new a(this.gl,i);return n.program=this.gl.compileShader(e),n.main=this,this.buffers[t]=n}tick(t){this.tickFuncs.push(t)}ready(t){this.readyFuncs.push(t)}drawFrame(t=0){this.time=t/1e3,this.drawOneFrame=!0}get drawThisFrame(){return(this.options.loop||this.drawOneFrame)&&this.width>0&&this.height>0&&(!this.options.asyncCompile||this.allShadersCompiled)}drawInstance(t){const e=this.gl.context;this.drawOneFrame||(this.time+=t),this.tickFuncs.forEach((e=>e(t))),this.buffers.forEach((t=>{t&&(e.viewport(0,0,this.width,this.height),t.draw(this.time,this.canvas.width,this.canvas.height))})),e.viewport(0,0,this.width,this.height),e.clear(e.COLOR_BUFFER_BIT),this.draw(this.time,this.canvas.width,this.canvas.height),this.drawOneFrame=!1}get allShadersCompiled(){return this.shaderCompiled&&this.buffers.every((t=>t&&t.shaderCompiled))}update(t){this.allShadersCompiled&&(this._ready||(this._ready=!0,this.readyFuncs.forEach((t=>t())),this.readyFuncs=[]))}updateSize(){this.width=this.container.offsetWidth*this.options.pixelRatio|0,this.height=this.container.offsetHeight*this.options.pixelRatio|0,this.width===this.canvas.width&&this.height===this.canvas.height||(this.canvas.width=this.width,this.canvas.height=this.height,this.drawOneFrame=!0)}drawingLoop(t=0){this.animationRequestId=window.requestAnimationFrame((t=>this.drawingLoop(t))),t/=1e3;const e=this.startTime<0?1/60:t-this.startTime;this.startTime=t>0?t:-1,this.update(e),this.drawThisFrame&&this.drawInstance(e)}destruct(){cancelAnimationFrame(this.animationRequestId),super.destruct(),this.resizeObserver.disconnect(),this.container.removeChild(this.canvas),this.canvas.replaceWith(this.canvas.cloneNode(!0)),this.buffers.forEach((t=>{t.destruct()})),this.buffers=[],this.tickFuncs=[]}copyCanvas(){const t=this.gl.canvas,e=this.canvas.getContext("2d");e.clearRect(0,0,this.width,this.height),e.drawImage(t,0,t.height-this.height,this.width,this.height,0,0,this.width,this.height)}}h.index=0;class c{constructor(){throw new Error("Use ImageEffectRenderer.createTemporary to create an ImageEffectRenderer")}static createTemporary(t,e,i={}){const s={...c.defaultOptions,...i};if(s.useSharedContext){c.sharedInstance||(c.sharedInstance=new n,this.drawInstances(0));const i=new h(c.sharedInstance,t,e,s);return this.poolInUse.push(i),i}{const i=c.poolWebGLInstance.pop()||new n;return new h(i,t,e,s)}}static releaseTemporary(t){t.options.useSharedContext||this.poolWebGLInstance.push(t.gl),t.stop(),t.destruct();const e=c.poolInUse.indexOf(t);e>-1&&c.poolInUse.splice(e,1)}static drawInstances(t=0){window.requestAnimationFrame((t=>this.drawInstances(t))),t/=1e3;const e=c.sharedTime<0?1/60:t-c.sharedTime;c.sharedTime=t;const i=c.sharedInstance.canvas,s=c.sharedInstance.context,n=c.poolInUse;let r=0,o=0;n.forEach((t=>{t.update(e)})),n.forEach((t=>{t.drawThisFrame&&(r=Math.max(r,t.width),o=Math.max(o,t.height))})),(r>i.width||o>i.height)&&(i.width=r,i.height=o),s.clear(s.COLOR_BUFFER_BIT),n.forEach((t=>{t.drawThisFrame&&(t.drawInstance(e),t.copyCanvas())}))}}c.defaultOptions={loop:!1,autoResize:!0,pixelRatio:window.devicePixelRatio,useSharedContext:!0,asyncCompile:!0},c.poolInUse=[],c.poolWebGLInstance=[],c.sharedTime=-1;const u=c;class l{constructor(){this.press=!1,this.down=!1,this.downTime=0}}class d{constructor(t){this.mousePos={x:0,y:0},this.previousMousePos={x:0,y:0},this.mouseVelocity={x:0,y:0},this.normalized={x:0,y:0},this.mouseClickCallbacks=[],this.buttons=[],this.resetSpeed=!1,this.canvas=t;for(let t=0;t<3;t++)this.buttons.push(new l);this.canvas.addEventListener("touchstart",this.onMouseStart.bind(this),!1),this.canvas.addEventListener("touchmove",this.touchMoveListener.bind(this),!1),this.canvas.addEventListener("touchend",this.endListener.bind(this),!1),this.canvas.addEventListener("touchcancel",this.endListener.bind(this),!1),this.canvas.addEventListener("mousedown",this.onMouseStart.bind(this),!1),this.canvas.addEventListener("mousemove",this.mouseMoveListener.bind(this),!1),this.canvas.addEventListener("mouseup",this.endListener.bind(this),!1),this.canvas.addEventListener("mousecancel",this.endListener.bind(this),!1),this.canvas.addEventListener("mouseout",this.endListener.bind(this),!1)}touchMoveListener(t){this.setMouse(t.targetTouches[0])}mouseMoveListener(t){this.setMouse(t)}endListener(){this.buttons[0].press=!1}onMouseStart(t){t.preventDefault();let e=!1;t instanceof TouchEvent?(e=!0,this.setMouse(t.targetTouches[0])):this.setMouse(t),this.resetSpeed=!0,this.buttons[e?0:t.which-1].press=!0,this.mouseClickCallbacks.forEach((t=>{t()}))}setMouse(t){this.mousePos.x=t.pageX,this.mousePos.y=t.pageY}get normalizedVelocity(){return{...this.mouseVelocity}}get mouseDown(){return this.buttons[0].press}click(t){this.mouseClickCallbacks.push(t)}update(t){this.normalized.x=this.mousePos.x/this.canvas.clientWidth,this.normalized.y=this.mousePos.y/this.canvas.clientHeight,this.resetSpeed?(this.resetSpeed=!1,this.mouseVelocity.x=0,this.mouseVelocity.y=0):(this.mouseVelocity.x=this.normalized.x-this.previousMousePos.x,this.mouseVelocity.y=this.normalized.y-this.previousMousePos.y),this.previousMousePos.x=this.normalized.x,this.previousMousePos.y=this.normalized.y;for(let e=0;e<3;e++){const i=this.buttons[e];i.down=!1,this.buttons[e].press?(0===i.downTime&&(i.down=!0),i.downTime+=t):i.downTime=0}}destruct(){this.canvas&&(this.canvas.removeEventListener("touchstart",this.onMouseStart,!1),this.canvas.removeEventListener("touchmove",this.touchMoveListener,!1),this.canvas.removeEventListener("touchend",this.endListener,!1),this.canvas.removeEventListener("touchcancel",this.endListener,!1),this.canvas.removeEventListener("mousedown",this.onMouseStart,!1),this.canvas.removeEventListener("mousemove",this.mouseMoveListener,!1),this.canvas.removeEventListener("mouseend",this.endListener,!1),this.canvas.removeEventListener("mousecancel",this.endListener,!1),this.canvas.removeEventListener("mouseout",this.endListener,!1))}}function m(t){return Math.max(0,Math.min(1,t))}function f(t,e,i){return t+(e-t)*i}function x(t){return(t=m(t))*t*(3-2*t)}function p(t,e){return{x:t.y*e.z-t.z*e.y,y:t.z*e.x-t.x*e.z,z:t.x*e.y-t.y*e.x}}function v(t){const e=Math.sqrt(t.x*t.x+t.y*t.y+t.z*t.z);return{x:t.x/e,y:t.y/e,z:t.z/e}}function g(t,e){return{x:e[0]*t.x+e[4]*t.y+e[8]*t.z+e[12]*t.w,y:e[1]*t.x+e[5]*t.y+e[9]*t.z+e[13]*t.w,z:e[2]*t.x+e[6]*t.y+e[10]*t.z+e[14]*t.w,w:e[3]*t.x+e[7]*t.y+e[11]*t.z+e[15]*t.w}}function E(t){const e=t[0]+t[4]+t[8];let i,s,n,r;if(e>0){let o=Math.sqrt(e+1);r=.5*o,o=.5/o,i=(t[5]-t[7])*o,s=(t[6]-t[2])*o,n=(t[1]-t[3])*o}else{let e=0;t[4]>t[0]&&(e=1),t[8]>t[3*e+e]&&(e=2);const o=(e+1)%3,a=(e+2)%3,h=Math.sqrt(t[3*e+e]-t[3*o+o]-t[3*a+a]+1),c=.5*h,u=.5/h;r=(t[3*o+a]-t[3*a+o])*u;const l=(t[3*o+e]+t[3*e+o])*u,d=(t[3*a+e]+t[3*e+a])*u;i=0==e?c:0==o?l:d,s=1==e?c:1==o?l:d,n=2==e?c:2==o?l:d}return{x:i,y:s,z:n,w:r}}function T(t){return[t[0],t[1],t[2],0,t[3],t[4],t[5],0,t[6],t[7],t[8],0,0,0,0,1]}function w(t,e){return{w:t.w*e.w-t.x*e.x-t.y*e.y-t.z*e.z,x:t.w*e.x+t.x*e.w+t.y*e.z-t.z*e.y,y:t.w*e.y-t.x*e.z+t.y*e.w+t.z*e.x,z:t.w*e.z+t.x*e.y-t.y*e.x+t.z*e.w}}function R(t,e){const i=Math.sin(e/2);return w(t,{w:Math.cos(e/2),x:0,y:i,z:0})}function y(t){const e=_(t),i=e[0],s=e[3],n=(e[6],e[1]),r=e[4],o=(e[7],e[2]),a=e[5],h=e[8];let c=0,u=0,l=0;var d;return c=Math.asin((d=a,-1,1,Math.max(-1,Math.min(1,d)))),Math.abs(a)<.9999999?(u=Math.atan2(-o,h),l=Math.atan2(-s,r)):(u=0,l=Math.atan2(n,i)),{x:c,y:u,z:l}}function _(t){const e=Array(9).fill(0),{x:i,y:s,z:n,w:r}=t,o=i+i,a=s+s,h=n+n,c=i*o,u=s*o,l=s*a,d=n*o,m=n*a,f=n*h,x=r*o,p=r*a,v=r*h;return e[0]=1-l-f,e[3]=u-v,e[6]=d+p,e[1]=u+v,e[4]=1-c-f,e[7]=m-x,e[2]=d-p,e[5]=m+x,e[8]=1-c-l,e}class b{constructor(){this.options={...b.defaultOptions},this.lastUserRotateSpeed={x:0,y:0},this.currentRotateSpeed={x:0,y:0},this.slowDownTimer=0,this.euler={x:0,y:0,z:0}}init(t,e){this.renderer=t,this.options={...b.defaultOptions,...e},this.mouseListener=new d(this.renderer.canvas)}update(t,e,i){this.mouseListener.update(t);const s=this.renderer.aspectRatio,n=.5/Math.tan(.5*this.renderer.fov),r=2*Math.atan2(.5*s,n);if(this.mouseListener.mouseDown){const e=this.mouseListener.normalizedVelocity;this.lastUserRotateSpeed.x=f(-e.x*r*(1/t),this.currentRotateSpeed.x,this.options.inertia),this.lastUserRotateSpeed.y=f(e.y*this.renderer.fov*(1/t),this.currentRotateSpeed.y,this.options.inertia),this.slowDownTimer=this.options.slowDownTime}const o=this.options.slowDownTime>0?this.slowDownTimer/this.options.slowDownTime:0;if(this.currentRotateSpeed.x=f(0,this.lastUserRotateSpeed.x,o),this.currentRotateSpeed.y=f(0,this.lastUserRotateSpeed.y,o),this.slowDownTimer=Math.max(0,this.slowDownTimer-t),this.options.userInteractions&&!i){this.euler=y(e);const i=this.euler;return i.x-=this.currentRotateSpeed.y*t,i.y+=this.currentRotateSpeed.x*t,i.z=0,this.options.clampXRotation&&(i.x=Math.min(Math.max(i.x,this.options.clampXRotation[0]),this.options.clampXRotation[1])),this.options.clampYRotation&&(i.y=Math.min(Math.max(i.y,this.options.clampYRotation[0]),this.options.clampYRotation[1])),function(t){let e={w:1,x:0,y:0,z:0};return e=function(t,e){const i=Math.sin(e/2);return w(t,{w:Math.cos(e/2),x:i,y:0,z:0})}(e,t.x),e=R(e,t.y),e=function(t,e){const i=Math.sin(e/2);return w(t,{w:Math.cos(e/2),x:0,y:0,z:i})}(e,t.z),e}(i)}return this.euler=y(e),e}destruct(){this.mouseListener.destruct()}}b.defaultOptions={inertia:.5,slowDownTime:.5,clampXRotation:[-.5,.5],clampYRotation:void 0,userInteractions:!0};const C=b;class L{constructor(t,e,i={}){this.transitionProgress=1,this.transitionDuration=1,this.transitionEase=x,this.rotation={w:1,x:0,y:0,z:0},this.rotationStart={w:1,x:0,y:0,z:0},this.rotationEnd={w:1,x:0,y:0,z:0},this.projection=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],this.view=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],this.viewProjection=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],this.invViewProjection=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],this.options={...L.defaultOptions,...i},!1!==this.options.renderer?this.renderer=this.options.renderer:this.options.controlledRendererInstance?this.renderer=this.options.controlledRendererInstance.main:this.renderer=u.createTemporary(t,this.shader,{useSharedContext:!1,...i}),this.options.rotationController?this.rotationController=this.options.rotationController:this.rotationController=new C,this.rotationController.init(this,this.options.rotationControllerOptions),e&&this.setImage(0,e,{flipY:!0,clampX:!1,clampY:!0,useMipmap:!0}),this.renderer.tick((t=>this.drawingLoop(t)))}get fov(){return this.options.fov}set fov(t){this.options.fov=t}get barrelDistortion(){return this.options.barrelDistortion}set barrelDistortion(t){this.options.barrelDistortion=t}get aspectRatio(){return this.canvas.width/this.canvas.height}tick(t){this.renderer.tick(t)}worldToScreen(t){let e={...t,w:1};e=g(e,this.viewProjection),e.x/=e.w,e.y/=e.w;const i=Math.sqrt(e.x*e.x+e.y*e.y),s=this.barrelDistortion;if(s*i>0){const t=Math.pow(9*s*s*i+Math.sqrt(3)*Math.sqrt(27*s*s*s*s*i*i+4*s*s*s),1/3);let n=t/(Math.pow(2,1/3)*Math.pow(3,2/3)*s);n-=Math.pow(2/3,1/3)/t;const r=n/i;e.x*=r,e.y*=r}return e.x=.5*e.x+.5,e.y=-.5*e.y+.5,{x:e.x,y:e.y,z:e.z}}lookAt(t,e=0,i=x){const s={...t};this.transitionEase=i;let n=function(t,e,i){const s=v({x:(n={x:0,y:0,z:0}).x-(r=e).x,y:n.y-r.y,z:n.z-r.z});var n,r;const o=v(p({x:0,y:1,z:0},s)),a=v(p(s,o));return[o.x,a.x,s.x,o.y,a.y,s.y,o.z,a.z,s.z]}(0,s);this.view=T(n),e>0?(this.transitionProgress=0,this.rotationStart={...this.rotation},this.rotationEnd=E(n)):this.rotation=E(n)}get canvas(){return this.renderer.canvas}screenToWorld(t){let e=2*t.x-1,i=1-t.y;i=2*i-1;const s=e*e+i*i,n=1+this.barrelDistortion*s;e*=n,i*=n;const r=g({x:e,y:i,z:1,w:1},this.invViewProjection);return{x:r.x,y:r.y,z:r.z}}play(){this.renderer.play()}stop(){this.renderer.stop()}setImage(t,e,i={}){this.renderer.setImage(t,e,i)}drawingLoop(t){this.update(t),this.draw()}update(t){if(this.rotation=this.rotationController.update(t,this.rotation,this.transitionProgress<1),this.transitionProgress<1){this.transitionProgress+=t/this.transitionDuration;const e=this.transitionEase(m(this.transitionProgress));this.rotation=function(t,e,i){let s,n,r=t.x*e.x+t.y*e.y+t.z*e.z+t.w*e.w;if(r<0&&(r=-r,e.x=-e.x,e.y=-e.y,e.z=-e.z,e.w=-e.w),1-r>1e-9){const t=Math.acos(r),e=Math.sin(t);s=Math.sin((1-i)*t)/e,n=Math.sin(i*t)/e}else s=1-i,n=i;return function(t){const e=Math.sqrt(t.w*t.w+t.x*t.x+t.y*t.y+t.z*t.z);return 0===e?{w:1,x:0,y:0,z:0}:{w:t.w/e,x:t.x/e,y:t.y/e,z:t.z/e}}({x:s*t.x+n*e.x,y:s*t.y+n*e.y,z:s*t.z+n*e.z,w:s*t.w+n*e.w})}(this.rotationStart,this.rotationEnd,e)}this.updateViewProjection()}draw(){const t=this.options.controlledRendererInstance?this.options.controlledRendererInstance:this.renderer;t.setUniformMatrix("uInvViewProjection",new Float32Array(this.invViewProjection)),t.setUniformFloat("uBarrelDistortion",this.barrelDistortion)}updateViewProjection(){this.projection=function(t,e,i,s){const n=1/Math.tan(t/2);let r;const o=Array(16).fill(0);return o[0]=n/e,o[5]=n,o[11]=-1,r=1/-99.99,o[10]=100.01*r,o[14]=2*r,o}(this.fov,this.aspectRatio),this.view=T(_(this.rotation)),this.viewProjection=function(t,e){const i=Array(16).fill(0);for(let s=0;s<4;s++)for(let n=0;n<4;n++)for(let r=0;r<4;r++)i[4*s+n]+=t[4*s+r]*e[4*r+n];return i}(this.view,this.projection),this.invViewProjection=function(t){const e=Array(16).fill(0),[i,s,n,r,o,a,h,c,u,l,d,m,f,x,p,v]=t,g=i*a-s*o,E=i*h-n*o,T=i*c-r*o,w=s*h-n*a,R=s*c-r*a,y=n*c-r*h,_=u*x-l*f,b=u*p-d*f,C=u*v-m*f,L=l*p-d*x,A=l*v-m*x,S=d*v-m*p;let U=g*S-E*A+T*L+w*C-R*b+y*_;return U?(U=1/U,e[0]=(a*S-h*A+c*L)*U,e[1]=(n*A-s*S-r*L)*U,e[2]=(x*y-p*R+v*w)*U,e[3]=(d*R-l*y-m*w)*U,e[4]=(h*C-o*S-c*b)*U,e[5]=(i*S-n*C+r*b)*U,e[6]=(p*T-f*y-v*E)*U,e[7]=(u*y-d*T+m*E)*U,e[8]=(o*A-a*C+c*_)*U,e[9]=(s*C-i*A-r*_)*U,e[10]=(f*R-x*T+v*g)*U,e[11]=(l*T-u*R-m*g)*U,e[12]=(a*b-o*L-h*_)*U,e[13]=(i*L-s*b+n*_)*U,e[14]=(x*E-f*w-p*g)*U,e[15]=(u*w-l*E+d*g)*U,e):e}(this.viewProjection)}get shader(){return this.options.shader?this.options.shader:L.defaultShader}destruct(){this.renderer instanceof h&&u.releaseTemporary(this.renderer)}}L.defaultOptions={loop:!0,fov:1,barrelDistortion:.1,shader:!1,renderer:!1,rotationController:!1,controlledRendererInstance:!1,rotationControllerOptions:{}},L.defaultShader="\nuniform mat4 uInvViewProjection;\nuniform float uBarrelDistortion;\n\nvec2 getEqUV(vec3 rd) {\n vec2 uv = vec2(atan(rd.z, rd.x), asin(rd.y));\n uv *= vec2(0.15915494309, 0.31830988618);\n uv.y += 0.5;\n return fract(uv);\n}\n\nvoid mainImage( out vec4 c, vec2 p ) {\n vec2 uv = vUV0 * 2. - 1.;\n\n float r2 = dot(uv,uv);\n uv.xy *= 1.0 + uBarrelDistortion * r2;\n\n vec4 rd = vec4(uv, 1., 1.);\n\n rd = uInvViewProjection * rd;\n\n rd.xyz = normalize(rd.xyz);\n\n vec2 uv1 = getEqUV(rd.xyz);\n vec3 col1 = texture(iChannel0, uv1).xyz;\n vec2 uv2 = uv1;\n uv2.x = fract(uv2.x + 0.5) - 0.5;\n vec3 col2 = texture(iChannel0, uv2).xyz;\n c.xyz = mix(col1, col2, step(abs(uv2.x), 0.25));\n c.w = 1.;\n}";const A=L;class S{static loadImages(t){return Promise.all(t.map((t=>S.loadImage(t))))}static loadImage(t){return new Promise((e=>{const i=new Image;i.onload=()=>e(i),i.src=`./static/${t}`}))}}var U,I;!function(t){t[t.SHADERTOY_WEBGL=0]="SHADERTOY_WEBGL",t[t.SHADERTOY_WEBGL2=1]="SHADERTOY_WEBGL2",t[t.ONESHADER_WEBGL=2]="ONESHADER_WEBGL",t[t.ONESHADER_WEBGL2=3]="ONESHADER_WEBGL2"}(U=U||(U={}));class F{constructor(t,e){this.initialized=!1,this.type=U.SHADERTOY_WEBGL,this.vsSource="",this.fsSource="",this.uniformLocations={},this.attributeLocations={},this._shaderCompiled=!1,this.gl=t;const i=t.context;this.ext=i.getExtension("KHR_parallel_shader_compile"),this._program=i.createProgram(),this.vs=i.createShader(i.VERTEX_SHADER),this.fs=i.createShader(i.FRAGMENT_SHADER),this.type=this.detectType(e),this.vsSource=this.getVertexShader(this.type),i.shaderSource(this.vs,this.vsSource),i.compileShader(this.vs),this.fsSource=`${this.getFragmentShader(this.type)}${e}`,i.shaderSource(this.fs,this.fsSource),i.compileShader(this.fs),i.attachShader(this._program,this.vs),i.attachShader(this._program,this.fs),i.linkProgram(this._program)}get program(){if(this.initialized)return this._program;this.initialized=!0;const t=this.gl.context;let e=t.getShaderParameter(this.vs,t.COMPILE_STATUS);if(!e)throw console.table(this.vsSource.split("\n")),new Error(`ImageEffectRenderer: Vertex shader compilation failed: ${t.getShaderInfoLog(this.vs)}`);if(e=t.getShaderParameter(this.fs,t.COMPILE_STATUS),!e)throw console.table(this.fsSource.split("\n")),new Error(`ImageEffectRenderer: Shader compilation failed: ${t.getShaderInfoLog(this.fs)}`);if(e=t.getProgramParameter(this._program,t.LINK_STATUS),!e)throw new Error(`ImageEffectRenderer: Program linking failed: ${t.getProgramInfoLog(this._program)}`);return this._program}get shaderCompiled(){return this._shaderCompiled=this._shaderCompiled||!this.ext||this.gl.context.getProgramParameter(this._program,this.ext.COMPLETION_STATUS_KHR),this._shaderCompiled}use(){this.gl.context.useProgram(this.program)}getUniformLocation(t){return void 0!==this.uniformLocations[t]?this.uniformLocations[t]:this.uniformLocations[t]=this.gl.context.getUniformLocation(this._program,t)}getAttributeLocation(t){return void 0!==this.attributeLocations[t]?this.attributeLocations[t]:(this.gl.context.useProgram(this.program),this.attributeLocations[t]=this.gl.context.getAttribLocation(this._program,t))}detectType(t){return/mainImage/gim.exec(t)?this.gl.isWebGL2?U.SHADERTOY_WEBGL2:U.SHADERTOY_WEBGL:/^#version[\s]+300[\s]+es[\s]+/gim.exec(t)?U.ONESHADER_WEBGL2:U.ONESHADER_WEBGL}getFragmentShader(t){switch(t){case U.SHADERTOY_WEBGL:return`precision highp float;\n\n ${this.getUniformShader()}\n\n varying vec2 vUV0;\n void mainImage(out vec4, vec2);\n\n vec4 texture(sampler2D tex, vec2 uv) {\n return texture2D(tex, uv);\n }\n\n void main(void) {\n gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n mainImage(gl_FragColor, vUV0 * iResolution.xy);\n }\n `;case U.SHADERTOY_WEBGL2:return`#version 300 es\n precision highp float;\n\n ${this.getUniformShader()}\n\n in vec2 vUV0;\n out vec4 outFragColor;\n\n void mainImage(out vec4, vec2);\n\n vec4 texture2D(sampler2D tex, vec2 uv) {\n return texture(tex, uv);\n }\n\n void main(void) {\n outFragColor = vec4(0.0, 0.0, 0.0, 1.0);\n mainImage(outFragColor, vUV0 * iResolution.xy);\n }\n `;default:return""}}getVertexShader(t){switch(t){case U.SHADERTOY_WEBGL:return"attribute vec2 aPos;\n attribute vec2 aUV;\n\n varying vec2 vUV0;\n\n void main(void) {\n vUV0 = aUV;\n gl_Position = vec4(aPos, 0.0, 1.0);\n }\n ";case U.SHADERTOY_WEBGL2:return"#version 300 es\n in vec2 aPos;\n in vec2 aUV;\n\n out vec2 vUV0;\n\n void main(void) {\n vUV0 = aUV;\n gl_Position = vec4(aPos, 0.0, 1.0);\n }\n ";case U.ONESHADER_WEBGL:return"attribute vec3 aPos;\n attribute vec2 aUV;\n\n uniform float iAspect;\n\n varying vec2 vScreen;\n varying vec2 vUV0;\n\n void main(void) {\n vUV0 = aUV;\n vScreen = aPos.xy;\n vScreen.x *= iAspect;\n gl_Position = vec4(aPos, 1.0);\n }";case U.ONESHADER_WEBGL2:default:return"#version 300 es\n in vec3 aPos;\n in vec2 aUV;\n\n uniform float iAspect;\n\n out vec2 vScreen;\n out vec2 vUV0;\n\n void main(void) {\n vUV0 = aUV;\n vScreen = aPos.xy;\n vScreen.x *= iAspect;\n gl_Position = vec4(aPos, 1.0);\n }"}}getUniformShader(){return"\n uniform vec2 iResolution;\n uniform float iTime;\n uniform float iGlobalTime;\n uniform float iAspect;\n uniform int iFrame;\n uniform vec4 iMouse;\n\n uniform highp sampler2D iChannel0;\n uniform highp sampler2D iChannel1;\n uniform highp sampler2D iChannel2;\n uniform highp sampler2D iChannel3;\n\n uniform vec2 iChannelResolution0;\n uniform vec2 iChannelResolution1;\n uniform vec2 iChannelResolution2;\n uniform vec2 iChannelResolution3;\n "}}!function(t){t[t.INT=0]="INT",t[t.FLOAT=1]="FLOAT",t[t.VEC2=2]="VEC2",t[t.VEC3=3]="VEC3",t[t.VEC4=4]="VEC4",t[t.MATRIX=5]="MATRIX"}(I=I||(I={}));class B{constructor(t,e){this.x=0,this.y=0,this.z=0,this.w=0,this.type=t,this.name=e}}class O{constructor(t=void 0){this.isWebGL2=!0,this.lastQuadVBO=void 0,this.sharedPrograms={},this.sharedTextures={},this.canvas=t||document.createElement("canvas");const e={premultipliedAlpha:!0,alpha:!0,preserveDrawingBuffer:!1,antialias:!1,depth:!1,stencil:!1};this.context=this.canvas.getContext("webgl2",e),this.context||(this.context=this.canvas.getContext("webgl",e),this.isWebGL2=!1),this.context.getExtension("WEBGL_color_buffer_float"),this.context.getExtension("EXT_color_buffer_float"),this.context.getExtension("OES_texture_float"),this.context.getExtension("OES_texture_float_linear"),this.context.getExtension("KHR_parallel_shader_compile"),this.context.clearColor(0,0,0,0),this.context.clear(this.context.COLOR_BUFFER_BIT),this.context.enable(this.context.BLEND),this.context.blendFunc(this.context.ONE,this.context.ONE_MINUS_SRC_ALPHA),this.quadVBO=this.generateQuad()}generateQuad(){const t=this.context,e=new Float32Array([-1,1,0,1,-1,-1,0,0,1,1,1,1,1,-1,1,0]),i=t.createBuffer();return t.bindBuffer(t.ARRAY_BUFFER,i),t.bufferData(t.ARRAY_BUFFER,e,t.STATIC_DRAW),i}drawQuad(t,e){const i=this.context;this.lastQuadVBO!==this.quadVBO&&(this.lastQuadVBO=this.quadVBO,i.bindBuffer(i.ARRAY_BUFFER,this.quadVBO),i.enableVertexAttribArray(t),i.vertexAttribPointer(t,2,i.FLOAT,!1,16,0),i.enableVertexAttribArray(e),i.vertexAttribPointer(e,2,i.FLOAT,!1,16,8)),i.drawArrays(i.TRIANGLE_STRIP,0,4)}getCachedTexture(t,e){const i=`${t}_${e.clampX}_${e.clampY}_${e.useMipmap}`;return this.sharedTextures[t]?this.sharedTextures[i]:this.sharedTextures[i]=this.context.createTexture()}compileShader(t){return this.sharedPrograms[t]?this.sharedPrograms[t]:this.sharedPrograms[t]=new F(this,t)}setTextureParameter(t,e){const i=this.context;i.bindTexture(i.TEXTURE_2D,t),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_WRAP_S,e.clampX?i.CLAMP_TO_EDGE:i.REPEAT),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_WRAP_T,e.clampY?i.CLAMP_TO_EDGE:i.REPEAT),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_MAG_FILTER,i.LINEAR),e.useMipmap?(i.texParameteri(i.TEXTURE_2D,i.TEXTURE_MIN_FILTER,i.LINEAR_MIPMAP_LINEAR),i.generateMipmap(i.TEXTURE_2D)):i.texParameteri(i.TEXTURE_2D,i.TEXTURE_MIN_FILTER,i.LINEAR)}bindTextures(t){const e=this.context;for(let i=0;i<8;i++){e.activeTexture(e.TEXTURE0+i);const s=t[i];s&&s.buffer?e.bindTexture(e.TEXTURE_2D,s.buffer.src.texture):s&&s.texture?e.bindTexture(e.TEXTURE_2D,s.texture):e.bindTexture(e.TEXTURE_2D,null)}}setUniforms(t,e){const i=this.context;Object.values(t).forEach((t=>{const s=e.getUniformLocation(t.name);if(null!==s)switch(t.type){case I.INT:i.uniform1i(s,t.x);break;case I.FLOAT:i.uniform1f(s,t.x);break;case I.VEC2:i.uniform2f(s,t.x,t.y);break;case I.VEC3:i.uniform3f(s,t.x,t.y,t.z);break;case I.VEC4:i.uniform4f(s,t.x,t.y,t.z,t.w);break;case I.MATRIX:i.uniformMatrix4fv(s,!1,t.matrix)}}))}}class P{constructor(t){this.width=0,this.height=0,this.frame=0,this.uniforms={},this.textures=[],this.gl=t}setImage(t,e,i={}){if(t>=8)throw new Error("ImageEffectRenderer: A maximum of 8 slots is available, slotIndex is out of bounds.");this.setUniformInt(`iChannel${t}`,t),this.setUniformVec2(`iChannelResolution${t}`,e.width,e.height);const s=this.gl.context,n=this.textures[t];if(e instanceof P){n&&n.texture&&!n.cached&&s.deleteTexture(n.texture);const r={...e.options,...i};this.textures[t]={texture:void 0,buffer:e,cached:!1},this.gl.setTextureParameter(e.src.texture,r),this.gl.setTextureParameter(e.dest.texture,r)}else{const r={...P.defaultImageOptions,...i};r.useCache=r.useCache&&e instanceof HTMLImageElement,r.useCache&&n&&n.texture&&!n.cached&&(s.deleteTexture(n.texture),n.texture=void 0);let o=n&&n.texture;r.useCache&&e instanceof HTMLImageElement&&(o=this.gl.getCachedTexture(e.src,r)),o||(o=s.createTexture()),this.textures[t]={texture:o,buffer:void 0,cached:r.useCache},s.bindTexture(s.TEXTURE_2D,o),s.pixelStorei(s.UNPACK_FLIP_Y_WEBGL,i.flipY?1:0),s.texImage2D(s.TEXTURE_2D,0,s.RGBA,s.RGBA,s.UNSIGNED_BYTE,e),this.gl.setTextureParameter(o,r)}}setUniformFloat(t,e){this.setUniform(t,I.FLOAT,e,0,0,0,void 0)}setUniformInt(t,e){this.setUniform(t,I.INT,e,0,0,0,void 0)}setUniformVec2(t,e,i){this.setUniform(t,I.VEC2,e,i,0,0,void 0)}setUniformVec3(t,e,i,s){this.setUniform(t,I.VEC3,e,i,s,0,void 0)}setUniformVec4(t,e,i,s,n){this.setUniform(t,I.VEC4,e,i,s,n,void 0)}setUniformMatrix(t,e){this.setUniform(t,I.MATRIX,0,0,0,0,e)}draw(t=0,e,i){this.width=0|e,this.height=0|i,this.program.use(),this.setUniformFloat("iGlobalTime",t),this.setUniformFloat("iTime",t),this.setUniformInt("iFrame",this.frame),this.setUniformFloat("iAspect",e/i),this.setUniformVec2("iResolution",e,i),this.gl.setUniforms(this.uniforms,this.program),this.gl.bindTextures(this.textures),this.gl.drawQuad(this.program.getAttributeLocation("aPos"),this.program.getAttributeLocation("aUV")),this.frame++}get shaderCompiled(){return this.program.shaderCompiled}setUniform(t,e,i,s,n,r,o){let a=this.uniforms[t];a||(a=this.uniforms[t]=new B(e,t)),a.x=i,a.y=s,a.z=n,a.w=r,a.matrix=o}destruct(){const t=this.gl.context;Object.values(this.textures).forEach((e=>{e.texture&&!e.cached&&t.deleteTexture(e.texture)})),this.textures=[],this.uniforms={}}}P.defaultImageOptions={clampX:!0,clampY:!0,flipY:!1,useMipmap:!0,useCache:!0};class D{constructor(t,e=WebGLRenderingContext.UNSIGNED_BYTE){if(this.width=0,this.height=0,this.format=WebGLRenderingContext.RGBA,this.internalFormat=WebGLRenderingContext.RGBA,this.type=WebGLRenderingContext.UNSIGNED_BYTE,this.gl=t,this.type=e,t.isWebGL2)switch(e){case WebGLRenderingContext.UNSIGNED_BYTE:this.internalFormat=WebGL2RenderingContext.RGBA8;break;case WebGLRenderingContext.FLOAT:this.internalFormat=WebGL2RenderingContext.RGBA32F}else this.internalFormat=this.format;const i=t.context;this.texture=i.createTexture(),this.resize(16,16),this.frameBuffer=i.createFramebuffer(),i.bindFramebuffer(i.FRAMEBUFFER,this.frameBuffer),i.framebufferTexture2D(i.FRAMEBUFFER,i.COLOR_ATTACHMENT0,i.TEXTURE_2D,this.texture,0),i.bindFramebuffer(i.FRAMEBUFFER,null)}resize(t,e){if(this.width===(0|t)&&this.height===(0|e))return;this.width=0|t,this.height=0|e;const i=this.gl.context;i.bindTexture(i.TEXTURE_2D,this.texture),i.pixelStorei(i.UNPACK_FLIP_Y_WEBGL,0),this.gl.isWebGL2?i.texImage2D(i.TEXTURE_2D,0,this.internalFormat,this.width,this.height,0,this.format,this.type,null):i.texImage2D(i.TEXTURE_2D,0,this.format,this.width,this.height,0,this.format,this.type,null)}destruct(){const t=this.gl.context;this.frameBuffer&&t.deleteFramebuffer(this.frameBuffer),this.texture&&t.deleteTexture(this.texture)}}class M extends P{constructor(t,e={}){super(t),this.options={...M.defaultBufferOptions,...e},this.frameBuffer0=new D(t,this.options.type),this.frameBuffer1=new D(t,this.options.type)}draw(t=0,e,i){if(e<=0||i<=0)return;const s=this.gl.context,n=this.dest;n.resize(e,i),s.bindFramebuffer(s.FRAMEBUFFER,n.frameBuffer),s.clear(s.COLOR_BUFFER_BIT),super.draw(t,e,i),s.bindFramebuffer(s.FRAMEBUFFER,null)}get src(){return this.frame%2==0?this.frameBuffer0:this.frameBuffer1}get dest(){return this.frame%2==1?this.frameBuffer0:this.frameBuffer1}destruct(){super.destruct(),this.frameBuffer0.destruct(),this.frameBuffer1.destruct()}}M.defaultBufferOptions={...P.defaultImageOptions,useMipmap:!1,useCache:!1,type:WebGLRenderingContext.UNSIGNED_BYTE};class z extends P{constructor(t,e,i,s={}){if(super(t),this.buffers=[],this.time=0,this.tickFuncs=[],this.readyFuncs=[],this.startTime=-1,this.drawOneFrame=!1,this.animationRequestId=0,this._ready=!1,this.options={...G.defaultOptions,...s},this.index=z.index++,this.container=e,this.main=this,this.options.useSharedContext){this.canvas=document.createElement("canvas");const t=this.canvas.getContext("2d");t.fillStyle="#00000000",t.clearRect(0,0,this.canvas.width,this.canvas.height)}else this.canvas=this.gl.canvas;this.canvas.style.width="100%",this.canvas.style.height="100%",this.container.appendChild(this.canvas),this.program=new F(this.gl,i),this.resizeObserver=new ResizeObserver((()=>{this.options.autoResize&&this.updateSize()})),this.resizeObserver.observe(e),this.options.useSharedContext||this.drawingLoop(0)}play(){this.options.loop=!0}stop(){this.options.loop=!1}createBuffer(t,e,i={}){const s=this.buffers[t];s&&s.destruct();const n=new M(this.gl,i);return n.program=this.gl.compileShader(e),n.main=this,this.buffers[t]=n}tick(t){this.tickFuncs.push(t)}ready(t){this.readyFuncs.push(t)}drawFrame(t=0){this.time=t/1e3,this.drawOneFrame=!0}get drawThisFrame(){return(this.options.loop||this.drawOneFrame)&&this.width>0&&this.height>0&&(!this.options.asyncCompile||this.allShadersCompiled)}drawInstance(t){const e=this.gl.context;this.drawOneFrame||(this.time+=t),this.tickFuncs.forEach((e=>e(t))),this.buffers.forEach((t=>{t&&(e.viewport(0,0,this.width,this.height),t.draw(this.time,this.canvas.width,this.canvas.height))})),e.viewport(0,0,this.width,this.height),e.clear(e.COLOR_BUFFER_BIT),this.draw(this.time,this.canvas.width,this.canvas.height),this.drawOneFrame=!1}get allShadersCompiled(){return this.shaderCompiled&&this.buffers.every((t=>t&&t.shaderCompiled))}update(t){this.allShadersCompiled&&(this._ready||(this._ready=!0,this.readyFuncs.forEach((t=>t())),this.readyFuncs=[]))}updateSize(){this.width=this.container.offsetWidth*this.options.pixelRatio|0,this.height=this.container.offsetHeight*this.options.pixelRatio|0,this.width===this.canvas.width&&this.height===this.canvas.height||(this.canvas.width=this.width,this.canvas.height=this.height,this.drawOneFrame=!0)}drawingLoop(t=0){this.animationRequestId=window.requestAnimationFrame((t=>this.drawingLoop(t))),t/=1e3;const e=this.startTime<0?1/60:t-this.startTime;this.startTime=t>0?t:-1,this.update(e),this.drawThisFrame&&this.drawInstance(e)}destruct(){cancelAnimationFrame(this.animationRequestId),super.destruct(),this.resizeObserver.disconnect(),this.container.removeChild(this.canvas),this.canvas.replaceWith(this.canvas.cloneNode(!0)),this.buffers.forEach((t=>{t.destruct()})),this.buffers=[],this.tickFuncs=[]}copyCanvas(){const t=this.gl.canvas,e=this.canvas.getContext("2d");e.clearRect(0,0,this.width,this.height),e.drawImage(t,0,t.height-this.height,this.width,this.height,0,0,this.width,this.height)}}z.index=0;class V{constructor(){throw new Error("Use ImageEffectRenderer.createTemporary to create an ImageEffectRenderer")}static createTemporary(t,e,i={}){const s={...V.defaultOptions,...i};if(s.useSharedContext){V.sharedInstance||(V.sharedInstance=new O,this.drawInstances(0));const i=new z(V.sharedInstance,t,e,s);return this.poolInUse.push(i),i}{const i=V.poolWebGLInstance.pop()||new O;return new z(i,t,e,s)}}static releaseTemporary(t){t.options.useSharedContext||this.poolWebGLInstance.push(t.gl),t.stop(),t.destruct();const e=V.poolInUse.indexOf(t);e>-1&&V.poolInUse.splice(e,1)}static drawInstances(t=0){window.requestAnimationFrame((t=>this.drawInstances(t))),t/=1e3;const e=V.sharedTime<0?1/60:t-V.sharedTime;V.sharedTime=t;const i=V.sharedInstance.canvas,s=V.sharedInstance.context,n=V.poolInUse;let r=0,o=0;n.forEach((t=>{t.update(e)})),n.forEach((t=>{t.drawThisFrame&&(r=Math.max(r,t.width),o=Math.max(o,t.height))})),(r>i.width||o>i.height)&&(i.width=r,i.height=o),s.clear(s.COLOR_BUFFER_BIT),n.forEach((t=>{t.drawThisFrame&&(t.drawInstance(e),t.copyCanvas())}))}}V.defaultOptions={loop:!1,autoResize:!0,pixelRatio:window.devicePixelRatio,useSharedContext:!0,asyncCompile:!0},V.poolInUse=[],V.poolWebGLInstance=[],V.sharedTime=-1;const G=V;class W{constructor(){this.rotation=0}init(t,e){}update(t,e){return this.rotation+=.2*t,R({w:1,x:0,y:0,z:0},this.rotation)}}new class{constructor(t){this.container=t,this.hotspots=[],this.hotspotVisuals=[],S.loadImages(["panorama_1.jpg"]).then((e=>{this.renderer=new A(t,e[0],{rotationControllerOptions:{userInteractions:!1}}),this.renderer.play();const i={x:.5,y:.5,z:1};this.createHotspot(i),this.renderer.lookAt(i),this.renderer.canvas.onmousedown=t=>{const e=this.renderer.canvas.getBoundingClientRect(),i=(t.clientX-e.left)/e.width,s=(t.clientY-e.top)/e.height;if(i>=0&&i<=1&&s>=0&&s<=1){const t=this.renderer.screenToWorld({x:i,y:s});this.createHotspot(t),this.renderer.lookAt(t,2)}},this.renderer.tick((()=>this.tick()))}))}createHotspot(t){const e=document.createElement("div");e.style.zIndex="1",e.style.width="16px",e.style.height="16px",e.style.marginLeft="-8px",e.style.marginTop="-8px",e.style.borderRadius="8px",e.style.backgroundColor="#FF0000",e.style.position="absolute",this.container.appendChild(e),this.hotspotVisuals.push(e),this.hotspots.push(t)}tick(){for(let t=0;t0&&i.x>0&&i.x<1&&i.y>=0&&i.y<1){const e=100*i.x,s=100*i.y;this.hotspotVisuals[t].style.left=e+"%",this.hotspotVisuals[t].style.top=s+"%",this.hotspotVisuals[t].style.display="block"}else this.hotspotVisuals[t].style.display="none"}}}(document.getElementsByClassName("grid-item")[0]),new class{constructor(t){S.loadImages(["panorama_2.jpg"]).then((e=>{this.renderer=new A(t,e[0],{loop:!0})}))}}(document.getElementsByClassName("grid-item")[1]),new class{constructor(t){this.container=t,this.time=0,S.loadImages(["panorama_1.jpg","panorama_2.jpg"]).then((t=>{this.renderer=G.createTemporary(this.container,"//\n// Description : Array and textureless GLSL 2D simplex noise function.\n// Author : Ian McEwan, Ashima Arts.\n// Maintainer : stegu\n// Lastmod : 20110822 (ijm)\n// License : Copyright (C) 2011 Ashima Arts. All rights reserved.\n// Distributed under the MIT License. See LICENSE file.\n// https://github.com/ashima/webgl-noise\n// https://github.com/stegu/webgl-noise\n//\n\nvec3 mod289(vec3 x) {\n return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec2 mod289(vec2 x) {\n return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec3 permute(vec3 x) {\n return mod289(((x*34.0)+1.0)*x);\n}\n\nfloat snoise(vec2 v)\n {\n const vec4 C = vec4(0.211324865405187, // (3.0-sqrt(3.0))/6.0\n 0.366025403784439, // 0.5*(sqrt(3.0)-1.0)\n -0.577350269189626, // -1.0 + 2.0 * C.x\n 0.024390243902439); // 1.0 / 41.0\n// First corner\n vec2 i = floor(v + dot(v, C.yy) );\n vec2 x0 = v - i + dot(i, C.xx);\n\n// Other corners\n vec2 i1;\n //i1.x = step( x0.y, x0.x ); // x0.x > x0.y ? 1.0 : 0.0\n //i1.y = 1.0 - i1.x;\n i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n // x0 = x0 - 0.0 + 0.0 * C.xx ;\n // x1 = x0 - i1 + 1.0 * C.xx ;\n // x2 = x0 - 1.0 + 2.0 * C.xx ;\n vec4 x12 = x0.xyxy + C.xxzz;\n x12.xy -= i1;\n\n// Permutations\n i = mod289(i); // Avoid truncation effects in permutation\n vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))\n\t\t+ i.x + vec3(0.0, i1.x, 1.0 ));\n\n vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);\n m = m*m ;\n m = m*m ;\n\n// Gradients: 41 points uniformly over a line, mapped onto a diamond.\n// The ring size 17*17 = 289 is close to a multiple of 41 (41*7 = 287)\n\n vec3 x = 2.0 * fract(p * C.www) - 1.0;\n vec3 h = abs(x) - 0.5;\n vec3 ox = floor(x + 0.5);\n vec3 a0 = x - ox;\n\n// Normalise gradients implicitly by scaling m\n// Approximation of: m *= inversesqrt( a0*a0 + h*h );\n m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );\n\n// Compute final noise value at P\n vec3 g;\n g.x = a0.x * x0.x + h.x * x0.y;\n g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n return 130.0 * dot(m, g);\n}\n\nfloat rand(vec2 co)\n{\n return fract(sin(dot(co.xy,vec2(12.9898,78.233))) * 43758.5453);\n}\n\n\nvoid mainImage( out vec4 fragColor, in vec2 fragCoord )\n{\n\tvec2 uv = fragCoord.xy / iResolution.xy;\n float time = iTime * 2.0;\n\n // Create large, incidental noise waves\n float noise = max(0.0, snoise(vec2(time, uv.y * 0.3)) - 0.3) * (1.0 / 0.7);\n\n // Offset by smaller, constant noise waves\n noise = noise + (snoise(vec2(time*10.0, uv.y * 2.4)) - 0.5) * 0.15;\n\n // Apply the noise as x displacement for every line\n float xpos = uv.x - noise * noise * 0.25;\n\t fragColor = texture(iChannel0, vec2(xpos, uv.y));\n\n // Mix in some random interference for lines\n fragColor.rgb = mix(fragColor.rgb, vec3(rand(vec2(uv.y * time))), noise * 0.3).rgb;\n\n // Apply a line pattern every 4 pixels\n if (floor(mod(fragCoord.y * 0.25, 2.0)) == 0.0)\n {\n fragColor.rgb *= 1.0 - (0.15 * noise);\n }\n\n // Shift green/blue channels (using the red channel)\n fragColor.g = mix(fragColor.r, texture(iChannel0, vec2(xpos + noise * 0.05, uv.y)).g, 0.25);\n fragColor.b = mix(fragColor.r, texture(iChannel0, vec2(xpos - noise * 0.05, uv.y)).b, 0.25);\n}\n",{useSharedContext:!1}),this.renderer.createBuffer(0,"uniform mat4 uInvViewProjection;\nuniform float uBarrelDistortion;\nuniform float uMix;\n\nvec2 getEqUV(vec3 rd) {\n vec2 uv = vec2(atan(rd.z, rd.x), asin(rd.y));\n uv *= vec2(0.1591, 0.3183);\n uv.y += 0.5;\n return fract(uv);\n}\n\nvec3 getCol(sampler2D tex, vec3 rd) {\n vec2 uv1 = getEqUV(rd.xyz);\n vec3 col1 = texture(tex, uv1).xyz;\n vec2 uv2 = uv1;\n uv2.x = fract(uv2.x + 0.5) - 0.5;\n vec3 col2 = texture(tex, uv2).xyz;\n return mix(col1, col2, step(abs(uv2.x), 0.25));\n}\n\nvoid mainImage(out vec4 c, vec2 p) {\n vec2 uv = vUV0 * 2. - 1.;\n float r2 = dot(uv, uv);\n uv.xy *= 1.0 + uBarrelDistortion * r2;\n vec3 rd = normalize((uInvViewProjection * vec4(uv, 1., 1.)).xyz);\n c.xyz = mix(getCol(iChannel0, rd.xyz), getCol(iChannel1, rd.xyz), smoothstep(.4, .6, uMix));\n c.w = 1.;\n}\n"),this.renderer.buffers[0].setImage(0,t[0],{clampX:!1,flipY:!0,useMipmap:!0}),this.renderer.buffers[0].setImage(1,t[1],{clampX:!1,flipY:!0,useMipmap:!0}),this.renderer.setImage(0,this.renderer.buffers[0]),this.panorama=new A(this.container,null,{fov:90,rotationController:new W,controlledRendererInstance:this.renderer.buffers[0]}),this.panorama.play(),this.panorama.tick((t=>{this.time+=t,this.renderer.buffers[0].setUniformFloat("uMix",2*Math.abs(this.time/10%1-.5))}))}))}}(document.getElementsByClassName("grid-item")[2])})(); \ No newline at end of file +(()=>{"use strict";var t,e;!function(t){t[t.SHADERTOY_WEBGL=0]="SHADERTOY_WEBGL",t[t.SHADERTOY_WEBGL2=1]="SHADERTOY_WEBGL2",t[t.ONESHADER_WEBGL=2]="ONESHADER_WEBGL",t[t.ONESHADER_WEBGL2=3]="ONESHADER_WEBGL2"}(t||(t={}));class i{constructor(e,i){this.initialized=!1,this.type=t.SHADERTOY_WEBGL,this.vsSource="",this.fsSource="",this.uniformLocations={},this.attributeLocations={},this._shaderCompiled=!1,this.gl=e;const s=e.context;this.ext=s.getExtension("KHR_parallel_shader_compile"),this._program=s.createProgram(),this.vs=s.createShader(s.VERTEX_SHADER),this.fs=s.createShader(s.FRAGMENT_SHADER),this.type=this.detectType(i),this.vsSource=this.getVertexShader(this.type),s.shaderSource(this.vs,this.vsSource),s.compileShader(this.vs),this.fsSource=`${this.getFragmentShader(this.type)}${i}`,s.shaderSource(this.fs,this.fsSource),s.compileShader(this.fs),s.attachShader(this._program,this.vs),s.attachShader(this._program,this.fs),s.linkProgram(this._program)}get program(){if(this.initialized)return this._program;this.initialized=!0;const t=this.gl.context;let e=t.getShaderParameter(this.vs,t.COMPILE_STATUS);if(!e)throw console.table(this.vsSource.split("\n")),new Error(`ImageEffectRenderer: Vertex shader compilation failed: ${t.getShaderInfoLog(this.vs)}`);if(e=t.getShaderParameter(this.fs,t.COMPILE_STATUS),!e)throw console.table(this.fsSource.split("\n")),new Error(`ImageEffectRenderer: Shader compilation failed: ${t.getShaderInfoLog(this.fs)}`);if(e=t.getProgramParameter(this._program,t.LINK_STATUS),!e)throw new Error(`ImageEffectRenderer: Program linking failed: ${t.getProgramInfoLog(this._program)}`);return this._program}get shaderCompiled(){return this._shaderCompiled=this._shaderCompiled||!this.ext||this.gl.context.getProgramParameter(this._program,this.ext.COMPLETION_STATUS_KHR),this._shaderCompiled}use(){this.gl.context.useProgram(this.program)}getUniformLocation(t){return void 0!==this.uniformLocations[t]?this.uniformLocations[t]:this.uniformLocations[t]=this.gl.context.getUniformLocation(this._program,t)}getAttributeLocation(t){return void 0!==this.attributeLocations[t]?this.attributeLocations[t]:(this.gl.context.useProgram(this.program),this.attributeLocations[t]=this.gl.context.getAttribLocation(this._program,t))}detectType(e){return/mainImage/gim.exec(e)?this.gl.isWebGL2?t.SHADERTOY_WEBGL2:t.SHADERTOY_WEBGL:/^#version[\s]+300[\s]+es[\s]+/gim.exec(e)?t.ONESHADER_WEBGL2:t.ONESHADER_WEBGL}getFragmentShader(e){switch(e){case t.SHADERTOY_WEBGL:return`precision highp float;\n\n ${this.getUniformShader()}\n\n varying vec2 vUV0;\n void mainImage(out vec4, vec2);\n\n vec4 texture(sampler2D tex, vec2 uv) {\n return texture2D(tex, uv);\n }\n\n void main(void) {\n gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n mainImage(gl_FragColor, vUV0 * iResolution.xy);\n }\n `;case t.SHADERTOY_WEBGL2:return`#version 300 es\n precision highp float;\n\n ${this.getUniformShader()}\n\n in vec2 vUV0;\n out vec4 outFragColor;\n\n void mainImage(out vec4, vec2);\n\n vec4 texture2D(sampler2D tex, vec2 uv) {\n return texture(tex, uv);\n }\n\n void main(void) {\n outFragColor = vec4(0.0, 0.0, 0.0, 1.0);\n mainImage(outFragColor, vUV0 * iResolution.xy);\n }\n `;default:return""}}getVertexShader(e){switch(e){case t.SHADERTOY_WEBGL:return"attribute vec2 aPos;\n attribute vec2 aUV;\n\n varying vec2 vUV0;\n\n void main(void) {\n vUV0 = aUV;\n gl_Position = vec4(aPos, 0.0, 1.0);\n }\n ";case t.SHADERTOY_WEBGL2:return"#version 300 es\n in vec2 aPos;\n in vec2 aUV;\n\n out vec2 vUV0;\n\n void main(void) {\n vUV0 = aUV;\n gl_Position = vec4(aPos, 0.0, 1.0);\n }\n ";case t.ONESHADER_WEBGL:return"attribute vec3 aPos;\n attribute vec2 aUV;\n\n uniform float iAspect;\n\n varying vec2 vScreen;\n varying vec2 vUV0;\n\n void main(void) {\n vUV0 = aUV;\n vScreen = aPos.xy;\n vScreen.x *= iAspect;\n gl_Position = vec4(aPos, 1.0);\n }";case t.ONESHADER_WEBGL2:default:return"#version 300 es\n in vec3 aPos;\n in vec2 aUV;\n\n uniform float iAspect;\n\n out vec2 vScreen;\n out vec2 vUV0;\n\n void main(void) {\n vUV0 = aUV;\n vScreen = aPos.xy;\n vScreen.x *= iAspect;\n gl_Position = vec4(aPos, 1.0);\n }"}}getUniformShader(){return"\n uniform vec2 iResolution;\n uniform float iTime;\n uniform float iGlobalTime;\n uniform float iAspect;\n uniform int iFrame;\n uniform vec4 iMouse;\n\n uniform highp sampler2D iChannel0;\n uniform highp sampler2D iChannel1;\n uniform highp sampler2D iChannel2;\n uniform highp sampler2D iChannel3;\n\n uniform vec2 iChannelResolution0;\n uniform vec2 iChannelResolution1;\n uniform vec2 iChannelResolution2;\n uniform vec2 iChannelResolution3;\n "}}!function(t){t[t.INT=0]="INT",t[t.FLOAT=1]="FLOAT",t[t.VEC2=2]="VEC2",t[t.VEC3=3]="VEC3",t[t.VEC4=4]="VEC4",t[t.MATRIX=5]="MATRIX"}(e||(e={}));class s{constructor(t,e){this.x=0,this.y=0,this.z=0,this.w=0,this.type=t,this.name=e}}class n{constructor(t=void 0){this.isWebGL2=!0,this.lastQuadVBO=void 0,this.sharedPrograms={},this.sharedTextures={},this.canvas=t||document.createElement("canvas");const e={premultipliedAlpha:!0,alpha:!0,preserveDrawingBuffer:!1,antialias:!1,depth:!1,stencil:!1};this.context=this.canvas.getContext("webgl2",e),this.context||(this.context=this.canvas.getContext("webgl",e),this.isWebGL2=!1),this.context.getExtension("WEBGL_color_buffer_float"),this.context.getExtension("EXT_color_buffer_float"),this.context.getExtension("OES_texture_float"),this.context.getExtension("OES_texture_float_linear"),this.context.getExtension("KHR_parallel_shader_compile"),this.context.clearColor(0,0,0,0),this.context.clear(this.context.COLOR_BUFFER_BIT),this.context.enable(this.context.BLEND),this.context.blendFunc(this.context.ONE,this.context.ONE_MINUS_SRC_ALPHA),this.quadVBO=this.generateQuad()}generateQuad(){const t=this.context,e=new Float32Array([-1,1,0,1,-1,-1,0,0,1,1,1,1,1,-1,1,0]),i=t.createBuffer();return t.bindBuffer(t.ARRAY_BUFFER,i),t.bufferData(t.ARRAY_BUFFER,e,t.STATIC_DRAW),i}drawQuad(t,e){const i=this.context;this.lastQuadVBO!==this.quadVBO&&(this.lastQuadVBO=this.quadVBO,i.bindBuffer(i.ARRAY_BUFFER,this.quadVBO),i.enableVertexAttribArray(t),i.vertexAttribPointer(t,2,i.FLOAT,!1,16,0),i.enableVertexAttribArray(e),i.vertexAttribPointer(e,2,i.FLOAT,!1,16,8)),i.drawArrays(i.TRIANGLE_STRIP,0,4)}getCachedTexture(t,e){const i=`${t}_${e.clampX}_${e.clampY}_${e.useMipmap}`;return this.sharedTextures[t]?this.sharedTextures[i]:this.sharedTextures[i]=this.context.createTexture()}compileShader(t){return this.sharedPrograms[t]?this.sharedPrograms[t]:this.sharedPrograms[t]=new i(this,t)}setTextureParameter(t,e){const i=this.context;i.bindTexture(i.TEXTURE_2D,t),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_WRAP_S,e.clampX?i.CLAMP_TO_EDGE:i.REPEAT),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_WRAP_T,e.clampY?i.CLAMP_TO_EDGE:i.REPEAT),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_MAG_FILTER,e.magFilterLinear?i.LINEAR:i.NEAREST),e.useMipmap?(i.texParameteri(i.TEXTURE_2D,i.TEXTURE_MIN_FILTER,i.LINEAR_MIPMAP_LINEAR),i.generateMipmap(i.TEXTURE_2D)):i.texParameteri(i.TEXTURE_2D,i.TEXTURE_MIN_FILTER,e.minFilterLinear?i.LINEAR:i.NEAREST)}bindTextures(t){const e=this.context;for(let i=0;i<8;i++){e.activeTexture(e.TEXTURE0+i);const s=t[i];s&&s.buffer?e.bindTexture(e.TEXTURE_2D,s.buffer.src.texture):s&&s.texture?e.bindTexture(e.TEXTURE_2D,s.texture):e.bindTexture(e.TEXTURE_2D,null)}}setUniforms(t,i){const s=this.context;Object.values(t).forEach((t=>{const n=i.getUniformLocation(t.name);if(null!==n)switch(t.type){case e.INT:s.uniform1i(n,t.x);break;case e.FLOAT:s.uniform1f(n,t.x);break;case e.VEC2:s.uniform2f(n,t.x,t.y);break;case e.VEC3:s.uniform3f(n,t.x,t.y,t.z);break;case e.VEC4:s.uniform4f(n,t.x,t.y,t.z,t.w);break;case e.MATRIX:s.uniformMatrix4fv(n,!1,t.matrix)}}))}}class r{constructor(t){this.width=0,this.height=0,this.frame=0,this.uniforms={},this.textures=[],this.gl=t}setImage(t,e,i={}){if(t>=8)throw new Error("ImageEffectRenderer: A maximum of 8 slots is available, slotIndex is out of bounds.");this.setUniformInt(`iChannel${t}`,t),this.setUniformVec2(`iChannelResolution${t}`,e.width,e.height);const s=this.gl.context,n=this.textures[t];if(e instanceof r){n&&n.texture&&!n.cached&&s.deleteTexture(n.texture);const r={...e.options,...i};this.textures[t]={texture:void 0,buffer:e,cached:!1},this.gl.setTextureParameter(e.src.texture,r),this.gl.setTextureParameter(e.dest.texture,r)}else{const o={...r.defaultImageOptions,...i};o.useCache=o.useCache&&e instanceof HTMLImageElement,o.useCache&&n&&n.texture&&!n.cached&&(s.deleteTexture(n.texture),n.texture=void 0);let a=n&&n.texture;o.useCache&&e instanceof HTMLImageElement&&(a=this.gl.getCachedTexture(e.src,o)),a||(a=s.createTexture()),this.textures[t]={texture:a,buffer:void 0,cached:o.useCache},s.bindTexture(s.TEXTURE_2D,a),s.pixelStorei(s.UNPACK_FLIP_Y_WEBGL,i.flipY?1:0),s.texImage2D(s.TEXTURE_2D,0,s.RGBA,s.RGBA,s.UNSIGNED_BYTE,e),this.gl.setTextureParameter(a,o)}}setUniformFloat(t,i){this.setUniform(t,e.FLOAT,i,0,0,0,void 0)}setUniformInt(t,i){this.setUniform(t,e.INT,i,0,0,0,void 0)}setUniformVec2(t,i,s){this.setUniform(t,e.VEC2,i,s,0,0,void 0)}setUniformVec3(t,i,s,n){this.setUniform(t,e.VEC3,i,s,n,0,void 0)}setUniformVec4(t,i,s,n,r){this.setUniform(t,e.VEC4,i,s,n,r,void 0)}setUniformMatrix(t,i){this.setUniform(t,e.MATRIX,0,0,0,0,i)}draw(t=0,e,i){this.width=0|e,this.height=0|i,this.program.use(),this.setUniformFloat("iGlobalTime",t),this.setUniformFloat("iTime",t),this.setUniformInt("iFrame",this.frame),this.setUniformFloat("iAspect",e/i),this.setUniformVec2("iResolution",e,i),this.gl.setUniforms(this.uniforms,this.program),this.gl.bindTextures(this.textures),this.gl.drawQuad(this.program.getAttributeLocation("aPos"),this.program.getAttributeLocation("aUV")),this.frame++}get shaderCompiled(){return this.program.shaderCompiled}setUniform(t,e,i,n,r,o,a){let h=this.uniforms[t];h||(h=this.uniforms[t]=new s(e,t)),h.x=i,h.y=n,h.z=r,h.w=o,h.matrix=a}destruct(){this.textures.forEach((t=>t.texture&&!t.cached&&this.gl.context.deleteTexture(t.texture))),this.textures=[],this.uniforms={}}}r.defaultImageOptions={clampX:!0,clampY:!0,flipY:!1,useMipmap:!0,useCache:!0,minFilterLinear:!0,magFilterLinear:!0};class o{constructor(t,e=WebGLRenderingContext.UNSIGNED_BYTE){if(this.width=0,this.height=0,this.format=WebGLRenderingContext.RGBA,this.internalFormat=WebGLRenderingContext.RGBA,this.type=WebGLRenderingContext.UNSIGNED_BYTE,this.gl=t,this.type=e,t.isWebGL2)switch(e){case WebGLRenderingContext.UNSIGNED_BYTE:this.internalFormat=WebGL2RenderingContext.RGBA8;break;case WebGLRenderingContext.FLOAT:this.internalFormat=WebGL2RenderingContext.RGBA32F}else this.internalFormat=this.format;const i=t.context;this.texture=i.createTexture(),this.resize(16,16),this.frameBuffer=i.createFramebuffer(),i.bindFramebuffer(i.FRAMEBUFFER,this.frameBuffer),i.framebufferTexture2D(i.FRAMEBUFFER,i.COLOR_ATTACHMENT0,i.TEXTURE_2D,this.texture,0),i.bindFramebuffer(i.FRAMEBUFFER,null)}resize(t,e){if(this.width===(0|t)&&this.height===(0|e))return;this.width=0|t,this.height=0|e;const i=this.gl.context;i.bindTexture(i.TEXTURE_2D,this.texture),i.pixelStorei(i.UNPACK_FLIP_Y_WEBGL,0),this.gl.isWebGL2?i.texImage2D(i.TEXTURE_2D,0,this.internalFormat,this.width,this.height,0,this.format,this.type,null):i.texImage2D(i.TEXTURE_2D,0,this.format,this.width,this.height,0,this.format,this.type,null)}destruct(){const t=this.gl.context;this.frameBuffer&&t.deleteFramebuffer(this.frameBuffer),this.texture&&t.deleteTexture(this.texture)}}class a extends r{constructor(t,e={}){super(t),this.options={...a.defaultBufferOptions,...e},this.frameBuffer0=new o(t,this.options.type),this.frameBuffer1=new o(t,this.options.type)}draw(t=0,e,i){if(e<=0||i<=0)return;const s=this.gl.context,n=this.dest;n.resize(e,i),s.bindFramebuffer(s.FRAMEBUFFER,n.frameBuffer),s.clear(s.COLOR_BUFFER_BIT),super.draw(t,e,i),s.bindFramebuffer(s.FRAMEBUFFER,null)}get src(){return this.frame%2==0?this.frameBuffer0:this.frameBuffer1}get dest(){return this.frame%2==1?this.frameBuffer0:this.frameBuffer1}destruct(){super.destruct(),this.frameBuffer0.destruct(),this.frameBuffer1.destruct()}}a.defaultBufferOptions={...r.defaultImageOptions,useMipmap:!1,useCache:!1,type:5121};class h extends r{constructor(t,e,s,n){if(super(t),this.buffers=[],this.time=0,this.tickFuncs=[],this.readyFuncs=[],this.startTime=-1,this.drawOneFrame=!1,this.animationRequestId=0,this._ready=!1,this.options={...n},this.index=h.index++,this.container=e,this.main=this,this.options.useSharedContext){this.canvas=document.createElement("canvas");const t=this.canvas.getContext("2d");t.fillStyle="#00000000",t.clearRect(0,0,this.canvas.width,this.canvas.height)}else this.canvas=this.gl.canvas;this.canvas.style.width="100%",this.canvas.style.height="100%",this.container.appendChild(this.canvas),this.program=new i(this.gl,s),this.resizeObserver=new ResizeObserver((()=>{this.options.autoResize&&this.updateSize()})),this.resizeObserver.observe(e),this.options.useSharedContext||this.drawingLoop(0)}play(){this.options.loop=!0}stop(){this.options.loop=!1}createBuffer(t,e,i={}){const s=this.buffers[t];s&&s.destruct();const n=new a(this.gl,i);return n.program=this.gl.compileShader(e),n.main=this,this.buffers[t]=n}tick(t){this.tickFuncs.push(t)}ready(t){this.readyFuncs.push(t)}drawFrame(t=0){this.time=t/1e3,this.drawOneFrame=!0}get drawThisFrame(){return(this.options.loop||this.drawOneFrame)&&this.width>0&&this.height>0&&(!this.options.asyncCompile||this.allShadersCompiled)}drawInstance(t){const e=this.gl.context;this.drawOneFrame||(this.time+=t),this.tickFuncs.forEach((e=>e(t))),this.buffers.forEach((t=>{t&&(e.viewport(0,0,this.width,this.height),t.draw(this.time,this.canvas.width,this.canvas.height))})),e.viewport(0,0,this.width,this.height),e.clear(e.COLOR_BUFFER_BIT),this.draw(this.time,this.canvas.width,this.canvas.height),this.drawOneFrame=!1}get allShadersCompiled(){return this.shaderCompiled&&this.buffers.every((t=>t&&t.shaderCompiled))}update(t){this.allShadersCompiled&&(this._ready||(this._ready=!0,this.readyFuncs.forEach((t=>t())),this.readyFuncs=[]))}updateSize(){this.width=this.container.offsetWidth*this.options.pixelRatio|0,this.height=this.container.offsetHeight*this.options.pixelRatio|0,this.width===this.canvas.width&&this.height===this.canvas.height||(this.canvas.width=this.width,this.canvas.height=this.height,this.drawOneFrame=!0)}drawingLoop(t=0){this.animationRequestId=window.requestAnimationFrame((t=>this.drawingLoop(t))),t/=1e3;const e=this.startTime<0?1/60:t-this.startTime;this.startTime=t>0?t:-1,this.update(e),this.drawThisFrame&&this.drawInstance(e)}destruct(){cancelAnimationFrame(this.animationRequestId),super.destruct(),this.resizeObserver.disconnect(),this.container.removeChild(this.canvas),this.canvas.replaceWith(this.canvas.cloneNode(!0)),this.buffers.forEach((t=>{t.destruct()})),this.buffers=[],this.tickFuncs=[]}copyCanvas(){const t=this.gl.canvas,e=this.canvas.getContext("2d");e.clearRect(0,0,this.width,this.height),e.drawImage(t,0,t.height-this.height,this.width,this.height,0,0,this.width,this.height)}}h.index=0;class c{constructor(){throw new Error("Use ImageEffectRenderer.createTemporary to create an ImageEffectRenderer")}static createTemporary(t,e,i={}){const s={...c.defaultOptions,...i};if(s.useSharedContext){c.sharedInstance||(c.sharedInstance=new n,this.drawInstances(0));const i=new h(c.sharedInstance,t,e,s);return this.poolInUse.push(i),i}{const i=c.poolWebGLInstance.pop()||new n;return new h(i,t,e,s)}}static releaseTemporary(t){t.options.useSharedContext||this.poolWebGLInstance.push(t.gl),t.stop(),t.destruct();const e=c.poolInUse.indexOf(t);e>-1&&c.poolInUse.splice(e,1)}static drawInstances(t=0){window.requestAnimationFrame((t=>this.drawInstances(t))),t/=1e3;const e=c.sharedTime<0?1/60:t-c.sharedTime;c.sharedTime=t;const i=c.sharedInstance.canvas,s=c.sharedInstance.context,n=c.poolInUse;let r=0,o=0;n.forEach((t=>{t.update(e)})),n.forEach((t=>{t.drawThisFrame&&(r=Math.max(r,t.width),o=Math.max(o,t.height))})),(r>i.width||o>i.height)&&(i.width=r,i.height=o),s.clear(s.COLOR_BUFFER_BIT),n.forEach((t=>{t.drawThisFrame&&(t.drawInstance(e),t.copyCanvas())}))}}c.defaultOptions={loop:!1,autoResize:!0,pixelRatio:"undefined"!=typeof window?window.devicePixelRatio:1,useSharedContext:!0,asyncCompile:!0},c.poolInUse=[],c.poolWebGLInstance=[],c.sharedTime=-1;const u=c;class l{constructor(){this.press=!1,this.down=!1,this.downTime=0}}class d{constructor(t){this.mousePos={x:0,y:0},this.previousMousePos={x:0,y:0},this.mouseVelocity={x:0,y:0},this.normalized={x:0,y:0},this.mouseClickCallbacks=[],this.buttons=[],this.resetSpeed=!1,this.canvas=t;for(let t=0;t<3;t++)this.buttons.push(new l);this.canvas.addEventListener("touchstart",this.onMouseStart.bind(this),!1),this.canvas.addEventListener("touchmove",this.touchMoveListener.bind(this),!1),this.canvas.addEventListener("touchend",this.endListener.bind(this),!1),this.canvas.addEventListener("touchcancel",this.endListener.bind(this),!1),this.canvas.addEventListener("mousedown",this.onMouseStart.bind(this),!1),this.canvas.addEventListener("mousemove",this.mouseMoveListener.bind(this),!1),this.canvas.addEventListener("mouseup",this.endListener.bind(this),!1),this.canvas.addEventListener("mousecancel",this.endListener.bind(this),!1),this.canvas.addEventListener("mouseout",this.endListener.bind(this),!1)}touchMoveListener(t){this.setMouse(t.targetTouches[0])}mouseMoveListener(t){this.setMouse(t)}endListener(){this.buttons[0].press=!1}onMouseStart(t){t.preventDefault();let e=!1;t instanceof TouchEvent?(e=!0,this.setMouse(t.targetTouches[0])):this.setMouse(t),this.resetSpeed=!0,this.buttons[e?0:t.which-1].press=!0,this.mouseClickCallbacks.forEach((t=>{t()}))}setMouse(t){this.mousePos.x=t.pageX,this.mousePos.y=t.pageY}get normalizedVelocity(){return{...this.mouseVelocity}}get mouseDown(){return this.buttons[0].press}click(t){this.mouseClickCallbacks.push(t)}update(t){this.normalized.x=this.mousePos.x/this.canvas.clientWidth,this.normalized.y=this.mousePos.y/this.canvas.clientHeight,this.resetSpeed?(this.resetSpeed=!1,this.mouseVelocity.x=0,this.mouseVelocity.y=0):(this.mouseVelocity.x=this.normalized.x-this.previousMousePos.x,this.mouseVelocity.y=this.normalized.y-this.previousMousePos.y),this.previousMousePos.x=this.normalized.x,this.previousMousePos.y=this.normalized.y;for(let e=0;e<3;e++){const i=this.buttons[e];i.down=!1,this.buttons[e].press?(0===i.downTime&&(i.down=!0),i.downTime+=t):i.downTime=0}}destruct(){this.canvas&&(this.canvas.removeEventListener("touchstart",this.onMouseStart,!1),this.canvas.removeEventListener("touchmove",this.touchMoveListener,!1),this.canvas.removeEventListener("touchend",this.endListener,!1),this.canvas.removeEventListener("touchcancel",this.endListener,!1),this.canvas.removeEventListener("mousedown",this.onMouseStart,!1),this.canvas.removeEventListener("mousemove",this.mouseMoveListener,!1),this.canvas.removeEventListener("mouseend",this.endListener,!1),this.canvas.removeEventListener("mousecancel",this.endListener,!1),this.canvas.removeEventListener("mouseout",this.endListener,!1))}}function m(t){return Math.max(0,Math.min(1,t))}function f(t,e,i){return t+(e-t)*i}function x(t){return(t=m(t))*t*(3-2*t)}function p(t,e){return{x:t.y*e.z-t.z*e.y,y:t.z*e.x-t.x*e.z,z:t.x*e.y-t.y*e.x}}function v(t){const e=Math.sqrt(t.x*t.x+t.y*t.y+t.z*t.z);return{x:t.x/e,y:t.y/e,z:t.z/e}}function g(t,e){return{x:e[0]*t.x+e[4]*t.y+e[8]*t.z+e[12]*t.w,y:e[1]*t.x+e[5]*t.y+e[9]*t.z+e[13]*t.w,z:e[2]*t.x+e[6]*t.y+e[10]*t.z+e[14]*t.w,w:e[3]*t.x+e[7]*t.y+e[11]*t.z+e[15]*t.w}}function E(t){const e=t[0]+t[4]+t[8];let i,s,n,r;if(e>0){let o=Math.sqrt(e+1);r=.5*o,o=.5/o,i=(t[5]-t[7])*o,s=(t[6]-t[2])*o,n=(t[1]-t[3])*o}else{let e=0;t[4]>t[0]&&(e=1),t[8]>t[3*e+e]&&(e=2);const o=(e+1)%3,a=(e+2)%3,h=Math.sqrt(t[3*e+e]-t[3*o+o]-t[3*a+a]+1),c=.5*h,u=.5/h;r=(t[3*o+a]-t[3*a+o])*u;const l=(t[3*o+e]+t[3*e+o])*u,d=(t[3*a+e]+t[3*e+a])*u;i=0==e?c:0==o?l:d,s=1==e?c:1==o?l:d,n=2==e?c:2==o?l:d}return{x:i,y:s,z:n,w:r}}function T(t){return[t[0],t[1],t[2],0,t[3],t[4],t[5],0,t[6],t[7],t[8],0,0,0,0,1]}function w(t,e){return{w:t.w*e.w-t.x*e.x-t.y*e.y-t.z*e.z,x:t.w*e.x+t.x*e.w+t.y*e.z-t.z*e.y,y:t.w*e.y-t.x*e.z+t.y*e.w+t.z*e.x,z:t.w*e.z+t.x*e.y-t.y*e.x+t.z*e.w}}function R(t,e){const i=Math.sin(e/2);return w(t,{w:Math.cos(e/2),x:0,y:i,z:0})}function y(t){const e=_(t),i=e[0],s=e[3],n=(e[6],e[1]),r=e[4],o=(e[7],e[2]),a=e[5],h=e[8];let c=0,u=0,l=0;var d;return c=Math.asin((d=a,-1,1,Math.max(-1,Math.min(1,d)))),Math.abs(a)<.9999999?(u=Math.atan2(-o,h),l=Math.atan2(-s,r)):(u=0,l=Math.atan2(n,i)),{x:c,y:u,z:l}}function _(t){const e=Array(9).fill(0),{x:i,y:s,z:n,w:r}=t,o=i+i,a=s+s,h=n+n,c=i*o,u=s*o,l=s*a,d=n*o,m=n*a,f=n*h,x=r*o,p=r*a,v=r*h;return e[0]=1-l-f,e[3]=u-v,e[6]=d+p,e[1]=u+v,e[4]=1-c-f,e[7]=m-x,e[2]=d-p,e[5]=m+x,e[8]=1-c-l,e}class L{constructor(){this.options={...L.defaultOptions},this.lastUserRotateSpeed={x:0,y:0},this.currentRotateSpeed={x:0,y:0},this.slowDownTimer=0,this.euler={x:0,y:0,z:0}}init(t,e){this.renderer=t,this.options={...L.defaultOptions,...e},this.mouseListener=new d(this.renderer.canvas)}update(t,e,i){this.mouseListener.update(t);const s=this.renderer.aspectRatio,n=.5/Math.tan(.5*this.renderer.fov),r=2*Math.atan2(.5*s,n);if(this.mouseListener.mouseDown){const e=this.mouseListener.normalizedVelocity;this.lastUserRotateSpeed.x=f(-e.x*r*(1/t),this.currentRotateSpeed.x,this.options.inertia),this.lastUserRotateSpeed.y=f(e.y*this.renderer.fov*(1/t),this.currentRotateSpeed.y,this.options.inertia),this.slowDownTimer=this.options.slowDownTime}const o=this.options.slowDownTime>0?this.slowDownTimer/this.options.slowDownTime:0;if(this.currentRotateSpeed.x=f(0,this.lastUserRotateSpeed.x,o),this.currentRotateSpeed.y=f(0,this.lastUserRotateSpeed.y,o),this.slowDownTimer=Math.max(0,this.slowDownTimer-t),this.options.userInteractions&&!i){this.euler=y(e);const i=this.euler;return i.x-=this.currentRotateSpeed.y*t,i.y+=this.currentRotateSpeed.x*t,i.z=0,this.options.clampXRotation&&(i.x=Math.min(Math.max(i.x,this.options.clampXRotation[0]),this.options.clampXRotation[1])),this.options.clampYRotation&&(i.y=Math.min(Math.max(i.y,this.options.clampYRotation[0]),this.options.clampYRotation[1])),function(t){let e={w:1,x:0,y:0,z:0};return e=function(t,e){const i=Math.sin(e/2);return w(t,{w:Math.cos(e/2),x:i,y:0,z:0})}(e,t.x),e=R(e,t.y),e=function(t,e){const i=Math.sin(e/2);return w(t,{w:Math.cos(e/2),x:0,y:0,z:i})}(e,t.z),e}(i)}return this.euler=y(e),e}destruct(){this.mouseListener.destruct()}}L.defaultOptions={inertia:.5,slowDownTime:.5,clampXRotation:[-.5,.5],clampYRotation:void 0,userInteractions:!0};const b=L;class C{constructor(t,e,i={}){this.transitionProgress=1,this.transitionDuration=1,this.transitionEase=x,this.rotation={w:1,x:0,y:0,z:0},this.rotationStart={w:1,x:0,y:0,z:0},this.rotationEnd={w:1,x:0,y:0,z:0},this.projection=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],this.view=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],this.viewProjection=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],this.invViewProjection=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],this.options={...C.defaultOptions,...i},!1!==this.options.renderer?this.renderer=this.options.renderer:this.options.controlledRendererInstance?this.renderer=this.options.controlledRendererInstance.main:this.renderer=u.createTemporary(t,this.shader,{useSharedContext:!1,...i}),this.options.rotationController?this.rotationController=this.options.rotationController:this.rotationController=new b,this.rotationController.init(this,this.options.rotationControllerOptions),e&&this.setImage(0,e,{flipY:!0,clampX:!1,clampY:!0,useMipmap:!0}),this.renderer.tick((t=>this.drawingLoop(t)))}get fov(){return this.options.fov}set fov(t){this.options.fov=t}get barrelDistortion(){return this.options.barrelDistortion}set barrelDistortion(t){this.options.barrelDistortion=t}get aspectRatio(){return this.canvas.width/this.canvas.height}tick(t){this.renderer.tick(t)}worldToScreen(t){let e={...t,w:1};e=g(e,this.viewProjection),e.x/=e.w,e.y/=e.w;const i=Math.sqrt(e.x*e.x+e.y*e.y),s=this.barrelDistortion;if(s*i>0){const t=Math.pow(9*s*s*i+Math.sqrt(3)*Math.sqrt(27*s*s*s*s*i*i+4*s*s*s),1/3);let n=t/(Math.pow(2,1/3)*Math.pow(3,2/3)*s);n-=Math.pow(2/3,1/3)/t;const r=n/i;e.x*=r,e.y*=r}return e.x=.5*e.x+.5,e.y=-.5*e.y+.5,{x:e.x,y:e.y,z:e.z}}lookAt(t,e=0,i=x){const s={...t};this.transitionEase=i;let n=function(t,e,i){const s=v({x:(n={x:0,y:0,z:0}).x-(r=e).x,y:n.y-r.y,z:n.z-r.z});var n,r;const o=v(p({x:0,y:1,z:0},s)),a=v(p(s,o));return[o.x,a.x,s.x,o.y,a.y,s.y,o.z,a.z,s.z]}(0,s);this.view=T(n),e>0?(this.transitionProgress=0,this.rotationStart={...this.rotation},this.rotationEnd=E(n)):this.rotation=E(n)}get canvas(){return this.renderer.canvas}screenToWorld(t){let e=2*t.x-1,i=1-t.y;i=2*i-1;const s=e*e+i*i,n=1+this.barrelDistortion*s;e*=n,i*=n;const r=g({x:e,y:i,z:1,w:1},this.invViewProjection);return{x:r.x,y:r.y,z:r.z}}play(){this.renderer.play()}stop(){this.renderer.stop()}setImage(t,e,i={}){this.renderer.setImage(t,e,i)}drawingLoop(t){this.update(t),this.draw()}update(t){if(this.rotation=this.rotationController.update(t,this.rotation,this.transitionProgress<1),this.transitionProgress<1){this.transitionProgress+=t/this.transitionDuration;const e=this.transitionEase(m(this.transitionProgress));this.rotation=function(t,e,i){let s,n,r=t.x*e.x+t.y*e.y+t.z*e.z+t.w*e.w;if(r<0&&(r=-r,e.x=-e.x,e.y=-e.y,e.z=-e.z,e.w=-e.w),1-r>1e-9){const t=Math.acos(r),e=Math.sin(t);s=Math.sin((1-i)*t)/e,n=Math.sin(i*t)/e}else s=1-i,n=i;return function(t){const e=Math.sqrt(t.w*t.w+t.x*t.x+t.y*t.y+t.z*t.z);return 0===e?{w:1,x:0,y:0,z:0}:{w:t.w/e,x:t.x/e,y:t.y/e,z:t.z/e}}({x:s*t.x+n*e.x,y:s*t.y+n*e.y,z:s*t.z+n*e.z,w:s*t.w+n*e.w})}(this.rotationStart,this.rotationEnd,e)}this.updateViewProjection()}draw(){const t=this.options.controlledRendererInstance?this.options.controlledRendererInstance:this.renderer;t.setUniformMatrix("uInvViewProjection",new Float32Array(this.invViewProjection)),t.setUniformFloat("uBarrelDistortion",this.barrelDistortion)}updateViewProjection(){this.projection=function(t,e,i,s){const n=1/Math.tan(t/2);let r;const o=Array(16).fill(0);return o[0]=n/e,o[5]=n,o[11]=-1,r=1/-99.99,o[10]=100.01*r,o[14]=2*r,o}(this.fov,this.aspectRatio),this.view=T(_(this.rotation)),this.viewProjection=function(t,e){const i=Array(16).fill(0);for(let s=0;s<4;s++)for(let n=0;n<4;n++)for(let r=0;r<4;r++)i[4*s+n]+=t[4*s+r]*e[4*r+n];return i}(this.view,this.projection),this.invViewProjection=function(t){const e=Array(16).fill(0),[i,s,n,r,o,a,h,c,u,l,d,m,f,x,p,v]=t,g=i*a-s*o,E=i*h-n*o,T=i*c-r*o,w=s*h-n*a,R=s*c-r*a,y=n*c-r*h,_=u*x-l*f,L=u*p-d*f,b=u*v-m*f,C=l*p-d*x,A=l*v-m*x,S=d*v-m*p;let U=g*S-E*A+T*C+w*b-R*L+y*_;return U?(U=1/U,e[0]=(a*S-h*A+c*C)*U,e[1]=(n*A-s*S-r*C)*U,e[2]=(x*y-p*R+v*w)*U,e[3]=(d*R-l*y-m*w)*U,e[4]=(h*b-o*S-c*L)*U,e[5]=(i*S-n*b+r*L)*U,e[6]=(p*T-f*y-v*E)*U,e[7]=(u*y-d*T+m*E)*U,e[8]=(o*A-a*b+c*_)*U,e[9]=(s*b-i*A-r*_)*U,e[10]=(f*R-x*T+v*g)*U,e[11]=(l*T-u*R-m*g)*U,e[12]=(a*L-o*C-h*_)*U,e[13]=(i*C-s*L+n*_)*U,e[14]=(x*E-f*w-p*g)*U,e[15]=(u*w-l*E+d*g)*U,e):e}(this.viewProjection)}get shader(){return this.options.shader?this.options.shader:C.defaultShader}destruct(){this.renderer&&u.releaseTemporary(this.renderer)}}C.defaultOptions={loop:!0,fov:1,barrelDistortion:.1,shader:!1,renderer:!1,rotationController:!1,controlledRendererInstance:!1,rotationControllerOptions:{}},C.defaultShader="\nuniform mat4 uInvViewProjection;\nuniform float uBarrelDistortion;\n\nvec2 getEqUV(vec3 rd) {\n vec2 uv = vec2(atan(rd.z, rd.x), asin(rd.y));\n uv *= vec2(0.15915494309, 0.31830988618);\n uv.y += 0.5;\n return fract(uv);\n}\n\nvoid mainImage( out vec4 c, vec2 p ) {\n vec2 uv = vUV0 * 2. - 1.;\n\n float r2 = dot(uv,uv);\n uv.xy *= 1.0 + uBarrelDistortion * r2;\n\n vec4 rd = vec4(uv, 1., 1.);\n\n rd = uInvViewProjection * rd;\n\n rd.xyz = normalize(rd.xyz);\n\n vec2 uv1 = getEqUV(rd.xyz);\n vec3 col1 = texture(iChannel0, uv1).xyz;\n vec2 uv2 = uv1;\n uv2.x = fract(uv2.x + 0.5) - 0.5;\n vec3 col2 = texture(iChannel0, uv2).xyz;\n c.xyz = mix(col1, col2, step(abs(uv2.x), 0.25));\n c.w = 1.;\n}";const A=C;class S{static loadImages(t){return Promise.all(t.map((t=>S.loadImage(t))))}static loadImage(t){return new Promise((e=>{const i=new Image;i.onload=()=>e(i),i.src=`./static/${t}`}))}}var U,I;!function(t){t[t.SHADERTOY_WEBGL=0]="SHADERTOY_WEBGL",t[t.SHADERTOY_WEBGL2=1]="SHADERTOY_WEBGL2",t[t.ONESHADER_WEBGL=2]="ONESHADER_WEBGL",t[t.ONESHADER_WEBGL2=3]="ONESHADER_WEBGL2"}(U||(U={}));class F{constructor(t,e){this.initialized=!1,this.type=U.SHADERTOY_WEBGL,this.vsSource="",this.fsSource="",this.uniformLocations={},this.attributeLocations={},this._shaderCompiled=!1,this.gl=t;const i=t.context;this.ext=i.getExtension("KHR_parallel_shader_compile"),this._program=i.createProgram(),this.vs=i.createShader(i.VERTEX_SHADER),this.fs=i.createShader(i.FRAGMENT_SHADER),this.type=this.detectType(e),this.vsSource=this.getVertexShader(this.type),i.shaderSource(this.vs,this.vsSource),i.compileShader(this.vs),this.fsSource=`${this.getFragmentShader(this.type)}${e}`,i.shaderSource(this.fs,this.fsSource),i.compileShader(this.fs),i.attachShader(this._program,this.vs),i.attachShader(this._program,this.fs),i.linkProgram(this._program)}get program(){if(this.initialized)return this._program;this.initialized=!0;const t=this.gl.context;let e=t.getShaderParameter(this.vs,t.COMPILE_STATUS);if(!e)throw console.table(this.vsSource.split("\n")),new Error(`ImageEffectRenderer: Vertex shader compilation failed: ${t.getShaderInfoLog(this.vs)}`);if(e=t.getShaderParameter(this.fs,t.COMPILE_STATUS),!e)throw console.table(this.fsSource.split("\n")),new Error(`ImageEffectRenderer: Shader compilation failed: ${t.getShaderInfoLog(this.fs)}`);if(e=t.getProgramParameter(this._program,t.LINK_STATUS),!e)throw new Error(`ImageEffectRenderer: Program linking failed: ${t.getProgramInfoLog(this._program)}`);return this._program}get shaderCompiled(){return this._shaderCompiled=this._shaderCompiled||!this.ext||this.gl.context.getProgramParameter(this._program,this.ext.COMPLETION_STATUS_KHR),this._shaderCompiled}use(){this.gl.context.useProgram(this.program)}getUniformLocation(t){return void 0!==this.uniformLocations[t]?this.uniformLocations[t]:this.uniformLocations[t]=this.gl.context.getUniformLocation(this._program,t)}getAttributeLocation(t){return void 0!==this.attributeLocations[t]?this.attributeLocations[t]:(this.gl.context.useProgram(this.program),this.attributeLocations[t]=this.gl.context.getAttribLocation(this._program,t))}detectType(t){return/mainImage/gim.exec(t)?this.gl.isWebGL2?U.SHADERTOY_WEBGL2:U.SHADERTOY_WEBGL:/^#version[\s]+300[\s]+es[\s]+/gim.exec(t)?U.ONESHADER_WEBGL2:U.ONESHADER_WEBGL}getFragmentShader(t){switch(t){case U.SHADERTOY_WEBGL:return`precision highp float;\n\n ${this.getUniformShader()}\n\n varying vec2 vUV0;\n void mainImage(out vec4, vec2);\n\n vec4 texture(sampler2D tex, vec2 uv) {\n return texture2D(tex, uv);\n }\n\n void main(void) {\n gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n mainImage(gl_FragColor, vUV0 * iResolution.xy);\n }\n `;case U.SHADERTOY_WEBGL2:return`#version 300 es\n precision highp float;\n\n ${this.getUniformShader()}\n\n in vec2 vUV0;\n out vec4 outFragColor;\n\n void mainImage(out vec4, vec2);\n\n vec4 texture2D(sampler2D tex, vec2 uv) {\n return texture(tex, uv);\n }\n\n void main(void) {\n outFragColor = vec4(0.0, 0.0, 0.0, 1.0);\n mainImage(outFragColor, vUV0 * iResolution.xy);\n }\n `;default:return""}}getVertexShader(t){switch(t){case U.SHADERTOY_WEBGL:return"attribute vec2 aPos;\n attribute vec2 aUV;\n\n varying vec2 vUV0;\n\n void main(void) {\n vUV0 = aUV;\n gl_Position = vec4(aPos, 0.0, 1.0);\n }\n ";case U.SHADERTOY_WEBGL2:return"#version 300 es\n in vec2 aPos;\n in vec2 aUV;\n\n out vec2 vUV0;\n\n void main(void) {\n vUV0 = aUV;\n gl_Position = vec4(aPos, 0.0, 1.0);\n }\n ";case U.ONESHADER_WEBGL:return"attribute vec3 aPos;\n attribute vec2 aUV;\n\n uniform float iAspect;\n\n varying vec2 vScreen;\n varying vec2 vUV0;\n\n void main(void) {\n vUV0 = aUV;\n vScreen = aPos.xy;\n vScreen.x *= iAspect;\n gl_Position = vec4(aPos, 1.0);\n }";case U.ONESHADER_WEBGL2:default:return"#version 300 es\n in vec3 aPos;\n in vec2 aUV;\n\n uniform float iAspect;\n\n out vec2 vScreen;\n out vec2 vUV0;\n\n void main(void) {\n vUV0 = aUV;\n vScreen = aPos.xy;\n vScreen.x *= iAspect;\n gl_Position = vec4(aPos, 1.0);\n }"}}getUniformShader(){return"\n uniform vec2 iResolution;\n uniform float iTime;\n uniform float iGlobalTime;\n uniform float iAspect;\n uniform int iFrame;\n uniform vec4 iMouse;\n\n uniform highp sampler2D iChannel0;\n uniform highp sampler2D iChannel1;\n uniform highp sampler2D iChannel2;\n uniform highp sampler2D iChannel3;\n\n uniform vec2 iChannelResolution0;\n uniform vec2 iChannelResolution1;\n uniform vec2 iChannelResolution2;\n uniform vec2 iChannelResolution3;\n "}}!function(t){t[t.INT=0]="INT",t[t.FLOAT=1]="FLOAT",t[t.VEC2=2]="VEC2",t[t.VEC3=3]="VEC3",t[t.VEC4=4]="VEC4",t[t.MATRIX=5]="MATRIX"}(I||(I={}));class B{constructor(t,e){this.x=0,this.y=0,this.z=0,this.w=0,this.type=t,this.name=e}}class P{constructor(t=void 0){this.isWebGL2=!0,this.lastQuadVBO=void 0,this.sharedPrograms={},this.sharedTextures={},this.canvas=t||document.createElement("canvas");const e={premultipliedAlpha:!0,alpha:!0,preserveDrawingBuffer:!1,antialias:!1,depth:!1,stencil:!1};this.context=this.canvas.getContext("webgl2",e),this.context||(this.context=this.canvas.getContext("webgl",e),this.isWebGL2=!1),this.context.getExtension("WEBGL_color_buffer_float"),this.context.getExtension("EXT_color_buffer_float"),this.context.getExtension("OES_texture_float"),this.context.getExtension("OES_texture_float_linear"),this.context.getExtension("KHR_parallel_shader_compile"),this.context.clearColor(0,0,0,0),this.context.clear(this.context.COLOR_BUFFER_BIT),this.context.enable(this.context.BLEND),this.context.blendFunc(this.context.ONE,this.context.ONE_MINUS_SRC_ALPHA),this.quadVBO=this.generateQuad()}generateQuad(){const t=this.context,e=new Float32Array([-1,1,0,1,-1,-1,0,0,1,1,1,1,1,-1,1,0]),i=t.createBuffer();return t.bindBuffer(t.ARRAY_BUFFER,i),t.bufferData(t.ARRAY_BUFFER,e,t.STATIC_DRAW),i}drawQuad(t,e){const i=this.context;this.lastQuadVBO!==this.quadVBO&&(this.lastQuadVBO=this.quadVBO,i.bindBuffer(i.ARRAY_BUFFER,this.quadVBO),i.enableVertexAttribArray(t),i.vertexAttribPointer(t,2,i.FLOAT,!1,16,0),i.enableVertexAttribArray(e),i.vertexAttribPointer(e,2,i.FLOAT,!1,16,8)),i.drawArrays(i.TRIANGLE_STRIP,0,4)}getCachedTexture(t,e){const i=`${t}_${e.clampX}_${e.clampY}_${e.useMipmap}`;return this.sharedTextures[t]?this.sharedTextures[i]:this.sharedTextures[i]=this.context.createTexture()}compileShader(t){return this.sharedPrograms[t]?this.sharedPrograms[t]:this.sharedPrograms[t]=new F(this,t)}setTextureParameter(t,e){const i=this.context;i.bindTexture(i.TEXTURE_2D,t),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_WRAP_S,e.clampX?i.CLAMP_TO_EDGE:i.REPEAT),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_WRAP_T,e.clampY?i.CLAMP_TO_EDGE:i.REPEAT),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_MAG_FILTER,e.magFilterLinear?i.LINEAR:i.NEAREST),e.useMipmap?(i.texParameteri(i.TEXTURE_2D,i.TEXTURE_MIN_FILTER,i.LINEAR_MIPMAP_LINEAR),i.generateMipmap(i.TEXTURE_2D)):i.texParameteri(i.TEXTURE_2D,i.TEXTURE_MIN_FILTER,e.minFilterLinear?i.LINEAR:i.NEAREST)}bindTextures(t){const e=this.context;for(let i=0;i<8;i++){e.activeTexture(e.TEXTURE0+i);const s=t[i];s&&s.buffer?e.bindTexture(e.TEXTURE_2D,s.buffer.src.texture):s&&s.texture?e.bindTexture(e.TEXTURE_2D,s.texture):e.bindTexture(e.TEXTURE_2D,null)}}setUniforms(t,e){const i=this.context;Object.values(t).forEach((t=>{const s=e.getUniformLocation(t.name);if(null!==s)switch(t.type){case I.INT:i.uniform1i(s,t.x);break;case I.FLOAT:i.uniform1f(s,t.x);break;case I.VEC2:i.uniform2f(s,t.x,t.y);break;case I.VEC3:i.uniform3f(s,t.x,t.y,t.z);break;case I.VEC4:i.uniform4f(s,t.x,t.y,t.z,t.w);break;case I.MATRIX:i.uniformMatrix4fv(s,!1,t.matrix)}}))}}class O{constructor(t){this.width=0,this.height=0,this.frame=0,this.uniforms={},this.textures=[],this.gl=t}setImage(t,e,i={}){if(t>=8)throw new Error("ImageEffectRenderer: A maximum of 8 slots is available, slotIndex is out of bounds.");this.setUniformInt(`iChannel${t}`,t),this.setUniformVec2(`iChannelResolution${t}`,e.width,e.height);const s=this.gl.context,n=this.textures[t];if(e instanceof O){n&&n.texture&&!n.cached&&s.deleteTexture(n.texture);const r={...e.options,...i};this.textures[t]={texture:void 0,buffer:e,cached:!1},this.gl.setTextureParameter(e.src.texture,r),this.gl.setTextureParameter(e.dest.texture,r)}else{const r={...O.defaultImageOptions,...i};r.useCache=r.useCache&&e instanceof HTMLImageElement,r.useCache&&n&&n.texture&&!n.cached&&(s.deleteTexture(n.texture),n.texture=void 0);let o=n&&n.texture;r.useCache&&e instanceof HTMLImageElement&&(o=this.gl.getCachedTexture(e.src,r)),o||(o=s.createTexture()),this.textures[t]={texture:o,buffer:void 0,cached:r.useCache},s.bindTexture(s.TEXTURE_2D,o),s.pixelStorei(s.UNPACK_FLIP_Y_WEBGL,i.flipY?1:0),s.texImage2D(s.TEXTURE_2D,0,s.RGBA,s.RGBA,s.UNSIGNED_BYTE,e),this.gl.setTextureParameter(o,r)}}setUniformFloat(t,e){this.setUniform(t,I.FLOAT,e,0,0,0,void 0)}setUniformInt(t,e){this.setUniform(t,I.INT,e,0,0,0,void 0)}setUniformVec2(t,e,i){this.setUniform(t,I.VEC2,e,i,0,0,void 0)}setUniformVec3(t,e,i,s){this.setUniform(t,I.VEC3,e,i,s,0,void 0)}setUniformVec4(t,e,i,s,n){this.setUniform(t,I.VEC4,e,i,s,n,void 0)}setUniformMatrix(t,e){this.setUniform(t,I.MATRIX,0,0,0,0,e)}draw(t=0,e,i){this.width=0|e,this.height=0|i,this.program.use(),this.setUniformFloat("iGlobalTime",t),this.setUniformFloat("iTime",t),this.setUniformInt("iFrame",this.frame),this.setUniformFloat("iAspect",e/i),this.setUniformVec2("iResolution",e,i),this.gl.setUniforms(this.uniforms,this.program),this.gl.bindTextures(this.textures),this.gl.drawQuad(this.program.getAttributeLocation("aPos"),this.program.getAttributeLocation("aUV")),this.frame++}get shaderCompiled(){return this.program.shaderCompiled}setUniform(t,e,i,s,n,r,o){let a=this.uniforms[t];a||(a=this.uniforms[t]=new B(e,t)),a.x=i,a.y=s,a.z=n,a.w=r,a.matrix=o}destruct(){this.textures.forEach((t=>t.texture&&!t.cached&&this.gl.context.deleteTexture(t.texture))),this.textures=[],this.uniforms={}}}O.defaultImageOptions={clampX:!0,clampY:!0,flipY:!1,useMipmap:!0,useCache:!0,minFilterLinear:!0,magFilterLinear:!0};class D{constructor(t,e=WebGLRenderingContext.UNSIGNED_BYTE){if(this.width=0,this.height=0,this.format=WebGLRenderingContext.RGBA,this.internalFormat=WebGLRenderingContext.RGBA,this.type=WebGLRenderingContext.UNSIGNED_BYTE,this.gl=t,this.type=e,t.isWebGL2)switch(e){case WebGLRenderingContext.UNSIGNED_BYTE:this.internalFormat=WebGL2RenderingContext.RGBA8;break;case WebGLRenderingContext.FLOAT:this.internalFormat=WebGL2RenderingContext.RGBA32F}else this.internalFormat=this.format;const i=t.context;this.texture=i.createTexture(),this.resize(16,16),this.frameBuffer=i.createFramebuffer(),i.bindFramebuffer(i.FRAMEBUFFER,this.frameBuffer),i.framebufferTexture2D(i.FRAMEBUFFER,i.COLOR_ATTACHMENT0,i.TEXTURE_2D,this.texture,0),i.bindFramebuffer(i.FRAMEBUFFER,null)}resize(t,e){if(this.width===(0|t)&&this.height===(0|e))return;this.width=0|t,this.height=0|e;const i=this.gl.context;i.bindTexture(i.TEXTURE_2D,this.texture),i.pixelStorei(i.UNPACK_FLIP_Y_WEBGL,0),this.gl.isWebGL2?i.texImage2D(i.TEXTURE_2D,0,this.internalFormat,this.width,this.height,0,this.format,this.type,null):i.texImage2D(i.TEXTURE_2D,0,this.format,this.width,this.height,0,this.format,this.type,null)}destruct(){const t=this.gl.context;this.frameBuffer&&t.deleteFramebuffer(this.frameBuffer),this.texture&&t.deleteTexture(this.texture)}}class M extends O{constructor(t,e={}){super(t),this.options={...M.defaultBufferOptions,...e},this.frameBuffer0=new D(t,this.options.type),this.frameBuffer1=new D(t,this.options.type)}draw(t=0,e,i){if(e<=0||i<=0)return;const s=this.gl.context,n=this.dest;n.resize(e,i),s.bindFramebuffer(s.FRAMEBUFFER,n.frameBuffer),s.clear(s.COLOR_BUFFER_BIT),super.draw(t,e,i),s.bindFramebuffer(s.FRAMEBUFFER,null)}get src(){return this.frame%2==0?this.frameBuffer0:this.frameBuffer1}get dest(){return this.frame%2==1?this.frameBuffer0:this.frameBuffer1}destruct(){super.destruct(),this.frameBuffer0.destruct(),this.frameBuffer1.destruct()}}M.defaultBufferOptions={...O.defaultImageOptions,useMipmap:!1,useCache:!1,type:5121};class z extends O{constructor(t,e,i,s){if(super(t),this.buffers=[],this.time=0,this.tickFuncs=[],this.readyFuncs=[],this.startTime=-1,this.drawOneFrame=!1,this.animationRequestId=0,this._ready=!1,this.options={...s},this.index=z.index++,this.container=e,this.main=this,this.options.useSharedContext){this.canvas=document.createElement("canvas");const t=this.canvas.getContext("2d");t.fillStyle="#00000000",t.clearRect(0,0,this.canvas.width,this.canvas.height)}else this.canvas=this.gl.canvas;this.canvas.style.width="100%",this.canvas.style.height="100%",this.container.appendChild(this.canvas),this.program=new F(this.gl,i),this.resizeObserver=new ResizeObserver((()=>{this.options.autoResize&&this.updateSize()})),this.resizeObserver.observe(e),this.options.useSharedContext||this.drawingLoop(0)}play(){this.options.loop=!0}stop(){this.options.loop=!1}createBuffer(t,e,i={}){const s=this.buffers[t];s&&s.destruct();const n=new M(this.gl,i);return n.program=this.gl.compileShader(e),n.main=this,this.buffers[t]=n}tick(t){this.tickFuncs.push(t)}ready(t){this.readyFuncs.push(t)}drawFrame(t=0){this.time=t/1e3,this.drawOneFrame=!0}get drawThisFrame(){return(this.options.loop||this.drawOneFrame)&&this.width>0&&this.height>0&&(!this.options.asyncCompile||this.allShadersCompiled)}drawInstance(t){const e=this.gl.context;this.drawOneFrame||(this.time+=t),this.tickFuncs.forEach((e=>e(t))),this.buffers.forEach((t=>{t&&(e.viewport(0,0,this.width,this.height),t.draw(this.time,this.canvas.width,this.canvas.height))})),e.viewport(0,0,this.width,this.height),e.clear(e.COLOR_BUFFER_BIT),this.draw(this.time,this.canvas.width,this.canvas.height),this.drawOneFrame=!1}get allShadersCompiled(){return this.shaderCompiled&&this.buffers.every((t=>t&&t.shaderCompiled))}update(t){this.allShadersCompiled&&(this._ready||(this._ready=!0,this.readyFuncs.forEach((t=>t())),this.readyFuncs=[]))}updateSize(){this.width=this.container.offsetWidth*this.options.pixelRatio|0,this.height=this.container.offsetHeight*this.options.pixelRatio|0,this.width===this.canvas.width&&this.height===this.canvas.height||(this.canvas.width=this.width,this.canvas.height=this.height,this.drawOneFrame=!0)}drawingLoop(t=0){this.animationRequestId=window.requestAnimationFrame((t=>this.drawingLoop(t))),t/=1e3;const e=this.startTime<0?1/60:t-this.startTime;this.startTime=t>0?t:-1,this.update(e),this.drawThisFrame&&this.drawInstance(e)}destruct(){cancelAnimationFrame(this.animationRequestId),super.destruct(),this.resizeObserver.disconnect(),this.container.removeChild(this.canvas),this.canvas.replaceWith(this.canvas.cloneNode(!0)),this.buffers.forEach((t=>{t.destruct()})),this.buffers=[],this.tickFuncs=[]}copyCanvas(){const t=this.gl.canvas,e=this.canvas.getContext("2d");e.clearRect(0,0,this.width,this.height),e.drawImage(t,0,t.height-this.height,this.width,this.height,0,0,this.width,this.height)}}z.index=0;class V{constructor(){throw new Error("Use ImageEffectRenderer.createTemporary to create an ImageEffectRenderer")}static createTemporary(t,e,i={}){const s={...V.defaultOptions,...i};if(s.useSharedContext){V.sharedInstance||(V.sharedInstance=new P,this.drawInstances(0));const i=new z(V.sharedInstance,t,e,s);return this.poolInUse.push(i),i}{const i=V.poolWebGLInstance.pop()||new P;return new z(i,t,e,s)}}static releaseTemporary(t){t.options.useSharedContext||this.poolWebGLInstance.push(t.gl),t.stop(),t.destruct();const e=V.poolInUse.indexOf(t);e>-1&&V.poolInUse.splice(e,1)}static drawInstances(t=0){window.requestAnimationFrame((t=>this.drawInstances(t))),t/=1e3;const e=V.sharedTime<0?1/60:t-V.sharedTime;V.sharedTime=t;const i=V.sharedInstance.canvas,s=V.sharedInstance.context,n=V.poolInUse;let r=0,o=0;n.forEach((t=>{t.update(e)})),n.forEach((t=>{t.drawThisFrame&&(r=Math.max(r,t.width),o=Math.max(o,t.height))})),(r>i.width||o>i.height)&&(i.width=r,i.height=o),s.clear(s.COLOR_BUFFER_BIT),n.forEach((t=>{t.drawThisFrame&&(t.drawInstance(e),t.copyCanvas())}))}}V.defaultOptions={loop:!1,autoResize:!0,pixelRatio:"undefined"!=typeof window?window.devicePixelRatio:1,useSharedContext:!0,asyncCompile:!0},V.poolInUse=[],V.poolWebGLInstance=[],V.sharedTime=-1;const G=V;class W{constructor(){this.rotation=0}init(t,e){}update(t,e){return this.rotation+=.2*t,R({w:1,x:0,y:0,z:0},this.rotation)}}new class{constructor(t){this.container=t,this.hotspots=[],this.hotspotVisuals=[],S.loadImages(["panorama_1.jpg"]).then((e=>{this.renderer=new A(t,e[0],{rotationControllerOptions:{userInteractions:!1}}),this.renderer.play();const i={x:.5,y:.5,z:1};this.createHotspot(i),this.renderer.lookAt(i),this.renderer.canvas.onmousedown=t=>{const e=this.renderer.canvas.getBoundingClientRect(),i=(t.clientX-e.left)/e.width,s=(t.clientY-e.top)/e.height;if(i>=0&&i<=1&&s>=0&&s<=1){const t=this.renderer.screenToWorld({x:i,y:s});this.createHotspot(t),this.renderer.lookAt(t,2)}},this.renderer.tick((()=>this.tick()))}))}createHotspot(t){const e=document.createElement("div");e.style.zIndex="1",e.style.width="16px",e.style.height="16px",e.style.marginLeft="-8px",e.style.marginTop="-8px",e.style.borderRadius="8px",e.style.backgroundColor="#FF0000",e.style.position="absolute",this.container.appendChild(e),this.hotspotVisuals.push(e),this.hotspots.push(t)}tick(){for(let t=0;t0&&i.x>0&&i.x<1&&i.y>=0&&i.y<1){const e=100*i.x,s=100*i.y;this.hotspotVisuals[t].style.left=e+"%",this.hotspotVisuals[t].style.top=s+"%",this.hotspotVisuals[t].style.display="block"}else this.hotspotVisuals[t].style.display="none"}}}(document.getElementsByClassName("grid-item")[0]),new class{constructor(t){S.loadImages(["panorama_2.jpg"]).then((e=>{this.renderer=new A(t,e[0],{loop:!0})}))}}(document.getElementsByClassName("grid-item")[1]),new class{constructor(t){this.container=t,this.time=0,S.loadImages(["panorama_1.jpg","panorama_2.jpg"]).then((t=>{this.renderer=G.createTemporary(this.container,"//\n// Description : Array and textureless GLSL 2D simplex noise function.\n// Author : Ian McEwan, Ashima Arts.\n// Maintainer : stegu\n// Lastmod : 20110822 (ijm)\n// License : Copyright (C) 2011 Ashima Arts. All rights reserved.\n// Distributed under the MIT License. See LICENSE file.\n// https://github.com/ashima/webgl-noise\n// https://github.com/stegu/webgl-noise\n//\n\nvec3 mod289(vec3 x) {\n return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec2 mod289(vec2 x) {\n return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec3 permute(vec3 x) {\n return mod289(((x*34.0)+1.0)*x);\n}\n\nfloat snoise(vec2 v)\n {\n const vec4 C = vec4(0.211324865405187, // (3.0-sqrt(3.0))/6.0\n 0.366025403784439, // 0.5*(sqrt(3.0)-1.0)\n -0.577350269189626, // -1.0 + 2.0 * C.x\n 0.024390243902439); // 1.0 / 41.0\n// First corner\n vec2 i = floor(v + dot(v, C.yy) );\n vec2 x0 = v - i + dot(i, C.xx);\n\n// Other corners\n vec2 i1;\n //i1.x = step( x0.y, x0.x ); // x0.x > x0.y ? 1.0 : 0.0\n //i1.y = 1.0 - i1.x;\n i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n // x0 = x0 - 0.0 + 0.0 * C.xx ;\n // x1 = x0 - i1 + 1.0 * C.xx ;\n // x2 = x0 - 1.0 + 2.0 * C.xx ;\n vec4 x12 = x0.xyxy + C.xxzz;\n x12.xy -= i1;\n\n// Permutations\n i = mod289(i); // Avoid truncation effects in permutation\n vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))\n\t\t+ i.x + vec3(0.0, i1.x, 1.0 ));\n\n vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);\n m = m*m ;\n m = m*m ;\n\n// Gradients: 41 points uniformly over a line, mapped onto a diamond.\n// The ring size 17*17 = 289 is close to a multiple of 41 (41*7 = 287)\n\n vec3 x = 2.0 * fract(p * C.www) - 1.0;\n vec3 h = abs(x) - 0.5;\n vec3 ox = floor(x + 0.5);\n vec3 a0 = x - ox;\n\n// Normalise gradients implicitly by scaling m\n// Approximation of: m *= inversesqrt( a0*a0 + h*h );\n m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );\n\n// Compute final noise value at P\n vec3 g;\n g.x = a0.x * x0.x + h.x * x0.y;\n g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n return 130.0 * dot(m, g);\n}\n\nfloat rand(vec2 co)\n{\n return fract(sin(dot(co.xy,vec2(12.9898,78.233))) * 43758.5453);\n}\n\n\nvoid mainImage( out vec4 fragColor, in vec2 fragCoord )\n{\n\tvec2 uv = fragCoord.xy / iResolution.xy;\n float time = iTime * 2.0;\n\n // Create large, incidental noise waves\n float noise = max(0.0, snoise(vec2(time, uv.y * 0.3)) - 0.3) * (1.0 / 0.7);\n\n // Offset by smaller, constant noise waves\n noise = noise + (snoise(vec2(time*10.0, uv.y * 2.4)) - 0.5) * 0.15;\n\n // Apply the noise as x displacement for every line\n float xpos = uv.x - noise * noise * 0.25;\n\t fragColor = texture(iChannel0, vec2(xpos, uv.y));\n\n // Mix in some random interference for lines\n fragColor.rgb = mix(fragColor.rgb, vec3(rand(vec2(uv.y * time))), noise * 0.3).rgb;\n\n // Apply a line pattern every 4 pixels\n if (floor(mod(fragCoord.y * 0.25, 2.0)) == 0.0)\n {\n fragColor.rgb *= 1.0 - (0.15 * noise);\n }\n\n // Shift green/blue channels (using the red channel)\n fragColor.g = mix(fragColor.r, texture(iChannel0, vec2(xpos + noise * 0.05, uv.y)).g, 0.25);\n fragColor.b = mix(fragColor.r, texture(iChannel0, vec2(xpos - noise * 0.05, uv.y)).b, 0.25);\n}\n",{useSharedContext:!1}),this.renderer.createBuffer(0,"uniform mat4 uInvViewProjection;\nuniform float uBarrelDistortion;\nuniform float uMix;\n\nvec2 getEqUV(vec3 rd) {\n vec2 uv = vec2(atan(rd.z, rd.x), asin(rd.y));\n uv *= vec2(0.1591, 0.3183);\n uv.y += 0.5;\n return fract(uv);\n}\n\nvec3 getCol(sampler2D tex, vec3 rd) {\n vec2 uv1 = getEqUV(rd.xyz);\n vec3 col1 = texture(tex, uv1).xyz;\n vec2 uv2 = uv1;\n uv2.x = fract(uv2.x + 0.5) - 0.5;\n vec3 col2 = texture(tex, uv2).xyz;\n return mix(col1, col2, step(abs(uv2.x), 0.25));\n}\n\nvoid mainImage(out vec4 c, vec2 p) {\n vec2 uv = vUV0 * 2. - 1.;\n float r2 = dot(uv, uv);\n uv.xy *= 1.0 + uBarrelDistortion * r2;\n vec3 rd = normalize((uInvViewProjection * vec4(uv, 1., 1.)).xyz);\n c.xyz = mix(getCol(iChannel0, rd.xyz), getCol(iChannel1, rd.xyz), smoothstep(.4, .6, uMix));\n c.w = 1.;\n}\n"),this.renderer.buffers[0].setImage(0,t[0],{clampX:!1,flipY:!0,useMipmap:!0}),this.renderer.buffers[0].setImage(1,t[1],{clampX:!1,flipY:!0,useMipmap:!0}),this.renderer.setImage(0,this.renderer.buffers[0]),this.panorama=new A(this.container,null,{fov:90,rotationController:new W,controlledRendererInstance:this.renderer.buffers[0]}),this.panorama.play(),this.panorama.tick((t=>{this.time+=t,this.renderer.buffers[0].setUniformFloat("uMix",2*Math.abs(this.time/10%1-.5))}))}))}}(document.getElementsByClassName("grid-item")[2])})(); \ No newline at end of file diff --git a/example/package.json b/example/package.json index 5029c22..078acec 100644 --- a/example/package.json +++ b/example/package.json @@ -1,11 +1,12 @@ { - "name": "panorama-renderer examples", + "name": "panorama-renderer-examples", "version": "1.0.0", "description": "", "author": "Reinder Nijhoff ", "main": "index.js", "scripts": { - "dev": "webpack serve --config ./webpack.config.js --mode development" + "dev": "webpack serve --config ./webpack.config.js --mode development", + "build": "webpack --config ./webpack.config.js --mode production" }, "keywords": [], "license": "MIT",