JavaScript‎ > ‎

Shortest WebGL Example

A simple, self-contained WebGL example (it uses no external libraries).

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Example</title>
</head>
<body>
<script type="text/javascript">

function shaderProgram(gl, vs, fs) {
var prog = gl.createProgram();
var addshader = function(type, source) {
var s = gl.createShader((type == 'vertex') ?
gl.VERTEX_SHADER : gl.FRAGMENT_SHADER);
gl.shaderSource(s, source);
gl.compileShader(s);
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
throw "Could not compile "+type+
" shader:\n\n"+gl.getShaderInfoLog(s);
}
gl.attachShader(prog, s);
};
addshader('vertex', vs);
addshader('fragment', fs);
gl.linkProgram(prog);
if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
throw "Could not link the shader program!";
}
return prog;
}

function attributeSetFloats(gl, prog, attr_name, rsize, arr) {
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(arr),
gl.STATIC_DRAW);
var attr = gl.getAttribLocation(prog, attr_name);
gl.enableVertexAttribArray(attr);
gl.vertexAttribPointer(attr, rsize, gl.FLOAT, false, 0, 0);
}

function draw() {
try {
var gl = document.getElementById("webgl")
.getContext("experimental-webgl");
if (!gl) { throw "x"; }
} catch (err) {
throw "Your web browser does not support WebGL!";
}
gl.clearColor(0.8, 0.8, 0.8, 1);
gl.clear(gl.COLOR_BUFFER_BIT);

var prog = shaderProgram(gl,
"attribute vec3 pos;"+
"void main() {"+
" gl_Position = vec4(pos, 2.0);"+
"}",
"void main() {"+
" gl_FragColor = vec4(0.5, 0.5, 1.0, 1.0);"+
"}"
);
gl.useProgram(prog);

attributeSetFloats(gl, prog, "pos", 3, [
-1, 0, 0,
0, 1, 0,
0, -1, 0,
1, 0, 0
]);

gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}

function init() {
try {
draw();
} catch (e) {
alert("Error: "+e);
}
}
setTimeout(init, 100);

</script>
<canvas id="webgl" width="640" height="480"></canvas>
</body>
</html>
Comments