Augmented Reality (AR)

Augmented Reality (AR) atau realitas tertambah adalah penyematan informasi dari dunia digital ke dunia nyata ke obyek di dunia nyata.

Web AR

Web AR adalah implementasi AR pada web.

Teknologi pendukung

• A-Frame: Pustaka untuk melakukan rendering 3D pada web yang mengikuti aturan tag html. sumber: https://aframe.io/
• WebAR: Pustaka untuk menangkap dunia nyata melalui kamera dan pemindaian penanda pada dunia nyata. AR.js mendukung penggunaan NFT dan marker. sumber: https://github.com/AR-js-org/AR.js

Marker

• Marker AR dimanfaatkan untuk mendeteksi posisi di dunia nyata. Marker dapat diakses pada direktori marker. Contoh marker hiro yang dipakaia adalah sebagai berikut:

Materi

Materi dibagi dalam 12 bagian, yaitu:

1. AR Hello World (and AR Camera)

• ar0101-hello-world
• ar0102-marker-camera
• ar0103-aframe
• ar0104-disable-vr-button

2. AR Primitive Object

• ar0201-primitive-objects-2D
• ar0202-primitive-objects-3D
• ar0203-objects-stacking
• ar0204-primitive-a-text
• ar0205-primitive-a-assets
• ar0206-primitive-a-image
• ar0207-primitive-a-video
• ar0208-animation

3. AR 3D Model

• ar0301-3d-model-gltf
• ar0302-3d-model-gltf-a-entity
• ar0303-3d-model-gltf-a-assets

4. AR Marker

• ar0401-marker-preset
• ar0402-marker-barcode
• ar0403-marker-custom

5. AR Multiple Marker

• ar0501-marker-multiple

6. AR Image Tracking (NFT) | Create NFT Marker

• ar0601-ar-nft | NFT marker
• ar0602-ar-nft | NFT marker
• ar0603-ar-nft | NFT marker
• ar0604-ar-nft | NFT marker

7. AR Location Based

• ar0701-ar-location

8. AR UI

• ar0801-ui-aframe
• ar0802-ui-aframe-interactive
• ar0803-ui-dom
• ar0804-ui-dom-button

9. AR Marker Event with Javascript

• ar0901-event-marker-found
• ar0902-event-marker-lost
• ar0903-event-marker-found-and-lost
• ar0904-ar-event-marker-multiple

10. AR Create Object with Javascript

• ar1001-js-create-object-for-marker
• ar1002-js-create-object-and-marker
• ar1003-js-create-object-for-multiple-marker
• ar1004-js-create-multiple-object-marker

11. AR Dynamic Content from Array with Javascript

• ar1101-dynamic-content-array

12. AR Dynamic Content from JSON (or Web Service) with Javascript

• ar1201-dynamic-content-json
• ar1202-dynamic-content-json-template-literal