Commits

Matthew Turk committed b914824

The current state of the triangle vertices...

  • Participants
  • Parent commits 414474b

Comments (0)

Files changed (4)

 		};
 	    },
 	    onDragMove: function(e) {
+        examine = e;
 		var c = this.camera;
 		var off = camGetOffset(c);
 		// Get Horizontal vector
 		program.setUniform('uPMatrix', camera.projection);
 		program.setBuffer('triangle');
 		gl.drawArrays(gl.LINES, 0, n_vertices);	    
-		examine = camera
+		//examine = camera
 	    }
 	}
     });  
+<html>
+
+<head>
+<title>Learning WebGL &mdash; lesson 1</title>
+<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+
+<link href="../lessons.css" type="text/css" rel="stylesheet" media="screen" />
+<script type="text/javascript" src="../build/PhiloGL.js"></script>
+<script type="text/javascript">var examine;</script>
+<script type="text/javascript" src="triarray.js"></script>
+<script type="text/javascript" src="index.js"></script>
+
+<script id="shader-fs" type="x-shader/x-fragment">
+  #ifdef GL_ES
+  precision highp float;
+  #endif
+
+  void main(void) {
+    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+  }
+</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);
+  }
+</script>
+</head>
+
+
+<body onload="webGLStart();">
+  <canvas id="lesson01-canvas" style="border: none;" width="500" height="500"></canvas>
+  <script src="iso.js"> </script>
+</body>
+
+</html>
+
+function webGLStart() {
+    this.curX = 0;
+    this.curY = 0;
+    this.dist = 0;
+    function updateBasedOnOffset(camera, offset){
+	camera.position.x = camera.target.x + offset.x;
+	camera.position.y = camera.target.y + offset.y;
+	camera.position.z = camera.target.z + offset.z;
+    }
+    function camGetOffset(camera){
+	return PhiloGL.Vec3.sub(camera.position, camera.target)
+    }
+    PhiloGL('lesson01-canvas', {
+	camera: {
+	    position: {
+		x: 0.5, y: 0.5, z: 5
+	    },
+	    target: {
+		x: 0.5, y: 0.5, z: 0.5
+	    },
+	},
+	program: {
+	    from: 'ids',
+	    vs: 'shader-vs',
+	    fs: 'shader-fs'
+	},	
+	events: {
+	    onDragStart: function(e) {
+		pos = {
+		    x: e.x,
+		    y: e.y
+		};
+		this.curX = e.x;
+		this.curY = e.y;
+		this.dist = camGetOffset(this.camera).norm();
+	    },
+	    onDragEnd: function(e) {
+		pos = {
+		    x: e.x,
+		    y: e.y
+		};
+	    },
+	    onDragMove: function(e) {
+        examine = e;
+		var c = this.camera;
+		var off = camGetOffset(c);
+		// Get Horizontal vector
+		var horiz = PhiloGL.Vec3.cross(c.up, 
+					       camGetOffset(c))
+		horiz.$scale(1./horiz.norm());
+
+		if (e.event.button == 0){ // Rotation
+		    // Do vertical rotation about horizontal vector
+		    var vert_rot = new PhiloGL.Mat4();
+		    vert_rot.id();
+		    vert_rot.$rotateAxis((e.y-this.curY)/100., horiz);
+		    PhiloGL.Mat4.$mulVec3(vert_rot, off);
+		    PhiloGL.Mat4.$mulVec3(vert_rot, c.up);
+		    c.up.$scale(1./c.up.norm());
+
+		    // Do horizontal rotation about up vector
+		    var side_rot = new PhiloGL.Mat4();
+		    side_rot.id();
+		    side_rot.$rotateAxis(-(e.x-this.curX)/100., c.up);
+		    side_rot.$mulVec3(off);
+		    
+		    // Update current positions
+		    this.curX = e.x;
+		    this.curY = e.y;
+		    this.dist = off.norm();
+		    updateBasedOnOffset(c, off);
+		    c.update();
+		} else if (e.event.button = 2){ // Right click - transpose
+		    var move_up = c.up.scale(-(e.y-this.curY)/200.);
+		    var move_over = horiz.scale(-(e.x-this.curX)/200.);
+		    c.position.$add(move_up);
+		    c.position.$add(move_over);
+		    c.target.$add(move_up);
+		    c.target.$add(move_over);
+		    // Update current positions
+		    this.curX = e.x;
+		    this.curY = e.y;
+		    c.update();
+		}
+		
+	    },
+	    onMouseWheel: function(e){
+		e.stop();
+	    	var offset = PhiloGL.Vec3.scale(camGetOffset(this.camera),
+						1.0 - e.wheel/10.);
+		updateBasedOnOffset(this.camera, offset);
+	    	this.camera.update();
+	    }
+	},
+	onError: function() {
+	    alert("An error ocurred while loading the application");
+	},
+	onLoad: function(app) {
+	    var gl = app.gl,
+            canvas = app.canvas,
+            program = app.program,
+            scene = app.scene,
+	    camera = app.camera;
+	    
+	    gl.viewport(0, 0, canvas.width, canvas.height);
+	    gl.clearColor(0, 0, 0, 1);
+	    gl.clearDepth(1);
+	    gl.enable(gl.DEPTH_TEST);
+	    gl.depthFunc(gl.LEQUAL);
+
+	    program.setBuffers({
+		'shapeset': {
+		    attribute: 'aVertexPosition',
+		    value: new Float32Array(vertex_positions),
+		    size: 3
+		},
+		
+	    });
+	    camera.modelView.id();
+	    
+	    setInterval(draw, 100/60);
+	    //Draw the scene
+	    function draw() {
+		gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+		//Draw Triangle
+		program.setUniform('uMVMatrix', camera.modelView);
+		program.setUniform('uPMatrix', camera.projection);
+		program.setBuffer('triangle');
+		gl.drawArrays(gl.TRIANGLES, 0, n_vertices);	    
+		//examine = camera
+	    }
+	}
+    });  
+}
+