bladeSk · August 1, 2016 13:36
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>basic webgl example</title>
 	<style>
 		body { margin: 0; }
 		canvas { display: block; }
 	</style>
 </head>
 <body>
 	<canvas></canvas>

 	<script type="text/javascript" src="https://cdn.rawgit.com/toji/gl-matrix/master/dist/gl-matrix-min.js"></script>

 	<script id="shader-fs" type="x-shader/x-fragment">
 		precision mediump float;

 		varying vec4 vColor;

 		void main(void) {
 			gl_FragColor = vColor;
 		}
 	</script>

 	<script id="shader-vs" type="x-shader/x-vertex">
 		attribute vec3 aVertexPosition;
 		attribute vec4 aVertexColor;

 		uniform mat4 uMVMatrix;
 		uniform mat4 uPMatrix;

 		varying vec4 vColor;

 		void main(void) {
 			gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
 			vColor = aVertexColor;
 		}
 	</script>

 	<script type="text/javascript">
 		var canvas;
 		var gl;
 		var mMatrix = mat4.create();
 		var vMatrix = mat4.create();
 		var mvMatrix = mat4.create();
 		var pMatrix = mat4.create();
 		var shaderProgram;


 		function init() {
 			canvas = document.querySelector('canvas');

 			try {
 				gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
 			} catch (e) {
 				alert("Could not initialize WebGL");
 				return false;
 			}

 			window.addEventListener('resize', resize);
 			resize();

 			initShaders();
 			createGeometry();

 			gl.clearColor(0.0, 0.0, 0.0, 1.0);
 			gl.enable(gl.DEPTH_TEST);
 			return true;
 		}


 		function resize() {
 			mat4.perspective(pMatrix, 45, window.innerWidth / window.innerHeight, 0.1, 10000.0);
 			canvas.width = window.innerWidth;
 			canvas.height = window.innerHeight;
 			gl.viewport(0, 0, window.innerWidth, window.innerHeight);
 		}


 		function getShader(gl, id) {
 			var shaderScript = document.getElementById(id);
 			if (!shaderScript) {
 				return null;
 			}

 			var shader;
 			if (shaderScript.type == "x-shader/x-fragment") {
 				shader = gl.createShader(gl.FRAGMENT_SHADER);
 			} else if (shaderScript.type == "x-shader/x-vertex") {
 				shader = gl.createShader(gl.VERTEX_SHADER);
 			} else {
 				return null;
 			}

 			gl.shaderSource(shader, shaderScript.textContent);
 			gl.compileShader(shader);

 			if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
 				alert(gl.getShaderInfoLog(shader));
 				return null;
 			}

 			return shader;
 		}


 		function initShaders() {
 			var fragmentShader = getShader(gl, "shader-fs");
 			var vertexShader = getShader(gl, "shader-vs");

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

 			if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
 				alert("Could not initialise shaders");
 			}

 			gl.useProgram(shaderProgram);

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

 			shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
 			gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);

 			shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
 			shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
 		}


 		var triangleVertexPositionBuffer;
 		var triangleVertexColorBuffer;

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

 			var colors = [
 				1.0, 0.0, 0.0, 1.0,
 				0.0, 1.0, 0.0, 1.0,
 				0.0, 0.0, 1.0, 1.0,
 			];
 			triangleVertexColorBuffer = gl.createBuffer();
 			gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
 			gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
 			triangleVertexColorBuffer.itemSize = 4;
 			triangleVertexColorBuffer.numItems = 3;
 		}


 		function drawScene() {
 			gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

 			mat4.identity(vMatrix);
 			mat4.translate(vMatrix, vMatrix, [0, 0, -10]);
 			
 			var time = performance.now() / 1000;
 			mat4.identity(mMatrix);
 			//mat4.translate(mMatrix, mMatrix, [5, 0, 0]);
 			mat4.rotate(mMatrix, mMatrix, time / 2 * Math.PI, [0, 1, 0]);

 			mat4.multiply(mvMatrix, vMatrix, mMatrix);

 			gl.useProgram(shaderProgram);

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

 			gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
 			gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, triangleVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);

 			gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
 			gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);

 			gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);
 		}


 		function update() {
 			drawScene();

 			requestAnimationFrame(update);
 		}

 		if (init()) {
 			update();
 		}

 	</script>
 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>basic webgl example</title>
	<style>
	body { margin: 0; }
	canvas { display: block; }
	</style>
	</head>
	<body>
	<canvas></canvas>

	<script type="text/javascript" src="https://cdn.rawgit.com/toji/gl-matrix/master/dist/gl-matrix-min.js"></script>

	<script id="shader-fs" type="x-shader/x-fragment">
	precision mediump float;

	varying vec4 vColor;

	void main(void) {
	gl_FragColor = vColor;
	}
	</script>

	<script id="shader-vs" type="x-shader/x-vertex">
	attribute vec3 aVertexPosition;
	attribute vec4 aVertexColor;

	uniform mat4 uMVMatrix;
	uniform mat4 uPMatrix;

	varying vec4 vColor;

	void main(void) {
	gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
	vColor = aVertexColor;
	}
	</script>

	<script type="text/javascript">
	var canvas;
	var gl;
	var mMatrix = mat4.create();
	var vMatrix = mat4.create();
	var mvMatrix = mat4.create();
	var pMatrix = mat4.create();
	var shaderProgram;


	function init() {
	canvas = document.querySelector('canvas');

	try {
	gl = canvas.getContext("webgl") \|\| canvas.getContext("experimental-webgl");
	} catch (e) {
	alert("Could not initialize WebGL");
	return false;
	}

	window.addEventListener('resize', resize);
	resize();

	initShaders();
	createGeometry();

	gl.clearColor(0.0, 0.0, 0.0, 1.0);
	gl.enable(gl.DEPTH_TEST);
	return true;
	}


	function resize() {
	mat4.perspective(pMatrix, 45, window.innerWidth / window.innerHeight, 0.1, 10000.0);
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	gl.viewport(0, 0, window.innerWidth, window.innerHeight);
	}


	function getShader(gl, id) {
	var shaderScript = document.getElementById(id);
	if (!shaderScript) {
	return null;
	}

	var shader;
	if (shaderScript.type == "x-shader/x-fragment") {
	shader = gl.createShader(gl.FRAGMENT_SHADER);
	} else if (shaderScript.type == "x-shader/x-vertex") {
	shader = gl.createShader(gl.VERTEX_SHADER);
	} else {
	return null;
	}

	gl.shaderSource(shader, shaderScript.textContent);
	gl.compileShader(shader);

	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
	alert(gl.getShaderInfoLog(shader));
	return null;
	}

	return shader;
	}


	function initShaders() {
	var fragmentShader = getShader(gl, "shader-fs");
	var vertexShader = getShader(gl, "shader-vs");

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

	if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
	alert("Could not initialise shaders");
	}

	gl.useProgram(shaderProgram);

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

	shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
	gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);

	shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
	shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
	}


	var triangleVertexPositionBuffer;
	var triangleVertexColorBuffer;

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

	var colors = [
	1.0, 0.0, 0.0, 1.0,
	0.0, 1.0, 0.0, 1.0,
	0.0, 0.0, 1.0, 1.0,
	];
	triangleVertexColorBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
	triangleVertexColorBuffer.itemSize = 4;
	triangleVertexColorBuffer.numItems = 3;
	}


	function drawScene() {
	gl.clear(gl.COLOR_BUFFER_BIT \| gl.DEPTH_BUFFER_BIT);

	mat4.identity(vMatrix);
	mat4.translate(vMatrix, vMatrix, [0, 0, -10]);

	var time = performance.now() / 1000;
	mat4.identity(mMatrix);
	//mat4.translate(mMatrix, mMatrix, [5, 0, 0]);
	mat4.rotate(mMatrix, mMatrix, time / 2 * Math.PI, [0, 1, 0]);

	mat4.multiply(mvMatrix, vMatrix, mMatrix);

	gl.useProgram(shaderProgram);

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

	gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
	gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, triangleVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);

	gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
	gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);

	gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);
	}


	function update() {
	drawScene();

	requestAnimationFrame(update);
	}

	if (init()) {
	update();
	}

	</script>
	</body>
	</html>