개요
학교에서 일부 인원과 함께 진행했던 NFT 커뮤니티 프로젝트인 Moyodao 프로젝트입니다.
학교에서 진행하는 NFT 관련 게시글
NFT기반의 학내 창작자 커뮤니티 활성화를 위해 Meta Character Generator라는 툴을 만들고 있습니다. Facebook
메타 캐릭터 렌더링
저는 해당 프로젝트에서 메타 캐릭터를 카드 형식으로 보여지는 렌더러를 담당했습니다.
렌더러 프로토타입은 제가 개발했던 자체 엔진을 통해 진행하였습니다.
자체엔진의 렌더러 관련 게시글
POC로 잡은 짧은 방학기간동안 학생들과 함께 Web3.0과 WebGL기술을 정리하고 있습니다. Facebook
해당 프로젝트 덕분에 제 엔진을 웹으로 포팅해보는 작업을 주로 진행하였습니다. 그렇기에 해당 글에선 웹 포팅과 무엇을 주로 구현했는지를 간단하게 설명합니다.
웹 포팅은 쉽지 않았다
많은 모바일 디바이스에서 렌더링 에러 확인으로 고생했던 기억이 있습니다.
WebGL은 사용 가능한 플랫폼 범위가 넓어서 그런지 최소한의 스펙을 무조건 지켜야 멀쩡한 렌더링이 가능했었습니다.
게다가 emscripten을 통해 웹 어셈블리로 구현되어서 디버깅에도 좀 애먹었던 기억이 있습니다.
계속 삽질하다보니 점차 안정적으로 돌아가는 디바이스가 많아졌습니다.
하지만 무작정 고치다보니 얼추 에러가 사라지면서 렌더링이 가능한 디바이스가 많아졌고 어느정도 안정화가 되니 glGetError를 통해 발생하는 경고문구도 많이 사라졌습니다.
C++ 엔진과 js간의 상호작용
emscripten에서 제공하는 Fetch API 문서 링크
emscripten에서 제공하는 네이티브 C++과 js간 연동 라이브러리를 추가하여 js 함수로 이미지 파일을 전달하면 게임 오브젝트의 관련 컴포넌트가 해당 이미지를 비동기 형식으로 다운로드 하는 것을 구현하였습니다.
신기하게도 웹 어셈블리로 작동하는 C++ 프로젝트는 브라우저와 다른 CORS 헤더를 가지고 있어 같은 도메인임에도 이미지가 차단되는 현상이 있었습니다.
이 이외에도 마우스 같은 외부 입력에 대한 이벤트도 따로 처리하였습니다.