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

 

이전 포스팅 보러가기

 

이 normal이 절반은 적용되지 않는 문제의 원인을 찾자

원본 코드 중 정상 코드 찾기

본래 carmen씨의 코드 중 이렇게 문제 없이 전반적으로 normal이 잘 적용되는 버전이 있다

여기서 문제의 상황으로 나아가면서 뭐가 바뀌었는지 알아보자

 

올라가다보니 저 PR을 통해서 Merge되는 부분으로 내려가면...?

 

이제 obj 파일의 문제인가? 싶기도 한게 다른 cloth 오브젝트로 바꾸면 렌더링이 되다가 안되는 것처럼 보인다. 

오브젝트 변경 확인

예상이 맞았다. cloth object가 carmen씨의 코드에서는 20x30짜리와 40x40짜리가 있는데

40x40짜리 오브젝트로 변경하니까 normal 렌더링이 잘 되는 모습을 보인다

 

그렇다면 문제는 무엇인가

예상할 수 있는 것은 이전에 해결했던 것처럼 object의 vertices들을 quad indices로 처리해서 렌더링하는 과정에서 생긴 문제일 가능성이 있다

 

왼쪽이 40x40이고, 오른쪽이 20x30 짜리 cloth object이다 

40x40은 삼각형으로 이루어져있어 잘되지만 20x30은 quad로 이루어져있는 부분이 parsing 과정에서도 문제를 일으켰을 가능성이 있는데

 

근데 왜 하필 특정 영역까지만 적용이 되고 나머지는 안되었는가

차라리 전체 다 이랬으면 몰라도 부분적으로만 normal이 quad 때문에 이상해졌다는게 이해가 안된다

해당 부분을 파악하기에는 시간이 걸릴 것 같으므로 일단 triangle로 적용된 오브젝트로 시뮬레이션을 돌리는 방향으로 진행한다.

 

40x40 cloth object

다른 모델 넣어서 시뮬레이션 테스트 해보기

우선적으로 확인해볼 것은 이게 3d 의류 모델에서 테스트가 가능한지이다. 내가 가지고 있는 의상 모델 중 triangle mesh로 되어있고, 제대로 개발되어있는 모델을 가져와서 넣어보자.

 

모델의 vertex들이 어떻게 연결되어있냐에 따라서 parsing이 잘 되고 안되고 상황이 달라지게 될 텐데

그런 경우에는 잘 되는 형태의 모델을 찾던 아니면 위 기본 모델 그대로 재단 기능을 구현하도록 하자

 

이 원피스 모델로 한 번 변경해보자

 

시뮬레이션은 잘 되는 것 같다

다만 너무 커서 아래 부분이 잘리고, 그것 때문에 겹쳐진 vertices들은 시뮬레이션이 좀 꼬이는 것 같다

크기를 좀 수정해서 보자

 

중간에 저 원피스 모델과 기존 천 모델을 다른 mesh객체로 분리하는 과정에서 애를 좀 썼다

    const newGeometry = new BufferGeometry()
    newGeometry.setAttribute('position', new BufferAttribute(new Float32Array(finalPosition), 3))
    newGeometry.setAttribute('uv', new BufferAttribute(new Float32Array(finalUvs), 2))
    newGeometry.setAttribute('normal', new BufferAttribute(new Float32Array(finalNormals), 3))
    newGeometry.index = new BufferAttribute(new Uint16Array(finalIndices), 1)
    this.mesh.geometry = newGeometry
    return this.mesh.clone()

loader.ts를 위와 같이 수정해서 mesh도 그 안의 geometry도 복사해서 구분해주어야한다

 

포지션을 위로 올렸는데 공중에서 잘린다

이건 PBD코드상 collision에 바닥을 설정해놓은 것이 문제인 것 같다

 

해당 부분을 찾아 수정해보자 

그 전에 계속 시뮬레이션 되는게 거슬리니까 정지 기능을 좀 만들어야겠다

정지 기능 구현하기

async function animate() {
  await requestAnimationFrame(animate)

  //#region simulation
  if(!stateStop) physicsSimulation()
  //#endregion

  if (resizeRendererToDisplaySize(renderer)) {
    const canvas = renderer.domElement
    camera.aspect = canvas.clientWidth / canvas.clientHeight
    camera.updateProjectionMatrix()
  }

  cameraControls.update()

  renderer.render(scene, camera)

}

// toggle stop simulation
document.addEventListener("keydown", function(event){
  if(event.key == ' '){
    stateStop = !stateStop
    console.log(stateStop)
  }
},false)

애니메이션을 통째로 중단하기보다는 연산이 많아지는 simulation만 state를 사용해서 중단하자 

나중에 모델 편집 기능 같은게 들어가게 되면 이 state에 대해서 FSM(유한상태기계)구조를 짜게 될 것 같다 

 

CAD기능 구상하기

simulation에서 나아가서 cloth를 재단하는 CAD관련 기능을 구상해보자

일단 절단 및 재봉기능을 만들고 싶다

 

시뮬레이션이 정지된상태에서 옷을 자르는 기능을 먼저 구현해보도록 하자 

 

위 CLO 영상처럼 원단 상태로 자르는 방법은 모델을 원단부터 출발해야할 것 같다

현재 모델 상태에서 원단으로 projection하는 것은 적절하지 않는 것 같고 모델 상태에서 자를 수 있도록 테스트씬을 만들어보자