## 
Abstract — Augemented  Reality  (AR)  merupakan teknologi yang menggabungkan bedan maya 3D ke dalam dunia  nyata  dan  dalam  waktu  nyata.  Penelitian  ini menggunakan  teknologi  AR  ke  dalam  bentuk  media pembelajaran  pengenalan  hewan  unutk  anak-anak. Aplikasi  ini  dirancang  untuk  memudahkan  anak-anak dalam  mengenal  nama  dan  jenis  hewan.  AR  dapat menyajkan  pembelajaran  yang  interaktif,  karena  anak- anak tidak hanya belajar secara teori namun mereka juga dapat melihat objek  hewan secara 3D. Aplikasi ini  dibuat menggunakan  AFrame  Dari  hasil  pengujian  yang  telah dilakukan,  dapat  disimpulkan  bahwa  aplikasi  yang dibangun  mampu  menampilkan  semua  visualisasi  objek 3D sehingga dapat digunakan untuk media pembelajaran.
Kata Kunci — Augemented Reality, Media
Pembelajaran, Hewan.

## I. P ENDAHULUAN
elajar adalah  semua  aktivitas  yang  dilakukan seseorang sehingga menimbulkan perubahan tingkah  laku  berbeda  ketika  sebelum  dan  setelah belajar.  Pada  proses  belajar  mengajar  diharapkan terdapat  interaksi  yang  baik  antara  anak  dan  tenaga pendidik  atau  orang  tua.  Agar  penyampaian  materi dapat  lebih  menarik,  maka  metode  pengajaran  tidak hanya  dengan  menggunakan  alat  peraga  secara konvensional  tetapi  dapat  juga  menggunakan  teknologi komputer.  Dengan  mengikuti  perkembangan  teknologi informasi,  metode  pembelajaran  dapat  diubah  menjadi lebih  menarik  dan  interaktif.  Salah  satu  perkembangan media  pembelajaran  yang  saat  ini  masih  baru  adalah media  pembelajaran  dengan  menggunakan Augmented Reality . Augmented  Reality (AR)  merupakan  sebuah teknologi  yang  menggabungkan  benda  maya  tiga
1 Dimas  Wahyu  Wibowo.  Author  is  with  the  Information Technology  Majors  Malang  State  Polytechnic  ,  Malang,  Indonesia (corresponding author provide phone 0341-404424; email dimasw@polinema.ac..id )
2 Pramana  Yoga  Saputra.  Author  is  with  the  Information Technology  Majors  Malang  State  Polytechnic  ,  Malang,  Indonesia (corresponding author provide phone 0341-404424; email pramana.yoga@polinema.ac..id )
3 Eka  Larasati  Amalia.  Author  is  with  the  Information  Technology Majors Malang State Polytechnic , Malang, Indonesia (corresponding author provide phone
0341-404424;
email eka.larasati@polinema.ac..id )
4 Farida  Ulfa.  Author  is  with  the  Information  Technology  Majors Malang  State  Polytechnic  ,  Malang,  Indonesia  (corresponding  author provide phone 0341-404424; email farida.ulfa@polinema.ac..id )
dimensi ke dalam lingkungan nyata dan menampilkannya  dalam  waktu  nyata.  Dengan  adanya AR,  penyampaian  informasi  lebih  menarik  dan  nyata. Buku  yang  selama  ini  digunakan  sebagai  media pembelajaran  dapat  ditambah  fungsinya  dengan  media AR  yang  akan  menampilkan  animasi  3D  secara  nyata pada perangkat mobile phone.
Pada  penelitian  ini  dibuat  media  pembelajaran alternatif  baru  untuk  mengenalkan  objek  benda  kepada anak  yang  menggunakan  teknologi  AR.  Dengan menggabungkan  dunia  nyata  dan  dapat  merangsang imajinasi anak termotivasi untuk belajar.

## II. T INJAUAN P USTAKA
2.1 Augmented Reality Augmented  Reality (AR)  atau  juga  dikenal  dengan realitas tertambah adalah teknologi yang menggabungkan benda 2 atau 3 dimensi ke dalam waktu nyata ( real time ). Dengan adanya AR, lingkungan nyata di  sekeliling  kita  dapat  menjalankan  interaksi  dalam bentuk  digital  ( virtual ).  Teknologi  AR  banyak digunakan  pada  dunia  hiburan,  kedokteran,  militer, pendidikan,  dan  manufaktur.  Ada  beberapa  Metode yang dapat digunakan untuk menampilkan AR yaitu:
- Marker AR ( Marker Based Tracking ) Marker biasanya  merupakan  ilustrasi  hitam dan putih persegi dengan batas hitam tebal dan latar belakang putih. Komputer akan mengenali posisi  dan  orientasi  marker  dan  menciptakan dunia virtual 3D yaitu titik (0,0,0) dan 3 sumbu yaitu X,Y,dan Z.
Gambar. 1. Marker Augmented Reality
- Markerless AR
Dengan  menggunakan  metode  ini,  pengguna tidak perlu menggunakan sebuah marker untuk menampilkan objek digital.

## Penerapan Library AR.JS untuk Pembuatan Augmented Reality Sebagai Media Pembelajaran Pengenalan Hewan
Dimas Wahyu Wibowo, Pramana Yoga Saputra, Eka Larasati Amalia, dan Farida Ulfa
B
- GPS Based Tracking
Dengan  memanfaatkan  fitur  GPS  dan  kompas yang  ada  didalam  smartphone,  aplikasi  akan mengambil  data  dari  GPS  dan  kompas kemudian menampilkannya dalam bentuk arah yang kita inginkan secara realtime, bahkan ada beberapa aplikasi
menampikannya dalam  bentuk 3D.

## 2.2 WebGL ( Web Graphics Library )
WebGL  adalah  teknologi  web  yang  dapat menampilkan  grafis  3D  ke  dalam  browser  tanpa memasang  perangkat  lunak  tambahan.  Web  GL  dapat digunakan  untuk  membuat  game, Virtual  Reality dan Augmented  Reality .  Khronos  Group  merilis  spesifikasi WebGL 1.0 yang telah dikembangkan dan diuji. Dalam prakteknya,  WebGL  1.0  mengkompilasi  javascript  dari OpenGL  ES  2.0  API.  API  berfungsi  untuk  mengatur buffer  vertex dan  indeks,  untuk  mengubah  kondisi rendering seperti  textur  atau  mengubah  matriks,  dan untuk memanggil gambar sederhana.
WebGL  merupakan  standar  baru  untuk  grafis  3D di Web. Dengan WebGL, pengembang dapat memanfaatkan  kemampuan  penuh  dari  hardware  grafis dalam  merender  pada  komputer  hanya  menggunakan Javascript, web  browser ,  dan  web  standar  teknologi yang  cukup.  Sebelum  adanya  WebGL,  pengembang harus  selalu  bergantung  pada  plug-in  atau  aplikasi bawaan  dan  meminta  penggunanya  untuk  men- download  dan  menginstal  perangkat  lunak  secara kustom  untuk  memberikan  pengalaman  3D  yang sesungguhnya. WebGL merupakan bagian dari keluarga teknologi HTML5. WebGL menjadi komponen penting dalam  perangkaian  mengubah  peramban  modern menjadi platform aplikasi dikelasnya.

## 2.3 3D Graphic
Grafik  komputer  3  dimensi  biasa  disebut  3D  atau adalah bentuk dari benda yang memiliki panjang, lebar, dan  tinggi.  Grafik  3  Dimensi  merupakan  teknik penggambaran  yg  berpatokan  pada  titik  koordinat sumbu  x(datar),  sumbu  y(tegak),  dan  sumbu  z(miring). Representasi  dari  data  geometrik  3  dimensi  sebagai hasil  dari  pemrosesan  dan  pemberian  efek  cahaya terhadap  grafika  komputer  2D.  Tiga  Dimensi,  biasanya digunakan  dalam  penanganan  grafis.  3D  secara  umum merujuk pada kemampuan dari  sebuah  video card. Saat ini  video  card  menggunakan  variasi  dari  instruksi- instruksi  yang ditanamkan dalam video card itu  sendiri (bukan  berasal  dari  software)  untuk  mencapai  hasil grafik  yang  lebih  realistis  dalam  memainkan  game komputer.  Grafik  3D  merupakan  perkembangan  dari grafik  2D.  Di  dalam  grafika  komputer,  3D  merupakan bentuk  grafik  yang  menggunakan  representasi  data geometri tiga dimensi.

## 2.4 A-FRAME
A-Frame adalah teknologi baru dari Mozilla, yang memungkinkan  Anda  untuk  membuat  pengalaman  3D, Virtual  Reality , Augmented  Reality dan  hanya  dengan beberapa  tag  HTML. A-Frame Ini  dibangun  di  atas WebGL,  Three.js,  dan  beberapa  Elemen  Khusus,  yang
bagian  dari  standar  Komponen  HTML.  Khususnya Untuk  pengembangan Augmented  Reality  Jerome Etienne membuat  sebuah library  javascript dengan nama ar.js untuk mempermudah pembuatan Augmented reality .  Untuk  format  objek  yang  digunakan  atau support dengan library ar.js  ini  antara  lain  :  glTF  2.0 and glTF, OBJ, COLLADA.
2.5 glTF ( GL Transmission Format ) glTF ( GL  Transmission  Format )  merupakan format  file  untuk  model  3D  menggunakan  standar JSON.  Dikembangkan  oleh  Khronos  Group.  Oleh pengembangnya  dideskripsikan  sebagai  “JPEG  nya 3D”.  Pertama  kali  dikenalkan  pada  HTML5DevConf pada tahun 2016. Tujuan dikembangkannya glTF adalah untuk  menyediakan  sebuah  format  3D  yang  efisien, bersifat interoperable untuk  proses delivery nya,  yang mampu mengompres ukuran 3D scene dan meminimasi proses  runtime  pada  aplikasi  dengan  menggunakan WebGL dan API lain.
glTF  dapat  dimuat  pada open  source  WebGL engines ,  termasuk    Three.js,  BabylonJS,  Cesium,  PEX, xeogl, dan A-Frame. Konverter open source untuk glTF yang  tersedia  antara  lain  COLLADA,  FBX,  dan  OBJ. Untuk  ekspor  dan  impor  glTF  dapat  menggunakan Assimp.  glTF  bisa  secara  langsung  diekspor  dari aplikasi  editor  3D  seperti  Blender,  Autodesk  3ds  Max, Autodesk Maya, Modo, Microsoft Paint 3D. Untuk open source glTF utility libraries dapat diprogram menggunakan  bahasa  JavaScript,  Node.js,  C++,  C#, Java,  Go,  Rust,  Haxe,  Ada,  dan  TypeScript.  Daftar lengkap  dari  ekosistem  glTF  dikelola  di  glTF  GitHub repo.

## III. M ETODE P ENELITIAN

## 3.1 Analisa Kebutuhan
Tahap  ini  menganalisis  kebutuhan  apa  saja  yang akan  diperlukan  dalam  pembuatan  aplikasi  AR. Sehingga  aplikasi  AR  ini  nantinya  dapat  dijadikan sebagai  alternatif  belajar  untuk  siswa  dalam  membantu memahami materi tentang pengenalan hewan.

## 3.2 Pengumpulan Data
Tahap  ini  mengumpulkan  data  atau  materi  yang dijadikan  sebagai  acuan  pembuatan  aplikasi.  Untuk objek  kami  mengambil  dari  https://sketchfab.com/  dan data  objek  berextensi  .gltf  (GL  Transmission  Format). Untuk data yang digunakan menggunakan model 3D.

## 3.3 Uji coba dan implementasi
Pada  tahap  ini  akan  dilakukan  implementasi  dan uji  coba.  Untuk  proses  uji  coba  kami  menggunakan  13 contoh  hewan  antara  lain  burung  hantu,  lebah,  bebek, kura-kura,  macan,  burung  toucan,  buaya,  rabbit,  paus biru, kepiting, gajah, panda dan jerapah. Dimana objek- objek  tersebut  dalam  bentuk  3D  dan  dengan  extensi .glTF. Selain uji coba  menggunakan objek, peniliti pun melakukan  uji  coba  pembuatan  marker  dan  pengenalan marker sehingga objek dapat tampil pada web browser.

## IV. I MPLEMENTASI D AN U JI C OBA
Pada implementasi dan uji coba ini akan dilakukan antara  lain  :  pembuatan  marker  dan  pattern, menampilkan  objek  ke  marker  dan  mengatur  ukuran objek agar tidak tampil terlalu  besar. Untuk pembuatan aplikasi  ini  menggunakan  media  browser  untuk menampilkan  objek  3D,  bahasa  pemograman  yang digunakan  HTML  dan  membutuhkan  sebuah  library untuk mengenali marker yang telah dibuat.

## 4.1 Pembuatan Marker
Dalam  tahap  pembuatan  marker  dan  pattern dengan objek yang berbeda-beda sehingga menghasilkan marker dan  pattern  yang  berbeda-beda. Untuk  pembuatan marker menggunakan  AR.Js Marker training dengan  cara  mengunggah image yang  akan dijadikan  sebagai marker .  Beberapa  contoh  hasil  dari pembuatan  marker  dengan  menggunakan  ar.js marker training seperti pada Tabel 1.
TABLE I C ONTOH H ASIL DARI A R .J S MARKER TRAINING

## 4.2 Menampilkan Objek ke Marker
Jika marker berhasil  dibuat  oleh  Ar.js marker training maka  selanjutnya  adalah  mengunduh pattern yang  telah  disediakan. Pattern tersebut  merupakan pattern hasil  dari image yang  telah  diunggah sebelumnya  yang  juga  menghasilkan marker .  Pada Gambar  3  merupakan  contoh  hasil  pattern  yang dihasilkan oleh ar.js marker generator .
Gambar 2. Pattern yang dihasilkan ar.js marker generator
Pattern ini yang nanti digunakan untuk mengenali marker yang ditangkap oleh kamera. Sehingga pada saat marker ditangkap  oleh  kamera  maka  sistem  akan menyesuaikan  dengan pattern yang  telah  dibuat  dan diset  dalam  kode.  Jika  sistem  berhasil  menyesuaikan pattern yang  telah  dibuat  dan  diset  dengan marker -nya maka  pada marker akan  menampilkan  objek  yang dimaksud.  Objek  akan  ditampilkan  pada  halaman browser.  Untuk  hasil  dari  objeknya  dan marker yang digunakan seperti pada tabel 2..
TABLE II H ASIL A UGMENTED R EALITY Marker
Hasil

## 4.3 Mengatur Ukuran Objek
Pada  saat  pengujian  ada  beberapa  objek  hewan yang harus diatur dikarenakan objek yang tampil terlalu besar  dan  terlalu  kecil.  Untuk  mengatur  ukuran  objek maka  pada  kode  ditambahkan  skala  dengan  sumbu  x  y z.  Berikut  ini  tabel  skala  yang  digunakan  dalam penelitian ini.
Gambar Asli Hasil Marker
TABLE III S KALA U KURAN O BJEK
No Objek Hewan Skala X Y Z 1 Owl 10 10 10 2 Bee 0.09 0.09 0.09 3 Turtle 0.01 0.01 0.01 4 Tiger 0.01 0.01 0.01 5 Toucan Bird 0.01 0.01 0.01 6 Crocodile -1 1 1 7 Duck 10 10 10 8 Rabbit 0.02 0.02 0.02 9 Blue Whale 0.5 0.5 0.5 10 Crab 0.5 0.5 0.5 11 Elephant 0.3 0.3 0.3 12 Panda 0.3 0.3 0.3 13 Giraffe 0.4 0.4 0.4
Setelah  mengatur  skala  yang  digunakan  maka selanjutnya  mengatur  posisi  x  y  z  sehingga  objek  yang akan  tampil  dengan  penanda  sebuah box pada marker . Pada  penelitian  ini  kamera  yang  bergerak  akan menangkap kotak sebagai penanda dengan  asumsi  nilai x=0 , y =0.5 dan z =0.

## V. K ESIMPULAN
Berdasarkan hasil implementasi dan uji coba maka peneliti mendapatkan beberapa kesimpulan antara lain:
1. Untuk  beberapa  objek  harus  diatur  ukurannya menggunakan scale dengan  asumsi  posisi  box sebagai penanda adalah x=0, y=0.5 dan z=0
2. Libary  yang  digunakan  dapat  menampilkan objek dalam bentuk 3D dan berextensi .glTF
3. Objek dapat ditampilkan dihalaman web browser mozila firefox versi 63.03 (64 bit)
Dengan  kesimpulan  diatas,  aplikasi  ini  nantinya dapat digunakan untuk  media pembelajaran pengenalan objek  hewan  dan  dimana  media  pembelajaran augmented reality ini dapat di akses menggunakan web browser .

## P ENGAKUAN
Kami  ingin  mengucapkan  terima  kasih  kepada Politeknik  Negeri  Malang  dan  Kantor  Pusat  Penelitian (P2M) yang telah mendukung proyek penelitian ini

## R EFERENCES
[1]  Pembangunan Peta Kampus 3D Universitas Komputer Indonesia
Berbasis Komputer. Jurnal Ilmiah     Komputer & Informatika
[2] Teguh, Kurniawan, Augmented Reality Sebagai Metafora Baru dalam Teknologi Interaksi Manusia dan Komputer, Jurnal Sistem
Komputer, Vol 3 No 2, 2011
[3] Medium, ‘arjs’, 'Augmenting The Web Page’,17 April 2017, < https://medium.com/arjs/augmenting-the-web-page e893f2d199b8 >[accessed on 12 Novermber 2018] [4] Medium,’arjs’,’How Create to you own marker?’,7 Juni 2017, < https://medium.com/arjs/how-to-create-your-own-marker 44becbec1105 > [accessed on 15 Novermber 2018] [5] Khronos, ‘glTF’,’glTF Overview’, < https://www.khronos.org/gltf/ > [accessed on 20 November 2018]
[6]  Tobias  Blum,  et  al.  2012.  An  augmented  reality  magic  mirror system  for  anatomy  education.  Institute  of  Electrical  and Electronics Engineers Virtual Reality
[7]  Tigala  Maijarern,  et  al.  2018.  Augmented  realityb  for  science instructional  media  in  primary  school.  International Conference on Digital Arts, Media and Technology
[8]  Kurniawan  Teguh  dkk.  2017. Design  of  learning  media  for  fish classification with augmented reality technology. International  Conference  on  Information  Technology, Computer, and Electrical Engineering (ICITACEE)