{"id":7629,"date":"2020-01-14T15:39:40","date_gmt":"2020-01-14T08:39:40","guid":{"rendered":"http:\/\/binus.ac.id\/knowledge\/?p=7629"},"modified":"2020-09-14T17:41:07","modified_gmt":"2020-09-14T10:41:07","slug":"membangun-augmented-reality-berbasis-web-untuk-wisuda-binus","status":"publish","type":"post","link":"https:\/\/binus.ac.id\/knowledge\/2020\/01\/membangun-augmented-reality-berbasis-web-untuk-wisuda-binus\/","title":{"rendered":"Membangun Augmented Reality Berbasis Web untuk Wisuda BINUS"},"content":{"rendered":"<p>Pada kali ini saya akan berbagi bagaimana aplikasi <em>Augmented Reality (AR)<\/em> berbasis web untuk mendukung acara wisuda BINUS dibuat. <a href=\"https:\/\/binus.ac.id\/knowledge\/2019\/07\/pengalaman-pertama-membuat-ar-untuk-wisuda-binus\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sebelumnya<\/a> oleh M.Aziz mengenai bagaimana dia membuat 3D model untuk dapat digunakan pada aplikasi AR.<\/p>\n<p>Dengan semakin canggihnya teknologi <em>web browser<\/em>, kita dapat membangun aplikasi berbasis <em>web<\/em> yang sebelumnya tidak dimungkinkan. Ide untuk membangun AR berbasis <em>web<\/em> akan menambahkan kemudahan bagi pengguna akhir karena tidak perlu lagi melakukan instalasi app khusus pada perangkat <em>mobile<\/em> ataupun <em>desktop<\/em> (yang berujung pada banyaknya app yang tidak berguna). Pengguna hanya cukup mengunjungi laman <em>web<\/em> melalui <em>URL,<\/em> menunggu <em>web<\/em> termuat, dan <em>voila<\/em> sudah dapat pengalaman AR.<\/p>\n<p>Teknologi <em>web<\/em> AR yang digunakan adalah menggunakan pustaka dari <strong>8thwall<\/strong>. Kita cukup membangun halaman <em>web<\/em> seperti biasa dengan sintaks HTML, CSS, dan pada Javascript-nya perlu melakukan pemanggilan fungsi-fungsi khusus dari <em>library<\/em> 8thwall. Untuk melakukan publikasi laman <em>web<\/em> agar dapat diakses umum memerlukan lisensi dari 8thwall. Tapi kalau hanya ingin mencoba untuk <em>development,<\/em> ini gratis.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium\" src=\"https:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2019\/07\/WhatsApp-Image-2019-07-19-at-09.45.51.jpeg\" alt=\"AR buku wisuda\" width=\"1164\" height=\"655\" \/><\/p>\n<p>Pada project ini, kami menggunakan buku wisuda sebagai <em>marker,<\/em> dimana tiap gambar gedung akan menampilkan informasi berupa visualisasi 3D dari gedung tersebut, juga informasi tambahan seperti kapan didirikan dan lainnya. Pada saat itu jumlah maksimal <em>marker<\/em> yang bisa ditangani perhalaman <em>web<\/em> oleh 8thwall adalah sebanyak lima marker, sehingga <em>web<\/em> harus dibuat menjadi 2 halaman.<\/p>\n<p>Untuk format 3D model yang digunakan adalah harus menggunakan gLTF. Format ini dikembangkan oleh Facebook dan selanjutnya mulai digunakan sebagai standar pada beberapa <em>library<\/em> 3D <em>rendering.<\/em> Format ini menggabungkan model, tekstur, dan animasi menjadi <em>compact.<\/em> Terkadang disebut sebagai versi JPG dari 3D format.<\/p>\n<p>Sedangkan untuk pemrograman Javascript selain menggunakan library dari 8thwall, juga dipergunakan library seperti three.js untuk dapat memanipulasi objek 3D. Pada project ini untuk mengatur posisi dan juga rotasi secara otomatis dari tiap object 3D yang tampil.<\/p>\n<p>Demikian sedikit berbagi pengalaman dari perspektif teknis pembangunan AR berbasis <em>web<\/em> untuk keperluan wisuda BINUS, semoga menginspirasi.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pada kali ini saya akan berbagi bagaimana aplikasi Augmented Reality (AR) berbasis web untuk mendukung acara wisuda BINUS dibuat. Sebelumnya oleh M.Aziz mengenai bagaimana dia membuat 3D model untuk dapat digunakan pada aplikasi AR. Dengan semakin canggihnya teknologi web browser, kita dapat membangun aplikasi berbasis web yang sebelumnya tidak dimungkinkan. Ide untuk membangun AR berbasis [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":6370,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[83],"tags":[445,446],"class_list":["post-7629","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","tag-ar","tag-augmented-reality"],"_links":{"self":[{"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/posts\/7629","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/comments?post=7629"}],"version-history":[{"count":2,"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/posts\/7629\/revisions"}],"predecessor-version":[{"id":7643,"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/posts\/7629\/revisions\/7643"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/media\/6370"}],"wp:attachment":[{"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/media?parent=7629"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/categories?post=7629"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/tags?post=7629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}