개발 · 컴퓨터공학/three.js / / 2024. 7. 15. 20:08

Threejs Cloth Tailor 개발일지 - mesh 분리, mesh 자르기 아이디어 : spring cut off, macOS 환경 렌더링 이슈 (safari, chrome issue)

728x90
반응형

 

 

이렇게 잘린 경우 일반적으로는 mesh가 분리되어야한다

하지만 현재는 geometry만 움직이고 있고 사실은 같은 mesh에 속한다 

 

mesh를 분리하려면 어떻게 코드를 수정해야할지 좀 봐야겠다. 

 

mesh 자르기 방법의 다른 아이디어

자른다는 개념에서 새로운 아이디어가 떠올랐다.

edge를 삭제하는 방법인데. 이전에 구현했던 edge를 따라 잘라서 vertices를 분리하는 방법이 아닌,

face의 edge 즉 cloth spring을 끊어내는 방식이다.

 

그러면 마우스가 그리는 선을 따라서 어떤 edge를 끊어내는지 어떻게 결정하는가?

지금 당장 떠오르는 방법은 마우스 raycast가 추적한 face들의 경로를 통해 끊어낼 spring을 구하는 것이다.

 

기존 알고리즘에서 face끼리는 neighbor edge의 개념이 존재하고,

A face에서 B face로 잘랐다고 가정하면

A face와 B face가 서로 접하는 edge를 삭제하는 것이다.

 

해당 방법을 임시로 'spring cut off' 라고 칭하자. 

spring이 끊어지는 방법은 또 힘으로도 존재할 수 있는데, 현재는 특정 vertex에 외력을 주는 방법은 없다. 

raycast event 버그 

윈도우에서 작업할 때는 없었는데 맥북 트랙패드로는 발생하는 버그가 있다.

 

edge remove를 하고 mouse up 을 하면 mesh가 사라진다.

이벤트 하나하나에 debug를 찍어보면서 트랙패드의 이벤트 타이밍을 알아보아야할 것 같다.

 

raycast 구조도 변경할 필요가 있다. 현재 이렇게 init을 할 때마다 이벤트를 넣어주고 하는 방식 때문에

이벤트가 중복되는 현상이 발생한다. 

 

일단 맥북에서는 mode를 변경하면 mouse down 이후 mouse up동작이 실행되지 않는다. 

즉 down에 이벤트를 추가하고, up에 이벤트를 제거하는 과정이 반드시 일어나리라 생각할 수 없다.

 

위 사진의 경우 mouse down을 통해 mode를 바꾸었지만, mouse up 이벤트가 실행되지 않아

계속 down 상태를 유지하고 있어서 마우스를 누르지 않은 상태에서도 down이벤트가 계속 실행되고 있다. 

 

일단 event 코드 수정이 필요.

 

그렇다면 mesh가 사라지는 문제는?

이와는 별개로 remove edge를 하면 mesh 전체가 사라지는데 이건 무슨 문제일까 

이건 윈도우에서는 발생하지 않았던 현상이다.. 

 

vertex index gui를 통해서 위치를 찍어보니까. remove edge 이후에도 시뮬레이션을 돌리면 vertex가 움직이는 걸로 봐서 

실제 geometry는 정상적으로 연산되는데 mesh 렌더링이 안되는 것 같기도 하다. 

 

raycast를 찍어보면 분명 mesh는 존재하고, raycast에 걸려서 vertex 위치가 확인되면서 시뮬레이션 되고 있다. 

다만 렌더링만 안되는 것. 왜이러지? 

 

브라우저를 크롬이나 웨일로 바꾸어서 시도해봐도 똑같이 발생한다면, 이것은 코드상의 문제일 가능성이 크다. 

맥이 아닌 다른 윈도우 환경에서 코드를 pull 받고 실행해도 잘 실행된다.

그 즉슨 정말 맥 환경이 문제인 건가?

다시 clone 받기 

이 방법도 안되면 정말 MAC환경의 그래픽상 렌더링이 안되는 것인가 싶다. 

이것도 실패다

웨일 실험실 webGPU설정

webGPU support 와 관련이 있을지는 잘 모르겠다.

 

찾아보니 webgl설정도 있는데.

webgpu는 현재 사용하고 있지 않으니 webgl에 대한 설정을 수정해보면 어떨까. 

 

전부 테스트 해봤는데 아닌 것 같다.

MacOS threejs geometry 업데이트시 안보임 현상

이건 정말 맥에서만 렌더링 결과가 안보이는 현상인 것 같아서. 

좀 찾아볼 필요가 있다. 

조금만 찾아보고 효율이 안나오면 그냥 윈도우로 개발해야할 것 같다. 

 

https://discourse.threejs.org/t/instance-mesh-not-rendering-on-mac/29516

 

Instance mesh not rendering on mac

I do all my development on a windows pc but swapped to a new mac mini today while my pc us under upgrade. I found that instance mesh is not rendering on my new mac mini. Renders fine on my windows machine, does not render on mac. That would include safari

discourse.threejs.org

mac os에서 특정 mesh가 안보인다는 포럼의 글을 발견했다. 

instance mesh라는 다른 객체 형태가 또 있는 모양인데.

마찬가지로 pc에서는 잘 되는데 mac에서는 안되고 그 원인은 정확히 파악이 안되는 것 같다.

 

나도 마찬가지의 상황이다. 렌더링만 안된다. 렌더링만. 

 

Metal API의 문제인가 

아는 박사 선배님께 여쭤보니. opengl이 mac 브라우저 위에서 렌더링될 때 metal을 거쳐 렌더링 될 것인데.

이 metal API가 상당히 문제가 많다고 하셨다. 

 

자세한 사항은 잘 모르지만. geometry가 존재하는데 mac 환경에서만 렌더링이 안되는 현상이라면, metal api의 문제일 것이라고 한다. 

 

실제로 metal이 shader 과정에서 이슈가 생겼을 때 해결하지 못하면 metal api forum에 질문해도 답변해주지 않고, 커뮤니케이션이 부족하다고 들었는데. 

 

비슷한 상황의 케이스를 좀 찾아보고. 일단 윈도우 환경에서 개발을 진행하도록 하자. 

 

 

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