개발 · 컴퓨터공학/three.js

three.js attach id list 전달하기, attachIdList로 new edge 정보 만들기, set index, constraint edge 추가하기, distance constraint edge 추가 테스트 [Threejs Cloth Tailor 개발일지]

이전 포스팅 보러가기 attach id list 전달하기attach id list를 attach_vertex mode에서 전달할 수 있게 만들고 나서 테스트를 하는데 안된다.이유를 디버깅 해보다가 이제서야 깨달았는데, 사용자가 선택한 두 개의 vertex는 위 코드에서 원래 edgeIds에 짝지어진 리스트에 id0 id1로 들어있을리가 없잖아. 없는 edge를 만들어서 서로 끌어당기게 하는것인데 원래 있는 edge list에서 찾아서 constraint 적용을 한다는 개념이 잘못되었다... 어떻게 하면 좋을까.  여기서 attachIdList를 가지고 id0, id1 를 찾는게 아니라 새로운 edge를 만들어야한다. attachIdList로 new edge 정보 만들기 흠.. 그렇다고 initialize..

2024. 8. 13. 09:00

개발 · 컴퓨터공학/three.js

Threejs Cloth Tailor 개발일지 - (issue) merge geometry 시뮬레이션 성능 저하, merge geometries 테스트, self collision 성능 저하 원인, merge geometry 성능 저하 결론

이전 포스팅 보러가기  (issue) merge geometry 시뮬레이션 느려짐테스트를 간단한 geometry에서만 해서 그런가. geometry를 merge하게 되면 시뮬레이션에서 너무 느려졌다. 프레임이 엄청 끊긴다. 원인이 뭐지? mesh를 분리하지 않고 expand vertex를 한 경우에는 괜찮은데, merge geometry를 하게 되면 이렇게 느려진다.  constraint를 하나씩 지워보면서 확인해보니 느려지는 원인은 self collision에 있었다. geometry merge와 self collision이 무슨 관계이길래 이렇게 느려지는 걸까.  merge geometry방법이 잘못된 걸까..?  merge geometries 테스트 위와 같은 코드로 테스트를 해봤는데결국 merge..

2024. 8. 12. 09:00

개발 · 컴퓨터공학/three.js

Threejs Cloth Tailor 개발일지 - constraint, edge vertex index, initialize edge lengths, attach id list 전달하기

이전 포스팅 보러가기  후우.. mesh attach로 구현하면 될 줄 알았더니 큰 오해였다.결국 vertex 두 개 사이에 constaint를 적용하는 방법을 알아보는 게 좋을 것 같다.  constraint현재 구현된 시뮬레이션 물리엔진에서는 constraint가 4 가지가 있다.그 중 isometric bending constraint는 현재 사용되지 않는다. vertex끼리 끌어당기기 위해 중요한 것은 distance constraint일 것이다. 특히 그 중에서도 초기 particle과 particle 사이의 distance를 결정짓는 부분이 있을 것이고,vertex를 완전히 붙이려면 이 distance를 지정한 vertex 끼리만 0으로 세팅하면 될 것이다. 하나 더 생각이 나는데, 보통 co..

2024. 8. 11. 09:00

개발 · 컴퓨터공학/three.js

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

이전 포스팅 보러가기 ★ 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[..

2024. 8. 10. 09:00

개발 · 컴퓨터공학/three.js

Threejs Cloth Tailor 개발일지 - vertex connect 구현, mesh vertex attach, merge buffer geometries, index face list, mehs attacher, debugging

포스팅 보러가기 vertex connect 방법cloth를 접합하기 위해서 mesh를 붙이는 방법으로는 위와 같은 방법을 채택할 것이다.먼저 빨간 구역이 첫 번째 클릭하는 vertex가 포함된 곳, 파란 구역이 두 번째 클릭하는 vertex가 포함된 face이다. 첫번째 vertex는 건드리지 않고,두 번째 vertex가 포함되어있던 face들의 vertex index를 첫 번째 vertex에 연결시킨다. 즉, 두 번째 vertex index가 포함된 face에 첫 번째 vertex index를 대체해서 넣기만 하면 구현할 수 있을 것 같다.mesh vertex connect (attach vertex)export type Mode = "NONE" | "RAYCAST" | "REMOVE_VERTEX" |..

2024. 8. 9. 09:00

개발 · 컴퓨터공학/three.js

thee.js editor, Transform Controls, three.js addons 사용하기, transformation geometry, matrix 초기화 reset decompose, merge buffer geometries [Threejs Cloth Tailor 개발일지]

이전 포스팅 보러가기 TransformControl 기능 넣기이제 프로젝트에 transform control을 넣어서 분리된 mesh를 각각 이동시킬 수 있도록 해볼 계획이다.일단 모드를 하나 추가하자.  export type Mode = "NONE" | "RAYCAST" | "REMOVE_VERTEX" | "REMOVE_EDGE" | "TRANSFORM"transform이라는 모드를 선택할 수 있게 한다.transform 모드에서는 현재 scene 안에있는 child mesh들을 클릭하는 경우, transform contols 객체에 attach 되도록 설정하면 쉽게 구현가능하지 않을까?  문제는 transform controls 객체는 three addons에 들어있다는 점이다. three.js ad..

2024. 8. 8. 09:00