My First WebGL program
by Admiral Potato
HTML
<canvas id="gl" width="512" height="384"></canvas>
CSS
#gl{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: #000;
}
JavaScript
var canvas = document.getElementById('gl');
var gl = canvas.getContext('experimental-webgl');
var GLScene = function (args) {
var t = this, type = 'GLScene';
if (t.type !== type) {throw type + ' constructor requires use of the `new` keyword';}
t.vertexShader = t.loadShader(0, t.vertexProgram, ['vPosition']);
t.fragmentShader = t.loadShader(1, t.fragmentProgram);
t.shaderList = [t.vertexShader, t.fragmentShader];
t.program = t.createProgramObject(t.shaderList);
gl.useProgram(t.program);
t.vertexBuffer = t.createVertexBuffer(t.shapes.triangle);
t.resize();
t.render();
};
GLScene.prototype = {
type: 'GLScene',
resize: function () {
var t = this;
t.w = gl.canvas.width;
t.h = gl.canvas.height;
gl.viewport(0, 0, t.w, t.h);
gl.clear(gl.COLOR_BUFFER_BIT);
},
render: function () {
var t = this;
gl.clear(gl.COLOR_BUFFER_BIT);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, t.vertexBuffer);
gl.enableVertexAttribArray(0);
gl.drawArrays(gl.TRIANGLES, 0, t.vertexBuffer.numPoints);
},
shapes: {
triangle: [
0.5, 0.0, 0.0,
0.0, 0.5, 0.0,
-0.5, 0.0, 0.0
]
},
createVertexBuffer: function (vertexList) {
var vertexBuffer = gl.createBuffer();
vertexBuffer.inputData = new Float32Array(vertexList);
vertexBuffer.numPoints = vertexList.length / 3;
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertexBuffer.inputData, gl.STATIC_DRAW);
return vertexBuffer;
},
vertexProgram: [
'attribute vec4 vPosition;',
'void main () {',
' gl_Position = vPosition;',
'}'
].join("\n"),
fragmentProgram: [
'precision mediump float;',
'void main () {',
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);',
'}'
].join("\n"),
loadShader: function...