minimum-opengles-code.html

## 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>