Commit 3da80d69 authored by amandaghassaei's avatar amandaghassaei
Browse files

rendering

parent 276350b4
...@@ -4,14 +4,16 @@ ...@@ -4,14 +4,16 @@
function initDynamicModel(globals){ function initDynamicModel(globals){
var material = new THREE.MeshNormalMaterial({shading: THREE.FlatShading, side: THREE.DoubleSide});
var geometry = new THREE.Geometry(); var geometry = new THREE.Geometry();
geometry.dynamic = true; 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; object3D.visible = globals.dynamicSimVisible;
globals.threeView.sceneAddModel(object3D); globals.threeView.sceneAdd(object3D);
var nodes; var nodes;
var edges; var edges;
var faces;
var creases; var creases;
var originalPosition; var originalPosition;
...@@ -34,16 +36,25 @@ function initDynamicModel(globals){ ...@@ -34,16 +36,25 @@ function initDynamicModel(globals){
function syncNodesAndEdges(){ function syncNodesAndEdges(){
nodes = globals.model.getNodes(); nodes = globals.model.getNodes();
edges = globals.model.getEdges(); edges = globals.model.getEdges();
faces = globals.model.getFaces();
//update mesh nodes //update mesh nodes
geometry.vertices = []; var vertices = [];
for (var i=0;i<nodes.length;i++){ 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.vertices = vertices;
geometry.faces.push(new THREE.Face3(0,2,3)); geometry.faces = faces;
geometry.verticesNeedUpdate = true;
geometry.elementsNeedUpdate = true;
geometry.computeFaceNormals(); 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(); creases = globals.model.getCreases();
...@@ -68,6 +79,7 @@ function initDynamicModel(globals){ ...@@ -68,6 +79,7 @@ function initDynamicModel(globals){
globals.gpuMath.step("zeroTexture", [], "u_lastPosition"); globals.gpuMath.step("zeroTexture", [], "u_lastPosition");
globals.gpuMath.step("zeroTexture", [], "u_velocity"); globals.gpuMath.step("zeroTexture", [], "u_velocity");
globals.gpuMath.step("zeroTexture", [], "u_lastVelocity"); globals.gpuMath.step("zeroTexture", [], "u_lastVelocity");
//todo zero thetas
// for (var i=0;i<creases.length;i++){ // for (var i=0;i<creases.length;i++){
// lastTheta[i*4] = 0; // lastTheta[i*4] = 0;
// lastTheta[i*4+1] = 0; // lastTheta[i*4+1] = 0;
...@@ -96,29 +108,34 @@ function initDynamicModel(globals){ ...@@ -96,29 +108,34 @@ function initDynamicModel(globals){
function solveStep(){ function solveStep(){
if (globals.forceHasChanged){ if (globals.shouldSyncWithModel){
updateExternalForces(); syncNodesAndEdges();
globals.forceHasChanged = false; globals.shouldSyncWithModel = false;
} } else {
if (globals.fixedHasChanged){ if (globals.forceHasChanged) {
updateFixed(); updateExternalForces();
globals.fixedHasChanged = false; globals.forceHasChanged = false;
} }
if (globals.materialHasChanged){ if (globals.fixedHasChanged) {
updateMaterials(); updateFixed();
globals.materialHasChanged = false; globals.fixedHasChanged = false;
} }
if (globals.creaseMaterialHasChanged){ if (globals.materialHasChanged) {
updateCreasesMeta(); updateMaterials();
globals.creaseMaterialHasChanged = false; globals.materialHasChanged = false;
} }
if (globals.shouldResetDynamicSim){ if (globals.creaseMaterialHasChanged) {
reset(); updateCreasesMeta();
globals.shouldResetDynamicSim = false; globals.creaseMaterialHasChanged = false;
} }
if (globals.shouldChangeCreasePercent){ if (globals.shouldResetDynamicSim) {
setCreasePercent(globals.creasePercent); reset();
globals.shouldChangeCreasePercent = false; globals.shouldResetDynamicSim = false;
}
if (globals.shouldChangeCreasePercent) {
setCreasePercent(globals.creasePercent);
globals.shouldChangeCreasePercent = false;
}
} }
var gpuMath = globals.gpuMath; var gpuMath = globals.gpuMath;
...@@ -165,17 +182,17 @@ function initDynamicModel(globals){ ...@@ -165,17 +182,17 @@ function initDynamicModel(globals){
if (globals.gpuMath.readyToRead()) { if (globals.gpuMath.readyToRead()) {
var numPixels = nodes.length*vectorLength; var numPixels = nodes.length*vectorLength;
var height = Math.ceil(numPixels/(textureDim*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); globals.gpuMath.readPixels(0, 0, textureDim * vectorLength, height, pixels);
var parsedPixels = new Float32Array(pixels.buffer); var parsedPixels = new Float32Array(pixels.buffer);
for (var i = 0; i < nodes.length; i++) { // for (var i = 0; i < nodes.length; i++) {
var rgbaIndex = i * vectorLength; // var rgbaIndex = i * vectorLength;
var nodePosition = new THREE.Vector3(parsedPixels[rgbaIndex], parsedPixels[rgbaIndex + 1], parsedPixels[rgbaIndex + 2]); // var nodePosition = new THREE.Vector3(parsedPixels[rgbaIndex], parsedPixels[rgbaIndex + 1], parsedPixels[rgbaIndex + 2]);
nodes[i].render(nodePosition); // nodes[i].render(nodePosition);
} // }
for (var i=0;i<edges.length;i++){ // for (var i=0;i<edges.length;i++){
edges[i].render(); // edges[i].render();
} // }
geometry.verticesNeedUpdate = true; geometry.verticesNeedUpdate = true;
geometry.computeFaceNormals(); geometry.computeFaceNormals();
updateNormals(); updateNormals();
...@@ -276,8 +293,8 @@ function initDynamicModel(globals){ ...@@ -276,8 +293,8 @@ function initDynamicModel(globals){
return Math.pow(2, i); return Math.pow(2, i);
} }
} }
console.warn("no texture size found for " + numCells + " cells"); console.warn("no texture size found for " + numNodes + " items");
return 0; return 2;
} }
function updateMaterials(initing){ function updateMaterials(initing){
......
...@@ -14,6 +14,7 @@ function initGlobals(){ ...@@ -14,6 +14,7 @@ function initGlobals(){
creaseMaterialHasChanged: false, creaseMaterialHasChanged: false,
shouldResetDynamicSim: false, shouldResetDynamicSim: false,
shouldChangeCreasePercent: false, shouldChangeCreasePercent: false,
shouldSyncWithModel: false,
//3d vis //3d vis
dynamicSimVisible: true, dynamicSimVisible: true,
......
...@@ -42,7 +42,7 @@ $(function() { ...@@ -42,7 +42,7 @@ $(function() {
globals = initGlobals(); globals = initGlobals();
globals.model = initModel(globals); globals.model = initModel(globals);
globals.pattern = initPattern(globals);
globals.dynamicModel = initDynamicModel(globals); globals.dynamicModel = initDynamicModel(globals);
globals.pattern = initPattern(globals);
globals.threeView.render(); globals.threeView.render();
}); });
\ No newline at end of file
...@@ -21,15 +21,73 @@ function initModel(globals){ ...@@ -21,15 +21,73 @@ function initModel(globals){
edges.push(new Beam([nodes[3], nodes[0]])); edges.push(new Beam([nodes[3], nodes[0]]));
edges.push(new Beam([nodes[3], nodes[2]])); 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 = []; 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){ nodes = _nodes;
globals.threeView.sceneAddModel(node.getObject3D()); faces = _faces;
}); creases = _creases;
_.each(edges, function(edge){
globals.threeView.sceneAddModel(edge.getObject3D()); 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(){ function getNodes(){
return nodes; return nodes;
...@@ -39,6 +97,10 @@ function initModel(globals){ ...@@ -39,6 +97,10 @@ function initModel(globals){
return edges; return edges;
} }
function getFaces(){
return faces;
}
function getCreases(){ function getCreases(){
return creases; return creases;
} }
...@@ -46,6 +108,8 @@ function initModel(globals){ ...@@ -46,6 +108,8 @@ function initModel(globals){
return { return {
getNodes: getNodes, getNodes: getNodes,
getEdges: getEdges, getEdges: getEdges,
getCreases: getCreases getFaces: getFaces,
getCreases: getCreases,
buildModel: buildModel
} }
} }
\ No newline at end of file
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
function initPattern(globals){ function initPattern(globals){
var object3D = new THREE.Object3D(); var object3D = new THREE.Object3D();
globals.threeView.sceneAddModel(object3D); globals.threeView.sceneAddPattern(object3D);
// var intersections = new THREE.Object3D(); // var intersections = new THREE.Object3D();
// object3D.add(intersections); // object3D.add(intersections);
...@@ -159,6 +159,14 @@ function initPattern(globals){ ...@@ -159,6 +159,14 @@ function initPattern(globals){
cutsRaw = _cutsRaw; cutsRaw = _cutsRaw;
mergeVertices(); 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(){ function mergeVertices(){
...@@ -211,11 +219,7 @@ function initPattern(globals){ ...@@ -211,11 +219,7 @@ function initPattern(globals){
removeCombinedFromSet(combined, mountains); removeCombinedFromSet(combined, mountains);
removeCombinedFromSet(combined, valleys); removeCombinedFromSet(combined, valleys);
removeCombinedFromSet(combined, cuts); removeCombinedFromSet(combined, cuts);
vertices = mergedVertices; vertices = mergedVertices;
drawPattern(triangulatePolys(findPolygons()));
} }
function triangulatePolys(polygons){ function triangulatePolys(polygons){
...@@ -229,16 +233,14 @@ function initPattern(globals){ ...@@ -229,16 +233,14 @@ function initPattern(globals){
} }
var triangles = earcut(polyVerts); var triangles = earcut(polyVerts);
for (var j=0;j<triangles.length;j+=3){ 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); faces.push(face);
} }
} }
return faces; return faces;
} }
function findPolygons(){ function findPolygons(allEdges){
var allEdges = outlines.concat(mountains).concat(valleys).concat(cuts);
//collect all edges connected to vertices //collect all edges connected to vertices
var vertEdges = []; var vertEdges = [];
...@@ -491,14 +493,16 @@ function initPattern(globals){ ...@@ -491,14 +493,16 @@ function initPattern(globals){
geo.faces = faces; geo.faces = faces;
geo.computeVertexNormals(); geo.computeVertexNormals();
var mesh = new THREE.Mesh(geo, new THREE.MeshBasicMaterial({side:THREE.DoubleSide, color:0xffffff})); 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(mesh);
object3D.add(new THREE.LineSegments(makeGeoFromSVGSegments(outlines), // object3D.add(new THREE.LineSegments(makeGeoFromSVGSegments(outlines),
new THREE.LineBasicMaterial({color: 0x000000, linewidth: 4}))); // new THREE.LineBasicMaterial({color: 0x000000, linewidth: 4})));
object3D.add(new THREE.LineSegments(makeGeoFromSVGSegments(mountains), // object3D.add(new THREE.LineSegments(makeGeoFromSVGSegments(mountains),
new THREE.LineBasicMaterial({color: 0xff0000, linewidth: 4}))); // new THREE.LineBasicMaterial({color: 0xff0000, linewidth: 4})));
object3D.add(new THREE.LineSegments(makeGeoFromSVGSegments(valleys), // object3D.add(new THREE.LineSegments(makeGeoFromSVGSegments(valleys),
new THREE.LineBasicMaterial({color: 0x0000ff, linewidth: 4}))); // new THREE.LineBasicMaterial({color: 0x0000ff, linewidth: 4})));
var bounds = new THREE.Box3().setFromObject(object3D); var bounds = new THREE.Box3().setFromObject(object3D);
var avg = (bounds.min.add(bounds.max)).multiplyScalar(0.5); var avg = (bounds.min.add(bounds.max)).multiplyScalar(0.5);
object3D.position.set(-avg.x, 0, -avg.z); object3D.position.set(-avg.x, 0, -avg.z);
......
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
function initThreeView(globals) { function initThreeView(globals) {
var scene = new THREE.Scene(); var scene = new THREE.Scene();
var wrapper = new THREE.Object3D();
var patternWrapper = new THREE.Object3D(); var patternWrapper = new THREE.Object3D();
var modelWrapper = 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); 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) { ...@@ -23,6 +24,7 @@ function initThreeView(globals) {
container.append(renderer.domElement); container.append(renderer.domElement);
scene.background = new THREE.Color(0xe6e6e6); scene.background = new THREE.Color(0xe6e6e6);
scene.add(wrapper);
scene.add(patternWrapper); scene.add(patternWrapper);
scene.add(modelWrapper); scene.add(modelWrapper);
var directionalLight1 = new THREE.DirectionalLight(0xffffff, 0.8); var directionalLight1 = new THREE.DirectionalLight(0xffffff, 0.8);
...@@ -95,11 +97,11 @@ function initThreeView(globals) { ...@@ -95,11 +97,11 @@ function initThreeView(globals) {
}); });
} }
function sceneAddCrease(object) { function sceneAddPattern(object) {
patternWrapper.add(object); patternWrapper.add(object);
} }
function sceneRemoveCrease(object) { function sceneRemovePattern(object) {
patternWrapper.remove(object); patternWrapper.remove(object);
} }
...@@ -107,21 +109,20 @@ function initThreeView(globals) { ...@@ -107,21 +109,20 @@ function initThreeView(globals) {
patternWrapper.children = []; patternWrapper.children = [];
} }
function sceneAddModel(object){ function sceneAddModel(object){//beams and nodes
modelWrapper.add(object); modelWrapper.add(object);
} }
function sceneRemoveModel(object){
modelWrapper.remove(object);
}
function sceneClearModel(object){ function sceneClearModel(object){
modelWrapper.children =[]; modelWrapper.children =[];
} }
function sceneMakeModelFromPattern(){ function sceneAdd(object){
modelWrapper.children = []; wrapper.add(object);
//todo copy pattern to model }
function sceneRemove(object){
wrapper.remote(object);
} }
function onWindowResize() { function onWindowResize() {
...@@ -144,12 +145,13 @@ function initThreeView(globals) { ...@@ -144,12 +145,13 @@ function initThreeView(globals) {
return { return {
sceneAddCrease: sceneAddCrease, sceneAddPattern: sceneAddPattern,
sceneRemoveCrease: sceneRemoveCrease, sceneRemovePattern: sceneRemovePattern,
sceneClearPattern: sceneClearPattern, sceneClearPattern: sceneClearPattern,
sceneAddModel: sceneAddModel, sceneAddModel: sceneAddModel,
sceneRemoveModel: sceneRemoveModel,
sceneClearModel: sceneClearModel, sceneClearModel: sceneClearModel,
sceneAdd: sceneAdd,
sceneRemove: sceneRemove,
render: render, render: render,
onWindowResize: onWindowResize, onWindowResize: onWindowResize,
startAnimation: startAnimation, startAnimation: startAnimation,
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment