started shader fun post
jahnertz
parent
0f5bfec3ff
commit
aabe051aff
|
|
@ -0,0 +1,50 @@
|
||||||
|
// STEP 1: Prepare the canvas and get WebGL context
|
||||||
|
var vertShaderSource = document.getElementById("vertex-shader").text;
|
||||||
|
var fragShaderSource = document.getElementById("fragment-shader").text;
|
||||||
|
var canvas = document.getElementById('shader-canvas');
|
||||||
|
var gl = canvas.getContext('webgl', {
|
||||||
|
antialias: false,
|
||||||
|
depth: false
|
||||||
|
});
|
||||||
|
// STEP 2: define geometry and store it in buffer objects
|
||||||
|
var verticies = [-1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0];
|
||||||
|
var vertex_buffer = gl.createBuffer();
|
||||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
|
||||||
|
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verticies), gl.STATIC_DRAW);
|
||||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, null)
|
||||||
|
// STEP 3: Create and compile shader programs
|
||||||
|
// Vert shader:
|
||||||
|
//var vertCode =
|
||||||
|
// 'attribute vec2 coordinates;' +
|
||||||
|
// 'void main(void) {' +
|
||||||
|
// ' gl_Position = vec4(coordinates, 0.0, 1.0);' +
|
||||||
|
// '}';
|
||||||
|
var vertCode = vertShaderSource;
|
||||||
|
var vertShader = gl.createShader(gl.VERTEX_SHADER);
|
||||||
|
gl.shaderSource(vertShader, vertCode);
|
||||||
|
gl.compileShader(vertShader);
|
||||||
|
// Frag shader:
|
||||||
|
// var fragCode = 'void main(void) {' +
|
||||||
|
// 'gl_FragColor = vec4(0.0, 0.3, 0.5, 1.0);' +
|
||||||
|
// '}';
|
||||||
|
var fragCode = fragShaderSource;
|
||||||
|
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
|
||||||
|
gl.shaderSource(fragShader, fragCode);
|
||||||
|
gl.compileShader(fragShader);
|
||||||
|
// combine shaders:
|
||||||
|
var shaderProgram = gl.createProgram();
|
||||||
|
gl.attachShader(shaderProgram, vertShader);
|
||||||
|
gl.attachShader(shaderProgram, fragShader);
|
||||||
|
gl.linkProgram(shaderProgram);
|
||||||
|
gl.useProgram(shaderProgram);
|
||||||
|
// STEP 4: Associate the shader program to buffer objects
|
||||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
|
||||||
|
var coord = gl.getAttribLocation(shaderProgram, "coordinates");
|
||||||
|
gl.vertexAttribPointer(coord, 2, gl.FLOAT, false, 0, 0);
|
||||||
|
gl.enableVertexAttribArray(coord);
|
||||||
|
// STEP 5: Draw the object:
|
||||||
|
gl.clearColor(0.0, 0.0, 0.0, 1.0);
|
||||||
|
gl.enable(gl.DEPTH_TEST);
|
||||||
|
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||||
|
gl.viewport(0, 0, canvas.width, canvas.height);
|
||||||
|
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
|
||||||
|
|
@ -0,0 +1,760 @@
|
||||||
|
/*
|
||||||
|
* Copyright 2012, Gregg Tavares.
|
||||||
|
* All rights reserved.
|
||||||
|
*
|
||||||
|
* Redistribution and use in source and binary forms, with or without
|
||||||
|
* modification, are permitted provided that the following conditions are
|
||||||
|
* met:
|
||||||
|
*
|
||||||
|
* * Redistributions of source code must retain the above copyright
|
||||||
|
* notice, this list of conditions and the following disclaimer.
|
||||||
|
* * Redistributions in binary form must reproduce the above
|
||||||
|
* copyright notice, this list of conditions and the following disclaimer
|
||||||
|
* in the documentation and/or other materials provided with the
|
||||||
|
* distribution.
|
||||||
|
* * Neither the name of Gregg Tavares. nor the names of his
|
||||||
|
* contributors may be used to endorse or promote products derived from
|
||||||
|
* this software without specific prior written permission.
|
||||||
|
*
|
||||||
|
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
|
||||||
|
* "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
|
||||||
|
* LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
|
||||||
|
* A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
|
||||||
|
* OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
|
||||||
|
* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
|
||||||
|
* LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
|
||||||
|
* DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
|
||||||
|
* THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||||
|
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
||||||
|
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||||
|
*/
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
/** @module webgl-utils */
|
||||||
|
// These funcitions are meant solely to help unclutter the tutorials.
|
||||||
|
// They are not meant as production type functions.
|
||||||
|
|
||||||
|
//(function() {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Wrapped logging function.
|
||||||
|
* @param {string} msg The message to log.
|
||||||
|
*/
|
||||||
|
var log = function(msg) {
|
||||||
|
if (window.console && window.console.log) {
|
||||||
|
window.console.log(msg);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Wrapped logging function.
|
||||||
|
* @param {string} msg The message to log.
|
||||||
|
*/
|
||||||
|
var error = function(msg) {
|
||||||
|
if (window.console) {
|
||||||
|
if (window.console.error) {
|
||||||
|
window.console.error(msg);
|
||||||
|
}
|
||||||
|
else if (window.console.log) {
|
||||||
|
window.console.log(msg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Turn off all logging.
|
||||||
|
*/
|
||||||
|
var loggingOff = function() {
|
||||||
|
log = function() {};
|
||||||
|
error = function() {};
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if the page is embedded.
|
||||||
|
* @return {boolean} True of we are in an iframe
|
||||||
|
*/
|
||||||
|
var isInIFrame = function() {
|
||||||
|
return window != window.top;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Converts a WebGL enum to a string
|
||||||
|
* @param {WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
||||||
|
* @param {number} value The enum value.
|
||||||
|
* @return {string} The enum as a string.
|
||||||
|
*/
|
||||||
|
var glEnumToString = function(gl, value) {
|
||||||
|
for (var p in gl) {
|
||||||
|
if (gl[p] == value) {
|
||||||
|
return p;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return "0x" + value.toString(16);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates the HTLM for a failure message
|
||||||
|
* @param {string} canvasContainerId id of container of th
|
||||||
|
* canvas.
|
||||||
|
* @return {string} The html.
|
||||||
|
*/
|
||||||
|
var makeFailHTML = function(msg) {
|
||||||
|
return '' +
|
||||||
|
'<table style="background-color: #8CE; width: 100%; height: 100%;"><tr>' +
|
||||||
|
'<td align="center">' +
|
||||||
|
'<div style="display: table-cell; vertical-align: middle;">' +
|
||||||
|
'<div style="">' + msg + '</div>' +
|
||||||
|
'</div>' +
|
||||||
|
'</td></tr></table>';
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Mesasge for getting a webgl browser
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
|
var GET_A_WEBGL_BROWSER = '' +
|
||||||
|
'This page requires a browser that supports WebGL.<br/>' +
|
||||||
|
'<a href="http://get.webgl.org">Click here to upgrade your browser.</a>';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Mesasge for need better hardware
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
|
var OTHER_PROBLEM = '' +
|
||||||
|
"It doesn't appear your computer can support WebGL.<br/>" +
|
||||||
|
'<a href="http://get.webgl.org/troubleshooting/">Click here for more information.</a>';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates a webgl context. If creation fails it will
|
||||||
|
* change the contents of the container of the <canvas>
|
||||||
|
* tag to an error message with the correct links for WebGL.
|
||||||
|
* @param {HTMLCanvasElement} canvas. The canvas element to
|
||||||
|
* create a context from.
|
||||||
|
* @param {WebGLContextCreationAttirbutes} opt_attribs Any
|
||||||
|
* creation attributes you want to pass in.
|
||||||
|
* @return {WebGLRenderingContext} The created context.
|
||||||
|
*/
|
||||||
|
var setupWebGL = function(canvas, opt_attribs) {
|
||||||
|
function showLink(str) {
|
||||||
|
var container = canvas.parentNode;
|
||||||
|
if (container) {
|
||||||
|
container.innerHTML = makeFailHTML(str);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!window.WebGLRenderingContext) {
|
||||||
|
showLink(GET_A_WEBGL_BROWSER);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
var context = create3DContext(canvas, opt_attribs);
|
||||||
|
if (!context) {
|
||||||
|
showLink(OTHER_PROBLEM);
|
||||||
|
}
|
||||||
|
return context;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates a webgl context.
|
||||||
|
* @param {HTMLCanvasElement} canvas The canvas tag to get
|
||||||
|
* context from. If one is not passed in one will be
|
||||||
|
* created.
|
||||||
|
* @return {WebGLRenderingContext} The created context.
|
||||||
|
*/
|
||||||
|
var create3DContext = function(canvas, opt_attribs) {
|
||||||
|
var names = ["webgl", "experimental-webgl"];
|
||||||
|
var context = null;
|
||||||
|
for (var ii = 0; ii < names.length; ++ii) {
|
||||||
|
try {
|
||||||
|
context = canvas.getContext(names[ii], opt_attribs);
|
||||||
|
} catch(e) {}
|
||||||
|
if (context) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return context;
|
||||||
|
}
|
||||||
|
|
||||||
|
var updateCSSIfInIFrame = function() {
|
||||||
|
if (isInIFrame()) {
|
||||||
|
document.body.className = "iframe";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gets a WebGL context.
|
||||||
|
* makes its backing store the size it is displayed.
|
||||||
|
*/
|
||||||
|
var getWebGLContext = function(canvas, opt_attribs, opt_options) {
|
||||||
|
var options = opt_options || {}
|
||||||
|
|
||||||
|
if (isInIFrame()) {
|
||||||
|
updateCSSIfInIFrame();
|
||||||
|
|
||||||
|
// make the canvas backing store the size it's displayed.
|
||||||
|
if (!options.dontResize) {
|
||||||
|
var width = canvas.clientWidth;
|
||||||
|
var height = canvas.clientHeight;
|
||||||
|
canvas.width = width;
|
||||||
|
canvas.height = height;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
var title = document.title;
|
||||||
|
var h1 = document.createElement("h1");
|
||||||
|
h1.innerText = title;
|
||||||
|
document.body.insertBefore(h1, document.body.children[0]);
|
||||||
|
}
|
||||||
|
|
||||||
|
var gl = setupWebGL(canvas, opt_attribs);
|
||||||
|
return gl;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Loads a shader.
|
||||||
|
* @param {WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
||||||
|
* @param {string} shaderSource The shader source.
|
||||||
|
* @param {number} shaderType The type of shader.
|
||||||
|
* @param {function(string): void) opt_errorCallback callback for errors.
|
||||||
|
* @return {WebGLShader} The created shader.
|
||||||
|
*/
|
||||||
|
var loadShader = function(gl, shaderSource, shaderType, opt_errorCallback) {
|
||||||
|
var errFn = opt_errorCallback || error;
|
||||||
|
// Create the shader object
|
||||||
|
var shader = gl.createShader(shaderType);
|
||||||
|
|
||||||
|
// Load the shader source
|
||||||
|
gl.shaderSource(shader, shaderSource);
|
||||||
|
|
||||||
|
// Compile the shader
|
||||||
|
gl.compileShader(shader);
|
||||||
|
|
||||||
|
// Check the compile status
|
||||||
|
var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
|
||||||
|
if (!compiled) {
|
||||||
|
// Something went wrong during compilation; get the error
|
||||||
|
var lastError = gl.getShaderInfoLog(shader);
|
||||||
|
errFn("*** Error compiling shader '" + shader + "':" + lastError);
|
||||||
|
gl.deleteShader(shader);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return shader;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates a program, attaches shaders, binds attrib locations, links the
|
||||||
|
* program and calls useProgram.
|
||||||
|
* @param {WebGLShader[]} shaders The shaders to attach
|
||||||
|
* @param {string[]?} opt_attribs The attribs names.
|
||||||
|
* @param {number[]?} opt_locations The locations for the
|
||||||
|
* attribs.
|
||||||
|
* @param {function(string): void) opt_errorCallback callback for errors.
|
||||||
|
*/
|
||||||
|
var loadProgram = function(
|
||||||
|
gl, shaders, opt_attribs, opt_locations, opt_errorCallback) {
|
||||||
|
var errFn = opt_errorCallback || error;
|
||||||
|
var program = gl.createProgram();
|
||||||
|
for (var ii = 0; ii < shaders.length; ++ii) {
|
||||||
|
gl.attachShader(program, shaders[ii]);
|
||||||
|
}
|
||||||
|
if (opt_attribs) {
|
||||||
|
for (var ii = 0; ii < opt_attribs.length; ++ii) {
|
||||||
|
gl.bindAttribLocation(
|
||||||
|
program,
|
||||||
|
opt_locations ? opt_locations[ii] : ii,
|
||||||
|
opt_attribs[ii]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
gl.linkProgram(program);
|
||||||
|
|
||||||
|
// Check the link status
|
||||||
|
var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
|
||||||
|
if (!linked) {
|
||||||
|
// something went wrong with the link
|
||||||
|
var lastError = gl.getProgramInfoLog (program);
|
||||||
|
errFn("Error in program linking:" + lastError);
|
||||||
|
|
||||||
|
gl.deleteProgram(program);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return program;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Loads a shader from a script tag.
|
||||||
|
* @param {WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
||||||
|
* @param {string} scriptId The id of the script tag.
|
||||||
|
* @param {number} opt_shaderType The type of shader. If not passed in it will
|
||||||
|
* be derived from the type of the script tag.
|
||||||
|
* @param {function(string): void) opt_errorCallback callback for errors.
|
||||||
|
* @return {WebGLShader} The created shader.
|
||||||
|
*/
|
||||||
|
var createShaderFromScript = function(
|
||||||
|
gl, scriptId, opt_shaderType, opt_errorCallback) {
|
||||||
|
var shaderSource = "";
|
||||||
|
var shaderType;
|
||||||
|
var shaderScript = document.getElementById(scriptId);
|
||||||
|
if (!shaderScript) {
|
||||||
|
throw("*** Error: unknown script element" + scriptId);
|
||||||
|
}
|
||||||
|
shaderSource = shaderScript.text;
|
||||||
|
|
||||||
|
if (!opt_shaderType) {
|
||||||
|
if (shaderScript.type == "x-shader/x-vertex") {
|
||||||
|
shaderType = gl.VERTEX_SHADER;
|
||||||
|
} else if (shaderScript.type == "x-shader/x-fragment") {
|
||||||
|
shaderType = gl.FRAGMENT_SHADER;
|
||||||
|
} else if (shaderType != gl.VERTEX_SHADER && shaderType != gl.FRAGMENT_SHADER) {
|
||||||
|
throw("*** Error: unknown shader type");
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return loadShader(
|
||||||
|
gl, shaderSource, opt_shaderType ? opt_shaderType : shaderType,
|
||||||
|
opt_errorCallback);
|
||||||
|
};
|
||||||
|
|
||||||
|
var defaultShaderType = [
|
||||||
|
"VERTEX_SHADER",
|
||||||
|
"FRAGMENT_SHADER"
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates a program from 2 script tags.
|
||||||
|
*
|
||||||
|
* @param {WebGLRenderingContext} gl The WebGLRenderingContext
|
||||||
|
* to use.
|
||||||
|
* @param {string[]} shaderScriptIds Array of ids of the script
|
||||||
|
* tags for the shaders. The first is assumed to be the
|
||||||
|
* vertex shader, the second the fragment shader.
|
||||||
|
* @param {string[]?} opt_attribs The attribs names.
|
||||||
|
* @param {number[]?} opt_locations The locations for the
|
||||||
|
* attribs.
|
||||||
|
* @param {function(string): void) opt_errorCallback callback for errors.
|
||||||
|
* @return {WebGLProgram} The created program.
|
||||||
|
*/
|
||||||
|
var createProgramFromScripts = function(
|
||||||
|
gl, shaderScriptIds, opt_attribs, opt_locations, opt_errorCallback) {
|
||||||
|
var shaders = [];
|
||||||
|
for (var ii = 0; ii < shaderScriptIds.length; ++ii) {
|
||||||
|
shaders.push(createShaderFromScript(
|
||||||
|
gl, shaderScriptIds[ii], gl[defaultShaderType[ii]], opt_errorCallback));
|
||||||
|
}
|
||||||
|
return loadProgram(gl, shaders, opt_attribs, opt_locations, opt_errorCallback);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates a program from 2 sources.
|
||||||
|
*
|
||||||
|
* @param {WebGLRenderingContext} gl The WebGLRenderingContext
|
||||||
|
* to use.
|
||||||
|
* @param {string[]} shaderSourcess Array of sources for the
|
||||||
|
* shaders. The first is assumed to be the vertex shader,
|
||||||
|
* the second the fragment shader.
|
||||||
|
* @param {string[]?} opt_attribs The attribs names.
|
||||||
|
* @param {number[]?} opt_locations The locations for the
|
||||||
|
* attribs.
|
||||||
|
* @param {function(string): void) opt_errorCallback callback for errors.
|
||||||
|
* @return {WebGLProgram} The created program.
|
||||||
|
*/
|
||||||
|
var createProgramFromSources = function(
|
||||||
|
gl, shaderSources, opt_attribs, opt_locations, opt_errorCallback) {
|
||||||
|
var shaders = [];
|
||||||
|
for (var ii = 0; ii < shaderSources.length; ++ii) {
|
||||||
|
shaders.push(loadShader(
|
||||||
|
gl, shaderSources[ii], gl[defaultShaderType[ii]], opt_errorCallback));
|
||||||
|
}
|
||||||
|
return loadProgram(gl, shaders, opt_attribs, opt_locations, opt_errorCallback);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the corresponding bind point for a given sampler type
|
||||||
|
*/
|
||||||
|
var getBindPointForSamplerType = function(gl, type) {
|
||||||
|
if (type == gl.SAMPLER_2D) return gl.TEXTURE_2D;
|
||||||
|
if (type == gl.SAMPLER_CUBE) return gl.TEXTURE_CUBE_MAP;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {Object.<string, function>} Setters
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates setter functions for all uniforms of a shader
|
||||||
|
* program.
|
||||||
|
*
|
||||||
|
* @see setUniforms for example
|
||||||
|
*
|
||||||
|
* @param {WebGLProgram} program the program to create setters
|
||||||
|
* for.
|
||||||
|
* @returns {Setters} an object with a setter for each uniform
|
||||||
|
* by name.
|
||||||
|
*/
|
||||||
|
var createUniformSetters = function(gl, program) {
|
||||||
|
var textureUnit = 0;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates a setter for a uniform of the given program with it's
|
||||||
|
* location embedded in the setter.
|
||||||
|
* @param {WebGLProgram} program
|
||||||
|
* @param {WebGLUniformInfo} uniformInfo
|
||||||
|
* @returns {function} the created setter.
|
||||||
|
*/
|
||||||
|
var createUniformSetter = function(program, uniformInfo) {
|
||||||
|
var location = gl.getUniformLocation(program, uniformInfo.name);
|
||||||
|
var type = uniformInfo.type;
|
||||||
|
// Check if this uniform is an array
|
||||||
|
var isArray = (uniformInfo.size > 1 && uniformInfo.name.substr(-3) == "[0]");
|
||||||
|
if (type == gl.FLOAT && isArray)
|
||||||
|
return function(v) { gl.uniform1fv(location, v); };
|
||||||
|
if (type == gl.FLOAT)
|
||||||
|
return function(v) { gl.uniform1f(location, v); };
|
||||||
|
if (type == gl.FLOAT_VEC2)
|
||||||
|
return function(v) { gl.uniform2fv(location, v); };
|
||||||
|
if (type == gl.FLOAT_VEC3)
|
||||||
|
return function(v) { gl.uniform3fv(location, v); };
|
||||||
|
if (type == gl.FLOAT_VEC4)
|
||||||
|
return function(v) { gl.uniform4fv(location, v); };
|
||||||
|
if (type == gl.INT && isArray)
|
||||||
|
return function(v) { gl.uniform1iv(location, v); };
|
||||||
|
if (type == gl.INT)
|
||||||
|
return function(v) { gl.uniform1i(location, v); };
|
||||||
|
if (type == gl.INT_VEC2)
|
||||||
|
return function(v) { gl.uniform2iv(location, v); };
|
||||||
|
if (type == gl.INT_VEC3)
|
||||||
|
return function(v) { gl.uniform3iv(location, v); };
|
||||||
|
if (type == gl.INT_VEC4)
|
||||||
|
return function(v) { gl.uniform4iv(location, v); };
|
||||||
|
if (type == gl.BOOL)
|
||||||
|
return function(v) { gl.uniform1iv(location, v); };
|
||||||
|
if (type == gl.BOOL_VEC2)
|
||||||
|
return function(v) { gl.uniform2iv(location, v); };
|
||||||
|
if (type == gl.BOOL_VEC3)
|
||||||
|
return function(v) { gl.uniform3iv(location, v); };
|
||||||
|
if (type == gl.BOOL_VEC4)
|
||||||
|
return function(v) { gl.uniform4iv(location, v); };
|
||||||
|
if (type == gl.FLOAT_MAT2)
|
||||||
|
return function(v) { gl.uniformMatrix2fv(location, false, v); };
|
||||||
|
if (type == gl.FLOAT_MAT3)
|
||||||
|
return function(v) { gl.uniformMatrix3fv(location, false, v); };
|
||||||
|
if (type == gl.FLOAT_MAT4)
|
||||||
|
return function(v) { gl.uniformMatrix4fv(location, false, v); };
|
||||||
|
if ((type == gl.SAMPLER_2D || type == gl.SAMPLER_CUBE) && isArray) {
|
||||||
|
var units = [];
|
||||||
|
for (var ii = 0; ii < info.size; ++ii) {
|
||||||
|
units.push(textureUnit++);
|
||||||
|
}
|
||||||
|
return function(bindPoint, units) {
|
||||||
|
return function(textures) {
|
||||||
|
gl.uniform1iv(location, units);
|
||||||
|
textures.forEach(function(texture, index) {
|
||||||
|
gl.activeTexture(gl.TEXTURE0 + units[index]);
|
||||||
|
gl.bindTexture(bindPoint, tetxure);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}(getBindPointForSamplerType(gl, type), units);
|
||||||
|
}
|
||||||
|
if (type == gl.SAMPLER_2D || type == gl.SAMPLER_CUBE)
|
||||||
|
return function(bindPoint, unit) {
|
||||||
|
return function(texture) {
|
||||||
|
gl.uniform1i(location, unit);
|
||||||
|
gl.activeTexture(gl.TEXTURE0 + unit);
|
||||||
|
gl.bindTexture(bindPoint, texture);
|
||||||
|
};
|
||||||
|
}(getBindPointForSamplerType(gl, type), textureUnit++);
|
||||||
|
throw ("unknown type: 0x" + type.toString(16)); // we should never get here.
|
||||||
|
};
|
||||||
|
|
||||||
|
var uniformSetters = { };
|
||||||
|
var numUniforms = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
|
||||||
|
|
||||||
|
for (var ii = 0; ii < numUniforms; ++ii) {
|
||||||
|
var uniformInfo = gl.getActiveUniform(program, ii);
|
||||||
|
if (!uniformInfo) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
var name = uniformInfo.name;
|
||||||
|
// remove the array suffix.
|
||||||
|
if (name.substr(-3) == "[0]") {
|
||||||
|
name = name.substr(0, name.length - 3);
|
||||||
|
}
|
||||||
|
var setter = createUniformSetter(program, uniformInfo);
|
||||||
|
uniformSetters[name] = setter;
|
||||||
|
}
|
||||||
|
return uniformSetters;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set uniforms and binds related textures.
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
*
|
||||||
|
* var program = createProgramFromScripts(
|
||||||
|
* gl, ["some-vs", "some-fs");
|
||||||
|
*
|
||||||
|
* var uniformSetters = createUniformSetters(program);
|
||||||
|
*
|
||||||
|
* var tex1 = gl.createTexture();
|
||||||
|
* var tex2 = gl.createTexture();
|
||||||
|
*
|
||||||
|
* ... assume we setup the textures with data ...
|
||||||
|
*
|
||||||
|
* var uniforms = {
|
||||||
|
* u_someSampler: tex1,
|
||||||
|
* u_someOtherSampler: tex2,
|
||||||
|
* u_someColor: [1,0,0,1],
|
||||||
|
* u_somePosition: [0,1,1],
|
||||||
|
* u_someMatrix: [
|
||||||
|
* 1,0,0,0,
|
||||||
|
* 0,1,0,0,
|
||||||
|
* 0,0,1,0,
|
||||||
|
* 0,0,0,0,
|
||||||
|
* ],
|
||||||
|
* }
|
||||||
|
*
|
||||||
|
* gl.useProgram(program);
|
||||||
|
*
|
||||||
|
* This will automatically bind the textures AND set the
|
||||||
|
* uniforms.
|
||||||
|
*
|
||||||
|
* setUniforms(uniformSetters, uniforms);
|
||||||
|
*
|
||||||
|
* @param {Setters} setters the setters returned from
|
||||||
|
* createUniformSettersForProgram
|
||||||
|
* @param {Object.<string, value>} an object with values for the
|
||||||
|
* uniforms.
|
||||||
|
*/
|
||||||
|
var setUniforms = function(setters, values) {
|
||||||
|
Object.keys(values).forEach(function(name) {
|
||||||
|
var setter = setters[name];
|
||||||
|
if (setter) {
|
||||||
|
setter(values[name]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates setter functions for all attributes of a shader
|
||||||
|
* program
|
||||||
|
*
|
||||||
|
* @see setAttributes for example
|
||||||
|
*
|
||||||
|
* @param {WebGLProgram} program the program to create setters
|
||||||
|
* for.
|
||||||
|
* @returns {Setters} an object with a setter for each uniform
|
||||||
|
* by name.
|
||||||
|
*/
|
||||||
|
var createAttributeSetters = function(gl, program) {
|
||||||
|
var attribSetters = {
|
||||||
|
};
|
||||||
|
|
||||||
|
function createAttribSetter(index) {
|
||||||
|
return function(b) {
|
||||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, b.buffer);
|
||||||
|
gl.enableVertexAttribArray(index);
|
||||||
|
gl.vertexAttribPointer(
|
||||||
|
index, b.numComponents || b.size, b.type || gl.FLOAT, b.normalize || false, b.stride || 0, b.offset || 0);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
var numAttribs = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);
|
||||||
|
for (var ii = 0; ii < numAttribs; ++ii) {
|
||||||
|
var attribInfo = gl.getActiveAttrib(program, ii);
|
||||||
|
if (!attribInfo) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
var index = gl.getAttribLocation(program, attribInfo.name);
|
||||||
|
attribSetters[attribInfo.name] = createAttribSetter(index);
|
||||||
|
}
|
||||||
|
|
||||||
|
return attribSetters;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sets attributes and binds buffers.
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
*
|
||||||
|
* var program = createProgramFromScripts(
|
||||||
|
* gl, ["some-vs", "some-fs");
|
||||||
|
*
|
||||||
|
* var attribSetters = createAttributeSetters(program);
|
||||||
|
*
|
||||||
|
* var positionBuffer = gl.createBuffer();
|
||||||
|
* var texcoordBuffer = gl.createBuffer();
|
||||||
|
*
|
||||||
|
* var attribs = {
|
||||||
|
* a_position: {buffer: positionBuffer, numComponents: 3},
|
||||||
|
* a_texcoord: {buffer: texcoordBuffer, numComponents: 2},
|
||||||
|
* };
|
||||||
|
*
|
||||||
|
* gl.useProgram(program);
|
||||||
|
*
|
||||||
|
* This will automatically bind the buffers AND set the
|
||||||
|
* attributes.
|
||||||
|
*
|
||||||
|
* setAttributes(attribSetters, attribs);
|
||||||
|
*
|
||||||
|
* Properties of attribs. For each attrib you can add
|
||||||
|
* properties:
|
||||||
|
*
|
||||||
|
* type: the type of data in the buffer. Default = gl.FLOAT
|
||||||
|
* normalize: whether or not to normalize the data. Default =
|
||||||
|
* false
|
||||||
|
* stride: the stride. Default = 0
|
||||||
|
* offset: offset into the buffer. Default = 0
|
||||||
|
*
|
||||||
|
* For example if you had 3 value float positions, 2 value
|
||||||
|
* float texcoord and 4 value uint8 colors you'd setup your
|
||||||
|
* attribs like this
|
||||||
|
*
|
||||||
|
* var attribs = {
|
||||||
|
* a_position: {buffer: positionBuffer, numComponents: 3},
|
||||||
|
* a_texcoord: {buffer: texcoordBuffer, numComponents: 2},
|
||||||
|
* a_color: {
|
||||||
|
* buffer: colorBuffer,
|
||||||
|
* numComponents: 4,
|
||||||
|
* type: gl.UNSIGNED_BYTE,
|
||||||
|
* normalize: true,
|
||||||
|
* },
|
||||||
|
* };
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
var setAttributes = function(setters, buffers) {
|
||||||
|
Object.keys(buffers).forEach(function(name) {
|
||||||
|
var setter = setters[name];
|
||||||
|
if (setter) {
|
||||||
|
setter(buffers[name]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add your prefix here.
|
||||||
|
var browserPrefixes = [
|
||||||
|
"",
|
||||||
|
"MOZ_",
|
||||||
|
"OP_",
|
||||||
|
"WEBKIT_"
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Given an extension name like WEBGL_compressed_texture_s3tc
|
||||||
|
* returns the supported version extension, like
|
||||||
|
* WEBKIT_WEBGL_compressed_teture_s3tc
|
||||||
|
* @param {string} name Name of extension to look for
|
||||||
|
* @return {WebGLExtension} The extension or undefined if not
|
||||||
|
* found.
|
||||||
|
*/
|
||||||
|
var getExtensionWithKnownPrefixes = function(gl, name) {
|
||||||
|
for (var ii = 0; ii < browserPrefixes.length; ++ii) {
|
||||||
|
var prefixedName = browserPrefixes[ii] + name;
|
||||||
|
var ext = gl.getExtension(prefixedName);
|
||||||
|
if (ext) {
|
||||||
|
return ext;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Resize a canvas to match the size it's displayed.
|
||||||
|
* @param {HTMLCanvasElement} canvas The canvas to resize.
|
||||||
|
* @param {boolean} true if the canvas was resized.
|
||||||
|
*/
|
||||||
|
var resizeCanvasToDisplaySize = function(canvas) {
|
||||||
|
var width = canvas.clientWidth;
|
||||||
|
var height = canvas.clientHeight;
|
||||||
|
if (canvas.width != width ||
|
||||||
|
canvas.height != height) {
|
||||||
|
canvas.width = width;
|
||||||
|
canvas.height = height;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* export functions */
|
||||||
|
window.createAttributeSetters = createAttributeSetters;
|
||||||
|
window.createProgram = loadProgram;
|
||||||
|
window.createProgramFromScripts = createProgramFromScripts;
|
||||||
|
window.createProgramFromSources = createProgramFromSources;
|
||||||
|
window.createShaderFromScriptElement = createShaderFromScript;
|
||||||
|
window.createUniformSetters = createUniformSetters;
|
||||||
|
window.getWebGLContext = getWebGLContext;
|
||||||
|
window.updateCSSIfInIFrame = updateCSSIfInIFrame;
|
||||||
|
window.getExtensionWithKnownPrefixes = getExtensionWithKnownPrefixes;
|
||||||
|
window.resizeCanvasToDisplaySize = resizeCanvasToDisplaySize;
|
||||||
|
window.setAttributes = setAttributes;
|
||||||
|
window.setUniforms = setUniforms;
|
||||||
|
window.setupWebGL = setupWebGL;
|
||||||
|
|
||||||
|
// All browsers that support WebGL support requestAnimationFrame
|
||||||
|
window.requestAnimFrame = window.requestAnimationFrame; // just to stay backward compatible.
|
||||||
|
window.cancelRequestAnimFrame = window.cancelAnimationFrame; // just to stay backward compatible.
|
||||||
|
|
||||||
|
//}());
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function onLoad () {
|
||||||
|
var canvas = document.getElementById("canvas");
|
||||||
|
var gl = canvas.getContext("experimental-webgl");
|
||||||
|
|
||||||
|
var vertexShaderNode = createShaderFromScriptElement(gl, "node-vertex-shader");
|
||||||
|
var fragmentShaderNode = createShaderFromScriptElement(gl, "node-fragment-shader");
|
||||||
|
var programNode = createProgram(gl, [vertexShaderNode, fragmentShaderNode]);
|
||||||
|
gl.useProgram(programNode);
|
||||||
|
|
||||||
|
|
||||||
|
var ATTRIBUTES = 5;
|
||||||
|
var j = 0;
|
||||||
|
var data = [];
|
||||||
|
var circle = {x: 50, y: 50, r: 45};
|
||||||
|
|
||||||
|
data[j++] = (circle.x - circle.r);
|
||||||
|
data[j++] = (circle.y - circle.r);
|
||||||
|
data[j++] = circle.x;
|
||||||
|
data[j++] = circle.y;
|
||||||
|
data[j++] = circle.r;
|
||||||
|
|
||||||
|
data[j++] = (circle.x + (1 + Math.sqrt(2)) * circle.r);
|
||||||
|
data[j++] = circle.y - circle.r;
|
||||||
|
data[j++] = circle.x;
|
||||||
|
data[j++] = circle.y;
|
||||||
|
data[j++] = circle.r;
|
||||||
|
|
||||||
|
data[j++] = (circle.x - circle.r);
|
||||||
|
data[j++] = (circle.y + (1 + Math.sqrt(2)) * circle.r);
|
||||||
|
data[j++] = circle.x;
|
||||||
|
data[j++] = circle.y;
|
||||||
|
data[j++] = circle.r;
|
||||||
|
|
||||||
|
var dataBuffer = new Float32Array(data);
|
||||||
|
|
||||||
|
var buffer = gl.createBuffer();
|
||||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
||||||
|
gl.bufferData(
|
||||||
|
gl.ARRAY_BUFFER,
|
||||||
|
dataBuffer,
|
||||||
|
gl.STATIC_DRAW);
|
||||||
|
|
||||||
|
var resolutionLocation = gl.getUniformLocation(programNode, "u_resolution");
|
||||||
|
gl.uniform2f(resolutionLocation, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
var positionLocation = gl.getAttribLocation(programNode, "a_position");
|
||||||
|
var centerLocation = gl.getAttribLocation(programNode, "a_center");
|
||||||
|
var radiusLocation = gl.getAttribLocation(programNode, "a_radius");
|
||||||
|
|
||||||
|
|
||||||
|
gl.enableVertexAttribArray(positionLocation);
|
||||||
|
gl.enableVertexAttribArray(centerLocation);
|
||||||
|
gl.enableVertexAttribArray(radiusLocation);
|
||||||
|
|
||||||
|
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 0);
|
||||||
|
gl.vertexAttribPointer(centerLocation, 2, gl.FLOAT, false, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 8);
|
||||||
|
gl.vertexAttribPointer(radiusLocation, 1, gl.FLOAT, false, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 16);
|
||||||
|
|
||||||
|
gl.drawArrays(gl.TRIANGLES, 0, data.length/ATTRIBUTES);
|
||||||
|
}
|
||||||
|
onLoad();
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
---
|
||||||
|
layout: post-plain
|
||||||
|
title: "Shader fun"
|
||||||
|
date: 2020-12-28
|
||||||
|
categories: design
|
||||||
|
---
|
||||||
|
<canvas id="canvas" width="1080" height="1080" style="border:1px solid white;
|
||||||
|
width:100%;"></canvas>
|
||||||
|
|
||||||
|
<script id="node-vertex-shader" type="x-shader/x-vertex">
|
||||||
|
uniform vec2 u_resolution;
|
||||||
|
attribute vec2 a_position;
|
||||||
|
attribute vec2 a_center;
|
||||||
|
attribute float a_radius;
|
||||||
|
|
||||||
|
varying vec2 center;
|
||||||
|
varying vec2 resolution;
|
||||||
|
varying float radius;
|
||||||
|
|
||||||
|
void main() {
|
||||||
|
vec2 clipspace = a_position / u_resolution * 2.0 - 1.0;
|
||||||
|
gl_Position = vec4(clipspace * vec2(1, -1), 0, 1);
|
||||||
|
|
||||||
|
radius = a_radius;
|
||||||
|
center = a_center;
|
||||||
|
resolution = u_resolution;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script id="node-fragment-shader" type="x-shader/x-fragment">
|
||||||
|
|
||||||
|
precision mediump float;
|
||||||
|
|
||||||
|
varying vec2 center;
|
||||||
|
varying vec2 resolution;
|
||||||
|
varying float radius;
|
||||||
|
|
||||||
|
void main() {
|
||||||
|
vec4 color0 = vec4(0.0, 0.0, 0.0, 0.0);
|
||||||
|
|
||||||
|
float x = gl_FragCoord.x;
|
||||||
|
float y = resolution[1] - gl_FragCoord.y;
|
||||||
|
|
||||||
|
float dx = center[0] - x;
|
||||||
|
float dy = center[1] - y;
|
||||||
|
float distance = sqrt(dx*dx + dy*dy);
|
||||||
|
|
||||||
|
if ( distance < radius )
|
||||||
|
gl_FragColor = vec4(1.0, 0.5, 0.0, 1.0);
|
||||||
|
else
|
||||||
|
gl_FragColor = color0;
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
{% asset shaderCanvas2.js %}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
void main(void) {
|
||||||
|
gl_FragColor = vec4(0.5, 0.3, 0.0, 1.0);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue