X-Git-Url: https://gitweb.ps.run/cloth_sim/blobdiff_plain/b9cfb0c7bf25e9ebc0c21e0b32665113ea46f7b5..56f6324db4aa55946a6b5ef7de3e1df8b0e22bca:/Scripts/cloth.js diff --git a/Scripts/cloth.js b/Scripts/cloth.js index f1068d4..aaa9d24 100644 --- a/Scripts/cloth.js +++ b/Scripts/cloth.js @@ -1,4 +1,228 @@ -// cloth rendering -// simulate -// setup scene -// orbit controls/skybox/flagge \ No newline at end of file +const DAMPING = 0.03; +const DRAG = 1 - DAMPING; +const MASS = 0.35; +const GRAVITY = new THREE.Vector3(0, -9.81 * MASS, 0); +const K = 1; + +const options = { + wind: true, +}; + +class Constraint { + constructor(p1, p2, restDist) { + this.p1 = p1; + this.p2 = p2; + this.restDist = restDist; + } + + satisfy() { + const diff = this.p2.position.clone().sub(this.p1.position); + const currentDist = diff.length(); + if (currentDist == 0) return; + if (currentDist <= this.restDist) return; + //const correction = diff.multiplyScalar(1 - (this.restDist / currentDist)); + const correction = diff.multiplyScalar((currentDist - this.restDist) / currentDist); + correction.multiplyScalar(K); + correction.clampLength(0, 1); + const correctionHalf = correction.multiplyScalar(0.5); + if (this.p1.movable && this.p2.movable) { + this.p1.position.add(correctionHalf); + this.p2.position.sub(correctionHalf); + } else if (! this.p1.movable && this.p2.movable) { + this.p2.position.sub(correction); + } else if (this.p1.movable && ! this.p2.movable) { + this.p1.position.add(correction); + } + } +} + +class Particle { + movable = true; + + 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) { + this.acceleration.add( + force.clone().multiplyScalar(1/this.mass) + ); + } + verlet(dt) { + // verlet algorithm + // next position = 2 * current Position - previous position + acceleration * (passed time)^2 + // acceleration (dv/dt) = F(net) + const nextPosition = this.position.clone().sub(this.previous); + nextPosition.multiplyScalar(DRAG); + nextPosition.add(this.position); + nextPosition.add(this.acceleration.multiplyScalar(dt*dt)); + + if (this.movable) { + this.previous = this.position; + this.position = nextPosition; + } + + this.acceleration.set(0, 0, 0); + } +} + +class Cloth { + constructor(width, height, numPointsWidth, numPointsHeight) { + this.width = width; + this.height = height; + this.numPointsWidth = numPointsWidth; + this.numPointsHeight = numPointsHeight; + this.windFactor = new THREE.Vector3(5, 2, 2); + + /** + * distance between two vertices horizontally/vertically + * divide by the number of points minus one + * because there are (n - 1) lines between n vertices + */ + let stepWidth = width / (numPointsWidth - 1); + let stepHeight = height / (numPointsHeight - 1); + + /** + * iterate over the number of vertices in x/y axis + * and add a new Particle to "particles" + */ + this.particles = []; + for (let y = 0; y < numPointsHeight; y++) { + for (let x = 0; x < numPointsWidth; x++) { + this.particles.push( + new Particle( + (x - ((numPointsWidth-1)/2)) * stepWidth, + height - (y + ((numPointsHeight-1)/2)) * stepHeight, + 0, + MASS) + ); + } + } + + //this.particles[this.getVertexIndex(0, 0)].movable = false; + const n = 3; + for (let i = 0; i <= n; i++) + this.particles[this.getVertexIndex(0, Math.floor((numPointsHeight-1)*(i/n)))].movable = false; + //this.particles[this.getVertexIndex(0, numPointsHeight-1)].movable = false; + //this.particles[this.getVertexIndex(numPointsWidth-1, 0)].movable = false; + + const REST_DIST_X = width / (numPointsWidth-1); + const REST_DIST_Y = height / (numPointsHeight-1); + + /** + * generate constraints (springs) + */ + 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 (y < numPointsHeight-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++) { + 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) + ); + } + } + + geometry.setIndex(indices); + geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3)); + //geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3)); + geometry.computeBoundingSphere(); + geometry.computeVertexNormals(); + + return geometry; + } + updateGeometry(geometry) { + const positions = geometry.attributes.position.array; + for (let i in this.particles) { + let p = this.particles[i]; + positions[i*3+0] = p.position.x; + positions[i*3+1] = p.position.y; + positions[i*3+2] = p.position.z; + } + geometry.attributes.position.needsUpdate = true; + geometry.computeBoundingSphere(); + geometry.computeVertexNormals(); + } + simulate(dt) { + let now = performance.now(); + for (let particle of this.particles) { + let vertex = particle.position; + let fWind = new THREE.Vector3( + this.windFactor.x * (Math.sin(vertex.x * vertex.y * now)+1), + this.windFactor.y * Math.cos(vertex.z * now), + this.windFactor.z * Math.sin(Math.cos(5 * vertex.x * vertex.y * vertex.z)) + ); + // normalize then multiply? + if (options.wind) + particle.addForce(fWind); + // calculate wind with normal? + + particle.addForce(GRAVITY); + + particle.verlet(dt); + } + + + for (let constraint of this.constraints) { + constraint.satisfy(); + } + //console.log(tmpCorrection); + } + /** + * 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 + */ + getVertexIndex(x, y) { + return y * this.numPointsWidth + x; + } +} \ No newline at end of file