recenter geo after user interaction

index.html

@@ -81,6 +81,18 @@
             gl_FragColor = vec4(0.0);
         }
     </script>
+    <script id="centerTexture" type="x-shader/x-fragment">
+        precision mediump float;
+        uniform sampler2D u_lastPosition;
+        uniform vec2 u_textureDim;
+        uniform vec3 u_center;
+        void main(){
+            vec2 fragCoord = gl_FragCoord.xy;
+            vec2 scaledFragCoord = fragCoord/u_textureDim;
+            vec3 position = texture2D(u_lastPosition, scaledFragCoord).xyz;
+            gl_FragColor = vec4(position-u_center, 0.0);
+        }
+    </script>
 
     <script id="positionCalcShader" type="x-shader/x-fragment">
         precision mediump float;
@@ -482,6 +494,7 @@
     </div><br/>
     <b>Animation Settings:</b><br/>
     <span class="floatRight">&Delta; t = <span id="deltaT"></span> seconds</span><br/><br/>
+    <a href="#" id="shouldCenterGeo" class="btn btn-lg btn-default">Re-center geometry</a><br/><br/>
     <a href="#" id="reset" class="btn btn-lg btn-default">Reset</a>
     <a href="#" id="start" class="btn btn-lg btn-success">Start Simulation</a>
     <a href="#" id="pause" class="btn btn-lg btn-warning">Pause Simulation</a>
@@ -665,7 +678,7 @@
                   <span aria-hidden="true">&times;</span>
                 </button>
                 <b>Import FOLD</b><br/><br/>
-                <label class="checkbox" for="foldUseAngles">
+                <label class="bigLabel checkbox" for="foldUseAngles">
                     <input id="foldUseAngles" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                     Use current angles as target fold angles
                 </label>

js/3dUI.js

@@ -32,6 +32,7 @@ function init3DUI(globals) {
             globals.fixedHasChanged = true;
             globals.threeView.enableControls(true);
             setHighlightedObj(null);
+            globals.shouldCenterGeo = true;
         }
         mouseDown = false;
     }, false);

js/controls.js

@@ -260,6 +260,10 @@ function initControls(globals){
         globals.foldUseAngles = val;
     });
 
+    setLink("#shouldCenterGeo", function(){
+        globals.shouldCenterGeo = true;
+    });
+
     function setButtonGroup(id, callback){
         $(id+" a").click(function(e){
             e.preventDefault();

js/dynamic/dynamicSolver.js

@@ -93,6 +93,21 @@ function initDynamicSolver(globals){
                 setCreasePercent(globals.creasePercent);
                 globals.shouldChangeCreasePercent = false;
             }
+            // if (globals.shouldZeroDynamicVelocity){
+            //     globals.gpuMath.step("zeroTexture", [], "u_velocity");
+            //     globals.gpuMath.step("zeroTexture", [], "u_lastVelocity");
+            //     globals.shouldZeroDynamicVelocity = false;
+            // }
+            if (globals.shouldCenterGeo){
+                var avgPosition = getAvgPosition();
+                globals.gpuMath.setProgram("centerTexture");
+                globals.gpuMath.setUniformForProgram("centerTexture", "u_center", [avgPosition.x, avgPosition.y, avgPosition.z], "3f");
+                globals.gpuMath.step("centerTexture", ["u_lastPosition"], "u_position");
+                globals.gpuMath.swapTextures("u_position", "u_lastPosition");
+                globals.gpuMath.step("zeroTexture", [], "u_lastVelocity");
+                globals.gpuMath.step("zeroTexture", [], "u_velocity");
+                globals.shouldCenterGeo = false;
+            }
         }
 
         if (_numSteps == undefined) _numSteps = steps;
@@ -128,6 +143,20 @@ function initDynamicSolver(globals){
 
     var $errorOutput = $("#globalError");
 
+    function getAvgPosition(){
+        var xavg = 0;
+        var yavg = 0;
+        var zavg = 0;
+        for (var i=0;i<positions.length;i+=3){
+            xavg += positions[i];
+            yavg += positions[i+1];
+            zavg += positions[i+2];
+        }
+        var avgPosition = new THREE.Vector3(xavg, yavg, zavg);
+        avgPosition.multiplyScalar(3/positions.length);
+        return avgPosition;
+    }
+
     function render(){
 
         // var vectorLength = 2;
@@ -285,6 +314,9 @@ function initDynamicSolver(globals){
         gpuMath.setUniformForProgram("packToBytes", "u_floatTexture", 0, "1i");
 
         gpuMath.createProgram("zeroTexture", vertexShader, document.getElementById("zeroTexture").text);
+        gpuMath.createProgram("centerTexture", vertexShader, document.getElementById("centerTexture").text);
+        gpuMath.setUniformForProgram("centerTexture", "u_lastPosition", 0, "1i");
+        gpuMath.setUniformForProgram("centerTexture", "u_textureDim", [textureDim, textureDim], "2f");
 
         gpuMath.setSize(textureDim, textureDim);
 

js/globals.js

@@ -31,6 +31,8 @@ function initGlobals(){
         shouldChangeCreasePercent: false,
         shouldSyncWithModel: false,
         nodePositionHasChanged: false,
+        shouldZeroDynamicVelocity: false,
+        shouldCenterGeo: false,
 
         //3d vis
         simType: "dynamic",