플레이더월드 웹 AR 구현 회고록 1부
빰빰맨의 웹 AR 고군분투기
“빰빰맨, AR 만들 수 있지?”
“넵”
6월쯤 대표님은 몇 가지 레퍼런스를 보여줬고, OpenGL을 학부 수업에서 공부하고 WebGL과 Three.js를 공부하고 있었던 나는 ‘어? 할만해 보이는데?’라고 생각했다.
그 때는 “넵..”, “네…” 혹은 “아 네….” 라고 대답해야 했었다.
몰랐다. 이걸로 여름부터 가을이 올 때까지 고생하게 될 줄 말이다.
플레이더월드는 앱을 설치하지 않아도 웹에서 손쉽게 누구든지 플레이할 수 있게 한다는 기조를 갖고 있기 때문에 웹으로 구현하는 것이 목표였다. 쉽게 말해, 자바스크립트로 증강현실을 구현하면 되는 것이었다.
이번 글에서는 플레이더월드에 증강현실 기능을 붙이기까지 고민했던 내용을 담았다.
1. 레퍼런스
오픈소스로 열려있는 프로젝트 중 자바스크립트로 구현할 수 있는 증강현실과 관련한 메이저 프로젝트의 목록은 다음과 같다.
1) AR.js : https://github.com/jeromeetienne/AR.js
2) React-Web-AR : https://github.com/nitin42/React-Web-AR
3) argon.js : https://github.com/argonjs/argon
와! 샌즈!!! 간단하게 카메라 위에 물체가 떠오른다!
다 좋았다. 정말, 다 좋았는데, 상기한 프로젝트는 물체를 하단의 QR코드도 아니고, 그림도 아닌, 흰바탕에 검은 테두리가 반드시 존재하는 특정 이미지 위에만 올릴 수 있는 것이었다. 그래서 물어봤다.
“대표님, 이거, 이거 보면요, (이미지 코드를 가리키며) QR코드 같은 이 그림 위에 지금 이 오브젝트가 올라가잖아요? 저희 AR 올리는 거도 바코드 위에 올리면 되나요?”
“아니. 여기 말고 현장에 벽화같은게 있는데 그 위에다 올려야 돼.”
“어… 안될 것 같은데… 현장에 바코드 하나 붙여놓는걸로 바꾸면 안되나요?”
대표님의 의지는 확고했다.
그러니까, 요구사항을 정리해보면 다음과 같았다.
1) 브라우저 상에서 카메라를 연다.
2) 해당 카메라로 특정 물체를 찾아서 검출한다.
3) 검출한 물체위에 그래픽 오브젝트를 띄운다.
4) 그래픽 오브젝트는 검출한 물체와 카메라와의 거리를 계산하여 크기가 동적으로 변해야 한다.
레퍼런스가 되었던 메이저프로젝트들은 2번 요구사항이었던 특정 물체 검출에 대해 ‘바코드’라는 제약사항이 걸려있었다. ‘아! 그렇다면 특정 물체를 검출하는 것은 다른 스크립트에 시키고, Object를 띄우는 것만 AR.js 같은 애들이 해주면 되지 않을까?’
최근의 물체 검출 방식은 단연 딥 러닝을 활용한 방식이 대세였고, 이는 최근 자바스크립트로도 구현 연구가 되고 있는 Tensorflow로 할 수 있는 방식이었다. 짧은 시간안에 딥러닝 모델을 만들어서 프로덕트를 만드는 것은 좋은 방식은 아니라 생각했기에 멀리가지 않고, OpenCV로도 할 수 있을 것이라 생각했다. OpenCV라면 OpenCV.js라는 오피셜 Javascript 프로젝트를 활용할 수 있었고, OpenCV.js에 기반을 두고 있는 Tracking.js 같은 더 쉬운 오픈소스를 써먹을 수도 있었다.
종합하면, 특정 오브젝트 검출은 컴퓨터비전 프로젝트로 하고, 그래픽 오브젝트는 WebGL로 띄우면 되는 것이라 생각했다.
그 당시에는 꽤 획기적인 아이디어 라고 생각했었다. 미천한 지식에 1달이 꼬박 넘어가는 시간 동안 공부하고 삽질만 했던 지난 날들이 기다리고 있었지만 말이다.
2. 삽질기
1) 먼저 바코드 없는 AR, 포켓몬고 처럼 바닥에 띄우는 AR을 먼저 구현해보고 싶었다.
구글은 갓글이다. 구글은 핸즈온랩을 준비해두었다.
오늘날 moblie device based AR기술은 iOS기반 ARkit과 Android기반 ARCore 기술로 양분되어 있는데 구글의 핸즈온랩의 경우 ARCore를 활용하면 따라하는 것이 가능했다. ARCore는 iOS도 지원하고 있었기에, 소비자에게 있어 아주 불친절하지만, ARCore 설치를 강요하면 실제 프로덕트로도 구현할 수 있지 않을까 했다.
다만…
WebXR이라는 차세대 기술을 모바일 크롬에서 지원하고 있는데, 이 설정사항은 유저가 브라우저에서 직접 바꿔줘야만 실행이 가능한 내용이었으므로 결과적으로 이는 실제 활용이 불가능했다. ARCore가 문제가 아니었다. ‘브라우저 종속성’이 그래픽 프로젝트를 진행하고자 하는 우리에게 아주 큰 리스크로 작용한다는 것을 이때 알았다. 그리고 이는 우리가 유지해오던 방향과 기조에 있어서도 큰 변혁을 주기에 충분했다. (이 내용은 따로 후술 할 기회가 있을 때 하는 것으로…!)
2) 물체 검출
학부시절 컴퓨터비전을 공부해보지 못했다. 속성으로 OpenCV의 원리를 공부했다. 도움이 되었던 포스트 리스트는 다음과 같다.
• https://darkpgmr.tistory.com/70
이번 프로젝트동안 가장 유용했습니다. 감사합니다 다크프로그래머님.
• https://docs.opencv.org/3.4/db/d28/tutorial_cascade_classifier.html
회사에 큰 벽장이 있다. 해당 벽장으로 training할 수 있는 사진을 100장 쯤 찍고, 랜덤하게 변조를 줘서 1000장 쯤 되는 training image를 만들었다. 그리고 그 이미지들로 haar cascade model을 직접 만들어서 실험을 했다.
오 되는데요? 할 수 있겠는데?
실제 찍힌 표정이 실망한 표정이다.본인 방금 tracking 모델 성공적으로 만든 상상함 ㅎㅎ
물체 검출 Object tracking은 결과가 좋지 못했다. 아마도 배움이 부족했기 때문이라… 이 모델을 웹으로도 띄워봤는데, 결과는 비슷했다. 전혀 다른 내용을 책장으로 잡는 경우가 많았고, 주로 반듯한 직사각형 구조가 있는 경우 체감상 높은 확률로 잡는 것 같다. 웹에 띄우기 위해 활용된 패키지는 아래와 같다.
• https://github.com/eduardolundgren/tracking.js/
opencv 단계에서 결과가 박살나긴 했지만, 일단 웹에 띄워보려고 tracking.js라는 js 패키지를 활용했다.
• https://github.com/wildhaber/haar2tjs
tracking.js에 import할 haar classifier xml 파일을 컨버팅하기위해 활용한 js패키지이다.
3) ARToolKit
다시 메이저 레퍼런스로 돌아왔다. 이 프로젝트들은 어떻게 그래픽 프로젝트를 검출된 바코드 위에 올리는 걸까. 레퍼런스를 찬찬히 살펴보면, React-Web-AR 프로젝트는 AR.js를 기반으로 만들어졌고, AR.js와 argon.js는 artoolkit이라는 프로젝트에 그 뿌리를 두고 있다는 것을 알 수 있다는 것이었다. ARToolKit은 Unity개발자들에게 사랑받는 소프트웨어였다. ARToolKit는 C++로 개발된 소프트웨어이고, android, iOS버전을 제공하고 있었으며, 웹어셈블리의 태동과 함께 오픈소스로 개발되었던 jsartoolkit이라는 official 프로젝트가 있었다. 최종 커밋이 년단위인 것을 보면 관리가 안되는 오픈소스인 것으로 추정된다.
▼ artoolkit과 관련된 내용을 검색하던 중 해외 글을 발견할 수 있었다.
ARTollKit을 사용해 아이폰에서 NFT 실행해보기
유레카!
이를 JS로 구현할 수 있다면, 적어도 바코드가 아닌 이미지 위에 무언가 올리는 것은 가능하지 않을까?
그리고 실제 성공했었다!
2부에서 계속! :)
