fixed update redraw bug

asalga · Jun 21, 2010 · 3b077f3 · 3b077f3
1 parent c70d2ab
commit 3b077f3
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 86 deletions.
diff --git a/demos/acorn1.html b/demos/acorn1.html
@@ -5,32 +5,10 @@
     <script src="../mjs.js"></script>
     <script src="../pointstream.js"></script>
     <script src="acorn1.js"></script>
-    <style>
-    .ccc{
-    margin: 0px auto;
-
-    }
-    </style>
   </head>
 
   <body>
-    <div style="position: relative;">
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse est ligula, egestas sed tempor vitae, pellentesque at massa. Nam a aliquet neque. Nulla a mauris eu lectus faucibus consectetur quis sed sem. Quisque posuere malesuada elementum. Etiam tortor purus, eleifend sit amet mattis vitae, ultrices vitae lorem. Nullam sodales risus eu nisi mollis ullamcorper. Morbi at nisl mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec et eros lobortis sem lobortis luctus eget at arcu. In feugiat mollis purus in lobortis. Suspendisse sed nulla id augue dictum vulputate. Fusce lectus eros, dictum ac hendrerit sit amet, laoreet ultrices leo.
-<P>
-Morbi pellentesque, metus sit amet auctor convallis, massa lectus interdum dui, vitae auctor diam sapien vel metus. Suspendisse faucibus, erat pellentesque tristique egestas, mi justo porta velit, vitae ornare mauris metus sit amet diam. Praesent posuere dapibus eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lorem neque, adipiscing eget egestas eget, semper rutrum velit. Praesent blandit tempor convallis. Ut scelerisque, magna pharetra consequat molestie, est arcu convallis justo, sed volutpat sem nisl vel ipsum. Donec euismod risus ut nibh accumsan eget rhoncus tellus vehicula. Etiam vulputate lorem id odio tempus quis suscipit sapien sollicitudin. Duis fringilla hendrerit elit, eget fringilla lectus consequat quis. Nunc suscipit vehicula lorem vel interdum. Sed lectus diam, mattis sed feugiat eget, ullamcorper et velit. Fusce placerat, nisi eget feugiat volutpat, leo diam porta velit, eget volutpat risus mauris sed velit.
-<P>
-Vestibulum quam augue, vehicula ut congue nec, pulvinar in risus. Morbi eget odio ac lectus porta pretium. In hac habitasse platea dictumst. Praesent libero turpis, interdum sed ultricies at, tempor ut justo. Suspendisse potenti. Phasellus venenatis, leo et accumsan ullamcorper, orci tortor hendrerit magna, nec consequat tellus metus nec neque. Duis eu dignissim nisi. Nulla convallis aliquam est, eu interdum metus malesuada non. Sed in turpis purus. Phasellus accumsan odio lacinia nisl auctor eget tempor nunc euismod. Vivamus malesuada, nibh ut congue sodales, nulla lacus elementum tellus, et mollis nibh sapien luctus dolor. Praesent egestas purus ullamcorper massa ultricies eget fermentum quam consequat. Proin augue nibh, dignissim eu tempus eget, eleifend eget sapien.
-<P>
-Vivamus at mauris velit. Pellentesque feugiat dapibus orci eu gravida. Vestibulum et ipsum lectus, quis accumsan libero. Ut sit amet odio tortor. Donec ullamcorper eleifend magna, sit amet ultricies quam placerat ut. Proin ac ante sem, quis egestas mi. Sed ultricies laoreet elit nec tempus. Curabitur metus velit, fringilla nec congue non, placerat et nibh. Nulla eget massa odio, ut imperdiet lacus. Sed venenatis bibendum faucibus. Vivamus mattis diam sagittis risus volutpat at condimentum ante ultricies. Mauris vitae congue nisi. Aliquam erat volutpat. Curabitur faucibus gravida turpis, vel eleifend risus malesuada consectetur. Ut non massa non neque ullamcorper euismod. Sed dictum leo eu mi egestas tincidunt. Nullam leo magna, interdum adipiscing condimentum ut, ullamcorper id erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent vestibulum odio sit amet nunc interdum sagittis. Maecenas egestas sodales felis sed placerat.
-<P>
-Vestibulum placerat scelerisque lectus eu facilisis. Phasellus eleifend tempus gravida. Vivamus id tortor sapien. Phasellus auctor rutrum iaculis. Phasellus vitae cursus enim. Fusce vitae mi sed nisl rhoncus mollis sed vitae enim. Vivamus arcu justo, commodo ut luctus ac, molestie vitae enim. Curabitur hendrerit, odio adipiscing volutpat cursus, lorem ante congue lectus, non scelerisque nunc tellus eget magna. Vestibulum ac sem augue, ac convallis nibh. Ut sed nisi nec tortor suscipit posuere at quis sapien. Pellentesque at lorem neque, vitae convallis diam. Etiam sagittis consequat augue, porta adipiscing lorem pretium a. Sed tincidunt turpis sem. Nunc vel quam a odio blandit accumsan. Ut porttitor porttitor vestibulum. Quisque sit amet felis blandit erat sollicitudin cursus commodo id eros.
-    </div>
-
-
-   <div style="position: absolute; top: 60px; width: 100%">
-
-    <canvas id="canvas" class="ccc" width="500" height="500"></canvas>
-    </div>
+    <canvas id="canvas" width="500" height="500"></canvas>
   </body>
 
 </html>
diff --git a/demos/acorn1.js b/demos/acorn1.js
@@ -1,32 +1,21 @@
 document.addEventListener('DOMContentLoaded', xbinit, false);
-var t= 0;
 
-function xbinit(){
-var ps = new PointStream();
-
-cvs = document.getElementById('canvas');
+var t = 0;
 
-ps.setup(cvs);
-ps.background([.0,0,0, 0.5]);
-ps.openFile("acorn1.asc");
-
-setTimeout(f, 800);
+function xbinit(){
+  var ps = new PointStream();
 
-function f(){
- // ps.clear();
-  //ps.render();
+  cvs = document.getElementById('canvas');
 
- //ps.background([1,0,0,1 ]);
-   ps.clear();
-  // ps.clear();
-   ps.render();
-
-  setInterval(f2,1000);
-}
+  ps.setup(cvs);
+  ps.background([0,0,0, 1]);
+  ps.openFile("acorn1.asc");
 
-function f2(){
-//  ps.clear();
-//  ps.render();
-}
+  setInterval(draw, 1000);
 
+  function draw(){
+    ps.background([0,0.5,Math.abs(Math.sin(t+=0.01)), 0.5]);
+    ps.clear();
+    ps.render();
+  }
 }
diff --git a/pointstream.js b/pointstream.js
@@ -1,5 +1,8 @@
 function PointStream(){
-  var bk = [1,1,1,0];
+
+
+
+  var bk = [1,1,1,1];
   var AJAX;
   var magicbuffer;
   var verts = [];
@@ -85,7 +88,6 @@ var vertexShaderSource3D =
 // If there were no lights this draw call, just use the
 // assigned fill color of the shape and the specular value
 "  if( lightCount == 0 ) {" +
-//"    gl_FrontColor = abs(vec4( aNormal[0], aNormal[1], aNormal[2], 1.0));" +
 "      gl_FrontColor = vec4(col[0], col[1], col[2], 1.0);" +
 "  }" +
 "  else {" +
@@ -118,6 +120,8 @@ var fragmentShaderSource3D =
     }
   }
 
+  /**
+  */
   function uniformf(programObj, varName, varValue) {
     var varLocation = curContext.getUniformLocation(programObj, varName);
     // the variable won't be found if it was optimized out.
@@ -134,6 +138,8 @@ var fragmentShaderSource3D =
     }
   }
 
+  /**
+  */
   function vertexAttribPointer(programObj, varName, size, VBO) {
     var varLocation = curContext.getAttribLocation(programObj, varName);
     if (varLocation !== -1) {
@@ -142,14 +148,48 @@ var fragmentShaderSource3D =
       curContext.enableVertexAttribArray(varLocation);
     }
   }
+
+     /**
+    */
+   function createBuffer(xyz,rgb,norm){
+      if(curContext){
 
+        var newBuffer = curContext.createBuffer();
+        curContext.bindBuffer(curContext.ARRAY_BUFFER, newBuffer);
+        curContext.bufferData(curContext.ARRAY_BUFFER, new WebGLFloatArray(xyz), curContext.STATIC_DRAW);
+
+        var newColBuffer = curContext.createBuffer();
+        curContext.bindBuffer(curContext.ARRAY_BUFFER, newColBuffer);
+        curContext.bufferData(curContext.ARRAY_BUFFER, new WebGLFloatArray(rgb), curContext.STATIC_DRAW);
+
+        var newNormBuffer = curContext.createBuffer();
+        curContext.bindBuffer(curContext.ARRAY_BUFFER, newNormBuffer);
+        curContext.bufferData(curContext.ARRAY_BUFFER, new WebGLFloatArray(norm), curContext.STATIC_DRAW);
+
+        bufferIDCounter++;
+
+        var o = {};
+        o.id =  bufferIDCounter;
+        o.posBuffer = newBuffer;
+        o.colBuffer = newColBuffer;
+        o.normBuffer = newNormBuffer;
+        o.size = xyz.length;
+
+        return o;
+      }
+    }
+
+  /**
+  */
   function disableVertexAttribPointer(programObj, varName){
    var varLocation = curContext.getAttribLocation(programObj, varName);
    if (varLocation !== -1) {
      curContext.disableVertexAttribArray(varLocation);
    }
   }
 
+  /**
+  */
   function uniformMatrix(programObj, varName, transpose, matrix) {
     var varLocation = curContext.getUniformLocation(programObj, varName);
     // the variable won't be found if it was optimized out.
@@ -164,6 +204,8 @@ var fragmentShaderSource3D =
     }
   }
 
+  /**
+  */
   var createProgramObject = function(curContext, vetexShaderSource, fragmentShaderSource) {
     var vertexShaderObject = curContext.createShader(curContext.VERTEX_SHADER);
     curContext.shaderSource(vertexShaderObject, vetexShaderSource);
@@ -172,13 +214,17 @@ var fragmentShaderSource3D =
       throw curContext.getShaderInfoLog(vertexShaderObject);
     }
 
+    /**
+    */
     var fragmentShaderObject = curContext.createShader(curContext.FRAGMENT_SHADER);
     curContext.shaderSource(fragmentShaderObject, fragmentShaderSource);
     curContext.compileShader(fragmentShaderObject);
     if (!curContext.getShaderParameter(fragmentShaderObject, curContext.COMPILE_STATUS)) {
       throw curContext.getShaderInfoLog(fragmentShaderObject);
     }
 
+    /**
+    */
     var programObject = curContext.createProgram();
     curContext.attachShader(programObject, vertexShaderObject);
     curContext.attachShader(programObject, fragmentShaderObject);
@@ -191,15 +237,26 @@ var fragmentShaderSource3D =
   };
 
   var xb = {
-
+
+    /**
+    */
+    mouseX: 0,
+    mouseY: 0,
+
+    /**
+    */
     background: function(a){
-      curContext.clearColor(a[0], a[1], a[2], a[3]);
+      curContext.clearColor(a[0],a[1],a[2],a[3]);
     },
-
+
+    /**
+    */
     clear: function(){
-      curContext.clear(curContext.COLOR_BUFFER_BIT | curContext.DEPTH_BUFFER);
+      curContext.clear(curContext.COLOR_BUFFER_BIT | curContext.DEPTH_BUFFER_BIT);
     },
 
+    /**
+    */
     render: function(){
       if(curContext && magicbuffer){
         vertexAttribPointer(programObject3D, "aVertex", 3, magicbuffer.posBuffer);
@@ -209,48 +266,49 @@ var fragmentShaderSource3D =
       }
     },
 
-    createBuffer: function(xyz,rgb,norm){
-      if(curContext){
-
-        var newBuffer = curContext.createBuffer();
-        curContext.bindBuffer(curContext.ARRAY_BUFFER, newBuffer);
-        curContext.bufferData(curContext.ARRAY_BUFFER, new WebGLFloatArray(xyz), curContext.STATIC_DRAW);
-
-        var newColBuffer = curContext.createBuffer();
-        curContext.bindBuffer(curContext.ARRAY_BUFFER, newColBuffer);
-        curContext.bufferData(curContext.ARRAY_BUFFER, new WebGLFloatArray(rgb), curContext.STATIC_DRAW);
-
-        var newNormBuffer = curContext.createBuffer();
-        curContext.bindBuffer(curContext.ARRAY_BUFFER, newNormBuffer);
-        curContext.bufferData(curContext.ARRAY_BUFFER, new WebGLFloatArray(norm), curContext.STATIC_DRAW);
-
-        bufferIDCounter++;
-
-        var o = {};
-        o.id =  bufferIDCounter;
-        o.posBuffer = newBuffer;
-        o.colBuffer = newColBuffer;
-        o.normBuffer = newNormBuffer;
-        o.size = xyz.length;
-
-        return o;
-      }
-    },
-
+
+    /**
+    */
     setMatrices: function(){
       modelView = M4x4.$(1,0,0,0,0,1,0,0,0,0,1,-50,0,0,0,1);
       M4x4.transpose(modelView, modelView);
 
       uniformMatrix(programObject3D, "view", false, modelView);
-      uniformMatrix(programObject3D, "normalTransform", false, modelView);
+
+      var nt = M4x4.$(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1);
+      uniformMatrix(programObject3D, "normalTransform", false, nt);
     },
 
+    /**
+    */
+    mouseMove: function(e){
+      xb.mouseX = e.pageX;
+      xb.mouseY = e.pageY;
+      window.status = "->" + xb.mouseX + "," + xb.mouseY;
+    },
+
+    /**
+    */
+    attach: function(element, type, func){
+      //
+      if(element.addEventListener){
+        element.addEventListener(type, func, false);
+      }
+      else{
+      }
+    },
+
+    /**
+    */
     setup: function(cvs){
       canvas = cvs;
       curContext = canvas.getContext("experimental-webgl");
+
+      xb.attach(cvs, "mousemove", xb.mouseMove);
 
       if(curContext){
-        curContext.viewport(0, 0, 500,500);
+        curContext.viewport(0, 0, 500, 500);
+
         curContext.enable(curContext.DEPTH_TEST);
       }
 
@@ -261,6 +319,8 @@ var fragmentShaderSource3D =
       uniformMatrix(programObject3D, "model", false, test);
     },
 
+    /**
+    */
     openFile: function(path){
       AJAX = new XMLHttpRequest();
       AJAX.open("GET", path, true);
@@ -287,7 +347,7 @@ var fragmentShaderSource3D =
             norm.push(verts[i+6],verts[i+7],verts[i+8]);
           }
 
-          magicbuffer = xb.createBuffer(pos, col, norm);
+          magicbuffer = createBuffer(pos, col, norm);
 
 
           modelView = M4x4.$(1,0,0,0,0,1,0,0,0,0,1,-50,0,0,0,1);
@@ -297,11 +357,9 @@ var fragmentShaderSource3D =
           var proj = projection;
           M4x4.transpose(proj, proj);
 
-
           uniformMatrix(programObject3D, "projection", false, proj);
 
           xb.setMatrices();
-
         }
       }
     }