## AUGMENTED REALITY VISUALISASI ANIMASI GAMBAR PADA BAJU DENGAN METODE MARKER-BASED
Kharis Muqowam 1) , Jati Sasongko Wibowo 2)
12 Teknik Informatika, Unisbank Semarang
12 Jalan Tri Lomba Juang Semarang Email: 1 kharisgreat@gmail.com, 2 jati@unisbank.ac.id

## Abstract
Screen printing on clothes so far has only  been limited to image designs that are printed and attached to  clothes, but there  are  also  people  who  understand  the  art  of  an  image  and  think  that  screen  printing  on  clothes  also  has  artistic value based on the complexity of the design. Their work is not only underestimated by  consumers, so they try to make their screen printing results as close as possible and even exceed the expectations of consumers, because of that many screen printing at this time innovate in  various ways to be able to make their screen printing results unique and more attractive. attracting consumer interest,  one of which is taking advantage  of current technological developments, with AR technology now screen printing results are not only limited to images that only stick to clothes, but a work can turn into  something  new  and  unique  with  AR  technology.  The  development  method  used  in  making  this  application  is Prototype whose stages consist of Listen to Customer, Build and Revise  Mock-up, Customer Test Drives Mock-up. The system design method uses design tools such as Use Case Diagrams, Activity Diagrams, Sequence Diagrams. The result of  the  research  is  the  application  of AR  animated  images  on  clothes  using  Augmented  Reality  technology  to  increase consumer interest in buying clothes
Keyword: Augmented Reality, Marker Based, Screen Printing, Animation, Prototype

## Abstrak
Sablon  pada  baju  selama  ini  hanya  sebatas  desain  gambar  yang  dicetak  dan  menempel  pada    baju,  namun  ada  juga orang  yang  paham  akan  seni  dari  sebuah  gambar  menganggap  bahwa  sablon  pada  baju  juga  memiliki  nilai  seni berdasarkan  kerumitan  pada  desainnya,  para  penyablon  sendiri  pasti  berusaha  semaksimal  mungkin  supaya  hasil karyanya  tidak  hanya  di  pandang  sebelah  mata  oleh  para  konsumennya,  jadi  mereka  berusaha  membuat  hasil  sablon mereka  bisa  semirip  mungkin  bahkan  bisa  melebihi  ekspetasi  dari  para  konsumen,  karena  itu  banyak  penyablon  pada masa saat ini berinovasi dengan berbagai cara untuk bisa membuat hasil sablon mereka  unik dan lebih menarik minat konsumen,  salah  satunya  memanfaatkan  perkembangan  teknologi  saat  ini,  dengan  adanya  teknologi  AR  kini  hasil sablon tidak hanya sebatas gambar yang hanya menempel pada baju, namun sebuah karya tersebut bisa berubah menjadi sesuatu  yang  baru  dan  unik  dengan  adanya  teknologi AR.  Metode  pengembangan  yang  digunakan  dalam  pembuatan aplikasi ini adalah Prototype yang tahapannya terdiri dari Listen to Customer , Build and Revise Mock-up , Customer Test Drives  Mock-up .  Metode  perancangan  sistem  mengunakan  tools  perancangan  seperti  Use  Case  Diagram,  Activity Diagram, Sequence Diagram. Hasil dari penelitian adalah aplikasi AR animasi gambar pada baju dengan menggunakan teknologi Augmented Reality untuk meningkatkan ketertarikan konsumen dalam membeli baju
Kata Kunci: Augmented Reality , Marker Based, Sablon, Animasi, Prototype

## 1. PENDAHULUAN
Perkembangan e teknologi e yang e sangat e cepat e ini e berpengaruh e besar e dengan e aspek e kehidupan e manusia. e Teknologi e yang e ada e saat e inipun e dituntut e untuk e lebih e banyak e melakukan e inovasi e yang e semakin e mempermudah e dan e memanjakan e konsumenya. e Beberapa e konsumen e merasa e tidak e puas e jika e hanya e melihat e barang e yang e akan e dibeli e dalam e bentuk e gambar. e Maka e akan e dibutuhkan e teknologi e tertentu e pada e smartphone e android e agar e konsumen e e merasa e transaksinya e seolah-olah e nyata. e Salah e satu e contoh e terobosan e dalam e penggunaan e teknologi e sebagai e media e informasi e adalah e dengan e Augmented e Reality e (AR) [1].
Sablon pada baju selama ini hanya sebatas desain gambar  yang  dicetak  dan  menempel  pada    baju,  namun ada juga orang yang paham akan seni dari sebuah gambar menganggap bahwa sablon pada baju juga memiliki nilai seni  berdasarkan  kerumitan  pada  desainnya,  para penyablon  sendiri  pasti  berusaha  semaksimal  mungkin supaya  hasil  karyanya  tidak  hanya  di  pandang  sebelah mata  oleh  para  konsumennya,  jadi  mereka  berusaha membuat  hasil  sablon  mereka  bisa  semirip  mungkin bahkan  bisa  melebihi  ekspetasi  dari  para  konsumen, karena  itu  banyak  penyablon  pada  masa  saat  ini berinovasi  dengan  berbagai  cara  untuk  bisa  membuat hasil  sablon  mereka  unik  dan  lebih  menarik  minat konsumen,  salah  satunya  memanfaatkan  perkembangan teknologi saat ini,
dengan  adanya  teknologi  AR kini  hasil  sablon  tidak hanya  sebatas  gambar  yang  hanya  menempel  pada  baju, namun  sebuah  karya  tersebut  bisa  berubah  menjadi sesuatu yang baru dan unik dengan adanya teknologi AR.
AR  merupakan  gabungan  yang  dibuat  oleh komputer dari dunia virtual dan dunia asli. Objek virtual terdiri dari text , animasi, bentuk 3D ataupun penggabungan  dengan  lingkungan  aslinya  sehingga dirasakan  obyek  virtual  di  lingkungannya.  Penggunaan AR  juga  diberikan  sentuhan  dan  pengalaman  baru  dan sebagai  pelengkap  dalam  tampilan  dunia  asi  [2].    Pada teknologi  AR,  pengguna  diberikan  gambaran  tentang gabungan  antara  dunia  asli  dengan  dunia  maya  dari tempat  yang  sama  [3].  Pada  penelitian  [4]  penggunaan teknologi  AR  mampu  memberikan  informasi  dalam bentuk  audio,  sehingga  pengguna  bisa  mendapatakan informasi  dalam  bentuk  visual  dan  dapat  berinteraksi langsung  dengan  objeknya.  AR  memiliki  kelebihan bersifat  interaktif  dan  real  salah  satunya  digunakan sebagai  edia  visualisasi  animasi  gambar  pada  baju. Penelitian  oleh  [5]    berhasil  membuar  AR    dengan metode  Merkeless  AR  sehingga  tidak  memerlukan marker kusus untuk menjalankannya. Penelitian oleh [6] berhasil  membuat  aplikasi  AR  yang  dapat  mengajarkan anak-anak alfabet dengan baik dan menghibur. Penelitian oleh  [7]  membuat  aplikasi  AR  yang  dapat  digunakan untuk  dipahami  sejarah  &  budaya  di  Indonesia  sehingga dapat dikenal luas.
Dari  permasalahan  tersebut,  gagasan  yang dimiliki  penulis  untuk  membuat  aplikasi  AR.  AR e memiliki e salah e satu e kelebihan e antara e lain e yaitu e dapat e mengimpementasikan e secara e luas e dalam e berbagai e media. e Seiring e berkembangnya e teknologi e tersebut, e penggunaan e teknologi e AR e pada e proses e menggunakan e gambar e ke e dalam e bentuk e animasi e 3D e yang e menarik e untuk e bisa e membuat e hasil e sablon e yang e unik e dengan e metode e Marker e Based e berbasis e mobile e Android
.

## 2. METODE PENELITIAN

## 2.1 Metode Pengumpulan Data
Metode  pengumpulan  data  menggunakan  metode studi  pustaka  melalui  pencarian  literatur  yang  terkait dengan  teknologi  AR  menggunakan  metode Marker Based .

## 2.2 Metode Pengembangan Sistem
Metode  yang  digunakan  untuk  pengembangan sistem adalah prototype [8]. Tahap-tahap pengembangannya adalah:
Gambar 1. Model Prototype
a. Listen to Customer (Mendengarkan Pelanggan)
Pada e tahap e ini e merupakan e identifikasi e kebutuhan e user , e proses e ini e dilakukan e agar e diperoleh e informasi e mengenai e permasalahan e yang e terjadi e dalam e pembuatan e sistem. e Data e dari e permasalahan e tersebut e yang e nantinya e menjadi e acuan e untuk e dilakukan e proses e pencarian e solusi e dan e pengembangan e pada e tahap e selanjutnya
b. Build  and  Revise  Mock-up (Membangun  dan Memperbaiki Prototype)
Setelah e kebutuhan e sistem e terkumpul, e maka e akan e dilakukan e proses e perancangan e prototype e seperti e perancangan e sistem e dengan e menggunakan e UML e yang e meliputi e use e case e diagram, e activity e diagram, e sequence e diagram.
c. Customer Test Drives Mock-up (Pengujian Prototype ) Pada e tahap e ini e akan e dilakukan e pengujian e terhadap e prototype e sistem e yang e telah e dibuat, e serta e mengevaluasi e apakah e prototype e sistem e yang e sudah e dibuat e sudah e sesuai e dengan e yang e diharapkan. e Apabila e dari e hasil e pengujian prototype e tersebut e belum e sesuai e kebutuhan e maka e dilakukan e proses e
perbaikan e ulang e prototype e sampai
prototype e tersebut e menjadi e sistem e yang e akhir e dan e benar-benar e diterima e atau e sesuai e dengan e keinginan e user. e Proses e pengujian e prototype e sistem e nantinya e menggunakan e teknik e pengujian e black e box .

## 2.3. Gambaran Sistem
Aplikasi  AR  animasi  gambar  pada  baju  akan dibuat  aplikasi  yang  berbasis  android  dimana  nantinya pengguna  akan  dapan  mengscan marker yaitu  berupa desain  sablon  yang  ada  pada  baju  agar  dapat menampilkan  visual  animasi  objek  3D  pada  gambar sablon,  metode marker  based sendiri  berarti  sistem memerlukan marker sebagai cara untuk mentrigger objek 3D  yang  ada  sehingga  penyablon  akan  menambahkan desain  tambahan  sebagai  markernya,  dengan  dibuatnya aplikasi  ini  diharapkan  dapat  membuat  hasil  sablon memiliki  kesan  modern  dan  membantu  menarik  minat konsumen

## 2.4. Kebutuhan Sistem
Kebutuhan  sistem  yang  digunakan    dalam pembuatan aplikasi AR animasi gambar pada baju:
1. Kebutuhan Marker Menyediakan marker sebagai cara untuk mentrigger  animasi  3D  yang  telah  dibuat  agar  dapat
ditampilkan pada layar smartphone dengan mengarahkan kamera  ke  arah  marker,  sistem  akan  memuat  database dan mencocokan apakah marker tersedia atau tidak untuk diproses  lebih  lanjut  ke  tahap  penampilan  objek  animasi 3D.
2. Kebutuhan User
Untuk  dapat  menikmati  animasi  3D,  user  harus memiliki marker dalam bentuk gambar cetak baik berupa sudah  tersablon  pada  kaos  atau  gambar  print  sehingga penampilan  objek  animasi  dapat  stabil,  smartphone sebagai alat scanner dan instalasi aplikasi.
3. Kebutuhan Output
Output  yang  dihasilkan  sistem  yaitu  berupa animasi 3D yang dapat bergerak diatas marker.

## 2.5. Arsitektur Sistem
Arsitektur  sistem  aplikasi  AR  animasi  gambar pada baju seperti gambar 2.
Gambar 2. Arsitektur Sistem
Langkah-langkah pembuatan  aplikasi AR animasi gambar pada baju yaitu
1. Pengumpulan Data
Pada tahap ini pengumpulan informasi terkait gambar objek,  animasi  AR,  software  dan  hardware  yang  akan digunakan selama penelitian.
2. Analisa Data
Analisa  data  dilakukan  agar  bahan  yang  akan digunakan  benar  sudah  sesuai  dengan  yang  dibutuhkan dan persiapan melakukan tahap pengerjaan selanjutnya.
3. Pembuatan Objek Gambar dan Pembuatan Animasi AR
Pada tahapan ini peneliti membuat gambar yang akan dijadikan  objek  sebagai  animasi  AR  dan  pembuatan animasi AR.
4. Cetak Gambar Objek dan Menguji AR
Setelah  gambar  objek  jadi  maka  akan  dilakukan proses  cetak  berupa  penyablonan  gambar  ke  kaos  dan pengujian AR dilakukan pada hasil sablon pada kaos.
5. Evaluasi Sistem
Pada  tahapan  ini  dilakukan  evaluasi  sehingga  dapat disimpulkan  hasil  jika  tidak  sesuai  dengan  yang diharapkan  maka  akan  memulai  kembali  proses  analisa data untuk memperbaiki project.
6. Menggunakan Sistem
Tahapan  selesai  apa  bila  hasil  sesuai  dengan  yang diharapkan.

## 3. HASIL DAN PEMBAHASAN

## 3.1 Use Case Diagram
Use  case  diagram mendeskripsikan  kebutuhan sistem  dari  sudut  pandang  pengguna,  berguna  untuk membantu memahami kebutuhan [9].
Gambar 3. Use Case Diagram
Gambar  3  menjelaskan  pengguna  melakukan pemindaian  marker  pada  sistem  kemudian  sistem  akan menampilkan  animasi  gambar  baju  dalam  bentuk  3 dimensi.  Pengguna  juga  dapat  melihat  panduan penggunaan  sistem,  melihat  profil  pembuat  sistem  atau keluar dari sistem.
3.2 Activity Diagram
Activity Diagram adalah diagram yang mendeskripsikan aliran aktivitas dari use case [9].
a. Pindai Marker
Activity  diagram pindai  marker  pada  aplikasi  AR animasi gambar pada baju seperti gambar 4.
uc Use Case Model Pengguna Pindai marker Animasi gambar baj u Lihat panduan Tentang pembuat Keluar «include» act activ ity Model Sistem Pengguna Start Memilih menu pindai marker Menampilkan halaman pindai marker
Memilih gambar pada baj u Menampilkan animasi gambar baj u Menampilkan menu utama Finish Menekan tombol kembali
Gambar  4  menjelaskan  pengguna  memilih  menu pindai  marker  pada  istem  kemudian  sistem  akan menampilkan halaman pindai marker. Pengguna memilih gambar  yang  ingin  dilihat  animasi  pada  baju  kemudian sistem  akan  menampilkan  animasi  gambar  pada  baju dalam  bentuk  3  dimensi.  Untuk  kembali  ke  menu  awal, pengguna  dapat  menekan  tombol  kembali  yang  tersedia pada sistem.
b. Lihat Panduan
Ativity  diagram lihat  panduan  pada  aplikasi  AR animasi gambar pada baju seperti gambar 5.
Gambar 5. Activity Diagram Lihat Panduan
Gambar  5  menjelaskan  pengguna  memilih  menu panduan pada sistem kemudian sistem akan menampilkan halaman panduan. Untuk kembali ke menu awal,  pengguna  dapat  menekan  tombol  kembali  yang tersedia pada sistem.
c. Tentang Pembuat
Activity    diagram tentang  pembuat  pada  aplikasi AR animasi gambar pada baju  seperti gambar 6.
Gambar  6  menjelaskan  pengguna  memilih  menu tentang  pembuat  pada  istem  kemudian  sistem  akan menampilkan  halaman  tentang  pembuat  yang  berisi profil  pembuat  sistem.  Untuk  kembali  ke  menu  awal, pengguna  dapat  menekan  tombol  kembali  yang  tersedia pada sistem.

## 3.3 Sequence Diagram
Sequence  Diagram merupakan  diagram  yang tersusun dari rangkaian waktu [9].
a. Pindai Marker
Sequence  diagram pindai  marker  pada  aplikasi AR animasi gambar pada baju  seperti gambar 7.
Gambar 7. Sequence Diagram Pindai Marker
Gambar  7  menjelaskan  pengguna  memilih  menu pindai  marker  pada  sistem  kemudian  sistem  akan menampilkan halaman pindai marker. Pengguna memilih gambar  yang  ingin  dilihat  animasi  pada  baju  kemudian sistem  akan  menampilkan  animasi  gambar  pada  baju dalam bentuk 3 dimensi.
b. Lihat Panduan
Sequence diagram lihat panduan pada aplikasi AR animasi gambar pada baju  seperti gambar 8.
Gambar 8. Sequence Diagram Lihat Panduan
Gambar  8  menjelaskan  pengguna  memilih  menu panduan pada sistem kemudian sistem akan menampilkan halaman panduan.
act activ ity Model Sistem Pengguna Start Memilih menu panduan Menampilkan halaman panduan Menampilkan menu utama Finish Menekan tombol kembali act activ ity Model Sistem Pengguna Start
Memilih menu tentang
pembuat Menampilkan halaman tentang pembuat Menampilkan menu utama Finish Menekan tombol kembali
sd sequence Model Pengguna Pindai Process Pindai Interface Pilih menu pindai marker() Go to pindai marker() Menampilkan halaman pindai marker() Scan marker pada baju() Tracking gambar() Menampilkan animasi gambar pada baju() sd sequence Model Pengguna Panduan Interface Panduan Process Pilih menu panduan()
Go to panduan() Menampilkan halaman panduan()
c. Tentang Pembuat
Sequence  diagram tentang  pembuat  pada  aplikasi AR animasi gambar pada baju  seperti gambar 9. Gambar 9 menjelaskan pengguna memilih menu tentang pembuat pada istem kemudian sistem akan menampilkan halaman tentang pembuat yang berisi profil pembuat sistem
Gambar 9. Sequence Diagram Tentang Pembuat
3.4 Implementasi
a. Pembuatan Gambar Gambar dibawah merupakan tampilan pembuatan
gambar  untuk image objek  dengan  menggunakan  Corel Draw.
Gambar 10. Pembuatan Gambar Objek
b. Pembuatan Lisensi
Gambar dibawah merupakan tampilan pembuatan lisensi aplikasi pada web vuforia
c. Pembuatan Database Image
Gambar dibawah merupakan tampilan pembuatan database image objek dengan menggunakan vuforia
Gambar 12. Pembuatan Database Image
d. Pembuatan Image Objek
Gambar  dibawah  merupakan  tampilan  proses pembuatan image objek  di  unity3D  dengan  AR  Camera dan vuforia engine
Gambar 13. Pembuatan Image Objek
e. Pembuatan Animasi
Gambar  dibawah  merupakan  tampilan  proses pembuatan penambahan animasi 3D pada image objek di unity3D dengan AR Camera dan vuforia engine

## sd sequence Model
Pengguna
Tentang Interface
Tentang Process
Pilih menu tentang pembuat()
Go to tentang pembuat()
Menampilkan halaman tentang pembuat()
f. Test Run
Gambar  dibawah  merupakan  tampilan  proses menjalankan aplikasi AR di unity3D dengan AR Camera dan vuforia engine
Gambar 15. Test Run
g. Build Aplikasi
Gambar  dibawah  merupakan  tampilan  proses membangun  aplikasi AR di unity3D dengan AR Camera dan  vuforia  engine  agar  bisa  dijalankan  di smartphone android.
Gambar 16. Build Aplikasi
h. Hasil Running
Gambar  diatas  merupakan  tampilan  proses menjalankan aplikasi AR yang dijalankan di smartphone android

## i. Pengujian Black Box
Pengujian  aplikasi  AR  animasi  gambar  pada  baju dengan metode black-box diperlihatkan seperti tabel 1.
Tabel 1. Tabel Pengujian Black-Box Input Fungsi Output Hasil Menu Untuk menampilkan menu sistem Tampilan halaman menu Berhasil Pindai Marker Untuk  melakukan pemindaian marker pada gambar Tampilan halaman pindai marker Berhasil Lihat Panduan Untuk melihat panduan penggunaan sistem Tampilan halaman lihat panduan Berhasil Tentang Pembuat Untuk melihat profil pembuat aplikasi Tampilan halaman tentang pembuat Berhasil Keluar Keluar dari sistem Keluar dari sistem Berhasil
Dari  hasil  pengujian  dapat  disimpulkan  untuk  uji black  box yang  meliputi  uji input, proses  dan output dengan  acuan rancangan perangkat lunak telah terpenuhi dengan hasil sesuai rancangan.

## 4. KESIMPULAN
Kesimpulan  yang  diambil  dari  aplikasi  AR animasi  gambar  pada  baju  yaitu  Aplikasi  AR  animasi gambar  pada  baju  dengan  teknologi Augmented  Reality dapat membuat konsumen untuk tertarik dalam membeli baju,  objek  pada  aplikasi  AR  animasi  gambar  pada  baju dapat  ditampilkan  dengan  3  dimensi.  Hasil  pengujian menggunakan blackbox testing sesuai dengan fungsi dari aplikasi yang dibuat.

## DAFTAR PUSTAKA
[1]  Muntahanah,  Rozali  Toyib,  and  Miko  Ansyori, “Penerapan  Teknologi  Augmented  Reality  Pada Katalog  Rumah  Berbasis  Android  (Studi  Kasus  PT. Jashando  Han Saputra),” J.  Pseudocode ,  vol.  4,  pp. 81–89, Feb. 2017.
[2]  Tarmin  Abdulghani  and  Bambang  Plasmana  Sati, “Pengenalan  Rumah  Adat  Indonesia  Menggunakan Teknologi  Augmented  Reality  Dengan  Metode Marker Based Tracking Sebagai Media Pembelajaran,” Media J. Inform. , vol. 11, pp. 43–50, Jun. 2019.
[3]  Adam  Raihan  Fadhlurrahman,  Fauziah,  and  Aris Gunaryati, “Augmented Reality Pengenalan
Landmark  Negara  Asia  Tenggara  Menggunakan Algoritma  FAST  Corner  Dan  Natural  Feature Tracking,” J. Tek. Inform. Dan  Sist. Inf. , vol. 8, pp. 1012–1016, Sep. 2021.
[4]  Pemanfaatan  Augmented  Reality  Sebagai  Media Pembelajaran,  “Ilmawan  Mustaqim,” J.  Pendidik. Teknol.  Dan  Kejuru. ,  vol.  13,  pp.  174–183,  Jul. 2016.
[5]  Mestilia  Meilin  Mongilala,  Virginia  Tulenan,  and Brave  A.  Sugiarso,  “Aplikasi  Pembelajaran Interaktif  Pengenalan  Satwa  Sulawesi  Utara Menggunakan Augmented Reality,” J. Tek.  Inform. , vol. 14, pp. 465–474, Desember 2019.
[6]  Dhiyaa  Hilmy  Yusuf,  Ady  Purna  Kurniawan,  and Anang  Sularsa,  “Perancangan  Marker  Kartu  DAN UI  Pada  Aplikasi  Pembelajaran  Alfabet  Bilingual Berbasis  Augmented  Reality,” E-Proceeding  Appl.
Sci. , vol. 6, pp. 2707–2714.
[7]  Ayyu    Faridhatul    Masrura,  M.    Farras    Aditya    P. A.,  Muhammad    Hussein    Isron,  Dodik  Arwan Dermawan,  and  Paramitha  Nerisafitra,  “Aplikasi Edukasi    Berbasis    Android    Menggunakan Augmented    Reality,” Explore  IT  12 ,  pp.  29–36,
2020.
[8]  Agus  Mulyanto, Sistem  Informasi  Konsep  & Aplikasi . Yogyakarta: Pustaka Pelajar, 2014.
[9]  Munawar, Analisis Perancangan Sistem
Berorientasi Objek dengan UML (Unified  Modeling Language) . Bandung: Informatika, 2018.