Merge branch 'master' into 16-keyboard

aSydiK · Jul 9, 2010 · c979ca3 · c979ca3
2 parents 8075508 + fa4613b
commit c979ca3
Show file tree

Hide file tree

Showing 24 changed files with 719 additions and 37 deletions.
diff --git a/demos/acorn/acorn.html b/demos/acorn/acorn.html
@@ -1,13 +1,61 @@
 <html>
 
   <head>
-    <link rel="stylesheet" type="text/css" href="../style.css" />
+    <!-- jQuery stuff -->  
+    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
+    <script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
+    <link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" />
+
     <script src="../../pointstream.js"></script>
     <script src="acorn.js"></script>
   </head>
 
-  <body onLoad="start();">
-    <canvas id="canvas" width="500" height="500"></canvas>
+  <body onLoad="start();" bgcolor="#222" text="#FFF">
+       <script type="text/javascript">
+        $(function() {
+          $("#constant").slider({
+          value: 0.01,
+          min: 0,
+          max: 1,
+          step: 0.001,
+          slide: function(event, ui) {
+            $("#c").val(ui.value);
+          }});
+
+          $("#c").val($("#constant").slider("value"));
+        });
+
+        $(function() {
+          $("#linear").slider({
+          value: 0,
+          min: 0,
+          max: 1,
+          step: 0.001,
+          slide: function(event, ui) {
+            $("#l").val(ui.value);
+          }});
+
+          $("#l").val($("#linear").slider("value"));
+        });
+
+        $(function() {
+          $("#quadratic").slider({
+          value: 0.003,
+          min: 0,
+          max: 1,
+          step: 0.001,
+          slide: function(event, ui) {
+            $("#l").val(ui.value);
+          }});
+
+          $("#l").val($("#quadratic").slider("value"));
+        });
+      </script>
+
+    <canvas id="canvas" width="500" height="500"></canvas><br />  
+    Constant: <span id="const"> </span><div id="constant"></div><br/>
+    Linear:  <span id="lin"> </span><div id="linear"></div><br/>
+    Quadratic:  <span id="quad"> </span><div id="quadratic"></div><br/>
   </body>
 
 </html>
diff --git a/demos/acorn/acorn.js b/demos/acorn/acorn.js
@@ -1,7 +1,7 @@
 var ps;
 
 var buttonDown = false;
-var zoomed = 0;
+var zoomed = -50;
 
 var rot =[0,0];
 var curCoords = [0,0];
@@ -35,8 +35,9 @@ function render() {
   var deltaY = ps.mouseY - curCoords[1];
 
   if(buttonDown){
-    rot[0] += deltaX / 250;
-    rot[1] += deltaY / 250;
+    rot[0] += deltaX / ps.width * 5;
+    rot[1] += deltaY / ps.height * 5;
+
     curCoords[0] = ps.mouseX;
     curCoords[1] = ps.mouseY;
   }
@@ -47,6 +48,14 @@ function render() {
   ps.rotateY(rot[0]);
   ps.rotateX(rot[1]);
 
+  ps.attenuation( $("#constant").slider("value"),
+                  $("#linear").slider("value"),
+                  $("#quadratic").slider("value"));
+
+  document.getElementById('const').innerHTML = $("#constant").slider("value");
+  document.getElementById('lin').innerHTML = $("#linear").slider("value");
+  document.getElementById('quad').innerHTML = $("#quadratic").slider("value");
+
   // redraw
   ps.clear();
   ps.render();
@@ -56,7 +65,9 @@ function start(){
   ps = new PointStream();
 
   ps.setup(document.getElementById('canvas'), render);
+
   ps.background([0,0,0,1]);
+  ps.pointSize(5);
 
   ps.onMouseScroll = zoom;
   ps.onMousePressed = mousePressed;

diff --git a/demos/acorn/css/ui-lightness/images/ui-anim_basic_16x16.gif b/demos/acorn/css/ui-lightness/images/ui-anim_basic_16x16.gif
diff --git a/demos/acorn/css/ui-lightness/images/ui-bg_diagonals-thick_18_b81900_40x40.png b/demos/acorn/css/ui-lightness/images/ui-bg_diagonals-thick_18_b81900_40x40.png
diff --git a/demos/acorn/css/ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png b/demos/acorn/css/ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png
diff --git a/demos/acorn/css/ui-lightness/images/ui-bg_flat_10_000000_40x100.png b/demos/acorn/css/ui-lightness/images/ui-bg_flat_10_000000_40x100.png
diff --git a/demos/acorn/css/ui-lightness/images/ui-bg_glass_100_f6f6f6_1x400.png b/demos/acorn/css/ui-lightness/images/ui-bg_glass_100_f6f6f6_1x400.png
diff --git a/demos/acorn/css/ui-lightness/images/ui-bg_glass_100_fdf5ce_1x400.png b/demos/acorn/css/ui-lightness/images/ui-bg_glass_100_fdf5ce_1x400.png
diff --git a/demos/acorn/css/ui-lightness/images/ui-bg_glass_65_ffffff_1x400.png b/demos/acorn/css/ui-lightness/images/ui-bg_glass_65_ffffff_1x400.png
diff --git a/demos/acorn/css/ui-lightness/images/ui-bg_gloss-wave_35_f6a828_500x100.png b/demos/acorn/css/ui-lightness/images/ui-bg_gloss-wave_35_f6a828_500x100.png
diff --git a/demos/acorn/css/ui-lightness/images/ui-bg_highlight-soft_100_eeeeee_1x100.png b/demos/acorn/css/ui-lightness/images/ui-bg_highlight-soft_100_eeeeee_1x100.png
diff --git a/demos/acorn/css/ui-lightness/images/ui-bg_highlight-soft_75_ffe45c_1x100.png b/demos/acorn/css/ui-lightness/images/ui-bg_highlight-soft_75_ffe45c_1x100.png
diff --git a/demos/acorn/css/ui-lightness/images/ui-icons_222222_256x240.png b/demos/acorn/css/ui-lightness/images/ui-icons_222222_256x240.png
diff --git a/demos/acorn/css/ui-lightness/images/ui-icons_228ef1_256x240.png b/demos/acorn/css/ui-lightness/images/ui-icons_228ef1_256x240.png
diff --git a/demos/acorn/css/ui-lightness/images/ui-icons_ef8c08_256x240.png b/demos/acorn/css/ui-lightness/images/ui-icons_ef8c08_256x240.png
diff --git a/demos/acorn/css/ui-lightness/images/ui-icons_ffd27a_256x240.png b/demos/acorn/css/ui-lightness/images/ui-icons_ffd27a_256x240.png
diff --git a/demos/acorn/css/ui-lightness/images/ui-icons_ffffff_256x240.png b/demos/acorn/css/ui-lightness/images/ui-icons_ffffff_256x240.png
diff --git a/demos/acorn/css/ui-lightness/jquery-ui-1.8.2.custom.css b/demos/acorn/css/ui-lightness/jquery-ui-1.8.2.custom.css
diff --git a/demos/acorn/js/jquery-1.4.2.min.js b/demos/acorn/js/jquery-1.4.2.min.js
diff --git a/demos/acorn/js/jquery-ui-1.8.2.custom.min.js b/demos/acorn/js/jquery-ui-1.8.2.custom.min.js
diff --git a/demos/mickey/mickey.html b/demos/mickey/mickey.html
@@ -7,7 +7,31 @@
   </head>
 
   <body onLoad="start();">
-    <canvas id="canvas" width="500" height="500"></canvas>
+  A cross-browser JavaScript tool which will emulate Arius3D's PointStream viewer. <br />
+  It will be able to quickly render a large amount of point cloud data to the &lt;canvas &gt;<br />
+  tag using WebGL.<br />
+  <br />
+  A cross-browser JavaScript tool which will emulate Arius3D's PointStream viewer. <br />
+  It will be able to quickly render a large amount of point cloud data to the &lt;canvas &gt;<br />
+  tag using WebGL.<br />
+  <br />
+  A cross-browser JavaScript tool which will emulate Arius3D's PointStream viewer. <br />
+  It will be able to quickly render a large amount of point cloud data to the &lt;canvas &gt;<br />
+  tag using WebGL.<br />
+  <br />
+  A cross-browser JavaScript tool which will emulate Arius3D's PointStream viewer. <br />
+  It will be able to quickly render a large amount of point cloud data to the &lt;canvas &gt;<br />
+  tag using WebGL.<br />
+  <br />
+  A cross-browser JavaScript tool which will emulate Arius3D's PointStream viewer. <br />
+  It will be able to quickly render a large amount of point cloud data to the &lt;canvas &gt;<br />
+  tag using WebGL.<br />
+  <br />
+  A cross-browser JavaScript tool which will emulate Arius3D's PointStream viewer. <br />
+  It will be able to quickly render a large amount of point cloud data to the &lt;canvas &gt;<br />
+  tag using WebGL.<br />
+
+    <canvas id="canvas" width="500" height="500" style="position:absolute;left:0px;top:0px;"></canvas>
     <span id="debug"></span>
   </body>
 

diff --git a/demos/mickey/mickey.js b/demos/mickey/mickey.js
@@ -1,7 +1,7 @@
 var ps;
 
 var buttonDown = false;
-var zoomed = 0;
+var zoomed = -50;
 
 var rot =[0,0];
 var curCoords = [0,0];
@@ -10,7 +10,7 @@ var size = 500;
 
 window.onresize = function(){
   ps.resize(window.innerWidth, window.innerHeight);
-  ps.background([0.3,0.5,0.7,1]);
+  ps.background([0.3,0.5,0.7,0.2]);
 };
 
 function zoom(amt){
@@ -57,7 +57,9 @@ function start(){
   ps = new PointStream();
 
   ps.setup(document.getElementById('canvas'), render);
-  ps.background([0.3,0.5,0.7,1]);
+
+  ps.pointSize(8);
+  ps.background([0.3,0.5,0.7,0.2]);
 
   ps.onMouseScroll = zoom;
   ps.onMousePressed = mousePressed;

diff --git a/pointstream.js b/pointstream.js
@@ -1,11 +1,12 @@
-var ps_include = ((function(lastScript) { 
-  return (function(path) {
-    var fullUrl = lastScript.src.substring(0, lastScript.src.lastIndexOf('/') + 1) + path; 
-    var newScript = document.createElement("script"); 
-    newScript.src = fullUrl; 
-    document.getElementsByTagName("head")[0].appendChild(newScript);
-  });
-})(document.getElementsByTagName("head")[0].lastChild));
+var ps_include = function(path){
+  var lastScript = document.getElementsByTagName("head")[0].lastChild;
+  var fullUrl = lastScript.src.substring(0, lastScript.src.lastIndexOf('/') + 1) + path;
+  document.write('<' + 'script');
+  document.write(' language="javascript"');
+  document.write(' type="text/javascript"');
+  document.write(' src="' + fullUrl + '">');
+  document.write('</' + 'script' + '>');
+}
 
 ps_include('mjs.js');
 ps_include('psapi.js');
diff --git a/psapi.js b/psapi.js
@@ -11,7 +11,7 @@ TODO:
 
 function PointStream(){
 
-  const version  = 0.2;
+  const version  = 0.3;
   const XHR_DONE = 4;
 
   // to calculate fps
@@ -23,6 +23,9 @@ function PointStream(){
   var bk = [1,1,1,1];
   var VBOs;
 
+  // defaults
+  var attn = [0.01, 0.0, 0.003];
+
   // browser detection to handle differences such as mouse scrolling
   var browser     = -1;
   const MINEFIELD = 0;
@@ -65,7 +68,11 @@ function PointStream(){
   "uniform vec3 mat_ambient;" +
   "uniform vec3 mat_specular;" +
   "uniform float shininess;" +
-
+
+  //
+  "uniform float pointSize;" +
+  "uniform vec3 attenuation;" +
+
   "uniform mat4 model;" +
   "uniform mat4 view;" +
   "uniform mat4 projection;" +
@@ -125,9 +132,17 @@ function PointStream(){
   "      gl_FrontColor = vec4(finalDiffuse[0] * col[0], finalDiffuse[1] * col[1], finalDiffuse[2] * col[2], 1.0);" +
   "  }" +
 
-  "  gl_PointSize = 3.0;" + 
+  "  float dist = length( view * model * vec4(aVertex, 1.0));" +
+    "float attn = attenuation[0] + (attenuation[1] * dist) + (attenuation[2] * dist * dist);" +
 
-  "  gl_Position = projection * view * model * vec4( aVertex, 1.0 );" +
+  "  if(attn > 0.0){" +
+  "    gl_PointSize = pointSize * sqrt(1.0/attn);" +
+  "  }" +
+  "  else{" +
+  "    gl_PointSize = 1.0;" +
+  "  }"+
+
+  "  gl_Position = projection * view * model * vec4(aVertex, 1.0);" +
   "}";
 
   var fragmentShaderSource =
@@ -441,15 +456,19 @@ function PointStream(){
 
     // Number of frames rendered since script started running
     frameCount: 0,
+
+    width: 0,
+    height: 0,
 
     /**
-      color
+      Set the background color.
     */
     background: function(color){
-      ctx.clearColor(color[0],color[1],color[2],color[3]);
+      ctx.clearColor(color[0], color[1], color[2], color[3]);
     },
 
     /**
+      Clear the color and depth buffer.
     */
     clear: function(){
       ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT);
@@ -477,8 +496,8 @@ function PointStream(){
       canvas.setAttribute("height", height);
 
       // check if style exists? how? can't just query it...
-      canvas.style.width = width;
-      canvas.style.height = height;
+      canvas.style.width = xb.width = width;
+      canvas.style.height = xb.height = height;
 
       ctx = canvas.getContext("experimental-webgl");
       ctx.viewport(0, 0, width, height);
@@ -517,33 +536,36 @@ function PointStream(){
       0, 0, C, D, 
       0, 0, -1, 0);
 
-      view = M4x4.$(1,0,0,0,0,1,0,0,0,0,1,  0,   0,0,0,1);
+      view = M4x4.$(1,0,0,0,0,1,0,0,0,0,1, 0,0,0,0,1);
       model = M4x4.$(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1);
       normalTransform = M4x4.$(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1);      
 
       // if VBOs already exist, recreate them
       if(VBOs) {
         VBOs = createVBOs(verts, cols, norms);
-
-
-      if(cols.length > 0){
-        uniformf(progObj, "lcolor", [1,1,1]);
-        uniformf(progObj, "lposition", [0,0,-1]);
-        uniformi(progObj, "lightCount", 1);
-      }
+
+        if(cols.length > 0){
+          uniformf(progObj, "lcolor", [1,1,1]);
+          uniformf(progObj, "lposition", [0,0,-1]);
+          uniformi(progObj, "lightCount", 1);
+        }
       }
 
+      uniformf(progObj, "pointSize", 1);
+      uniformf(progObj, "attenuation", [attn[0], attn[1], attn[2]]);
+
       uniformMatrix(progObj, "view", false, M4x4.transpose(view));
       uniformMatrix(progObj, "projection", false, M4x4.transpose(projection));
     },
 
     /**
     */
     render: function(){
+
       frames++;
       xb.frameCount++;
       var now = new Date();
-
+      
       if(ctx && VBOs){
         vertexAttribPointer(progObj, "aVertex", 3, VBOs.posBuffer);
 
@@ -586,7 +608,7 @@ function PointStream(){
     },
 
     /**
-      Update the cursor position everytime the mouse moves
+      Update the cursor position everytime the mouse moves.
     */
     mouseMove: function(e){
       xb.mouseX = e.pageX;
@@ -628,12 +650,18 @@ function PointStream(){
       }
     },
 
+    /**
+      @private
+    */
     _mousePressed: function(evt){
       if(typeof xb.onMousePressed === "function"){
         xb.onMousePressed();
       }
     },
-
+
+    /**
+      @private
+    */    
     _mouseReleased: function(){
       if(typeof xb.onMouseReleased === "function"){
         xb.onMouseReleased();
@@ -721,6 +749,22 @@ function PointStream(){
       model =  M4x4.rotate(radians,V3.$(0,1,0),model);
     },
 
+    /**
+      constant
+      linear
+      quadratic
+    */
+    attenuation: function(constant, linear, quadratic){
+      uniformf(progObj, "attenuation", [constant, linear, quadratic]);
+    },
+
+    /**
+      size - in pixels
+    */
+    pointSize: function(size){
+      uniformf(progObj, "pointSize", size);
+    },
+
     /**
       radians
     */