Judul BELAJAR CEPAT DAN PRAKTIS TENTANG GRAFIKA KOMPUTER (Teori & Aplikasi) “Untuk Pengembangan Aplikasi Mobile Dengan Menggunakan Eclipse Bundle Android, Android Studio Dan OpenGL ES” Oleh : Imam Cholissodin Maya Kurniawati, dkk. PENGANTAR Modul ini disusun untuk memberikan pemahaman konsep dasar dan detail pengembangan Grafika Komputer berbasis aplikasi Mobile. Materi yang tersedia selain memudahkan para developer, juga untuk mendukung perkuliahan yang membantu pengayaan mahasiswa. Imam Cholissodin S.Si., M.Kom Dosen Pengampu MK Grafika Komputer FILKOM UB 2014-2016 Kata Pengantar Alhamdulillahhi robbil alamin, puji syukur kehadirat Allah SWT atas segala rahmat dan karunia-Nya dengan terselesaikannya penu- lisan modul ini dengan judul “Belajar Cepat & Praktis Tentang Grafika Komputer (Teori & Aplikasi) Untuk Pengembangan Aplikasi Mobile Dengan Menggunakan Eclipse Bundle Android Dan OpenGL”. Buku ini merupakan uraian dari pemahaman konsep dasar dalam grafika komputer dan penerapannya, dengan mengedepankan keterampilan dalam pembuatan dan menampilkan grafik komputer serta berbagai algoritmanya, untuk mengaplikasikan grafika komputer pada pemodelan agar memudahkan dalam pembuatan visualisasi informasi menjadi bentuk geometri, serta mengembangkan teori geometri pada pembuatan grafik komputer untuk tingkat lanjut yang lebih kompleks. Grafika komputer telah banyak diaplikasikan pada beberapa perangkat lunak dengan bahasa pemrograman yang populer seperti C/C++, Java, dan lainnya. Namun aplikasi grafika komputer pada perangkat Mobile (Smartphone) masih jarang ditemukan (sangat langka), terutama dalam bentuk buku yang berbahasa Indonesia. Dan teknologi Mobile saat ini memang sedang naik daun, baik dimata pengembang Aplikasi (Developer) maupun dikalangan pengguna (End User). Hal inilah yang mendasari penulis untuk menyusun cata- tan-catatan kecil untuk dibuat sebuah naskah tulisan yang mudah un- tuk dipahami. Dan penulis mengucapkan terimakasih yang sebesar- besarnya kepada beberapa pihak terkait yang telah membantu dalam penyelesaian buku ini : 1. Para penulis artikel tentang grafika komputer di forum, web, blog dan buku yang menjadi referensi buku ini, dan memberi masukan yang sangat berharga untuk perbaikan dan penyelesaian buku ini. 2. Mbak Maya Kurniawati, yang telah banyak membantu penulisan buku ini. Dan beberapa mahasiswa terbaik saya lainnya (M. Abyan Safitra, M. Fatqur Rohman, Abdul Khoir, Faisol Andi Sefihara, Faisal Akbar, Pasca Immanuddin, Dani Devito, dkk.). Semoga kontribusi kalian menjadi ilmu yang barokah dan bermanfaat. Amiin. :) Buku ini masih jauh dari sempurna, begitulah kata yang tepat terkait dengan buku ini. Maka penulis mohon kritik dan saran untuk perbaikan dan penyempurnaan buku ini. Selamat membaca buku ini dan semoga bermanfaat. Malang, 19 Agustus 2014 Penulis ii Daftar Isi Judul ...................................................................................................... i Kata Pengantar ..................................................................................... ii Daftar Isi ............................................................................................... iii Daftar Tabel ......................................................................................... vii Daftar Gambar .................................................................................... viii Daftar Source Code ........................................................................... xxii BAB 1 Introduction to OpenGL .................................................... 1 1.1 Pengertian Grafika Komputer .......................................... 1 1.2 Persiapan di Eclipse (ADT) .............................................. 1 1.2.1 Fast Emulator With Intel (HAXM) ......................... 1 1.2.2 Konfigurasi "Eclipse + Bluestacks" ...................... 7 1.2.3 Konfigurasi "Eclipse + Genymotion" .................. 14 1.2.4 Konfigurasi pada Smartphone Android .............. 35 1.2.5 Solusi Error/Problem/Bug .................................. 38 1.2.6 Membuat Project Baru ....................................... 42 1.2.7 Siklus Hidup Kode Program ............................... 45 1.3 Persiapan di Android Studio (AS) .................................. 46 1.3.1 Installasi Android Studio .................................... 46 1.3.2 View SDK Android Studio .................................. 61 1.3.3 Solusi Error/ Problem Android Studio ................ 64 1.3.4 Compare Eclipse dengan Android Studio .......... 92 1.3.5 Membuat AVD baru dari AVD Manager ............. 93 1.3.6 Import Project Eclipse ke Android Studio ........ 102 1.3.7 Konfigurasi pada Smartphone Android ............ 120 1.3.8 Konfigurasi "AS + Genymotion" ....................... 121 1.3.9 Membuat Project Baru di AS ............................ 155 1.3.10 Membuat Module Baru di Project AS ............. 164 BAB 2 Primitives Object .......................................................... 169 2.1 Pengertian Primitives Object ........................................ 169 iii 2.2 Membuat Titik ............................................................... 170 2.3 Membuat Garis dengan Titik ........................................ 182 2.4 Membuat Segitiga & Segiempat .................................. 198 2.5 Membuat Polygon/Segibanyak .................................... 232 2.6 Membuat Lingkaran ..................................................... 247 2.7 Membuat Polar Object ................................................. 279 BAB 3 Transformations ........................................................... 286 3.1 Pengertian Transformasi .............................................. 286 3.2 Matematika & Proses Transformasi ............................. 286 3.3 Urutan Transformasi .................................................... 290 3.4 Membuat Kincir Angin .................................................. 290 BAB 4 Viewing / Camera ......................................................... 300 4.1 Pengertian Viewing / Camera ...................................... 300 4.1.1 Proyeksi Paralel ............................................... 300 4.1.2 Syntax Proyeksi Paralel ................................... 300 4.1.3 Proyeksi Perspektif .......................................... 301 4.1.4 Syntax Proyeksi Perspektif .............................. 301 4.2 Matematika Synthetic Camera ..................................... 303 4.3 Membuat Multiple View Object .................................... 307 BAB 5 Texture Mapping .......................................................... 317 5.1 Pengertian Texture Mapping ........................................ 317 5.2 Representasi Texture Mapping .................................... 318 5.3 Parameter Texture Mapping ........................................ 319 5.4 Texture Mapping Pada Segitiga................................... 321 5.5 Texture Mapping Pada Lingkaran ................................ 339 5.6 Texture Mapping Pada Kubus ..................................... 359 5.7 Texture Mapping Pada Bola ........................................ 367 BAB 6 Blending ....................................................................... 378 6.1 Pengertian Blending ..................................................... 378 6.2 Source and Destination Factor Pada Blending ............ 379 6.3 Matematika Blending ................................................... 379 iv 6.4 Blending Dua Segitiga ................................................. 381 6.5 Blending Pada Kubus .................................................. 400 6.6 Blending Pada Bola ..................................................... 411 BAB 7 Lighting & Shading ....................................................... 422 7.1 Pengertian Lighting & Shading .................................... 422 7.2 Proses dan Fungsi Pada Lighting ................................ 423 7.3 Normal Vektor Pada Lighting ....................................... 424 7.4 Lighting Pada Interior ................................................... 425 BAB 8 Model Loading & Curve ............................................... 542 8.1 Pengertian Model Loading & Curve ............................. 542 8.2 Model Creator .............................................................. 543 8.3 Model Loading ............................................................. 544 8.4 Fractal Curve ................................................................ 551 BAB 9 Project Pilihan .............................................................. 558 9.1 Random Maze .............................................................. 558 9.1.1 Konsep ............................................................. 558 9.1.2 Tampilan Implementasi .................................... 558 9.1.3 Source Code .................................................... 560 9.2 Smart Flappy ................................................................ 723 9.2.1 Konsep ............................................................. 723 9.2.2 Tampilan Implementasi .................................... 723 9.2.3 Source Code .................................................... 725 9.3 Chicken Hero ............................................................... 760 9.3.1 Konsep ............................................................. 760 9.3.2 Fungsi Dasar Pembentuk Objek ...................... 761 9.3.3 Tampilan Implementasi .................................... 762 9.3.4 Source Code .................................................... 763 9.4 Ayo Nyoblos ................................................................. 854 9.4.1 Konsep ............................................................. 854 9.4.2 Fitur/Menu ........................................................ 855 9.4.3 Tampilan Implementasi .................................... 855 v 9.4.4 Source Code .................................................... 857 9.5 Touch Your Coin .......................................................... 918 9.5.1 Konsep ............................................................. 918 9.5.2 Fungsi Dasar Pembentuk Objek ...................... 920 9.5.3 Tampilan Implementasi .................................... 921 9.5.4 Source Code .................................................... 923 9.6 Zoo Photo Attack ....................................................... 1064 9.6.1 Konsep ........................................................... 1064 9.6.2 Nilai-Nilai Edukasi .......................................... 1064 9.6.3 Fitur Yang Digunakan .................................... 1065 9.6.4 Tampilan Implementasi .................................. 1065 9.6.5 Source Code .................................................. 1066 9.7 Ular Tangga ............................................................... 1118 9.7.1 Konsep ........................................................... 1118 9.7.2 Peraturan Permainan ..................................... 1119 9.7.3 Nilai-Nilai Edukasi .......................................... 1120 9.7.4 Fitur Yang Digunakan .................................... 1121 9.7.5 Fungsi Dasar Pembentuk Objek .................... 1121 9.7.6 Tampilan Implementasi .................................. 1124 9.7.7 Source Code .................................................. 1127 9.8 Math Snail .................................................................. 1158 9.8.1 Konsep ........................................................... 1158 9.8.2 Fungsi Dasar Pembentuk Objek .................... 1159 9.8.3 Tampilan Implementasi .................................. 1175 9.8.4 Source Code .................................................. 1177 Daftar Pustaka ................................................................................ 1311 Biografi Penulis ............................................................................... 1312 vi Daftar Tabel Tabel 1.1 Log “Run adb.exe by cmd as Administrator” ...................... 75 Tabel 1.2 Concepts Map : Eclipse Vs Android Studio ........................ 92 Tabel 9.1 Fungsi Dasar Pembentuk Objek ...................................... 761 Tabel 9.2 Fungsi Dasar Pembentuk Objek ...................................... 920 Tabel 9.3 Fungsi Dasar Pembentuk Objek .................................... 1122 Tabel 9.4 Fungsi Dasar Pembentuk Objek .................................... 1159 vii Daftar Gambar Gambar 1.1 Android SDK Manager Sebelum Klik Deselect All ........... 2 Gambar 1.2 Klik Intel x86 Atom System Image.................................... 2 Gambar 1.3 Beri tanda cek Intel x86 Emulator Accelerator (HAXM) ... 3 Gambar 1.4 Klik Install 2 packages ...................................................... 3 Gambar 1.5 Klik Android SDK License lalu klik Accept Lisense .......... 4 Gambar 1.6 Klik Intel Android Extra License lalu klik Accept Lisense . 4 Gambar 1.7 Proses Download ............................................................. 4 Gambar 1.8 Tampilan setelah download dan instalasiselesai ............. 5 Gambar 1.9 Membuat Android Virtual Device (AVD) baru ................... 6 Gambar 1.10 Klik AVD pada list lalu klik Start ..................................... 6 Gambar 1.11 Intel HAXM ..................................................................... 7 Gambar 1.12 Tampilan AVD ................................................................ 7 Gambar 1.13 Download SDK ADT Bundle Eclipse .............................. 8 Gambar 1.14 Download Bluestacks ..................................................... 8 Gambar 1.15 ADW Launcher ............................................................... 9 Gambar 1.16 Interface Bluestacks ....................................................... 9 Gambar 1.17 Pesan “Failed to create the Java Virtual Machine” ........ 9 Gambar 1.18 Advanced system settings ............................................ 10 Gambar 1.19 Click Path ..................................................................... 11 Gambar 1.20 Edit System Variables .................................................. 11 Gambar 1.21 Menjalankan cmd ......................................................... 12 Gambar 1.22 Command masuk ke folder BlueStacks ....................... 12 Gambar 1.23 HD-Adb.exe start-server ............................................... 12 Gambar 1.24 Setelah HD-Adb.exe start-server dijalankan ................ 13 Gambar 1.25 Klik"Window ->"Show view"->“Other” ........................... 13 Gambar 1.26 Tampilan device pada Bluestacks emulator ................. 14 Gambar 1.27 Android Device Chooser .............................................. 14 Gambar 1.28 Main Window Genymotion ........................................... 15 Gambar 1.29 Pop-up Menambah Virtual Device ............................... 15 viii Gambar 1.30 Klik OK .......................................................................... 15 Gambar 1.31 Isi Username/Password ,Connect ................................ 16 Gambar 1.32 Pilih Virtual Device ....................................................... 16 Gambar 1.33 Beri Nama Virtual Device ............................................. 17 Gambar 1.34 Virtual Device Terdownload & Terdeploy ..................... 17 Gambar 1.35 Deployment window Finish ........................................... 18 Gambar 1.36 Play ............................................................................... 18 Gambar 1.37 File .ova ........................................................................ 19 Gambar 1.38 Deploying virtual device.. ............................................. 19 Gambar 1.39 Virtual device Finish ..................................................... 20 Gambar 1.40 Virtual device is Ready ................................................. 20 Gambar 1.41 Import Virtual Devices (*.ova) di Virtual Box ................ 21 Gambar 1.42 Virtual device is Ready Pada Virtual Box ..................... 22 Gambar 1.43 Virtual device is Ready Pada Genymotion ................... 22 Gambar 1.44 Set Letak Android SDK di Genymotion ........................ 23 Gambar 1.45 Add Repository, lalu klik OK ......................................... 23 Gambar 1.46 There are not categorized items................................... 24 Gambar 1.47 Uncheck “Group items by category” ............................. 24 Gambar 1.48 Cek "Genymotion Eclipse Tools" .................................. 25 Gambar 1.49 "Genymotion Eclipse Tools", Klik Finish ...................... 25 Gambar 1.50 plugin is unsigned, klik OK saja.................................... 25 Gambar 1.51 Software Updates, restart to take effect ....................... 26 Gambar 1.52 Set directory Genymotion ............................................. 26 Gambar 1.53 Icon Genymotion di Eclipse .......................................... 26 Gambar 1.54 Start Virtual Device ....................................................... 27 Gambar 1.55 Loading Virtual Device ................................................. 27 Gambar 1.56 Tampilan Virtual Samsung Galaxy S2 - 4.1.1 - API 16 - 480x800 .............................................................................................. 28 Gambar 1.57 Error unable to start the virtual device ......................... 28 Gambar 1.58 Kosongkan Host-only Networks ................................... 29 Gambar 1.59 Auto Create VirtualBox Host-Only Ethernet Adapter ... 29 Gambar 1.60 Network Connections ................................................... 30 ix Gambar 1.61 VirtualBox Host-Only Network ...................................... 30 Gambar 1.62 klik “Edits selected” ...................................................... 31 Gambar 1.63 Adapter & DHCP VB Host-Only Ethernet Adapter ....... 32 Gambar 1.64 Adapter & DHCP VB Host-Only Ethernet Adapter #2 .. 32 Gambar 1.65 Pilih Android Applicaton atau Run Configuration.. ....... 33 Gambar 1.66 Target, pilih “Always prompt to pick device” ................. 33 Gambar 1.67 Genymotion– samsung_galaxy_s2.. ............................ 34 Gambar 1.68 Segitiga, Etc. ................................................................ 34 Gambar 1.69 USB Debugging Pada Smartphone Samsung ............. 35 Gambar 1.70 adt-bundle-windows-x86-20131030_sdk_platform-tools ............................................................................................................ 35 Gambar 1.71 Setelah mengetikkan drive lokasi sdk .......................... 36 Gambar 1.72 adb.exe devices ........................................................... 36 Gambar 1.73 Setelah adb.exe devices dijalankan ............................. 36 Gambar 1.74 Setelah adb.exe devices dijalankan pada Eclipse ....... 37 Gambar 1.75 Muncul smartphone Samsung pada Android devices chooser ............................................................................................... 37 Gambar 1.76 adb.exe kill-server dan start-server .............................. 38 Gambar 1.77 R cannot be resolved to a variable ............................... 38 Gambar 1.78 Error pada MainActivity.java ......................................... 39 Gambar 1.79 Ubah package pada AndroidManifest.xml ................... 39 Gambar 1.80 c. Pilih “com.example.mygl” ................................... 40 Gambar 1.81 Package pada AndroidManifest.xml telah diubah ....... 40 Gambar 1.82 d. Save file “AndroidManifest.xml” .......................... 41 Gambar 1.83 Fix pada MainActivity.java ............................................ 41 Gambar 1.84 New Android Application Project .................................. 42 Gambar 1.85 Configure Project .......................................................... 42 Gambar 1.86 Configure the attributes of the icon set ........................ 43 Gambar 1.87 Pilih “Blank Activity” ...................................................... 43 Gambar 1.88 Create “Blank Activity” .................................................. 44 Gambar 1.89 Tampilan Project .......................................................... 44 Gambar 1.90 Tampilan Project Membuat Titik ................................... 45 x