Minimum length WebGL code to draw least meaningful output - A straight line
<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