Commits

Diego Cantor committed fb191c2

Updates after Chapter 2 rewrite

  • Participants
  • Parent commits 4e2bc4e

Comments (0)

Files changed (4)

File 1727_02/ch2_AjaxJSON.html

 */
 function loadModel(filename){
     var request = new XMLHttpRequest();
-
+    var resource = "http://"+document.domain+ filename
     request.open("GET",filename);
     request.onreadystatechange = function() {
+        console.info(request.readyState +' - '+request.status); 
       if (request.readyState == 4) {
-	    if(request.status == 404) {
-			alert (filename + ' does not exist');
-		 }
-		else {
+	    if(request.status == 200) { //OK
 			handleLoadedModel(filename,JSON.parse(request.responseText));
+		 }
+		else if (document.domain.length == 0 && request.status == 0){ //OK but local, no web server
+            handleLoadedModel(filename,JSON.parse(request.responseText));
+        }
+        else{
+            alert ('There was a problem loading the file :' + filename);
+            alert ('HTML error code: ' + request.status);
 		}
 	  }
     }

File 1727_02/ch2_RenderingModes.html

 <link href='css/smoothness/jquery-ui-1.8.13.custom.css' type='text/css' rel='stylesheet' />
 
 <!-- JavaScript Libraries //-->
-<script type='text/javascript' src='js/glMatrix-0.9.5.min.js'></script>
 <script type='text/javascript' src='js/jquery-1.5.1.min.js'></script>
 <script type='text/javascript' src='js/jquery-ui-1.8.13.custom.min.js'></script> 
 <script type='text/javascript' src='js/prettify.js'></script>
 <script id="shader-vs" type="x-shader/x-vertex">
 attribute vec3 aVertexPosition;
 
-uniform mat4 uMVMatrix;
-uniform mat4 uPMatrix;
-
 void main(void) {
-    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+    gl_Position = vec4(aVertexPosition, 1.0); 
     gl_PointSize = 4.0;
 }
 </script>
 var indices = []; //JavaScript array to store the indices of the trapezoid
 var vertices = []; //JavaScript array to store the vertices of the trapezoid
 
-var mvMatrix = mat4.create(); // The trapezoid-View matrix
-var pMatrix = mat4.create(); // The projection matrix
 
 var renderingMode = 'TRIANGLES';		
 
     //This is a necessary step as the shaders are NOT written in JavaScript but in a 
     //specialized language called GLSL. More about this on chapter 3.
     prg.vertexPositionAttribute = gl.getAttribLocation(prg, "aVertexPosition");
-    prg.pMatrixUniform = gl.getUniformLocation(prg, "uPMatrix");
-    prg.mvMatrixUniform = gl.getUniformLocation(prg, "uMVMatrix");
-    prg.uFragmentColor = gl.getUniformLocation(prg, "uFragmentColor");
+
 }		
 
 /*
 * Creates the buffers that contain the geometry of the trapezoid
 *
-*         #1 (-25,50)  +--------------+  (25,50)  #3
+*      #1 (-0.25,0.5)  +--------------+  (0.25,0.5)  #3
 *                     /                \
 *                    /                  \
 *                   /          .(0,0)    \ 
 *                  /                      \ 
 *                 /                        \
-*   #0(-50,-50)  +------------+-------------+  (50,-50) #4
-*                             #2(0,-50)
+* #0(-0.5,-0.5)  +------------+-------------+  (0.5,-0.5) #4
+*                             #2(0,-0.5)
 */
 function initBuffers() {
     vertices =  [
-    -50.0,-50.0,0.0, 	//Vertex 0
-    -25.0,50.0,0.0, 	//Vertex 1
-    0.0,-50.0,0.0, 		//Vertex 2
-    25.0,50.0,0.0,  	//Vertex 3
-    50.0,-50.0,0.0		//Vertex 4
+    -0.5,-0.5,0.0, 	 //Vertex 0
+    -0.25,0.5,0.0, 	 //Vertex 1
+    0.0,-0.5,0.0,  //Vertex 2
+    0.25,0.5,0.0,  	 //Vertex 3
+    0.5,-0.5,0.0	 //Vertex 4
     ]; 	
 
     indices = [0,1,2,0,2,3,2,3,4]; //For triangles
 
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
     gl.viewport(0,0,c_width, c_height);
-
-    mat4.perspective(45, c_width / c_height, 0.1, 10000.0, pMatrix);
-    gl.uniformMatrix4fv(prg.pMatrixUniform, false, pMatrix);
-
-    mat4.identity(mvMatrix);	
-    mat4.translate(mvMatrix, [0.0, 0.0, -160.0]); //Sets the camera to a reasonable distance to view the trapezoid
-    gl.uniformMatrix4fv(prg.mvMatrixUniform, false, mvMatrix);
             
     gl.bindBuffer(gl.ARRAY_BUFFER, trapezoidVertexBuffer);
     gl.vertexAttribPointer(prg.aVertexPosition, 3, gl.FLOAT, false, 0, 0);
     gl.enableVertexAttribArray(prg.vertexPositionAttribute);
 
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, trapezoidIndexBuffer);
-
-    if (renderingMode == 'TRIANGLES') {
-        indices = [0,1,2,2,3,4]; 
-        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
-        gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);
-    }
-    else if (renderingMode == 'LINES') {
-        indices = [1,3,0,4,1,2,2,3];
-        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
-        gl.drawElements(gl.LINES, indices.length, gl.UNSIGNED_SHORT,0);
-    }
-    else if (renderingMode == 'POINTS'){
-        indices = [1,2,3];
-        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
-        gl.drawElements(gl.POINTS, indices.length, gl.UNSIGNED_SHORT,0);
-    }
-    else if (renderingMode == 'LINE_LOOP'){
-        indices = [2,3,4,1,0];
-        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
-        gl.drawElements(gl.LINE_LOOP, indices.length, gl.UNSIGNED_SHORT,0);
-    }
-    else if (renderingMode == 'LINE_STRIP'){
-        indices = [2,3,4,1,0];
-        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
-        gl.drawElements(gl.LINE_STRIP, indices.length, gl.UNSIGNED_SHORT,0);
-    }
-    else if (renderingMode == 'TRIANGLE_STRIP'){
-        indices = [0,1,2,3,4];
-        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
-        gl.drawElements(gl.TRIANGLE_STRIP, indices.length, gl.UNSIGNED_SHORT,0);
-    }
-    else if (renderingMode == 'TRIANGLE_FAN'){
-        indices = [0,1,2,3,4];
-        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
-        gl.drawElements(gl.TRIANGLE_FAN, indices.length, gl.UNSIGNED_SHORT,0);
+    
+    switch(renderingMode){
+
+        case "TRIANGLES": {
+            indices = [0,1,2,2,3,4]; 
+            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
+            gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);
+            break;
+        }
+        case "LINES": {
+            indices = [1,3,0,4,1,2,2,3];
+            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
+            gl.drawElements(gl.LINES, indices.length, gl.UNSIGNED_SHORT,0);
+            break;
+        }
+        case 'POINTS': {
+            indices = [1,2,3];
+            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
+            gl.drawElements(gl.POINTS, indices.length, gl.UNSIGNED_SHORT,0);
+            break;
+        }
+        case 'LINE_LOOP': {
+            indices = [2,3,4,1,0];
+            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
+            gl.drawElements(gl.LINE_LOOP, indices.length, gl.UNSIGNED_SHORT,0);
+            break;
+        }
+        case 'LINE_STRIP': {
+            indices = [2,3,4,1,0];
+            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
+            gl.drawElements(gl.LINE_STRIP, indices.length, gl.UNSIGNED_SHORT,0);
+            break;
+        }
+        case 'TRIANGLE_STRIP': {
+            indices = [0,1,2,3,4];
+            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
+            gl.drawElements(gl.TRIANGLE_STRIP, indices.length, gl.UNSIGNED_SHORT,0);
+            break;
+        }
+        case 'TRIANGLE_FAN': {
+            indices = [0,1,2,3,4];
+            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
+            gl.drawElements(gl.TRIANGLE_FAN, indices.length, gl.UNSIGNED_SHORT,0);
+            break;
+        }
+         
     }
-}
+ }
 
 /**
 * Render Loop

File 1727_02/ch2_Square.html

 <link href='css/smoothness/jquery-ui-1.8.13.custom.css' type='text/css' rel='stylesheet' />
 
 <!-- JavaScript Libraries //-->
-<script type='text/javascript' src='js/glMatrix-0.9.5.min.js'></script>
 <script type='text/javascript' src='js/jquery-1.5.1.min.js'></script>
 <script type='text/javascript' src='js/jquery-ui-1.8.13.custom.min.js'></script> 
 <script type='text/javascript' src='js/prettify.js'></script>
 <script id="shader-vs" type="x-shader/x-vertex">
 	attribute vec3 aVertexPosition;
 
-	uniform mat4 uMVMatrix;
-	uniform mat4 uPMatrix;
-
 	void main(void) {
-		gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+		gl_Position = vec4(aVertexPosition,1.0); 
 	}
 </script>
 
 	var indices = []; //JavaScript array to store the indices of the square
 	var vertices = []; //JavaScript array to store the vertices of the square
 	
-	var mvMatrix = mat4.create(); // The Model-View matrix
-	var pMatrix = mat4.create(); // The projection matrix
 
 	/*
 	* The program contains a series of instructions that tell the Graphic Processing Unit (GPU)
 		//The following lines allow us obtaining a reference to the uniforms and attributes defined in the shaders.
 		//This is a necessary step as the shaders are NOT written in JavaScript but in a 
 		//specialized language called GLSL. More about this on chapter 3.
-		prg.vertexPositionAttribute = gl.getAttribLocation(prg, "aVertexPosition");
-		prg.pMatrixUniform = gl.getUniformLocation(prg, "uPMatrix");
-		prg.mvMatrixUniform = gl.getUniformLocation(prg, "uMVMatrix");
-		prg.uFragmentColor = gl.getUniformLocation(prg, "uFragmentColor");
+		prg.vertexPosition = gl.getAttribLocation(prg, "aVertexPosition");
+	
 	}		
 	
 	/*
 	* Creates the buffers that contain the geometry of the square
 	*
-	*   #0 (-50,50) +--------------+  (50,50)  #3
+	*   #0 (-0.5,0.5) +--------------+  (0.5,0.5)  #3
 	*               |              |
 	*               |              |
 	*               |      .(0,0)  |
 	*               |              |
 	*               |              | 
-	*   #1(-50,-50) +--------------+  (50,-50) #2
+	*   #1(-0.5,-0.5) +--------------+  (0.5,-0.5) #2
 	*/
 	function initBuffers() {
-		vertices =  [
-		-50.0,50.0,0.0, 	//Vertex 0
-		-50.0,-50.0,0.0, 	//Vertex 1
-		50.0,-50.0,0.0, 	//Vertex 2
-		50.0,50.0,0.0]; 	//Vertex 3
+		
+        
+        vertices =  [
+		-0.5,0.5,0.0, 	//Vertex 0
+		-0.5,-0.5,0.0, 	//Vertex 1
+		0.5,-0.5,0.0, 	//Vertex 2
+		0.5,0.5,0.0]; 	//Vertex 3
 
 		indices = [3,2,1,3,1,0];
 		
 		gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 		gl.viewport(0,0,c_width, c_height);
 		
-		mat4.perspective(45, c_width / c_height, 0.1, 10000.0, pMatrix);
-		gl.uniformMatrix4fv(prg.pMatrixUniform, false, pMatrix);
-		
-		mat4.identity(mvMatrix);	
-		mat4.translate(mvMatrix, [0.0, 0.0, -160.0]); //Sets the camera to a reasonable distance to view the square
-		gl.uniformMatrix4fv(prg.mvMatrixUniform, false, mvMatrix);
-				
 		gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);
 		gl.vertexAttribPointer(prg.aVertexPosition, 3, gl.FLOAT, false, 0, 0);
-		gl.enableVertexAttribArray(prg.vertexPositionAttribute);
+		gl.enableVertexAttribArray(prg.vertexPosition);
 		
 		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareIndexBuffer);
 		gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);

File 1727_02/ch2_StateMachine.html

     
     //We can call isBuffer at any point (even if there is no buffer bound), because isBuffer only checks on the type of the object 
     //i.e. Is the object a WebGL buffer or not.
-    if (gl.isBuffer(vertices)){
-        is_vertices_vbo = "Yes"
+    try{
+        if (gl.isBuffer(vertices)){
+            is_vertices_vbo = "Yes"
+        }
+        else{
+            is_vertices_vbo = "Invalid"; //isBuffer returns false if the buffer invalidated flag is set
+        }
     }
-    else{
+    catch(e){
         is_vertices_vbo = "No";
     }
-    
     if (gl.isBuffer(coneVertexBuffer)){
         is_coneVertexBuffer_vbo = "Yes"
     }