grondilu/triangle.html

## triangle.html
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<script src="gl-matrix-min.js"></script>
<script>
    function webGLStart() {
	var shader_sources = {
	    fragment : [
	    "precision mediump float;",
	    "void main(void) {",
		"gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);",
		"}"
	    ].join("\n"),
	    vertex : [
	    "attribute vec3 aVertexPosition;",
	    "uniform mat4 uMVMatrix;",
	    "uniform mat4 uPMatrix;",
	    "void main(void) {",
		"gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);",
		"}"
	    ].join("\n")
	};

	var canvas = document.getElementById("webgl-canvas");
	var gl = canvas.getContext("experimental-webgl");
	gl.viewport(0, 0, canvas.width, canvas.height);

	var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER),
	vertexShader = gl.createShader(gl.VERTEX_SHADER);
	gl.shaderSource(fragmentShader, shader_sources.fragment);
	gl.shaderSource(vertexShader, shader_sources.vertex);
	gl.compileShader(fragmentShader);
	gl.compileShader(vertexShader);

	var shaderProgram = gl.createProgram();
	gl.attachShader(shaderProgram, vertexShader);
	gl.attachShader(shaderProgram, fragmentShader);
	gl.linkProgram(shaderProgram);

	gl.useProgram(shaderProgram);

	gl.enableVertexAttribArray(gl.getAttribLocation(shaderProgram, "aVertexPosition"));

	var triangleVertexPositionBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
	0.0,  1.0,  0.0,
	-1.0, -1.0,  0.0,
	1.0, -1.0,  0.0
	]), gl.STATIC_DRAW);
	triangleVertexPositionBuffer.itemSize = 3;
	triangleVertexPositionBuffer.numItems = 3;

	gl.clearColor(0.0, 0.0, 0.0, 1.0);
	gl.enable(gl.DEPTH_TEST);
	gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

	var mvMatrix = mat4.create();
	var pMatrix = mat4.create();
	mat4.perspective(pMatrix, 45, 1, 0.1, 100.0);
	mat4.translate(mvMatrix, mvMatrix, [-1.5, 0.0, -7.0]);

	gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
	gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

	gl.uniformMatrix4fv(gl.getUniformLocation(shaderProgram, "uPMatrix"), false, pMatrix);
	gl.uniformMatrix4fv(gl.getUniformLocation(shaderProgram, "uMVMatrix"), false, mvMatrix);
	gl.drawArrays(gl.LINE_LOOP, 0, triangleVertexPositionBuffer.numItems);
    }
</script>
</head>

<body onload="webGLStart();">
    <canvas id="webgl-canvas" style="border: none;" width="500" height="500"></canvas>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<script src="gl-matrix-min.js"></script>
	<script>
	function webGLStart() {
	var shader_sources = {
	fragment : [
	"precision mediump float;",
	"void main(void) {",
	"gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);",
	"}"
	].join("\n"),
	vertex : [
	"attribute vec3 aVertexPosition;",
	"uniform mat4 uMVMatrix;",
	"uniform mat4 uPMatrix;",
	"void main(void) {",
	"gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);",
	"}"
	].join("\n")
	};

	var canvas = document.getElementById("webgl-canvas");
	var gl = canvas.getContext("experimental-webgl");
	gl.viewport(0, 0, canvas.width, canvas.height);

	var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER),
	vertexShader = gl.createShader(gl.VERTEX_SHADER);
	gl.shaderSource(fragmentShader, shader_sources.fragment);
	gl.shaderSource(vertexShader, shader_sources.vertex);
	gl.compileShader(fragmentShader);
	gl.compileShader(vertexShader);

	var shaderProgram = gl.createProgram();
	gl.attachShader(shaderProgram, vertexShader);
	gl.attachShader(shaderProgram, fragmentShader);
	gl.linkProgram(shaderProgram);

	gl.useProgram(shaderProgram);

	gl.enableVertexAttribArray(gl.getAttribLocation(shaderProgram, "aVertexPosition"));

	var triangleVertexPositionBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
	0.0, 1.0, 0.0,
	-1.0, -1.0, 0.0,
	1.0, -1.0, 0.0
	]), gl.STATIC_DRAW);
	triangleVertexPositionBuffer.itemSize = 3;
	triangleVertexPositionBuffer.numItems = 3;

	gl.clearColor(0.0, 0.0, 0.0, 1.0);
	gl.enable(gl.DEPTH_TEST);
	gl.clear(gl.COLOR_BUFFER_BIT \| gl.DEPTH_BUFFER_BIT);

	var mvMatrix = mat4.create();
	var pMatrix = mat4.create();
	mat4.perspective(pMatrix, 45, 1, 0.1, 100.0);
	mat4.translate(mvMatrix, mvMatrix, [-1.5, 0.0, -7.0]);

	gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
	gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

	gl.uniformMatrix4fv(gl.getUniformLocation(shaderProgram, "uPMatrix"), false, pMatrix);
	gl.uniformMatrix4fv(gl.getUniformLocation(shaderProgram, "uMVMatrix"), false, mvMatrix);
	gl.drawArrays(gl.LINE_LOOP, 0, triangleVertexPositionBuffer.numItems);
	}
	</script>
	</head>

	<body onload="webGLStart();">
	<canvas id="webgl-canvas" style="border: none;" width="500" height="500"></canvas>
	</body>

	</html>