/minimum-opengles-code.html
Created Aug 26, 2011
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