elnaqah/gist:5049062

## gistfile1.txt
<html>

<head>
<title>Learning WebGL</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript" src="glMatrix-0.9.5.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 mvMatrix=mat4.create();
var pMatrix=mat4.create();

function setUniforms()
{
	gl.uniformMatrix4fv(shaderProgram.pMatrixUniform,false,pMatrix);
	gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform,false,mvMatrix);
}

function getShader(gl,id)
{
	var shaderScript=document.getElementById(id);
	if(!shaderScript)
	{
		return null;
	}
	var str="";
	var script=shaderScript.firstChild;
	while(script){
		if(script.nodeType==3)
		{
			str+=script.textContent;
		}
		script=script.nextSibling;
	}
	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,str);
	gl.compileShader(shader);
	if(!gl.getShaderParameter(shader,gl.COMPILE_STATUS))
	{
		alert(gl.getShaderInfoLog(shader));
		return null;
	}
	return shader;
}
var shaderProgram;
var gl;
function initShaders()
{
	var fragementShader=getShader(gl,"shader-fs");
	var vertexShader=getShader(gl,"shader-vs");

	shaderProgram=gl.createProgram();
	gl.attachShader(shaderProgram,vertexShader);
	gl.attachShader(shaderProgram,fragementShader);

	gl.linkProgram(shaderProgram);

	if(!gl.getProgramParameter(shaderProgram,gl.LINK_STATUS))
	{
		alert("cloud 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");
}


function initGL(canvas)
{
	try{
	gl=canvas.getContext("experimental-webgl");
	gl.viewportWidth=canvas.width;
	gl.viewportHeight=canvas.height;
	}
	catch(e){}
	if(!gl)
	{
		alert("mafesh webgl");
	}
}

var triangleVertexPositionBuffer;
var triangleVertexColorBuffer;

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

	triangleVertexColorBuffer=gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexColorBuffer);
	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
	];
	gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(colors),gl.STATIC_DRAW);
	triangleVertexColorBuffer.itemSize=4;
	triangleVertexColorBuffer.numItems=3;
}

function drawScene()
{
	gl.viewport(0,0,gl.viewportWidth,gl.viewportHeight);
	gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

	mat4.perspective(45,gl.viewportWidth/gl.viewportHeight,0.1,100.0,pMatrix);
	mat4.identity(mvMatrix);
	mat4.translate(mvMatrix,[0.0,0.0,-7.0]);

	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);

	setUniforms();

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

function webGLStart()
{
	var canvas=document.getElementById("canvas");
	initGL(canvas);
	initShaders();
	initBuffer();
	gl.clearColor(0.0,0.0,0.0,1.0);
	gl.enable(gl.DEPTH_TEST)
	drawScene();
}
</script>


</head>


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

</html>
	<html>

	<head>
	<title>Learning WebGL</title>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

	<script type="text/javascript" src="glMatrix-0.9.5.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 mvMatrix=mat4.create();
	var pMatrix=mat4.create();

	function setUniforms()
	{
	gl.uniformMatrix4fv(shaderProgram.pMatrixUniform,false,pMatrix);
	gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform,false,mvMatrix);
	}

	function getShader(gl,id)
	{
	var shaderScript=document.getElementById(id);
	if(!shaderScript)
	{
	return null;
	}
	var str="";
	var script=shaderScript.firstChild;
	while(script){
	if(script.nodeType==3)
	{
	str+=script.textContent;
	}
	script=script.nextSibling;
	}
	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,str);
	gl.compileShader(shader);
	if(!gl.getShaderParameter(shader,gl.COMPILE_STATUS))
	{
	alert(gl.getShaderInfoLog(shader));
	return null;
	}
	return shader;
	}
	var shaderProgram;
	var gl;
	function initShaders()
	{
	var fragementShader=getShader(gl,"shader-fs");
	var vertexShader=getShader(gl,"shader-vs");

	shaderProgram=gl.createProgram();
	gl.attachShader(shaderProgram,vertexShader);
	gl.attachShader(shaderProgram,fragementShader);

	gl.linkProgram(shaderProgram);

	if(!gl.getProgramParameter(shaderProgram,gl.LINK_STATUS))
	{
	alert("cloud 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");
	}


	function initGL(canvas)
	{
	try{
	gl=canvas.getContext("experimental-webgl");
	gl.viewportWidth=canvas.width;
	gl.viewportHeight=canvas.height;
	}
	catch(e){}
	if(!gl)
	{
	alert("mafesh webgl");
	}
	}

	var triangleVertexPositionBuffer;
	var triangleVertexColorBuffer;

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

	triangleVertexColorBuffer=gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexColorBuffer);
	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
	];
	gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(colors),gl.STATIC_DRAW);
	triangleVertexColorBuffer.itemSize=4;
	triangleVertexColorBuffer.numItems=3;
	}

	function drawScene()
	{
	gl.viewport(0,0,gl.viewportWidth,gl.viewportHeight);
	gl.clear(gl.COLOR_BUFFER_BIT \| gl.DEPTH_BUFFER_BIT);

	mat4.perspective(45,gl.viewportWidth/gl.viewportHeight,0.1,100.0,pMatrix);
	mat4.identity(mvMatrix);
	mat4.translate(mvMatrix,[0.0,0.0,-7.0]);

	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);

	setUniforms();

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

	function webGLStart()
	{
	var canvas=document.getElementById("canvas");
	initGL(canvas);
	initShaders();
	initBuffer();
	gl.clearColor(0.0,0.0,0.0,1.0);
	gl.enable(gl.DEPTH_TEST)
	drawScene();
	}
	</script>


	</head>


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

	</html>