quick-shader.min.js

/*QuickShader v0.1.0 */
!function(){var a=0,b=0,c=function(){};document.addEventListener("mousemove",function(c){a=c.pageX,b=c.pageY}),document.addEventListener("touchmove",function(c){a=c.touches[0].pageX,b=c.touches[0].pageY});var d="attribute vec2 pos;void main(){gl_Position=vec4(pos.x,pos.y,0.0,1.00);}",e=["#ifdef GL_ES\n","precision highp float;\n","#endif\n","uniform bool mouseDown;\n","uniform bool mouseUp;\n","uniform bool mouseClicked;\n","uniform vec3 resolution;\n","uniform float time;\n","uniform float millis;\n","uniform vec2 mouse;\n","uniform sampler2D tex0;\n"].join("");window.QuickShader=function(a){a.shader||console.warn("You must specify a fragment shader"),this.width=a.width||400,this.height=a.height||400,this.shader=a.shader,this.textureCode="",this.texturesIn=a.textures||[],this.textures=[],this.inputCode="",this.customData={},this.customInputs=a.inputs||[],this.updateFunction=c,this.canvas=document.createElement("canvas"),this.canvas.width=this.width,this.canvas.height=this.height,this.addCanvasMouseEvents(),a.parentNode&&(this.parentNode="object"==typeof a.parentNode?a.parentNode:document.querySelector(a.parentNode),this.parentNode.appendChild(this.canvas)),this.pauseOffset=0,this.totalPauseTime=0,this.start=this.play,this.init()},QuickShader.prototype={constructor:QuickShader,init:function(){var a,b,c;if(a=this.gl=this.ctx=this.canvas.getContext("experimental-webgl"),b=new Float32Array([-1,-1,1,-1,-1,1,1,-1,1,1,-1,1]),this.quadVBO=a.createBuffer(),a.bindBuffer(a.ARRAY_BUFFER,this.quadVBO),a.bufferData(a.ARRAY_BUFFER,b,a.STATIC_DRAW),this.texturesIn.forEach(this.addTexture.bind(this)),this.customInputs.forEach(this.addInput.bind(this)),this.shader=[e,this.textureCode,this.inputCode,this.shader].join(""),c=this.configureShader()){if(this.destroy(),this.parentNode){var d=document.createElement("pre");d.innerHTML=c,this.parentNode.appendChild(d)}}else this.size(this.width,this.height),this.millis=(new Date).getMilliseconds()/1e3},addCanvasMouseEvents:function(){this.mouseDown=!1,this.mouseUp=!1,this.mouseClicked=!1,this.onClick=this.onClick.bind(this),this.onMouseDown=this.onMouseDown.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.canvas.addEventListener("click",this.onClick),this.canvas.addEventListener("mousedown",this.onMouseDown),this.canvas.addEventListener("touchstart",this.onMouseDown),document.addEventListener("mouseup",this.onMouseUp),document.addEventListener("touchend",this.onMouseUp)},onClick:function(){this.mouseClicked=!0},onMouseDown:function(){this.mouseDown=!0},onMouseUp:function(){this.mouseUp=!0,this.mouseDown=!1},destroy:function(){this.reset(),this.canvas.removeEventListener("click",this.onClick),this.canvas.removeEventListener("mousedown",this.onMouseDown),document.removeEventListener("mouseup",this.onMouseUp),this.canvas.parentNode&&this.canvas.parentNode.removeChild(this.canvas)},reset:function(){this.startTime=null,cancelAnimationFrame(this.animationId)},play:function(){this.error||(this.totalPauseTime+=this.pauseOffset,this.paused=!1,this.startTime||(this.startTime=+new Date,this.run()))},run:function(){var a=(+new Date-this.startTime-this.totalPauseTime)/1e3;this.render(a),this.animationId=requestAnimationFrame(this.run.bind(this))},pause:function(){this.paused=!0,this.pauseTime=+new Date},size:function(a,b){this.width=a,this.height=b,this.canvas.width=a,this.canvas.height=b,this.gl.viewport(0,0,this.width,this.height)},configureShader:function(){var a,b=this.gl,c=b.createProgram(),e=b.createShader(b.VERTEX_SHADER),f=b.createShader(b.FRAGMENT_SHADER);return b.shaderSource(e,d),b.shaderSource(f,this.shader),b.compileShader(e),b.compileShader(f),b.getShaderParameter(f,b.COMPILE_STATUS)?(b.attachShader(c,e),b.attachShader(c,f),b.deleteShader(e),b.deleteShader(f),b.linkProgram(c),this.shaderProgram&&b.deleteProgram(this.shaderProgram),void(this.shaderProgram=c)):(a=b.getShaderInfoLog(f),b.deleteProgram(c),this.error=!0,"shader-error: \n"+a)},update:function(a){this.updateFunction=a.bind(this)},render:function(c){var d,e,f,g=this.gl,h=[],i=this.textures.length,j=this.customInputs.length;if(c=c||0,this.paused)return void(this.pauseOffset=+new Date-this.pauseTime);g.viewport(0,0,this.width,this.height),g.useProgram(this.shaderProgram),h[0]=g.getAttribLocation(this.shaderProgram,"pos"),h[1]=g.getUniformLocation(this.shaderProgram,"time"),h[2]=g.getUniformLocation(this.shaderProgram,"resolution"),h[3]=g.getUniformLocation(this.shaderProgram,"millis"),h[4]=g.getUniformLocation(this.shaderProgram,"mouse"),h[5]=g.getUniformLocation(this.shaderProgram,"mouseDown"),h[6]=g.getUniformLocation(this.shaderProgram,"mouseUp"),h[7]=g.getUniformLocation(this.shaderProgram,"mouseClicked"),g.uniform1f(h[1],c),g.uniform3f(h[2],this.width,this.height,1),g.uniform1f(h[3],this.millis);for(var k=0;i>k;k++)e=g.getUniformLocation(this.shaderProgram,this.textures[k].name),g.uniform1i(e,k),g.activeTexture(g["TEXTURE"+k]),g.bindTexture(g.TEXTURE_2D,this.textures[k].texture);this.updateFunction(this.customData);for(var k=0;j>k;k++){var l=this.customInputs[k];d=g.getUniformLocation(this.shaderProgram,l.name),"float"===l.type?g.uniform1f(d,this.customData[l.name]):("bool"===l.type||"int"===l.type)&&g.uniform1i(d,this.customData[l.name])}f=this.canvas.getBoundingClientRect(),mouseX=a-f.left,mouseY=b-f.top,g.uniform2f(h[4],mouseX,mouseY),g.uniform1f(h[5],+this.mouseDown),g.uniform1f(h[6],+this.mouseUp),g.uniform1f(h[7],+this.mouseClicked),this.mouseUp=!1,this.mouseClicked=!1,g.bindBuffer(g.ARRAY_BUFFER,this.quadVBO),g.vertexAttribPointer(h[0],2,g.FLOAT,!1,0,0),g.enableVertexAttribArray(h[0]),g.drawArrays(g.TRIANGLES,0,6),g.disableVertexAttribArray(h[0])},addInput:function(a){this.inputCode+=["uniform ",a.type," ",a.name,";\n"].join(""),this.customData[a.name]=a.value},addTexture:function(a){var b=this.gl,c=a.src,d=a.name,e=b.createTexture();this.textureCode+=["uniform sampler2D ",d,";\n"].join(""),b.pixelStorei(b.UNPACK_FLIP_Y_WEBGL,!0),b.bindTexture(b.TEXTURE_2D,e),b.texImage2D(b.TEXTURE_2D,0,b.RGBA,b.RGBA,b.UNSIGNED_BYTE,c),b.texParameteri(b.TEXTURE_2D,b.TEXTURE_MAG_FILTER,b.LINEAR),b.texParameteri(b.TEXTURE_2D,b.TEXTURE_MIN_FILTER,b.LINEAR_MIPMAP_NEAREST),b.generateMipmap(b.TEXTURE_2D),b.bindTexture(b.TEXTURE_2D,null),this.textures.push({name:d,texture:e})}}}();