Mengubah Objek 3D Hellosceneform untuk Augmented Reality

Oleh Uboiz -

Berikut ini adalah pengalaman penulis mencoba merubah object 3D aplikasi Hello Sceneform untuk keperluan membuat Augmented Reality (AR) menggunakan ARCore.

Proyek ini adalah bagian dari kerjasama penulis dengan salah satu Tim Penelitian Jurusan Fisika Universitas Brawijaya Malang.

ARCore adalah library Google Play untuk keperluan AR.

Library ini berupa plugin, yang perlu di instal secara tersendiri pada device smartphone yang akan digunakan.

Untuk Android, di Play Store saat percobaan ini dilakukan, ARCore telah berubah nama menjadi Google Play Service for AR. 

Keterangan lebih lanjut mengenai ARCore dapat dibaca di website mereka, yaitu di https://developers.google.com/ar/

Sedangkan Hello Sceneform adalah aplikasi output dari project Android Studio Hellosceneform, yang dapat di download di link Github, di bawah ini. 


Tidak hanya di Android Studio, platform pengembangan ARCore, sebenarnya dapat menggunakan juga iOS, Unity, dan Unreal. 

Namun dalam percobaan ini lebih memilih menggunakan Android Studio, dikarenakan lisensi distribusi aplikasi apk-nya lebih bersifat free (gratis).

Kebutuhan Smartphone

Skema kerja ARCore adalah menyatukan dunia 3D nyata yang dideteksi menggunakan kamera sebagai lapisan pertama, dengan 3D virtual yang dilapiskan diatas sebagai lapisan kedua.

ARCore mendeteksi permukaan datar yang tertangkap kamera. Kemudian dengan sensor gyro mendeteksi posisi device sekaligus sebagai acuan koordinat ruang, untuk meletakkan object 3D dunia virtual.

Sehingga selain membutuhkan kamera yang beresolusi tinggi, untuk dapat menjalankan ARCore diperlukan smartphone dilengkapi sensor gyro.

Selain itu, device Android yang digunakan juga membutuhkan kecepatan processor dan konsumsi RAM yang tinggi, terutama jika object 3D yang akan ditampilkan mempunyai jumlah polygon yang banyak.

Oleh karena itu, dalam percobaan ini menggunakan smartphone dengan spesifikasi sebagai berikut: 
  • Merek : Samsung Galaxy A8 
  • Layar : 5.6 inch FHD+ Super AMOLED (1080x2220) 440 ppi 
  • Ram : 4Gb 
  • Memory internal : 64Gb 
  • Prosesor : Octa core 2.2 GHz 
  • Kamera : 16Mp + 24Mp / 24Mp 
  • Baterai : 3.700 mAh 
  • Fitur/sensor : Face recognition, Fingerprint, gyro 

Spesifikasi Komputer

Android Studio adalah software Google yang digunakan untuk membuat aplikasi Android menggunakan komputer.

Penulis adalah Android developer yang telah membuat lebih dari 50 aplikasi dan game pendidikan, dengan nama Computational Lab di Play Store.

Sedangkan ntuk menjalankan project Hellosceneform, membutuhkan Android Studio versi terbaru, dengan dukungan grafis yang cukup tinggi.

Sehingga percobaan ini menggunakan Android Studio versi 3.5 dan spesifikasi komputer sebagai berikut: 
  • Merek laptop : HP 
  • Processor : Intel Core i3 gen 7 (2.3 GHz, 3 MB cache, 2 cores) 
  • RA: : 8GB DDR4 
  • HDD : 1TB 5400 rpm SATA 
  • Layar : 14" diagonal HD (1366 x 768) 
  • VGA : AMD Radeon 520 Graphics (2 GB GDDR5 dedicated) 
  • Fitur : WiFi, Bluetooth, Webcam, Windows 10
Meskipun pihak Google sendiri merekomendasikan minimal menggunakan RAM 4 GB sudah cukup. Namun dalam implementasinya, konsumsi memori Android Studio dengan spesifikasi komputer RAM 8 GB di atas masih kurang.

Terbukti selama percobaan, masih seringkali terjadi crash saat kompilasi.

Oleh karena itu, untuk pembuatan AR menggunakan platform ARCore, sebenarnya membutuhkan komputer dengan spesifikasi hardware dan software yang lebih tinggi dengan yang digunakan di atas.

File Obj 

Obyek 3D yang dapat ditampilkan menggunakan library ARCore adalah file obj. 

File ini berupa text sederhana, yang dapat dibuka dengan file editor seperti notepad, dan berisi informasi vertex, arah garis normal, koordinat texture, dan face polygon.


Semakin banyak informasi yang diberikan, menunjukkan obyek obj membutuhkan konsumsi memori yang tinggi untuk menanmpilkannya.

Selain itu, file ini biasanya dilengkapi dengan file pendukung lain yang berupa informasi tentang material yang digunakan, yang berupa texture yang disimpan dalam file berekstensi mtl, jpg dan png.

Informasi lebih lanjut mengenai tipe file obj dapat dibaca di Wikipedia (2019) dengan artikel yang berjudul “Wavefront .obj file”, dengan link di sini.

Percobaan ini menggunakan file obj bunga mawar buatan Yaschan (2013), yang di download di Turbosquid dengan alamat di bawah ini: 


File-file terkait obyek bunga mawar di atas, dalam percobaan ini diubah ke nama erato.obj, erato.mtl dan erato.jpg. Untuk menggantikan file andy.obj bawaan project Hellosceneform.

Berdasarkan percobaan, ukuran vertex file obj yang akan dimasukkan project Hellosceneform harus bervolume dibawah 1.0x1.0x1.0, dan tidak boleh terlalu kecil.

Dikarenakan ukuran aslinya bervolume lebih besar batas volume tersebut, obyek bunga mawar diperkecil lebih dahulu, dengan mengubah informasi vertex, dengan skala tinggi maksimal harus 1.0.

Modifikasi kode program 

Kemudian untuk memasukkan ke project Hellosceneform, file-file erato di atas perlu dimasukkan ke folder sampledata yang terdapat di dalam folder app. 


Kemudian terdapat dua kode yang perlu diubah, yaitu file grandle app dan HelloSceneformActivity.

Untuk file grandle app diubah sebagaimana yang semula ditujukan untuk andy.obj, diubah diarahkan ke erato.obj.


File sfa dan sfb akan digenerate otomatis saat project di rebuild. Namun Android Studio tidak di set untuk menggenerate ulang jika terdapat modifikasi terhadap file obj.

Sehingga jika dilakukan perubahan terhadap file erato dan yang terkait lainnya, lebih baik file sfa dan sfb di hapus secara manual terlebih dahulu.

Selain itu, dalam file HellosceneformActivity harus diganti menyesuaikan nama file sfb yang tergenerate, seperti contoh berikut: 

Jalankan 

Skema kerja ARCore adalah menggabungkan 2 layer. Layer pertama adalah dunia nyata 3D, dan layer kedua adalah dunia 3D dalam sistem. 

Kedua layer tersebut digabungkan dengan kamera, dan dengan sensor gyro. 

Berikut ini adalah hasil uji coba penulis yang dapat dilihat dalam video: 



Referensi

Komentar

Posting Komentar



Postingan populer dari blog ini

Apps Script untuk Cetak Sertifikat

Oleh Uboiz -
Gambar
Tutorial pembuatan sertifikat menggunakan Google Docs, Sheets dan Apps Script teleh penulias buat dalam video di bawah ini: Sedangkan berikut ini adalah kode Apps Script yang penulis gunakan di dalam tutorial di atas: function onOpen() { const ui = SpreadsheetApp.getUi(); const menu = ui.createMenu("Cetak Sertifikat"); menu.addItem("Cetak Sertifikat", "generateMode"); menu.addToUi(); } function generateMode() { var idtemplate="1qseLMkdYIzmx0rhkKELF0xxlsD13CS1eCk0MlcTKt_g"; var idtarget="1ZLNksdiilEc0mQ88WOfAuU8_JcMVcO6ewXuJes-UU9I"; var ss = SpreadsheetApp.openById("1j1TArXYzRlVGvB9q7ly7NdyF-nsJcCH6RT3rOQik0yQ"); var so=ss.getSheetByName("Source"); var data=so.getRange("A1:C").getValues().map(function(row){return (row[0]!="")?row:null}).filter(function(cellData){return cellData != null;}); const docTemplate=DocumentApp.openById(idtemplate); var docTarget=DocumentApp.open
Baca selengkapnya

Kumpulan Source Code Greenfoot

Oleh Uboiz -
Gambar
Overview Greenfoot adalah aplikasi berbasis Java yang cocok untuk pemula yang sedang belajar OOP Java. Dukungan image processing 2D dapat menjadi satu daya tarik utama penggunaan aplikasi ini. Sehingga selain gratis, dengan Greenfoot anda akan dapat belajar membuat algorithma pembuatan game, terutama yang berbasis game 2D. Greenfoot Sourcecode Collection adalah kumpulan source code Greenfoot yang terdiri dari 36 skenario. Beberapa scenario menunjukkan tentang bagaimana cara memvisualisasikan contoh-contoh bidang kefisikaan, seperti revolusi bulan, gravitasi, pendulum dan sebagainya. Selain itu beberapa contoh juga mengambil tujuan bagaimana cara membuat animasi 2D dengan lebih banyak menulis program, dibanding pengolahan gambar menggunakan software image processing seperti Corel Draw atau Photoshop. Dengan mempelajari source code ini diharapkan anda dapat menguasai dasar bagaimana melakukan atau menerapkan algorithma dalam bentuk kode program untuk pembuatan game 2D
Baca selengkapnya

Menyembunyikan Failed Load Images di Blogger

Oleh Uboiz -
Gambar
Salah satu cara untuk menyembunyikan gambar yang tidak dapat di load pada suatu halaman Blogger adalah menggunakan fungsi remove element Javascript. Namun cara ini tidak penulis jamin dapat berjalan disemua browser. Setidaknya, dapat mempercantik tampilan posting yang hanya menggunakan gambar thumbnail dari Youtube. Dibawah ini adalah kode Javascript dan bagaimana menambahkan di Blogger. Kode <script> var imgs=document.getElementsByTagName("img"); for(var i=0,j=imgs.length;i<j;i++){ imgs[i].onerror = function(e){ this.parentNode.removeChild(this); } } </script> Demo
Baca selengkapnya

Kode Greenfoot Game Flappy Bird

Oleh Uboiz -
Gambar
Penasaran membuat game Flappy Bird, penulis mencoba belajar membuat clone game tersebut menggunakan Greenfoot. Secara keseluruhan, game yang penulis buat dapat di download pada link dibawah ini, dan penulis distribusikan hanya untuk tujuan belajar: CodeFlappy di Google Drive Perlu diperhatikan, assets atau gambar-gambar yang penulis sertakan dalam kode di atas, lebih banyak penulis buat sendiri.  Penulis sengaja membuatnya berbeda dari sumber aslinya, sourabhv (2014) di Github.com, dengan tujuan menghindari pelanggaran hak cipta. Semoga game Flappy Bird clone yang penulis buat menggunakan Greenfoot ini dapat berguna, terutama bagi mereka yang sedang memulai belajar bahasa pemrograman menggunakan Greenfoot. Referensi sourabhv. 2014. FlapPyBird. https://github.com/sourabhv/FlapPyBird . Diakses tanggal 9 Juli 2019.
Baca selengkapnya

Algorithma Bilangan Prima dengan Javascript

Oleh Uboiz -
Gambar
Untuk belajar pemrograman tingkat dasar, Javascript dapat digunakan untuk mengimplementasikan perhitungan sederhana. Di bawah ini adalah contoh kode Javascript untuk mencari deret bilangan prima sampai angka yang diinputkan. Selain kode berisi algorithma bagaimana mendeteksi bilangan prima, kode javascript juga berisi cara mendeteksi input berupa bilangan angka atau tidak. <html> <head> <title>Prime Algorithm</title> </head> <body> Input : <input type= "text" id= "input" /><button type= "button" onclick= "CalcPrime()" >Calculate</button><br/><br/> Hasil : <span id= "hasil" ></span> <script> function CalcPrime() { var a=document.getElementById( "input" ).value; document.getElementById( "hasil" ).innerHTML= "" ; if (!isNaN(a) && a>=0){ for (i=2;i<a;i++){ var ketemu= false
Baca selengkapnya

Checking Data yang Belum Dimasukkan dalam Daftar Menggunakan Query Google Sheet

Oleh Uboiz -
Gambar
Seringkali untuk urusan data, kita diminta untuk mengecek apakah data sudah dimasukkan atau belum. Biasanya keperluan ini untuk mengecek data terbaru. Misalnya mengecek apakah email siswa sudah masuk daftar atau belum Salah satu caranya adalah menggunakan Query formula berikut ini: =IFNA(QUERY(B2:B,"SELECT B WHERE B IS NOT NULL AND B<>'"&JOIN("' AND B<>'",QUERY(D2:D,"",0))&"'",0)) Di mana B dan D adalah kolom sheet yang implementasinya dapat dilihat pada video dibawah ini: Sedangkan jika diperlukan highlight data untuk menandai data mana saja yang belum masuk dapat menggunakan Conditional Formatting Google Sheet sebagaimana video dibawah ini:
Baca selengkapnya

Kebodohan Karyawan Menyalahkan Sistem

Oleh Uboiz -
Untuk kesekian kalinya, penulis melihat, terdapat karyawan yang dengan omong besarnya, menyalahkan sistem yang ada di instansi di mana penulis bekerja. Mulai dari struktur database, kebijakan atasan, dan lain sebagainya. Salah. Semua salah, katanya. Padahal, menurut penulis, justru dialah yang munafik. Kalau memang salah, kenapa juga masih mau di gaji dari instansi ini. Kenapa tidak berani mengundurkan diri, jika memang merasa di dzolimi. Kenapa masih mau mengerjakan pekerjaan, yang dia anggap dari pola pikir 'orang miskin'. Bagi penulis, dengan pola pikir seperti itu, dialah yang justru menambah jumlah orang bodoh di instansi ini, bukan memberikan solusi. Miris. Harusnya dia menyadari, jika instansi menggaji dirinya, sebenarnya adalah untuk memperbaiki hal-hal yang dia anggap salah tersebut. So, what will you do, if that actually your job where the reason you have been paid here? Oleh karena itu, alangkah baiknya ketika perekrutan karyawan baru, setidaknya lebih selektif lagi
Baca selengkapnya

Algorithma Coretan Abstrak dengan HTML5 Canvas

Oleh Uboiz -
Gambar
Coretan dengan gradasi sisi kiri dan sisi kanan, dapat dibuat dengan fungsi fillRect dengan lebar 1x1 pixel. Algorithmanya adalah membentuk garis horizontal dengan tinggi juga 1 pixel saja, dengan lebar acak mulai 0 sampai 500 pixel, dengan semakin ke pinggir nilai alphanya semakin transparan. Sedangkan untuk penggambarannya dibagi menjadi tiap seksi. Dimana tiap seksi menggambar 50 garis, dengan posisi dan rotasi tidak jauh dari posisi dan rotasi utama. Setting ulang posisi dan rotasi utama dilakukan tiap seksi, sampai kurang lebih 100 kali. Berikut ini adalah kode HTML5 Canvas yang mengimplementasikan algorithma di atas: <html> <head> <title>Random Pixel</title> </head> <body> <canvas id= "myCanvas" width= "1024" height= "768" > </canvas> <script> var canvas = document.getElementById( "myCanvas" ); var ctx = canvas.getContext( "2d" ); ctx.
Baca selengkapnya

Mencoba Submit Theme di Wordpress.org

Oleh Uboiz -
Gambar
Sangat penasaran sekali, bagaimana agar theme yang penulis buat, dapat tampil menjadi salah satu theme yang ditawarkan pada halaman tampilan Wordpress. Baru pada tahun 2023 ini, penulis berkesempatan untuk mengoprek lebih dalam Wordpress, mulai dari theme sampai plugin. Belum sampai ke core. Hal ini berkat serangan virus "Slot Gacor" yang beberapa bulan sebelum tulisan ini ditulis, menyerang beberapa website yang penulis kelola. Di mana kode injeksinya, penulis temukan di theme dan plugin yang digunakan. Bukan pada core Wordpress. Artinya, dari serangan tersebut adalah yang membuat penulis semakin berkeinginan untuk membuat theme dan plugin sendiri untuk Wordpress. Maklum, karena pada waktu itu, posisi penulis bukan yang membangun website dari awal, sehingga plugin yang digunakan, adalah sesuai kebutuhan tenaga IT sebelumnya. Dan Wordpress adalah aturan permintaan instansi pemilik website. Ngomong-ngomong bagaimana bisa terkena "Slot Gacor", apakah karena tenaga IT
Baca selengkapnya

Generate Karakter Acak dan Menempatkannya di Sel Google Sheets dengan Apps Script

Oleh Uboiz -
Gambar
Untuk menandai sel dengan susunan karakter random, yang mana kursor mouse sedang menandainya di sel tersebut pada Google Sheets, kita dapat menggunakan mengunakan Apps Script berikut ini: Kode function onOpen() { const ui = SpreadsheetApp.getUi(); const menu = ui.createMenu("Keperluan"); menu.addItem("Generate Random", "createRandom"); menu.addToUi(); } function makeRandomChar(length) { var result = ""; const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@"; let counter = 0; while (counter < length) { result += characters.charAt(Math.floor(Math.random() * characters.length)); counter += 1; } return result; } function generateRandom() { return makeRandomChar(10+Math.floor(Math.random() *40)); } function createRandom() { var sheet=SpreadsheetApp.getActive(); sheet.getActiveSheet().getCurrentCell().setValue(""+generateRandom()); } Kode d
Baca selengkapnya