RICH INTERNET APPLICATION TUR KAMPUS TIGA DIMENSI INSTITUT PERTANIAN BOGOR
RILAN MUHAMMAD FIQRI
DEPARTEMEN ILMU KOMPUTER FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM INSTITUT PERTANIAN BOGOR BOGOR 2012
RICH INTERNET APPLICATION TUR KAMPUS TIGA DIMENSI INSTITUT PERTANIAN BOGOR
RILAN MUHAMMAD FIQRI
Skripsi sebagai salah satu syarat untuk memperoleh gelar SarjanaKomputer pada Departemen Ilmu Komputer
DEPARTEMEN ILMU KOMPUTER FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM INSTITUT PERTANIAN BOGOR BOGOR 2012
ABSTRACT FIQRI, RILAN MUHAMMAD. Rich Internet Application Campus Tour 3D of Bogor Agricultural University. Under supervision of FIRMAN ARDIANSYAH. Problem of location information has became a general thing that happens in every place, especially in locations that are spacious and have lots of room. Problems posed related to the ease of new visitors in exploring the place for the first time. This problem can be solved by the application of information which represents a place and a more interactive visualization. RIA Rich Internet Application (RIA) is a suitable technology to create interactive applications in terms of information or visualization. RIA is divided into two categories based on the framework: a framework based on JavaScript / AJAX and framework based on plug-ins. This study presents the application of RIA IPB web based campus tour. This application uses framework based on plug-ins. Application interface is designed to resemble a map. The application displays a 3D map of IPB to the user and displays information of important places in IPB. In addition, this application can trace the path in the map to give the impression of exploration for user. The pathway is formed by the Bezier curve equation in the XY fields, XZ fields, ZY fields. The formed lines can be manipulated based on the X, Y, and Z coordinates.
Keywords : 3D map, Bezier curve, IPB, RIA
Judul Skripsi Nama NRP
: Rich Internet Application Tur Kampus Tiga Dimensi Institut Pertanian Bogor : Rilan Muhammad Fiqri : G64070033
Menyetujui: Pembimbing
Firman Ardiansyah, S.Kom., M.Si. NIP. 19790522 200501 1 003
Mengetahui: Ketua Departemen Ilmu Komputer
Dr. Ir. Agus Buono, M.Si., M.Kom. NIP. 19660702 199302 1 001
Tanggal Lulus :
PRAKATA Puji dan syukur penulis panjatkan ke hadirat Allah Subhanahu wa Taβala atas segala rahmat dan hidayah-Nya sehingga penulis dapat menyelesaikan tugas akhir dengan judul Rich Internet Application Tur Kampus Tiga Dimensi Institut Pertanian Bogor. Penelitian ini dilaksanakan mulai Maret 2011 sampai dengan April 2012, bertempat di Departemen Ilmu Komputer Institut Pertanian Bogor. Penulis juga menyampaikan terima kasih kepada pihak-pihak yang telah membantu dalam penyelesaian tugas akhir ini antara lain: 1 Ibunda Nuri Rofiah, Ayahanda Asep Suparlan, serta adikku Rofan dan Firda yang telah mengisi kehidupan sehari-hari dengan nasehat dan kasih sayang. 2 Bapak Firman Ardiansyah, S.Kom., M.Si. selaku pembimbing yang selalu memberikan ide, semangat dan solusi kepada penulis selama pengerjaan penelitian ini. 3 Bapak Sony Hartono Wijaya, S.Kom., M.Kom. dan Bapak Endang Purnama Giri, S.Kom., M.Kom. yang telah bersedia untuk menjadi penguji. 4 Dean, Wisnugroho, Vai, Musthafa, Gamma, Rommy, Aco, Yanta, Ridwan, Otri, Paw, Sayed, Kaka dan semua anggota SIGAP yang lainnya serta seluruh penghuni Pondok AA yang selalu memberikan semangat dan kecerian . 5 Auzi, Rifki, Agung, Wiwiek, dan Bintang sebagai rekan seperjuangan satu bimbingan. 6 Fani Valerina yang senantiasa setia menemani, memberikan doa, dukungan, dan segala keperluan kepada penulis selama pengerjaan penelitian ini. 7 Rekan-rekan Ilkomerz 44 atas segala kebersamaan, bantuan, dan motivasi, dan kenangan indah yang telah mengisi kehidupan kampus ini. Semoga ketika kelak kita bertemu lagi, masingmasing dari kita telah memeroleh kesuksesannya masing-masing. Penulis menyadari bahwa masih terdapat kekurangan dalam penulisan skripsi ini. Semoga skripsi ini bermanfaat, menginspirasi dan dapat dikembangkan demi kemajuan teknologi.
Bogor, Juli 2012
Rilan Muhammad Fiqri
RIWAYAT HIDUP Rilan Muhammad Fiqri dilahirkan di Bandung pada tanggal 15 Januari 1990 dari pasangan Ibu Nuri Rofiah dan Ayah Asep Suparlan. Pada tahun 2007, penulis lulus dari Sekolah Menengah Atas PGRI 1 Bekasi dan diterima menjadi mahasiswa di Institut Pertanian Bogor (IPB) melalui jalur Undangan Seleksi Masuk IPB. Penulis menjadi mahasiswa di Departemen Ilmu Komputer, Fakultas Matematika dan Ilmu Pengetahuan Alam. Selama menjadi mahasiswa, penulis menjadi asisten Praktikum Komputer Grafik (2010) di Departemen Ilmu Komputer, IPB dan menjadi pembicara di beberapa acara workshop multimedia. Pada tahun 2010, penulis melaksanakan kegiatan praktik kerja lapangan di Badan Penelitian dan Pengembangan Pertanian selama 35 hari. Pada tahun 2011, penulis menjadi finalis PIMNAS XXIV di Universitas Hasanuddin, Makasar pada bidang PKM-Teknologi.
DAFTAR ISI Halaman DAFTAR GAMBAR .................................................................................................................. vi DAFTAR LAMPIRAN............................................................................................................... vi PENDAHULUAN Latar Belakang ........................................................................................................................ 1 Tujuan Penelitian..................................................................................................................... 1 Ruang Lingkup Penelitian ........................................................................................................ 1 TINJAUAN PUSTAKA Rich Internet Application ......................................................................................................... 1 Objek Tiga Dimensi (3D) ........................................................................................................ 2 Papervision3D ......................................................................................................................... 2 Kurva Bezier ........................................................................................................................... 2 Extensible Markup Language (XML) ....................................................................................... 3 Collada.................................................................................................................................... 3 Sistem Informasi Geografis (SIG) ............................................................................................ 3 Metode Pengujian .................................................................................................................... 3 METODE PENELITIAN Analisis Kebutuhan ................................................................................................................. 4 Implementasi ........................................................................................................................... 4 Pengujian ................................................................................................................................ 4 Lingkungan Implementasi ........................................................................................................ 4 HASIL DAN PEMBAHASAN Analisis Kebutuhan ................................................................................................................. 4 Desain Aplikasi ....................................................................................................................... 5 Implementasi Aplikasi ............................................................................................................. 6 Pengujian Aplikasi................................................................................................................... 9 KESIMPULAN DAN SARAN Kesimpulan ........................................................................................................................... 10 Saran ..................................................................................................................................... 10 DAFTAR PUSTAKA ................................................................................................................ 11 LAMPIRAN .............................................................................................................................. 12
v
DAFTAR GAMBAR Halaman 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
RIA yang dikembangkan oleh Adobe, Sun, dan Microsoft....................................................... 2 Struktur objek 3D. .................................................................................................................. 2 Contoh kurva Bezier............................................................................................................... 3 Diagram metode penelitian ..................................................................................................... 4 Denah kampus IPB Dramaga. ................................................................................................. 5 Denah kampus IPB Dramaga dijadikan dasar pemodelan. ....................................................... 5 Pemodelan objek 3D dengan poligon ...................................................................................... 5 Tampilan rancangan antarmuka peta 3D. ................................................................................ 6 Tampilan rancangan antarmuka informasi gedung. .................................................................. 6 Tag instance_geometry pada dokumen dae. ............................................................................ 6 Pemberian id node dan name node .......................................................................................... 6 Objek 3D peta IPB hasil Papervision3D.................................................................................. 6 Penambahan efek cahaya pada baris program.......................................................................... 7 Material gambar atap.............................................................................................................. 7 Elemen library_materials pada dokumen collada. ................................................................... 7 Penambahan kelas efek bayangan, FlatShadeMaterial (a), GouraudMaterial (b), dan PhongMaterial (c) ................................................................................................................... 7 Hasil penggunaan efek bayangan, FlatShadeMaterial (a), GouraudMaterial (b), dan PhongMaterial (c) ................................................................................................................... 8 Penambahan efek pencahayaan pada objek 3D........................................................................ 8 Contoh kurva quadratic Bezier ............................................................................................... 8 Kurva Bezier yang ditambahkan titik pengontrol, satu titik pengontrol (a), dan dua titik pengontrol (b) ......................................................................................................... 8 Jalur berdasarkan bidang XY (a), bidang XZ (b), dan bidang ZY (c) ....................................... 9
DAFTAR LAMPIRAN Halaman 1 2 3 4 5 6 7 8
Kebutuhan fungsional aplikasi................................................................................................ 13 Use case diagram untuk pengguna ......................................................................................... 14 Class diagram aplikasi ........................................................................................................... 15 Antarmuka aplikasi ................................................................................................................ 16 Gambar penelusuran jalur aplikasi peta 3D ............................................................................. 17 Pengujian white box aplikasi .................................................................................................. 19 Pengujian black box aplikasi .................................................................................................. 23 Kuesioner evaluasi kesesuaian peta 3D dengan peta 2D .......................................................... 24
vi
1
PENDAHULUAN Latar Belakang Manusia hidup di dalam ruangan atau tempat dan beradaptasi sesuai dengan kebutuhannya. Hal ini mengisyaratkan bahwa dalam membangun suatu aplikasi komputer untuk membantu manusia, kebutuhan manusia sebisa mungkin didekati. Aplikasi komputer tentunya membutuhkan interaksi antara manusia dan komputer yang difokuskan pada cara penyajian informasi dan cara pengguna menyatakan instruksi untuk memperoleh informasi yang diinginkan. Aplikasi komputer tersebut dibuat agar pengguna dapat berinteraksi dengan efektif dan efisien. Suatu tempat yang luas dan memiliki banyak ruangan sering menimbulkan masalah yang berkaitan dengan kemudahan pengunjung baru dalam menjelajahi tempat untuk pertama kali. Tidak semua orang bisa memberikan informasi sesuai dengan yang diharapkan oleh pengunjung baru. Hal ini bahkan terjadi pada orang yang telah lama tinggal di tempat tersebut yang seharusnya mengetahui informasi tentang tempat itu. Sebuah denah atau peta kecil sangat bermanfaat dalam pencarian suatu tempat, terutama pada tempat dengan wilayah yang luas. Salah satu contohnya ialah Institut Pertanian Bogor (IPB) Dramaga. Area IPB Dramaga yang luas terkadang dapat menyulitkan seseorang dalam mencari suatu lokasi atau gedung-gedung penting di IPB Dramaga. IPB memiliki denah sebagai petunjuk letak suatu tempat yang telah disajikan dalam website peta virtual IPB Dramaga. Website campus tour IPB Dramaga menggunakan peta virtual konvensional berbentuk dua dimensi dan menggunakan legenda yang dibedakan berdasarkan warna pada peta. Akan tetapi, denah tersebut belum bisa memenuhi keinginan pengunjung baru untuk mengetahui suatu tempat, baik dari segi visualisasi maupun akses yang dilewati. Jika dibandingkan dengan peta virtual tiga dimensi (3D), pengunjung baru bisa lebih mengetahui bentuk dan lokasi tempat tersebut. Peta 3D dapat memberikan pengalaman dan visualisasi yang lebih baik kepada pengguna. Riajelita (2004) telah membuat pemetaan denah kampus IPB Dramaga menggunakan MapServer berbasis web, kemudian Nasution (2007) telah membangun sebuah sistem informasi geografis ruangan kampus IPB Dramaga. Aplikasi tersebut menyajikan
beberapa tempat penting di IPB Dramaga. Aplikasi yang telah dibangun masih belum menunjang informasi secara visual untuk pengunjung yang baru pertama kali datang ke IPB. Selain itu, kampus IPB Dramaga saat ini masih dalam tahap melakukan renovasi dan pembangunan gedung-gedung baru. Hal tersebut menyebabkan beberapa lokasi di IPB Dramaga dipindahkan. Dari masalah yang telah disebutkan dikembangkan aplikasi yang dapat merepresentasikan informasi tempat dan visualisasi yang lebih sesuai dengan kondisi tempat dalam kampus IPB. Aplikasi yang demikian dapat memberikan pengalaman virtual dan kesan yang lebih kuat bagi pengguna serta kemudahan dalam mengakses informasi. Dengan demikian aplikasi ini diharapkan dapat memenuhi kebutuhan pengunjung akan informasi tata ruang dan tata letak gedung di IPB Dramaga. Teknologi berbasis web dengan framework Rich Internet Application (RIA) merupakan teknologi yang cocok digunakan pada aplikasi untuk kebutuhan visualisasi dan informasi. Tujuan Penelitian Tujuan penelitian ini ialah mengembangkan aplikasi Campus Tour 3D IPB berbasis web dengan framework RIA untuk mempermudah pengguna dalam memperoleh informasi lokasi di IPB Dramaga. Ruang Lingkup Penelitian Penelitian ini dilakukan untuk wilayah kampus IPB Dramaga. Lokasi yang akan digunakan dalam pengembangan aplikasi ialah lokasi-lokasi penting di kampus IPB Dramaga yang terletak di ruang terbuka. Pada penelitian ini, pembentukan peta tiga dimensi didasarkan pada denah rancang bangun IPB Dramaga. Pemodelan peta tiga dimensi mengabaikan level dan kontur lahan di IPB. Aplikasi yang akan dibuat dikhususkan berbasis web.
TINJAUAN PUSTAKA Rich Internet Application Rich Internet Application (RIA) adalah suatu teknologi yang menggabungkan kelebihan-kelebihan dari aplikasi berbasis web dan desktop sehingga lebih interaktif. Istilah RIA menggambarkan semacam aplikasi berbasis web yang menjadi lebih interaktif terhadap klien. Tujuan RIA ialah membuat aplikasi berbasis web bekerja lebih lancar
2
menyerupai aplikasi (Gwardak 2007).
berbasis
desktop
Interaktif, responsif, dan kaya dengan konten merupakan tiga karakteristik umum RIA. Dengan bantuan RIA, aplikasi web dapat memberikan umpan balik lebih cepat karena web tidak harus menampilkan ulang halaman web. Terlebih lagi, RIA sering mengandung animasi dan konten media. Semua aspek ini biasanya memberikan pengalaman yang lebih baik kepada pengguna (Zetie 2005). Kerangka RIA terbagi menjadi dua kategori: framework berbasis JavaScript atau AJAX dan framework berbasis plug-in. Framework berbasis JavaScript atau AJAX berbasis browser sehingga lebih ringan, sebaliknya framework berbasis plug-in lebih berat karena harus mengunduh dan memasang perangkat yang bersangkutan (Valdes 2009). RIA menyajikan antarmuka visual yang cantik dan interaktif. Sifatnya yang tidak bergantung pada suatu sistem operasi menjadikan RIA bisa menjangkau pengguna komputer lebih banyak (Valdes 2008). Salah satu contoh aplikasi yang dikembangkan dengan framework RIA berbasis plug-in ialah TweetDeck. Aplikasi tersebut dikembangkan masing-masing oleh Flex dari Adobe, JavaFX dari Sun, dan Silverlight dari Microsoft. Contoh aplikasi RIA dari ketiga pengembang tersebut dapat dilihat pada Gambar 1.
Gambar 1 RIA yang dikembangkan oleh Adobe, Sun, dan Microsoft. Objek Tiga Dimensi (3D) Objek 3D terdiri atas titik-titik (vertex) yang saling dihubungkan untuk membentuk kerangka (frame) yang diselimuti oleh surface. Surface merupakan objek 2D berupa poligon. Struktur objek 3D dapat dilihat pada Gambar 2. Bentuk interaktif obyek 3D yang berkualitas tinggi membutuhkan sistem pemrosesan grafis yang cukup dengan memperhitungkan hal-hal berikut (Nugroho 2004):
ο· Tampilan perspektif dari berbagai sudut pandang. ο· Pencahayaan, bayangan, dan tekstur. ο· Translasi dan rotasi gambar 3D pada resolusi tinggi.
Gambar 2 Struktur objek 3D. Papervision3D Papervision3D adalah open source engine yang membawa 3D ke Flash Player. Papervision3D berbentuk library yang ditulis dalam ActionScript 3.0 yang mudah digunakan dan memungkinkan pengembang untuk membuat 3D pada Flash. Aplikasi yang menggunakan Papervision3D dapat dipasang di web atau dibuat sebagai aplikasi AIR yang dapat diinstal. Pada dasarnya, Papervision3D terdiri atas satu set folder dengan struktur tertentu. Folder yang terdiri atas kelas modifikasi ActionScript yang memberikan arsitektur well-laid-out, memungkinkan pembuatan konten 3D di Flash. Set folder dimasukkan ke dalam proyek ActionScript, dan diakses dengan cara yang sama seperti mengakses API Flash atau kelas yang mungkin ditulis sendiri. Kelas analog seperti MovieClip, Sprite, dan Button serta tampilan kelas objek ada di dalam library Papervision3D disebut DisplayObject3D dengan variabel tersendiri, metode, dan properti. Oleh karena itu, setelah menginstalasi set folder, program dapat mengakses variabel DisplayObject3D, metode, dan sifat dalam kelas tersendiri seperti DisplayObject (Winder & Tondeur 2009). Kurva Bezier Kurva Bezier adalah satu teknik untuk membuat kurva dari satu set poin yang memenuhi persyaratan fungsional untuk mengatur kelengkungan dan menjaga kontinuitas. Kurva Bezier dirancang oleh Pierre Bezier untuk pemodelan badan mobil Renault dan lebih disempurnakan oleh Forrest, Gordon, dan Riesenfeld. Kurva Bezier
3
menggunakan empat titik kontrol, dua di antaranya adalah titik awal dan titik akhir P0 serta P3, dan dua titik lainnya yaitu P1 serta P2 yang mendekati titik kurva. Posisi titik tersebut berfungsi untuk mengontrol kurva. Convex hull atau poligon kontrol dibentuk oleh titik kontrol kurva yang dapat dilihat pada Gambar 3a dan Gambar 3b (Verth & Bishop 2004).
2009). Dokumen Collada menggambarkan aset digital dalam bentuk XML yang biasanya diidentifikasi dengan ekstensi *.dae (digital asset exchange). Sistem Informasi Geografis (SIG) SIG adalah suatu sistem informasi berbasis komputer yang digunakan untuk menyimpan, mengambil, mencari, menganalisis, dan menampilkan (secara spasial) informasi geografis. Dalam pembuatan SIG, diperlukan data geografis, yaitu suatu himpunan entitas yang memiliki sebuah lokasi. SIG menggunakan informasi wilayah tersebut untuk membuat keputusan (Budiyanto 2002). Metode Pengujian Terdapat dua kelas dasar dari pengujian perangkat lunak (Williams 2006), yaitu: a Black Box Testing
Gambar 3 Contoh kurva Bezier. Secara umum kurva Bezier didefinisikan oleh fungsi n i=0 Pi Jn,i (u)
Q(u) =
(1)
himpunan ππ adalah titik kontrol, dan Jn,i (u) = n i
=
n i
ui (1-u)
n-i
n! i! n-i !
(2) (3)
Extensible Markup Language (XML) XML adalah standar dokumen markup dari World Wide Web Consortium (W3C). XML mendefinisikan sintaks umum yang digunakan untuk melakukan markup data dengan tag sederhana dan mudah terbaca oleh manusia. XML adalah format dokumen paling portabel dan fleksibel yang didesain semenjak ASCII text file. XML menyediakan format standar untuk dokumen komputer yang cukup fleksibel untuk bermacam-macam domain seperti website, pertukaran data elektronik, vektor grafis, dan lain-lain (Harold & Means 2004). Collada Collada (Collaborative Design Activity) adalah skema open standar XML untuk membuat sebuah objek 3D yang dapat dikembangkan secara interaktif. Collada dikembangkan oleh Khoronos Group dan dapat digunakan secara gratis (Asyadiq
Black box testing merupakan strategi testing yang hanya memerhatikan faktor fungsionalitas dan spesifikasi perangkat lunak. Berbeda dengan white box, black box testing tidak membutuhkan pengetahuan mengenai alur internal (internal path), struktur, atau implementasi dari software under test (SUT). Pendekatan pengujian ini memfokuskan pada kebutuhan fungsional dari sistem. Black box testing ditujukan untuk mengabaikan struktur kontrol dan lebih terfokus terhadap domain informasi. b White Box Testing White box testing merupakan strategi pengujian yang diterapkan pada mekanisme internal suatu sistem atau komponen. Strategi ini digunakan untuk melihat mekanisme internal dari suatu produk perangkat lunak, khususnya untuk mengamati struktur dan logika kode-kode program yang ditulis. Pendekatan yang digunakan ialah struktur kontrol dari desain prosedural. Basis path testing merupakan suatu metode yang digunakan dalam teknik white box testing. Metode basis path ini sangat bermanfaat bagi seorang penguji perangkat lunak dalam menentukan: ο· Ukuran kompleksitas logika dari suatu struktur program, prosedur, dan fungsi. ο· Nilai kompleksitas untuk menentukan basis set (himpunan dasar) alur logika yang akan dieksekusi.
4
Metode basis path testing ini memerlukan masukan berupa source code atau algoritme dari suatu perangkat lunak.
visualisasi objek 3D, implementasi antarmuka aplikasi, dan pembuatan fungsi penelusuran jalur. Pengujian
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.
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:
Desain
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.
Implementasi
HASIL DAN PEMBAHASAN
Mulai
Analisis
Analisis Kebutuhan Pengujian
Selesai 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
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
5
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.
dilihat pada Lampiran 2. Setelah dibuat use case diagram, dirancang pula class diagram untuk menggambarkan struktur dan deskripsi class, package, dan object beserta hubungan satu sama lain yang dapat dilihat pada Lampiran 3.
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.
Gambar 5 Denah kampus IPB Dramaga.
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
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.
6
Gambar 10 Tag instance_geometry pada dokumen dae.
Gambar 8 Tampilan rancangan antarmuka peta 3D.
Gambar 11 Pemberian id node dan name node.
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 tagnya.
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.
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 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
7
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, GouraudMaterial, dan PhongMaterial. Kelas ini berfungsi untuk memanipulasi dan memberi efek bayangan pada material objek 3D.
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)
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 16 Penambahan kelas efek bayangan, FlatShadeMaterial (a), GouraudMaterial (b), dan PhongMaterial (c).
Gambar 14 Material gambar atap.
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.
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 menggunakan 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
(c)
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 disesuaikan 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
8
pengguna untuk mencari lokasi pada peta 3D. Bentuk tampilan antarmuka aplikasi dapat dilihat pada Lampiran 4.
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.
(a)
Gambar 19 Contoh kurva quadratic Bezier.
(b)
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) (c) Gambar 17 Hasil penggunaan efek bayangan, FlatShadeMaterial (a), GouraudMaterial (b), dan PhongMaterial (c). (b) Gambar 20 Kurva Bezier yang ditambahkan titik pengontrol, satu titik pengontrol (a), dua titik pengontrol (b).
Gambar 18 Penambahan efek pencahayaan pada objek 3D.
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
9
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.
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.
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.
(a)
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
(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
10
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
No. 1 No. 2 No. 3 No. 4 No. 5 No. 6 No. 7 No. 8 No. 9
Jumlah A 10 6 9 4 10 3 5 10 10
Jumlah B 0 0 0 0 0 2 0 0 0
Jumlah C 0 4 1 6 0 5 5 0 0
Total(%)
74,4%
2,2%
23,4%
Pertanyaan
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 lokasilokasi 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.
KESIMPULAN DAN SARAN Kesimpulan Penelitian ini menghasilkan aplikasi RIA peta 3D IPB Dramaga berbasis Adobe Flash. Visualisasi peta berbentuk 3D disesuaikan dengan denah rancang bangun IPB. Pemilihan material dan efek pencahayaan yang tepat dapat memvisualisasikan objek 3D yang lebih baik. Antarmuka aplikasi dirancang menyerupai bentuk peta sehingga dapat digunakan untuk mencari informasi gedung dan menjelajah kampus IPB Dramaga secara interaktif. Peta 3D dapat ditambahkan model objek 3D baru. Objek tersebut ditambahkan pada dokumen pemodelan objek 3D sebelumnya yang menggunakan denah rancang bangun yang sama. Model objek 3D yang telah ditambah objek baru diekspor ke bentuk Collada dan diberikan tag node dengan id dan name yang sesuai dari bentuk objek tersebut. Saran Pada pemodelan objek 3D dapat digunakan material baking texture yang menggabungkan bayangan, pencahayaan, refleksi, atau seluruh objek 3D ke dalam suatu gambar. Penggunaan baking texture dapat meningkatkan tingkat realistisitas objek tanpa menambah beban kerja program. Untuk penelitian selanjutnya, dapat dikembangkan aplikasi RIA dengan framework yang lain seperti HTML5, Google Web Toolkit, dan yang mendukung berbagai perangkat seperti tablet dan smartphone. Pengembangan aplikasi menggunakan DBMS dan penambahan beberapa fitur seperti virtual reality, augmented reality, serta finder path and room sehingga aplikasi ini menjadi lebih kaya dan interaktif.
11
DAFTAR PUSTAKA Asyadiq H. 2009. Model pembuatan peta virtual interaktif dengan visualisasi tiga dimensi berbasis RIA (Rich Internet Application) studi kasus Universitas Pendidikan Indonesia [skripsi]. Bandung: Departemen Ilmu Komputer, Universitas Pendidikan Indonesia. Budiyanto E. 2002. Sistem Informasi Geografis Menggunakan Arc View GIS. Yogyakarta: Andi. Gwardak L. 2007. Exploring Usability Guidelines for Rich Internet Applications. Lund: Department of Informatics, Lund University. Harold ER, Means WS. 2004. XML in a Nutshell. Sebastopool: OβReilly. Nasution RH. 2007. SIG (Sistem Informasi Goegrafis) ruangan kampus IPB Dramaga [skripsi]. Bogor: Fakultas Matematika dan Ilmu Pengetahuan Alam, Institut Pertanian Bogor. Nugroho WA. 2004. Pengembangan sistem virtual room navigator dengan visualisasi 3D[skripsi]. Bogor: Fakultas Matematika dan Ilmu Pengetahuan Alam, Institut Pertanian Bogor.
Riajelita L. 2004. Pemetaan berbasis web dengan menggunakan MapServer dan PhpMapScript [skripsi]. Bogor: Fakultas Matematika dan Ilmu Pengetahuan Alam, Institut Pertanian Bogor. Valdes R. 2008. Market Scope for Ajax Technology and RIA Platforms. Stampford: Gartner. Valdes R. 2009. Key Issues in Rich Internet Application Platforms and User Experience. Stampford: Gartner. Verth JM van, Bishop LM. 2004. Essential Mathematics for Games and Interactive Applications: A Programmerβs Guide. California: Morgan Kaufmann. Williams L. 2006. A (Partial) Introduction to Software Engineering Practices and Methods. http://www.cs.umd.edu/~mvz/cmsc435s09/pdf/Williams-draft-book.pdf. Ed ke5. [12 Juli 2012]. Winder J, Tondeur P. 2009. Papervision3D Essentials. Birmingham: Packt Publ. Zetie C. 2005. The Rise Of Rich Internet Applications. New York: Forrester Research.
12
LAMPIRAN
13
Lampiran 1 Kebutuhan fungsional aplikasi Kode
Fungsi
CampusTour3D-001
Fungsi untuk menampilkan objek 3D dari collada menjadi objek visual berbentuk peta 3D.
CampusTour3D-002
Fungsi untuk memungkinkan pengguna mengeksplorasi peta 3D IPB.
CampusTour3D-003
Fungsi untuk menampilkan keterangan dari lokasi di IPB pada peta 3D.
CampusTour3D-004
Fungsi untuk menampilkan foto dari lokasi di IPB pada peta 3D.
CampusTour3D-005
Fungsi untuk menampilkan legenda peta pada aplikasi.
CampusTour3D-006
Fungsi untuk mengubah titik Bezier pembentuk jalur pada bidang XY, XZ, dan ZY.
CampusTour3D-007
Fungsi untuk menambah titik Bezier pembentuk jalur pada bidang XY, XZ, dan ZY.
CampusTour3D-008
Fungsi untuk mengurangi titik Bezier pembentuk jalur pada bidang XY, XZ, dan ZY.
CampusTour3D-009
Fungsi untuk menelusuri jalur yang terbentuk dan divisualisasikan pada peta 3D.
CampusTour3D-010
Fungsi untuk menghentikan penelusuran jalur pada peta 3D dan mengembalikan posisi kamera ke titik awal.
CampusTour3D-011
Fungsi untuk memberi petunjuk kepada pengguna untuk melakukan eksplorasi pada peta.
14
Lampiran 2 Use case diagram untuk pengguna
Melihat peta 3D IPB
Eksplorasi peta 3D IPB
Melihat keterangan lokasi IPB
Melihat foto lokasi IPB
Pengguna
Melihat legenda peta IPB
Mengubah titik Bezier pada jalur
Menambah titik Bezier pada jalur
Mengurangi titik Bezier pada jalur
Menelusuri jalur peta 3D
Memberhentikan penelusuran jalur
Mendapat petunjuk
15
Lampiran 3 Class diagram aplikasi Help mcHelp :MovieClip picHelp :Loader ketHelp : Spirte PicKetHelp :Loader +Help() -helpMouseOver() -helpMouseOut()
Viewport ball : TravelBall controlPoints : Array curvePoints : Array sizeW : Num sizeY : Num viewType : String d1 :String d2 :String p1 :DraggablePoint p2 :DraggablePoint +Viewport() +setSize(Num, Num) +addControlPoint (Num) +removeControlPoint (Num) +redraw() +redrawPath() +drawCurvePoints (Num, Num) +drawLinePoints (Num, Num) +pennerPointOnCurve (Object, Object, Object) +stopTravel() +startTravel (Array, Num, Num)
DraggablePoint isBezier : Boolean point :MovieClip
SiteTest materialAsset : Class cameraPitch : Num cameraYaw : Num isOrbiting : Boolean previousMouseX : Num previousMouseY : Num light : PointLight3D dae :DAE objList :Array tooltip : ImageToolTip legenda:Legenda daeName : String idList :Array pointPoint : DraggablePoint bezierControlPoint : DraggableControlPoint viewXY : Viewport viewXZ : Viewport viewZY : Viewport p1 : Object p2 : Object selectedPoint : Num controlPoints : Array curvePoints : Array targetTravel : Boolean
+InfoPanel() -loadDataComplete(Event) #imgClick(Event) +initData(String, String) #redraw() #menuFotoClick (MouseEevent) #menuKeteranganClick (MouseEvent) +getWidth() +setWidth(int) +getHight() +setHeight(int)
FotoPanel panel : Sprite pic : Picture +FotoPanel() +initData(String) #redraw() -closeMouseClick (MouseEvent) +getWidth() +setWidth(int) +getHight() +setHeight(int)
ImageToolTip _width : Int _height : Int pic : Picture lbl : TextField
Picture
Legenda _width :Int _height :Int menuLegenda : Sprite
control :MovieClip +DraggableControlPoint()
_width : Int _height : Int closeSprite : Sprite picClose : Loader menuFoto : Sprite panelFoto : Sprite panelKeterangan : Sprite picKeterangan : Picture lblKeterangan : TextField fotoPanel : FotoPanel currentId : String
+SiteTest() +getControlPoint(Num) +redrawViewpoets() +addControlPoint (Num, Num, Num, Num) +removeControlPoint(Num) +setSelectedPoint(Num) +removeCurrentPoint() +stopTravel() +startTravel() -init3D() -renderTick(Event) -mouseWheelHandler (MouseEvent) -onMouseDown(MouseEvent) -onMouseUp(MouseEvent) -onMouseMove(MouseEvent) #loadDataComplete(Event) #obj3d_MouseOver(MouseEvent) #obj3d_MouseOut(MouseEvent) #obj3d_Click(MouseEvent)
+DraggablePoint() -startToDrag (MouseEvent) -stopToDrag (MouseEvent) -mouseMove (MouseEvent)
DraggableControlPoint
InfoPanel
+Legenda() +drawLineBangun()
mode : Int clickable :Boolean tag : String +Picture() +redraw() +getImage() +setImage() +isClickable()
+ImageToolTip +redraw() +initData (String, String) -closeMouseClick (MouseEvent) +getWidth() +setWidth(int) +getHight() +setHeight(int)
16
Lampiran 4 Antarmuka aplikasi 1 Gambar antarmuka utama aplikasi
2 Gambar antarmuka informasi aplikasi
17
Lampiran 5 Gambar penelusuran jalur aplikasi peta 3D 1 Gambar penelusuran jalur peta 3D pada titik pertama(posisi titik hijau).
2 Gambar penelusuran jalur peta 3D pada titik pertama(posisi titik hijau).
18
Lanjutan 3 Gambar penelusuran jalur peta 3D pada titik keempat(posisi titik hijau).
4 Gambar penelusuran jalur peta 3D pada titik akhir (posisi titik hijau).
19
Lampiran 6 Pengujian white box aplikasi 1 Tabel Pengujian white box fungsi visualisasi model peta 3D Flow Graph
Source Code protected function loadDataComplete (event : Event) : void (1) logError (βsiniβ) setting : String = loaderData.data lines : Array = setting.split (β\nβ) (2) IF
lines.length > 1
(3)
daeName = trims( lines[0] )
(4)
FOR
(5)
i=1 < lines.length
idList.push( trim( lines[i] ))
(6)
next
(7)
init3D()
(8)
gotoError
(9) END IF
Base path : 1
1 β 2 β 3 β 4 β 5 β 6 β 4 β 5 β 6 β β¦. β 7 β 9
2
1β2β3β4β5β6β7β9
3
1β2β8β9
i
20
Lanjutan 2 Tabel pengujian white box visualisasi model peta 3D Flow Graph
Source Code protected function map_LoadCompleteHandler (event : FileLoadEvent):void (1) PointLight3d() (2) gouraudMaterial = new GouraudMaterial (3) dae.replaceMaterialByName (gouraudMaterial,βID106β) dae.replaceMaterialByName (gouraudMaterial,βID114β) dae.replaceMaterialByName (gouraudMaterial,βID4β) dae.replaceMaterialByName (gouraudMaterial,βID122β) dae.scale = 6 scene.addChild(dae) (4) FOR (5)
i=0 < idList.length
IF data.length > 1
(6)
obj = DisplayObject3D obj = dae.getChildByName(data[0],true)
(7)
IF obj is DisplayObject3D
(8)
viewport : ViewportLayer viewport = viewport.containerSprite.getChildLaye r (obj, true, true) viewport.addEventListener (MouseEvent.MOUSE_OVER, obj3d_MouseOver) viewport.addEventListener (MouseEvent.MOUSE_OUT, obj3d_MouseOut) viewport.addEventListener (MouseEvent.MOUSE_CLICK, obj3d_Click)
(9)
gotoError
(10)
END IF
(11) gotoError (12) END IF (13) Next i
Base Path : 1
1 β 2 β 3 β 4 β 5 β 6 β 7 β 8 β 10 β 12 β 13 β 4 β 5 β 6 β 7 β 8 β 10 β 12 β 13 β β¦
2
1 β 2 β 3 β 4 β 5 β 6 β 7 β 9 β 10 β 12 β 13 β 4 β 5 β 6 β 7 β 9 β 10 β 12 β 13 β β¦
3
1 β 2 β 3 β 4 β 5 β 11 β 12 β 13 β 4 β 5 β 11 β 12 β 13 β β¦
4
1 β 2 β 3 β 4 β 5 β 6 β 7 β 8 β 10 β 12 β 13
21
Lanjutan 3 Tabel pengujian white box pembentukan jalur Flow Graph
Source Code public function redrawPath():void (1)
IF true p1
(2)
return p1
(3)
gotoError
(4)
END IF
(5)
FOR
(6)
i=0 < curvePoints.length
removeChild(curvePoints[i]) curvePoints[i] = null
(7)
Next i
(8)
curvePoints = [] g : Graphics = graphics startX : Number = p1.x startY : Number = p1.y endX : Number endY : Number thisPoint : MovieClip nextPoint : MovieClip g.lineStyle (2, 0x000000, 0.8) gmoveTo(startX, startY)
(9)
FOR
i=0 <
controlPoints.length-1 (10)
g.curveTo (thisPoint.x, thisPoint.y, endX, endY) draw (startX, startY, thisPoint.x, thisPoint.y, endX, endY)
(11) Next
i
(12) IF controlPoints.length > 0 (13)
lastPoint : movieClip = controlPoints[ControlPoints. length β 1] g.curveTo (lastPoint.x, lastPoint.y, p2.x, p2.y) drawCurvePoints (startX, startY, lastPoint.x, lastPoint.y, p2.x, p2.y)
(14)
ELSE g.lineTo (p2.x, p2.y) drawLinePoints (startX, startY, p2.x, p2.y)
(15)
END IF
(16) g.moveTo (p1.x, p1.y) (17) FOR
i=0 <
controlPoints.length (18)
thisPoint = controlPoints[i] g.lineTo (thisPoint.x, thisPoint.y)
22
Lanjutan Flow Graph
Source Code (19) Next i (20) g.lineTo (p2.x, p2.y) setChildrenIndex (p1, numChildren -1) setChildrenIndex (p2, numChildren -1) (21) FOR
i=0 <
controlPoints.length (22)
setChildIndex (controlPoints[i], numChildren -1)
(23) Next
i
(24) stopTravel()
Base Path : 1
1 β 2 β 4 β 5 β 6 β 7 β 5 β 6 β 7 β β¦ β 8 β 9 β 10 β 11 β 9 β 10 β 11 β 12 β 13 β 15 β 16 β 17 β 18 β 19 β 17 β 18 β 19 β 20 β 21 β 22 β 23 β 21 β 22 β 23 β 24
2
1 β 2 β 3 β 5 β 6 β 7 β 5 β 6 β 7 β β¦ β 8 β 9 β 10 β 11 β 9 β 10 β 11 β 12 β 13 β 15 β 16 β 17 β 18 β 19 β 17 β 18 β 19 β 20 β 21 β 22 β 23 β 21 β 22 β 23 β 24
3
1 β 2 β 4 β 5 β 6 β 7 β 8 β 9 β 10 β 11 β 9 β 10 β 11 β β¦ β 12 β 13 β 15 β 16 β 17 β 18 β 19 β 17 β 18 β 19 β 20 β 21 β 22 β 23 β 21 β 22 β 23 β 24
4
1 β 2 β 4 β 5 β 6 β 7 β 8 β 9 β 10 β 11 β 12 β 13 β 15 β 16 β 17 β 18 β 19 β 17 β 18 β 19 β β¦ β 20 β 21 β 22 β 23 β 21 β 22 β 23 β 24
5
1 β 2 β 4 β 5 β 6 β 7 β 8 β 9 β 10 β 11 β 12 β 14 β 15 β 16 β 17 β 18 β 19 β 17 β 18 β 19 β β¦ β 20 β 21 β 22 β 23 β 21 β 22 β 23 β 24
6
1 β 2 β 4 β 5 β 6 β 7 β 8 β 9 β 10 β 11 β 12 β 13 β 15 β 16 β 17 β 18 β 19 β 20 β 21 β 22 β 23 β 21 β 22 β 23 β β¦ β 24
7
1 β 2 β 4 β 5 β 6 β 7 β 8 β 9 β 10 β 11 β 12 β 14 β 15 β 16 β 17 β 18 β 19 β 20 β 21 β 22 β 23 β 21 β 22 β 23 β β¦ β 24
23
Lampiran 7 Pengujian black box aplikasi Kode
Deskripsi Uji
Kondisi Awal
Skenario Uji
Hasil yang Diharapkan
Hasil Uji
Campus Tour3D -001
Menampilkan visualisai peta 3D
Halaman utama aplikasi
Melihat tampilan peta 3D
Tampilan peta 3D
OK
Campus Tour3D -002
Mengeksplorasi peta 3D
Halaman utama aplikasi
Klik dan geser, scroll up dan scroll down
Rotasi peta 3D dan zoom in / zoom out
OK
Campus Tour3D -003
Menampilkan keterangan lokasi pada peta 3D
Halaman utama aplikasi
Klik objek 3D pada peta
Tampilan halaman informasi lokasi
OK
Campus Tour3D -004
Menampilkan foto lokasi pada peta 3D
Halaman informasi lokasi
Klik tombol menu βFotoβ
Tampilan halaman foto lokasi
OK
Campus Tour3D -005
Menampilkan legenda peta 3D
Halaman utama aplikasi
Melihat tampilan legenda
Tampilan legenda di halaman utama
OK
Campus Tour3D -006
Mengubah titik Bezier sesuai bidang koordinat XY, XZ, dan ZY
Halaman utama aplikasi
Klik dan geser titik Bezier pada salah satu bidang koordinat
Titik Bezier berubah posisi pada bidang koordinat XY, XZ, dan ZY
OK
Campus Tour3D -007
Menambah titik Bezier sesuai bidang koordinat XY, XZ, dan ZY
Halaman utama aplikasi
Klik tombol menu β+ Titik Bezierβ
Titik Bezier bertambah pada bidang koordinat XY, XZ, dan ZY
OK
Campus Tour3D -008
Mengurangi titik Bezier sesuai bidang koordinat XY, XZ, dan ZY
Halaman utama aplikasi
Klik tombol menu β- Titik Bezierβ
Titik Bezier berkurang pada bidang koordinat XY, XZ, dan ZY
OK
Campus Tour3D -009
Menelusuri jalur yang terbentuk dengan kamera divisualisasikan pada peta 3D
Halaman utama aplikasi
Klik tombol menu βTelusuri Jalurβ
Kamera bergerak mengikuti jalur yang terbentuk
OK
Campus Tour3D -010
Menghentikan kamera yang menelusuri jalur
Halaman utama aplikasi
Klik tombol menu βStop / Eksplorasiβ
Kamera berhenti dan kembali ke posisi semula
OK
Campus Tour3D -011
Memberikan petunjuk kepada pengguna
Halaman utama aplikasi
Mouse over lambang tanda tanya
Tampilan informasi bantuan
OK
24
Lampiran 8 Kuesioner evaluasi kesesuaian peta 3D dengan peta 2D
Nama
:
Tanggal Lahir
:
Pekerjaan
:
Pendidikan
:
Jenis Kelamin
:
Kuesioner ini dibuat untuk mendapatkan informasi dari implementasi aplikasi Campus Tour 3D IPB. Terima kasih Anda telah turut berpartisipasi dalam pengisian kuesioner ini. Silahkan memilih satu jawaban Anda dari setiap pertanyaan di bawah ini : Berikan tanda lingkaran (O) untuk jawaban yang menurut anda paling tepat. 1.
Apakah tampilan aplikasi ini berbentuk peta 3D IPB? a. Iya b. Tidak c. Cukup
2.
Apakah aplikasi peta 3D yang ditampilkan sesuai dengan denah IPB? a. Iya b. Tidak c. Cukup
3.
Apakah aplikasi peta 3D ini dapat membantu anda mengenali lokasi-lokasi seperti Fakultas, Asrama, dan berbagai Fasilitas di IPB? a. Iya b. Tidak c. Cukup
4.
Apakah anda mudah mencari lokasi-lokasi penting di IPB dengan aplikasi peta 3D ini? a. Iya b. Tidak c. Cukup
5.
Apakah penggunaan peta 3D ini lebih baik dari penggunaan peta 2D? a. Iya b. Tidak c. Cukup
6.
Apakah anda perlu latihan menggunakan aplikasi ini? a. Iya b. Tidak c. Cukup
7.
Setelah menggunakan aplikasi ini apakah anda dapat mengetahui denah IPB? a. Iya b. Tidak c. Cukup
8.
Apakah visualisasi objek peta 3D IPB sesuai dengan peta 2D IPB? a. Iya b. Tidak c. Cukup
25
Lanjutan 9.
Pendapat anda tentang nilai keseluruhan aplikasi ini? a. b. c.
Saran
Baik Buruk Cukup
