Skip to content

Instantly share code, notes, and snippets.

@jay3sh

jay3sh/minimum-opengles-code.html

Created August 26, 2011 13:46
Show Gist options
  • Save jay3sh/1173433 to your computer and use it in GitHub Desktop.
Save jay3sh/1173433 to your computer and use it in GitHub Desktop.
Download ZIP
Minimum length WebGL code to draw least meaningful output - A straight line
Raw
minimum-opengles-code.html
<html>
<head>
<title></title>
<script type="text/javascript">
var fragShaderSource = "\
precision highp float;\
uniform vec4 u_color;\
void main(void) {\
gl_FragColor = u_color;\
}\
";
var vtxShaderSource = "\
attribute vec3 a_position;\
uniform vec4 u_color;\
uniform mat4 u_mvMatrix;\
uniform mat4 u_pMatrix;\
void main(void) {\
gl_Position = u_pMatrix * u_mvMatrix * vec4(a_position, 1.0);\
}\
";
function get_shader(type, source) {
var shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
return shader;
}
var gl, pMatrix, mvMatrix, nMatrix, vbuf, tbuf, nbuf, ibuf;
function onready() {
var canvas = document.getElementsByTagName('canvas')[0];
gl = canvas.getContext("experimental-webgl", {antialias : true});
gl.viewport(0, 0, canvas.width, canvas.height);
var vertexShader = get_shader(gl.VERTEX_SHADER, (vtxShaderSource));
var fragmentShader = get_shader(gl.FRAGMENT_SHADER, (fragShaderSource));
shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);
shaderProgram.aposAttrib = gl.getAttribLocation(shaderProgram, "a_position");
gl.enableVertexAttribArray(shaderProgram.aposAttrib);
shaderProgram.colorUniform = gl.getUniformLocation(shaderProgram, "u_color");
shaderProgram.pMUniform = gl.getUniformLocation(shaderProgram, "u_pMatrix");
shaderProgram.mvMUniform = gl.getUniformLocation(shaderProgram, "u_mvMatrix");
gl.clearColor(1.0, 1.0, 1.0, 1.0);
mvMatrix = [0.9701425001453319, -0.18712029714127995, 0.1543033499620919, 0, 0, 0.6362090102803518, 0.7715167498104596, 0, -0.24253562503633297, -0.7484811885651198, 0.6172133998483676, 0, 0, 0, -12.96148139681572, 1];
pMatrix = [1.2990381056766582, 0, 0, 0, 0, 1.7320508075688776, 0, 0, 0, 0, -1.002002002002002, -1, 0, 0, -0.20020020020020018, 0];
var vtx = new Float32Array([-5.0,-5.0,-5.0,5.0,5.0,5.0]);
var idx = new Uint16Array([0, 1]);
vbuf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbuf);
gl.bufferData(gl.ARRAY_BUFFER, vtx, gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
ibuf = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibuf);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, idx, gl.STATIC_DRAW);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
gl.clearColor(0.0, 0.0, 0.0, 0.0);
gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.lineWidth(3.0);
gl.bindBuffer(gl.ARRAY_BUFFER, vbuf);
gl.vertexAttribPointer(shaderProgram.aposAttrib, 3, gl.FLOAT, false, 0, 0);
gl.uniform4f(shaderProgram.colorUniform, 0/255.0, 0/255.0, 0/255.0, 1.0);
gl.uniformMatrix4fv(shaderProgram.pMUniform, false, new Float32Array(pMatrix));
gl.uniformMatrix4fv(shaderProgram.mvMUniform, false, new Float32Array(mvMatrix));
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibuf);
gl.drawElements(gl.LINES, 2, gl.UNSIGNED_SHORT, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
}
</script>
</head>
<body onload="onready();">
<canvas width="400" height="300"></canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment