[ad_1]
\n<\/p>\n
This just happens to fall into a domain I am catching up on again. Maybe not quite what you want but you can remove all the 2D canvas stuff and just keep the webGL stuff.<\/p>\n
This demo mixes 2D and 3D canvas interfaces to get high performance GPU processing on 2D canvas content.<\/p>\n
The fragment shader does the work of creating the gradients near bottom of code called Radial gradients are created by calculating the distance from the center and getting a value 0 to 1. I use this value to get the 3 gradients. To change the sharpness of the gradients I multiply, pull down and clamp the values.<\/p>\n eg the big circle near mouse is 1 at center and 0 away. I multiply by 350 to give 350 to 0. then I pull down by 270 to give 80 to -270, then I clamp to 0 and 1. The result is a sharp gradient. <\/p>\n I position the circles on a line from a point just at the top of the canvas and one near the mouse the other further along the line.<\/p>\n There is a lot of boiler plate stuff and I am a little over it today so you will have to nut out the rest. <\/p>\n Very easy to convert to all webGL. Just remove all the canvas mouse stuff up the top. Create an image and call Warning<\/strong> the shaders have high level directive and can not be used without supporting code. To use with other setups remove the FragmentShader<\/code><\/p>\nstartWebGL(image)<\/code> Add webGL<\/code> canvas (after you create it in startWebGL<\/code> function) to the document body and call at least once the function webGLRender<\/code> to set the shader variables and render a frame.<\/p>\n\n
#<\/code> infront of all uniform<\/code> and attribute<\/code> variables in shaders. Ie #uniform vec2 mouse;<\/code> becomes uniform vec2 mouse;<\/code><\/p>\n<\/blockquote>\n\/\/==================================================================================================\r\n\/\/ The following code is support code that provides me with a standard interface to various forums.\r\n\/\/ It provides a mouse interface, a full screen canvas, and some global often used variable \r\n\/\/ like canvas, ctx, mouse, w, h (width and height), globalTime\r\n\/\/ It should not be used as an example of how to write a canvas interface.\r\n\/\/ By Blindman67\r\nconst U = undefined;\r\nconst RESIZE_DEBOUNCE_TIME = 100;\r\nvar onresize; \/\/ demo use this to do your thing\r\nvar w,h,cw,ch,canvas,ctx,mouse,createCanvas,resizeCanvas,setGlobals,globalTime=0,resizeCount = 0; \r\ncreateCanvas = function () { \/\/ create 2D display canvas\r\n var c,cs; \r\n cs = (c = document.createElement(\"canvas\")).style; \r\n cs.position = \"absolute\"; \r\n cs.top = cs.left = \"0px\"; \r\n cs.zIndex = 1000; \r\n document.body.appendChild(c); \r\n return c;\r\n}\r\nresizeCanvas = function () {\r\n if (canvas === U) { \r\n canvas = createCanvas(); \r\n } \r\n canvas.width = window.innerWidth; \r\n canvas.height = window.innerHeight; \r\n ctx = canvas.getContext(\"2d\"); \r\n if (typeof setGlobals === \"function\") { \r\n setGlobals(); \r\n } \r\n if (typeof onresize === \"function\"){ \r\n resizeCount += 1; \r\n setTimeout(debounceResize,RESIZE_DEBOUNCE_TIME);\r\n }\r\n}\r\nfunction debounceResize(){ \r\n resizeCount -= 1; \r\n if(resizeCount <= 0){ \r\n onresize();\r\n }\r\n}\r\nsetGlobals = function(){ \r\n cw = (w = canvas.width) \/ 2; \r\n ch = (h = canvas.height) \/ 2; \r\n mouse.updateBounds(); \r\n}\r\nmouse = (function(){\r\n function preventDefault(e) { e.preventDefault(); }\r\n var mouse = {\r\n x : 0, y : 0, w : 0, alt : false, shift : false, ctrl : false, buttonRaw : 0, over : false, bm : [1, 2, 4, 6, 5, 3], \r\n active : false,bounds : null, crashRecover : null, mouseEvents : \"mousemove,mousedown,mouseup,mouseout,mouseover,mousewheel,DOMMouseScroll\".split(\",\")\r\n };\r\n var m = mouse;\r\n function mouseMove(e) {\r\n var t = e.type;\r\n m.x = e.clientX - m.bounds.left; m.y = e.clientY - m.bounds.top;\r\n m.alt = e.altKey; m.shift = e.shiftKey; m.ctrl = e.ctrlKey;\r\n if (t === \"mousedown\") { m.buttonRaw |= m.bm[e.which-1]; } \r\n else if (t === \"mouseup\") { m.buttonRaw &= m.bm[e.which + 2]; }\r\n else if (t === \"mouseout\") { m.buttonRaw = 0; m.over = false; }\r\n else if (t === \"mouseover\") { m.over = true; }\r\n else if (t === \"mousewheel\") { m.w = e.wheelDelta; }\r\n else if (t === \"DOMMouseScroll\") { m.w = -e.detail; }\r\n if (m.callbacks) { m.callbacks.forEach(c => c(e)); }\r\n if((m.buttonRaw & 2) && m.crashRecover !== null){ if(typeof m.crashRecover === \"function\"){ setTimeout(m.crashRecover,0);}} \r\n e.preventDefault();\r\n }\r\n m.updateBounds = function(){\r\n if(m.active){\r\n m.bounds = m.element.getBoundingClientRect();\r\n }\r\n }\r\n m.addCallback = function (callback) {\r\n if (typeof callback === \"function\") {\r\n if (m.callbacks === U) { m.callbacks = [callback]; }\r\n else { m.callbacks.push(callback); }\r\n } else { throw new TypeError(\"mouse.addCallback argument must be a function\"); }\r\n }\r\n m.start = function (element, blockContextMenu) {\r\n if (m.element !== U) { m.removeMouse(); } \r\n m.element = element === U ? document : element;\r\n m.blockContextMenu = blockContextMenu === U ? false : blockContextMenu;\r\n m.mouseEvents.forEach( n => { m.element.addEventListener(n, mouseMove); } );\r\n if (m.blockContextMenu === true) { m.element.addEventListener(\"contextmenu\", preventDefault, false); }\r\n m.active = true;\r\n m.updateBounds();\r\n }\r\n m.remove = function () {\r\n if (m.element !== U) {\r\n m.mouseEvents.forEach(n => { m.element.removeEventListener(n, mouseMove); } );\r\n if (m.contextMenuBlocked === true) { m.element.removeEventListener(\"contextmenu\", preventDefault);}\r\n m.element = m.callbacks = m.contextMenuBlocked = U;\r\n m.active = false;\r\n }\r\n }\r\n return mouse;\r\n})();\r\n\/** SimpleFullCanvasMouse.js end **\/\r\nfunction display(){ \r\n ctx.setTransform(1,0,0,1,0,0); \/\/ reset transform\r\n ctx.globalAlpha = 1; \/\/ reset alpha\r\n ctx.clearRect(0,0,w,h);\r\n if(webGL !== undefined){\r\n webGLRender();\r\n }\r\n}\r\nfunction update(timer){ \/\/ Main update loop\r\n globalTime = timer;\r\n display(); \/\/ call demo code\r\n requestAnimationFrame(update); \r\n}\r\n\/\/ END of boilerplate stuff.\r\n\r\n\/* ***************************************************************************************************\r\nThe following functions are helpers for Shader variables. Rather than having to type all the mumbo \r\njumbo to locate shader variable and then store the location ID getVariables and getLocations does\r\nit for you. uniform and attribute variable that are prefixed with # are can used via the gl.locs.name\r\n(no space between # and variable type #attribute is good # attribute is bad)\r\n\r\nFor example \r\n #uniform vec3 myVec; \/\/ the shader source code\r\nIs located and given the name myVec in gl.locs and can be set in javascript \r\n gl.uniform3f(gl.locs.myVec, 0.3, 0.5, 0.8); \/\/\r\n \r\nPlease not that this makes shaders source code none standard and will not complie as is without these \r\nfunctions . Just remove the # \r\n*************************************************************************************************** *\/\r\nconst VAR_TYPES = [\"attribute\",\"uniform\"];\r\nconst VAR_LOCATE_FUNC = {attribute : \"getAttribLocation\", uniform : \"getUniformLocation\"}\r\n\/\/ get # delimited variables from shader source \r\nfunction getVariables(script,types){\r\n VAR_TYPES.forEach(f => {\r\n if(types.items === undefined){ types.items = []; }\r\n script = script.replace(new RegExp(\"#\" + f+\".+;\",\"g\"), str => {\r\n var data = str.replace(\/ \/g,\" \").split(\" \");\r\n types.items.push({use : f , type : data[1] , name : data[2].replace(\";\",\"\")});\r\n return str.substr(1);\r\n })\r\n })\r\n return script;\r\n}\r\n\/\/ get location IDs for shader variables\r\nvar getLocations = function(gl,shaders){\r\n var locs = {};\r\n shaders.variables.items.forEach(v => { locs[v.name] = gl[VAR_LOCATE_FUNC[v.use]](shaders.program, v.name); });\r\n return locs;\r\n}\r\n\/* end of var heplers ***************************************************************************** *\/\r\n\/\/ creates vertex and fragment shaders \r\nfunction createProgramFromScripts( gl, ids) {\r\n var shaders = [];\r\n var variables = {};\r\n for (var i = 0; i < ids.length; i += 1) {\r\n var script = shadersSource[ids[i]];\r\n if (script !== undefined) {\r\n var shader = gl.createShader(gl[script.type]);\r\n var source = getVariables(script.source,variables)\r\n gl.shaderSource(shader, source);\r\n gl.compileShader(shader);\r\n shaders.push(shader); \r\n }else{\r\n throw new ReferenceError(\"*** Error: unknown script ID : \" + ids[i]);\r\n }\r\n }\r\n var program = gl.createProgram();\r\n shaders.forEach((shader) => { gl.attachShader(program, shader); });\r\n gl.linkProgram(program);\r\n gl.locs = getLocations(gl,{ program : program,variables : variables}); \r\n return program;\r\n}\r\n\/\/ setup simple 2D webGL image processor\r\nvar webGL;\r\nfunction startWebGL(image) {\r\n webGL = document.createElement(\"canvas\");\r\n webGL.width = image.width;\r\n webGL.height = image.height;\r\n var gl = webGL.gl = webGL.getContext(\"webgl\");\r\n var program = createProgramFromScripts(gl, [\"VertexShader\", \"FragmentShader\"]);\r\n gl.useProgram(program);\r\n gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());\r\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0]), gl.STATIC_DRAW);\r\n gl.enableVertexAttribArray(gl.locs.texCoord);\r\n gl.vertexAttribPointer(gl.locs.texCoord, 2, gl.FLOAT, false, 0, 0);\r\n\r\n gl.bindTexture(gl.TEXTURE_2D, gl.createTexture());\r\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\r\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\r\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);\r\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);\r\n gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);\r\n gl.uniform2f(gl.locs.resolution, webGL.width, webGL.height);\r\n gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());\r\n gl.enableVertexAttribArray(gl.locs.position);\r\n gl.vertexAttribPointer(gl.locs.position, 2, gl.FLOAT, false, 0, 0);\r\n setRectangle(gl, 0, 0, image.width, image.height);\r\n}\r\nfunction setRectangle(gl, x, y, width, height) { \/\/ set draw rectangle\r\n var x1 = x + width;\r\n var y1 = y + height;\r\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ x, y, x1, y, x, y1, x, y1, x1, y, x1, y1]), gl.STATIC_DRAW);\r\n}\r\nvar shadersSource = {\r\n VertexShader : {\r\n type : \"VERTEX_SHADER\",\r\n source : `\r\n \/\/ the # is a higher level directive to indicate that the variable needs to \r\n \/\/ be loacted as value set or read\r\n #attribute vec2 position;\r\n #attribute vec2 texCoord;\r\n #uniform vec2 resolution;\r\n varying vec2 u_texCoord; \/\/ varying means this is moved to the frag shader\r\n float aspect = resolution.x\/resolution.y;\r\n varying float aspect1;\r\n void main() {\r\n vec2 zeroToOne = position \/ resolution;\r\n vec2 zeroToTwo = zeroToOne * 2.0;\r\n vec2 clipSpace = zeroToTwo - 1.0;\r\n gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\r\n u_texCoord = vec2(texCoord.x ,texCoord.y \/ aspect);\r\n aspect1 = aspect;\r\n }`\r\n },\r\n FragmentShader : {\r\n type : \"FRAGMENT_SHADER\",\r\n source : `\r\n \/\/ the # is a higher level directive to indicate that the variable needs to \r\n \/\/ be loacted as value set or read \r\n precision mediump float;\r\n #uniform sampler2D u_image;\r\n #uniform vec4 backDark; \/\/ the background dark colour\r\n #uniform vec4 backLight; \/\/ backgroun light colour\r\n #uniform vec4 ringCol; \/\/ rings colour\r\n #uniform vec2 lightLoc; \/\/ location of point from which to project second ring\r\n #uniform vec2 mouse; \/\/ location of big ring\r\n varying float aspect1;\r\n varying vec2 u_texCoord; \/\/ texture coord for all mapping and comes from the \r\n \/\/ vertext shader. If you change the name here \r\n \/\/ change it in the vert shader\r\n float dist; \/\/ used for background gradient\r\n vec4 pixelCol; \/\/ to hold the final pixel colour\r\n vec2 gradCenter = vec2(0.5,0.25); \/\/ location of background gradient center\r\n vec2 secondRing = lightLoc+ (mouse - lightLoc) * (1.2 + distance(mouse,lightLoc));\r\n\r\n \r\n void main() {\r\n pixelCol = texture2D(u_image, vec2(u_texCoord.x,u_texCoord.y * aspect1));\r\n \/\/pixelCol = texture2D(u_image, vec2(u_texCoord.x,u.texCoord.y );\r\n \/\/ get distance from center of background gradient\r\n dist = distance(gradCenter,u_texCoord) \/ 0.707;\r\n \/\/ use dist to caculate the background gradient\r\n pixelCol += (backDark - backLight) * dist + backLight;\r\n \/\/ add the big ring colour to the background. mouse is the center of big ring\r\n pixelCol += clamp((1.0-distance(mouse,u_texCoord)) * 345.0 - 270.5 ,0.0,1.0) * ringCol;\r\n \/\/ add the second rign colour to the background colour. secondRing is location of second ring\r\n pixelCol += clamp((1.0-distance(secondRing,u_texCoord)) * 29.0 - 27. ,0.0,1.0) * ringCol;\r\n\r\n gl_FragColor = pixelCol; \/\/ set the fragment to the colour caculated\r\n }`\r\n }\r\n}\r\nvar firstRun = true;\r\nfunction webGLRender(){\r\n var gl = webGL.gl;\r\n if(firstRun ){\r\n firstRun = false;\r\n gl.uniform4f(gl.locs.backDark, 0,0,0,1)\r\n gl.uniform4f(gl.locs.backLight, 0.3,0.5,0.8,1)\r\n gl.uniform4f(gl.locs.ringCol, 0.1,0.1,0.38,0.41)\r\n gl.uniform2f(gl.locs.lightLoc, 0.5,0.0);\r\n }\r\n gl.uniform2f(gl.locs.mouse, mouse.x \/ w,mouse.y \/ h);\r\n gl.drawArrays(gl.TRIANGLES, 0, 6);\r\n ctx.drawImage(webGL,0,0, canvas.width, canvas.height);\r\n}\r\nfunction createImageAndStartWebGL(){\r\n var image = document.createElement(\"canvas\");\r\n image.width = canvas.width;\r\n image.height = canvas.height;\r\n image.ctx = image.getContext(\"2d\");\r\n image.ctx.fillRect(0,0,canvas.width,canvas.height);\r\n image.ctx.font = \"48px arial\";\r\n image.ctx.textAlign = \"center\";\r\n image.ctx.fillStyle = \"white\";\r\n image.ctx.fillText(\"WebGL & Canvas 2D demo\",canvas.width\/2,48);\r\n image.ctx.font = \"16px arial\";\r\n image.ctx.fillText(\"WebGL fragment shader processing 2D canvas image, then render back to 2D canvas.\",canvas.width\/2,66);\r\n firstRun = true;\r\n startWebGL(image);\r\n}\r\n\/\/ Add the setup to the debounced resize\r\nonresize = createImageAndStartWebGL;\r\n\r\n\/\/ start it all happening\r\nresizeCanvas(); \r\nmouse.start(canvas,true); \r\nwindow.addEventListener(\"resize\",resizeCanvas); \r\nrequestAnimationFrame(update);<\/code><\/pre>\n<\/div>\n<\/div><\/div>\n