구와 캡슐 14개로 토끼 빚기
토끼를 모델링 툴 없이 코드로만 만들기로 했으니, 쓸 수 있는 건 구와 캡슐 같은 프리미티브뿐이다. components/game/Rabbit.tsx에서 열네 개쯤을 쌓아 한 마리를 조립했다.
굳이 이 방식을 고른 이유가 있다.
외부 모델을 쓰면 내려받을 에셋이 생기고, 색이나 비례를 조금 바꾸려 해도 다시 툴로 돌아가야 한다.
코드로 빚으면 번들에 더해지는 건 숫자 몇 줄뿐이고, 털색이든 크기든 런타임에 그 자리에서 바꿀 수 있다.
나중에 털색 열한 가지와 액세서리 슬롯을 붙일 수 있었던 것도 결국 이 선택 덕이었다.
몸을 이루는 것들
비례부터 정했다.
머리를 몸통만큼 크게 잡은 2등신 치비 비례.
실제 치수로는 몸통이 반지름 0.34짜리 구이고 머리가 0.3이니, 둘이 거의 같은 크기다.
사실적인 토끼는 머리가 작지만, 귀여움은 머리가 클 때 나온다.
귀는 반지름 0.105·길이 0.34의 캡슐 두 개다.
바깥은 크림색이고, 그 안에 한 겹 작은 분홍 캡슐을 넣어 속귀를 만들었다.
눈은 반지름 0.06짜리 구.
여기에 분홍 볼터치와 눈 하이라이트를 얹었다 — 이 세 개가 "살아 있는 인상"의 거의 전부였다.
빼면 곧장 무생물처럼 보였다.
머리와 귀와 얼굴은 전부 하나의 그룹으로 묶었다.
그래야 "돌아보기" 모션에서 머리만 따로 돌릴 수 있다.
몸통은 가만히 둔 채 고개만 뒤를 흘깃 보는 동작인데, 이게 생명감을 크게 키웠다.
윤곽선도 프리미티브로 해결했다.
몸통과 머리에 아주 살짝 큰 복제 메시를 씌우고 뒷면만 그리게 하면, 원본 실루엣을 감싸는 테두리만 남는다.
별도 후처리 없이 만화책 같은 선이 생긴다.
얼굴이 사라진 날
문제는 얼굴이 화면에서 통째로 사라진 적이 있다는 것이다.
코드로는 눈·코·볼터치 좌표를 다 넣었는데 렌더하면 민짜 얼굴이었다.
원인은 좌표가 머리 구 안쪽에 묻혀 있던 것.
머리 구의 반지름은 0.3인데 눈 중심까지 거리가 0.253이라, 눈이 구 표면 안에 잠겨 보이지 않았다.
{/* 머리 — 반지름 0.3 */}
<mesh material={fur}><sphereGeometry args={[0.3, 24, 18]} /></mesh>
{/* 눈 — 머리 표면에 살짝 박혀 돌출되도록 z를 -0.25까지 뺀다 */}
<mesh ref={eyeL} position={[-0.115, 0.07, -0.25]} material={dark}>
<sphereGeometry args={[0.045, 12, 12]} />
</mesh>
같은 함정을 세 번 밟았다
더 곤란한 건 이게 한 번으로 끝나지 않았다는 점이다.
나중에 꼬리를 붙였을 때도, 앞발을 다시 만들었을 때도, 목에 스카프를 둘렀을 때도 똑같은 증상이 나왔다.
전부 "좌표는 그럴듯한데 몸 안에 잠겨서 안 보임"이었다.
프리미티브를 쌓아 만드는 방식의 고질병이다.
부위 하나하나가 독립된 볼륨이라, 붙이려는 자리가 이웃 볼륨 안쪽이면 그냥 삼켜진다.
표면이라는 개념이 따로 없으니 경고도 없다.
결국 규칙으로 못 박았다.
머리 반지름은 0.3이고 얼굴은 -z 방향이다.
머리에 뭘 얹을 땐 중심에서 0.3보다 확실히 멀리, 얼굴에 붙일 땐 -z로 더 빼기.
액세서리를 새로 만들 때마다 이 숫자부터 확인한다.
숫자가 맞아도 화면은 틀릴 수 있다
수치만 보면 그럴듯해서 코드를 아무리 읽어도 안 보였다.
결국 스크린샷 게이트 — 매 단계 실제 렌더를 캡처해 눈으로 확인하는 절차 — 에서야 잡혔다.
부위 좌표를 표면 바깥으로 밀어 돌출시키니 얼굴이 돌아왔다.
이 종류의 버그는 타입 검사도 테스트도 못 잡는다.
값은 전부 유효한 숫자고 렌더도 에러 없이 끝나기 때문이다.
잘못된 건 오직 "보이느냐" 하나뿐이라, 결국 사람이 화면을 봐야 한다.
그래서 코스메틱을 추가할 때마다 시작 화면을 캡처해 확인하는 습관이 생겼다.
코드로 만든 값
불편을 감수한 대신 얻은 것도 분명하다.
털색은 hex 문자열 하나만 갈아끼우면 즉시 바뀌어서, 상점의 털색 열한 종이 이미지 한 장 없이 구현됐다.
머리·얼굴·목 슬롯에 장식을 끼우는 것도 같은 좌표계 위에 메시를 하나 더 얹는 일이라 확장이 쉬웠다.
모델 파일로 갔다면 색상 변형마다 텍스처를 따로 준비하고, 그만큼 용량을 더 내려받게 했을 것이다.
다음 편은 이 몸통에 움직임을 입히는 이야기다.