rendering

js/dynamicModel.js

@@ -4,14 +4,16 @@
 
 function initDynamicModel(globals){
 
+    var material = new THREE.MeshNormalMaterial({shading: THREE.FlatShading, side: THREE.DoubleSide});
     var geometry = new THREE.Geometry();
     geometry.dynamic = true;
-    var object3D = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial({shading: THREE.FlatShading, side: THREE.DoubleSide}));
+    var object3D = new THREE.Mesh(geometry, material);
     object3D.visible = globals.dynamicSimVisible;
-    globals.threeView.sceneAddModel(object3D);
+    globals.threeView.sceneAdd(object3D);
 
     var nodes;
     var edges;
+    var faces;
     var creases;
 
     var originalPosition;
@@ -34,16 +36,25 @@ function initDynamicModel(globals){
     function syncNodesAndEdges(){
         nodes = globals.model.getNodes();
         edges = globals.model.getEdges();
+        faces = globals.model.getFaces();
         //update mesh nodes
 
-        geometry.vertices = [];
+        var vertices = [];
         for (var i=0;i<nodes.length;i++){
-            geometry.vertices.push(nodes[i].getPosition());
+            vertices.push(nodes[i].getPosition());
         }
-        geometry.faces = [];
-        geometry.faces.push(new THREE.Face3(0,1,2));
-        geometry.faces.push(new THREE.Face3(0,2,3));
+
+        geometry.vertices = vertices;
+        geometry.faces = faces;
+        geometry.verticesNeedUpdate = true;
+        geometry.elementsNeedUpdate = true;
         geometry.computeFaceNormals();
+        geometry.computeBoundingBox();
+        geometry.computeBoundingSphere();
+
+        var bounds = geometry.boundingBox;
+        var avg = (bounds.min.add(bounds.max)).multiplyScalar(0.5);
+        object3D.position.set(-avg.x, 0, -avg.z);
 
         creases = globals.model.getCreases();
 
@@ -68,6 +79,7 @@ function initDynamicModel(globals){
         globals.gpuMath.step("zeroTexture", [], "u_lastPosition");
         globals.gpuMath.step("zeroTexture", [], "u_velocity");
         globals.gpuMath.step("zeroTexture", [], "u_lastVelocity");
+        //todo zero thetas
         // for (var i=0;i<creases.length;i++){
         //     lastTheta[i*4] = 0;
         //     lastTheta[i*4+1] = 0;
@@ -96,29 +108,34 @@ function initDynamicModel(globals){
 
     function solveStep(){
 
-        if (globals.forceHasChanged){
-            updateExternalForces();
-            globals.forceHasChanged = false;
-        }
-        if (globals.fixedHasChanged){
-            updateFixed();
-            globals.fixedHasChanged = false;
-        }
-        if (globals.materialHasChanged){
-            updateMaterials();
-            globals.materialHasChanged = false;
-        }
-        if (globals.creaseMaterialHasChanged){
-            updateCreasesMeta();
-            globals.creaseMaterialHasChanged = false;
-        }
-        if (globals.shouldResetDynamicSim){
-            reset();
-            globals.shouldResetDynamicSim = false;
-        }
-        if (globals.shouldChangeCreasePercent){
-            setCreasePercent(globals.creasePercent);
-            globals.shouldChangeCreasePercent = false;
+        if (globals.shouldSyncWithModel){
+            syncNodesAndEdges();
+            globals.shouldSyncWithModel = false;
+        } else {
+            if (globals.forceHasChanged) {
+                updateExternalForces();
+                globals.forceHasChanged = false;
+            }
+            if (globals.fixedHasChanged) {
+                updateFixed();
+                globals.fixedHasChanged = false;
+            }
+            if (globals.materialHasChanged) {
+                updateMaterials();
+                globals.materialHasChanged = false;
+            }
+            if (globals.creaseMaterialHasChanged) {
+                updateCreasesMeta();
+                globals.creaseMaterialHasChanged = false;
+            }
+            if (globals.shouldResetDynamicSim) {
+                reset();
+                globals.shouldResetDynamicSim = false;
+            }
+            if (globals.shouldChangeCreasePercent) {
+                setCreasePercent(globals.creasePercent);
+                globals.shouldChangeCreasePercent = false;
+            }
         }
 
         var gpuMath = globals.gpuMath;
@@ -165,17 +182,17 @@ function initDynamicModel(globals){
         if (globals.gpuMath.readyToRead()) {
             var numPixels = nodes.length*vectorLength;
             var height = Math.ceil(numPixels/(textureDim*vectorLength));
-            var pixels = new Uint8Array(height*textureDim*4*vectorLength);//todo only grab pixels you need
+            var pixels = new Uint8Array(height*textureDim*4*vectorLength);
             globals.gpuMath.readPixels(0, 0, textureDim * vectorLength, height, pixels);
             var parsedPixels = new Float32Array(pixels.buffer);
-            for (var i = 0; i < nodes.length; i++) {
-                var rgbaIndex = i * vectorLength;
-                var nodePosition = new THREE.Vector3(parsedPixels[rgbaIndex], parsedPixels[rgbaIndex + 1], parsedPixels[rgbaIndex + 2]);
-                nodes[i].render(nodePosition);
-            }
-            for (var i=0;i<edges.length;i++){
-                edges[i].render();
-            }
+            // for (var i = 0; i < nodes.length; i++) {
+            //     var rgbaIndex = i * vectorLength;
+            //     var nodePosition = new THREE.Vector3(parsedPixels[rgbaIndex], parsedPixels[rgbaIndex + 1], parsedPixels[rgbaIndex + 2]);
+            //     nodes[i].render(nodePosition);
+            // }
+            // for (var i=0;i<edges.length;i++){
+            //     edges[i].render();
+            // }
             geometry.verticesNeedUpdate = true;
             geometry.computeFaceNormals();
             updateNormals();
@@ -276,8 +293,8 @@ function initDynamicModel(globals){
                 return Math.pow(2, i);
             }
         }
-        console.warn("no texture size found for " + numCells + " cells");
-        return 0;
+        console.warn("no texture size found for " + numNodes + " items");
+        return 2;
     }
 
     function updateMaterials(initing){

js/globals.js

@@ -14,6 +14,7 @@ function initGlobals(){
         creaseMaterialHasChanged: false,
         shouldResetDynamicSim: false,
         shouldChangeCreasePercent: false,
+        shouldSyncWithModel: false,
 
         //3d vis
         dynamicSimVisible: true,

js/main.js

@@ -42,7 +42,7 @@ $(function() {
 
     globals = initGlobals();
     globals.model = initModel(globals);
-    globals.pattern = initPattern(globals);
     globals.dynamicModel = initDynamicModel(globals);
+    globals.pattern = initPattern(globals);
     globals.threeView.render();
 });
\ No newline at end of file

js/model.js

@@ -21,15 +21,73 @@ function initModel(globals){
     edges.push(new Beam([nodes[3], nodes[0]]));
     edges.push(new Beam([nodes[3], nodes[2]]));
 
+    var faces = [];
+    faces.push(new THREE.Face3(0,1,2));
+    faces.push(new THREE.Face3(0,2,3));
+
     var creases = [];
-    creases.push(new Crease(edges[2], 1, 0, Math.PI/2, 1, nodes[3], nodes[1], 0));
+    // creases.push(new Crease(edges[2], 1, 0, Math.PI/2, 1, nodes[3], nodes[1], 0));
+
+    function buildModel(_faces, _vertices, _allEdges, numOutline, numMountians, numValleys, numCuts){
+
+        var _nodes = [];
+        for (var i=0;i<_vertices.length;i++){
+            _nodes.push(new Node(_vertices[i].clone(), _nodes.length));
+        }
+        // _nodes[0].setFixed(true);
+        // _nodes[1].setFixed(true);
+        // _nodes[2].setFixed(true);
+
+        var _edges = [];
+        var _creases = [];
+        for (var i=0;i<_allEdges.length;i++){
+            _edges.push(new Beam([_nodes[_allEdges[i][0]], _nodes[_allEdges[i][1]]]));
+            if (i<numOutline){
+                //no crease
+            } else if (i<numMountians){
+                // _creases.push(new Crease(_edges[i], 1, 0, Math.PI, 1, nodes[3], nodes[1], 0));
+            } else if (i<numValleys){
+
+            } else if (i<numCuts){
+
+            } else {
+                console.warn("unknown edge type");
+            }
+        }
+
+        globals.threeView.sceneClearModel();
+        _.each(_nodes, function(node){
+            globals.threeView.sceneAddModel(node.getObject3D());
+        });
+        _.each(_edges, function(edge){
+            globals.threeView.sceneAddModel(edge.getObject3D());
+        });
+
+        var oldNodes = nodes;
+        var oldEdges = edges;
+        var oldCreases = creases;
 
-    _.each(nodes, function(node){
-        globals.threeView.sceneAddModel(node.getObject3D());
-    });
-    _.each(edges, function(edge){
-        globals.threeView.sceneAddModel(edge.getObject3D());
-    });
+        nodes = _nodes;
+        faces = _faces;
+        creases = _creases;
+
+        globals.dynamicModel.syncNodesAndEdges();
+
+        for (var i=0;i<oldNodes.length;i++){
+            oldNodes[i].destroy();
+        }
+        oldNodes = null;
+
+        for (var i=0;i<oldEdges.length;i++){
+            oldEdges[i].destroy();
+        }
+        oldEdges = null;
+
+        for (var i=0;i<oldCreases.length;i++){
+            oldCreases[i].destroy();
+        }
+        oldCreases = null;
+    }
 
     function getNodes(){
         return nodes;
@@ -39,6 +97,10 @@ function initModel(globals){
         return edges;
     }
 
+    function getFaces(){
+        return faces;
+    }
+
     function getCreases(){
         return creases;
     }
@@ -46,6 +108,8 @@ function initModel(globals){
     return {
         getNodes: getNodes,
         getEdges: getEdges,
-        getCreases: getCreases
+        getFaces: getFaces,
+        getCreases: getCreases,
+        buildModel: buildModel
     }
 }
\ No newline at end of file

js/pattern.js

@@ -5,7 +5,7 @@
 function initPattern(globals){
 
     var object3D = new THREE.Object3D();
-    globals.threeView.sceneAddModel(object3D);
+    globals.threeView.sceneAddPattern(object3D);
     // var intersections = new THREE.Object3D();
     // object3D.add(intersections);
 
@@ -159,6 +159,14 @@ function initPattern(globals){
         cutsRaw = _cutsRaw;
 
         mergeVertices();
+
+        var allEdges = outlines.concat(mountains).concat(valleys).concat(cuts);
+        var faces = triangulatePolys(findPolygons(allEdges));
+        drawPattern(faces);
+        globals.threeView.render();
+
+        globals.model.buildModel(faces, vertices, allEdges, outlines.length, outlines.length+mountains.length,
+            outlines.length+mountains.length+valleys.length, outlines.length+mountains.length+valleys.length+cuts.length);
     }
 
     function mergeVertices(){
@@ -211,11 +219,7 @@ function initPattern(globals){
         removeCombinedFromSet(combined, mountains);
         removeCombinedFromSet(combined, valleys);
         removeCombinedFromSet(combined, cuts);
-
-
         vertices = mergedVertices;
-
-        drawPattern(triangulatePolys(findPolygons()));
     }
 
     function triangulatePolys(polygons){
@@ -229,16 +233,14 @@ function initPattern(globals){
             }
             var triangles = earcut(polyVerts);
             for (var j=0;j<triangles.length;j+=3){
-                var face = new THREE.Face3(polygons[i][triangles[j]], polygons[i][triangles[j+1]], polygons[i][triangles[j+2]]);
+                var face = new THREE.Face3(polygons[i][triangles[j+2]], polygons[i][triangles[j+1]], polygons[i][triangles[j]]);
                 faces.push(face);
             }
         }
         return faces;
     }
 
-    function findPolygons(){
-
-        var allEdges = outlines.concat(mountains).concat(valleys).concat(cuts);
+    function findPolygons(allEdges){
 
         //collect all edges connected to vertices
         var vertEdges = [];
@@ -491,14 +493,16 @@ function initPattern(globals){
         geo.faces = faces;
         geo.computeVertexNormals();
         var mesh = new THREE.Mesh(geo, new THREE.MeshBasicMaterial({side:THREE.DoubleSide, color:0xffffff}));
+        // object3D.add(mesh);
+        var mesh = new THREE.Mesh(geo, new THREE.MeshBasicMaterial({color:0x000000, wireframe:true}));
         object3D.add(mesh);
 
-        object3D.add(new THREE.LineSegments(makeGeoFromSVGSegments(outlines),
-            new THREE.LineBasicMaterial({color: 0x000000, linewidth: 4})));
-        object3D.add(new THREE.LineSegments(makeGeoFromSVGSegments(mountains),
-            new THREE.LineBasicMaterial({color: 0xff0000, linewidth: 4})));
-        object3D.add(new THREE.LineSegments(makeGeoFromSVGSegments(valleys),
-            new THREE.LineBasicMaterial({color: 0x0000ff, linewidth: 4})));
+        // object3D.add(new THREE.LineSegments(makeGeoFromSVGSegments(outlines),
+        //     new THREE.LineBasicMaterial({color: 0x000000, linewidth: 4})));
+        // object3D.add(new THREE.LineSegments(makeGeoFromSVGSegments(mountains),
+        //     new THREE.LineBasicMaterial({color: 0xff0000, linewidth: 4})));
+        // object3D.add(new THREE.LineSegments(makeGeoFromSVGSegments(valleys),
+        //     new THREE.LineBasicMaterial({color: 0x0000ff, linewidth: 4})));
         var bounds = new THREE.Box3().setFromObject(object3D);
         var avg = (bounds.min.add(bounds.max)).multiplyScalar(0.5);
         object3D.position.set(-avg.x, 0, -avg.z);

js/threeView.js

@@ -5,6 +5,7 @@
 function initThreeView(globals) {
 
     var scene = new THREE.Scene();
+    var wrapper = new THREE.Object3D();
     var patternWrapper = new THREE.Object3D();
     var modelWrapper = new THREE.Object3D();
     var camera = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, -1000, 1000);//-40, 40);
@@ -23,6 +24,7 @@ function initThreeView(globals) {
         container.append(renderer.domElement);
 
         scene.background = new THREE.Color(0xe6e6e6);
+        scene.add(wrapper);
         scene.add(patternWrapper);
         scene.add(modelWrapper);
         var directionalLight1 = new THREE.DirectionalLight(0xffffff, 0.8);
@@ -95,11 +97,11 @@ function initThreeView(globals) {
         });
     }
 
-    function sceneAddCrease(object) {
+    function sceneAddPattern(object) {
         patternWrapper.add(object);
     }
 
-    function sceneRemoveCrease(object) {
+    function sceneRemovePattern(object) {
         patternWrapper.remove(object);
     }
 
@@ -107,21 +109,20 @@ function initThreeView(globals) {
         patternWrapper.children = [];
     }
 
-    function sceneAddModel(object){
+    function sceneAddModel(object){//beams and nodes
         modelWrapper.add(object);
     }
 
-    function sceneRemoveModel(object){
-        modelWrapper.remove(object);
-    }
-
     function sceneClearModel(object){
         modelWrapper.children =[];
     }
 
-    function sceneMakeModelFromPattern(){
-        modelWrapper.children = [];
-        //todo copy pattern to model
+    function sceneAdd(object){
+        wrapper.add(object);
+    }
+
+    function sceneRemove(object){
+        wrapper.remote(object);
     }
 
     function onWindowResize() {
@@ -144,12 +145,13 @@ function initThreeView(globals) {
 
 
     return {
-        sceneAddCrease: sceneAddCrease,
-        sceneRemoveCrease: sceneRemoveCrease,
+        sceneAddPattern: sceneAddPattern,
+        sceneRemovePattern: sceneRemovePattern,
         sceneClearPattern: sceneClearPattern,
         sceneAddModel: sceneAddModel,
-        sceneRemoveModel: sceneRemoveModel,
         sceneClearModel: sceneClearModel,
+        sceneAdd: sceneAdd,
+        sceneRemove: sceneRemove,
         render: render,
         onWindowResize: onWindowResize,
         startAnimation: startAnimation,