- https://ar-js-org.github.io/AR.js/
- https://github.com/AR-js-org/AR.js/blob/master/three.js/examples/nft.html
- https://ar-js-org.github.io/AR.js-Docs/
- gltf 이미지 파일 구할 수 있는 곳 : https://sketchfab.com/3d-models/camera-limits-demo-van-gogh-bedroom-in-arles-daefab319a584e559443e39ff05e84fa
- https://webdoli.tistory.com/111
- https://stemkoski.github.io/AR-Examples/
- https://stemkoski.github.io/AR.js-examples/index.html
- https://ko.dupliceopportunita.com/item/web-powered-augmented-reality-a-hands-on-tutorial-7933fe/
- https://github.com/jeeliz/jeelizAR#neural-network-models
- https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html
- https://riptutorial.com/ko/aframe
- https://you-rang.tistory.com/149
AR 유형
AR.js는 웹에서 다음 유형의 증강 현실을 제공합니다.
image Tracking
이미지 추적 카메라에서 2D 이미지를 찾으면 그 위에 또는 근처에 어떤 종류의 컨텐츠를 표시할 수 있습니다.
내용은 2D 이미지, GIF, 3D 모델(애니메이션) 및 2D 비디오 일 수도 있습니다.
사용 사례 : 증강 예술, 학습(증강 도서), 증강 전단지, 광고 등
Location Based AR
위치기반 AR인 이러한 종류의 AR은 실제 장소를 사용하여 증강 현실 컨텐츠를 사용자 장치에 표시합니다.
이 라이브러리로 구축할 수 있는 경험은 실제 사용자 위치를 사용하는 경험입니다.
사용자는 (이상적으로 실외로) 이동할 수 있으며 스마트폰을 통해 실제 장소의 AR 콘텐츠를 볼 수 있습니다.
휴대 전화를 움직이거나 회전하면 사용자의 위치와 회전에 따라 AR 컨텐츠가 변경됩니다(따라서 장소는 실제 위치에서 ‘고정’되어 사용자와의 거리에 따라 더 크거나 더 얇게 나타납니다).
이 솔루션을 사용하면 여행 가이드를 위한 대화식 지원, 새로운 도시를 탐험할 때 지원, 건물, 박물과, 식당, 호텔 등과 같은 관심있는 장소를 찾는 등의 경험을 구축할 수 있습니다.
보물 찾기 및 생물학 또는 역사 학습 게임과 같은 학습 경험을 구축하거나 이 기술을 위치 지정 예술(특정 실제 좌표와 연계된 시각 예술 경험)에 사용할 수도 있습니다.
Marker Tracking
마커 추적, 카메라에서 마커를 발견하면 일부 이미지(이미지 추적과 동일)를 표시할 수 있습니다.
마커는 매우 안정적이지만 모양, 색상 및 크기가 제한됩니다.
내용이 다른 다양한 마커가 필요한 경험에 권장됩니다.
사용 예 : (증강 도서), 증강 전단지, 광고
키 포인트
- 매우 빠름 : 휴대폰에서도 효율적으로 실행
- 웹 기반 : 순수한 웹 솔루션이므로 설치할 필요가 없습니다. three.js + A-Frame + jsartoolkit5 기반의 완전한 자바 스크립트
- 오픈 소스 : 완전 오픈 소스이며 무료입니다!
- 표준 : webgl 및 webrtc가있는 모든 전화에서 작동합니다.
- AR.js가 버전 3에 도달했습니다. https://github.com/AR-js-org/AR.js의 공식 저장소입니다. 이전 AR.js 저장소를 방문하려면 여기 (https://github.com/jeromeetienne/AR.js)가 있습니다.
라이브러리 가져오기
버전 3의 AR.js는 새로운 구조를 갖습니다.
AR.js는 서로 다른 두 가지 빌드로 제공됩니다. 둘 다 유지됩니다. 그들은 독점적입니다.
가져 오려는 파일은 원하는 기능과 사용할 렌더링 라이브러리 (A-Frame 또는 three.js)에 따라 다릅니다.
AR.js는 jsartoolkit5를 사용하여 추적하지만 three.js 또는 A-Frame을 사용하여 기능 보강 된 컨텐츠를 표시 할 수 있습니다.
HTML의 <script> 태그를 사용하여 선택한 버전 중 하나에서 AR.js를 가져올 수 있습니다.