Skip to content
GitLab
Commit 3da80d69 authored by amandaghassaei's avatar amandaghassaei
Browse files

rendering

parent 276350b4
Hide whitespace changes
Inline Side-by-side
js/dynamicModel.js
View file @ 3da80d69
......@@ -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
View file @ 3da80d69
......@@ -14,6 +14,7 @@ function initGlobals(){
creaseMaterialHasChanged: false,
shouldResetDynamicSim: false,
shouldChangeCreasePercent: false,
shouldSyncWithModel: false,
//3d vis
dynamicSimVisible: true,
......
js/main.js
View file @ 3da80d69
......@@ -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
View file @ 3da80d69
......@@ -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
View file @ 3da80d69
......@@ -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
View file @ 3da80d69
......@@ -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,
......
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