Analisis Kebutuhan
Aplikasi RIA yang akan dibangun menggunakan framework berbasis plug-in
yang berjalan pada web browser dengan perangkat Flash Player. Hal ini dilakukan karena Papervision3D bekerja pada
framework berbasis plug-in untuk menampilkan visualisasi 3D.
Perangkat lunak yang dibutuhkan dalam pemodelan 3D berfokus pada perancangan bangunan. SkecthUp merupakan modeller
yang dapat memenuhi kebutuhan tersebut. Model objek 3D yang telah diolah ditampilkan oleh Papervision3D agar menjadi lebih interaktif.
Selain perangkat lunak, dalam pembuatan aplikasi dibutuhkan perangkat keras yang mendukung perangkat lunak tersebut. Perangkat keras yang dibutuhkan dalam penelitian ini adalah perangkat keras dengan spesifikasi mampu menjalankan program Mulai Analisis Desain Implementasi Pengujian Selesai
Metode basis path testing ini memerlukan masukan berupa source code atau algoritme dari suatu perangkat lunak.
METODE PENELITIAN
Penelitian ini dilakukan dalam beberapa tahap. Tahap-tahap tersebut diselesaikan dengan metode penelitian yang dapat dilihat pada Gambar 4. Metode yang digunakan terdiri atas tahap analisis kebutuhan, desain, implementasi, dan pengujian.
Analisis Kebutuhan
Pada tahap awal, dilakukan analisis yang menghasilkan kebutuhan aplikasi berupa spesifikasi perangkat lunak, spesifikasi perangkat keras, kebutuhan fungsional aplikasi, dan data yang dibutuhkan dalam proses pengembangan aplikasi.
Gambar 4 Diagram metode penelitian.
Desain Aplikasi
Setelah tahap analisis dilakukan desain aplikasi. Desain dalam pembuatan aplikasi ini adalah pemodelan 3D denah kampus IPB, desain kebutuhan fungsional aplikasi, dan desain antarmuka aplikasi.
Implementasi
Pada tahap ini dilakukan implementasi pembuatan aplikasi berbasis web. Implementasi yang dilakukan meliputi
visualisasi objek 3D, implementasi antarmuka aplikasi, dan pembuatan fungsi penelusuran jalur.
Pengujian
Penelitian ini menggunakan metode pengujian white box dan black box. Pengujian yang dilakukan secara black box meliputi seluruh hasil keluaran dari fungsi-fungsi yang disediakan aplikasi. Pengujian yang dilakukan secara white box meliputi fungsi visualisasi model peta 3D dan fungsi pembentukan jalur.
Lingkungan Implementasi
Spesifikasi beberapa perangkat keras dan perangkat lunak yang digunakan dalam penelitian ini yaitu:
1 Perangkat keras:
processor Phenom X4 (Quad Core), RAM 4GB,
VGA HIS Radeon HD 6790 1GB, dan kamera DSLR Canon 1000D. 2 Perangkat lunak: FlashDevelop, Flash Player 9, Google SkecthUp 8, Notepad++,
Adobe Flash Builder 4, Papervision3D, dan Mozilla Firefox.
HASIL DAN PEMBAHASAN
Analisis Kebutuhan
Aplikasi RIA yang akan dibangun menggunakan framework berbasis plug-in
yang berjalan pada web browser dengan perangkat Flash Player. Hal ini dilakukan karena Papervision3D bekerja pada
framework berbasis plug-in untuk menampilkan visualisasi 3D.
Perangkat lunak yang dibutuhkan dalam pemodelan 3D berfokus pada perancangan bangunan. SkecthUp merupakan modeller
yang dapat memenuhi kebutuhan tersebut. Model objek 3D yang telah diolah ditampilkan oleh Papervision3D agar menjadi lebih interaktif.
Selain perangkat lunak, dalam pembuatan aplikasi dibutuhkan perangkat keras yang mendukung perangkat lunak tersebut. Perangkat keras yang dibutuhkan dalam penelitian ini adalah perangkat keras dengan spesifikasi mampu menjalankan program Mulai Analisis Desain Implementasi Pengujian Selesai
berbasis tiga dimensi. Perangkat keras yang dibutuhkan harus memiliki spesifikasi minimal processor yang mendukung teknologi
dual core dengan RAM minimal 1 GB dan VGA dengan memori minimal 512 MB. Hal ini disebabkan pemodelan objek 3D membutuhkan tenaga yang lebih untuk menggunakan resource komputer.
Tahap analisis kebutuhan fungsional aplikasi membahas fungsi-fungsi yang diperlukan dalam pembangunan aplikasi. Fungsi yang dibutuhkan dalam aplikasi ini berupa fungsi visualisasi peta 3D, fungsi menampilkan informasi, fungsi menampilkan foto, fungsi eksplorasi peta, dan fungsi penelusuran jalur. Fungsi-fungsi pada aplikasi akan disajikan dalam bentuk kode dengan format CampusTour3D-xxx (Lampiran 1).
Data yang digunakan dalam penelitian ini berupa denah rancang bangun atau master plan IPB Dramaga. Data ini digunakan untuk merancang peta 3D IPB. Data situs-situs penting IPB yang diperoleh dari aplikasi
website campus tour IPB digunakan untuk visualisasi informasi.
Desain Aplikasi
Pemodelan 3D denah IPB perlu memerhatikan efisiensi ukuran dan menggunakan poligon yang sederhana. Hal ini dilakukan agar proses pembacaan model 3D pada program menjadi tidak terlalu berat.
Untuk membuat model 3D yang ukuran dan bentuknya sesuai, dibutuhkan denah rancang bangun sebuah lokasi. Penelitian ini menggunakan denah kampus IPB Dramaga sehingga pemodelan 3D bangunan IPB mendekati bentuk bangunan sesungguhnya. Denah kampus IPB Dramaga dapat dilihat pada Gambar 5.
Pada tahap pemodelan, denah kampus IPB Dramaga diletakkan pada sebuah plane dan dibuat objek-objek gedung sesuai dengan cetakan denah. Peletakan denah sebagai plane
dapat dilihat pada Gambar 6. Objek dimodelkan dengan poligon dan vertex
sederhana tanpa mengurangi kesesuaian bentuk gedung yang sebenarnya. Pada Gambar 7, ditunjukkan pemodelan objek gedung yang disesuaikan dari bentuk denah.
Pemodelan fungsional aplikasi dapat dilihat pada use case diagram yang merupakan gambaran dari fungsionalitas yang dapat dilakukan oleh pengguna pada aplikasi.
Use case diagram untuk pengguna dapat
dilihat pada Lampiran 2. Setelah dibuat use case diagram, dirancang pula class diagram
untukmenggambarkan struktur dan deskripsi
class, package, dan object beserta hubungan satu sama lain yang dapat dilihat pada Lampiran 3.
Gambar 5 Denah kampus IPB Dramaga.
Gambar 6 Denah kampus IPB Dramaga dijadikan dasar pemodelan.
Gambar 7 Pemodelan objek 3D dengan poligon.
Antarmuka aplikasi dirancang seperti bentuk peta pada umumnya. Terdapat mata angin dan legenda pada elemen indikator arah peta. Informasi bangunan ditampilkan dengan mengklik salah satu objek 3D pada peta. Informasi yang ditampilkan berupa foto bangunan dan keterangan bangunan tersebut. Bentuk rancangan antarmuka aplikasi dicantumkan pada Gambar 8 dan Gambar 9.
Gambar 8 Tampilan rancangan antarmuka peta 3D.
Gambar 9 Tampilan rancangan antarmuka informasi gedung.
Implementasi Aplikasi
Implementasi yang dilakukan ialah visualisasi model 3D yang telah dibuat pada tahap desain. Model 3D tersebut diekspor ke bentuk XML agar bisa diproses oleh Papervision3D. Bentuk XML yang didukung Papervision3D harus berjenis Collada dengan ekstensi *.dae. Terdapat beberapa bagian elemen dae yang ditunjukkan dari nama tag -nya.
Setiap poligon yang membentuk sebuah objek 3D merepresentasikan sebuah elemen geometry dengan nama tag instance_geometry. Contoh elemen geometry
dengan nama tag instance_geometry dapat dilihat pada Gambar 10.
Elemen geometry yang saling berhubungan disatukan menjadi satu elemen dan diberi tag
dengan nama node. Beberapa elemen node
yang saling berhubungan diberi id node dan
name node pada tag-nya sesuai dengan nama bangunan yang dimodelkan. Sebagai contoh, instance_geometry pertama diberi nama “REKTORAT”, yang kedua diberi nama“LSI”, dan seterusnya. Contoh pemberian id node dan name node dapat dilihat pada Gambar 11.
Gambar 10 Taginstance_geometry pada dokumen dae.
Gambar 11 Pemberian id node dan name node.
Elemen instance_geometry yang termasuk situs-situs penting di IPB diberi tag node, sedangkan elemen instance_geometry yang bersifat umum dan penunjang seperti jalur, mata angin, dan danau tidak diberikan tag node.
Dokumen Collada yang berbentuk XML akan diterjemahkan oleh Papervision3D menjadi bentuk objek 3D. Hasil dari terjemahan tersebut akan ditampilkan dalam bentuk objek 3D berbasis Adobe Flash. Tampilan dari objek yang diterjemahkan oleh Papervision3D dapat dilihat pada Gambar 12.
Gambar 12 Objek 3D peta IPB hasil Papervision3D.
Hasil dari terjemahan Papervision3D pada Gambar 12 kurang terlihat tiga dimensi. Hal ini disebabkan tidak adanya penambahan efek pencahayaan dan penggunaan material yang tepat. Terlihat pada Gambar 12, objek gedung pada bagian dinding terlihat polos dan tidak memiliki efek pencahayaan yang baik, sedangkan pada atap bagian objek 3D, penggunaan material tidak diberikan efek
pencahayaan. Untuk memperbaiki hasil visualisasi tersebut, perlu ditambahkan efek pencahayaan dan bayangan pada bagian dinding dan atap objek. Pada objek tersebut, ditambahkan turunan kelas PointLight3D dari Papervision3D di baris program. Kelas tesebut digunakan untuk menambahkan efek cahaya dan pengaktifan kelas bayangan. Penambahan efek cahaya di baris program dapat dilihat pada Gambar 13.
Gambar 13 Penambahan efek cahaya pada baris program.
Library Papervision3D memiliki beberapa kelas untuk memunculkan efek bayangan, antara lain FlatShadeMaterial, Gouraud-Material, dan PhongMaterial. Kelas ini berfungsi untuk memanipulasi dan memberi efek bayangan pada material objek 3D.
Dokumen Collada memiliki elemen
library_materials yang menyusun material objek 3D yang telah dibangun. Material yang tersusun dapat berupa warna, tekstur, dan gambar. Contoh material yang digunakan pada objek 3D dapat berupa file gambar berukuran kecil dengan ekstensi *.png atau *.jpg yang dapat dilihat pada Gambar 14.
Gambar 14 Material gambar atap. Setiap material yang terpasang memiliki id
dan name pada elemen tag material miliknya. Material yang diketahui id miliknya dapat dimanipulasi. Gambar 15 adalah contoh id dan
name pada tag material.
Manipulasi material dilakukan dengan menambahkan kelas efek bayangan di baris program. Kelas-kelas tersebut diuji satu per satu untuk memberikan bayangan pada material yang dimiliki objek 3D. Kelas efek bayangan yang diujikan antara lain FlatShadeMaterial, GouraudMaterial, dan PhongMaterial. Kelas-kelas tersebut meng-gunakan dua jenis warna untuk membuat efek bayangan. Penambahan efek bayangan di baris program dapat dilihat pada Gambar 16.
Hasil dari kelas-kelas yang telah diujikan dapat dilihat pada Gambar 17. Hasil tersebut menunjukan kelas GouraudMaterial lebih baik
dalam pemberian efek bayangan pada model objek 3D. Dengan demikian dalam aplikasi ini objek 3D menggunakan GouraudMaterial sebagai efek bayangan.
Gambar 15 Elemen library_materials pada dokumen collada.
(a)
(b)
(c)
Gambar 16 Penambahan kelas efek bayangan, FlatShadeMaterial (a),
GouraudMaterial (b), dan PhongMaterial (c).
Kelas GouraudMaterial digunakan untuk memberikan kesan bayangan dengan menggunakan dua warna sebagai shading material terhadap objek. Hasilnya ialah objek yang memiliki warna berbeda di setiap poligon dan memiliki gradasi warna yang menciptakan efek bayangan.
Setelah menggunakan efek pencahayaan dan bayangan, tampilan objek 3D akan lebih terlihat lebih realistis. Gambar 12 adalah hasil terjemahan Papervision3D sebelum diberi efek pencahayaan, sedangkan Gambar 18 adalah objek 3D yang telah diberi efek pencahayaan.
Peta dengan visualisasi 3D dapat dilihat dari koordinat X, Y, dan Z. Setelah hasil visualisasi 3D, aplikasi dilanjutkan dengan pembentukan jalur. Jalur yang dibentuk dapat ditelusuri sehingga memberi kesan menjelajah pada pengguna.
Implementasi antarmuka aplikasi dise-suaikan dengan rancangan antarmuka berbentuk peta. Pada umumnya, sebuah peta memiliki legenda dan arah mata angin. Antarmuka aplikasi memiliki legenda dan arah mata angin sehingga membantu
pengguna untuk mencari lokasi pada peta 3D. Bentuk tampilan antarmuka aplikasi dapat dilihat pada Lampiran 4.
(a)
(b)
(c)
Gambar 17 Hasil penggunaan efek bayangan, FlatShadeMaterial (a),
GouraudMaterial (b), dan PhongMaterial (c).
Gambar 18 Penambahan efek pencahayaan pada objek 3D.
Pembentukan jalur dibentuk dari persamaan kurva quadratic Bezier. Kurva
quadratic Bezier membentuk kurva dengan tiga titik pengontrol. Titik tersebut menghubungkan titik awal (P0) sampai ke titik akhir (P2) dan dikontrol dengan titik Bezier (P1). Contoh kurva quadratic Bezier dapat dilihat pada Gambar 19. Setiap kurva hasil persamaan kurva quadratic Bezier disusun menjadi jalur yang dapat dimanipulasi koordinatnya berdasarkan sumbu X, Y, Z.
Gambar 19 Contoh kurva quadratic Bezier. Setiap kurva yang dibentuk oleh persamaan kurva quadratic Bezier saling dihubungkan menjadi satu bentuk jalur yang utuh. Penambahan titik Bezier pada kurva akan menjadi titik pengontrol baru dan membentuk kurva quadratic Bezier baru. Titik pengontrol pada kurva tersebut dijadikan titik koordinat untuk pembentukan jalur. Contoh kurva Bezier dengan penambahan titik pengontrol dapat dilihat pada Gambar 20.
(a)
(b)
Gambar 20 Kurva Bezier yang ditambahkan titik pengontrol, satu titik pengontrol (a), dua titik pengontrol (b).
Gambar 20 (a) menunjukkan kurva Bezier dengan titik awal (P0) dan titik akhir (P2) yang dibentuk dengan satu titik kontrol (O1). Pada Gambar 20 (b), kurva yang ditambahkan titik pengontrol baru akan membentuk titik Bezier baru (Q1) dan kurva Bezier baru. Setelah penambahan titik pengontrol baru, terdapat
dua kurva Bezier, yaitu (P0-Q1) dan (Q1-P2) dengan dua titik pengontrol (O1) dan (O2).
Pembentukan jalur disusun dengan 12 titik Bezier. Dua titik sebagai titik awal dan titik akhir, sedangkan sepuluh titik lainnya menjadi titik pengontrol. Setiap titik memiliki nilai koordinat X,Y, dan Z untuk membentuk kesesuaian kurva dengan jalur pada peta 3D.
Berdasarkan sudut pandangnya, bentuk jalur pada aplikasi ini dibagi menjadi tiga bagian bidang koordinat, yaitu bidang XY, bidang XZ, dan bidang ZY. Contoh jalur yang dibentuk berdasarkan bidang koordinat masing-masing pada Gambar 21.
Penelusuran jalur diperoleh dari hasil pembentukan jalur. Pada peta 3D, penelusuran jalur dilakukan dengan kamera yang bergerak dari sudut pandang pengguna mengikuti kurva yang dibentuk sesuai dengan jalur pada peta 3D. Bidang koordinat XY, XZ, dan ZY menggunakan lingkaran berwarna hijau sebagai penanda kamera yang mengikuti bentuk jalur. Kecepatan penelusuran jalur ditentukan dari banyaknya titik yang membentuk kurva. Semakin banyak titik yang membentuk kurva, kecepatan penelusuran semakin lambat.
Pengujian Aplikasi
Setelah aplikasi dibangun, dilakukan pengujian fungsi. Fungsi penelusuran jalur diujikan dengan pembentukan jalur. Jalur dapat dibentuk dengan menekan dan menggeser titik koordinat pada bidang XY, XZ, atau ZY. Aplikasi dapat menelusuri jalur yang telah dibentuk sehingga memberikan kesan menjelajahi denah kampus IPB Dramaga. Gambar penelusuran jalur aplikasi peta 3D dapat dilihat pada Lampiran 5.
Fungsi-fungsi yang diuji secara white box
hanya fungsi penting dalam aplikasi, yaitu fungsi visualisasi 3D dan penelusuran jalur. Hasil pengujian white box pada fungsi visualisasi 3D menghasilkan visualisasi objek 3D yang dapat menampilkan informasi. Baris program yang memiliki kesalahan tidak dapat menampilkan visualisasi objek 3D. Fungsi penelusuran jalur yang diujikan secara white box menghasilkan pergerakan kamera yang bergerak mengikuti bentuk jalur. Baris program yang memiliki kesalahan menghasilkan kamera yang tidak dapat bergerak menelusuri jalur yang dibentuk.
Fungsi yang diujikan secara black box
ialah seluruh fungsi yang disediakan aplikasi
dengan hasil output yang sesuai. Pengujian
black box dilakukan oleh pengguna sebanyak 12 orang yang terdiri atas 2 mahasiswa TPB IPB, 6 mahasiswa IPB dari berbagai fakultas, dan 4 orang alumni IPB. Bentuk pengujian
white box dan black box beserta hasilnya dapat dilihat pada Lampian 6 dan Lampiran 7.
(a)
(b)
(c)
Gambar 21 Jalur berdasarkan bidang XY (a), bidang XZ (b), dan
bidang ZY (c).
Pengujian yang dilakukan yaitu kesesuaian peta 3D dengan peta 2D. Aplikasi dapat menampilkan bentuk peta 3D IPB sesuai dengan bentuk dan ukuran denah rancang bangun IPB Dramaga. Aplikasi dapat menampilkan informasi setiap gedung. Informasi yang ditampilkan berupa data dari
situs-situs penting di IPB Dramaga. Kesesuaian peta 3D dengan peta 2D diujikan menggunakan kuesioner. Kuesioner disebar kepada 10 responden. Responden terdiri atas 3 mahasiswa baru IPB (TPB), 5 mahasiswa IPB dari berbagai jurusan dan fakultas yang berbeda, dan 2 alumni IPB. Hasil kuesioner pada Lampiran 8 dapat dilihat pada Tabel 1. Tabel 1 Hasil Kuesioner
Pertanyaan Jumlah A Jumlah B Jumlah C No. 1 10 0 0 No. 2 6 0 4 No. 3 9 0 1 No. 4 4 0 6 No. 5 10 0 0 No. 6 3 2 5 No. 7 5 0 5 No. 8 10 0 0 No. 9 10 0 0 Total(%) 74,4% 2,2% 23,4% Keterangan: A = Memuaskan B = Tidak memuaskan C = Cukup memuaskan
Pada pertanyaan pertama dari kuesioner evaluasi, mengenai tampilan aplikasi yang berbentuk peta 3D IPB, 100% responden memberikan nilai memuaskan. Hal tersebut disebabkan seluruh responden sudah mengetahui bentuk umum denah IPB. Pertanyaan kedua menjelaskan tentang peta 3D yang ditampilkan aplikasi sesuai dengan denah IPB yang sebenarnya. Responden menjawab bahwa 60% dari peta 3D yang ditampilkan aplikasi sesuai. Responden menganggap kesesuaian peta 3D dari bentuk objek bangunannya, namun terdapat kekurangan di bagian warna dan tekstur objek sehingga koresponden sedikit sulit untuk mengenali objek 3D. Pertanyaan ketiga menjelaskan aplikasi dapat membantu pengguna mencari dan mengenali lokasi-lokasi penting di IPB. Hal ini disebabkan koresponden dapat langsung mencari lokasi yang divisualisasikan dengan objek 3D. Pertanyaan keempat menjelaskan kemudahan mencari lokasi-lokasi di IPB dengan peta 3D dibandingkan dengan peta 2D. Sebanyak 60% koresponden menjawab cukup memuaskan. Hal ini disebabkan pengguna harus memeriksa satu persatu bangunan pada peta 3D. Pertanyaan kelima menjelaskan tentang penggunaan peta 3D lebih baik dibandingkan peta 2D. Koresponden menilai peta 3D lebih
baik dalam hal visualisasi karena akan tampak lebih realistis. Pertanyaan keenam menjelaskan pelatihan untuk menggunakan aplikasi ini. Responden menilai perlu diberikan latihan atau petunjuk secara jelas dalam menggunakan aplikasi peta 3D. Pertanyaan kedelapan menjelaskan tentang kesesuaian peta 3D dengan peta 2D. Seluruh responden menilai peta 3D pada aplikasi sesuai dengan bentuk peta 2D. Pertanyaan kesembilan menjelaskan tentang nilai keseluruhan aplikasi yang telah dibuat. Responden menilai aplikasi ini memuaskan.