X-Git-Url: https://gitweb.ps.run/cloth_sim/blobdiff_plain/fcfb3d929c2fefdfdcb6cb9351bcdd0d2d14f9f2..19d9f67e228e9925958489574339448bb608c9db:/Scripts/cloth.js diff --git a/Scripts/cloth.js b/Scripts/cloth.js index e84facc..db07ac3 100644 --- a/Scripts/cloth.js +++ b/Scripts/cloth.js @@ -1,100 +1,34 @@ -/** - * Convenience Function for calculating the distance between two vectors - * because THREE JS Vector functions mutate variables - * @param {Vector3} a - Vector A - * @param {Vector3} b - Vector B - */ -function vectorLength(a, b) { - let v1 = new THREE.Vector3(); - v1.set(a.x, a.y, a.z); - let v2 = new THREE.Vector3(); - v2.set(b.x, b.y, b.z); +const MASS = 0.1; - return v1.sub(v2).length(); -} - -/** - * Class representing a quad face - * Each face consists of two triangular mesh faces - * containts four indices for determining vertices - * and six springs, one between each of the vertices - */ -export class Face { - a; - b; - c; - d; - - springs = []; - - constructor(a, b, c, d) { - this.a = a; - this.b = b; - this.c = c; - this.d = d; +class Constraint { + constructor(p1, p2, distance) { + this.p1 = p1; + this.p2 = p2; + this.distance = distance; } } -/** - * Class representing a single spring - * has a current and resting length - * and indices to the two connected vertices - */ -export class Spring { - restLength; - currentLength; - index1; - index2; +class Particle { + constructor(x, y, z, mass) { + this.position = new THREE.Vector3(x, y, z); + this.previous = new THREE.Vector3(x, y, z); + this.acceleration = new THREE.Vector3(0, 0, 0); + this.mass = mass; + } + addForce(force) { - - /** - * set vertex indices - * and calculate inital length based on the - * vertex positions - * @param {Array of Vector3} vertices - * @param {number} index1 - * @param {number} index2 - */ - constructor(vertices, index1, index2) { - this.index1 = index1; - this.index2 = index2; + } + verlet(dt) { - let length = vectorLength(vertices[index1], vertices[index2]); - this.restLength = length; - this.currentLength = length; } } -/** - * Class representing a single piece of cloth - * contains THREE JS geometry, - * logically represented by an array of adjacent faces - * and vertex weights which are accessed by the same - * indices as the vertices in the Mesh - */ -export class Cloth { - VertexWeight = 1; - - geometry = new THREE.Geometry(); - - faces = []; - - vertexWeights = []; - - - /** - * creates a rectangular piece of cloth - * takes the size of the cloth - * and the number of vertices it should be composed of - * @param {number} width - width of the cloth - * @param {number} height - height of the cloth - * @param {number} numPointsWidth - number of vertices in horizontal direction - * @param {number} numPointsHeight - number of vertices in vertical direction - */ - createBasic(width, height, numPointsWidth, numPointsHeight) { - /** resulting vertices and faces */ - let vertices = []; - let faces = []; +class Cloth { + constructor(width, height, numPointsWidth, numPointsHeight) { + this.width = width; + this.height = height; + this.numPointsWidth = numPointsWidth; + this.numPointsHeight = numPointsHeight; /** * distance between two vertices horizontally/vertically @@ -106,180 +40,108 @@ export class Cloth { /** * iterate over the number of vertices in x/y axis - * and add a new Vector3 to "vertices" + * and add a new Particle to "particles" */ + this.particles = []; for (let y = 0; y < numPointsHeight; y++) { for (let x = 0; x < numPointsWidth; x++) { - vertices.push( - new THREE.Vector3(x * stepWidth, height - y * stepHeight, 0) + this.particles.push( + new Particle( + (x - ((numPointsWidth-1)/2)) * stepWidth, + height - (y + ((numPointsHeight-1)/2)) * stepHeight, + 0, + MASS) ); } } + const REST_DIST_X = width / (numPointsWidth-1); + const REST_DIST_Y = height / (numPointsHeight-1); + /** - * helper function to calculate index of vertex - * in "vertices" array based on its x and y positions - * in the mesh - * @param {number} x - x index of vertex - * @param {number} y - y index of vertex + * generate constraints (springs) */ - function getVertexIndex(x, y) { - return y * numPointsWidth + x; + this.constraints = []; + for (let y = 0; y < numPointsHeight; y++) { + for (let x = 0; x < numPointsWidth; x++) { + if (x < numPointsWidth-1) { + this.constraints.push(new Constraint( + this.particles[this.getVertexIndex(x, y)], + this.particles[this.getVertexIndex(x+1, y)], + REST_DIST_X + )); + } + if (x < numPointsWidth-1) { + this.constraints.push(new Constraint( + this.particles[this.getVertexIndex(x, y)], + this.particles[this.getVertexIndex(x, y+1)], + REST_DIST_Y + )); + } + } } - + } + generateGeometry() { + const geometry = new THREE.BufferGeometry(); + + const vertices = []; + const normals = []; + const indices = []; + + for (let particle of this.particles) { + vertices.push( + particle.position.x, + particle.position.y, + particle.position.z); + } + + const numPointsWidth = this.numPointsWidth; + const numPointsHeight = this.numPointsHeight; + /** * generate faces based on 4 vertices * and 6 springs each */ for (let y = 0; y < numPointsHeight - 1; y++) { for (let x = 0; x < numPointsWidth - 1; x++) { - let newFace = new Face( - getVertexIndex(x, y), - getVertexIndex(x, y + 1), - getVertexIndex(x + 1, y), - getVertexIndex(x + 1, y + 1), + indices.push( + this.getVertexIndex(x, y), + this.getVertexIndex(x+1, y), + this.getVertexIndex(x+1, y+1) + ); + indices.push( + this.getVertexIndex(x, y), + this.getVertexIndex(x+1, y+1), + this.getVertexIndex(x, y+1) ); - - newFace.springs.push(new Spring(vertices, getVertexIndex(x, y), getVertexIndex(x + 1, y))); - newFace.springs.push(new Spring(vertices, getVertexIndex(x, y), getVertexIndex(x, y + 1))); - newFace.springs.push(new Spring(vertices, getVertexIndex(x, y), getVertexIndex(x + 1, y + 1))); - newFace.springs.push(new Spring(vertices, getVertexIndex(x + 1, y), getVertexIndex(x, y + 1))); - newFace.springs.push(new Spring(vertices, getVertexIndex(x + 1, y), getVertexIndex(x + 1, y + 1))); - newFace.springs.push(new Spring(vertices, getVertexIndex(x, y + 1), getVertexIndex(x + 1, y + 1))); - - faces.push(newFace); } } - /** - * call createExplicit - * with generated vertices and faces - */ - this.createExplicit(vertices, faces); - } + geometry.setIndex(indices); + geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3)); + //geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3)); + geometry.computeBoundingSphere(); + geometry.computeVertexNormals(); - /** - * Generate THREE JS Geometry - * (list of vertices and list of indices representing triangles) - * and calculate the weight of each face and split it between - * surrounding vertices - * @param {Array of Vector3} vertices - * @param {Array of Face} faces - */ - createExplicit(vertices, faces) { - /** - * Copy vertices and initialize vertex weights to 0 - */ - for (let i in vertices) { - this.geometry.vertices.push(vertices[i]); - this.vertexWeights.push(0); - } - /** - * copy faces, - * generate two triangles per face, - * calculate weight of face as its area - * and split between the 4 vertices - */ - for (let i in faces) { - let face = faces[i]; - - /** copy faces to class member */ - this.faces.push(face); - - /** generate triangles */ - this.geometry.faces.push(new THREE.Face3( - face.a, face.b, face.c - )); - this.geometry.faces.push(new THREE.Face3( - face.c, face.b, face.d - )); - - /** - * calculate area of face as combined area of - * its two composing triangles - */ - let xLength = vectorLength(this.geometry.vertices[face.b], this.geometry.vertices[face.a]); - let yLength = vectorLength(this.geometry.vertices[face.c], this.geometry.vertices[face.a]); - let weight = xLength * yLength / 2; - - xLength = vectorLength(this.geometry.vertices[face.b], this.geometry.vertices[face.d]); - yLength = vectorLength(this.geometry.vertices[face.c], this.geometry.vertices[face.d]); - weight += xLength * yLength / 2; + return geometry; + } + updateGeometry(geometry) { - /** - * split weight equally between four surrounding vertices - */ - this.vertexWeights[face.a] += weight / 4; - this.vertexWeights[face.b] += weight / 4; - this.vertexWeights[face.c] += weight / 4; - this.vertexWeights[face.d] += weight / 4; - } + } + satisfyConstraints() { - /** - * let THREE JS compute bounding sphere around generated mesh - * needed for View Frustum Culling internally - */ - this.geometry.computeBoundingSphere(); } + simulate() { + } /** - * generate a debug mesh for visualizing - * vertices and springs of the cloth - * and add it to scene for rendering - * @param {Scene} scene - Scene to add Debug Mesh to + * helper function to calculate index of vertex + * in "vertices" array based on its x and y positions + * in the mesh + * @param {number} x - x index of vertex + * @param {number} y - y index of vertex */ - createDebugMesh(scene) { - /** - * helper function to generate a single line - * between two Vertices with a given color - * @param {Vector3} from - * @param {Vector3} to - * @param {number} color - */ - function addLine(from, to, color) { - let geometry = new THREE.Geometry(); - geometry.vertices.push(from); - geometry.vertices.push(to); - let material = new THREE.LineBasicMaterial( { color: color, linewidth: 10 } ); - let line = new THREE.Line(geometry, material); - line.renderOrder = 1; - scene.add(line); - } - /** - * helper function to generate a small sphere - * at a given Vertex Position with color - * @param {Vector3} point - * @param {number} color - */ - function addPoint(point, color) { - const geometry = new THREE.SphereGeometry( 0.05, 32, 32 ); - const material = new THREE.MeshBasicMaterial( { color: color } ); - const sphere = new THREE.Mesh( geometry, material ); - sphere.position.set(point.x, point.y, point.z); - scene.add( sphere ); - } - - let lineColor = 0x000000; - let pointColor = 0xff00000; - - /** - * generate one line for each of the 6 springs - * and one point for each of the 4 vertices - * for all of the faces - */ - for (let i in this.faces) { - let face = this.faces[i]; - addLine(this.geometry.vertices[face.a], this.geometry.vertices[face.b], lineColor); - addLine(this.geometry.vertices[face.a], this.geometry.vertices[face.c], lineColor); - addLine(this.geometry.vertices[face.a], this.geometry.vertices[face.d], lineColor); - addLine(this.geometry.vertices[face.b], this.geometry.vertices[face.c], lineColor); - addLine(this.geometry.vertices[face.b], this.geometry.vertices[face.d], lineColor); - addLine(this.geometry.vertices[face.c], this.geometry.vertices[face.d], lineColor); - - addPoint(this.geometry.vertices[face.a], pointColor); - addPoint(this.geometry.vertices[face.b], pointColor); - addPoint(this.geometry.vertices[face.c], pointColor); - addPoint(this.geometry.vertices[face.d], pointColor); - } + getVertexIndex(x, y) { + return y * this.numPointsWidth + x; } } \ No newline at end of file