개발 · 컴퓨터공학/three.js / / 2024. 8. 10. 09:00

Threejs Cloth Tailor 개발일지 - geometry.setIndex(indices), mesh attach simulation, 분리된 mesh 붙이기, vertex constraint

728x90
반응형

 

★ geometry index 세팅 방법 : geometry.setIndex(indices)

geometry.setIndex(indices);

index를 재설정하는 방법을 위 코드를 이용해보면 다를까. 

 

    const newIndex = mergedGeom.index.array.map(index=>{
      if(index === mergedVertexIndex2)
        return vertexIndex1!
      else
        return index 
    })
    mergedGeom.setIndex(Array.from(newIndex))

그래서 geometry의 set index 함수를 이용하기 위해

index array를 Typed array에서 number[] 형태로 변경해줌으로써 set index 함수를 활용해서 index를 넣을 수 있게 되었다.

 

오? 됐다!

set index를 이용하니 변경된 face 정보가 렌더링에 정상적으로 반영된다.

threejs에서 geometry를 직접 수정하는 경우에는 이렇게 렌더링에 반영될 수 있는 함수들을 이용해야한다.

 

시뮬레이션 움직임을 보니, set index를 활용하기 전에도 face 정보는 제대로 반영되었으나

face 렌더링만 정상적으로 진행되지 않았다는 것을 알 수 있다. 

 

작은 cloth에서 되었는데 다시 40x40 cloth에서 시도해보자.

 

mesh attach 적용 시뮬레이션 

이렇게 mesh가 분리되지 않더라도 attach 기능이 적용되긴 한다.

다만, face 정보를 그대로 변경하는 것이라서 억지로 늘려서 붙이는? 듯한 느낌이 난다. 

 

이건 시뮬레이션을 시작해도 그대로 진행되는데,

아무래도 face를 구성하는 vertex끼리의 거리가 시뮬레이션을 시작할 때 초기거리로 세팅되기 때문에 그런 것 같다.

 

즉, 물리적으로 당기려면 vertex의 constraint를 수정하는 방법이 있고.

mesh attach에서 붙이려면, mesh를 분리한 상태에서 translate해서 이동시킨 후 가능한 자연스럽게 붙이는 방법이 있다.

 

이런 느낌으로 진행하는 것. 

근데 문제가 있다.

 

mesh가 분리되어있는 상태에서 mesh attach가 안된다.

즉 merged geometry 처리가 잘 안되고 있는 상황..

 

분리된 mesh attach 

테스트를 위해 다시 4x3 cloth에서 해보는데 이렇게 separator에서 에러가 난다.

 

보니까 4x3 cloth에는 vt 즉 uv에 대한 정보가 일절 없어서 그런것 같다.

예외처리를 해주자. 

 

다시 merged geometry에 대해서 디버깅을 해보자.

 

geom1와 geom2 각각의 index를 보니 

mesh 분리가 잘 된 것 같다.

하지만 attach가 되지 않는 원인은 무엇일까.

 

merge geometry의 index이다. geom2의 15,16,17이 새로운 index로 추가된 게 보인다. 

 

문제를 찾았다...

 

merged vertex index 2는 기존에 2였던 건지, count=15 를 더해서 17이 되었다. 

하지만 count는 vertex개수이지 index개수가 아니다.

 

17은 잘못 계산한 값이고, count / 3을 해서 5를 더한 2+5 = 7이 merged vertex index 2 의 값이 되었어야한다. 

count가 index 개수라고 착각해서 생긴 문제같다. 고쳐서 다시 확인해보자. 

 

또 계산 실수인 것 같다. geometry.index.count / 3은 생각해보니 face count이고, 

merged vertex index 2에 더해야하는 값은 index의 개수이다.

 

즉 index property에 들어있는 face list의 개수는 상관이 없고, geom1의 가장 마지막 번째 index값을 구하고 1을 추가하면 index count가 된다.

로직을 바꾸자. 

 

    // get index2 after merge
    const geom1IndexCnt: number = Math.max(...Array.from(geom1.index.array)) + 1
    const mergedVertexIndex2 = vertexIndex2 + geom1IndexCnt;

이렇게 index array에서 가장 큰 값이 마지막이므로 여기에 1을 더해서 count를 구했다. 

 

음... 그래도 안되길래 생각해보니 병합하기 전 geometry 두 개를 삭제하지 않은 거였다.

병합된 geometry도 material이 없어서 그런가 싶기도 하다. 

 

merged geometry 반영하고 나머지 삭제 

    // 병합 geometry를 반영하고 남은 mesh 제거
    mesh1.geometry = mergedGeom
    scene.remove(mesh2)

mesh1에 병합된 geometry를 반영하고, 남은 mesh2는 제거하였다.

 

이게 문제가 맞았다.

처리하니까 이렇게 attach가 된 모습을 볼 수 있다.

시뮬레이션도 vertex가 붙어있는 상태로 대롱대롱 매달려 있다.

 

vertex constraint 

mesh attach를 구현하였지만, 생각외로 가상 의류 개발 프로그램에서 사용하는 것처럼 

착 당겨서 달라붙지는 않고 늘어져서 붙게 된다.

 

시뮬레이션시 착 당겨서 달라붙게 하려면, 특정 두 vertex를 잡고 그 두 vertex 사이의 constraint를 조정하여 물리적으로 끌어당기도록 해야할 것 같다.

접근 방식이 애초에 달랐던 것 같다. 

728x90
반응형
  • 네이버 블로그 공유
  • 네이버 밴드 공유
  • 페이스북 공유
  • 카카오스토리 공유