//==================================================================================================
// The following code is support code that provides me with a standard interface to various forums.
// It provides a mouse interface, a full screen canvas, and some global often used variable
// like canvas, ctx, mouse, w, h (width and height), globalTime
// It should not be used as an example of how to write a canvas interface.
// By Blindman67
const U = undefined;
const RESIZE_DEBOUNCE_TIME = 100;
var onresize; // demo use this to do your thing
var w,h,cw,ch,canvas,ctx,mouse,createCanvas,resizeCanvas,setGlobals,globalTime=0,resizeCount = 0;
createCanvas = function () { // create 2D display canvas
var c,cs;
cs = (c = document.createElement("canvas")).style;
cs.position = "absolute";
cs.top = cs.left = "0px";
cs.zIndex = 1000;
document.body.appendChild(c);
return c;
}
resizeCanvas = function () {
if (canvas === U) {
canvas = createCanvas();
}
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx = canvas.getContext("2d");
if (typeof setGlobals === "function") {
setGlobals();
}
if (typeof onresize === "function"){
resizeCount += 1;
setTimeout(debounceResize,RESIZE_DEBOUNCE_TIME);
}
}
function debounceResize(){
resizeCount -= 1;
if(resizeCount <= 0){
onresize();
}
}
setGlobals = function(){
cw = (w = canvas.width) / 2;
ch = (h = canvas.height) / 2;
mouse.updateBounds();
}
mouse = (function(){
function preventDefault(e) { e.preventDefault(); }
var mouse = {
x : 0, y : 0, w : 0, alt : false, shift : false, ctrl : false, buttonRaw : 0, over : false, bm : [1, 2, 4, 6, 5, 3],
active : false,bounds : null, crashRecover : null, mouseEvents : "mousemove,mousedown,mouseup,mouseout,mouseover,mousewheel,DOMMouseScroll".split(",")
};
var m = mouse;
function mouseMove(e) {
var t = e.type;
m.x = e.clientX - m.bounds.left; m.y = e.clientY - m.bounds.top;
m.alt = e.altKey; m.shift = e.shiftKey; m.ctrl = e.ctrlKey;
if (t === "mousedown") { m.buttonRaw |= m.bm[e.which-1]; }
else if (t === "mouseup") { m.buttonRaw &= m.bm[e.which + 2]; }
else if (t === "mouseout") { m.buttonRaw = 0; m.over = false; }
else if (t === "mouseover") { m.over = true; }
else if (t === "mousewheel") { m.w = e.wheelDelta; }
else if (t === "DOMMouseScroll") { m.w = -e.detail; }
if (m.callbacks) { m.callbacks.forEach(c => c(e)); }
if((m.buttonRaw & 2) && m.crashRecover !== null){ if(typeof m.crashRecover === "function"){ setTimeout(m.crashRecover,0);}}
e.preventDefault();
}
m.updateBounds = function(){
if(m.active){
m.bounds = m.element.getBoundingClientRect();
}
}
m.addCallback = function (callback) {
if (typeof callback === "function") {
if (m.callbacks === U) { m.callbacks = [callback]; }
else { m.callbacks.push(callback); }
} else { throw new TypeError("mouse.addCallback argument must be a function"); }
}
m.start = function (element, blockContextMenu) {
if (m.element !== U) { m.removeMouse(); }
m.element = element === U ? document : element;
m.blockContextMenu = blockContextMenu === U ? false : blockContextMenu;
m.mouseEvents.forEach( n => { m.element.addEventListener(n, mouseMove); } );
if (m.blockContextMenu === true) { m.element.addEventListener("contextmenu", preventDefault, false); }
m.active = true;
m.updateBounds();
}
m.remove = function () {
if (m.element !== U) {
m.mouseEvents.forEach(n => { m.element.removeEventListener(n, mouseMove); } );
if (m.contextMenuBlocked === true) { m.element.removeEventListener("contextmenu", preventDefault);}
m.element = m.callbacks = m.contextMenuBlocked = U;
m.active = false;
}
}
return mouse;
})();
/** SimpleFullCanvasMouse.js end **/
function display(){
ctx.setTransform(1,0,0,1,0,0); // reset transform
ctx.globalAlpha = 1; // reset alpha
ctx.clearRect(0,0,w,h);
if(webGL !== undefined){
webGLRender();
}
}
function update(timer){ // Main update loop
globalTime = timer;
display(); // call demo code
requestAnimationFrame(update);
}
// END of boilerplate stuff.
/* ***************************************************************************************************
The following functions are helpers for Shader variables. Rather than having to type all the mumbo
jumbo to locate shader variable and then store the location ID getVariables and getLocations does
it for you. uniform and attribute variable that are prefixed with # are can used via the gl.locs.name
(no space between # and variable type #attribute is good # attribute is bad)
For example
#uniform vec3 myVec; // the shader source code
Is located and given the name myVec in gl.locs and can be set in javascript
gl.uniform3f(gl.locs.myVec, 0.3, 0.5, 0.8); //
Please not that this makes shaders source code none standard and will not complie as is without these
functions . Just remove the #
*************************************************************************************************** */
const VAR_TYPES = ["attribute","uniform"];
const VAR_LOCATE_FUNC = {attribute : "getAttribLocation", uniform : "getUniformLocation"}
// get # delimited variables from shader source
function getVariables(script,types){
VAR_TYPES.forEach(f => {
if(types.items === undefined){ types.items = []; }
script = script.replace(new RegExp("#" + f+".+;","g"), str => {
var data = str.replace(/ /g," ").split(" ");
types.items.push({use : f , type : data[1] , name : data[2].replace(";","")});
return str.substr(1);
})
})
return script;
}
// get location IDs for shader variables
var getLocations = function(gl,shaders){
var locs = {};
shaders.variables.items.forEach(v => { locs[v.name] = gl[VAR_LOCATE_FUNC[v.use]](shaders.program, v.name); });
return locs;
}
/* end of var heplers ***************************************************************************** */
// creates vertex and fragment shaders
function createProgramFromScripts( gl, ids) {
var shaders = [];
var variables = {};
for (var i = 0; i < ids.length; i += 1) {
var script = shadersSource[ids[i]];
if (script !== undefined) {
var shader = gl.createShader(gl[script.type]);
var source = getVariables(script.source,variables)
gl.shaderSource(shader, source);
gl.compileShader(shader);
shaders.push(shader);
}else{
throw new ReferenceError("*** Error: unknown script ID : " + ids[i]);
}
}
var program = gl.createProgram();
shaders.forEach((shader) => { gl.attachShader(program, shader); });
gl.linkProgram(program);
gl.locs = getLocations(gl,{ program : program,variables : variables});
return program;
}
// setup simple 2D webGL image processor
var webGL;
function startWebGL(image) {
webGL = document.createElement("canvas");
webGL.width = image.width;
webGL.height = image.height;
var gl = webGL.gl = webGL.getContext("webgl");
var program = createProgramFromScripts(gl, ["VertexShader", "FragmentShader"]);
gl.useProgram(program);
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
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);
gl.enableVertexAttribArray(gl.locs.texCoord);
gl.vertexAttribPointer(gl.locs.texCoord, 2, gl.FLOAT, false, 0, 0);
gl.bindTexture(gl.TEXTURE_2D, gl.createTexture());
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
gl.uniform2f(gl.locs.resolution, webGL.width, webGL.height);
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.enableVertexAttribArray(gl.locs.position);
gl.vertexAttribPointer(gl.locs.position, 2, gl.FLOAT, false, 0, 0);
setRectangle(gl, 0, 0, image.width, image.height);
}
function setRectangle(gl, x, y, width, height) { // set draw rectangle
var x1 = x + width;
var y1 = y + height;
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ x, y, x1, y, x, y1, x, y1, x1, y, x1, y1]), gl.STATIC_DRAW);
}
var shadersSource = {
VertexShader : {
type : "VERTEX_SHADER",
source : `
// the # is a higher level directive to indicate that the variable needs to
// be loacted as value set or read
#attribute vec2 position;
#attribute vec2 texCoord;
#uniform vec2 resolution;
varying vec2 u_texCoord; // varying means this is moved to the frag shader
float aspect = resolution.x/resolution.y;
varying float aspect1;
void main() {
vec2 zeroToOne = position / resolution;
vec2 zeroToTwo = zeroToOne * 2.0;
vec2 clipSpace = zeroToTwo - 1.0;
gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
u_texCoord = vec2(texCoord.x ,texCoord.y / aspect);
aspect1 = aspect;
}`
},
FragmentShader : {
type : "FRAGMENT_SHADER",
source : `
// the # is a higher level directive to indicate that the variable needs to
// be loacted as value set or read
precision mediump float;
#uniform sampler2D u_image;
#uniform vec4 backDark; // the background dark colour
#uniform vec4 backLight; // backgroun light colour
#uniform vec4 ringCol; // rings colour
#uniform vec2 lightLoc; // location of point from which to project second ring
#uniform vec2 mouse; // location of big ring
varying float aspect1;
varying vec2 u_texCoord; // texture coord for all mapping and comes from the
// vertext shader. If you change the name here
// change it in the vert shader
float dist; // used for background gradient
vec4 pixelCol; // to hold the final pixel colour
vec2 gradCenter = vec2(0.5,0.25); // location of background gradient center
vec2 secondRing = lightLoc+ (mouse - lightLoc) * (1.2 + distance(mouse,lightLoc));
void main() {
pixelCol = texture2D(u_image, vec2(u_texCoord.x,u_texCoord.y * aspect1));
//pixelCol = texture2D(u_image, vec2(u_texCoord.x,u.texCoord.y );
// get distance from center of background gradient
dist = distance(gradCenter,u_texCoord) / 0.707;
// use dist to caculate the background gradient
pixelCol += (backDark - backLight) * dist + backLight;
// add the big ring colour to the background. mouse is the center of big ring
pixelCol += clamp((1.0-distance(mouse,u_texCoord)) * 345.0 - 270.5 ,0.0,1.0) * ringCol;
// add the second rign colour to the background colour. secondRing is location of second ring
pixelCol += clamp((1.0-distance(secondRing,u_texCoord)) * 29.0 - 27. ,0.0,1.0) * ringCol;
gl_FragColor = pixelCol; // set the fragment to the colour caculated
}`
}
}
var firstRun = true;
function webGLRender(){
var gl = webGL.gl;
if(firstRun ){
firstRun = false;
gl.uniform4f(gl.locs.backDark, 0,0,0,1)
gl.uniform4f(gl.locs.backLight, 0.3,0.5,0.8,1)
gl.uniform4f(gl.locs.ringCol, 0.1,0.1,0.38,0.41)
gl.uniform2f(gl.locs.lightLoc, 0.5,0.0);
}
gl.uniform2f(gl.locs.mouse, mouse.x / w,mouse.y / h);
gl.drawArrays(gl.TRIANGLES, 0, 6);
ctx.drawImage(webGL,0,0, canvas.width, canvas.height);
}
function createImageAndStartWebGL(){
var image = document.createElement("canvas");
image.width = canvas.width;
image.height = canvas.height;
image.ctx = image.getContext("2d");
image.ctx.fillRect(0,0,canvas.width,canvas.height);
image.ctx.font = "48px arial";
image.ctx.textAlign = "center";
image.ctx.fillStyle = "white";
image.ctx.fillText("WebGL & Canvas 2D demo",canvas.width/2,48);
image.ctx.font = "16px arial";
image.ctx.fillText("WebGL fragment shader processing 2D canvas image, then render back to 2D canvas.",canvas.width/2,66);
firstRun = true;
startWebGL(image);
}
// Add the setup to the debounced resize
onresize = createImageAndStartWebGL;
// start it all happening
resizeCanvas();
mouse.start(canvas,true);
window.addEventListener("resize",resizeCanvas);
requestAnimationFrame(update);