Web AR

0. Ar을 해보자

웹, 모바일에서 Ar을 하기위해선 Ar.js, 바빌론, threejs, letsee등등 여러가지를 이용해서 Ar을 구현할 수 있다.

하지만 그중에 무료이면서 사람들이 많이 쓰고, 이미지 트래킹 할 수 있는 것들 중에 Ar.js를 선택했다.

개발자가 아니고 편하게 Ar을 하고싶다면 유료버전을 쓰는게 더 낫을것이다.

1. Ar.js

일단 예전에 qr코드나 마커로 Ar.js 써본적은 있어서 이미지를 마커로 사용할 수 있는지부터 살펴보았다.

이미지 트래킹으로 사용가능하다고 사이트에는 나오는데직접 해보자. 삽질을 좀 했다.

 

일단 Ar.js만 쓰면 안되고 Ar.js + Aframe.js 또는 Ar.js + three.js 둘 중에 선택해서 사용해야한다.

aframe, threejs 둘 다 사용했었지만 최근까지 꾸준히 썼던건 threejs라 threejs로 선택했다.

사이트에 Ar.js의 threejs 버전 데모와 git 링크가 있다.

(https://github.com/AR-js-org/AR.js/blob/master/three.js/examples/nft.html)

현재 2020년 10월에 참고한 소스인데 링크주소는 언제 바뀔지 모른다.

이 소스를 참고해서 로컬에 구현해보았다.

2. 수정사항

일단 경로를 나에게 맞게 소스상에서 수정해줘야한다. 필요한 스크립트들은 다 다운받아서 로컬에 넣어주었다. 업데이트시 어떤 오류가 발생할지 모르기때문에.

중간에 new THREEx.ArMarkerControls 이부분의 속성도 내 주소에 맞게 설정해주어야한다.

아래를 참고하면 소스 이해하는데 도움이 된다.

 

THREEx.ArToolkitSource: 웹캠, 비디오 또는 이미지 일 수 있습니다.

THREEx.ArToolkitContext: 메인 엔진입니다. 실제로 이미지 소스에서 마커 위치를 찾습니다.

THREEx.ArMarkerControls: 마커의 위치를 제어합니다 . 기존 three.js 제어 API를 사용합니다 . 마커 바로 위에 콘텐츠를 배치합니다.

 

여기서 중요하게 진행해야할 일이 있다.

이미지 마커로 인식하고싶은 사진을 찾고 그게 마커로 인식될 수 있도록 등록?해야한다.

 

https://carnaux.github.io/NFT-Marker-Creator/

NFt Marker Creator

위 사이트에서 사진을 업로드한다. 그리고 Generate 버튼을 클릭하면 좀있다가 파일이 다운로드된다. 다운로드되는 파일은 3개여야한다.

다운된 파일 3개를 THREEx.ArMarkerControls 속성에서 descriptorsUrl에 설정해준 폴더에 복붙한다.

 

예를들어

 

descriptorsUrl : '/test/media/obj/data/imgmarker'

 

이런식으로 설정해놨다면, /test/media/obj/data <- 폴더위치이고, imgmarker <- 3개 파일의 파일명이다. (확장자는 3개가 다 다르지만 파일명은 같아야한다. 다운될때 같은 파일명으로 다운되니까 그대로 쓰면 된다.)

 

마지막으로,

threeGLTFLoader.load 부분에서 오브젝트 올릴 파일의 위치 + 파일명.확장자 (예를들면 "/test/media/obj/Flamingo.glb")를 넣어주면된다.

 

새로고침을 제대로하고(캐시에 남아있다면 제대로 반영이 안된다.) 테스트 진행한다.

3. 테스트

나는 웹캠으로 진행했는데 핸드폰에서도 같은 결과를 낼 거라 예상한다.

카메라를 이미지마커로 지정한 이미지를 비춘다. 모니터에서 직접 비춰도되고, 이미지 출력해서 출력된 이미지를 카메라에 비춰도된다.

 

그러면 이미지 주변에 내가 올린 3D 오브젝트가 나타난다. 그러면 끝!!!!

4. 진행하면서 본 에러

크롬 콘솔에서 뭐 없다고 뜨면 깃에서 찾아서 내 로컬에 넣어주고 경로 맞춰주고 그러면서 에러 해결했다.

 

카메라가 화면에 나오긴하는데 이미지를 비춰도 반응이 없었다. 콘솔 여니 이런 에러가 났었다.

'Error in loading marker on Worker 404'

이미지 마커를 못찾는다는 얘기로, 위에처럼 진행하면 이 에러는 없어질것이다. (웹에서 이미지 올려서 파일 3개 받아가지고 경로 맞춰주고 뭐 이런거...)

 

파일 3개 받아서 넣었는데도 같은 에러가 뜬다면 첫번째로 제대로 새로고침이 되었는지 확인한다. (캐쉬에 안남아있는지)

두번째로 해당경로에 파일3개가 있는지, 경로가 정확한지, 경로 + 파일명으로 소스상에 넣어줬는지 확인한다.

5. 앞으로

앞으로 ply, obj의 오브젝트들이 뜨는지 확인해야한다. 주로 쓰는 오브젝트들의 확장자이기때문이다. 또한, 다수 ply, obj가 나타나는지도..

 

내가 사용한 이미지 마커의 이미지