<html>

<head>

<style>

body {

background-color: black;

color: white;

}

</style>

<script>

window.onload = main;

var gl;

var canvas;

function loadShader(source, type) {

var shader = gl.createShader(type);

gl.shaderSource(shader, source);

gl.compileShader(shader);

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {

alert(gl.getShaderParameter(shader,gl.INFO_LOG));

}

return shader;

}

function loadProgram(vertexShaderSource, fragmentShaderSource) {

var vertexShader = loadShader(vertexShaderSource, gl.VERTEX_SHADER);

var fragmentShader = loadShader(fragmentShaderSource, gl.FRAGMENT_SHADER);

var program = gl.createProgram();

gl.attachShader(program, vertexShader);

gl.attachShader(program, fragmentShader);

gl.linkProgram(program);

if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {

alert(gl.getProgramParameter(program, gl.INFO_LOG));

}

return program;

}

function main() {

canvas = document.getElementById("mycanvas");

gl = canvas.getContext("experimental-webgl");

gl.clearColor(1, 0, 1, 1);

gl.clear(gl.COLOR_BUFFER_BIT);

var positions = new Float32Array(

[ 0.0, 0.0,

50.0, 0.0,

50.0, 50.0,

0.0, 50.0]);

var indices = new Uint16Array(

[0, 1,

1, 2,

2, 3,

3, 0]);

var positionBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

var indexBuffer = gl.createBuffer();

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);

gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

var program = loadProgram(

document.getElementById("vertexShader").text,

document.getElementById("fragmentShader").text);

gl.useProgram(program);

var positionLocation = gl.getAttribLocation(program, "position");

gl.enableVertexAttribArray(positionLocation);

gl.vertexAttribPointer(

positionLocation, // index

2, // number of components per element

gl.FLOAT, // type of data

false, // normalized

0, // stride

0); // offset

var ploc = gl.getUniformLocation(program, "projection");

var mloc = gl.getUniformLocation(program, "model");

gl.uniformMatrix4fv(ploc, false,

[2 / canvas.width, 0, 0, 0,

0, -2 / canvas.height, 0, 0,

0, 0, 1, 0,

-1 + 1 / canvas.width, 1 - 1 / canvas.height, 0, 1]);

for (var ii = 0; ii < 800; ii += 50) {

gl.uniformMatrix4fv(mloc, false,

[1, 0, 0, 0,

0, 1, 0, 0,

0, 0, 1, 0,

ii, 0, 0, 1]);

gl.drawElements(

gl.LINES, // what to draw

8, // number of vertices

gl.UNSIGNED_SHORT, // type of indices

0); // offset

}

for (var ii = 0; ii < 600; ii += 50) {

gl.uniformMatrix4fv(mloc, false,

[1, 0, 0, 0,

0, 1, 0, 0,

0, 0, 1, 0,

0, ii, 0, 1]);

gl.drawElements(

gl.LINES, // what to draw

8, // number of vertices

gl.UNSIGNED_SHORT, // type of indices

0); // offset

}

}

</script>

<script id="vertexShader" type="something-not-js">

//

attribute vec4 position;

uniform mat4 projection;

uniform mat4 model;

void main(void) {

gl_Position = projection * model * position;

}

</script>

<script id="fragmentShader" type="something-not-js">

//

void main(void) {

gl_FragColor = vec4(1, 1, 0, 1);

}

</script>

</head>

<body>

<div>Pixel Perfect 2D in WebGL</div>

<canvas id="mycanvas" width="800" height="600"></canvas>

</body>

</html>