X-Git-Url: https://gitweb.ps.run/cloth_sim/blobdiff_plain/e05a5c0a7aa891179af219eff0df34647acc8eb3..eac8eb4ec5115f16fc17b94fb194fdc1c005ddb5:/Scripts/cloth.js

diff --git a/Scripts/cloth.js b/Scripts/cloth.js
index 9389ef6..712ed63 100644
--- a/Scripts/cloth.js
+++ b/Scripts/cloth.js
@@ -1,114 +1,94 @@
-/**
- *  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);
-
-  return v1.sub(v2).length();
-}
+const DAMPING = 0.03;
+const DRAG = 1 - DAMPING;
+const MASS = 0.1;
+const GRAVITY = new THREE.Vector3(0, -9.81 * MASS, 0);
+const K = 1;
+const MAX_STRETCH = 1.5;
+
+const options = {
+  wind: true,
+};
+
+class Spring {
+  constructor(p1, p2, restDist) {
+    this.p1 = p1;
+    this.p2 = p2;
+    this.restDist = restDist;
+  }
 
-/**
- * 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;
+  satisfy() {
+    /** calculate current spring length */
+    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));
+
+    /** calculate necessary correction length and direction */
+    const correction = diff.multiplyScalar((currentDist - this.restDist) / currentDist);
+    correction.multiplyScalar(K);
+    const correctionHalf = correction.multiplyScalar(0.5);
+
+    let p1movable = this.p1.movable && this.p1.movableTmp;
+    let p2movable = this.p2.movable && this.p2.movableTmp;
+
+    /** apply correction if masses aren't fixed */
+    /** divide correction if both are movable */
+    if (p1movable && p2movable) {
+      this.p1.position.add(correctionHalf);
+      this.p2.position.sub(correctionHalf);
+    } else if (! p1movable && p2movable) {
+      this.p2.position.sub(correction);
+    } else if (p1movable && ! p2movable) {
+      this.p1.position.add(correction);
+    }
   }
 }
 
-/**
- * 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;
-
-
-  /**
-   * set vertex indices
-   * and calculate inital length based on the
-   * vertex positions
-   * @param {Array<Vector3>} vertices 
-   * @param {number} index1 
-   * @param {number} index2 
-   */
-  constructor(vertices, index1, index2) {
-    this.index1 = index1;
-    this.index2 = index2;
+class Mass {
+  movableTmp = true;
+  movable = true;
 
-    let length = vectorLength(vertices[index1], vertices[index2]);
-    this.restLength = length;
-    this.currentLength = length;
+  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;
   }
-
-  getDirection(vertices) {
-    let direction = new THREE.Vector3(
-      vertices[this.index1].x,
-      vertices[this.index1].y,
-      vertices[this.index1].z
+  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)
+    /** calculate velocity */
+    const nextPosition = this.position.clone().sub(this.previous);
+    /** apply drag */
+    nextPosition.multiplyScalar(DRAG);
+    /** add to current position and add acceleration */
+    nextPosition.add(this.position);
+    nextPosition.add(this.acceleration.multiplyScalar(dt*dt));
+
+    if (this.movable && this.movableTmp) {
+      this.previous = this.position;
+      this.position = nextPosition;
+    }
 
-    direction.sub(vertices[this.index2]);
-    direction.divideScalar(vectorLength(vertices[this.index1], vertices[this.index2]));
-
-    return direction;
+    /** reset for next frame */
+    this.acceleration.set(0, 0, 0);
   }
 }
 
-/**
- * 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;
+    this.windFactor = new THREE.Vector3(3, 2, 2);
 
     /**
      * distance between two vertices horizontally/vertically
@@ -120,316 +100,218 @@ 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 "masses"
      */
+    this.masses = [];
     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.masses.push(
+          new Mass(
+            (x - ((numPointsWidth-1)/2)) * stepWidth,
+            height - (y + ((numPointsHeight-1)/2)) * stepHeight,
+            0,
+            MASS)
         );
       }
     }
 
+    /** attach cloth to flag pole */
+    const n = 3;
+    for (let i = 0; i < numPointsHeight; i++)
+      this.masses[this.getVertexIndex(0, i)].movable = false;
+
+    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 springs (constraints)
      */
-    function getVertexIndex(x, y) {
-      return y * numPointsWidth + x;
+    this.springs = [];
+    for (let y = 0; y < numPointsHeight; y++) {
+      for (let x = 0; x < numPointsWidth; x++) {
+        if (x < numPointsWidth-1) {
+          this.springs.push(new Spring(
+            this.masses[this.getVertexIndex(x, y)],
+            this.masses[this.getVertexIndex(x+1, y)],
+            REST_DIST_X
+          ));
+        }
+        if (y < numPointsHeight-1) {
+          this.springs.push(new Spring(
+            this.masses[this.getVertexIndex(x, y)],
+            this.masses[this.getVertexIndex(x, y+1)],
+            REST_DIST_Y
+          ));
+        }
+      }
+    }
+  }
+  generateGeometry() {
+    const geometry = new THREE.BufferGeometry();
+
+    const vertices = [];
+    const indices = [];
+    const uvs = [];
+
+    /** create one vertex and one uv coordinate per mass */
+    for (let i in this.masses) {
+      let particle = this.masses[i];
+      vertices.push(
+        particle.position.x,
+        particle.position.y,
+        particle.position.z);
+      uvs.push(
+        this.getX(i) / (this.numPointsWidth-1),
+        1 - (this.getY(i) / (this.numPointsHeight-1))
+      );
     }
 
     /**
      * 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),
+    for (let y = 0; y < this.numPointsHeight - 1; y++) {
+      for (let x = 0; x < this.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)
         );
-
-        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);
-  }
-
-  /**
-   * 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<Vector3>} vertices 
-   * @param {Array<Face>} faces 
-   */
-  createExplicit(vertices, faces) {
+    /** set up geometry */
+    geometry.setIndex(indices);
+    geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
+    geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
+    geometry.computeBoundingSphere();
+    geometry.computeVertexNormals();
 
-    /**
-     * Copy vertices and initialize vertex weights to 0
-     */
-    for (let i in vertices) {
-      this.geometry.vertices.push(vertices[i]);
-      this.previousPositions.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;
-
-      /**
-       * 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;
-    }
-
-    /**
-     * let THREE JS compute bounding sphere around generated mesh
-     * needed for View Frustum Culling internally
-     */
-    this.geometry.computeBoundingSphere();
+    return geometry;
   }
-
-  /**
-   * 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
-   */
-  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);
+  updateGeometry(geometry) {
+    /** update vertex positions in place */
+    const positions = geometry.attributes.position.array;
+    for (let i in this.masses) {
+      let p = this.masses[i];
+      positions[i*3+0] = p.position.x;
+      positions[i*3+1] = p.position.y;
+      positions[i*3+2] = p.position.z;
     }
+    /** update internally and recalculate bounding volume */
+    geometry.attributes.position.needsUpdate = true;
+    geometry.computeBoundingSphere();
+    geometry.computeVertexNormals();
   }
-
-  previousPositions = [];
-  time = 0;
-  /**
-   * 
-   * @param {number} dt 
-   */
   simulate(dt) {
-
-
-
-    for (let i in this.geometry.vertices) {
-      let currentPosition;
-      let acceleration = this.getAcceleration(i, dt);
- 
-      currentPosition = this.verlet(this.geometry.vertices[i], this.previousPositions[i], acceleration, dt/2000);
-     
-      this.previousPositions[i] = currentPosition;
-      this.geometry.vertices[i] = currentPosition;
-      
+    let now = performance.now();
+    for (let mass of this.masses) {
+      /** accumulate acceleration:
+       *  - wind
+       *  - gravity
+       */
+      let vertex = mass.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)
+        mass.addForce(fWind);
+      // calculate wind with normal?
+
+      mass.addForce(GRAVITY);
+
+      /** integrate motion */
+      mass.verlet(dt);
     }
-    console.log(this.geometry.vertices[0]);
-    this.time += dt;
 
-    /**
-     * let THREE JS compute bounding sphere around generated mesh
-     * needed for View Frustum Culling internally
-     */
-
-    this.geometry.verticesNeedUpdate = true;
-    this.geometry.elementsNeedUpdate = true;
-    this.geometry.computeBoundingSphere();
+    /** run satisfy step */
+    for (let constraint of this.springs) {
+      constraint.satisfy();
+    }
 
+    /** prevent self-intersections */
+    this.intersect();
   }
 
-
-
-/**
- * Equation of motion for each vertex which represents the acceleration 
- * @param {number} vertexIndex The index of the current vertex whose acceleration should be calculated
- *  @param {number} dt The time passed since last frame
- */
-getAcceleration(vertexIndex, dt) {
-
-  let vertex = this.geometry.vertices[vertexIndex];
-
-  // Mass of vertex
-  let M = this.vertexWeights[vertexIndex];
-  // constant gravity
-  let g = new THREE.Vector3(0, -1.8, 0);
-  // stiffness
-  let k = 5;
-
-  // Wind vector
-  let fWind = new THREE.Vector3(
-    Math.sin(vertex.x * vertex.y * this.time),
-    Math.cos(vertex.z* this.time),
-    Math.sin(Math.cos(5 * vertex.x * vertex.y * vertex.z))
-  );
-
-  /**
-   * constant determined by the properties of the surrounding fluids (air)
-   * achievement of cloth effects through try out
-   * */
-  let a = 1;
-
-  let velocity = new THREE.Vector3(
-    (vertex.x - this.previousPositions[vertexIndex].x) / dt,
-    (vertex.y - this.previousPositions[vertexIndex].y) / dt,
-    (vertex.z - this.previousPositions[vertexIndex].z) / dt
-  );
-
-
-  let fAirResistance = velocity.multiplyScalar(-a);
-
-  let springSum = new THREE.Vector3(0, 0, 0);
-
-  // Get the bounding springs and add them to the needed springs
-  for (let i in this.faces) {
-    if (this.faces[i].a == vertexIndex || this.faces[i].b == vertexIndex || this.faces[i].c == vertexIndex || this.faces[i].d == vertexIndex) {
-      for (let j in this.faces[i].springs) {
-        if (this.faces[i].springs[j].index1 == vertexIndex || this.faces[i].springs[j].index2 == vertexIndex) {
-
-          let spring = this.faces[i].springs[j];
-          let springDirection = spring.getDirection(this.geometry.vertices);
-
-
-          if (this.faces[i].springs[j].index1 == vertexIndex)
-            springDirection.multiplyScalar(-1);
-
-          springSum.add(springDirection.multiplyScalar(k * (spring.currentLength - spring.restLength)));
-
+  intersect() {
+    for (let i in this.masses) {
+      for (let j in this.masses) {  
+        let p1 = this.masses[i];
+        let p2 = this.masses[j];
+
+        p1.movableTmp = true;
+        p2.movableTmp = true;
+
+        /** skip if i == j or if masses are adjacent */
+        if (i == j || (Math.abs(this.getX(i) - this.getX(j)) == 1 && Math.abs(this.getY(i) - this.getY(j)) == 1))
+          continue;
+
+        /** calculate distance of points  */
+        let dist = p1.position.distanceTo(p2.position);
+        /** calculate minimal resting distance (largest distance that should not be fallen below) */
+        let collisionDistance = Math.min(this.width / this.numPointsWidth, this.height / this.numPointsHeight);
+        // collisionDistance /= 2;
+        /** calculate "sphere intersection" */
+        if (dist < collisionDistance) {
+          // p1.movableTmp = false;
+          // p2.movableTmp = false;
+
+          /** vectors from p1 to p2 and the other way round */
+          let diffP2P1 = p1.position.clone().sub(p2.position).normalize();
+          diffP2P1.multiplyScalar((collisionDistance - dist) * 1.001 / 2);
+          let diffP1P2 = diffP2P1.clone().multiplyScalar(-1);
+
+          // let v1 = p1.position.clone().sub(p1.previous).normalize();
+          // let v2 = p2.position.clone().sub(p2.previous).normalize();
+
+          // let factor1 = (Math.PI - Math.acos(v1.dot(diffP2P1))) / Math.PI * 2;
+          // let factor2 = (Math.PI - Math.acos(v2.dot(diffP1P2))) / Math.PI * 2;
+
+          /** move masses apart */
+          if (p1.movable)
+            p1.position.add(diffP2P1);
+            //p1.position.add(diffP2P1.multiplyScalar(factor1));
+          if (p2.movable)
+            p2.position.add(diffP1P2);
+            //p2.position.add(diffP1P2.multiplyScalar(factor2));
         }
       }
     }
   }
+  blow(camPos, intersects) {
+    let face = intersects[0].face;
+    /** vector from cam to intersection (wind) */
+    let dir = intersects[0].point.clone().sub(camPos).multiplyScalar(100);
+    /** apply to all vertices of affected face */
+    this.masses[face.a].addForce(dir);
+    this.masses[face.b].addForce(dir);
+    this.masses[face.c].addForce(dir);
+  }
+  drag(mousePosWorld, index) {
+    /** calculate vector from vertex to cursor */
+    let dir = mousePosWorld.clone().sub(this.masses[index].position).multiplyScalar(200);
+    /** apply to grabbed vertex */
+    this.masses[index].addForce(dir);
+  }
 
-  
-  let result = new THREE.Vector3(1, 1, 1);
-
-  
-  result.multiplyScalar(M).multiply(g).add(fWind).add(fAirResistance).sub(springSum);
-  
-
-  return result;
-
-
-}
-
-/**
- * The Verlet algorithm as an integrator 
- * to get the next position of a vertex  
- * @param {Vector3} currentPosition 
- * @param {Vector3} previousPosition 
- * @param {Vector3} acceleration 
- * @param {number} passedTime The delta time since last frame
- */
-verlet(currentPosition, previousPosition, acceleration, passedTime) {
-  // verlet algorithm
-  // next position = 2 * current Position - previous position + acceleration * (passed time)^2
-  // acceleration (dv/dt) = F(net)
-  // Dependency for one vertex: gravity, fluids/air, springs
-
-  let nextPosition = new THREE.Vector3(
-    2 * currentPosition.x - previousPosition.x + acceleration.x * (passedTime * passedTime),
-    2 * currentPosition.y - previousPosition.y + acceleration.y * (passedTime * passedTime),
-    2 * currentPosition.z - previousPosition.z + acceleration.z * (passedTime * passedTime),
-  );
-
-  return nextPosition;
-}
-
-
-}
-
+  /**
+   * 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;
+  }
+  getX(i) { return i % this.numPointsWidth; }
+  getY(i) { return Math.floor(i / this.numPointsWidth); }
+}
\ No newline at end of file