Commits

Diego Cantor  committed 94116a9

Partial update before submitting Chapter 6 rewrite. The blending benchwork has been implemented

  • Participants
  • Parent commits 7aaf95f

Comments (0)

Files changed (16)

File 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);
-    
-	//Enables blending
-	gl.enable(gl.BLEND);
-	//Blending function for transparencies
-    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);    
-    //Enable culling
-    gl.enable(gl.CULL_FACE);
-    
-    
-    //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/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.cullFace(gl.FRONT);
-                gl.drawElements(gl.TRIANGLES, object.indices.length, gl.UNSIGNED_SHORT,0);
-                gl.cullFace(gl.BACK);
-                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>

File 1727_06/ch6_Blending.html

+<!DOCTYPE html>
+<html>
+
+<head>
+<title>WebGL Beginner's Guide - Chapter 6 - Blending Benchwork</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;
+
+
+uniform mat4 uMVMatrix;
+uniform mat4 uPMatrix;
+uniform mat4 uNMatrix;
+uniform vec4 uMaterialDiffuse;
+uniform vec3 uPositionLight;
+
+varying vec3 vNormal;
+varying vec3 vLightRay;
+varying vec4 vFinalColor;
+
+void main(void) {
+	
+vFinalColor = uMaterialDiffuse;
+
+//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 =  vec4(uPositionLight,1.0);
+
+//Light position
+vLightRay = vertex.xyz-positionLight.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 vec4 uLightAmbient;
+uniform vec4 uLightDiffuse;
+uniform vec4 uMaterialAmbient;
+uniform vec4 uMaterialDiffuse;
+uniform bool uUseLambert; 
+
+varying vec3 vNormal;
+varying vec3 vLightRay;
+varying vec4 vFinalColor;
+
+void main(void)
+{
+	if(uWireframe){
+		gl_FragColor = vFinalColor;
+	}
+	else{
+    	vec3 L = normalize(vLightRay);
+		vec3 N = normalize(vNormal);
+
+    	//Lambert's cosine law
+    	float lambertTerm	= clamp(dot(N,-L),0.0,1.0);
+		
+    	//Ambient Term  
+    	vec4 Ia = uLightAmbient * uMaterialAmbient;
+
+    	//Diffuse Term
+    	vec4 Id = uLightDiffuse * uMaterialDiffuse;
+	
+		if (uUseLambert){
+			Id = Id * lambertTerm;
+		}			
+
+	   	gl_FragColor = vec4(Ia.rgb + Id.rgb,uMaterialDiffuse.a);
+    }
+
+}
+</script>
+
+<script id='code-js' type="text/javascript">
+
+var camera           = null,
+ interactor          = null,
+ transforms          = null,
+ useVertexColors     = true,
+ blending            = true,
+ depthTest           = true,
+ culling             = false,
+ lambert             = true,
+ floor               = true,
+ blendingEquation    = undefined,
+ blendingSource      = undefined,
+ blendingTarget      = undefined,
+ coneColor           = '00FFFF',
+ sphereColor         = 'B606AE',
+ blendingColorHex    = '80CD1A',
+ blendingColor       = [0.0, 1.0, 0.0],
+ blendingAlpha       = 1.0;
+
+function configure(){
+
+
+    gl.clearColor(0.3,0.3,0.3, 1.0);
+    gl.clearDepth(1.0);
+    
+    //Enables depth testing
+    gl.enable(gl.DEPTH_TEST);
+    gl.depthFunc(gl.LESS);
+	
+    //Enables blending
+	gl.enable(gl.BLEND);
+	//Blending function for transparencies
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);   
+    gl.blendColor(blendingColor[0], blendingColor[1], blendingColor[2], blendingAlpha);    
+
+    //Enable culling
+    gl.disable(gl.CULL_FACE);
+
+     blendingEquation    = gl.FUNC_ADD;
+     blendingSource      = gl.SRC_ALPHA;
+     blendingTarget      = gl.ONE_MINUS_SRC_ALPHA;    
+    
+    //Creates and sets up the camera location
+    camera = new Camera(CAMERA_ORBITING_TYPE);
+    camera.goHome([0,5,35]);
+    camera.setFocus([0.0,0.0,0.0]);
+	camera.setAzimuth(25);
+	camera.setElevation(-25);
+    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"];
+
+	uniformList = [	"uPMatrix", 
+					"uMVMatrix", 
+					"uNMatrix",
+					"uMaterialDiffuse",
+					"uMaterialAmbient",
+					"uLightAmbient",
+					"uLightDiffuse",
+					"uLightPosition",
+					"uWireframe",
+					"uUseVertexColor",
+					"uUseLambert"
+					];
+	
+	
+	Program.load(attributeList, uniformList);
+	
+	gl.uniform3fv(Program.uLightPosition,   [0,5,20]);
+	gl.uniform4fv(Program.uLightAmbient,    [1.0,1.0,1.0,1.0]);
+	gl.uniform4fv(Program.uLightDiffuse,    [1.0,1.0,1.0,1.0]);
+	gl.uniform1i(Program.uUseVertexColor, useVertexColors);
+	gl.uniform1i(Program.uUseLambert, lambert);
+
+}
+
+
+
+/**
+* Loads the scene
+*/
+function load(){
+    Floor.build(80,2);
+    Scene.addObject(Floor);
+    Scene.loadObject('models/geometry/cone.json','cone',{'diffuse':[0,1,1,1]});
+    Scene.loadObject('models/geometry/sphere.json','sphere',{'diffuse':[182/255, 6/255,174/255,1]});
+    
+    
+	
+    
+}
+
+
+
+
+/**
+* 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.alias == 'floor' && !floor) continue;
+			
+			transforms.calculateModelView();           
+            transforms.push();
+            
+            switch (object.alias){
+                case 'cone': mat4.translate(transforms.mvMatrix, [0, 0, -3.5]); break;
+                case 'sphere': mat4.scale(transforms.mvMatrix,[0.5,0.5,0.5]); 
+                               mat4.translate(transforms.mvMatrix,[0,0,3.5]);   break;
+                
+			}
+            transforms.setMatrixUniforms();
+            transforms.pop();
+   
+            //Setting uniforms
+            gl.uniform4fv(Program.uMaterialDiffuse, object.diffuse);
+            gl.uniform4fv(Program.uMaterialAmbient, object.ambient);
+            gl.uniform1i(Program.uWireframe,object.wireframe);
+            gl.uniform1i(Program.uUseLambert, lambert);
+            
+            //Setting attributes
+            gl.enableVertexAttribArray(Program.aVertexPosition);
+            gl.disableVertexAttribArray(Program.aVertexNormal);
+      
+            
+            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>Blending Benchwork</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;margin-left:0px'>
+<tr>
+	<td>
+	<table style='margin-left:0px'>
+    <tr>
+        <td><input type="checkbox" id="blending-btn" checked='checked'/><label for="blending-btn">Blending</label>
+        <input type="checkbox" id="depth-testing-btn" checked='checked'/><label for="depth-testing-btn">Depth Testing</label>
+        <input type="checkbox" id="culling-btn"/><label for="culling-btn">Back Face Culling</label>
+        <input type="checkbox" id="lambert-btn" checked='checked'/><label for="lambert-btn">Lambert Term</label>
+        <input type="checkbox" id="floor-btn" checked='checked'/><label for="floor-btn">Floor</label>
+        <button id='reset-btn'>Reset</button></td>
+    </tr>
+    <tr>    
+        <td>
+            <table style='margin-left:0px' width='100%'>
+            <tr>
+            <td align='right' width='15%'>Sphere Alpha:</td>
+            <td>
+                <table>
+                    <tr><td id='slider-sphere-alpha-value' width='30px'>1.0</td><td width = '100px'><div id='slider-sphere-alpha'/></td></tr>
+                </table>
+            </td>
+            <td>
+                 <table style='margin-left:0px' width='100%'>
+                    <tr><td width='50%'>Sphere Color :</td>
+                    <td width='50%'>
+                    <div id='sphereColorSelector' class='colorSelector'>
+                    <div style='background-color:rgb(182,6,174)'></div>
+                    </div>
+                    </td>
+                    </tr>
+                </table>
+            </td>
+            </tr>
+            <tr>
+            <td align='right' width='15%'>Cone Alpha:</td>
+            <td>
+                <table>
+                    <tr><td id='slider-cone-alpha-value' width='30px'>1.0</td><td width = '100px'><div id='slider-cone-alpha'/></td></tr>
+                </table>
+            </td>
+            <td>
+                 <table style='margin-left:0px' width='100%'>
+                    <tr><td width='50%'>Cone Color :</td>
+                    <td width='50%'>
+                    <div id='coneColorSelector' class='colorSelector'>
+                    <div style='background-color:rgb(0,255,256)'></div>
+                    </div>
+                    </td>
+                    </tr>
+                </table>
+            </td>
+            </tr>
+            </table>
+        </td>  
+    </tr>
+    <tr>
+        <td colspan='2'>
+            <table>
+            <tr>
+                <td>Blend Function</td><td>Source</td><td>Destination</td>
+            </tr>
+            <tr>
+            <td>
+                <select name='Blend Equation' id='selBlendEquation'>
+                    <option value='FUNC_ADD' selected='selected'>gl.FUNC_ADD</option>
+                    <option value='FUNC_SUBTRACT'>gl.FUNC_SUBTRACT</option>
+                    <option value='FUNC_REVERSE_SUBTRACT'>gl.FUNC_REVERSE_SUBTRACT</option>
+                </select>
+            </td>
+            <td>
+                <select name='Source' id='selSource'>
+                    <option value='ZERO'>gl.ZERO</option>
+                    <option value='ONE'>gl.ONE</option>
+                    <option value='SRC_COLOR'>gl.SRC_COLOR</option>
+                    <option value='DST_COLOR'>gl.DST_COLOR</option>
+                    <option value='SRC_ALPHA' selected='selected'>gl.SRC_ALPHA</option>
+                    <option value='DST_ALPHA'>gl.DST_ALPHA</option>
+                    <option value='CONSTANT_COLOR'>gl.CONSTANT_COLOR</option>
+                    <option value='CONSTANT_ALPHA'>gl.CONSTANT_ALPHA</option>
+                    <option value='ONE_MINUS_SRC_ALPHA'>gl.ONE_MINUS_SRC_ALPHA</option>
+                    <option value='ONE_MINUS_DST_ALPHA'>gl.ONE_MINUS_DST_ALPHA</option>
+                    <option value='ONE_MINUS_SRC_COLOR'>gl.ONE_MINUS_SRC_COLOR</option>
+                    <option value='ONE_MINUS_DST_COLOR'>gl.ONE_MINUS_DST_COLOR</option>
+                    <option value='ONE_MINUS_CONSTANT_COLOR'>gl.ONE_MINUS_CONSTANT_COLOR</option>
+                    <option value='ONE_MINUS_CONSTANT_ALPHA'>gl.ONE_MINUS_CONSTANT_ALPHA</option>
+                    <option value='SRC_ALPHA_SATURATE'>gl.SRC_ALPHA_SATURATE</option>
+                </select>    
+            </td>
+            <td>
+                <select name='Target' id='selTarget'>
+                    <option value='ZERO'>gl.ZERO</option>
+                    <option value='ONE'>gl.ONE</option>
+                    <option value='SRC_COLOR'>gl.SRC_COLOR</option>
+                    <option value='DST_COLOR'>gl.DST_COLOR</option>
+                    <option value='SRC_ALPHA'>gl.SRC_ALPHA</option>
+                    <option value='DST_ALPHA'>gl.DST_ALPHA</option>
+                    <option value='CONSTANT_COLOR'>gl.CONSTANT_COLOR</option>
+                    <option value='CONSTANT_ALPHA'>gl.CONSTANT_ALPHA</option>
+                    <option selected='selected' value='ONE_MINUS_SRC_ALPHA' >gl.ONE_MINUS_SRC_ALPHA</option>
+                    <option value='ONE_MINUS_DST_ALPHA'>gl.ONE_MINUS_DST_ALPHA</option>
+                    <option value='ONE_MINUS_SRC_COLOR'>gl.ONE_MINUS_SRC_COLOR</option>
+                    <option value='ONE_MINUS_DST_COLOR'>gl.ONE_MINUS_DST_COLOR</option>
+                    <option value='ONE_MINUS_CONSTANT_COLOR'>gl.ONE_MINUS_CONSTANT_COLOR</option>
+                    <option value='ONE_MINUS_CONSTANT_ALPHA'>gl.ONE_MINUS_CONSTANT_ALPHA</option>
+                </select>    
+            </td>
+           
+            </tr>
+            </table>
+        </td>
+    </tr>
+    <tr><td>
+        <table style='margin-left:0px'>
+        <tr><td>Constant Blending Color (when applicable):</td>
+            <td>
+                <div id='blendingColorSelector' class='colorSelector'>
+                <div style='background-color:rgb(128,205,26)'></div>
+                </div>
+            </td>
+        </tr>
+        </table>
+        </td>
+    </tr>
+    <tr><td>
+        <table style='margin-left:0px'>
+            <tr>
+                <td>Constant Alpha (when applicable):</td>
+                <td id='slider-c-alpha-value' width='15%'><b>1.0</b></td>
+                <td width='80%'><div id='slider-c-alpha'/></td>
+            </tr>
+        </table>
+    </tr>
+    <tr>
+		<td>
+        <table style='margin-left:0px'>
+        
+        <tr>
+            <td align='right'> Render Order:</td>
+            <td colspan = '2'>
+            <div id='opt-render-order'>
+            <input type='radio' id='opt-cone-first' name='rorder'  checked='checked'/><label for='opt-cone-first'>Cone First</label>
+            <input type='radio' id='opt-sphere-first'  name='rorder'/><label for='opt-sphere-first'>Sphere First</label>
+            </div>
+            </td>
+        </tr>
+        </table>
+        </td>
+    </tr>    
+    </table>
+</td></tr>	
+</table>    
+</div>
+<script> 
+
+$('#opt-render-order').buttonset();
+$('#slider-sphere-alpha').slider({value:1.0, min:0.0, max:1.0, step:0.1, slide:updateAlphaSphere,  change:updateAlphaSphere});
+$('#slider-cone-alpha').slider({value:1.0, min:0.0, max:1.0, step:0.1, slide:updateAlphaCone,  change:updateAlphaCone});
+
+
+
+
+$('#slider-c-alpha').slider({value:1.0, min:0.0, max:1.00, step:0.05, slide:updateConstantAlpha});
+
+function updateConstantAlpha(){
+    var v = $('#slider-c-alpha').slider("value");
+    $('#slider-c-alpha-value').html('<b>'+v+'</b>');
+    blendingAlpha = v;
+	updateBlending();
+}
+
+
+$('#blending-btn, #depth-testing-btn, #culling-btn, #floor-btn, #lambert-btn, #reset-btn').button();
+
+$('#reset-btn').click(function(){
+    depthTest = true;
+    blending = true;
+    culling = false;
+    lambert = true;
+    floor = true;
+    blendingEquation    = gl.FUNC_ADD;
+    blendingSource      = gl.SRC_ALPHA;
+    blendingTarget      = gl.ONE_MINUS_SRC_ALPHA;    
+    
+    $('#depth-testing-btn').attr('checked',depthTest).button("refresh");
+    $('#blending-btn').attr("checked",blending).button("refresh");
+    $('#culling-btn').attr("checked",culling).button("refresh");
+    $('#lambert-btn').attr("checked",lambert).button("refresh");
+    $('#floor-btn').attr("checked",floor).button("refresh");
+    
+    $( "#slider-cone-alpha" ).slider( "option", "value", 1.0 );
+    $( "#slider-sphere-alpha" ).slider( "option", "value", 1.0 );
+    $( "#slider-c-alpha" ).slider( "option", "value", 1.0 );
+    $('#opt-cone-first').attr('checked',true).button("refresh").click();
+
+    $('#selSource').val('SRC_ALPHA');
+    $('#selTarget').val('ONE_MINUS_SRC_ALPHA');
+    $('#selBlendEquation').val('FUNC_ADD');
+    
+     
+     $('#sphereColorSelector').ColorPickerSetColor("B606AE");
+     $('#sphereColorSelector div').css('backgroundColor', '#B606AE');
+     updateObjectColor('sphere', [182/255,6/255,174/255]);
+     
+     $('#coneColorSelector').ColorPickerSetColor("#00FFFF");
+     $('#coneColorSelector div').css('backgroundColor', '#00FFFF');
+     updateObjectColor('cone',[0,1,1]);
+     
+     $('#blendingColorSelector').ColorPickerSetColor("80CD1A");
+     $('#blendingColorSelector div').css('backgroundColor', '#80CD1A');
+     blendingColor = [0,1,0];
+     blendingAlpha = 1.0;
+     updateBlending();
+     
+     camera.goHome([0,5,35]);
+    camera.setFocus([0.0,0.0,0.0]);
+	camera.setAzimuth(25);
+	camera.setElevation(-25);
+    
+    updateDepthTesting();
+    updateCulling();
+
+      
+    
+});
+
+function updateBlending(){
+    if (blending){
+        gl.enable(gl.BLEND);
+    }
+    else{
+        gl.disable(gl.BLEND);
+    }
+    
+    gl.blendFunc(blendingSource, blendingTarget);
+    gl.blendEquation(blendingEquation);
+    gl.blendColor(blendingColor[0], blendingColor[1], blendingColor[2],blendingAlpha);
+    app.refresh();
+}
+
+function updateDepthTesting(){
+    if(depthTest){
+        gl.enable(gl.DEPTH_TEST);
+    }
+    else {
+        gl.disable(gl.DEPTH_TEST);
+    }
+    app.refresh();
+        
+};
+
+function updateCulling(){
+    if(culling){
+        gl.enable(gl.CULL_FACE);
+    }
+    else {
+        gl.disable(gl.CULL_FACE);
+    }
+    app.refresh();
+        
+};
+
+function updateObjectColor(o, c){
+    var object = Scene.getObject(o);
+    if (object == null) return;
+    object.diffuse[0] = c[0];
+    object.diffuse[1] = c[1];
+    object.diffuse[2] = c[2];
+    app.refresh();
+}
+
+$('#lambert-btn').click(function(){
+    lambert = $('#lambert-btn').is(':checked');
+    app.refresh();
+});
+
+$('#floor-btn').click(function(){
+    floor = $('#floor-btn').is(':checked');
+    app.refresh();
+});
+
+$('#blending-btn').click(function(){
+  blending = $('#blending-btn').is(':checked');
+  
+  $('#selBlendEquation, #selSource, #selTarget').attr('disabled',blending?'':'disabled');
+  updateBlending();
+});
+
+$('#depth-testing-btn').click(function(){
+    depthTest = $('#depth-testing-btn').is(':checked');
+    updateDepthTesting();
+});
+
+$('#culling-btn').click(function(){
+    culling = $('#culling-btn').is(':checked');
+    updateCulling();
+});
+
+$("#selBlendEquation").change(function (event) {
+    blendingEquation = gl[event.target.value];
+    updateBlending();
+    
+ });
+ 
+$("#selSource").change(function (event) {
+    blendingSource = gl[event.target.value];
+    updateBlending();
+ });
+
+ $("#selTarget").change(function (event) {
+    blendingTarget = gl[event.target.value];
+    updateBlending();
+ });
+
+ 
+ $('#blendingColorSelector').ColorPicker({
+    onSubmit: function(hsb, hex, rgb, el) {
+   $(el).val(hex);
+   $(el).ColorPickerHide();
+   
+ },
+ color: '#80CD1A',
+    onShow: function (colpkr) {
+        $(colpkr).fadeIn(500);
+        return false;
+    },
+    onHide: function (colpkr) {
+        $(colpkr).fadeOut(500);
+        return false;
+    },
+    onChange: function (hsb, hex, rgb) {
+        blendingColorHex = hex;
+        $('#blendingColorSelector div').css('backgroundColor', '#' + hex);
+        blendingColor = [rgb.r/256,rgb.g/256,rgb.b/256];
+        updateBlending();
+    },
+    
+    onBeforeShow: function (colpkr) {
+   $(this).ColorPickerSetColor(blendingColorHex);
+  }
+ });
+ 
+ 
+  $('#sphereColorSelector').ColorPicker({
+    onSubmit: function(hsb, hex, rgb, el) {
+   $(el).val(hex);
+   $(el).ColorPickerHide();
+   
+ },
+ color: '#00FFFF',
+    onShow: function (colpkr) {
+        $(colpkr).fadeIn(500);
+        return false;
+    },
+    onHide: function (colpkr) {
+        $(colpkr).fadeOut(500);
+        return false;
+    },
+    onChange: function (hsb, hex, rgb) {
+        sphereColor = hex;
+        $('#sphereColorSelector div').css('backgroundColor', '#' + hex);
+        var c = [rgb.r/256,rgb.g/256,rgb.b/256];
+        updateObjectColor('sphere', c );
+    },
+    
+
+   onBeforeShow: function () {
+		$(this).ColorPickerSetColor(sphereColor);
+	}
+
+ });
+ 
+  $('#coneColorSelector').ColorPicker({
+    onSubmit: function(hsb, hex, rgb, el) {
+   $(el).val(hex);
+   $(el).ColorPickerHide();
+   
+ },
+ color: '#B606AE',
+    onShow: function (colpkr) {
+        $(colpkr).fadeIn(500);
+        return false;
+    },
+    onHide: function (colpkr) {
+        $(colpkr).fadeOut(500);
+        return false;
+    },
+    onChange: function (hsb, hex, rgb) {
+        coneColor = hex;
+        $('#coneColorSelector div').css('backgroundColor', '#' + hex);
+        var c = [rgb.r/256,rgb.g/256,rgb.b/256];
+        updateObjectColor('cone', c );
+    },
+    
+    onBeforeShow: function () {
+		$(this).ColorPickerSetColor(coneColor);
+	}
+ });
+
+
+
+function updateAlphaSphere(){
+	var alpha = $('#slider-sphere-alpha').slider("value");
+	$('#slider-sphere-alpha-value').html(alpha);
+	var sphere = Scene.getObject('sphere');
+	sphere.diffuse[3] = alpha;
+	draw();
+}
+
+function updateAlphaCone(){
+	var alpha = $('#slider-cone-alpha').slider("value");
+	$('#slider-cone-alpha-value').html(alpha);
+	var cone = Scene.getObject('cone');
+	cone.diffuse[3] = alpha;
+	draw();
+}
+
+$('#opt-sphere-first').click(function(){
+	Scene.renderSooner('sphere');
+	Scene.renderFirst('floor');
+	draw();
+});
+
+$('#opt-cone-first').click(function(){
+	Scene.renderSooner('cone');
+	Scene.renderFirst('floor');
+	draw();
+});
+ 
+
+</script>
+<script>cview.run(cview.MODE_VIEW_AND_CONTROLS,false,470);</script>
+</body>
+</html>

File 1727_06/ch6_BlendingCube.html

+<!DOCTYPE html>
+<html>
+
+<head>
+<title>WebGL Beginner's Guide - Chapter 6 - Blending Equations</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;
+
+//varyings
+varying vec4 vColor;
+
+
+void main(void) {
+
+ //Transformed vertex position
+ vec4 vertex = uMVMatrix * vec4(aVertexPosition, 1.0);
+ 
+ //we are not using lambert weighing in this exercise :-)
+ float lambertTerm = 1.0;
+
+ //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,
+ interactor          = null,
+ transforms          = null,
+ useVertexColors     = true,
+ blending            = true,
+ blendingEquation    = undefined,
+ blendingSource      = undefined,
+ blendingTarget      = undefined,
+ blendingColor       = [0.0, 1.0, 0.0],
+ blendingAlpha       = 1.0;
+
+function configure(){
+
+
+    gl.clearColor(0.3,0.3,0.3, 1.0);
+    gl.clearDepth(100.0);
+    
+    //Enables depth testing
+    gl.enable(gl.DEPTH_TEST);
+    gl.depthFunc(gl.LESS);
+	
+    //Enables blending
+	gl.enable(gl.BLEND);
+
+	//Blending function for transparencies
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);   
+    gl.blendColor(blendingColor[0], blendingColor[1], blendingColor[2], blendingAlpha);    
+    //Enable culling
+    gl.enable(gl.CULL_FACE);
+
+     blendingEquation    = gl.FUNC_ADD;
+     blendingSource      = gl.SRC_ALPHA;
+     blendingTarget      = 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.uniform4fv(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, 0.5);
+	gl.uniform1i(Program.uUseVertexColor, useVertexColors);
+	gl.uniform1i(Program.uUseLambert, false);
+
+}
+
+
+
+/**
+* Loads the scene
+*/
+function load(){
+	Scene.loadObject('models/geometry/complexCube.json','cube');
+}
+
+
+
+
+/**
+* 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];
+			
+			
+			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.cullFace(gl.FRONT);
+                gl.drawElements(gl.TRIANGLES, object.indices.length, gl.UNSIGNED_SHORT,0);
+                gl.cullFace(gl.BACK);
+                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>Blending Equations</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;margin-left:0px'>
+<tr>
+	<td>
+	<table style='margin-left:0px'>
+    <tr>
+        <td><input type="checkbox" id="blending-btn" checked='checked'/><label for="blending-btn">Alpha Blending</label>
+        </td>
+    </tr>
+    <tr>    
+        <td>
+            <table width='100%'>
+            <tr>
+                <td>Alpha Value:</td>
+                <td id='slider-alpha-value' width='15%'><b>0.5</b></td>
+                <td width='80%'><div id='slider-alpha'/></td>
+            </tr>
+            </table>
+        </td>  
+    </tr>
+    <tr>
+        <td colspan='2'>
+            <table>
+            <tr>
+                <td>Blend Function</td><td>Source</td><td>Destination</td>
+            </tr>
+            <tr>
+            <td>
+                <select name='Blend Equation' id='selBlendEquation'>
+                    <option value='FUNC_ADD' selected='selected'>gl.FUNC_ADD</option>
+                    <option value='FUNC_SUBTRACT'>gl.FUNC_SUBTRACT</option>
+                    <option value='FUNC_REVERSE_SUBTRACT'>gl.FUNC_REVERSE_SUBTRACT</option>
+                </select>
+            </td>
+            <td>
+                <select name='Source' id='selSource'>
+                    <option value='ZERO'>gl.ZERO</option>
+                    <option value='ONE'>gl.ONE</option>
+                    <option value='SRC_COLOR'>gl.SRC_COLOR</option>
+                    <option value='DST_COLOR'>gl.DST_COLOR</option>
+                    <option value='SRC_ALPHA' selected='selected'>gl.SRC_ALPHA</option>
+                    <option value='DST_ALPHA'>gl.DST_ALPHA</option>
+                    <option value='CONSTANT_COLOR'>gl.CONSTANT_COLOR</option>
+                    <option value='CONSTANT_ALPHA'>gl.CONSTANT_ALPHA</option>
+                    <option value='ONE_MINUS_SRC_ALPHA'>gl.ONE_MINUS_SRC_ALPHA</option>
+                    <option value='ONE_MINUS_DST_ALPHA'>gl.ONE_MINUS_DST_ALPHA</option>
+                    <option value='ONE_MINUS_SRC_COLOR'>gl.ONE_MINUS_SRC_COLOR</option>
+                    <option value='ONE_MINUS_DST_COLOR'>gl.ONE_MINUS_DST_COLOR</option>
+                    <option value='ONE_MINUS_CONSTANT_COLOR'>gl.ONE_MINUS_CONSTANT_COLOR</option>
+                    <option value='ONE_MINUS_CONSTANT_ALPHA'>gl.ONE_MINUS_CONSTANT_ALPHA</option>
+                    <option value='SRC_ALPHA_SATURATE'>gl.SRC_ALPHA_SATURATE</option>
+                </select>    
+            </td>
+            <td>
+                <select name='Target' id='selTarget'>
+                    <option value='ZERO'>gl.ZERO</option>
+                    <option value='ONE'>gl.ONE</option>
+                    <option value='SRC_COLOR'>gl.SRC_COLOR</option>
+                    <option value='DST_COLOR'>gl.DST_COLOR</option>
+                    <option value='SRC_ALPHA'>gl.SRC_ALPHA</option>
+                    <option value='DST_ALPHA'>gl.DST_ALPHA</option>
+                    <option value='CONSTANT_COLOR'>gl.CONSTANT_COLOR</option>
+                    <option value='CONSTANT_ALPHA'>gl.CONSTANT_ALPHA</option>
+                    <option selected='selected' value='ONE_MINUS_SRC_ALPHA' >gl.ONE_MINUS_SRC_ALPHA</option>
+                    <option value='ONE_MINUS_DST_ALPHA'>gl.ONE_MINUS_DST_ALPHA</option>
+                    <option value='ONE_MINUS_SRC_COLOR'>gl.ONE_MINUS_SRC_COLOR</option>
+                    <option value='ONE_MINUS_DST_COLOR'>gl.ONE_MINUS_DST_COLOR</option>
+                    <option value='ONE_MINUS_CONSTANT_COLOR'>gl.ONE_MINUS_CONSTANT_COLOR</option>
+                    <option value='ONE_MINUS_CONSTANT_ALPHA'>gl.ONE_MINUS_CONSTANT_ALPHA</option>
+                </select>    
+            </td>
+           
+            </tr>
+            </table>
+        </td>
+    </tr>
+    <tr><td>
+        <table style='margin-left:0px'>
+        <tr><td>Constant Blending Color (when applicable):</td>
+            <td>
+                <div id='blendingColorSelector' class='colorSelector'>
+                <div style='background-color:rgb(128,205,26)'></div>
+                </div>
+            </td>
+        </tr>
+        </table>
+        </td></tr><tr>
+        <td>
+        <table style='margin-left:0px'>
+            <tr><td>Constant Alpha (when applicable):</td>
+            <td id='slider-c-alpha-value' width='15%'><b>1.0</b></td>
+            <td width='80%'><div id='slider-c-alpha'/></td>
+            </td></tr>
+        </table>
+     </tr>
+    </table>
+</td></tr>	
+</table>    
+</div>
+<script> 
+
+
+$('#slider-alpha').slider({value:0.5, 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('<b>'+v+'</b>');
+	app.refresh();
+}
+
+$('#slider-c-alpha').slider({value:1.0, min:0.0, max:1.00, step:0.05, slide:updateConstantAlpha});
+
+function updateConstantAlpha(){
+    var v = $('#slider-c-alpha').slider("value");
+    $('#slider-c-alpha-value').html('<b>'+v+'</b>');
+    blendingAlpha = v;
+	updateBlending();
+}
+
+
+$('#blending-btn').button();
+
+
+function updateBlending(){
+    if (blending){
+        gl.enable(gl.BLEND);
+    }
+    else{
+        gl.disable(gl.BLEND);
+    }
+    gl.blendEquation(blendingEquation);
+    gl.blendFunc(blendingSource, blendingTarget);
+    gl.blendColor(blendingColor[0], blendingColor[1], blendingColor[2],blendingAlpha);
+    app.refresh();
+}
+
+
+
+
+$('#blending-btn').click(function(){
+  blending = $('#blending-btn').is(':checked');
+  
+  $('#selBlendEquation, #selSource, #selTarget').attr('disabled',blending?'':'disabled');
+  updateBlending();
+});
+
+
+
+
+$("#selBlendEquation").change(function (event) {
+    blendingEquation = gl[event.target.value];
+    updateBlending();
+    
+ });
+ 
+$("#selSource").change(function (event) {
+    blendingSource = gl[event.target.value];
+    updateBlending();
+ });
+
+ $("#selTarget").change(function (event) {
+    blendingTarget = gl[event.target.value];
+    updateBlending();
+ });
+
+ 
+ $('#blendingColorSelector').ColorPicker({
+    onSubmit: function(hsb, hex, rgb, el) {
+   $(el).val(hex);
+   $(el).ColorPickerHide();
+   
+ },
+ color: '#00ff00',
+    onShow: function (colpkr) {
+        $(colpkr).fadeIn(500);
+        return false;
+    },
+    onHide: function (colpkr) {
+        $(colpkr).fadeOut(500);
+        return false;
+    },
+    onChange: function (hsb, hex, rgb) {
+        $('#blendingColorSelector div').css('backgroundColor', '#' + hex);
+        blendingColor = [rgb.r/256,rgb.g/256,rgb.b/256];
+        updateBlending();
+    },
+    
+    onBeforeShow: function (colpkr) {
+   $(this).ColorPickerSetColor('rgb(0.0,1.0,0.0)');
+  }
+ })
+
+</script>
+<script>cview.run(cview.MODE_VIEW_AND_CONTROLS,false,470);</script>
+</body>
+</html>

File 1727_06/ch6_Transparency1.html

-<html>
-
-<head>
-<title>WebGL Beginner's Guide - Chapter 6 - The Transparency Problem</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 uPositionLight;
-
-varying vec3 vNormal;
-varying vec3 vLightRay;
-varying vec4 vFinalColor;
-
-void main(void) {
-	
-vFinalColor = uMaterialDiffuse;
-
-//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 =  vec4(uPositionLight,1.0);
-
-//Light position
-vLightRay = vertex.xyz-positionLight.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 vec4 uLightAmbient;
-uniform vec4 uLightDiffuse;
-uniform vec4 uMaterialAmbient;
-uniform vec4 uMaterialDiffuse; 
-uniform bool uAddDiffuse;
-uniform bool uAddAmbient;
-
-varying vec3 vNormal;
-varying vec3 vLightRay;
-varying vec4 vFinalColor;
-
-void main(void)
-{
-	if(uWireframe){
-		gl_FragColor = vFinalColor;
-	}
-	else{
-    	vec3 L = normalize(vLightRay);
-		vec3 N = normalize(vNormal);
-
-    	//Lambert's cosine law
-    	float lambertTerm	= dot(N,-L);
-		
-    	//Ambient Term  
-    	vec4 Ia = uLightAmbient * uMaterialAmbient;
-
-    	//Diffuse Term
-    	vec4 Id = vec4(0.0,0.0,0.0,1.0);
-		
-    	//Specular Term
-		if (lambertTerm > 0.0){
-			Id = uLightDiffuse * uMaterialDiffuse * lambertTerm; 
-		}			
-
-    	//Final color
-		vec3 finalColor = vec3(0.0,0.0,0.0);
-		
-		if (uAddAmbient){
-			finalColor = finalColor + Ia.rgb;
-		}
-		
-		if (uAddDiffuse){
-			finalColor = finalColor + Id.rgb;
-		}
-		
-		float alpha =  uMaterialDiffuse.a;
-	   	gl_FragColor = vec4(finalColor,alpha);
-    }
-
-}
-</script>
-
-<script id='code-js' type="text/javascript">
-
-var camera = null,
-	interactor = null,
-	transforms = null,
-	addDiffuse = true,
-	addAmbient = true;
-
-function configure(){
-    gl.clearColor(0.3,0.3,0.3,1.0);
-    gl.clearDepth(100.0);
-    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,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();
-	
-	var attributeList = ["aVertexPosition",
-					"aVertexNormal",
-					"aVertexColor"];
-
-	var uniformList = [	"uPMatrix", 
-					"uMVMatrix", 
-					"uNMatrix",
-					"uMaterialDiffuse",
-					"uMaterialAmbient",
-					"uMaterialSpecular",
-					"uLightAmbient",
-					"uLightDiffuse",
-					"uPositionLight",
-					"uWireframe",
-					"uAddAmbient",
-					"uAddDiffuse"];
-		
-	Program.load(attributeList, 			uniformList);
-	gl.uniform3fv(Program.uPositionLight,   [0, 7, 3]);
-	gl.uniform4fv(Program.uLightAmbient,  	[1.0,1.0,1.0,1.0]);
-	gl.uniform4fv(Program.uLightDiffuse,   	[1.0,1.0,1.0,1.0]);
-	gl.uniform1i(Program.uAddDiffuse, 		true);
-	gl.uniform1i(Program.uAddAmbient, 		true);
-
-}
-
-
-/**
-* Loads the scene
-*/
-function load(){
-    Floor.build(80,2);
-    Scene.addObject(Floor);
-	Scene.loadObject('models/geometry/cone.json','cone');
-	Scene.loadObject('models/geometry/transparentWall.json','wall');
-}
-
-/**
-* 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, max=Scene.objects.length; i < max; i++){
-            
-            var object = Scene.objects[i];
-			
-			transforms.calculateModelView();           
-            transforms.push();
-            
-			if (object.alias == 'cone') {
-				mat4.translate(transforms.mvMatrix, [0, 0, -10]);
-			}
-			
-            transforms.setMatrixUniforms();
-            transforms.pop();
-   
-            //Setting uniforms
-            gl.uniform4fv(Program.uMaterialDiffuse, object.diffuse);
-			gl.uniform1i(Program.uAddDiffuse, addDiffuse);
-			gl.uniform1i(Program.uAddAmbient, addAmbient);
-            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>The Transparency Problem</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 id='controls' style='padding=0px'>
-<tr>	
-    <td> 
-    <table id='sliders' cellspacing=4px style='vertical-align:top'>
-	
-	<tr>
-		<td align='right'>Wall Alpha:</td>
-		<td>
-			<table>
-				<tr><td id='slider-wall-alpha-value' width='30px' colspan='2'>0.5</td><td width = '150px'><div id='slider-wall-alpha'/></td></tr>
-			</table>
-		</td>
-	</tr>
-    <tr>
-		<td align='right'>Object Alpha:</td>
-		<td>
-			<table>
-				<tr><td id='slider-object-alpha-value' width='30px' colspan='2'>1.0</td><td width = '150px'><div id='slider-object-alpha'/></td></tr>
-		    </table>
-		</td>
-	</tr>
-	
-	</table>
-	</td>
-	<td valign ='top'>
-		<table>
-		<tr>
-			<td align='right'> Lighting:</td>
-			<td colspan = '2'>
-			<div id='opt-ren'>
-			<input type='checkbox' id='opt-ren-ambi' name='render' checked='checked'/><label for='opt-ren-ambi'>Ambient</label>
-			<input type='checkbox' id='opt-ren-diff'  name='render' checked='checked'/><label for='opt-ren-diff'>Diffuse</label>
-			</div>
-			</td>
-		</tr>
-		<tr>
-			<td align='right'> Render Order:</td>
-			<td colspan = '2'>
-			<div id='opt-render-order'>
-			<input type='radio' id='opt-cone-first' name='rorder' checked='checked'/><label for='opt-cone-first'>Cone First</label>
-			<input type='radio' id='opt-wall-first'  name='rorder' /><label for='opt-wall-first'>Wall First</label>
-			
-			
-			</div>
-			</td>
-		</tr>		
-		
-        <tr>
-			<td align='right'> Camera Type:</td>
-            <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-wall-alpha').slider({value:0.5, min:0.0, max:1.0, step:0.1, slide:updateAlphaWall,  change:updateAlphaWall});
-$('#slider-object-alpha').slider({value:1.0, min:0.0, max:1.0, step:0.1, slide:updateAlphaObject,  change:updateAlphaObject});
-
-
-function updateAlphaWall(){
-	var alpha = $('#slider-wall-alpha').slider("value");
-	$('#slider-wall-alpha-value').html(alpha);
-	var wall = Scene.getObject('wall');
-	wall.diffuse[3] = alpha;
-	draw();
-}
-
-function updateAlphaObject(){
-	var alpha = $('#slider-object-alpha').slider("value");
-	$('#slider-object-alpha-value').html(alpha);
-	var cone = Scene.getObject('cone');
-	cone.diffuse[3] = alpha;
-	draw();
-}
-
-
-
-
-$('#opt-type').buttonset();
-$('#btnGoHome').button();
-$('#opt-ren').buttonset();
-$('#opt-render-order').buttonset();
-
-$('#opt-wall-first').click(function(){
-	Scene.renderSooner('wall');
-	Scene.renderFirst('floor');
-	draw();
-});
-
-$('#opt-cone-first').click(function(){
-	Scene.renderSooner('cone');
-	Scene.renderFirst('floor');
-	draw();
-});
-
-$('#opt-ren-ambi').click(function(){
-	addAmbient = $('#opt-ren-ambi').is(':checked');
-	draw();
-});
-
-$('#opt-ren-diff').click(function(){
-	addDiffuse = $('#opt-ren-diff').is(':checked');
-	draw();
-});
-
-
-
-
-$('#opt-tracking').click(function(){
-    camera.goHome();
-    console.info('CameraType = Tracking');
-    camera.setType(CAMERA_TRACKING_TYPE);