Created
September 1, 2016 20:37
-
-
Save chipbell4/4dac801903c92db8f653c874486c1cd8 to your computer and use it in GitHub Desktop.
A bare-bones WebGL starter template, that renders vertices with shaders. Also shows an example uniform usage. Auto-injects on the page if possible.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function() { | |
// Get a context | |
var canvas = document.createElement('canvas'); | |
var gl = null; | |
try { | |
gl = canvas.getContext('webgl'); | |
if(!gl) throw new Error(''); | |
} catch(e) { | |
return false; | |
} | |
canvas.width = 400; | |
canvas.height = 300; | |
document.body.appendChild(canvas); | |
var createShader = function(gl, type, source) { | |
var shader = gl.createShader(type); | |
gl.shaderSource(shader, source); | |
gl.compileShader(shader); | |
var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS); | |
if(success) { | |
return shader; | |
} | |
console.error(gl.getShaderInfoLog(shader)); | |
throw new Error('Shader failed to compile'); | |
}; | |
var createShaderProgram = function(gl, vertexSource, fragmentSource) { | |
var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource); | |
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource); | |
var program = gl.createProgram(); | |
gl.attachShader(program, vertexShader); | |
gl.attachShader(program, fragmentShader); | |
gl.linkProgram(program); | |
var success = gl.getProgramParameter(program, gl.LINK_STATUS); | |
if(success) { | |
return program; | |
} | |
console.error(gl.getProgramInfoLog(program)); | |
throw new Error('Shader program failed to link'); | |
}; | |
// load our shaders | |
var vertexSource = | |
"uniform float theta;" + | |
"attribute vec4 a_position;" + | |
"void main() {" + | |
"float c = cos(theta);" + | |
"float s = sin(theta);" + | |
"mat4 rotate = mat4(vec4(c, s, 0., 0.), vec4(-s, c, 0., 0.), vec4(0., 0., 1., 0.), vec4(0., 0., 0., 1.));" + | |
"gl_Position = rotate * a_position;" + | |
"}"; | |
var fragmentSource = | |
"precision mediump float;" + | |
"void main() { " + | |
"gl_FragColor = vec4(1, 0, 0.5, 1);" + | |
"}"; | |
var program = createShaderProgram(gl, vertexSource, fragmentSource); | |
// load data into a buffer | |
var positionAttributeLocation = gl.getAttribLocation(program, 'a_position'); | |
var positionBuffer = gl.createBuffer(); | |
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); | |
var positions = [ | |
0, 0, 0, | |
0, 0.5, 0, | |
0.7, 0, 0 | |
]; | |
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); | |
// tell the shader to load our data from the buffer we just made | |
gl.enableVertexAttribArray(positionAttributeLocation); | |
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0); // 3-dim floats, don't normalize, stride between points, initial offset | |
// load our uniform for rotation | |
var thetaUniformLocation = gl.getUniformLocation(program, 'theta'); | |
var theta = 0; | |
function draw() { | |
// set the view port size | |
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); | |
// use our program | |
gl.useProgram(program); | |
// set our theta | |
theta += 0.01; | |
gl.uniform1f(thetaUniformLocation, theta); | |
// now render 3 triangles, starting at offset 0 | |
gl.drawArrays(gl.TRIANGLES, 0, 3); | |
requestAnimationFrame(draw); | |
} | |
requestAnimationFrame(draw); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment