Diego Cantor avatar Diego Cantor committed aa4ee0b

Jan 10th 2012

Comments (0)

Files changed (27)

Binary file modified.

Binary file modified.

1727_06/ch6_BlendedCube.html

+<html>
+
+<head>
+<title>WebGL Beginner's Guide - Chapter 6 - Using Colors On Objects</title>
+<meta http-equiv='content-type' content='text/html; charset=ISO-8859-1'>
+
+<!-- CSS Styles //-->
+<link href='css/styles.css'   type='text/css' rel='stylesheet'>
+<link href='css/prettify_desert.css'  type='text/css' rel='stylesheet'/>
+<link href='css/colorpicker.css'  type='text/css' rel='stylesheet'/>
+
+<link href='css/smoothness/jquery-ui-1.8.13.custom.css' type='text/css' rel='stylesheet' />
+<!-- GUI Libraries //-->
+<script type='text/javascript' src='js/gui/jquery-1.5.1.min.js'></script>
+<script type='text/javascript' src='js/gui/jquery-ui-1.8.13.custom.min.js'></script> 
+<script type='text/javascript' src='js/gui/colorpicker.js'></script>
+<script type='text/javascript' src='js/gui/prettify.js'></script>
+<script type='text/javascript' src='js/gui/codeview.js'></script>
+<!-- MATH Libraries //-->
+<script type='text/javascript' src='js/math/glMatrix-0.9.5.min.js'></script>
+<!-- WEBGL Libraries //-->
+<script type='text/javascript' src='js/webgl/Globals.js'></script>
+<script type='text/javascript' src='js/webgl/Utils.js'></script>
+<script type='text/javascript' src='js/webgl/Program.js'></script>
+<script type='text/javascript' src='js/webgl/Scene.js'></script>
+<script type='text/javascript' src='js/webgl/Axis.js'></script>
+<script type='text/javascript' src='js/webgl/Floor.js'></script>
+<script type='text/javascript' src='js/webgl/Camera.js'></script>
+<script type='text/javascript' src='js/webgl/CameraInteractor.js'></script>
+<script type='text/javascript' src='js/webgl/SceneTransforms.js'></script>
+<script type='text/javascript' src='js/webgl/WebGLApp.js'></script>
+
+
+
+<script id="shader-vs" type="x-shader/x-vertex">
+//geometry
+attribute vec3 aVertexPosition;
+attribute vec3 aVertexNormal;
+attribute vec4 aVertexColor;
+uniform bool uUseVertexColor;
+uniform vec4 uMaterialDiffuse;
+uniform vec4 uMaterialAmbient;
+uniform float uAlpha;
+
+//matrices
+uniform mat4 uMVMatrix;
+uniform mat4 uPMatrix;
+uniform mat4 uNMatrix;
+
+//lights
+uniform vec3 uLightPosition;
+uniform vec4 uLightAmbient;
+uniform vec4 uLightDiffuse;
+uniform bool uUseLambert;
+
+//varyings
+varying vec4 vColor;
+
+
+void main(void) {
+
+ //Transformed vertex position
+ vec4 vertex = uMVMatrix * vec4(aVertexPosition, 1.0);
+ 
+ float lambertTerm = 1.0;
+
+ if (uUseLambert){
+	//Transformed normal position
+	vec3 normal = vec3(uNMatrix * vec4(aVertexNormal, 1.0));
+ 
+	//light direction: pointing at the origin
+	vec3 lightDirection = normalize(-uLightPosition);
+ 
+	//weighting factor
+	lambertTerm = max(dot(normal,-lightDirection),0.20);
+ }
+
+ //reading vertex color
+ vec4 Ia = uLightAmbient * uMaterialAmbient;
+ vec4 Id = vec4(0.0);
+ 
+ if (uUseVertexColor){
+	Id = uLightDiffuse * aVertexColor * lambertTerm;
+ }
+ else {
+	Id = uLightDiffuse * uMaterialDiffuse * lambertTerm;
+ }
+ 
+ vColor = Ia + Id;
+ vColor.a = uAlpha;
+ 
+ //Final vertex position
+ gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+
+}	
+</script>
+
+<script id="shader-fs" type="x-shader/x-fragment">
+#ifdef GL_ES
+precision highp float;
+#endif
+
+//geometry
+uniform vec4 uMaterialDiffuse;
+uniform bool uWireframe;
+
+//varying
+varying vec4 vColor;
+
+void main(void)
+{
+	if(uWireframe){
+		gl_FragColor = uMaterialDiffuse;
+	}
+	else{
+    	gl_FragColor = vColor;
+    }
+
+}
+</script>
+
+<script id='code-js' type="text/javascript">
+
+var camera = null;
+var interactor = null;
+var transforms = null;
+var useVertexColors = false;
+
+function configure(){
+    gl.clearColor(0.3,0.3,0.3, 1.0);
+    gl.clearDepth(100.0);
+    //Disables depth testing so we can have access to all fragments regardless of their depth
+	gl.disable(gl.DEPTH_TEST);
+	//Enables blending
+	gl.enable(gl.BLEND);
+	gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+
+    //Creates and sets up the camera location
+    camera = new Camera(CAMERA_ORBITING_TYPE);
+    camera.goHome([0,0,4]);
+    camera.setFocus([0.0,0.0,0.0]);
+	camera.setAzimuth(45);
+	camera.setElevation(-30);
+    camera.hookRenderer = draw;
+    
+    //Creates and sets up the mouse and keyboard interactor
+    interactor = new CameraInteractor(camera, document.getElementById('canvas-element-id'));
+    
+    //Scene Transforms
+    transforms = new SceneTransforms(camera);
+   
+    //init transforms
+    transforms.init();
+	
+	//Program
+	attributeList = ["aVertexPosition",
+					"aVertexNormal",
+					"aVertexColor"];
+
+	uniformList = [	"uPMatrix", 
+					"uMVMatrix", 
+					"uNMatrix",
+					"uMaterialDiffuse",
+					"uMaterialAmbient",
+					"uLightAmbient",
+					"uLightDiffuse",
+					"uLightPosition",
+					"uWireframe",
+					"uAlpha",
+					"uUseVertexColor",
+					"uUseLambert"
+					];
+	
+	
+	Program.load(attributeList, uniformList);
+	
+	gl.uniform3fv(Program.uLightPosition,   [0,5,20]);
+	gl.uniform3fv(Program.uLightAmbient,    [1.0,1.0,1.0,1.0]);
+	gl.uniform4fv(Program.uLightDiffuse,    [1.0,1.0,1.0,1.0]);
+	gl.uniform1f(Program.uAlpha, 1.0);
+	gl.uniform1i(Program.uUseVertexColor, useVertexColors);
+	gl.uniform1i(Program.uUseLambert, true);
+
+}
+
+
+
+/**
+* Loads the scene
+*/
+function load(){
+    Scene.loadObject('models/geometry/simpleCube.json','cube1', {hidden:false});
+	Scene.loadObject('models/geometry/complexCube.json','cube2', {hidden:true});
+}
+
+
+
+
+/**
+* invoked on every rendering cycle
+*/
+function draw() {
+    gl.viewport(0, 0, c_width, c_height);
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    transforms.updatePerspective();
+
+    try{
+        for (var i = 0; i < Scene.objects.length; i++){
+            
+            var object = Scene.objects[i];
+			
+			if (object.hidden == true) continue;
+			
+			transforms.calculateModelView();           
+            transforms.push();
+            transforms.setMatrixUniforms();
+            transforms.pop();
+   
+            //Setting uniforms
+            gl.uniform4fv(Program.uMaterialDiffuse, object.diffuse);
+            gl.uniform4fv(Program.uMaterialAmbient, object.ambient);
+            gl.uniform1i(Program.uWireframe,object.wireframe);
+			
+            
+            //Setting attributes
+            gl.enableVertexAttribArray(Program.aVertexPosition);
+            gl.disableVertexAttribArray(Program.aVertexNormal);
+            gl.disableVertexAttribArray(Program.aVertexColor);
+            
+            gl.bindBuffer(gl.ARRAY_BUFFER, object.vbo);
+            gl.vertexAttribPointer(Program.aVertexPosition, 3, gl.FLOAT, false, 0, 0);
+            gl.enableVertexAttribArray(Program.aVertexPosition);
+			
+			gl.uniform1i(Program.uUseVertexColor, useVertexColors);
+			
+			if (object.scalars != null && useVertexColors){
+			    gl.enableVertexAttribArray(Program.aVertexColor);
+				gl.bindBuffer(gl.ARRAY_BUFFER, object.cbo);
+				gl.vertexAttribPointer(Program.aVertexColor, 4, gl.FLOAT, false, 0, 0);
+				
+			}
+			
+            
+			if(!object.wireframe){
+				gl.bindBuffer(gl.ARRAY_BUFFER, object.nbo);
+				gl.vertexAttribPointer(Program.aVertexNormal, 3, gl.FLOAT, false, 0, 0);
+				gl.enableVertexAttribArray(Program.aVertexNormal);
+            }
+			gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, object.ibo);
+			
+			if (object.wireframe){
+                gl.drawElements(gl.LINES, object.indices.length, gl.UNSIGNED_SHORT,0);
+            }
+            else{
+                gl.drawElements(gl.TRIANGLES, object.indices.length, gl.UNSIGNED_SHORT,0);
+            }
+			
+            gl.bindBuffer(gl.ARRAY_BUFFER, null);
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+            
+        }
+    }
+    catch(err){
+        alert(err);
+        console.error(err.description);
+    }
+}
+
+
+/**
+* Entry point. This function is invoked when the page is loaded
+*/
+var app = null;
+function runWebGLApp() {
+    app = new WebGLApp("canvas-element-id")
+    app.configureGLHook = configure;
+    app.loadSceneHook   = load;
+    app.drawSceneHook   = draw;
+    app.run();
+}
+</script>
+</head>
+
+<body onLoad='runWebGLApp()'>
+<div id='top'>
+<h1>WebGL Beginner's Guide - Chapter 6</h1>
+<h2>Using Colors in Objects</h2>
+<div id='logo-packt'><img src='packt.gif'/></div>
+<p></p>
+</div>
+
+<div id='contents'>
+<div id='canvasContainer'>
+<canvas id='canvas-element-id' width='480' height='400'>
+Your browser does not support the HTML5 canvas element.
+</canvas>
+</div>
+</div>
+
+<div id='bottom'>
+<table style='padding=0px'>
+<tr>
+	<td>
+	<table id='coloring-table'>
+	<tr>
+	<td><input type="checkbox" id="lambert-btn" checked='checked' /><label for="lambert-btn">Use Lambert Term</label></td>
+	<td>
+	<div id='opt-type' >
+		<input type='radio' id='opt-constant' name='typecolor' checked='checked' /><label for='opt-constant'>Constant</label>
+		<input type='radio' id='opt-vertex' name='typecolor' /><label for='opt-vertex'>Per Vertex</label>
+    </div>
+	</td>
+	<td>
+	<div id='opt-cube'>
+		<input type='radio' id='opt-cube1' name='cube' checked='checked' /><label for='opt-cube1'>Simple Cube</label>
+		<input type='radio' id='opt-cube2' name='cube' /><label for='opt-cube2'>Complex Cube</label>
+    </div>
+	</td>
+	</tr>		
+	</table>
+	</td>
+</tr>	
+<tr>
+    <td> 
+    <table cellspacing=4px style='vertical-align:top'>
+		<tr>
+			<td>Alpha Value:</td><td id='slider-alpha-value'>1.0</td><td width='150px'><div id='slider-alpha'/></td>
+		</tr>
+    </table>
+    </td>
+</tr>
+</table>
+</div>
+<script> 
+
+
+$('#slider-alpha').slider({value:1.0, min:0.0, max:1.01, step:0.05, slide:updateAlpha});
+
+function updateAlpha(){
+    var v = $('#slider-alpha').slider("value");
+    gl.uniform1f(Program.uAlpha, v);
+    $('#slider-alpha-value').html(v);
+	app.refresh();
+}
+
+
+$('#lambert-btn').button();
+$('#opt-type, #opt-cube').buttonset();
+
+$('#lambert-btn').click(function(){
+	gl.uniform1i(Program.uUseLambert, $('#lambert-btn').is(':checked'));
+});
+
+$('#opt-constant').click(function(){
+	useVertexColors = false;
+    app.refresh();
+});
+
+$('#opt-vertex').click(function(){
+	useVertexColors = true;
+    app.refresh();
+});
+
+$('#opt-cube1').click(function(){
+	var cube1  = Scene.getObject('cube1');
+	var cube2  = Scene.getObject('cube2');
+	cube1.hidden = false;
+	cube2.hidden = true;
+    app.refresh();
+});
+
+$('#opt-cube2').click(function(){
+	var cube1  = Scene.getObject('cube1');
+	var cube2  = Scene.getObject('cube2');
+	cube1.hidden = true;
+	cube2.hidden = false;
+    app.refresh();
+});
+
+</script>
+<script>cview.run(cview.MODE_VIEW,false,470);</script>
+</body>
+</html>

1727_06/ch6_ColorsOnWall.html

-<html>
-
-<head>
-<title>WebGL Beginner's Guide - Chapter 6 - Using Colors on Lights</title>
-<meta http-equiv='content-type' content='text/html; charset=ISO-8859-1'>
-
-<!-- CSS Styles //-->
-<link href='css/styles.css'   type='text/css' rel='stylesheet'>
-<link href='css/prettify_desert.css'  type='text/css' rel='stylesheet'/>
-<link href='css/colorpicker.css'  type='text/css' rel='stylesheet'/>
-
-<link href='css/smoothness/jquery-ui-1.8.13.custom.css' type='text/css' rel='stylesheet' />
-<!-- GUI Libraries //-->
-<script type='text/javascript' src='js/gui/jquery-1.5.1.min.js'></script>
-<script type='text/javascript' src='js/gui/jquery-ui-1.8.13.custom.min.js'></script> 
-<script type='text/javascript' src='js/gui/colorpicker.js'></script>
-<script type='text/javascript' src='js/gui/prettify.js'></script>
-<script type='text/javascript' src='js/gui/codeview.js'></script>
-<!-- MATH Libraries //-->
-<script type='text/javascript' src='js/math/glMatrix-0.9.5.min.js'></script>
-<!-- WEBGL Libraries //-->
-<script type='text/javascript' src='js/webgl/Globals.js'></script>
-<script type='text/javascript' src='js/webgl/Utils.js'></script>
-<script type='text/javascript' src='js/webgl/Program.js'></script>
-<script type='text/javascript' src='js/webgl/Scene.js'></script>
-<script type='text/javascript' src='js/webgl/Axis.js'></script>
-<script type='text/javascript' src='js/webgl/Floor.js'></script>
-<script type='text/javascript' src='js/webgl/Camera.js'></script>
-<script type='text/javascript' src='js/webgl/CameraInteractor.js'></script>
-<script type='text/javascript' src='js/webgl/SceneTransforms.js'></script>
-<script type='text/javascript' src='js/webgl/Lights.js'></script>
-<script type='text/javascript' src='js/webgl/WebGLApp.js'></script>
-
-
-
-<script id="shader-vs" type="x-shader/x-vertex">
-
-attribute vec3 aVertexPosition;
-attribute vec3 aVertexNormal;
-attribute vec4 aVertexColor;
-
-uniform mat4 uMVMatrix;
-uniform mat4 uPMatrix;
-uniform mat4 uNMatrix;
-
-uniform vec4 uMaterialDiffuse;
-
-
-uniform vec3 uPositionLightOne;
-uniform vec3 uPositionLightTwo;
-uniform vec3 uPositionLightThree;
-
-varying vec3 vNormal;
-
-varying vec3 vLightRayOne;
-varying vec3 vLightRayTwo;
-varying vec3 vLightRayThree;
-
-varying vec3 vEyeVec;
-
-
-void main(void) {
-
- //Transformed vertex position
- vec4 vertex = uMVMatrix * vec4(aVertexPosition, 1.0);
- 
- //Transformed normal position
- vNormal = vec3(uNMatrix * vec4(aVertexNormal, 1.0));
-
- //Transformed light position
- vec4 positionLightOne = uMVMatrix * vec4(uPositionLightOne,1.0);
- vec4 positionLightTwo = uMVMatrix * vec4(uPositionLightTwo,1.0);
- vec4 positionLightThree = uMVMatrix * vec4(uPositionLightThree, 1.0);
- 	
- //Light position
- vLightRayOne = vertex.xyz-positionLightOne.xyz;
- vLightRayTwo = vertex.xyz-positionLightTwo.xyz;
- vLightRayThree = vertex.xyz-positionLightThree.xyz;
- 
- //Vector Eye
- vEyeVec = -vec3(vertex.xyz);
- 
- //Final vertex position
- gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
-
-}	
-</script>
-
-<script id="shader-fs" type="x-shader/x-fragment">
-#ifdef GL_ES
-precision highp float;
-#endif
-
-uniform bool uWireframe;
-uniform bool uLightSource;
-
-uniform vec4 uLightAmbient;
-
-uniform vec4 uLightDiffuseOne;
-uniform vec4 uLightDiffuseTwo;
-uniform vec4 uLightDiffuseThree;
-
-uniform vec4 uMaterialAmbient;
-uniform vec4 uMaterialDiffuse;
-
-uniform float uCutOff;   
-
-varying vec3 vNormal;
-varying vec3 vLightRayOne;
-varying vec3 vLightRayTwo;
-varying vec3 vLightRayThree;
-varying vec3 vEyeVec;
-varying vec4 vFinalColor;
-
-void main(void)
-{
-	if(uWireframe || uLightSource){
-		gl_FragColor = uMaterialDiffuse;
-	}
-	else{
-    	vec3 L1 = normalize(vLightRayOne);
-		vec3 L2 = normalize(vLightRayTwo);
-		vec3 L3 = normalize(vLightRayThree);
-		
-    	vec3 N = normalize(vNormal);
-
-    	//Lambert's cosine law
-    	float lambertTermOne	= dot(N,-L1);
-		float lambertTermTwo	= dot(N,-L2);
-		float lambertTermThree  = dot(N,-L3);
-		
-    	//Ambient Term  
-    	vec4 Ia = uLightAmbient * uMaterialAmbient;
-
-    	//Diffuse Term
-    	vec4 Id1 = vec4(0.0,0.0,0.0,1.0);
-		vec4 Id2 = vec4(0.0,0.0,0.0,1.0);
-		vec4 Id3 = vec4(0.0,0.0,0.0,1.0);
-		
-
-    	//Specular Term
-		if (lambertTermOne > uCutOff){
-    	
-        	Id1 = uLightDiffuseOne * uMaterialDiffuse * lambertTermOne; 
-    	}
-		
-		if(lambertTermTwo > uCutOff){
-			Id2 = uLightDiffuseTwo * uMaterialDiffuse * lambertTermTwo;
-		}
-		
-		if(lambertTermThree > uCutOff){
-			Id3 = uLightDiffuseThree * uMaterialDiffuse * lambertTermThree;
-		}
-
-    	//Final color
-    	vec4 finalColor = Ia + Id1 + Id2 + Id3;
-    	finalColor.a = 1.0;
-    	gl_FragColor = finalColor;
-    }
-
-}
-</script>
-
-<script id='code-js' type="text/javascript">
-
-var camera = null;
-var interactor = null;
-var transforms = null;
-
-
-function configure(){
-    gl.clearColor(0.3,0.3,0.3, 1.0);
-    gl.clearDepth(100.0);
-    gl.enable(gl.DEPTH_TEST);
-	gl.enable(gl.BLEND);
-	gl.blendEquation(gl.FUNC_ADD);
-    gl.depthFunc(gl.LEQUAL);
-    
-    //Creates and sets up the camera location
-    camera = new Camera(CAMERA_ORBITING_TYPE);
-    camera.goHome([0,5,30]);
-    camera.setFocus([0.0,0.0,0.0]);
-	camera.setAzimuth(0);
-	camera.setElevation(-3);
-    camera.hookRenderer = draw;
-    
-    //Creates and sets up the mouse and keyboard interactor
-    interactor = new CameraInteractor(camera, document.getElementById('canvas-element-id'));
-    
-    //Scene Transforms
-    transforms = new SceneTransforms(camera);
-   
-    //init transforms
-    transforms.init();
-	
-	//init Lights
-	var redLight = new Light('red');
-	redLight.setPosition([0,7,3]);
-	redLight.setDiffuse([1.0,0.0,0.0,1.0]);
-	
-	var greenLight = new Light('green');
-	greenLight.setPosition([2.5,3,3]);
-	greenLight.setDiffuse([0.0,1.0,0.0,1.0]);
-	
-	var blueLight = new Light('blue');
-	blueLight.setPosition([-2.5,3,3]);
-	blueLight.setDiffuse([0.0,0.0,1.0,1.0]);
-	
-	Lights.add(redLight);
-	Lights.add(greenLight);
-	Lights.add(blueLight);
-	
-	attributeList = ["aVertexPosition",
-					"aVertexNormal",
-					"aVertexColor"];
-
-	uniformList = [	"uPMatrix", 
-					"uMVMatrix", 
-					"uNMatrix",
-					"uMaterialDiffuse",
-					"uMaterialAmbient",
-					"uLightAmbient",
-					"uLightDiffuseOne",
-					"uLightDiffuseTwo",
-					"uLightDiffuseThree",
-					"uPositionLightOne",
-					"uPositionLightTwo",
-					"uPositionLightThree",
-					"uWireframe",
-					"uLightSource",
-					"uCutOff"
-					];
-	
-	
-	Program.load(attributeList, uniformList);
-	
-	gl.uniform3fv(Program.uPositionLightOne,    redLight.position);
-	gl.uniform3fv(Program.uPositionLightTwo,    greenLight.position);
-	gl.uniform3fv(Program.uPositionLightThree,  blueLight.position);
-	
-	gl.uniform4fv(Program.uLightDiffuseOne,   redLight.diffuse);
-	gl.uniform4fv(Program.uLightDiffuseTwo,   greenLight.diffuse);
-	gl.uniform4fv(Program.uLightDiffuseThree, Lights.get('blue').diffuse);
-	
-	gl.uniform1f(Program.uCutOff, 0.4);
-	gl.uniform4fv(Program.uLightAmbient ,  [1.0,1.0,1.0,1.0]);
-	
-}
-
-
-/**
-* Loads the scene
-*/
-function load(){
-  
-    Floor.build(80,2);
-    Scene.addObject(Floor);
-    Scene.loadObject('models/geometry/wall.json','wall');
-	Scene.loadObject('models/geometry/smallsph.json','light1');
-	Scene.loadObject('models/geometry/smallsph.json','light2');
-	Scene.loadObject('models/geometry/smallsph.json','light3');
-}
-
-
-/**
-* invoked on every rendering cycle
-*/
-function draw() {
-    gl.viewport(0, 0, c_width, c_height);
-    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-    transforms.updatePerspective();
-    
-    try{
-        gl.uniform1i(prg.uUpdateLight,updateLightPosition);
-        
-        for (var i = 0; i < Scene.objects.length; i++){
-            
-            var object = Scene.objects[i];
-			
-			transforms.calculateModelView();           
-            transforms.push();
-			
-			gl.uniform1i(Program.uLightSource,false);
-			
-			if (object.alias == 'light1'){
-                mat4.translate(transforms.mvMatrix,gl.getUniform(prg, Program.uPositionLightOne));
-				object.diffuse = gl.getUniform(prg, Program.uLightDiffuseOne);
-				gl.uniform1i(Program.uLightSource,true);
-                
-            }
-			
-			if (object.alias == 'light2'){
-				mat4.translate(transforms.mvMatrix,gl.getUniform(prg, Program.uPositionLightTwo));
-				object.diffuse = gl.getUniform(prg, Program.uLightDiffuseTwo);
-				gl.uniform1i(Program.uLightSource,true);
-			}
-			
-			if (object.alias == 'light3'){
-				mat4.translate(transforms.mvMatrix,gl.getUniform(prg, Program.uPositionLightThree));
-				object.diffuse = gl.getUniform(prg, Program.uLightDiffuseThree);
-				gl.uniform1i(Program.uLightSource,true);
-			}
-			
-            transforms.setMatrixUniforms(Program);
-            transforms.pop();
-   
-            //Setting uniforms
-            gl.uniform4fv(Program.uMaterialDiffuse, object.diffuse);
-            gl.uniform4fv(Program.uMaterialAmbient, object.ambient);
-            gl.uniform1i(Program.uWireframe,object.wireframe);
-            
-            //Setting attributes
-            gl.enableVertexAttribArray(Program.aVertexPosition);
-            gl.disableVertexAttribArray(Program.aVertexNormal);
-            gl.disableVertexAttribArray(Program.aVertexColor);
-            
-            gl.bindBuffer(gl.ARRAY_BUFFER, object.vbo);
-            gl.vertexAttribPointer(Program.aVertexPosition, 3, gl.FLOAT, false, 0, 0);
-            gl.enableVertexAttribArray(Program.aVertexPosition);
-            
-			if(!object.wireframe){
-				gl.bindBuffer(gl.ARRAY_BUFFER, object.nbo);
-				gl.vertexAttribPointer(Program.aVertexNormal, 3, gl.FLOAT, false, 0, 0);
-				gl.enableVertexAttribArray(Program.aVertexNormal);
-            }
-			gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, object.ibo);
-			
-			if (object.wireframe){
-                gl.drawElements(gl.LINES, object.indices.length, gl.UNSIGNED_SHORT,0);
-            }
-            else{
-                gl.drawElements(gl.TRIANGLES, object.indices.length, gl.UNSIGNED_SHORT,0);
-            }
-			
-            gl.bindBuffer(gl.ARRAY_BUFFER, null);
-            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
-            
-        }
-    }
-    catch(err){
-        alert(err);
-        console.error(err.description);
-    }
-}
-
-
-/**
-* Entry point. This function is invoked when the page is loaded
-*/
-var app = null;
-function runWebGLApp() {
-    app = new WebGLApp("canvas-element-id")
-    app.configureGLHook = configure;
-    app.loadSceneHook   = load;
-    app.drawSceneHook   = draw;
-    app.run();
-}
-</script>
-</head>
-
-<body onLoad='runWebGLApp()'>
-<div id='top'>
-<h1>WebGL Beginner's Guide - Chapter 6</h1>
-<h2>Using Colors in Lights</h2>
-<div id='logo-packt'><img src='packt.gif'/></div>
-<p></p>
-</div>
-
-<div id='contents'>
-<div id='canvasContainer'>
-<canvas id='canvas-element-id' width='480' height='400'>
-Your browser does not support the HTML5 canvas element.
-</canvas>
-</div>
-</div>
-
-<div id='bottom'>
-<table style='padding=0px'>
-<tr>
-	<td>
-	<table>
-		<tr>
-			<td> Light #1:</td><td><div id='colorSelectorLightOne' class='colorSelector'><div style='background-color:rgb(255,0,0)'></div></div></td>
-			<td>X:</td><td id='slider-x1-value' width='30px'>0.0</td><td width='150px'><div id='slider-x1'/></td>
-			<td>Y:</td><td id='slider-y1-value' width='30px'>7.0</td><td width='150px'><div id='slider-y1'/></td>
-			<td>Z:</td><td id='slider-z1-value' width='30px'>3.0</td><td width='150px'><div id='slider-z1'/></td>
-		</tr>
-		<tr>
-			<td> Light #2:</td><td><div id='colorSelectorLightTwo' class='colorSelector'><div style='background-color:rgb(0,255,0)'></div></div></td>
-			<td>X:</td><td id='slider-x2-value' width='30px'>2.5</td><td width='150px'><div id='slider-x2'/></td>
-			<td>Y:</td><td id='slider-y2-value' width='30px'>3.0</td><td width='150px'><div id='slider-y2'/></td>
-			<td>Z:</td><td id='slider-z2-value' width='30px'>3.0</td><td width='150px'><div id='slider-z2'/></td>
-		</tr>
-		<tr>
-			<td> Light #3:</td><td><div id='colorSelectorLightThree' class='colorSelector'><div style='background-color:rgb(0,0,255)'></div></div></td>
-			<td>X:</td><td id='slider-x3-value' width='30px'>-2.5</td><td width='150px'><div id='slider-x3'/></td>
-			<td>Y:</td><td id='slider-y3-value' width='30px'>3.0</td><td width='150px'><div id='slider-y3'/></td>
-			<td>Z:</td><td id='slider-z3-value' width='30px'>3.0</td><td width='150px'><div id='slider-z3'/></td>
-		</tr>
-	</table>
-	</td>
-</tr>	
-<tr>
-    <td> 
-    <table cellspacing=4px style='vertical-align:top'>
-		<tr>
-			<td>Light Cone CutOff:</td><td id='slider-cutoff-value'>0.6</td><td width='150px'><div id='slider-cutoff'/></td>
-		</tr>
-        <tr>
-            <td align='center'>
-            <div id='opt-type' >
-                    <input type='radio' id='opt-tracking' name='typecam' /><label for='opt-tracking'>Tracking</label>
-                    <input type='radio' id='opt-orbiting' name='typecam' checked='checked'/><label for='opt-orbiting'>Orbiting</label>
-            </div>
-            </td>
-            <td align='center'>
-				<button id='btnGoHome'>Go Home</button>
-            </td>
-        </tr>
-    </table>
-    </td>
-</tr>
-</table>
-</div>
-<script> 
-
-
-$('#slider-x1').slider({value:0.0, min:-15, max:15, step:0.1, slide:function(){updateLightPosition(1)}, 	change:function(){updateLightPosition(1)}});
-$('#slider-y1').slider({value:7.0, min:-15, max:15, step:0.1, slide:function(){updateLightPosition(1)}, 	change:function(){updateLightPosition(1)}});
-$('#slider-z1').slider({value:3.0, min:-15, max:15, step:0.1, slide:function(){updateLightPosition(1)}, 	change:function(){updateLightPosition(1)}});
-
-$('#slider-x2').slider({value:2.5, min:-15, max:15, step:0.1, slide:function(){updateLightPosition(2)}, 	change:function(){updateLightPosition(2)}});
-$('#slider-y2').slider({value:3.0, min:-15, max:15, step:0.1, slide:function(){updateLightPosition(2)}, 	change:function(){updateLightPosition(2)}});
-$('#slider-z2').slider({value:3.0, min:-15, max:15, step:0.1, slide:function(){updateLightPosition(2)}, 	change:function(){updateLightPosition(2)}});
-
-$('#slider-x3').slider({value:-2.5, min:-15, max:15, step:0.1, slide:function(){updateLightPosition(3)}, 	change:function(){updateLightPosition(3)}});
-$('#slider-y3').slider({value:3.0,  min:-15, max:15, step:0.1, slide:function(){updateLightPosition(3)}, 	change:function(){updateLightPosition(3)}});
-$('#slider-z3').slider({value:3.0,  min:-15, max:15, step:0.1, slide:function(){updateLightPosition(3)}, 	change:function(){updateLightPosition(3)}});
-
-$('#slider-cutoff').slider({value:0.4, min:0.0, max:1, step:0.05, slide:updateCutOff});
-
-function updateCutOff(){
-    var v = $('#slider-cutoff').slider("value");
-    gl.uniform1f(Program.uCutOff, v);
-    $('#slider-cutoff-value').html(v);
-	draw();
-}
-
-
-
-function updateLightPosition(a){
-    var x = $('#slider-x'+a).slider("value");
-    var y = $('#slider-y'+a).slider("value");
-    var z = $('#slider-z'+a).slider("value");
-    
-    $('#slider-x'+a+'-value').html(x);
-    $('#slider-y'+a+'-value').html(y);
-    $('#slider-z'+a+'-value').html(z);
-    
-    switch (a){
-    	case 1: gl.uniform3fv(Program.uPositionLightOne, [x,y,z]); break;
-    	case 2: gl.uniform3fv(Program.uPositionLightTwo, [x,y,z]); break;
-    	case 3: gl.uniform3fv(Program.uPositionLightThree, [x,y,z]); break;
-    }
-    
-	draw();
-}
-
-
-$('#opt-type').buttonset();
-$('#btnGoHome').button();
-
-
-
-$('#opt-tracking').click(function(){
-    camera.goHome();
-    console.info('CameraType = Tracking');
-    camera.setType(CAMERA_TRACKING_TYPE);
-    
-    app.refresh();
-});
-
-$('#opt-orbiting').click(function(){
-    camera.goHome();
-    console.info('CameraType = Orbiting');
-    camera.setType(CAMERA_ORBITING_TYPE);
-    app.refresh();
-});
-
-
-
-
-$('#btnGoHome').click(
-    function(){
-        camera.goHome();
-        app.refresh();
-});
-
-
-
-</script>
-<script>cview.run(cview.MODE_VIEW,false,470);</script>
-</body>
-</html>

1727_06/ch6_ColorsOnWallDirectional.html

-<html>
-
-<head>
-<title>WebGL Beginner's Guide - Chapter 6 - Using Colors on Lights</title>
-<meta http-equiv='content-type' content='text/html; charset=ISO-8859-1'>
-
-<!-- CSS Styles //-->
-<link href='css/styles.css'   type='text/css' rel='stylesheet'>
-<link href='css/prettify_desert.css'  type='text/css' rel='stylesheet'/>
-<link href='css/colorpicker.css'  type='text/css' rel='stylesheet'/>
-
-<link href='css/smoothness/jquery-ui-1.8.13.custom.css' type='text/css' rel='stylesheet' />
-<!-- GUI Libraries //-->
-<script type='text/javascript' src='js/gui/jquery-1.5.1.min.js'></script>
-<script type='text/javascript' src='js/gui/jquery-ui-1.8.13.custom.min.js'></script> 
-<script type='text/javascript' src='js/gui/colorpicker.js'></script>
-<script type='text/javascript' src='js/gui/prettify.js'></script>
-<script type='text/javascript' src='js/gui/codeview.js'></script>
-<!-- MATH Libraries //-->
-<script type='text/javascript' src='js/math/glMatrix-0.9.5.min.js'></script>
-<!-- WEBGL Libraries //-->
-<script type='text/javascript' src='js/webgl/Globals.js'></script>
-<script type='text/javascript' src='js/webgl/Utils.js'></script>
-<script type='text/javascript' src='js/webgl/Program.js'></script>
-<script type='text/javascript' src='js/webgl/Scene.js'></script>
-<script type='text/javascript' src='js/webgl/Axis.js'></script>
-<script type='text/javascript' src='js/webgl/Floor.js'></script>
-<script type='text/javascript' src='js/webgl/Camera.js'></script>
-<script type='text/javascript' src='js/webgl/CameraInteractor.js'></script>
-<script type='text/javascript' src='js/webgl/SceneTransforms.js'></script>
-<script type='text/javascript' src='js/webgl/WebGLApp.js'></script>
-
-
-
-<script id="shader-vs" type="x-shader/x-vertex">
-
-attribute vec3 aVertexPosition;
-attribute vec3 aVertexNormal;
-attribute vec4 aVertexColor;
-
-uniform mat4 uMVMatrix;
-uniform mat4 uPMatrix;
-uniform mat4 uNMatrix;
-
-uniform vec4 uMaterialDiffuse;
-
-
-uniform vec3 uPositionLightOne;
-uniform vec3 uPositionLightTwo;
-uniform vec3 uPositionLightThree;
-
-uniform vec3 uDirectionLightOne;
-uniform vec3 uDirectionLightTwo;
-uniform vec3 uDirectionLightThree;
-
-varying vec3 vNormalOne;
-varying vec3 vNormalTwo;
-varying vec3 vNormalThree;
-
-varying vec3 vLightRayOne;
-varying vec3 vLightRayTwo;
-varying vec3 vLightRayThree;
-
-varying vec3 vEyeVec;
-varying vec4 vFinalColor;
-
-void main(void) {
-	
-
- vFinalColor = uMaterialDiffuse;
-
- //Transformed vertex position
- vec4 vertex = uMVMatrix * vec4(aVertexPosition, 1.0);
- 
- //Transformed normal position
- vec3 Normal = vec3(uNMatrix * vec4(aVertexNormal, 1.0));
-
- //Transformed light position
- vec4 positionLightOne = uMVMatrix * vec4(uPositionLightOne,1.0);
- vec4 positionLightTwo = uMVMatrix * vec4(uPositionLightTwo,1.0);
- vec4 positionLightThree = uMVMatrix * vec4(uPositionLightThree, 1.0);
- 
- vec3 directionLightOne = vec3(uNMatrix * vec4(uDirectionLightOne, 1.0));
- vec3 directionLightTwo = vec3(uNMatrix * vec4(uDirectionLightTwo, 1.0));
- vec3 directionLightThree = vec3(uNMatrix * vec4(uDirectionLightThree, 1.0));
- 
- vNormalOne = Normal - directionLightOne;
- vNormalTwo = Normal - directionLightTwo; 
- vNormalThree = Normal - directionLightThree;
- 	
- //Light position
- vLightRayOne = vertex.xyz- positionLightOne.xyz;
- vLightRayTwo = vertex.xyz-positionLightTwo.xyz;
- vLightRayThree = vertex.xyz-positionLightThree.xyz;
- 
- //Vector Eye
- vEyeVec = -vec3(vertex.xyz);
- 
- //Final vertex position
- gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
-
-}	
-</script>
-
-<script id="shader-fs" type="x-shader/x-fragment">
-#ifdef GL_ES
-precision highp float;
-#endif
-
-uniform bool uWireframe;
-uniform bool uLightSource;
-
-uniform vec4 uLightAmbient;
-
-uniform vec4 uLightDiffuseOne;
-uniform vec4 uLightDiffuseTwo;
-uniform vec4 uLightDiffuseThree;
-
-uniform vec4 uMaterialAmbient;
-uniform vec4 uMaterialDiffuse;   
-
-uniform float uCutOff;   
-
-varying vec3 vNormalOne;
-varying vec3 vNormalTwo;
-varying vec3 vNormalThree;
-
-varying vec3 vLightRayOne;
-varying vec3 vLightRayTwo;
-varying vec3 vLightRayThree;
-varying vec3 vEyeVec;
-varying vec4 vFinalColor;
-
-
-
-void main(void)
-{
-	if(uWireframe || uLightSource){
-		gl_FragColor = vFinalColor;
-	}
-	else{
-    	vec3 L1 = normalize(vLightRayOne);
-		vec3 L2 = normalize(vLightRayTwo);
-		vec3 L3 = normalize(vLightRayThree);
-		
-    	vec3 N1 = normalize(vNormalOne);
-		vec3 N2 = normalize (vNormalTwo);
-		vec3 N3 = normalize (vNormalThree);
-
-    	//Lambert's cosine law
-    	float lambertTermOne	= dot(N1,-L1);
-		float lambertTermTwo	= dot(N2,-L2);
-		float lambertTermThree  = dot(N3,-L3);
-		
-    	//Ambient Term  
-    	vec4 Ia = uLightAmbient * uMaterialAmbient;
-
-    	//Diffuse Term
-    	vec4 Id1 = vec4(0.0,0.0,0.0,1.0);
-		vec4 Id2 = vec4(0.0,0.0,0.0,1.0);
-		vec4 Id3 = vec4(0.0,0.0,0.0,1.0);
-		
-
-
-    	//Specular Term
-		if (lambertTermOne > uCutOff){
-    	
-        	Id1 = uLightDiffuseOne * uMaterialDiffuse * lambertTermOne; 
-    	}
-		
-		if(lambertTermTwo > uCutOff){
-			Id2 = uLightDiffuseTwo * uMaterialDiffuse * lambertTermTwo;
-		}
-		
-		if(lambertTermThree > uCutOff){
-			Id3 = uLightDiffuseThree * uMaterialDiffuse * lambertTermThree;
-		}
-
-    	//Final color
-    	vec4 finalColor = Ia + Id1 + Id2 + Id3;
-    	finalColor.a = 1.0;
-    	gl_FragColor = finalColor;
-    }
-
-}
-</script>
-
-<script id='code-js' type="text/javascript">
-
-var camera = null;
-var interactor = null;
-var transforms = null;
-
-function configure(){
-    gl.clearColor(0.3,0.3,0.3, 1.0);
-    gl.clearDepth(100.0);
-    
-	gl.enable(gl.DEPTH_TEST);
-	gl.depthFunc(gl.LESS);
-	
-	
-	gl.enable(gl.BLEND);
-	gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
-    
-    
-    //Creates and sets up the camera location
-    camera = new Camera(CAMERA_ORBITING_TYPE);
-    camera.goHome([0,5,30]);
-    camera.setFocus([0.0,0.0,0.0]);
-    camera.hookRenderer = draw;
-    
-    //Creates and sets up the mouse and keyboard interactor
-    interactor = new CameraInteractor(camera, document.getElementById('canvas-element-id'));
-    
-    //Scene Transforms
-    transforms = new SceneTransforms(camera);
-   
-    //init transforms
-    transforms.init();
-	
-	//
-	attributeList = ["aVertexPosition",
-					"aVertexNormal",
-					"aVertexColor"];
-
-	uniformList = [	"uPMatrix", 
-					"uMVMatrix", 
-					"uNMatrix",
-					"uMaterialDiffuse",
-					"uMaterialAmbient",
-					"uMaterialSpecular",
-					"uLightAmbient",
-					"uLightDiffuseOne",
-					"uLightDiffuseTwo",
-					"uLightDiffuseThree",
-					"uPositionLightOne",
-					"uPositionLightTwo",
-					"uPositionLightThree",
-					"uWireframe",
-					"uLightSource",
-					"uDirectionLightOne",
-					"uDirectionLightTwo",
-					"uDirectionLightThree",
-					"uCutOff"
-					];
-	
-	
-	Program.load(attributeList, uniformList);
-	
-	gl.uniform3fv(Program.uPositionLightOne,    [0, 7, 3]);
-	gl.uniform3fv(Program.uPositionLightTwo,    [4, 3, 3]);
-	gl.uniform3fv(Program.uPositionLightThree,  [-4,3, 3]);
-	
-	gl.uniform3fv(Program.uDirectionLightOne,  [0,-2,-0.1]);
-	gl.uniform3fv(Program.uDirectionLightTwo,  [-0.5,1,-0.1]);
-	gl.uniform3fv(Program.uDirectionLightThree, [0.5,1,-0.1]);
-	
-	gl.uniform4fv(Program.uLightAmbient ,  [1.0,1.0,1.0,1.0]);
-	
-	gl.uniform4fv(Program.uLightDiffuseOne,   [1.0,0.0,0.0,1.0]);
-	gl.uniform4fv(Program.uLightDiffuseTwo,   [0.0,1.0,0.0,1.0]);
-	gl.uniform4fv(Program.uLightDiffuseThree, [0.0,0.0,1.0,1.0]);
-
-	gl.uniform1f(Program.uCutOff, 0.8);
-}
-
-
-/**
-* Loads the scene
-*/
-function load(){
-  
-    Floor.build(80,2);
-    Scene.addObject(Floor);
-    Scene.loadObject('models/geometry/wall.json','wall');
-	Scene.loadObject('models/geometry/smallsph.json','light1');
-	Scene.loadObject('models/geometry/smallsph.json','light2');
-	Scene.loadObject('models/geometry/smallsph.json','light3');
-}
-
-
-/**
-* invoked on every rendering cycle
-*/
-function draw() {
-    gl.viewport(0, 0, c_width, c_height);
-    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-    transforms.updatePerspective();
-    
-    try{
-        gl.uniform1i(prg.uUpdateLight,updateLightPosition);
-        
-        for (var i = 0; i < Scene.objects.length; i++){
-            
-            var object = Scene.objects[i];
-			
-			transforms.calculateModelView();           
-            transforms.push();
-			
-			gl.uniform1i(Program.uLightSource,false);
-			
-			if (object.alias == 'light1'){
-                mat4.translate(transforms.mvMatrix,gl.getUniform(prg, Program.uPositionLightOne));
-				object.diffuse = gl.getUniform(prg, Program.uLightDiffuseOne);
-				gl.uniform1i(Program.uLightSource,true);
-                
-            }
-			
-			if (object.alias == 'light2'){
-				mat4.translate(transforms.mvMatrix,gl.getUniform(prg, Program.uPositionLightTwo));
-				object.diffuse = gl.getUniform(prg, Program.uLightDiffuseTwo);
-				gl.uniform1i(Program.uLightSource,true);
-			}
-			
-			if (object.alias == 'light3'){
-				mat4.translate(transforms.mvMatrix,gl.getUniform(prg, Program.uPositionLightThree));
-				object.diffuse = gl.getUniform(prg, Program.uLightDiffuseThree);
-				gl.uniform1i(Program.uLightSource,true);
-			}
-			
-            transforms.setMatrixUniforms(Program);
-            transforms.pop();
-   
-            //Setting uniforms
-            gl.uniform4fv(Program.uMaterialDiffuse, object.diffuse);
-            gl.uniform4fv(Program.uMaterialAmbient, object.ambient);
-            gl.uniform1i(Program.uWireframe,object.wireframe);
-            
-            //Setting attributes
-            gl.enableVertexAttribArray(Program.aVertexPosition);
-            gl.disableVertexAttribArray(Program.aVertexNormal);
-            gl.disableVertexAttribArray(Program.aVertexColor);
-            
-            gl.bindBuffer(gl.ARRAY_BUFFER, object.vbo);
-            gl.vertexAttribPointer(Program.aVertexPosition, 3, gl.FLOAT, false, 0, 0);
-            gl.enableVertexAttribArray(Program.aVertexPosition);
-            
-			if(!object.wireframe){
-				gl.bindBuffer(gl.ARRAY_BUFFER, object.nbo);
-				gl.vertexAttribPointer(Program.aVertexNormal, 3, gl.FLOAT, false, 0, 0);
-				gl.enableVertexAttribArray(Program.aVertexNormal);
-            }
-			gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, object.ibo);
-			
-			if (object.wireframe){
-                gl.drawElements(gl.LINES, object.indices.length, gl.UNSIGNED_SHORT,0);
-            }
-            else{
-                gl.drawElements(gl.TRIANGLES, object.indices.length, gl.UNSIGNED_SHORT,0);
-            }
-			
-            gl.bindBuffer(gl.ARRAY_BUFFER, null);
-            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
-            
-        }
-    }
-    catch(err){
-        alert(err);
-        console.error(err.description);
-    }
-}
-
-
-/**
-* Entry point. This function is invoked when the page is loaded
-*/
-var app = null;
-function runWebGLApp() {
-    app = new WebGLApp("canvas-element-id")
-    app.configureGLHook = configure;
-    app.loadSceneHook   = load;
-    app.drawSceneHook   = draw;
-    app.run();
-}
-</script>
-</head>
-
-<body onLoad='runWebGLApp()'>
-<div id='top'>
-<h1>WebGL Beginner's Guide - Chapter 6</h1>
-<h2>Hero - Using Colors in Directional Lights</h2>
-<div id='logo-packt'><img src='packt.gif'/></div>
-<p></p>
-</div>
-
-<div id='contents'>
-<div id='canvasContainer'>
-<canvas id='canvas-element-id' width='480' height='400'>
-Your browser does not support the HTML5 canvas element.
-</canvas>
-</div>
-</div>
-
-<div id='bottom'>
-<table style='padding=0px'>
-<tr>
-	<td>
-	<table>
-		<tr>
-			<td> Light #1:</td><td><div id='colorSelectorLightOne' class='colorSelector'><div style='background-color:rgb(255,0,0)'></div></div></td>
-			<td>X:</td><td id='slider-x1-value' width='30px'>0.0</td><td width='150px'><div id='slider-x1'/></td>
-			<td>Y:</td><td id='slider-y1-value' width='30px'>7.0</td><td width='150px'><div id='slider-y1'/></td>
-			<td>Z:</td><td id='slider-z1-value' width='30px'>3.0</td><td width='150px'><div id='slider-z1'/></td>
-		</tr>
-		<tr>
-			<td> Light #2:</td><td><div id='colorSelectorLightTwo' class='colorSelector'><div style='background-color:rgb(0,255,0)'></div></div></td>
-			<td>X:</td><td id='slider-x2-value' width='30px'>2.5</td><td width='150px'><div id='slider-x2'/></td>
-			<td>Y:</td><td id='slider-y2-value' width='30px'>3.0</td><td width='150px'><div id='slider-y2'/></td>
-			<td>Z:</td><td id='slider-z2-value' width='30px'>3.0</td><td width='150px'><div id='slider-z2'/></td>
-		</tr>
-		<tr>
-			<td> Light #3:</td><td><div id='colorSelectorLightThree' class='colorSelector'><div style='background-color:rgb(0,0,255)'></div></div></td>
-			<td>X:</td><td id='slider-x3-value' width='30px'>-2.5</td><td width='150px'><div id='slider-x3'/></td>
-			<td>Y:</td><td id='slider-y3-value' width='30px'>3.0</td><td width='150px'><div id='slider-y3'/></td>
-			<td>Z:</td><td id='slider-z3-value' width='30px'>3.0</td><td width='150px'><div id='slider-z3'/></td>
-		</tr>
-	</table>
-	</td>
-</tr>	
-<tr>
-    <td> 
-    <table cellspacing=4px style='vertical-align:top'>
-		<tr>
-			<td>Light Cone CutOff:</td><td id='slider-cutoff-value'>0.6</td><td width='150px'><div id='slider-cutoff'/></td>
-		</tr>
-        <tr>
-            <td align='center'>
-            <div id='opt-type' >
-                    <input type='radio' id='opt-tracking' name='typecam' /><label for='opt-tracking'>Tracking</label>
-                    <input type='radio' id='opt-orbiting' name='typecam' checked='checked'/><label for='opt-orbiting'>Orbiting</label>
-            </div>
-            </td>
-            <td align='center'>
-				<button id='btnGoHome'>Go Home</button>
-            </td>
-        </tr>
-    </table>
-    </td>
-</tr>
-</table>
-</div>
-<script> 
-
-
-$('#slider-x1').slider({value:0.0, min:-15, max:15, step:0.1, slide:function(){updateLightPosition(1)}, 	change:function(){updateLightPosition(1)}});
-$('#slider-y1').slider({value:7.0, min:-15, max:15, step:0.1, slide:function(){updateLightPosition(1)}, 	change:function(){updateLightPosition(1)}});
-$('#slider-z1').slider({value:3.0, min:-15, max:15, step:0.1, slide:function(){updateLightPosition(1)}, 	change:function(){updateLightPosition(1)}});
-
-$('#slider-x2').slider({value:2.5, min:-15, max:15, step:0.1, slide:function(){updateLightPosition(2)}, 	change:function(){updateLightPosition(2)}});
-$('#slider-y2').slider({value:3.0, min:-15, max:15, step:0.1, slide:function(){updateLightPosition(2)}, 	change:function(){updateLightPosition(2)}});
-$('#slider-z2').slider({value:3.0, min:-15, max:15, step:0.1, slide:function(){updateLightPosition(2)}, 	change:function(){updateLightPosition(2)}});
-
-$('#slider-x3').slider({value:-2.5, min:-15, max:15, step:0.1, slide:function(){updateLightPosition(3)}, 	change:function(){updateLightPosition(3)}});
-$('#slider-y3').slider({value:3.0,  min:-15, max:15, step:0.1, slide:function(){updateLightPosition(3)}, 	change:function(){updateLightPosition(3)}});
-$('#slider-z3').slider({value:3.0,  min:-15, max:15, step:0.1, slide:function(){updateLightPosition(3)}, 	change:function(){updateLightPosition(3)}});
-
-$('#slider-cutoff').slider({value:0.8, min:0.0, max:1, step:0.05, slide:updateCutOff});
-
-function updateCutOff(){
-    var v = $('#slider-cutoff').slider("value");
-    gl.uniform1f(Program.uCutOff, v);
-    $('#slider-cutoff-value').html(v);
-	draw();
-}
-
-
-
-function updateLightPosition(a){
-    var x = $('#slider-x'+a).slider("value");
-    var y = $('#slider-y'+a).slider("value");
-    var z = $('#slider-z'+a).slider("value");
-    
-    $('#slider-x'+a+'-value').html(x);
-    $('#slider-y'+a+'-value').html(y);
-    $('#slider-z'+a+'-value').html(z);
-    
-    switch (a){
-    	case 1: gl.uniform3fv(Program.uPositionLightOne, [x,y,z]); break;
-    	case 2: gl.uniform3fv(Program.uPositionLightTwo, [x,y,z]); break;
-    	case 3: gl.uniform3fv(Program.uPositionLightThree, [x,y,z]); break;
-    }
-    
-	draw();
-}
-
-
-$('#opt-type').buttonset();
-$('#btnGoHome').button();
-
-
-
-$('#opt-tracking').click(function(){
-    camera.goHome();
-    console.info('CameraType = Tracking');
-    camera.setType(CAMERA_TRACKING_TYPE);
-    
-    app.refresh();
-});
-
-$('#opt-orbiting').click(function(){
-    camera.goHome();
-    console.info('CameraType = Orbiting');
-    camera.setType(CAMERA_ORBITING_TYPE);
-    app.refresh();
-});
-
-
-
-
-$('#btnGoHome').click(
-    function(){
-        camera.goHome();
-        app.refresh();
-});
-
-
-
-</script>
-<script>cview.run(cview.MODE_VIEW,false,470);</script>
-</body>
-</html>

1727_06/ch6_ColorsOnWall_LightArrays.html

-<html>
-
-<head>
-<title>WebGL Beginner's Guide - Chapter 6 - Multiple Lights using GLSL Arrays</title>
-<meta http-equiv='content-type' content='text/html; charset=ISO-8859-1'>
-
-<!-- CSS Styles //-->
-<link href='css/styles.css'   type='text/css' rel='stylesheet'>
-<link href='css/prettify_desert.css'  type='text/css' rel='stylesheet'/>
-<link href='css/colorpicker.css'  type='text/css' rel='stylesheet'/>
-
-<link href='css/smoothness/jquery-ui-1.8.13.custom.css' type='text/css' rel='stylesheet' />
-<!-- GUI Libraries //-->
-<script type='text/javascript' src='js/gui/jquery-1.5.1.min.js'></script>
-<script type='text/javascript' src='js/gui/jquery-ui-1.8.13.custom.min.js'></script> 
-<script type='text/javascript' src='js/gui/colorpicker.js'></script>
-<script type='text/javascript' src='js/gui/prettify.js'></script>
-<script type='text/javascript' src='js/gui/codeview.js'></script>
-<!-- MATH Libraries //-->
-<script type='text/javascript' src='js/math/glMatrix-0.9.5.min.js'></script>
-<!-- WEBGL Libraries //-->
-<script type='text/javascript' src='js/webgl/Globals.js'></script>
-<script type='text/javascript' src='js/webgl/Utils.js'></script>
-<script type='text/javascript' src='js/webgl/Program.js'></script>
-<script type='text/javascript' src='js/webgl/Scene.js'></script>
-<script type='text/javascript' src='js/webgl/Axis.js'></script>
-<script type='text/javascript' src='js/webgl/Floor.js'></script>
-<script type='text/javascript' src='js/webgl/Camera.js'></script>
-<script type='text/javascript' src='js/webgl/CameraInteractor.js'></script>
-<script type='text/javascript' src='js/webgl/SceneTransforms.js'></script>
-<script type='text/javascript' src='js/webgl/Lights.js'></script>
-<script type='text/javascript' src='js/webgl/WebGLApp.js'></script>
-
-<script id="shader-vs" type="x-shader/x-vertex">
-
-attribute vec3 aVertexPosition;
-attribute vec3 aVertexNormal;
-attribute vec4 aVertexColor;
-
-uniform mat4 uMVMatrix;
-uniform mat4 uPMatrix;
-uniform mat4 uNMatrix;
-
-uniform vec4 uMaterialDiffuse;
-uniform vec3 uPositionLight[3];
-
-varying vec3 vNormal;
-varying vec3 vLightRay[3];
-varying vec3 vEyeVec;
-
-
-void main(void) {
- 
- //Transformed vertex position
- vec4 vertex = uMVMatrix * vec4(aVertexPosition, 1.0);
- 
- //Transformed normal position
- vNormal = vec3(uNMatrix * vec4(aVertexNormal, 1.0));
- 
- //Transformed light position
- vec4 positionLight[3];
- 
- for(int i=0; i < 3; i++){
-	positionLight[i] = uMVMatrix * vec4(uPositionLight[i], 1.0);
-	vLightRay[i] = vertex.xyz - positionLight[i].xyz;
- }
- 
- //Vector Eye 
- vEyeVec = -vec3(vertex.xyz);
- 
- //Final vertex position
- gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
-
-}	
-</script>
-
-<script id="shader-fs" type="x-shader/x-fragment">
-#ifdef GL_ES
-precision highp float;
-#endif
-
-//object uniforms
-uniform bool uWireframe;
-uniform vec4 uMaterialAmbient;
-uniform vec4 uMaterialDiffuse;
-
-//light uniforms
-uniform bool uLightSource;
-uniform vec4 uLightAmbient;
-uniform vec4 uLightDiffuse[3];
-uniform float uCutOff;   
-
-//varyings
-varying vec3 vNormal;
-varying vec3 vLightRay[3];
-varying vec3 vEyeVec;
-
-void main(void)
-{
-	if(uWireframe || uLightSource){
-		gl_FragColor = uMaterialDiffuse;
-	}
-	else{
-	    vec4 Ia = uLightAmbient * uMaterialAmbient;	//Ambient component: one for all
-	    vec4 finalColor = vec4(0.0,0.0,0.0,1.0);	//Color that will be assigned to gl_FragColor
-								
-		vec3 N = normalize(vNormal);
-		vec3 L = vec3(0.0);
-		float lambertTerm = 0.0;
-		
-		for(int i = 0; i < 3; i++){					//For each light
-			
-			L = normalize(vLightRay[i]);			//Calculate reflexion
-			lambertTerm = dot(N, -L);
-			
-			if (lambertTerm > uCutOff){			
-				finalColor += uLightDiffuse[i] * uMaterialDiffuse *lambertTerm; //Add diffuse component, one per light
-			}
-		}
-	
-    	//Final color
-        finalColor  += Ia;
-        finalColor.a = 1.0;				//Add ambient component: one for all					
-    	gl_FragColor = finalColor;		//The alpha value in this example will be 1.0
-  }
-
-}
-</script>
-
-<script id='code-js' type="text/javascript">
-
-var camera = null,
-interactor = null,
-transforms = null;
-
-
-function configure(){
-    gl.clearColor(0.3,0.3,0.3, 1.0);
-    gl.clearDepth(100.0);
-    gl.enable(gl.DEPTH_TEST);
-    gl.depthFunc(gl.LEQUAL);
-    
-    //Creates and sets up the camera location
-    camera = new Camera(CAMERA_ORBITING_TYPE);
-    camera.goHome([0,5,30]);
-    camera.setFocus([0.0,0.0,0.0]);
-	camera.setAzimuth(-47);
-	camera.setElevation(-3);
-    camera.hookRenderer = draw;
-    
-    //Creates and sets up the mouse and keyboard interactor
-    interactor = new CameraInteractor(camera, document.getElementById('canvas-element-id'));
-    
-    //Scene Transforms
-    transforms = new SceneTransforms(camera);
-   
-    //init transforms
-    transforms.init();
-	
-	//init Lights
-	var redLight = new Light('red');
-	redLight.setPosition([0,7,3]);
-	redLight.setDiffuse([1.0,0.0,0.0,1.0]);
-	
-	var greenLight = new Light('green');
-	greenLight.setPosition([2.5,3,3]);
-	greenLight.setDiffuse([0.0,1.0,0.0,1.0]);
-	
-	var blueLight = new Light('blue');
-	blueLight.setPosition([-2.5,3,3]);
-	blueLight.setDiffuse([0.0,0.0,1.0,1.0]);
-	
-	Lights.add(redLight);
-	Lights.add(greenLight);
-	Lights.add(blueLight);	
-	
-	//init Program
-	var attributeList = ["aVertexPosition",
-					"aVertexNormal",
-					"aVertexColor"];
-
-	var uniformList = [	"uPMatrix", 
-					"uMVMatrix", 
-					"uNMatrix",
-					"uMaterialDiffuse",
-					"uMaterialAmbient",
-					"uLightAmbient",
-					"uLightDiffuse",
-					"uPositionLight",
-					"uWireframe",
-					"uLightSource",
-					"uCutOff"
-					];
-				
-	
-	
-	Program.load(attributeList, uniformList);	
-	gl.uniform4fv(Program.uLightAmbient ,  [1.0,1.0,1.0,1.0]);
-	gl.uniform3fv(Program.uPositionLight, Lights.getArray('position'));
-	gl.uniform4fv(Program.uLightDiffuse,  Lights.getArray('diffuse'));
-	gl.uniform1f(Program.uCutOff, 0.4);
-
-}
-
-
-/**
-* Loads the scene. The order in which the objects are added determines the rendering order
-* 
-*/
-function load(){
-  
-    Floor.build(80,2);
-    Scene.addObject(Floor);
-    Scene.loadObject('models/geometry/wall.json','wall');
-	Scene.loadObject('models/geometry/smallsph.json','light1');
-	Scene.loadObject('models/geometry/smallsph.json','light2');
-	Scene.loadObject('models/geometry/smallsph.json','light3');
-}
-
-
-/**
-* invoked on every rendering cycle
-*/
-function draw() {
-    gl.viewport(0, 0, c_width, c_height);
-    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-    transforms.updatePerspective();
-    
-    try{
-        
-        gl.uniform3fv(Program.uPositionLight, Lights.getArray('position'));
-        
-        for (var i = 0; i < Scene.objects.length; i++){
-            
-            var object = Scene.objects[i];
-			
-			transforms.calculateModelView();           
-            transforms.push();
-			
-			gl.uniform1i(Program.uLightSource,false);
-			
-			if (object.alias == 'light1'){
-                mat4.translate(transforms.mvMatrix,Lights.get(0).position);
-				object.diffuse = Lights.get(0).diffuse;
-				gl.uniform1i(Program.uLightSource,true);
-                
-            }
-			
-			if (object.alias == 'light2'){
-				mat4.translate(transforms.mvMatrix,Lights.get(1).position);
-				object.diffuse = Lights.get(1).diffuse;
-				gl.uniform1i(Program.uLightSource,true);
-			}
-			
-			if (object.alias == 'light3'){
-				mat4.translate(transforms.mvMatrix,Lights.get(2).position);
-				object.diffuse = Lights.get(2).diffuse;
-				gl.uniform1i(Program.uLightSource,true);
-			}
-			
-            transforms.setMatrixUniforms(Program);
-            transforms.pop();
-   
-            //Setting uniforms
-            gl.uniform4fv(Program.uMaterialDiffuse, object.diffuse);
-            gl.uniform4fv(Program.uMaterialAmbient, object.ambient);
-            gl.uniform1i(Program.uWireframe,object.wireframe);
-            
-            //Setting attributes
-            gl.enableVertexAttribArray(Program.aVertexPosition);
-            gl.disableVertexAttribArray(Program.aVertexNormal);
-            gl.disableVertexAttribArray(Program.aVertexColor);
-            
-            gl.bindBuffer(gl.ARRAY_BUFFER, object.vbo);
-            gl.vertexAttribPointer(Program.aVertexPosition, 3, gl.FLOAT, false, 0, 0);
-            gl.enableVertexAttribArray(Program.aVertexPosition);
-            
-			if(!object.wireframe){
-				gl.bindBuffer(gl.ARRAY_BUFFER, object.nbo);
-				gl.vertexAttribPointer(Program.aVertexNormal, 3, gl.FLOAT, false, 0, 0);
-				gl.enableVertexAttribArray(Program.aVertexNormal);
-            }
-			gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, object.ibo);
-			
-			if (object.wireframe){
-                gl.drawElements(gl.LINES, object.indices.length, gl.UNSIGNED_SHORT,0);
-            }
-            else{
-                gl.drawElements(gl.TRIANGLES, object.indices.length, gl.UNSIGNED_SHORT,0);
-            }
-			
-            gl.bindBuffer(gl.ARRAY_BUFFER, null);
-            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
-            
-        }
-    }
-    catch(err){
-        alert(err);
-        console.error(err.description);
-    }
-}
-
-
-/**
-* Entry point. This function is invoked when the page is loaded
-*/
-var app = null;
-function runWebGLApp() {
-    app = new WebGLApp("canvas-element-id")
-    app.configureGLHook = configure;
-    app.loadSceneHook   = load;
-    app.drawSceneHook   = draw;
-    app.run();
-}
-</script>
-</head>
-
-<body onLoad='runWebGLApp()'>
-<div id='top'>
-<h1>WebGL Beginner's Guide - Chapter 6</h1>
-<h2>Using GLSL Array Uniforms to handle Multiple Lights</h2>
-<div id='logo-packt'><img src='packt.gif'/></div>
-<p></p>
-</div>
-
-<div id='contents'>
-<div id='canvasContainer'>
-<canvas id='canvas-element-id' width='480' height='400'>
-Your browser does not support the HTML5 canvas element.
-</canvas>
-</div>
-</div>
-
-<div id='bottom'>
-<table style='padding=0px'>
-<tr>
-	<td>
-	<table>
-		<tr>
-			<td> Light #1:</td><td><div id='colorSelectorLightOne' class='colorSelector'><div style='background-color:rgb(255,0,0)'></div></div></td>
-			<td>X:</td><td id='slider-x1-value' width='30px'>0.0</td><td width='150px'><div id='slider-x1'/></td>
-			<td>Y:</td><td id='slider-y1-value' width='30px'>7.0</td><td width='150px'><div id='slider-y1'/></td>
-			<td>Z:</td><td id='slider-z1-value' width='30px'>3.0</td><td width='150px'><div id='slider-z1'/></td>
-		</tr>
-		<tr>
-			<td> Light #2:</td><td><div id='colorSelectorLightTwo' class='colorSelector'><div style='background-color:rgb(0,255,0)'></div></div></td>
-			<td>X:</td><td id='slider-x2-value' width='30px'>2.5</td><td width='150px'><div id='slider-x2'/></td>
-			<td>Y:</td><td id='slider-y2-value' width='30px'>3.0</td><td width='150px'><div id='slider-y2'/></td>
-			<td>Z:</td><td id='slider-z2-value' width='30px'>3.0</td><td width='150px'><div id='slider-z2'/></td>
-		</tr>
-		<tr>
-			<td> Light #3:</td><td><div id='colorSelectorLightThree' class='colorSelector'><div style='background-color:rgb(0,0,255)'></div></div></td>
-			<td>X:</td><td id='slider-x3-value' width='30px'>-2.5</td><td width='150px'><div id='slider-x3'/></td>
-			<td>Y:</td><td id='slider-y3-value' width='30px'>3.0</td><td width='150px'><div id='slider-y3'/></td>
-			<td>Z:</td><td id='slider-z3-value' width='30px'>3.0</td><td width='150px'><div id='slider-z3'/></td>
-		</tr>
-	</table>
-	</td>
-</tr>	
-<tr>
-    <td> 
-    <table cellspacing=4px style='vertical-align:top'>
-		<tr>
-			<td>Light Cone CutOff:</td><td id='slider-cutoff-value'>0.6</td><td width='150px'><div id='slider-cutoff'/></td>
-		</tr>
-        <tr>
-            <td align='center'>
-            <div id='opt-type' >
-                    <input type='radio' id='opt-tracking' name='typecam' /><label for='opt-tracking'>Tracking</label>
-                    <input type='radio' id='opt-orbiting' name='typecam' checked='checked'/><label for='opt-orbiting'>Orbiting</label>
-            </div>
-            </td>
-            <td align='center'>
-				<button id='btnGoHome'>Go Home</button>
-            </td>
-        </tr>
-    </table>
-    </td>
-</tr>
-</table>
-</div>
-<script> 
-
-
-$('#slider-x1').slider({value:0.0, min:-15, max:15, step:0.1, slide:function(){updateLightPosition(1)}, 	change:function(){updateLightPosition(1)}});
-$('#slider-y1').slider({value:7.0, min:-15, max:15, step:0.1, slide:function(){updateLightPosition(1)}, 	change:function(){updateLightPosition(1)}});
-$('#slider-z1').slider({value:3.0, min:-15, max:15, step:0.1, slide:function(){updateLightPosition(1)}, 	change:function(){updateLightPosition(1)}});
-
-$('#slider-x2').slider({value:2.5, min:-15, max:15, step:0.1, slide:function(){updateLightPosition(2)}, 	change:function(){updateLightPosition(2)}});
-$('#slider-y2').slider({value:3.0, min:-15, max:15, step:0.1, slide:function(){updateLightPosition(2)}, 	change:function(){updateLightPosition(2)}});
-$('#slider-z2').slider({value:3.0, min:-15, max:15, step:0.1, slide:function(){updateLightPosition(2)}, 	change:function(){updateLightPosition(2)}});
-
-$('#slider-x3').slider({value:-2.5, min:-15, max:15, step:0.1, slide:function(){updateLightPosition(3)}, 	change:function(){updateLightPosition(3)}});
-$('#slider-y3').slider({value:3.0,  min:-15, max:15, step:0.1, slide:function(){updateLightPosition(3)}, 	change:function(){updateLightPosition(3)}});
-$('#slider-z3').slider({value:3.0,  min:-15, max:15, step:0.1, slide:function(){updateLightPosition(3)}, 	change:function(){updateLightPosition(3)}});
-
-$('#slider-cutoff').slider({value:0.4, min:0.0, max:1, step:0.05, slide:updateCutOff});
-
-function updateCutOff(){
-    var v = $('#slider-cutoff').slider("value");
-    gl.uniform1f(Program.uCutOff, v);
-    $('#slider-cutoff-value').html(v);
-	draw();
-}
-
-
-
-function updateLightPosition(a){
-    var x = $('#slider-x'+a).slider("value");
-    var y = $('#slider-y'+a).slider("value");
-    var z = $('#slider-z'+a).slider("value");
-    
-    $('#slider-x'+a+'-value').html(x);
-    $('#slider-y'+a+'-value').html(y);
-    $('#slider-z'+a+'-value').html(z);
-    
-    switch (a){
-    	case 1: Lights.get(0).position = [x,y,z]; break;
-    	case 2: Lights.get(1).position = [x,y,z]; break;
-    	case 3: Lights.get(2).position = [x,y,z]; break;
-    }
-    
-	draw();
-}
-
-
-$('#opt-type').buttonset();
-$('#btnGoHome').button();
-
-
-
-$('#opt-tracking').click(function(){
-    camera.goHome();
-    console.info('CameraType = Tracking');
-    camera.setType(CAMERA_TRACKING_TYPE);
-    
-    app.refresh();
-});
-
-$('#opt-orbiting').click(function(){
-    camera.goHome();
-    console.info('CameraType = Orbiting');
-    camera.setType(CAMERA_ORBITING_TYPE);
-    app.refresh();
-});
-
-
-
-
-$('#btnGoHome').click(
-    function(){
-        camera.goHome();
-        app.refresh();
-});
-
-
-
-</script>
-<script>cview.run(cview.MODE_VIEW,false,470);</script>
-</body>
-</html>

1727_06/ch6_Cube.html

+<html>
+
+<head>
+<title>WebGL Beginner's Guide - Chapter 6 - Using Colors On Objects</title>
+<meta http-equiv='content-type' content='text/html; charset=ISO-8859-1'>
+
+<!-- CSS Styles //-->
+<link href='css/styles.css'   type='text/css' rel='stylesheet'>
+<link href='css/prettify_desert.css'  type='text/css' rel='stylesheet'/>
+<link href='css/colorpicker.css'  type='text/css' rel='stylesheet'/>
+
+<link href='css/smoothness/jquery-ui-1.8.13.custom.css' type='text/css' rel='stylesheet' />
+<!-- GUI Libraries //-->
+<script type='text/javascript' src='js/gui/jquery-1.5.1.min.js'></script>
+<script type='text/javascript' src='js/gui/jquery-ui-1.8.13.custom.min.js'></script> 
+<script type='text/javascript' src='js/gui/colorpicker.js'></script>
+<script type='text/javascript' src='js/gui/prettify.js'></script>
+<script type='text/javascript' src='js/gui/codeview.js'></script>
+<!-- MATH Libraries //-->
+<script type='text/javascript' src='js/math/glMatrix-0.9.5.min.js'></script>
+<!-- WEBGL Libraries //-->
+<script type='text/javascript' src='js/webgl/Globals.js'></script>
+<script type='text/javascript' src='js/webgl/Utils.js'></script>
+<script type='text/javascript' src='js/webgl/Program.js'></script>
+<script type='text/javascript' src='js/webgl/Scene.js'></script>
+<script type='text/javascript' src='js/webgl/Axis.js'></script>
+<script type='text/javascript' src='js/webgl/Floor.js'></script>
+<script type='text/javascript' src='js/webgl/Camera.js'></script>
+<script type='text/javascript' src='js/webgl/CameraInteractor.js'></script>
+<script type='text/javascript' src='js/webgl/SceneTransforms.js'></script>
+<script type='text/javascript' src='js/webgl/WebGLApp.js'></script>
+
+
+
+<script id="shader-vs" type="x-shader/x-vertex">
+//geometry
+attribute vec3 aVertexPosition;
+attribute vec3 aVertexNormal;
+attribute vec4 aVertexColor;
+uniform bool uUseVertexColor;
+uniform vec4 uMaterialDiffuse;
+uniform vec4 uMaterialAmbient;
+uniform float uAlpha;
+
+//matrices
+uniform mat4 uMVMatrix;
+uniform mat4 uPMatrix;
+uniform mat4 uNMatrix;
+
+//lights
+uniform vec3 uLightPosition;
+uniform vec4 uLightAmbient;
+uniform vec4 uLightDiffuse;
+uniform bool uUseLambert;
+
+//varyings
+varying vec4 vColor;
+
+
+void main(void) {
+
+ //Transformed vertex position
+ vec4 vertex = uMVMatrix * vec4(aVertexPosition, 1.0);
+ 
+ float lambertTerm = 1.0;
+
+ if (uUseLambert){
+	//Transformed normal position
+	vec3 normal = vec3(uNMatrix * vec4(aVertexNormal, 1.0));
+ 
+	//light direction: pointing at the origin
+	vec3 lightDirection = normalize(-uLightPosition);
+ 
+	//weighting factor
+	lambertTerm = max(dot(normal,-lightDirection),0.20);
+ }
+
+ //reading vertex color
+ vec4 Ia = uLightAmbient * uMaterialAmbient;
+ vec4 Id = vec4(0.0);
+ 
+ if (uUseVertexColor){
+	Id = uLightDiffuse * aVertexColor * lambertTerm;
+ }
+ else {
+	Id = uLightDiffuse * uMaterialDiffuse * lambertTerm;
+ }
+ 
+ vColor = Ia + Id;
+ vColor.a = uAlpha;
+ 
+ //Final vertex position
+ gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+
+}	
+</script>
+
+<script id="shader-fs" type="x-shader/x-fragment">
+#ifdef GL_ES
+precision highp float;
+#endif
+
+//geometry
+uniform vec4 uMaterialDiffuse;
+uniform bool uWireframe;
+
+//varying
+varying vec4 vColor;
+
+void main(void)
+{
+	if(uWireframe){
+		gl_FragColor = uMaterialDiffuse;
+	}
+	else{
+    	gl_FragColor = vColor;
+    }
+
+}
+</script>
+
+<script id='code-js' type="text/javascript">
+
+var camera = null;
+var interactor = null;
+var transforms = null;
+var useVertexColors = false;
+
+function configure(){
+    gl.clearColor(0.3,0.3,0.3, 1.0);
+    gl.clearDepth(100.0);
+    gl.enable(gl.DEPTH_TEST);
+	gl.depthFunc(gl.LESS);
+	//gl.disable(gl.DEPTH_TEST);
+	//gl.enable(gl.BLEND);
+	//gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+    
+
+    //Creates and sets up the camera location
+    camera = new Camera(CAMERA_ORBITING_TYPE);
+    camera.goHome([0,0,4]);
+    camera.setFocus([0.0,0.0,0.0]);
+	camera.setAzimuth(45);
+	camera.setElevation(-30);
+    camera.hookRenderer = draw;
+    
+    //Creates and sets up the mouse and keyboard interactor
+    interactor = new CameraInteractor(camera, document.getElementById('canvas-element-id'));
+    
+    //Scene Transforms
+    transforms = new SceneTransforms(camera);
+   
+    //init transforms
+    transforms.init();
+	
+	//Program
+	attributeList = ["aVertexPosition",
+					"aVertexNormal",
+					"aVertexColor"];
+
+	uniformList = [	"uPMatrix", 
+					"uMVMatrix", 
+					"uNMatrix",
+					"uMaterialDiffuse",
+					"uMaterialAmbient",
+					"uLightAmbient",
+					"uLightDiffuse",
+					"uLightPosition",
+					"uWireframe",
+					"uAlpha",
+					"uUseVertexColor",
+					"uUseLambert"
+					];
+	
+	
+	Program.load(attributeList, uniformList);
+	
+	gl.uniform3fv(Program.uLightPosition,   [0,5,20]);
+	gl.uniform3fv(Program.uLightAmbient,    [1.0,1.0,1.0,1.0]);
+	gl.uniform4fv(Program.uLightDiffuse,    [1.0,1.0,1.0,1.0]);
+	gl.uniform1f(Program.uAlpha, 1.0);
+	gl.uniform1i(Program.uUseVertexColor, useVertexColors);
+	gl.uniform1i(Program.uUseLambert, true);
+
+}
+
+
+
+/**
+* Loads the scene
+*/
+function load(){
+    Scene.loadObject('models/geometry/simpleCube.json','cube1', {hidden:false});
+	Scene.loadObject('models/geometry/complexCube.json','cube2', {hidden:true});
+}
+
+
+
+
+/**
+* invoked on every rendering cycle
+*/
+function draw() {
+    gl.viewport(0, 0, c_width, c_height);
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    transforms.updatePerspective();
+
+    try{
+        for (var i = 0; i < Scene.objects.length; i++){
+            
+            var object = Scene.objects[i];
+			
+			if (object.hidden == true) continue;
+			
+			transforms.calculateModelView();           
+            transforms.push();
+            transforms.setMatrixUniforms();
+            transforms.pop();
+   
+            //Setting uniforms
+            gl.uniform4fv(Program.uMaterialDiffuse, object.diffuse);
+            gl.uniform4fv(Program.uMaterialAmbient, object.ambient);
+            gl.uniform1i(Program.uWireframe,object.wireframe);
+			
+            
+            //Setting attributes
+            gl.enableVertexAttribArray(Program.aVertexPosition);
+            gl.disableVertexAttribArray(Program.aVertexNormal);
+            gl.disableVertexAttribArray(Program.aVertexColor);
+            
+            gl.bindBuffer(gl.ARRAY_BUFFER, object.vbo);
+            gl.vertexAttribPointer(Program.aVertexPosition, 3, gl.FLOAT, false, 0, 0);
+            gl.enableVertexAttribArray(Program.aVertexPosition);
+			
+			gl.uniform1i(Program.uUseVertexColor, useVertexColors);
+			
+			if (object.scalars != null && useVertexColors){
+			    gl.enableVertexAttribArray(Program.aVertexColor);
+				gl.bindBuffer(gl.ARRAY_BUFFER, object.cbo);
+				gl.vertexAttribPointer(Program.aVertexColor, 4, gl.FLOAT, false, 0, 0);
+				
+			}
+			
+            
+			if(!object.wireframe){
+				gl.bindBuffer(gl.ARRAY_BUFFER, object.nbo);
+				gl.vertexAttribPointer(Program.aVertexNormal, 3, gl.FLOAT, false, 0, 0);
+				gl.enableVertexAttribArray(Program.aVertexNormal);
+            }
+			gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, object.ibo);
+			
+			if (object.wireframe){
+                gl.drawElements(gl.LINES, object.indices.length, gl.UNSIGNED_SHORT,0);
+            }