Three.js 카툰 렌더링 코드 겟! by AI

요새 회사에서 게임 서비스 출시와 큰 연동 작업 2개를 동시에 하려니 엄청 바빠서 이제야 소식 올려드리네요.
게임명은 비공개입니다 ㅎ
뭐 저는 서버 백앤드 파트라서 DB와 게임 연동 API를 전반을 작업하는 롤을 맡습니다만
사이드 프로젝트를 하지 않으면 감각이 떨어지는 듯 해서 AI를 이용한 기술 연구도 병행하긴 합니다.

최근 AI를 통해 얻은 기술이 있는데요.

아래 보시는 모델은 3D인데 분명한 외곽선을 가지고 있습니다.
바로 '카툰 렌더링' 덕분인데요.

과거에는 웹에서 이걸 어떻게 구현할지 이리 찾아보고 저리 찾아봐도 도무지 답이 나오지 않았었는데
이제는 AI를 통해 기술을 알아낼 수 있게 되었습니다.

먼저 3D 모델을 구해야 겠지요?
요새는 AI로 이미지도 만들고 3D 모델도 만들수 있기 때문에 AI로 쉽게 만들 수 있는데요.
먼저 아래와 같은 이미지를 준비하고,

Fast3d.io 사이트에 가서 이미지를 업로드하여 3D모델을 뽑아내었습니다.
퀄리티는 떨어지긴 하지만 무료로 쓸수가 있거든요.

여담으로 Meshy ai 를 유료로 사용할 경우 퀄리티가 꽤 높습니다. 아래가 화면 캡쳐인데요.
무료 사용자는 이 퀄리티로 생성은 되지만 다운로드는 안됩니다.
물론 3D 모델러분이 한땀 한땀 만든 것에 비하면 비교할 바는 안되긴 하지만요.

언제 기회가 되면 유료 구독해서 사용해볼 생각도 들더라구요 ㅎ

이 캐릭터를 three.js 로 불러오면 기본적으로 아래와 같습니다.
만화의 경계선과 같은 것은 보이지 않는데요.

AI에게 카툰 렌더링에 대한 부분을 요청해서 우여곡절 끝에 소스코드를 얻어 내었습니다.
좀처럼 쉽게 되지는 않더라구요 ㅎ
AI가 작성한 코드를 완성물만 보고 잘 되네~ 넘어가면 내꺼로 소화되지 않기에 코드를 좀 들여다 보아 70% 정도는 코드 이해한 것 같습니다. 나중에 실제로 사용한다면 더 집중해서 봐야겠지요.
아래는 URL과 결과물입니다.

https://drlee7-cray.github.io/cartoon-render/

소스코드는 GIT HUB 에 올려두었습니다.

https://github.com/drlee7-cray/cartoon-render

필요하신 분에게 도움이 되시길 바라며~

---

말씀 한구절 전해드립니다. 이스라엘은 하나님의 언약 백성입니다.
아직 예수님을 받아들이지 않는 유대인이 많다고는 하지만 비록 그렇다고 하더라도
하나님의 축복의 말씀은 여전히 효력이 있습니다.

예루살렘을 위하여 평안을 구하라 예루살렘을 사랑하는 자는 형통하리로다
- 시편 122:6 -