Diego Cantor avatar Diego Cantor committed 4e8a1f9

Chapter 8 revision completed

Comments (0)

Files changed (12)

1727_08/ch8_Picking.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.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA);
+    
+    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);
     Floor.build(80,2);
     Scene.addObject(Floor);
     Scene.loadObject('models/geometry/ball.json',   'ball', {position:[  0, 0, -4],    scale:[3,3,3]});
-    Scene.loadObject('models/geometry/ball.json',   'disk',{position:[  -10, 0, -10], scale:[3,0.5,3],  diffuse:[0.3,0.1,0.9,0.5]});
+    Scene.loadObject('models/geometry/ball.json',   'disk', {position:[  -10, 0, -10], scale:[3,0.5,3],  diffuse:[0.3,0.1,0.9,0.5]});
     Scene.loadObject('models/geometry/flag.json',   'flag', {position:[-10, 0 ,0],     scale:[1,1,1]});
     Scene.loadObject('models/geometry/cone.json',   'cone', {position:[ 10, 0, 5],     scale:[1,1,1]});
     Scene.loadObject('models/geometry/cone.json',   'cone2',{position:[ -7, 0, 2],     scale:[0.5,1,0.5], diffuse:[0.3,0.3,0.6,1.0]});
 }
 
 function processHits(hits){
-    var names = '';
+    var names = '', ob;
     for(var i = 0; i < hits.length; i++){
-        var ob = hits[i];
+        ob = hits[i];
         ob.diffuse = ob.previous;
         names += ob.alias + ' ';
     }
     render();
-    alert('You picked: ' + names);
+    $('#selected-id').html('You picked : ' + names);
 }
 
-function movePickedObjects(interactor,dx,dy){
+function movePickedObjects(hits,interactor,dx,dy){
     
-    if (picker.plist.length == 0) return;
+    if (hits == 0) return;
     
     var camera = interactor.camera;
-    var depth = (interactor.alt!=0);
-    
-    for (var i = 0, max = picker.plist.length; i < max; i+=1){
-        var ob = this.plist[i];
-        var pos = vec3.create([ob.position[0], ob.position[1], ob.position[2]]);
-        
-        var scaleY = vec3.create();
-        var scaleX = vec3.create();
+    var depth =  interactor.alt;
+    var factor = Math.max(Math.max(camera.position[0], camera.position[1]), camera.position[2])/1000;
+    var  scaleX, scaleY;
+    for (var i = 0, max = hits.length; i < max; i+=1){
+
+        scaleX = vec3.create();
+        scaleY = vec3.create();
         
-        var factor = Math.max(Math.max(camera.position[0], camera.position[1]), camera.position[2])/1000;
-       
-        if (!depth){
-            vec3.scale(camera.up,   -dy * factor, scaleY);
-            vec3.scale(camera.right, dx * factor, scaleX);
+        if (depth){
+            vec3.scale(camera.normal, dy * factor, scaleY);
         }
         else{
-            vec3.scale(camera.normal, dy * factor, scaleY);
+            vec3.scale(camera.up,    -dy * factor, scaleY);
+            vec3.scale(camera.right,  dx * factor, scaleX);
         }
 
-        vec3.add(pos, scaleY);
-        vec3.add(pos, scaleX);
-        
-        ob.position[0] = pos[0];
-        ob.position[1] = pos[1];
-        ob.position[2] = pos[2];
+        vec3.add(hits[i].position, scaleY);
+        vec3.add(hits[i].position, scaleX);
+
     }
     render();
 }
 <div id='top'>
 <h1>WebGL Beginner's Guide - Chapter 8</h1>
 <h2 id='title-id'>Basic Picking</h2>
+<h3 id='selected-id'>You haven't selected anything yet</h3>
 
 <div id='logo-packt'><img src='packt.gif'/></div>
 <p></p>
 
 
 $('#show-picking-btn').click(function(){
-    showPickingImage = !showPickingImage
+    showPickingImage = !showPickingImage;
     
 });
 
 $('#reset-btn').click(function(){
     
     Scene.getObject('ball').position    = [  0,   0,  -4];
-    Scene.getObject('disk').position   = [-10,   0, -10];
+    Scene.getObject('disk').position    = [-10,   0, -10];
     Scene.getObject('flag').position    = [-10,   0 ,  0];
     Scene.getObject('cone').position    = [ 10,   0,   5];
     Scene.getObject('cone2').position   = [ -7,   0,   2];

1727_08/ch8_Picking_Final.html

-<html>
-
-<head>
-<title>WebGL Beginner's Guide - Chapter 8 - Basic Picking</title>
-<meta http-equiv='content-type' content='text/html; charset=ISO-8859-1'>
-
-<!-- CSS Styles //-->
-<link href='css/styles.css'   type='text/css' rel='stylesheet'>
-<link href='css/prettify_desert.css'  type='text/css' rel='stylesheet'/>
-<link href='css/colorpicker.css'  type='text/css' rel='stylesheet'/>
-
-<link href='css/smoothness/jquery-ui-1.8.13.custom.css' type='text/css' rel='stylesheet' />
-<!-- GUI Libraries //-->
-<script type='text/javascript' src='js/gui/jquery-1.5.1.min.js'></script>
-<script type='text/javascript' src='js/gui/jquery-ui-1.8.13.custom.min.js'></script> 
-<script type='text/javascript' src='js/gui/colorpicker.js'></script>
-<script type='text/javascript' src='js/gui/prettify.js'></script>
-<script type='text/javascript' src='js/gui/codeview.js'></script>
-<!-- MATH Libraries //-->
-<script type='text/javascript' src='js/math/glMatrix-0.9.5.min.js'></script>
-<!-- WEBGL Libraries //-->
-<script type='text/javascript' src='js/webgl/Globals.js'></script>
-<script type='text/javascript' src='js/webgl/Utils.js'></script>
-<script type='text/javascript' src='js/webgl/Program.js'></script>
-<script type='text/javascript' src='js/webgl/Scene.js'></script>
-<script type='text/javascript' src='js/webgl/Axis.js'></script>
-<script type='text/javascript' src='js/webgl/Floor.js'></script>
-<script type='text/javascript' src='js/webgl/Camera.js'></script>
-<script type='text/javascript' src='js/webgl/CameraInteractor.js'></script>
-<script type='text/javascript' src='js/webgl/SceneTransforms.js'></script>
-<script type='text/javascript' src='js/webgl/Texture.js'></script>
-<script type='text/javascript' src='js/webgl/WebGLApp.js'></script>
-<script type='text/javascript' src='js/webgl/Picker.js'></script>
-
-<script id="shader-vs" type="x-shader/x-vertex">
-
-attribute vec3 aVertexPosition;
-attribute vec3 aVertexNormal;
-attribute vec4 aVertexColor;
-attribute vec2 aVertexTextureCoords;
-
-uniform mat4 uMVMatrix;
-uniform mat4 uPMatrix;
-uniform mat4 uNMatrix;
-uniform vec3 uLightPosition;
-uniform vec4 uMaterialDiffuse;
-uniform bool uWireframe;
-uniform bool uUseVertexColor;
-uniform bool uUseTextures;
-
-varying vec3 vNormal;
-varying vec3 vLightRay;
-varying vec3 vEyeVec;
-varying vec4 vFinalColor;
-varying vec2 vTextureCoord;
-
-void main(void) {
-    
- vFinalColor = uMaterialDiffuse;
- vTextureCoord = vec2(0.0);
-
- if (uUseVertexColor){
-    vFinalColor = aVertexColor;
- }
- 
- if (uUseTextures){
-    vTextureCoord = aVertexTextureCoords;
- }
-
- vec4 vertex = uMVMatrix * vec4(aVertexPosition, 1.0);
- vNormal = vec3(uNMatrix * vec4(aVertexNormal, 1.0));
- vec4 light = vec4(uLightPosition,1.0);
- vLightRay = vertex.xyz-light.xyz;
- vEyeVec = -vec3(vertex.xyz);
- 
- gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
- 
-}	
-</script>
-
-<script id="shader-fs" type="x-shader/x-fragment">
-#ifdef GL_ES
-precision highp float;
-#endif
-
-uniform bool uWireframe;
-uniform bool uUseTextures; 
-
-uniform vec4 uLightAmbient;
-uniform vec4 uLightDiffuse;
-uniform vec4 uMaterialAmbient;
-uniform vec4 uMaterialDiffuse;
-uniform vec4 uPickingColor;
-uniform bool uOffscreen;  
-
-uniform sampler2D uSampler;  
-
-varying vec3 vNormal; 
-varying vec3 vLightRay;
-varying vec3 vEyeVec;
-varying vec4 vFinalColor;
-varying vec2 vTextureCoord;
-
-void main(void)
-{
-    if(uOffscreen){
-        gl_FragColor = uPickingColor;
-        return;
-    }
-    
-    if(uWireframe){
-        gl_FragColor = vFinalColor;
-    }
-    else{
-        //ambient term
-        vec4 Ia = uLightAmbient * uMaterialAmbient;
-        
-        //diffuse term
-        vec3 L = normalize(vLightRay);
-        vec3 N = normalize(vNormal);
-        float lambertTerm = max(dot(N,-L),0.33);
-        vec4 Id = uLightDiffuse * uMaterialDiffuse * lambertTerm; 
-        
-        //specular term
-        vec3 E = normalize(vEyeVec);
-        vec3 R = reflect(L, N);
-        float specular = pow( max(dot(R, E), 0.5), 50.0);
-        vec4 Is = vec4(0.5) * specular;
-
-        //result
-        vec4 finalColor = Ia + Id + Is;
-        
-        if (uMaterialDiffuse.a != 1.0) {   
-            finalColor.a = uMaterialDiffuse.a; 
-        }
-        else {
-            finalColor.a = 1.0;
-        }
-       
-        if (uUseTextures){
-            gl_FragColor =  finalColor * texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
-        }
-        else{
-            gl_FragColor = finalColor;
-        }
-    }
-
-}
-</script>
-
-<script id='code-js' type="text/javascript">
-
-var camera 		= null;
-var interactor 	= null;
-var picker 		= null;
-var transforms	= null;
-var showPickingImage 	= false;
-
-
-function configure(){
-    gl.clearColor(0.3,0.3,0.3, 1.0);
-    gl.clearDepth(100.0);
-    gl.enable(gl.DEPTH_TEST);
-    gl.depthFunc(gl.LESS);
-	gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA);
-    
-    //Creates and sets up the camera location
-    camera = new Camera(CAMERA_ORBITING_TYPE);
-    camera.goHome([0,0,192]);
-    camera.setFocus([0.0,0.0,0.0]);
-    camera.setElevation(-22);
-    camera.setAzimuth(37);
-    camera.hookRenderer = render;
-    
-    
-    var canvas  = document.getElementById('canvas-element-id');
-    
-    //Scene Picker
-    picker = new Picker(canvas);
-    picker.processHitsCallback = processHits;
-    picker.addHitCallback      = addHit;
-    picker.removeHitCallback   = removeHit;
-    picker.hitPropertyCallback = hitProperty;
-    picker.moveCallback        = movePickedObjects;
-    
-    //Creates and sets up the mouse and keyboard interactor
-    interactor = new CameraInteractor(camera, canvas);
-    interactor.setPicker(picker);
-        
-    //Scene Transforms
-    transforms = new SceneTransforms(camera);
-   
-    //init transforms
-    transforms.init();
-    
-    //Program
-    attributeList = ["aVertexPosition",
-                    "aVertexNormal",
-                    "aVertexColor",
-                    "aVertexTextureCoords"];
-
-    uniformList = [	"uPMatrix", 
-                    "uMVMatrix", 
-                    "uNMatrix",
-                    "uMaterialDiffuse",
-                    "uMaterialAmbient",
-                    "uLightAmbient",
-                    "uLightDiffuse",
-                    "uLightPosition",
-                    "uWireframe",
-                    "uAlpha",
-                    "uUseVertexColor",
-                    "uOffscreen",
-                    "uSampler",
-                    "uUseTextures",
-                    "uPickingColor"
-                    ];
-    
-    
-    Program.load(attributeList, uniformList);
-    
-    gl.uniform3fv(Program.uLightPosition,   [0,5,20]);
-    gl.uniform4fv(Program.uLightAmbient,    [0.0,0.0,0.0,1.0]);
-    gl.uniform4fv(Program.uLightDiffuse,    [1.0,1.0,1.0,1.0]);
-    gl.uniform1f(Program.uAlpha, 1.0);
-}
-
-function generatePosition(){    
-    var x = Math.floor(Math.random()*60);
-    var y = 0;
-    var z = Math.floor(Math.random()*60);
-    var flagX = Math.floor(Math.random()*10);
-    var flagZ = Math.floor(Math.random()*10);
-    
-    if (flagX >= 5) {x=-x;}
-    if (flagZ >= 5) {z=-z;}
-    return [x,y,z];
-}
-
-/**
-* Loads the scene
-*/
-function load(){
-    Floor.build(80,5);
-    Floor.pcolor = [0.0,0.0,0.0,1.0];
-    Scene.addObject(Floor);
-    var pos = [];   //position
-    var dif = [];   //diffuse color
-    var sca = [];   //scale
-    var pcol = [];  //picking color
-    var f = 1.0;    //factor
-    var type = 0;
-    for (var i = 0; i < 100; i++){
-        pos = generatePosition();
-        f = Math.random()+0.1; dif = [f, f, f, 1.0];
-        f = Math.random()+0.3; sca = [f, f, f];
-        pcol = [Math.random(), Math.random(),Math.random(),1.0];
-        type = Math.floor(Math.random()*2);
-        switch (type){
-            case 1: Scene.loadObject('models/geometry/sphere.json',   'ball_'+i, {position:pos,scale:sca, diffuse:pcol, pcolor:pcol}); break;
-            case 0: Scene.loadObject('models/geometry/cylinder.json',   'cylinder_'+i, {position:pos,scale:sca, diffuse:pcol, pcolor:pcol}); break;
-        }
-   }
-}
-
-
-
-
-function render(){
-
-    //off-screen rendering
-    gl.bindFramebuffer(gl.FRAMEBUFFER, picker.framebuffer);
-    gl.uniform1i(Program.uOffscreen, true);
-    draw();
-    //on-screen rendering
-    gl.uniform1i(Program.uOffscreen, showPickingImage);
-    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-    draw();
-}
-
-function hitProperty(ob){
-    return ob.pcolor;
-}
-
-function addHit(ob){
- ob.previous = ob.diffuse.slice(0);     
- ob.diffuse = ob.pcolor;
- render();
-}
-
-function removeHit(ob){
-    ob.diffuse = ob.previous.slice(0);
-    render();
-
-}
-
-function processHits(hits){
-    for(var i = 0; i < hits.length; i++){
-        var ob = hits[i];
-        ob.diffuse = ob.previous;
-        Scene.removeObject(ob.alias);
-    }
-    render();
-}
-
-function movePickedObjects(interactor,dx,dy){
-    
-    if (picker.plist.length == 0) return;
-    
-    var camera = interactor.camera;
-    var depth = (interactor.alt!=0);
-    
-    for (var i = 0, max = picker.plist.length; i < max; i+=1){
-        var ob = this.plist[i];
-        var pos = vec3.create([ob.position[0], ob.position[1], ob.position[2]]);
-        
-        var scaleY = vec3.create();
-        var scaleX = vec3.create();
-        
-        var factor = Math.max(Math.max(camera.position[0], camera.position[1]), camera.position[2])/1000;
-       
-        if (!depth){
-            vec3.scale(camera.up,   -dy * factor, scaleY);
-            vec3.scale(camera.right, dx * factor, scaleX);
-        }
-        else{
-            vec3.scale(camera.normal, dy * factor, scaleY);
-        }
-
-        vec3.add(pos, scaleY);
-        vec3.add(pos, scaleX);
-        
-        ob.position[0] = pos[0];
-        ob.position[1] = pos[1];
-        ob.position[2] = pos[2];
-    }
-    render();
-}
-
-
-/**
-* 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{
-        var offscreen  = Program.getUniform(Program.uOffscreen);
-        
-        for (var i = 0; i < Scene.objects.length; i++){
-                
-            var object = Scene.objects[i];
-            
-            if (object.alias == 'floor' && (showPickingImage || offscreen)){
-                continue;
-            }
-            
-            if(object.diffuse[3] < 1.0 && !offscreen) {
-				gl.disable(gl.DEPTH_TEST);
-				gl.enable(gl.BLEND);
-			} else {
-				gl.enable(gl.DEPTH_TEST);
-				gl.disable(gl.BLEND);
-			}
-
-            transforms.calculateModelView();           
-            transforms.push();
-            if (object.alias != 'floor'){
-                mat4.translate(transforms.mvMatrix, object.position);
-                mat4.scale(transforms.mvMatrix, object.scale);
-            }
-            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.uniform4fv(Program.uPickingColor, object.pcolor);
-            gl.uniform1i(Program.uUseVertexColor, false);
-            gl.uniform1i(Program.uUseTextures, false);
-            
-            //Setting attributes
-            gl.enableVertexAttribArray(Program.aVertexPosition);
-            gl.disableVertexAttribArray(Program.aVertexNormal);
-            gl.disableVertexAttribArray(Program.aVertexColor);
-            gl.disableVertexAttribArray(Program.aVertexTextureCoords);
-            
-            //Bind Array Buffer
-            gl.bindBuffer(gl.ARRAY_BUFFER, object.vbo);
-            gl.vertexAttribPointer(Program.aVertexPosition, 3, gl.FLOAT, false, 0, 0);
-            gl.enableVertexAttribArray(Program.aVertexPosition);
-           
-            if(!offscreen && !showPickingImage){
-                //render scalars
-                if (object.scalars != null){
-                    gl.enableVertexAttribArray(Program.aVertexColor);
-                    gl.uniform1i(Program.uUseVertexColor, true);
-                    gl.bindBuffer(gl.ARRAY_BUFFER, object.cbo);
-                    gl.vertexAttribPointer(Program.aVertexColor, 4, gl.FLOAT, false, 0, 0);
-                    
-                }
-                
-                //render textures
-                if (object.texture_coords){
-                    gl.enableVertexAttribArray(Program.aVertexTextureCoords);
-                    gl.uniform1i(Program.uUseTextures, true);
-                    gl.bindBuffer(gl.ARRAY_BUFFER, object.tbo);
-                    gl.vertexAttribPointer(Program.aVertexTextureCoords, 2, gl.FLOAT, false, 0, 0);
-                    gl.activeTexture(gl.TEXTURE0);
-                    gl.bindTexture(gl.TEXTURE_2D, object.texture.tex);
-                    gl.uniform1i(Program.uSampler, 0);
-                }
-            }
-            else{
-                gl.uniform1i(Program.uUseTextures, false);
-                gl.uniform1i(Program.uUseVertexColors, false);
-            }
-            
-            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   = render;
-    app.run();
-}
-</script>
-</head>
-
-<body onLoad='runWebGLApp()'>
-<div id='top'>
-<h1>WebGL Beginner's Guide - Chapter 8</h1>
-<h2 id='title-id'>Basic Picking</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="show-picking-btn" /><label for="show-picking-btn">Show Picking Image</label></td>
-    <td><a id="reset-btn" />Reset Scene</a></td>
-  
-    </tr>		
-    </table>
-    </td>
-</tr>	
-
-</table>
-</div>
-<script> 
-
-
-$('#show-picking-btn, #reset-btn').button();
-
-
-$('#show-picking-btn').click(function(){
-    showPickingImage = !showPickingImage
-    
-});
-
-$('#reset-btn').click(function(){
-    
-    Scene.objects = [];
-    load();
-    camera.goHome([0,0,192]);
-    camera.setFocus([0.0,0.0,0.0]);
-    camera.setElevation(-22);
-    camera.setAzimuth(37);
-    showPickingImage = false;
- }); 
-
-
-</script>
-<script>cview.run(cview.MODE_VIEW,false,470);</script>
-</body>
-</html>

1727_08/ch8_Picking_Scene_Final.html

+<html>
+
+<head>
+<title>WebGL Beginner's Guide - Chapter 8 - Basic Picking</title>
+<meta http-equiv='content-type' content='text/html; charset=ISO-8859-1'>
+
+<!-- CSS Styles //-->
+<link href='css/styles.css'   type='text/css' rel='stylesheet'>
+<link href='css/prettify_desert.css'  type='text/css' rel='stylesheet'/>
+<link href='css/colorpicker.css'  type='text/css' rel='stylesheet'/>
+
+<link href='css/smoothness/jquery-ui-1.8.13.custom.css' type='text/css' rel='stylesheet' />
+<!-- GUI Libraries //-->
+<script type='text/javascript' src='js/gui/jquery-1.5.1.min.js'></script>
+<script type='text/javascript' src='js/gui/jquery-ui-1.8.13.custom.min.js'></script> 
+<script type='text/javascript' src='js/gui/colorpicker.js'></script>
+<script type='text/javascript' src='js/gui/prettify.js'></script>
+<script type='text/javascript' src='js/gui/codeview.js'></script>
+<!-- MATH Libraries //-->
+<script type='text/javascript' src='js/math/glMatrix-0.9.5.min.js'></script>
+<!-- WEBGL Libraries //-->
+<script type='text/javascript' src='js/webgl/Globals.js'></script>
+<script type='text/javascript' src='js/webgl/Utils.js'></script>
+<script type='text/javascript' src='js/webgl/Program.js'></script>
+<script type='text/javascript' src='js/webgl/Scene.js'></script>
+<script type='text/javascript' src='js/webgl/Axis.js'></script>
+<script type='text/javascript' src='js/webgl/Floor.js'></script>
+<script type='text/javascript' src='js/webgl/Camera.js'></script>
+<script type='text/javascript' src='js/webgl/CameraInteractor.js'></script>
+<script type='text/javascript' src='js/webgl/SceneTransforms.js'></script>
+<script type='text/javascript' src='js/webgl/Texture.js'></script>
+<script type='text/javascript' src='js/webgl/WebGLApp.js'></script>
+<script type='text/javascript' src='js/webgl/Picker.js'></script>
+
+<script id="shader-vs" type="x-shader/x-vertex">
+
+attribute vec3 aVertexPosition;
+attribute vec3 aVertexNormal;
+attribute vec4 aVertexColor;
+attribute vec2 aVertexTextureCoords;
+
+uniform mat4 uMVMatrix;
+uniform mat4 uPMatrix;
+uniform mat4 uNMatrix;
+uniform vec3 uLightPosition;
+uniform vec4 uMaterialDiffuse;
+uniform bool uWireframe;
+uniform bool uUseVertexColor;
+uniform bool uUseTextures;
+
+varying vec3 vNormal;
+varying vec3 vLightRay;
+varying vec3 vEyeVec;
+varying vec4 vFinalColor;
+varying vec2 vTextureCoord;
+
+void main(void) {
+    
+ vFinalColor = uMaterialDiffuse;
+ vTextureCoord = vec2(0.0);
+
+ if (uUseVertexColor){
+    vFinalColor = aVertexColor;
+ }
+ 
+ if (uUseTextures){
+    vTextureCoord = aVertexTextureCoords;
+ }
+
+ vec4 vertex = uMVMatrix * vec4(aVertexPosition, 1.0);
+ vNormal = vec3(uNMatrix * vec4(aVertexNormal, 1.0));
+ vec4 light = vec4(uLightPosition,1.0);
+ vLightRay = vertex.xyz-light.xyz;
+ vEyeVec = -vec3(vertex.xyz);
+ 
+ gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+ 
+}	
+</script>
+
+<script id="shader-fs" type="x-shader/x-fragment">
+#ifdef GL_ES
+precision highp float;
+#endif
+
+uniform bool uWireframe;
+uniform bool uUseTextures; 
+
+uniform vec4 uLightAmbient;
+uniform vec4 uLightDiffuse;
+uniform vec4 uMaterialAmbient;
+uniform vec4 uMaterialDiffuse;
+uniform vec4 uPickingColor;
+uniform bool uOffscreen;  
+
+uniform sampler2D uSampler;  
+
+varying vec3 vNormal; 
+varying vec3 vLightRay;
+varying vec3 vEyeVec;
+varying vec4 vFinalColor;
+varying vec2 vTextureCoord;
+
+void main(void)
+{
+    if(uOffscreen){
+        gl_FragColor = uPickingColor;
+        return;
+    }
+    
+    if(uWireframe){
+        gl_FragColor = vFinalColor;
+    }
+    else{
+        //ambient term
+        vec4 Ia = uLightAmbient * uMaterialAmbient;
+        
+        //diffuse term
+        vec3 L = normalize(vLightRay);
+        vec3 N = normalize(vNormal);
+        float lambertTerm = max(dot(N,-L),0.33);
+        vec4 Id = uLightDiffuse * uMaterialDiffuse * lambertTerm; 
+        
+        //specular term
+        vec3 E = normalize(vEyeVec);
+        vec3 R = reflect(L, N);
+        float specular = pow( max(dot(R, E), 0.5), 50.0);
+        vec4 Is = vec4(0.5) * specular;
+
+        //result
+        vec4 finalColor = Ia + Id + Is;
+        
+        if (uMaterialDiffuse.a != 1.0) {   
+            finalColor.a = uMaterialDiffuse.a; 
+        }
+        else {
+            finalColor.a = 1.0;
+        }
+       
+        if (uUseTextures){
+            gl_FragColor =  finalColor * texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
+        }
+        else{
+            gl_FragColor = finalColor;
+        }
+    }
+
+}
+</script>
+
+<script id='code-js' type="text/javascript">
+
+var camera 		= null;
+var interactor 	= null;
+var picker 		= null;
+var transforms	= null;
+var showPickingImage 	= false;
+
+
+function configure(){
+    gl.clearColor(0.3,0.3,0.3, 1.0);
+    gl.clearDepth(100.0);
+    gl.enable(gl.DEPTH_TEST);
+    gl.depthFunc(gl.LESS);
+	gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA);
+    
+    //Creates and sets up the camera location
+    camera = new Camera(CAMERA_ORBITING_TYPE);
+    camera.goHome([0,0,192]);
+    camera.setFocus([0.0,0.0,0.0]);
+    camera.setElevation(-22);
+    camera.setAzimuth(37);
+    camera.hookRenderer = render;
+    
+    
+    var canvas  = document.getElementById('canvas-element-id');
+    
+    //Scene Picker
+    picker = new Picker(canvas);
+    picker.hitPropertyCallback = hitProperty;
+    picker.addHitCallback      = addHit;
+    picker.removeHitCallback   = removeHit;
+    picker.processHitsCallback = processHits;
+    picker.moveCallback        = movePickedObjects;
+    
+    //Creates and sets up the mouse and keyboard interactor
+    interactor = new CameraInteractor(camera, canvas);
+    interactor.setPicker(picker);
+        
+    //Scene Transforms
+    transforms = new SceneTransforms(camera);
+   
+    //init transforms
+    transforms.init();
+    
+    //Program
+    attributeList = ["aVertexPosition",
+                    "aVertexNormal",
+                    "aVertexColor",
+                    "aVertexTextureCoords"];
+
+    uniformList = [	"uPMatrix", 
+                    "uMVMatrix", 
+                    "uNMatrix",
+                    "uMaterialDiffuse",
+                    "uMaterialAmbient",
+                    "uLightAmbient",
+                    "uLightDiffuse",
+                    "uLightPosition",
+                    "uWireframe",
+                    "uAlpha",
+                    "uUseVertexColor",
+                    "uOffscreen",
+                    "uSampler",
+                    "uUseTextures",
+                    "uPickingColor"
+                    ];
+    
+    
+    Program.load(attributeList, uniformList);
+    
+    gl.uniform3fv(Program.uLightPosition,   [0,5,20]);
+    gl.uniform4fv(Program.uLightAmbient,    [0.0,0.0,0.0,1.0]);
+    gl.uniform4fv(Program.uLightDiffuse,    [1.0,1.0,1.0,1.0]);
+    gl.uniform1f(Program.uAlpha, 1.0);
+}
+
+function positionGenerator(){    
+    var x = Math.floor(Math.random()*60);
+    var y = 0;
+    var z = Math.floor(Math.random()*60);
+    var flagX = Math.floor(Math.random()*10);
+    var flagZ = Math.floor(Math.random()*10);
+    
+    if (flagX >= 5) {x=-x;}
+    if (flagZ >= 5) {z=-z;}
+    return [x,y,z];
+}
+
+var colorset = {};
+function objectLabelGenerator(){
+    var color = [Math.random(), Math.random(),Math.random(),1.0];
+    var key = color[0] + ':' + color[1] + ':' + color[2];
+
+    if (key in colorset){
+        return uniqueColorGenerator();
+    }
+    else {
+        colorset[key] = true;
+        return color;
+    }
+}
+
+
+function diffuseColorGenerator(i){
+    var c = (i % 30 / 60) + 0.3;
+    
+    return [c,c,c,1];
+}
+
+function scaleGenerator() {
+    var f = Math.random()+0.3; 
+    return [f, f, f];
+}
+
+/**
+* Loads the scene
+*/
+function load(){
+    Floor.build(80,5);
+    Floor.pcolor = [0.0,0.0,0.0,1.0];
+    Scene.addObject(Floor);
+    
+    var positionValue, scaleFactor, objectLabel, objectType, diffuseColor; 
+
+    for (var i = 0; i < 100; i++){
+        positionValue   = positionGenerator();
+        objectLabel     = objectLabelGenerator();
+        scaleFactor     = scaleGenerator();
+        diffuseColor    = diffuseColorGenerator(i);
+        objectType = Math.floor(Math.random()*2);
+
+        switch (objectType){
+            case 1: Scene.loadObject('models/geometry/sphere.json',   'ball_'+i,     {position:positionValue,scale:scaleFactor, diffuse:diffuseColor, pcolor:objectLabel}); break;
+            case 0: Scene.loadObject('models/geometry/cylinder.json', 'cylinder_'+i, {position:positionValue,scale:scaleFactor, diffuse:diffuseColor, pcolor:objectLabel}); break;
+        }
+   }
+}
+
+function hitProperty(ob){
+    return ob.pcolor;
+}
+
+function addHit(ob){
+ ob.previous = ob.diffuse.slice(0);     
+ ob.diffuse = ob.pcolor;
+ render();
+}
+
+function removeHit(ob){
+    ob.diffuse = ob.previous.slice(0);
+    render();
+}
+
+function processHits(hits){
+    var ob;
+    for(var i = 0; i < hits.length; i++){
+        ob = hits[i];
+        ob.diffuse = ob.previous;
+       // Scene.removeObject(ob.alias);
+    }
+    render();
+}
+
+function movePickedObjects(hits,interactor,dx,dy){
+    
+    if (hits == 0) return;
+    
+    var camera = interactor.camera;
+    var depth =  interactor.alt;
+    var factor = Math.max(Math.max(camera.position[0], camera.position[1]), camera.position[2])/1000;
+    var  scaleX, scaleY;
+    for (var i = 0, max = hits.length; i < max; i+=1){
+
+        scaleX = vec3.create();
+        scaleY = vec3.create();
+        
+        if (depth){
+            vec3.scale(camera.normal, dy * factor, scaleY);
+        }
+        else{
+            vec3.scale(camera.up,    -dy * factor, scaleY);
+            vec3.scale(camera.right,  dx * factor, scaleX);
+        }
+
+        vec3.add(hits[i].position, scaleY);
+        vec3.add(hits[i].position, scaleX);
+
+    }
+    render();
+}
+
+function render(){
+
+    //off-screen rendering
+    gl.bindFramebuffer(gl.FRAMEBUFFER, picker.framebuffer);
+    gl.uniform1i(Program.uOffscreen, true);
+    draw();
+    //on-screen rendering
+    gl.uniform1i(Program.uOffscreen, showPickingImage);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    draw();
+}
+
+/**
+* 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{
+        var offscreen  = Program.getUniform(Program.uOffscreen);
+        
+        for (var i = 0; i < Scene.objects.length; i++){
+                
+            var object = Scene.objects[i];
+            
+            if (object.alias == 'floor' && (showPickingImage || offscreen)){
+                continue;
+            }
+            
+            if(object.diffuse[3] < 1.0 && !offscreen) {
+				gl.disable(gl.DEPTH_TEST);
+				gl.enable(gl.BLEND);
+			} else {
+				gl.enable(gl.DEPTH_TEST);
+				gl.disable(gl.BLEND);
+			}
+
+            transforms.calculateModelView();           
+            transforms.push();
+            if (object.alias != 'floor'){
+                mat4.translate(transforms.mvMatrix, object.position);
+                mat4.scale(transforms.mvMatrix, object.scale);
+            }
+            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.uniform4fv(Program.uPickingColor, object.pcolor);
+            gl.uniform1i(Program.uUseVertexColor, false);
+            gl.uniform1i(Program.uUseTextures, false);
+            
+            //Setting attributes
+            gl.enableVertexAttribArray(Program.aVertexPosition);
+            gl.disableVertexAttribArray(Program.aVertexNormal);
+            gl.disableVertexAttribArray(Program.aVertexColor);
+            gl.disableVertexAttribArray(Program.aVertexTextureCoords);
+            
+            //Bind Array Buffer
+            gl.bindBuffer(gl.ARRAY_BUFFER, object.vbo);
+            gl.vertexAttribPointer(Program.aVertexPosition, 3, gl.FLOAT, false, 0, 0);
+            gl.enableVertexAttribArray(Program.aVertexPosition);
+           
+            if(!offscreen && !showPickingImage){
+                //render scalars
+                if (object.scalars != null){
+                    gl.enableVertexAttribArray(Program.aVertexColor);
+                    gl.uniform1i(Program.uUseVertexColor, true);
+                    gl.bindBuffer(gl.ARRAY_BUFFER, object.cbo);
+                    gl.vertexAttribPointer(Program.aVertexColor, 4, gl.FLOAT, false, 0, 0);
+                    
+                }
+                
+                //render textures
+                if (object.texture_coords){
+                    gl.enableVertexAttribArray(Program.aVertexTextureCoords);
+                    gl.uniform1i(Program.uUseTextures, true);
+                    gl.bindBuffer(gl.ARRAY_BUFFER, object.tbo);
+                    gl.vertexAttribPointer(Program.aVertexTextureCoords, 2, gl.FLOAT, false, 0, 0);
+                    gl.activeTexture(gl.TEXTURE0);
+                    gl.bindTexture(gl.TEXTURE_2D, object.texture.tex);
+                    gl.uniform1i(Program.uSampler, 0);
+                }
+            }
+            else{
+                gl.uniform1i(Program.uUseTextures, false);
+                gl.uniform1i(Program.uUseVertexColors, false);
+            }
+            
+            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   = render;
+    app.run();
+}
+</script>
+</head>
+
+<body onLoad='runWebGLApp()'>
+<div id='top'>
+<h1>WebGL Beginner's Guide - Chapter 8</h1>
+<h2 id='title-id'>Basic Picking</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="show-picking-btn" /><label for="show-picking-btn">Show Picking Image</label></td>
+    <td><a id="reset-btn" />Reset Scene</a></td>
+  
+    </tr>		
+    </table>
+    </td>
+</tr>	
+
+</table>
+</div>
+<script> 
+
+
+$('#show-picking-btn, #reset-btn').button();
+
+
+$('#show-picking-btn').click(function(){
+    showPickingImage = !showPickingImage
+    
+});
+
+$('#reset-btn').click(function(){
+    
+    Scene.objects = [];
+    load();
+    camera.goHome([0,0,192]);
+    camera.setFocus([0.0,0.0,0.0]);
+    camera.setElevation(-22);
+    camera.setAzimuth(37);
+    showPickingImage = false;
+ }); 
+
+
+</script>
+<script>cview.run(cview.MODE_VIEW,false,470);</script>
+</body>
+</html>

1727_08/ch8_Picking_Scene_Initial.html

+<html>
+
+<head>
+<title>WebGL Beginner's Guide - Chapter 8 - Basic Picking</title>
+<meta http-equiv='content-type' content='text/html; charset=ISO-8859-1'>
+
+<!-- CSS Styles //-->
+<link href='css/styles.css'   type='text/css' rel='stylesheet'>
+<link href='css/prettify_desert.css'  type='text/css' rel='stylesheet'/>
+<link href='css/colorpicker.css'  type='text/css' rel='stylesheet'/>
+
+<link href='css/smoothness/jquery-ui-1.8.13.custom.css' type='text/css' rel='stylesheet' />
+<!-- GUI Libraries //-->
+<script type='text/javascript' src='js/gui/jquery-1.5.1.min.js'></script>
+<script type='text/javascript' src='js/gui/jquery-ui-1.8.13.custom.min.js'></script> 
+<script type='text/javascript' src='js/gui/colorpicker.js'></script>
+<script type='text/javascript' src='js/gui/prettify.js'></script>
+<script type='text/javascript' src='js/gui/codeview.js'></script>
+<!-- MATH Libraries //-->
+<script type='text/javascript' src='js/math/glMatrix-0.9.5.min.js'></script>
+<!-- WEBGL Libraries //-->
+<script type='text/javascript' src='js/webgl/Globals.js'></script>
+<script type='text/javascript' src='js/webgl/Utils.js'></script>
+<script type='text/javascript' src='js/webgl/Program.js'></script>
+<script type='text/javascript' src='js/webgl/Scene.js'></script>
+<script type='text/javascript' src='js/webgl/Axis.js'></script>
+<script type='text/javascript' src='js/webgl/Floor.js'></script>
+<script type='text/javascript' src='js/webgl/Camera.js'></script>
+<script type='text/javascript' src='js/webgl/CameraInteractor.js'></script>
+<script type='text/javascript' src='js/webgl/SceneTransforms.js'></script>
+<script type='text/javascript' src='js/webgl/Texture.js'></script>
+<script type='text/javascript' src='js/webgl/WebGLApp.js'></script>
+<script type='text/javascript' src='js/webgl/Picker.js'></script>
+
+<script id="shader-vs" type="x-shader/x-vertex">
+
+attribute vec3 aVertexPosition;
+attribute vec3 aVertexNormal;
+attribute vec4 aVertexColor;
+attribute vec2 aVertexTextureCoords;
+
+uniform mat4 uMVMatrix;
+uniform mat4 uPMatrix;
+uniform mat4 uNMatrix;
+uniform vec3 uLightPosition;
+uniform vec4 uMaterialDiffuse;
+uniform bool uWireframe;
+uniform bool uUseVertexColor;
+uniform bool uUseTextures;
+
+varying vec3 vNormal;
+varying vec3 vLightRay;
+varying vec3 vEyeVec;
+varying vec4 vFinalColor;
+varying vec2 vTextureCoord;
+
+void main(void) {
+    
+ vFinalColor = uMaterialDiffuse;
+ vTextureCoord = vec2(0.0);
+
+ if (uUseVertexColor){
+    vFinalColor = aVertexColor;
+ }
+ 
+ if (uUseTextures){
+    vTextureCoord = aVertexTextureCoords;
+ }
+
+ vec4 vertex = uMVMatrix * vec4(aVertexPosition, 1.0);
+ vNormal = vec3(uNMatrix * vec4(aVertexNormal, 1.0));
+ vec4 light = vec4(uLightPosition,1.0);
+ vLightRay = vertex.xyz-light.xyz;
+ vEyeVec = -vec3(vertex.xyz);
+ 
+ gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+ 
+}	
+</script>
+
+<script id="shader-fs" type="x-shader/x-fragment">
+#ifdef GL_ES
+precision highp float;
+#endif
+
+uniform bool uWireframe;
+uniform bool uUseTextures; 
+
+uniform vec4 uLightAmbient;
+uniform vec4 uLightDiffuse;
+uniform vec4 uMaterialAmbient;
+uniform vec4 uMaterialDiffuse;
+uniform vec4 uPickingColor;
+uniform bool uOffscreen;  
+
+uniform sampler2D uSampler;  
+
+varying vec3 vNormal; 
+varying vec3 vLightRay;
+varying vec3 vEyeVec;
+varying vec4 vFinalColor;
+varying vec2 vTextureCoord;
+
+void main(void)
+{
+    if(uOffscreen){
+        gl_FragColor = uPickingColor;
+        return;
+    }
+    
+    if(uWireframe){
+        gl_FragColor = vFinalColor;
+    }
+    else{
+        //ambient term
+        vec4 Ia = uLightAmbient * uMaterialAmbient;
+        
+        //diffuse term
+        vec3 L = normalize(vLightRay);
+        vec3 N = normalize(vNormal);
+        float lambertTerm = max(dot(N,-L),0.33);
+        vec4 Id = uLightDiffuse * uMaterialDiffuse * lambertTerm; 
+        
+        //specular term
+        vec3 E = normalize(vEyeVec);
+        vec3 R = reflect(L, N);
+        float specular = pow( max(dot(R, E), 0.5), 50.0);
+        vec4 Is = vec4(0.5) * specular;
+
+        //result
+        vec4 finalColor = Ia + Id + Is;
+        
+        if (uMaterialDiffuse.a != 1.0) {   
+            finalColor.a = uMaterialDiffuse.a; 
+        }
+        else {
+            finalColor.a = 1.0;
+        }
+       
+        if (uUseTextures){
+            gl_FragColor =  finalColor * texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
+        }
+        else{
+            gl_FragColor = finalColor;
+        }
+    }
+
+}
+</script>
+
+<script id='code-js' type="text/javascript">
+
+var camera 		= null;
+var interactor 	= null;
+var picker 		= null;
+var transforms	= null;
+var showPickingImage 	= false;
+
+
+function configure(){
+    gl.clearColor(0.3,0.3,0.3, 1.0);
+    gl.clearDepth(100.0);
+    gl.enable(gl.DEPTH_TEST);
+    gl.depthFunc(gl.LESS);
+	gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA);
+    
+    //Creates and sets up the camera location
+    camera = new Camera(CAMERA_ORBITING_TYPE);
+    camera.goHome([0,0,192]);
+    camera.setFocus([0.0,0.0,0.0]);
+    camera.setElevation(-22);
+    camera.setAzimuth(37);
+    camera.hookRenderer = render;
+    
+    
+    var canvas  = document.getElementById('canvas-element-id');
+    
+    //Scene Picker
+    picker = new Picker(canvas);
+    picker.hitPropertyCallback = hitProperty;
+    picker.addHitCallback      = addHit;
+    picker.removeHitCallback   = removeHit;
+    picker.processHitsCallback = processHits;
+    picker.moveCallback        = movePickedObjects;
+    
+    //Creates and sets up the mouse and keyboard interactor
+    interactor = new CameraInteractor(camera, canvas);
+    interactor.setPicker(picker);
+        
+    //Scene Transforms
+    transforms = new SceneTransforms(camera);
+   
+    //init transforms
+    transforms.init();
+    
+    //Program
+    attributeList = ["aVertexPosition",
+                    "aVertexNormal",
+                    "aVertexColor",
+                    "aVertexTextureCoords"];
+
+    uniformList = [	"uPMatrix", 
+                    "uMVMatrix", 
+                    "uNMatrix",
+                    "uMaterialDiffuse",
+                    "uMaterialAmbient",
+                    "uLightAmbient",
+                    "uLightDiffuse",
+                    "uLightPosition",
+                    "uWireframe",
+                    "uAlpha",
+                    "uUseVertexColor",
+                    "uOffscreen",
+                    "uSampler",
+                    "uUseTextures",
+                    "uPickingColor"
+                    ];
+    
+    
+    Program.load(attributeList, uniformList);
+    
+    gl.uniform3fv(Program.uLightPosition,   [0,5,20]);
+    gl.uniform4fv(Program.uLightAmbient,    [0.0,0.0,0.0,1.0]);
+    gl.uniform4fv(Program.uLightDiffuse,    [1.0,1.0,1.0,1.0]);
+    gl.uniform1f(Program.uAlpha, 1.0);
+}
+
+function positionGenerator(){    
+   //To be implemented
+}
+
+var colorset = {};
+function objectLabelGenerator(){
+    //To be implemented
+}
+
+
+function diffuseColorGenerator(i){
+    //To be implemented
+}
+
+function scaleGenerator() {
+    //To be implemented
+}
+
+
+/**
+* Loads the scene
+*/
+function load(){
+    Floor.build(80,5);
+    Floor.pcolor = [0.0,0.0,0.0,1.0];
+    Scene.addObject(Floor);
+    //Add objects to the scene here:
+   
+}
+
+function hitProperty(ob){
+    //To be implemented
+}
+
+function addHit(ob){
+    //To be implemented
+}
+
+function removeHit(ob){
+    //To be implemented
+}
+
+function processHits(hits){
+   //To be Implemented
+}
+
+function movePickedObjects(hits, interactor,dx,dy){
+    //To be implemented
+}
+
+function render(){
+
+    //off-screen rendering
+    gl.bindFramebuffer(gl.FRAMEBUFFER, picker.framebuffer);
+    gl.uniform1i(Program.uOffscreen, true);
+    draw();
+    //on-screen rendering
+    gl.uniform1i(Program.uOffscreen, showPickingImage);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    draw();
+}
+
+/**
+* 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{
+        var offscreen  = Program.getUniform(Program.uOffscreen);
+        
+        for (var i = 0; i < Scene.objects.length; i++){
+                
+            var object = Scene.objects[i];
+            
+            if (object.alias == 'floor' && (showPickingImage || offscreen)){
+                continue;
+            }
+            
+            if(object.diffuse[3] < 1.0 && !offscreen) {
+				gl.disable(gl.DEPTH_TEST);
+				gl.enable(gl.BLEND);
+			} else {
+				gl.enable(gl.DEPTH_TEST);
+				gl.disable(gl.BLEND);
+			}
+
+            transforms.calculateModelView();           
+            transforms.push();
+            if (object.alias != 'floor'){
+                mat4.translate(transforms.mvMatrix, object.position);
+                mat4.scale(transforms.mvMatrix, object.scale);
+            }
+            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.uniform4fv(Program.uPickingColor, object.pcolor);
+            gl.uniform1i(Program.uUseVertexColor, false);
+            gl.uniform1i(Program.uUseTextures, false);
+            
+            //Setting attributes
+            gl.enableVertexAttribArray(Program.aVertexPosition);
+            gl.disableVertexAttribArray(Program.aVertexNormal);
+            gl.disableVertexAttribArray(Program.aVertexColor);
+            gl.disableVertexAttribArray(Program.aVertexTextureCoords);
+            
+            //Bind Array Buffer
+            gl.bindBuffer(gl.ARRAY_BUFFER, object.vbo);
+            gl.vertexAttribPointer(Program.aVertexPosition, 3, gl.FLOAT, false, 0, 0);
+            gl.enableVertexAttribArray(Program.aVertexPosition);
+           
+            if(!offscreen && !showPickingImage){
+                //render scalars
+                if (object.scalars != null){
+                    gl.enableVertexAttribArray(Program.aVertexColor);
+                    gl.uniform1i(Program.uUseVertexColor, true);
+                    gl.bindBuffer(gl.ARRAY_BUFFER, object.cbo);
+                    gl.vertexAttribPointer(Program.aVertexColor, 4, gl.FLOAT, false, 0, 0);
+                    
+                }
+                
+                //render textures
+                if (object.texture_coords){
+                    gl.enableVertexAttribArray(Program.aVertexTextureCoords);
+                    gl.uniform1i(Program.uUseTextures, true);
+                    gl.bindBuffer(gl.ARRAY_BUFFER, object.tbo);
+                    gl.vertexAttribPointer(Program.aVertexTextureCoords, 2, gl.FLOAT, false, 0, 0);
+                    gl.activeTexture(gl.TEXTURE0);
+                    gl.bindTexture(gl.TEXTURE_2D, object.texture.tex);
+                    gl.uniform1i(Program.uSampler, 0);
+                }
+            }
+            else{
+                gl.uniform1i(Program.uUseTextures, false);
+                gl.uniform1i(Program.uUseVertexColors, false);
+            }
+            
+            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   = render;
+    app.run();
+}
+</script>
+</head>
+
+<body onLoad='runWebGLApp()'>
+<div id='top'>
+<h1>WebGL Beginner's Guide - Chapter 8</h1>
+<h2 id='title-id'>Basic Picking</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="show-picking-btn" /><label for="show-picking-btn">Show Picking Image</label></td>
+    <td><a id="reset-btn" />Reset Scene</a></td>
+  
+    </tr>		
+    </table>
+    </td>
+</tr>	
+
+</table>
+</div>
+<script type="text/javascript"> 
+
+
+$('#show-picking-btn, #reset-btn').button();
+
+
+$('#show-picking-btn').click(function(){
+    showPickingImage = !showPickingImage
+    
+});
+
+$('#reset-btn').click(function(){
+    
+    Scene.objects = [];
+    load();
+    camera.goHome([0,0,192]);
+    camera.setFocus([0.0,0.0,0.0]);
+    camera.setElevation(-22);
+    camera.setAzimuth(37);
+    showPickingImage = false;
+ }); 
+
+
+</script>
+<script type="text/javascript">cview.run(cview.MODE_VIEW,false,470);</script>
+</body>
+</html>

1727_08/ch8_Picking_Scene_NoPicker.html

+<html>
+
+<head>
+<title>WebGL Beginner's Guide - Chapter 8 - Basic Picking</title>
+<meta http-equiv='content-type' content='text/html; charset=ISO-8859-1'>
+
+<!-- CSS Styles //-->
+<link href='css/styles.css'   type='text/css' rel='stylesheet'>
+<link href='css/prettify_desert.css'  type='text/css' rel='stylesheet'/>
+<link href='css/colorpicker.css'  type='text/css' rel='stylesheet'/>
+
+<link href='css/smoothness/jquery-ui-1.8.13.custom.css' type='text/css' rel='stylesheet' />
+<!-- GUI Libraries //-->
+<script type='text/javascript' src='js/gui/jquery-1.5.1.min.js'></script>
+<script type='text/javascript' src='js/gui/jquery-ui-1.8.13.custom.min.js'></script> 
+<script type='text/javascript' src='js/gui/colorpicker.js'></script>
+<script type='text/javascript' src='js/gui/prettify.js'></script>
+<script type='text/javascript' src='js/gui/codeview.js'></script>
+<!-- MATH Libraries //-->
+<script type='text/javascript' src='js/math/glMatrix-0.9.5.min.js'></script>
+<!-- WEBGL Libraries //-->
+<script type='text/javascript' src='js/webgl/Globals.js'></script>
+<script type='text/javascript' src='js/webgl/Utils.js'></script>
+<script type='text/javascript' src='js/webgl/Program.js'></script>
+<script type='text/javascript' src='js/webgl/Scene.js'></script>
+<script type='text/javascript' src='js/webgl/Axis.js'></script>
+<script type='text/javascript' src='js/webgl/Floor.js'></script>
+<script type='text/javascript' src='js/webgl/Camera.js'></script>
+<script type='text/javascript' src='js/webgl/CameraInteractor.js'></script>
+<script type='text/javascript' src='js/webgl/SceneTransforms.js'></script>
+<script type='text/javascript' src='js/webgl/Texture.js'></script>
+<script type='text/javascript' src='js/webgl/WebGLApp.js'></script>
+<script type='text/javascript' src='js/webgl/Picker.js'></script>
+
+<script id="shader-vs" type="x-shader/x-vertex">
+
+attribute vec3 aVertexPosition;
+attribute vec3 aVertexNormal;
+attribute vec4 aVertexColor;
+attribute vec2 aVertexTextureCoords;
+
+uniform mat4 uMVMatrix;
+uniform mat4 uPMatrix;
+uniform mat4 uNMatrix;
+uniform vec3 uLightPosition;
+uniform vec4 uMaterialDiffuse;
+uniform bool uWireframe;
+uniform bool uUseVertexColor;
+uniform bool uUseTextures;
+
+varying vec3 vNormal;
+varying vec3 vLightRay;
+varying vec3 vEyeVec;
+varying vec4 vFinalColor;
+varying vec2 vTextureCoord;
+
+void main(void) {
+    
+ vFinalColor = uMaterialDiffuse;
+ vTextureCoord = vec2(0.0);
+
+ if (uUseVertexColor){
+    vFinalColor = aVertexColor;
+ }
+ 
+ if (uUseTextures){
+    vTextureCoord = aVertexTextureCoords;
+ }
+
+ vec4 vertex = uMVMatrix * vec4(aVertexPosition, 1.0);
+ vNormal = vec3(uNMatrix * vec4(aVertexNormal, 1.0));
+ vec4 light = vec4(uLightPosition,1.0);
+ vLightRay = vertex.xyz-light.xyz;
+ vEyeVec = -vec3(vertex.xyz);
+ 
+ gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+ 
+}	
+</script>
+
+<script id="shader-fs" type="x-shader/x-fragment">
+#ifdef GL_ES
+precision highp float;
+#endif
+
+uniform bool uWireframe;
+uniform bool uUseTextures; 
+
+uniform vec4 uLightAmbient;
+uniform vec4 uLightDiffuse;
+uniform vec4 uMaterialAmbient;
+uniform vec4 uMaterialDiffuse;
+uniform vec4 uPickingColor;
+uniform bool uOffscreen;  
+
+uniform sampler2D uSampler;  
+
+varying vec3 vNormal; 
+varying vec3 vLightRay;
+varying vec3 vEyeVec;
+varying vec4 vFinalColor;
+varying vec2 vTextureCoord;
+
+void main(void)
+{
+    if(uOffscreen){
+        gl_FragColor = uPickingColor;
+        return;
+    }
+    
+    if(uWireframe){
+        gl_FragColor = vFinalColor;
+    }
+    else{
+        //ambient term
+        vec4 Ia = uLightAmbient * uMaterialAmbient;
+        
+        //diffuse term
+        vec3 L = normalize(vLightRay);
+        vec3 N = normalize(vNormal);
+        float lambertTerm = max(dot(N,-L),0.33);
+        vec4 Id = uLightDiffuse * uMaterialDiffuse * lambertTerm; 
+        
+        //specular term
+        vec3 E = normalize(vEyeVec);
+        vec3 R = reflect(L, N);
+        float specular = pow( max(dot(R, E), 0.5), 50.0);
+        vec4 Is = vec4(0.5) * specular;
+
+        //result
+        vec4 finalColor = Ia + Id + Is;
+        
+        if (uMaterialDiffuse.a != 1.0) {   
+            finalColor.a = uMaterialDiffuse.a; 
+        }
+        else {
+            finalColor.a = 1.0;
+        }
+       
+        if (uUseTextures){
+            gl_FragColor =  finalColor * texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
+        }
+        else{
+            gl_FragColor = finalColor;
+        }
+    }
+
+}
+</script>
+
+<script id='code-js' type="text/javascript">
+
+var camera 		= null;
+var interactor 	= null;
+var picker 		= null;
+var transforms	= null;
+var showPickingImage 	= false;
+
+
+function configure(){
+    gl.clearColor(0.3,0.3,0.3, 1.0);
+    gl.clearDepth(100.0);
+    gl.enable(gl.DEPTH_TEST);
+    gl.depthFunc(gl.LESS);
+	gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA);
+    
+    //Creates and sets up the camera location
+    camera = new Camera(CAMERA_ORBITING_TYPE);
+    camera.goHome([0,0,192]);
+    camera.setFocus([0.0,0.0,0.0]);
+    camera.setElevation(-22);
+    camera.setAzimuth(37);
+    camera.hookRenderer = render;
+    
+    
+    var canvas  = document.getElementById('canvas-element-id');
+    
+    //Scene Picker
+    picker = new Picker(canvas);
+    picker.hitPropertyCallback = hitProperty;
+    picker.addHitCallback      = addHit;
+    picker.removeHitCallback   = removeHit;
+    picker.processHitsCallback = processHits;
+    picker.moveCallback        = movePickedObjects;
+    
+    //Creates and sets up the mouse and keyboard interactor
+    interactor = new CameraInteractor(camera, canvas);
+    interactor.setPicker(picker);
+        
+    //Scene Transforms
+    transforms = new SceneTransforms(camera);
+   
+    //init transforms
+    transforms.init();
+    
+    //Program
+    attributeList = ["aVertexPosition",
+                    "aVertexNormal",
+                    "aVertexColor",
+                    "aVertexTextureCoords"];
+
+    uniformList = [	"uPMatrix", 
+                    "uMVMatrix", 
+                    "uNMatrix",
+                    "uMaterialDiffuse",
+                    "uMaterialAmbient",
+                    "uLightAmbient",
+                    "uLightDiffuse",
+                    "uLightPosition",
+                    "uWireframe",
+                    "uAlpha",
+                    "uUseVertexColor",
+                    "uOffscreen",
+                    "uSampler",
+                    "uUseTextures",
+                    "uPickingColor"
+                    ];
+    
+    
+    Program.load(attributeList, uniformList);
+    
+    gl.uniform3fv(Program.uLightPosition,   [0,5,20]);
+    gl.uniform4fv(Program.uLightAmbient,    [0.0,0.0,0.0,1.0]);
+    gl.uniform4fv(Program.uLightDiffuse,    [1.0,1.0,1.0,1.0]);
+    gl.uniform1f(Program.uAlpha, 1.0);
+}
+
+function positionGenerator(){    
+    var x = Math.floor(Math.random()*60);
+    var y = 0;
+    var z = Math.floor(Math.random()*60);
+    var flagX = Math.floor(Math.random()*10);
+    var flagZ = Math.floor(Math.random()*10);
+    
+    if (flagX >= 5) {x=-x;}
+    if (flagZ >= 5) {z=-z;}
+    return [x,y,z];
+}
+
+var colorset = {};
+function objectLabelGenerator(){
+    var color = [Math.random(), Math.random(),Math.random(),1.0];
+    var key = color[0] + ':' + color[1] + ':' + color[2];
+
+    if (key in colorset){
+        return uniqueColorGenerator();
+    }
+    else {
+        colorset[key] = true;
+        return color;
+    }
+}
+
+
+function diffuseColorGenerator(i){
+    var c = (i % 30 / 60) + 0.3;
+    
+    return [c,c,c,1];
+}
+
+function scaleGenerator() {
+    var f = Math.random()+0.3; 
+    return [f, f, f];
+}
+
+
+/**
+* Loads the scene
+*/
+function load(){
+    Floor.build(80,5);
+    Floor.pcolor = [0.0,0.0,0.0,1.0];
+    Scene.addObject(Floor);
+    
+    var positionValue, scaleFactor, objectLabel, objectType, diffuseColor; 
+
+    for (var i = 0; i < 100; i++){
+        positionValue   = positionGenerator();
+        objectLabel     = objectLabelGenerator();
+        scaleFactor     = scaleGenerator();
+        diffuseColor    = diffuseColorGenerator(i);
+        objectType = Math.floor(Math.random()*2);
+
+        switch (objectType){
+            case 1: Scene.loadObject('models/geometry/sphere.json',   'ball_'+i,     {position:positionValue,scale:scaleFactor, diffuse:diffuseColor, pcolor:objectLabel}); break;
+            case 0: Scene.loadObject('models/geometry/cylinder.json', 'cylinder_'+i, {position:positionValue,scale:scaleFactor, diffuse:diffuseColor, pcolor:objectLabel}); break;
+        }
+   }
+}
+
+function hitProperty(ob){
+    //To be implemented
+}
+
+function addHit(ob){
+    //To be implemented
+}
+
+function removeHit(ob){
+    //To be implemented
+}
+
+function processHits(hits){
+   //To be Implemented
+}
+
+function movePickedObjects(hits, interactor,dx,dy){
+    //To be implemented
+}
+
+function render(){
+
+    //off-screen rendering
+    gl.bindFramebuffer(gl.FRAMEBUFFER, picker.framebuffer);
+    gl.uniform1i(Program.uOffscreen, true);
+    draw();
+    //on-screen rendering
+    gl.uniform1i(Program.uOffscreen, showPickingImage);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    draw();
+}
+
+/**
+* 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{
+        var offscreen  = Program.getUniform(Program.uOffscreen);
+        
+        for (var i = 0; i < Scene.objects.length; i++){
+                
+            var object = Scene.objects[i];
+            
+            if (object.alias == 'floor' && (showPickingImage || offscreen)){
+                continue;
+            }
+            
+            if(object.diffuse[3] < 1.0 && !offscreen) {
+				gl.disable(gl.DEPTH_TEST);
+				gl.enable(gl.BLEND);
+			} else {
+				gl.enable(gl.DEPTH_TEST);
+				gl.disable(gl.BLEND);
+			}
+
+            transforms.calculateModelView();           
+            transforms.push();
+            if (object.alias != 'floor'){
+                mat4.translate(transforms.mvMatrix, object.position);
+                mat4.scale(transforms.mvMatrix, object.scale);
+            }
+            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.uniform4fv(Program.uPickingColor, object.pcolor);
+            gl.uniform1i(Program.uUseVertexColor, false);
+            gl.uniform1i(Program.uUseTextures, false);
+            
+            //Setting attributes
+            gl.enableVertexAttribArray(Program.aVertexPosition);
+            gl.disableVertexAttribArray(Program.aVertexNormal);
+            gl.disableVertexAttribArray(Program.aVertexColor);
+            gl.disableVertexAttribArray(Program.aVertexTextureCoords);
+            
+            //Bind Array Buffer
+            gl.bindBuffer(gl.ARRAY_BUFFER, object.vbo);
+            gl.vertexAttribPointer(Program.aVertexPosition, 3, gl.FLOAT, false, 0, 0);
+            gl.enableVertexAttribArray(Program.aVertexPosition);
+           
+            if(!offscreen && !showPickingImage){
+                //render scalars
+                if (object.scalars != null){
+                    gl.enableVertexAttribArray(Program.aVertexColor);
+                    gl.uniform1i(Program.uUseVertexColor, true);
+                    gl.bindBuffer(gl.ARRAY_BUFFER, object.cbo);
+                    gl.vertexAttribPointer(Program.aVertexColor, 4, gl.FLOAT, false, 0, 0);
+                    
+                }
+                
+                //render textures
+                if (object.texture_coords){
+                    gl.enableVertexAttribArray(Program.aVertexTextureCoords);
+                    gl.uniform1i(Program.uUseTextures, true);
+                    gl.bindBuffer(gl.ARRAY_BUFFER, object.tbo);
+                    gl.vertexAttribPointer(Program.aVertexTextureCoords, 2, gl.FLOAT, false, 0, 0);
+                    gl.activeTexture(gl.TEXTURE0);
+                    gl.bindTexture(gl.TEXTURE_2D, object.texture.tex);
+                    gl.uniform1i(Program.uSampler, 0);
+                }
+            }
+            else{
+                gl.uniform1i(Program.uUseTextures, false);
+                gl.uniform1i(Program.uUseVertexColors, false);
+            }
+            
+            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   = render;
+    app.run();
+}
+</script>
+</head>
+
+<body onLoad='runWebGLApp()'>
+<div id='top'>
+<h1>WebGL Beginner's Guide - Chapter 8</h1>
+<h2 id='title-id'>Basic Picking</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="show-picking-btn" /><label for="show-picking-btn">Show Picking Image</label></td>
+    <td><a id="reset-btn" />Reset Scene</a></td>
+  
+    </tr>		
+    </table>
+    </td>
+</tr>	
+
+</table>
+</div>
+<script> 
+
+
+$('#show-picking-btn, #reset-btn').button();
+
+
+$('#show-picking-btn').click(function(){
+    showPickingImage = !showPickingImage
+    
+});
+
+$('#reset-btn').click(function(){
+    
+    Scene.objects = [];
+    load();
+    camera.goHome([0,0,192]);
+    camera.setFocus([0.0,0.0,0.0]);
+    camera.setElevation(-22);
+    camera.setAzimuth(37);
+    showPickingImage = false;
+ }); 
+
+
+</script>
+<script>cview.run(cview.MODE_VIEW,false,470);</script>
+</body>
+</html>

1727_08/css/styles.css