3D mesh를 직선으로 잘라버리는 로직은 찾으면 쉽게 나온다
하지만 내가 생각하는 것처럼 edge를 쫓아 선을 그으면 그대로 잘리는 로직은 잘 보이지 않는다
https://codesandbox.io/p/sandbox/csg-slice-k4qfiz?file=%2Fsrc%2FApp.js
https://codesandbox.io/p/sandbox/csg-slice-k4qfiz?file=%2Fsrc%2FApp.js
codesandbox.io
위 코드처럼 mesh cut 예시가 있긴 하지만,
mesh cut이라고 검색하면 나오는 방법들은 직선으로 mesh를 끝까지 자르는 방법들이다
내 경우 천을 반드시 mesh가 분리될 정도로 자른다는 보장이 없고, 직선이 아니라 edge를 따라서 다른 방식으로도 자를 수 있도록 하려고 한다
그러면 문제가 이렇게 자르는 선이 서로 교차하도록 edge를 cut하게 된다면 예기치 않게 나타날 수 있지만,
구현을 해보고 어떤 현상이 생기는지 지켜보자
자르기 방법 찾기 1
찾아본 방법은 edge의 중간 지점을 찾아서 새로운 new vertex를 만들고
해당 vertex를 기준으로 기존 face를 두 개로 나누는 로직이었다
보면서 뭔가 이상하다고 생각했는데
이렇게 edge의 중간점 vertex를 만들고 자른 모양의 face로 분리한다는 말이다
단지 이렇게하고 여러 edge들에 적용하면 어떻게 되는가
이렇게 되는데, edge와 나눠진 삼각형 빨간 부분이 열리는 거고 나머지에 대해서는 음..
방법이 잘못되었다
애초에 저 삼각형을 edge와 교차하는 방향으로 자를 이유도 없고,
face가 분리되지만 위 아래에 각각있는 face들은 그대로 같은 vertex를 공유하므로 edge가 잘리지는 않는다
자르기 방법 찾기 2
다음으로 찾은 자르기 방법은 plane으로 face를 둘로 나누는 방법이었다
이것 또한 edge를 따라서 자르는 방법은 아니다
흠... 그냥 방법을 직접 만들 필요가 있다
edge로 자를 때 vertex 처리
일단 edge로 자를 때 위와 같이 edge의 양쪽 vertex를 다 분리해야하는지
아래와 같이 두 edge가 있으면 연결점 vertex 만 분리해야하는지도 문제이다
결론적으로는 edge를 따라 자연스럽에 잘리는 방향은 아래의 방법이다
edge 선을 따라 자르게 될 때 vertex를 분리하는데
이때 문제점은 위 그림에서 5번 vertex가 10,11로 분리되면, 각 face들은 10을 쓰는지 11을 쓰는지 명확히 분리해야한다는 점이다
vertex index는 실제로 위 그림처럼 순차적이지도 않고, 좌표계에서 위치가 위인지 아래인지로 구분하는 것도 정확한 기준이 되지는 못한다
따라서 edge의 점과 (1,2,3,7,8,9) 중 임의의 두 점을 골랐을 때
edge의 점을 두 점에 projection 하면... 이런 방법이 되나?
다시 생각해보니 적합하지 않은 방법 같기도
vertex 하나하나를 골라서 보지 않고, face normal을 이용하는 방법은 어떨까
음.. normal 방향은 접히는 경우만 해당되는 경우라 이것도 힘들다
edge를 따라 자른다는 개념의 한계
결국 선분을 기준으로 자르는 것이 3차원에서 조건상 불충분한 방법이라는 것을 알았다
그렇다면 어떻게든 자르는 기준이 되는 평면을 추가해야한다
이렇게 되면 방법은 생각난다
다른 mesh cutting 방법처럼 카메라를 기준으로 평행한 선분들로 이루어진 평면을 임시로 생성하는 것이다
edge를 기준으로 자르게 될 때 face를 구분하는 기준이 edge뿐 아니라 카메라에서 edge를 바라보는 방향벡터를 함께 이용한다
결국 평면을 어떻게든 만들어내서 face를 edge 위쪽으로 할 지 아래쪽으로 할 지 구분하도록 하자
plane.distanceToPoint(point)camera 방향 벡터와 edge선분으로 만든 평면을 기준으로 정점이 위쪽 아래쪽인지 음수 양수로 구분한다
이 방법은 제한이 꽤 많은 방법이긴 하다
하지만 이 프로젝트에서는 자르는 면을 정면으로 보며 자르고, 극단적으로 구부러진 mesh를 자르는 일은 없을 거라고 가정하고 개발을 진행하자
