Commits

Diego Cantor committed 9db4369

Update after Chapter 6 rewrite

  • Participants
  • Parent commits 94116a9

Comments (0)

Files changed (6)

File 1727_06/ch6_Blending.html

 <html>
 
 <head>
-<title>WebGL Beginner's Guide - Chapter 6 - Blending Benchwork</title>
+<title>WebGL Beginner's Guide - Chapter 6 - Blending Workbench</title>
 <meta http-equiv='content-type' content='text/html; charset=ISO-8859-1'>
 
 <!-- CSS Styles //-->
 <body onLoad='runWebGLApp()'>
 <div id='top'>
 <h1>WebGL Beginner's Guide - Chapter 6</h1>
-<h2>Blending Benchwork</h2>
+<h2>Blending Workbench</h2>
 <div id='logo-packt'><img src='packt.gif'/></div>
 <p></p>
 </div>

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_Cube.html

 
 function configure(){
     gl.clearColor(0.3,0.3,0.3, 1.0);
-    gl.clearDepth(100.0);
+    gl.clearDepth(1.0);
     gl.enable(gl.DEPTH_TEST);
 	gl.depthFunc(gl.LESS);
 	//gl.disable(gl.DEPTH_TEST);

File 1727_06/ch6_Culling.html

+<!DOCTYPE html>
+<html>
+
+<head>
+<title>WebGL Beginner's Guide - Chapter 6 - Transparent 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;
+
+//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,
+ showFrontFace       = true,
+ showBackFace        = true;
+
+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.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(50);
+	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{
+                if(showBackFace){
+                    gl.cullFace(gl.FRONT);  //renders the back face
+                    gl.drawElements(gl.TRIANGLES, object.indices.length, gl.UNSIGNED_SHORT,0);
+                }
+                if (showFrontFace){
+                    gl.cullFace(gl.BACK);  //renders the front face
+                    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>Creating Transparent Objects with Alpha Blending and Face Culling</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>
+        <input type="checkbox" id="show-front-btn" checked='checked'/><label for="show-front-btn">Render Front Face</label>
+        <input type="checkbox" id="show-back-btn" checked='checked'/><label for="show-back-btn">Render Back Face</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.0, step:0.01, slide:updateAlpha, change: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, change:updateConstantAlpha});
+
+function updateConstantAlpha(){
+    var v = $('#slider-c-alpha').slider("value");
+    $('#slider-c-alpha-value').html('<b>'+v+'</b>');
+    blendingAlpha = v;
+	updateBlending();
+};
+
+
+$('#blending-btn, #show-front-btn, #show-back-btn').button();
+//$('#show-front-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();
+});
+
+$('#show-front-btn').click(function(){
+    showFrontFace = $('#show-front-btn').is(':checked');
+});
+
+$('#show-back-btn').click(function(){
+    showBackFace = $('#show-back-btn').is(':checked');
+});
+
+
+$("#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_Transparency_Initial.html

 		vec3 N = normalize(vNormal);
 
     	//Lambert's cosine law
-    	float lambertTerm	= dot(N,-L);
+    	float lambertTerm	= clamp(dot(N,-L),0.0,1.0);
 		
     	//Ambient Term  
     	vec4 Ia = uLightAmbient * uMaterialAmbient;
 
     	//Diffuse Term
-    	vec4 Id = vec4(0.0,0.0,0.0,1.0);
+		vec4 Id = uLightDiffuse * uMaterialDiffuse * lambertTerm; 
 		
-    	//Specular Term
-		if (lambertTerm > 0.0){
-			Id = uLightDiffuse * uMaterialDiffuse * lambertTerm; 
-		}			
-
 	   	gl_FragColor = vec4(Ia.rbg + Id.rgb,uMaterialDiffuse.a);
     }
 

File 1727_09/ch9_Car_Showroom.html

 
 function configure(){
     gl.clearColor(0.2,0.2,0.2, 1.0);
-    gl.clearDepth(100.0);
+    gl.clearDepth(1.0);
     
     gl.enable(gl.DEPTH_TEST);
-    //gl.enable(gl.CULL_FACE);
     gl.depthFunc(gl.LEQUAL);
-    gl.blendEquation(gl.FUNC_SUBTRACT);
-	//gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA);
-    //gl.blendFunc(gl.SRC_ALPHA_SATURATE, gl.ONE);
+
   
     //Creates and sets up the camera location
     camera = new Camera(CAMERA_ORBITING_TYPE);