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

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 d
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

Game TicTacToe dengan Greenfoot

Oleh Uboiz -
Gambar
Game Tic Tac Toe, meskipun termasuk game yang sederhanya, ternyata sulit juga untuk membuatnya. Terutama untuk memasukkan Artificial Intelligence (AI) sebagai musuh pemain. Penulis sebenarnya telah mencoba mengimplementasikan algorithma game Tic Tac Toe dengan HTML5 Canvas pada posting sebelumnya, namun disini penulis mencoba menulis ulang dengan Greenfoot, dan melakukan efisiensi penulisan kode program. Awalnya, sesuai gambar diatas dan dalam video dibawah ini, penulis membuatnya dengan Greenfoot versi 3.x, namun karena terlalu memakan banyak memori, penulis ubah ke Greenfoot versi lebih awal, yaitu Greenfoot 2.x. Sedangkan untuk kode nya dapat di download dengan link dibawah ini: Download TicTacToe.gfar Ide AI-nya cukup sederhana, yaitu komputer mencoba bertahan, dengan mencari posisi pemain dimana paling berpotensi menang, baru kemudian mencari posisi untuk dirinya sendiri untuk menang. Untuk game versi Android-nya dapat dicoba di link dibawah ini
Baca selengkapnya

Honeycomb Style Wallpaper dengan HTML5 Canvas

Oleh Uboiz -
Gambar
Bentuk hexagon merupakan bentuk yang menarik dan identik dengan bentuk sarang lebah madu (Honeycomb). Gambar di atas adalah gambar hasil generate bentuk hexagon, yang disusun sesuai urutan, dengan lebar dan jarak tertentu, menggunakan HTML5 Canvas. Dengan menambahkan efek warna gradient hijau pada background dan shadow pada masing-masing bentuk hexagonnya, dapat menambahkan efek futuristik dan elegan sebagai wallpaper dekstop, smartphone, tablet atau semacamnya. Berikut kode HTML5 Canvasnya: <html> <head> <title>Honeycomb Shape</title> </head> <body> <canvas id= "myCanvas" width= "1024" height= "768" > </canvas> <script> var canvas = document.getElementById( "myCanvas" ); var points=[]; var ctx = canvas.getContext( "2d" ); var grd = ctx.createRadialGradient(0.5*canvas.width,0.5*canvas.height,0,0.5*canvas.width,0.5*canvas.height,360); grd.addColorStop(0
Baca selengkapnya

Cara Membuat Halaman HTML Sederhana

Oleh Uboiz -
Gambar
Membuat halaman website sebenarnya tidaklah sulit. Yang diperlukan hanyalah mencoba. Tulisan berikut ini adalah berdasarkan pengalaman penulis, tutorial cepat bagaimana membuat halaman HTML untuk membangun sebuah website sederhana. Perlu diketahui, bahasa pemrograman dasar dari tampilan website adalah HTML, dan saat tulisan ini ditulis, bahasa HTML telah mencapai versi HTML5. Setiap halaman website sebenarnya ditulis dalam bentuk bahasa ini, dan web browserlah yang bertugas untuk merender dari kode HTML tersebut, agar halaman website tidak tampil berupa kode-kode program saja, melainkan dengan tampilan yang dapat dimengerti dengan mudah oleh mata manusia. Alat yang diperlukan untuk membuat halaman HTML adalah text editor seperti Notepad. Jika diperlukan, dapat digunakan aplikasi Notepad++, untuk mempermudah mengenali tag-tag HTML. Dengan Notepad++ ini pula, akan dapat dengan mudah mengatur indentasi, bagi programer yang membutuhkan kerapian. Membuat Halaman HTML Membuat
Baca selengkapnya

Kode Greenfoot Game Snake Sederhana

Oleh Uboiz -
Gambar
Penasaran dengan kode game snake jaman dahulu, penulis iseng membuat game snake menggunakan Greenfoot. Game dibuat cukup sederhana dengan hanya empat class Actor, yaitu class Ular, Kepala, Makanan, Score dan GameOver. Kontrol game menggunakan arah keyboard arah atas, kebawah, kiri dan kanan. Kode ini cocok bagi mereka yang ingin belajar bahasa pemrograman Java menggunakan Greenfoot. Kode Greenfoot tersebut dapat di donload pada link di sini .
Baca selengkapnya

Melihat Alamat Berbentuk QR Code di Undangan Pernikahan

Oleh Uboiz -
Gambar
Suatu hari, teman penulis menikah dan dia memberikan undangan dengan alamat diberikan selain dalam bentuk gambar, juga dalam bentuk QR (Quick Response) code. Awalnya penulis tidak begitu memperhatikan, namun lama kelamaan terbersik keinginan penulis untuk bagaimana membaca QR code tersebut. Setelah mencari referensi kesana kemari, penulis kira, smartphone Android dapat langsung membaca tanpa harus menginstal aplikasi. Nyatanya, saat tulisan ini ditulis, smartphone Android penulis perlu ditambahkan aplikasi pihak ketiga, untuk membaca QR code. Video di bawah ini adalah percobaan penulis dalam membaca QR code, menggunakan app QR Scanner dari Kaspersky Lab: Kode URL lokasi yang terbaca QR Scanner, dapat di copy dan dilihat menggunakan Google Search, baru kemudian di lihat menggunakan Google Maps. Jika kode URL dibaca langsung menggunakan Google Maps, adakalanya Google Maps tidak dapat mencari lokasi yang dimaksud. Tetapi mungkin saja penulis terlalu
Baca selengkapnya

Algoritma Tombol Putar dengan Greenfoot

Oleh Uboiz -
Gambar
Membuat tombol dengan perilaku diputar, sebagaimana tombol di volume radio jaman dahulu, tidaklah mudah. Hal ini dikarenakan ada perhitungan batasan yang dihitung oleh fungsi Math.atan2, dengan range  sudut -180 sampai 180. Padahal dalam suatu kondisi perhitungan, dapat menghasilkan arah perputaran yang keliru. Misalnya tombol berada di sudut 160, kemudian akan diputar ke sudut 190. Dengan menggunakan konversi Math.atan2 akan menghasilkan arah perputaran minus. Karena dititik 190 dideteksi sudut -170. Untuk solusi kondisi seperti di atas, dilakukan dengan menghitung selisih paling sedikit, perbedaan di range sudut -180 sampai 180, dengan 0 sampai 360. Untuk lebih jelasnya dapat dilihat pada video tutorial berikut: Kode Greenfoot contoh algorithma dapat di downlad di link dibawah ini: https://drive.google.com/open?id=1m-pKkdAWA81X0rYD5ASFFoWQxT34D7Kk
Baca selengkapnya

Tips Agar Website Anda Segera di Terima oleh Google Adsense dan di-Monetize

Oleh Uboiz -
Berikut beberapa saran dari pihak Google Adsense yang mungkin bisa saya share kepada Anda ang ingin agar websitenua segera diapprove oleh Google Adsense dan segera dapay di-monetize: Pastikan laman Anda berisi teks yang memadai - situs web yang kontennya sebagian besar adalah gambar, video, atau animasi Flash tidak akan disetujui. Konten Anda harus berisi kalimat dan paragraf lengkap, bukan sekadar judul. Pastikan situs web Anda telah sepenuhnya rampung dan diluncurkan sebelum Anda mengajukan permohonan untuk AdSense - jangan ajukan permohonan ketika situs Anda masih dalam versi beta atau tahap "sedang dibuat" atau hanya terdiri dari kerangka situs web. Tempatkan kode iklan di laman aktif situs web Anda. Tidak harus berupa laman utama, namun laman percobaan yang kosong kecuali untuk kode iklan AdSense tidak akan disetujui. Sediakan sistem navigasi yang jelas untuk para pengunjung agar mudah menemukan semua bagian dan laman dalam situs web Anda. Jika Anda ingin
Baca selengkapnya

Aplikasi Java Query Box

Oleh Uboiz -
Gambar
Selama mengembangkan aplikasi, untuk mencoba perintah SQL yang akan digunakan sudah benar atau belum, diperlukan suatu cara yang mudah dan cepat. Apalagi jika aplikasi pengirim perintah berupa aplikasi dekstop yang dibuat dengan Java, maka akan sedikit ribet, sebab perlu berhati-hati terutama terkait desain keamanan. Latar Belakang Sebelumnya, penulis telah membuat aplikasi Java yang penulis tujukan untuk mencoba kemampuan halaman PHP untuk menerima data yang dikirim melalui metode POST, dan menampilkan hasilnya. Aplikasi tersebut penulis namakan TestPage, dengan output berupa data JSON. Sayangnya, aplikasi itu lebih cocok untuk mengecek perintah SQL seperti SELECT, dan kurang cocok digunakan untuk mengecheck perintah seperti INSERT dan UPDATE, yang lebih membutuhkan modifikasi perintah yang akan dikirimkan. Kode Program Aplikasi menggunakan empat class Java dan satu halaman PHP. Penulis menggunakan database MySQL, yang bertempat di hosting berbayar yang
Baca selengkapnya