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

Threejs Cloth Tailor 개발일지 - mesh transformation world matrix

이전 포스팅 보러가기 raycast vertex debuggingraycast가 intersect point를 표면의 어떤 구역이든 집을 수 있도록 만들었다custom mesh 감지가 잘 되도록 bounding box가 아니라 bounding sphere를 사용해서 처리했다  이제 raycast가 그려내는 선이 vertex를 가리키도록 하고, 선이 해당 버텍스의 normal 방향으로 표시되도록 해보자가장 가까운 vertex 찾기이렇게 빨간 plane에는 작 동작하지만, 밑의 바닥 floor에는 제대로 적용되지 않았다  floor의 geometry 형태를 바꿔도 감지되는 closest vertex는 이상하게 2 곳만 가리킨다  잘 확인해보니 4곳이다 이 경우는 cube geometry라 그런것 같은데pla..

2024. 6. 23. 09:09

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

Threejs Cloth Tailor 개발일지 - compute bounding sphere, enum type 단점과 object literal type, mesh cut

이전 포스팅 보러가기 compute bounding sphere 함수 (bounding box)stack overflow의 한 사람이 해결한 방법으로 compute bounding sphere를 알려주었는데이게 무슨 함수인가  bounding box 혹은 boudning sphere라고 하면 해당 geometry를 포함하는 일정 영역을 말하는 것인데 이걸 수동적으로 계산하게 함으로써 혹여나 geometry의 vertice들의 update에 대해서 raycast나 frustum culling에서 잘 반응하도록 하는 것이다 즉 custom한 mesh의 경우, 엔진이 제공하는 raycast함수가 변화하는 vertices를 제대로 감지하지 못해서 생긴 일이라고 생각하면 또 맞는 말 같다.  실제로 지금 프로젝트..

2024. 6. 22. 09:05

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

Threejs Cloth Tailor 개발일지 - raycast line 그리기, 오브젝트 감지, intersectObjects, raycast intersect custom mesh

이전 포스팅 보러가기 raycast mode 동작 : 마우스로 raycast 쏘기마우스 이벤트를 사용하는데 있어서 JS기반으로 동작하기 때문에 event처리가 바로 생각나지 않는다한 번 테스트 코드를 짜볼까 raycast로 canvas상 2d 위치를 찍는건 금방하지만,3D 환경에서 object intersect를 구현하려면 카메라가 필요하다  import { Camera, Raycaster, Scene, Vector2 } from "three"let raycaster = new Raycaster()const mouse = new Vector2()export function init(scene: Scene, camera: Camera): Raycaster{ window.addEventListener('m..

2024. 6. 21. 09:34

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

Threejs Cloth Tailor 개발일지 - mode 선택 enum type 열거형 사용하기(열거형 숫자 안나오게)

이전 포스팅 보러가기 바닥 문제는 해결했고, 이제 cut 기능을 만들어보자  cut을 하기 위해서는 먼저 vertex를 model에서 삭제하는 기능을 만들어야한다삭제 기능이 정말 어려운데 찬찬히 생각해보자 vertex 고정 기능 코드 분리일단 이제 scene을 분리하고 진행하려고 한다 고정 vertex를 제거해서 cloth 모델이 나뒹구는데이부분은 scene을 분리해서 simulation scene과 cut scene으로 기능을 분리하려고 한다   private init() { // Set top of cloth to have a mass of 0 to hold still // in order to get hanging from clothesline visual { // Var..

2024. 6. 20. 09:06

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

Threejs Cloth Tailor 개발일지 - 바닥 옮기기, 정점 고정 떼기, vertex debugger

이전 포스팅 보러가기 바닥 옮기기생각해보니까 이렇게 되는 현상부터 처리해야한다시뮬레이션 constraint의 바닥부터 옮겨보자 physics-objectssolve(dt: number) { for (let i = 0; i 여기 solve 함수에서 height보다 y가 작으면 충돌하는 floor기능이 있다오랜만에 봐서 헷갈리는데 3*i+1은 xyz중 각 파티클의 y좌표값이다 그럼 여기 들어가는 상수 height를 변수화 시켜서 각 씬에서 조절할 수 있도록 만들어보자 let height = -0.7export function setFloorHeight(_height:number){ height = _height}physics object의 height를 조절할 수 있는 함수를 export한다  가만보..

2024. 6. 19. 09:24

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

Threejs Cloth Tailor 개발일지 - 조명 normal quad 이슈, CAD 기능 구상하기

이전 포스팅 보러가기 이 normal이 절반은 적용되지 않는 문제의 원인을 찾자원본 코드 중 정상 코드 찾기본래 carmen씨의 코드 중 이렇게 문제 없이 전반적으로 normal이 잘 적용되는 버전이 있다여기서 문제의 상황으로 나아가면서 뭐가 바뀌었는지 알아보자 올라가다보니 저 PR을 통해서 Merge되는 부분으로 내려가면...? 이제 obj 파일의 문제인가? 싶기도 한게 다른 cloth 오브젝트로 바꾸면 렌더링이 되다가 안되는 것처럼 보인다. 오브젝트 변경 확인예상이 맞았다. cloth object가 carmen씨의 코드에서는 20x30짜리와 40x40짜리가 있는데40x40짜리 오브젝트로 변경하니까 normal 렌더링이 잘 되는 모습을 보인다 그렇다면 문제는 무엇인가예상할 수 있는 것은 이전에 해결했던..

2024. 6. 18. 09:14