Fun with cloth physics and meshes

class Level extends Phaser.Scene {
  mesh;
  
  preload() {
     this.load.image('example', 'assets/sprites/phaser3-logo.png');
  }

  create() {
    this.createMesh();  
  }
  
  createMesh() {
    const mesh = this.add.mesh(300,300, 'example');
    // Create the mesh grid
    Phaser.Geom.Mesh.GenerateGridVerts({
      width: 412, // width of image
      height: 93, // height of image
      texture: 'example',
      mesh,
      widthSegments: 5,
      heightSegments: 2,
    });
    // need to call it once to make setOrtho work for some reason
    mesh.panZ(1); 
    // make the mesh visible in the scene
    mesh.setOrtho(mesh.width, mesh.height); 
    this.mesh = mesh;
  }
}

class Level extends Phaser.Scene {
  cloth;
  createCloth() {
    const group = this.matter.world.nextGroup(true);
    const particles = { 
      friction: 0.00001,
      collisionFilter: { group: group },
      render: { visible: false } 
    };
    const constraints = { stiffness: 0.06 };
    // softBody signature (x, y, columns, rows, columnGap, rowGap, crossBrace, particleRadius, particleOptions, constraintOptions)
    const cloth = this.matter.add.softBody(
      250, 400, 6, 3, 65, 35, false, 8, particles, constraints
    );
    
    // Crete two anchors, to prevent the cloth from collapsing
    cloth.bodies[0].isStatic = true;
    cloth.bodies[5].isStatic = true;
    this.cloth = cloth;
  }
}

export function createUniqueSortedVertices(vertices) {
  const seen = {};
  // we need to remove verticies with the same coordinates 
  // to make sure we map the bodies in the cloth correctly
  // this will become more apparent when we connect the cloth to the mesh
  const tmp = [...vertices].filter((item)=> {
    if(seen.hasOwnProperty(item.u + '-' + item.v)) return false;
    seen[item.u + '-' + item.v] = true;
    return true;
  });

  // sort based on UV map. UV coordinate 0,0 first, and 1,1 last
  tmp.sort((a, b) => {
      if (a.v < b.v) return -1;
      if (a.v > b.v) return 1;
      if (a.u < b.u) return -1;
      if (a.u > b.u) return 1;
      return 0;
    });
  return tmp;
}

// We need to move all vertices that share the same vertex
// v1 is the "unique" vertex from the sorted list we created in createUniqueSortedVertices
// we return all vertices that shares the same position as v1
export function getSharedVerteces(v1, vertices) {
  const shared = [];
  for (let i = 0; i < vertices.length; i++) {
    const v = vertices[i];
    if (v.x === v1.x && v.y === v1.y) shared.push(v);
  }
  return shared;
}

import {createUniqueSortedVertices, getSharedVerteces} from 'meshUtils';

class Level extends Phaser.Scene {
  mesh;
  cloth;
  uniqueVertiesSortedByUV;

  create() {
    // create mesh and cloth like before
    this.createMesh();
    this.createCloth();
    
    this.uniqueVertiesSortedByUV = createUniqueSortedVertices(
      this.mesh.vertices
    );
  }

  // update called every frame
  upcate() {
    this.updateMesh();
  }
  
  updateMesh() {
    if (!this.mesh || !this.cloth) return;
    // need to set this flag and call preUpdate to update the mesh
    this.mesh.ignoreDirtyCache = true; 
    // map each body in the cloth to a vertex in the mesh
    // and update the mesh position based on body position
    for (let i = 0; i < this.cloth.bodies.length; i++) {
      // each cell in the cloth is a body.
      // We created the cloth to have qually many bodies 
      // as we have squares in the mesh
      const body = this.cloth.bodies[i];

      // Since we have sorted all vertices according
      // to their UV-map, and removed duplicated vertices,
      // we know for sure that the each cell in the cloth 
      // will have a 1 to 1 mapping to each vertex.
      // That's why it's important to have cells (bodies) in 
      // the cloth equally large as the mesh
      const shareVertices = getSharedVerteces(
        this.getClosestVertex(i),
        this.mesh.vertices
      );

      // Change the position of the vertices in the mesh
      // according to the cloth position
      shareVertices.forEach((v) => {
        v.x = body.position.x - this.mesh.x; 
        v.y = -body.position.y + this.mesh.y;
      });
    }

    this.mesh.preUpdate();
    this.mesh.ignoreDirtyCache = false;
  }
  
  getClosestVertex(i) {
    return this.uniqueVertiesSortedByUV[i];
  }
}