elnaqah · February 27, 2013 15:33
diff --git a/webgl_lec1 b/webgl_lec1
 <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;
 void main(void)
 {
  gl_FragColor=vec4(1.0,1.0,1.0,1.0);
 }
 </script>

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

 uniform mat4 uMVMatrix;
 uniform mat4 uPMatrix;

 void main(void)
 {	
 	gl_Position=uPMatrix * uMVMatrix * vec4(aVertexPosition,1.0);
 }
 </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.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 squareVertexPositionBuffer;

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

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

 	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;
	void main(void)
	{
	gl_FragColor=vec4(1.0,1.0,1.0,1.0);
	}
	</script>

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

	uniform mat4 uMVMatrix;
	uniform mat4 uPMatrix;

	void main(void)
	{
	gl_Position=uPMatrix * uMVMatrix * vec4(aVertexPosition,1.0);
	}
	</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.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 squareVertexPositionBuffer;

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

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

	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>