bladeSk/index.html

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