Commits

Brandon Jones committed b40db7b

Chapter 7 code update, Feb 12 2010

Comments (0)

Files changed (11)

1727_07/ch7_Cubemap.html

+<html>
+
+<head>
+<title>WebGL Beginner's Guide - Chapter 7 - Cubemap</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/Texture.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 vec2 aVertexTextureCoords;
+
+//matrices
+uniform mat4 uMVMatrix;
+uniform mat4 uPMatrix;
+uniform mat4 uNMatrix;
+
+//varyings
+varying vec2 vTextureCoord;
+varying vec3 vVertexNormal;
+
+void main(void) {
+	//Final vertex position
+	gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+	vTextureCoord = aVertexTextureCoords;
+	vVertexNormal = (uNMatrix * vec4(aVertexPosition, 1.0)).xyz;
+}	
+</script>
+
+<script id="shader-fs" type="x-shader/x-fragment">
+#ifdef GL_ES
+precision highp float;
+#endif
+
+//sampler
+uniform sampler2D uSampler;
+uniform samplerCube uCubeSampler;
+
+//varying
+varying vec2 vTextureCoord;
+varying vec3 vVertexNormal;
+
+void main(void)
+{	
+	gl_FragColor = texture2D(uSampler, vTextureCoord) * textureCube(uCubeSampler, vVertexNormal);
+}
+</script>
+
+<script id='code-js' type="text/javascript">
+
+var camera = null;
+var interactor = null;
+var transforms = null;
+var useVertexColors = false;
+var texture = null;
+var cubeTexture = 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);
+
+    //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",
+					"aVertexTextureCoords"];
+
+	uniformList = [	"uPMatrix", 
+					"uMVMatrix", 
+					"uNMatrix",
+					"uMaterialDiffuse",
+					"uMaterialAmbient",
+					"uLightAmbient",
+					"uLightDiffuse",
+					"uLightPosition",
+					"uWireframe",
+					"uAlpha",
+					"uUseVertexColor",
+					"uUseLambert",
+					"uSampler",
+					"uCubeSampler"
+					];
+	
+	
+	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);
+	
+	//Init textures
+	texture = new Texture();
+	texture.setImage('textures/webgl.png');
+	
+	//Init Cubmap
+	cubeTexture = gl.createTexture();
+	
+    gl.bindTexture(gl.TEXTURE_CUBE_MAP, cubeTexture);
+    gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+	
+	function loadCubemapFace(gl, target, texture, url) {
+		var image = new Image();
+		image.onload = function(){
+	        gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
+	        gl.texImage2D(target, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+			gl.bindTexture(gl.TEXTURE_CUBE_MAP, null);
+		}
+		image.src = url;
+	};
+	
+	loadCubemapFace(gl, gl.TEXTURE_CUBE_MAP_POSITIVE_X, cubeTexture, 'textures/cubemap/positive_x.png');
+	loadCubemapFace(gl, gl.TEXTURE_CUBE_MAP_NEGATIVE_X, cubeTexture, 'textures/cubemap/negative_x.png');
+	loadCubemapFace(gl, gl.TEXTURE_CUBE_MAP_POSITIVE_Y, cubeTexture, 'textures/cubemap/positive_y.png');
+	loadCubemapFace(gl, gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, cubeTexture, 'textures/cubemap/negative_y.png');
+	loadCubemapFace(gl, gl.TEXTURE_CUBE_MAP_POSITIVE_Z, cubeTexture, 'textures/cubemap/positive_z.png');
+	loadCubemapFace(gl, gl.TEXTURE_CUBE_MAP_NEGATIVE_Z, cubeTexture, 'textures/cubemap/negative_z.png');
+}
+
+
+
+/**
+* Loads the scene
+*/
+function load(){
+	Scene.loadObject('models/geometry/complexCube.json','cube2');
+}
+
+
+
+
+/**
+* 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.texture_coords){
+				gl.enableVertexAttribArray(Program.aVertexTextureCoords);
+				gl.bindBuffer(gl.ARRAY_BUFFER, object.tbo);
+				gl.vertexAttribPointer(Program.aVertexTextureCoords, 2, gl.FLOAT, false, 0, 0);
+				gl.activeTexture(gl.TEXTURE0);
+				gl.bindTexture(gl.TEXTURE_2D, texture.tex);
+				gl.uniform1i(Program.uSampler, 0);
+				
+				gl.activeTexture(gl.TEXTURE1);
+				gl.bindTexture(gl.TEXTURE_CUBE_MAP, cubeTexture);
+				gl.uniform1i(Program.uCubeSampler, 1);
+			}
+			
+            
+			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 7</h1>
+<h2>Cubemap</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'>
+
+</div>
+
+<script>cview.run(cview.MODE_VIEW,false,470);</script>
+</body>
+</html>

1727_07/ch7_Lit_Textured_Cube.html

-<html>
-
-<head>
-<title>WebGL Beginner's Guide - Chapter 7 - Textures with Lighting</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/Texture.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;
-attribute vec2 aVertexTextureCoords;
-
-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;
-varying vec2 vTextureCoord;
-
-
-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);
- vTextureCoord = aVertexTextureCoords;
-
-}	
-</script>
-
-<script id="shader-fs" type="x-shader/x-fragment">
-#ifdef GL_ES
-precision highp float;
-#endif
-
-//geometry
-uniform vec4 uMaterialDiffuse;
-uniform bool uWireframe;
-uniform sampler2D uSampler;
-
-//varying
-varying vec4 vColor;
-varying vec2 vTextureCoord;
-
-void main(void)
-{	
-	gl_FragColor  = vColor *  texture2D(uSampler, vTextureCoord.st);
-}
-</script>
-
-<script id='code-js' type="text/javascript">
-
-var camera = null;
-var interactor = null;
-var transforms = null;
-var useVertexColors = false;
-var texture = 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.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
-
-    //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",
-					"aVertexTextureCoords"];
-
-	uniformList = [	"uPMatrix", 
-					"uMVMatrix", 
-					"uNMatrix",
-					"uMaterialDiffuse",
-					"uMaterialAmbient",
-					"uLightAmbient",
-					"uLightDiffuse",
-					"uLightPosition",
-					"uWireframe",
-					"uAlpha",
-					"uUseVertexColor",
-					"uUseLambert",
-					"uSampler"
-					];
-	
-	
-	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);
-	
-	//Init texture
-	texture = gl.createTexture();
-	
-	var image = new Image();
-	image.onload = function(){
-		gl.bindTexture(gl.TEXTURE_2D, texture);
-		gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
-	    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-	    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-		gl.bindTexture(gl.TEXTURE_2D, null);
-	}
-	image.src = 'textures/webgl.png';
-}
-
-
-
-/**
-* Loads the scene
-*/
-function load(){
-	Scene.loadObject('models/geometry/complexCube.json','cube2');
-}
-
-
-
-
-/**
-* 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.texture_coords){
-				gl.enableVertexAttribArray(Program.aVertexTextureCoords);
-				gl.bindBuffer(gl.ARRAY_BUFFER, object.tbo);
-				gl.vertexAttribPointer(Program.aVertexTextureCoords, 2, gl.FLOAT, false, 0, 0);
-				gl.activeTexture(gl.TEXTURE0);
-				gl.bindTexture(gl.TEXTURE_2D, texture);
-				gl.uniform1i(Program.uSampler, 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 7</h1>
-<h2>Texturing with Lighting</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>
-	</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();
-});
-
-
-
-</script>
-<script>cview.run(cview.MODE_VIEW,false,470);</script>
-</body>
-</html>

1727_07/ch7_Textured_Cube.html

 <html>
 
 <head>
-<title>WebGL Beginner's Guide - Chapter 7 - Sampling Textures</title>
+<title>WebGL Beginner's Guide - Chapter 7 - Textured Cube</title>
 <meta http-equiv='content-type' content='text/html; charset=ISO-8859-1'>
 
 <!-- CSS Styles //-->
 <script id="shader-vs" type="x-shader/x-vertex">
 //geometry
 attribute vec3 aVertexPosition;
-attribute vec2 aVertexTextureCoords;
+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 vec2 vTextureCoord;
+varying vec4 vColor;
 
 void main(void) {
-	//Final vertex position
-	gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
-	vTextureCoord = aVertexTextureCoords;
+
+ //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>
 
 precision highp float;
 #endif
 
-//sampler
-uniform sampler2D uSampler;
+//geometry
+uniform vec4 uMaterialDiffuse;
+uniform bool uWireframe;
 
 //varying
+varying vec4 vColor;
 varying vec2 vTextureCoord;
 
 void main(void)
 {	
-	gl_FragColor = texture2D(uSampler, vTextureCoord);
+	gl_FragColor  = vColor;
 }
 </script>
 
 var interactor = null;
 var transforms = null;
 var useVertexColors = false;
-var texture = 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.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+	gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
 
     //Creates and sets up the camera location
     camera = new Camera(CAMERA_ORBITING_TYPE);
 	//Program
 	attributeList = ["aVertexPosition",
 					"aVertexNormal",
-					"aVertexColor",
-					"aVertexTextureCoords"];
+					"aVertexColor"];
 
 	uniformList = [	"uPMatrix", 
 					"uMVMatrix", 
 					"uWireframe",
 					"uAlpha",
 					"uUseVertexColor",
-					"uUseLambert",
-					"uSampler"
+					"uUseLambert"
 					];
 	
 	
 	gl.uniform1f(Program.uAlpha, 1.0);
 	gl.uniform1i(Program.uUseVertexColor, useVertexColors);
 	gl.uniform1i(Program.uUseLambert, true);
-	
-	//Init texture
-	texture = gl.createTexture();
-	
-	var image = new Image();
-	image.onload = function(){
-		gl.bindTexture(gl.TEXTURE_2D, texture);
-		gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
-	    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-	    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-		gl.bindTexture(gl.TEXTURE_2D, null);
-	}
-	image.src = 'textures/webgl.png';
 }
 
+
+
 /**
 * Loads the scene
 */
 	Scene.loadObject('models/geometry/complexCube.json','cube2');
 }
 
+
+
+
 /**
 * invoked on every rendering cycle
 */
 				
 			}
 			
-			if (object.texture_coords){
-				gl.enableVertexAttribArray(Program.aVertexTextureCoords);
-				gl.bindBuffer(gl.ARRAY_BUFFER, object.tbo);
-				gl.vertexAttribPointer(Program.aVertexTextureCoords, 2, gl.FLOAT, false, 0, 0);
-				gl.activeTexture(gl.TEXTURE0);
-				gl.bindTexture(gl.TEXTURE_2D, texture);
-				gl.uniform1i(Program.uSampler, 0);
-			}
-			
-            
 			if(!object.wireframe){
 				gl.bindBuffer(gl.ARRAY_BUFFER, object.nbo);
 				gl.vertexAttribPointer(Program.aVertexNormal, 3, gl.FLOAT, false, 0, 0);
 			
             gl.bindBuffer(gl.ARRAY_BUFFER, null);
             gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
-            
         }
     }
     catch(err){
     }
 }
 
+
 /**
 * Entry point. This function is invoked when the page is loaded
 */
 <body onLoad='runWebGLApp()'>
 <div id='top'>
 <h1>WebGL Beginner's Guide - Chapter 7</h1>
-<h2>Sampling Textures</h2>
+<h2>Textured Cube</h2>
 <div id='logo-packt'><img src='packt.gif'/></div>
 <p></p>
 </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>
+	</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();
+});
+
+
+
+</script>
 <script>cview.run(cview.MODE_VIEW,false,470);</script>
 </body>
 </html>

1727_07/ch7_Textured_Cube_Finished.html

+<html>
+
+<head>
+<title>WebGL Beginner's Guide - Chapter 7 - Textured Cube</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/Texture.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;
+attribute vec2 aVertexTextureCoords;
+
+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;
+varying vec2 vTextureCoord;
+
+
+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);
+ vTextureCoord = aVertexTextureCoords;
+
+}	
+</script>
+
+<script id="shader-fs" type="x-shader/x-fragment">
+#ifdef GL_ES
+precision highp float;
+#endif
+
+//geometry
+uniform vec4 uMaterialDiffuse;
+uniform bool uWireframe;
+uniform sampler2D uSampler;
+
+//varying
+varying vec4 vColor;
+varying vec2 vTextureCoord;
+
+void main(void)
+{	
+	gl_FragColor = vColor * texture2D(uSampler, vTextureCoord);
+}
+</script>
+
+<script id='code-js' type="text/javascript">
+
+var camera = null;
+var interactor = null;
+var transforms = null;
+var useVertexColors = false;
+var texture = 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.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+
+    //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",
+					"aVertexTextureCoords"];
+
+	uniformList = [	"uPMatrix", 
+					"uMVMatrix", 
+					"uNMatrix",
+					"uMaterialDiffuse",
+					"uMaterialAmbient",
+					"uLightAmbient",
+					"uLightDiffuse",
+					"uLightPosition",
+					"uWireframe",
+					"uAlpha",
+					"uUseVertexColor",
+					"uUseLambert",
+					"uSampler"
+					];
+	
+	
+	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);
+	
+	//Init texture
+	texture = gl.createTexture();
+	
+	var image = new Image();
+	image.onload = function(){
+		gl.bindTexture(gl.TEXTURE_2D, texture);
+		gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+	    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+	    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+		gl.bindTexture(gl.TEXTURE_2D, null);
+	}
+	image.src = 'textures/webgl.png';
+}
+
+
+
+/**
+* Loads the scene
+*/
+function load(){
+	Scene.loadObject('models/geometry/complexCube.json','cube2');
+}
+
+
+
+
+/**
+* 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.texture_coords){
+				gl.enableVertexAttribArray(Program.aVertexTextureCoords);
+				gl.bindBuffer(gl.ARRAY_BUFFER, object.tbo);
+				gl.vertexAttribPointer(Program.aVertexTextureCoords, 2, gl.FLOAT, false, 0, 0);
+				gl.activeTexture(gl.TEXTURE0);
+				gl.bindTexture(gl.TEXTURE_2D, texture);
+				gl.uniform1i(Program.uSampler, 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 7</h1>
+<h2>Textured Cube</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>
+	</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();
+});
+
+
+
+</script>
+<script>cview.run(cview.MODE_VIEW,false,470);</script>
+</body>
+</html>

1727_07/ch7_Unlit_Textured_Cube.html

+<html>
+
+<head>
+<title>WebGL Beginner's Guide - Chapter 7 - Sampling Textures</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/Texture.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 vec2 aVertexTextureCoords;
+
+//matrices
+uniform mat4 uMVMatrix;
+uniform mat4 uPMatrix;
+uniform mat4 uNMatrix;
+
+//varyings
+varying vec2 vTextureCoord;
+
+void main(void) {
+	//Final vertex position
+	gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+	vTextureCoord = aVertexTextureCoords * uNMatrix;
+}	
+</script>
+
+<script id="shader-fs" type="x-shader/x-fragment">
+#ifdef GL_ES
+precision highp float;
+#endif
+
+//sampler
+uniform sampler2D uSampler;
+
+//varying
+varying vec2 vTextureCoord;
+
+void main(void)
+{	
+	gl_FragColor = texture2D(uSampler, vTextureCoord);
+}
+</script>
+
+<script id='code-js' type="text/javascript">
+
+var camera = null;
+var interactor = null;
+var transforms = null;
+var useVertexColors = false;
+var texture = 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.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+
+    //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",
+					"aVertexTextureCoords"];
+
+	uniformList = [	"uPMatrix", 
+					"uMVMatrix", 
+					"uNMatrix",
+					"uMaterialDiffuse",
+					"uMaterialAmbient",
+					"uLightAmbient",
+					"uLightDiffuse",
+					"uLightPosition",
+					"uWireframe",
+					"uAlpha",
+					"uUseVertexColor",
+					"uUseLambert",
+					"uSampler"
+					];
+	
+	
+	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);
+	
+	//Init texture
+	texture = gl.createTexture();
+	
+	var image = new Image();
+	image.onload = function(){
+		gl.bindTexture(gl.TEXTURE_2D, texture);
+		gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+	    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+	    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+		gl.bindTexture(gl.TEXTURE_2D, null);
+	}
+	image.src = 'textures/webgl.png';
+}
+
+/**
+* Loads the scene
+*/
+function load(){
+	Scene.loadObject('models/geometry/complexCube.json','cube2');
+}
+
+/**
+* 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.texture_coords){
+				gl.enableVertexAttribArray(Program.aVertexTextureCoords);
+				gl.bindBuffer(gl.ARRAY_BUFFER, object.tbo);
+				gl.vertexAttribPointer(Program.aVertexTextureCoords, 2, gl.FLOAT, false, 0, 0);
+				gl.activeTexture(gl.TEXTURE0);
+				gl.bindTexture(gl.TEXTURE_2D, texture);
+				gl.uniform1i(Program.uSampler, 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 7</h1>
+<h2>Sampling Textures</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'>
+
+</div>
+
+<script>cview.run(cview.MODE_VIEW,false,470);</script>
+</body>
+</html>

1727_07/textures/cubemap/negative_x.png

Added
New image

1727_07/textures/cubemap/negative_y.png

Added
New image

1727_07/textures/cubemap/negative_z.png

Added
New image

1727_07/textures/cubemap/positive_x.png

Added
New image

1727_07/textures/cubemap/positive_y.png

Added
New image

1727_07/textures/cubemap/positive_z.png

Added
New image