Rich Internet Application Tur Kampus Tiga Dimensi Institut Pertanian Bogor

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)
vi