Pembangunan Peta Kampus 3D Universitas Komputer Indonesia Berbasis WEBGL

(1)

PEMBANGUNAN PETA KAMPUS 3D UNIVERSITAS

KOMPUTER INDONESIA BERBASIS WEBGL

SKRIPSI

Diajukan untuk Menempuh Ujian Akhir Sarjana

MUHAMMAD RIZKI UTAMA

10109346

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNIK DAN ILMU KOMPUTER

UNIVERSITAS KOMPUTER INDONESIA

(2)

v

DAFTAR ISI

ABSTRAK ... i

ABSTRACT

... ii

KATA PENGANTAR ... iii

DAFTAR ISI ... v

DAFTAR GAMBAR ... xi

DAFTAR TABEL ... xiv

DAFTAR SIMBOL ... xvi

DAFTAR LAMPIRAN ... xviii

BAB 1

PENDAHULUAN ... 1

1.1

Latar Belakang ... 1

1.2

Rumusan Masalah ... 2

1.3

Maksud dan Tujuan... 2

1.4.

Batasan Masalah ... 3

1.5.

Metodologi Penelitian ... 4

1.5.1

Metode Pengumpulan Data ... 4

1.5.2

Metode Pembangunan Perangkat Lunak ... 5

1.6

Sistematika Penulisan ... 6

BAB 2

TINJAUAN PUSTAKA ... 9

2.1

Profil UNIKOM ... 9

2.1.1

Sejarah UNIKOM ... 9

2.1.2

Struktur Organisasi ... 12

2.1.3

Visi, Misi dan Gol ... 13

(3)

vi

2.1.3.2

Misi ... 13

2.1.3.3

Gol... 13

2.1.4

Makna Lambang Universitas Komputer Indonesia ... 13

2.2

LANDASAN TEORI ... 15

2.2.1

Peta

... 15

2.2.2

Definisi Kampus ... 16

2.2.3

3D

... 16

2.2.4

Sistem Koordinat 3D... 17

2.2.5

WebGL

... 18

2.2.6

Analisis Pengkodean Ruangan Kampus ... 23

2.2.7

Perancangan Sistem ... 23

2.2.7.1

Diagram Konteks (

Context Diagram

) ... 23

2.2.7.2

Data Flow Diagram(DFD) ... 24

2.2.8.3

ERD(Entity Relationship Digital) ... 25

2.2.8

Konsep Dasar Basis Data ... 26

2.2.8.1

Pengertian Basis Data ... 26

2.2.8.2

Database Manajemen System( DBMS) ... 27

2.2.10

Internet

dan

Intranet

... 27

2.2.10.1 Pengertian

Internet

... 27

2.2.10.2 Pengertian

Intranet

... 28

2.2.11

Application Programming Interface

(

API

) ... 29

2.2.12

Google Earth

API ... 29

2.2.12.1 Mengunakan

Google Earth API

... 30

2.2.13

World Wide Web

(WWW) ... 35

(4)

vii

2.2.15

Javascript... 36

2.2.16

Hyper Text Processor

(PHP)

... 37

2.2.17

CSS

... 37

2.2.18

SQL

... 38

2.2.19

Tools

Implementasi ... 39

2.2.19.1 Google Earth ... 39

2.2.19.2 Adobe Dreamweaver ... 40

2.2.19.3 Google-SketchUp ... 41

2.2.19.4 CopperCube ... 43

2.2.19.5 WampServer ... 48

BAB 3

ANALISIS DAN PERANCANGAN SISTEM ... 49

3.1

Analisis Sistem... 49

3.1.1

Analisis Masalah ... 49

3.1.2

Analisis Sistem Yang Sedang Berjalan... 49

3.1.3

Analisis Sistem Yang Akan Dibangun ... 51

3.1.4

Analisis Kebutuhan Non Fungsional ... 55

3.1.4.2 Analisis

Google-Earth API

pada Sistem ... 55

3.1.4.3

Analisis

Google Sketch Up

pada Sistem ... 56

3.1.4.4

Analisis

WebGL

pada Sistem ... 58

3.1.4.5 Analisis Pencarian Ruangan dalam Aplikasi ... 60

3.1.4.6

Analisis Kebutuhan Perangkat Keras ... 63

3.1.4.7

Analisis Kebutuhan Perangkat Lunak ... 63

3.1.4.8

Analisis Pengguna Sistem(

User

) ... 64

3.1.6

Analisis Basis Data ... 65

(5)

viii

3.1.7

Analisis Kebutuhan Fungsional ... 65

3.1.7.1

Diagram Konteks ... 66

3.1.7.2

DFD Level 1 Peta Kampus 3D Universitas Komputer Indonesia ... 67

3.1.7.3

DFD

Level

2 Proses 2 Pengolahan Data Gedung... 68

3.1.7.4

DFD

Level

2 Proses 3 Pengolahan Data Lantai ... 69

3.1.7.5 DFD

Level

2 Proses 3 Pengolahan Data Ruang ... 70

3.1.8

Spesifikasi Proses... 71

3.1.9

Kamus Data ... 76

3.2

Perancangan Sistem ... 79

3.2.1

Perancangan Basis Data ... 79

3.2.1.1 Diagram Relasi... 79

3.2.1.2 Struktur Tabel ... 80

3.3

Perancangan Struktur Menu ... 81

3.3.1

Struktur Menu Admin ... 81

3.3.1

Struktur Menu User... 82

3.4

Perancangan Antarmuka ... 82

3.4.1

Tampilan Antarmuka

Frontend

... 83

3.4.1.1

Tampilan Antarmuka Utama

list

Gedung ... 83

3.4.1.2

Tampilan Antarmuka Utama cari ruang ... 84

3.4.1.3

Tampilan Antarmuka Fitur Virtual 3D ... 86

3.4.2

Perancangan Antarmuka

Backend

... 87

3.4.2.1

Antarmuka Login ... 87

3.4.2.2

Antarmuka

Backend

Home Admin ... 88

3.4.2.3

Antarmuka

Backend List

Gedung ... 89

(6)

ix

3.4.2.5

Antarmuka

Backend

Detail Gedung ... 91

3.4.2.5

Antarmuka

Backend Edit

Gedung ... 92

3.4.2.6

Antarmuka

Backend List

Lantai ... 93

3.4.2.7

Antarmuka Tambah

Lantai ... 94

3.4.2.8

Antarmuka

Detail

Lantai ... 95

3.4.2.9

Antarmuka

Edit

Lantai ... 96

3.4.2.10 Antarmuka

Backend List

Ruang ... 97

3.4.2.11 Antarmuka Tambah

Ruang ... 98

3.4.2.12 Antarmuka

Detail

Ruang ... 99

3.4.2.13 Antarmuka

Edit

Ruang ... 100

2.4.2.14 Antarmuka Lupa Password ... 101

2.4.2.15 Antarmuka Verifikasi

email

pada halaman Lupa Password ... 102

3.5

Perancangan Pesan ... 103

3.5.1

Pesan Teks ... 103

3.5.2

Pesan Dialog ... 104

3.6

Perancangan Jaringan Semantik ... 107

3.6.1

Jaringan Semantik

Frontend

... 107

3.6.2

Jaringan Semantik

Backend

... 108

3.7

Perancangan Prosedural ... 108

3.7.1

Prosedur

Login

... 109

3.7.2

Prosedur Lupa Password ... 110

3.7.3

Prosedur Tambah Data ... 111

3.7.4

Prosedur

Edit

Data ... 112

3.7.5

Prosedur Hapus Data... 113

(7)

x

BAB 4

IMPLEMENTASI DAN PENGUJIAN SISTEM ... 115

4.1

Implementasi Sistem ... 115

4.1.1

Implementasi Perangkat Lunak ... 115

4.1.2

Implementasi Perangkat Keras ... 116

4.1.3

Implementasi Basis Data... 116

4.1.4

Implementasi Antarmuka ... 119

4.1.4.1 Implementasi Antarmuka Admin ... 119

4.1.4.2 Implementasi Antarmuka User ... 119

4.2

Pengujian Sistem ... 121

4.2.1

Pengujian Alpha ... 121

4.2.1.1

Rencana Pengujian ... 121

4.2.1.2 Pengujian Black Box... 123

4.2.2

Pengujian Beta ... 131

BAB 5

KESIMPULAN DAN SARAN ... 141

5.1

Kesimpulan ... 141

5.2

Saran ... 141

(8)

142

DAFTAR PUSTAKA

[1] I. sommerville, Rekayasa Perangkat Lunak, 2005.

[2] [Online]. Available: www.unikom.ac.id/about/organization chart. [Accessed

12 10 2013].

[3] E. W. Lestari, Geografi 3 Untuk SMA/MA Kelas XII, 2011.

[4] Heriady, Pemrograman grafik 3D Menggunakan C & Open GL, Yogyakarta:

Graha Ilmu, 2007.

[5] T. Parisi, WebGL Up and Running, 2012.

[6] B. Jones and D. Cantor, WebGL Beginners Guide, Packt Publishing, 2012.

[7] S. Hari, Sistem Informasi, Jakarta, 2003.

[8] [Online].

Available:

https://developers.google.com/earth/faq#whatisapi.

[Accessed 6 1 2014].

[9] H. Purnomo and T. Zhacarias, Pengenalan Informatika : Perspektif Teknik

dan Lingkungan, Yogyakarta: Andi, 2005.

[10] [Online]. Available: http://www.ambiera.com/coppercube/. [Accessed 3 1

2014].

[11] A. Chopra, Google SketchUp 7 for Dummies, Wiley Publishing, Inc, 2009.

[12] [Online].Available:

https://support.google.com/earth/answer/176145?hl=en&ref_topic=2376010,

(9)

iii

KATA PENGANTAR

Assalamu’alaikum wr, wb.

Dengan memanjatkan puji syukur khadirat Allah SWT yang telah

memberikan taufik dan hidayahnya kepada kita semua sehingga penulis dapat

menyelesaikan tugas akhir dengan judul

“

Pembangunan Peta Kampus 3D

Universita

s Komputer Indonesia berbasis WebGL”.

Tugas akhir ini merupakan syarat wajib untuk menyelesaikan jenjang

strata satu (S1) program studi Teknik Informatika, Universitas Komputer

Indonesia.

Penulis juga memahami akan segala hambatan dan kekurangan yang ada

dalam penyusunan tugas akhir ini, akan tetapi hal ini dapat teratasi dengan

adanya bantuan serta bimbingan dari berbagai pihak yang terkait. Sehingga

penulis juga tidak menutup kemungkinan kritik dan saran yang bersifat

membangun dapat menambah kesempurnaan laporan tugas akhir ini.

Tidak lupa penulis juga ingin mengucapkan banyak terima kasih dan

penghargaan yang setinggi-tingginya kepada pihak-pihak yang telah mendukung

penulis dalam pembuatan laporan tugas akhir ini, adapun pihak-pihak tersebut

adalah sebagai berikut :

1.

Allah SWT yang maha pengasih lagi maha penyayang, pencipta segala sesuatu.

2.

Kedua orangtua, bapak dan ibu serta keluarga besar di Bandung dan di

Purwakarta, yang selalu memberikan dukungan dan doa sehingga penulis

selalu bersemangat dan termotivasi untuk menyelesaikan tugas akhir ini.

3.

Bapak Irawan Afrianto, S.T., M.T. Sebagai dosen pembimbing yang telah

memberikan arahan dan motivasi dari awal bimbingan hingga tahap akhir dari

penelitian tugas akhir ini.

4.

Bapak Andri Heryandi, S.T., M.T. Sebagai dosen penguji I yang telah

memberikan masukan

–

masukan,dan saran pada penulisan pada tugas akhir

(10)

iv

5.

Ibu Tati Harihayati, S.T., M.T. selaku penguji 3, yang telah memberikan

banyak pengarahan bagi tata cara penulisan tugas akhir ini.

6.

Ibu Nelly Indriani W, S.Si,. M.T. Sebagai dosen wali yang telah memberikan

banyak nasihat selama menjalani masa perkuliahan.

7.

Sudara-saudaraku dan adik-adikku yang selalu terus memotivasi, dan

membantu dalam berbagai hal sehingga penulis dapat menyelesaikan tugas

akhir ini.

8.

Semua pihak yang telah memberikan banyak dukungan dan doa untuk

kelancaran selama penyusunan tugas akhir ini, dan yang tidak bisa disebutkan

satu persatu.

Penulis menyadari bahwa penulisan skripsi ini masih jauh dari sempurna dan

masih banyak kekurangan yang memerlukan penyempurnaan. Untuk

meningkatkan mutu penulisan yang akan datang, penulis mengharapkan kritik

dan sarannya yang bersifat membangun dari pembaca. Akhirnya, semoga apa

yang disampaikan dapat bermanfaat bagi penulis khususnya dan semua yang

berkepentingan pada umumnya.

Bandung, Agustus 2014

(11)

BIODATA PENULIS

DATA PRIBADI

Nama

: MUHAMMAD RIZKI UTAMA

Tempat/ Tanggal Lahir

: Purwakarta, 10 November 1991

Agama

: Islam

Kewarganegaraan

: Indonesia

Status

: Belum Menikah

Anak ke

: 1 dari 2 bersaudara

Alamat

: Jl. Gagak Gg. Pasir huni 1 No.48B Rt. 07 Rw.05

Kelurahan sukaluyu, Kec. Cibeunying Kaler.

Bandung 40123

Nomor Telepon

: 085624153444

Email

: muhammadrizkiutama@yahoo.com

RIWAYAT PENDIDIKAN

1.

Sekolah Dasar

1997

–

2003

: SDN 1 Bunder Purwakarta

2.

Sekolah Menengah Pertama

2003

–

2006

: SMPN 1 Purwakarta

3.

Sekolah Menengah Atas

2006

–

2009

: SMA N 3 Purwakarta

4.

Perguruan Tinggi

2009

–

2014 : Program Sarjana (S-1) Teknik Informatika

Universitas Komputer Indonesia Bandung

Demikian riwayat hidup ini saya buat dengan sebenar-benarnya dalam

keadaan sadar dan tanpa paksaan.

Bandung, 20 Agustus 2014

(12)

Jurnal Ilmiah Komputer dan Informatika (KOMPUTA)

1

Edisi. .. Volume. .., Agustus 2014.. ISSN : 2089-9033

PEMBANGUNAN PETA KAMPUS 3D UNIVERSITAS KOMPUTER

INDONESIA BERBASIS WEBGL

Muhammad Rizki Utama

Teknik Informatika

–

Universitas Komputer Indonesia

Jl. Dipatiukur 112-114 Bandung

E-mail : muhammadrizkiutama@yahoo.com

ABSTRAK

Universitas Komputer Indonesia adalah salah satu perguruan tinggi di Bandung yang mempunyai banyak ruangan. Banyaknya ruangan dikampus Universitas Komputer Indonesia, terkadang menimbulkan permasalahan di lingkungan kampus dalam hal aktivitas perkuliahan, hal ini dirasakan oleh pengunjung khususnya mahasiswa baru, karena masih banyak ditemukan mahasiswa yang tidak tahu ataupun lupa letak ruangan perkuliahannya. Tentunya permasalahan ini bisa mengganggu aktivitas proses perkuliahan, adanya fasilitas pemberian informasi geografis dan letak ruang yang telah ada masih belum bisa membantu mengatasi permasalahan.

Berdasarkan pada permasalahan yang telah dipaparkan, pada penelitian ini penulis membangun sebuah aplikasi peta kampus 3D Universitas Komputer Indonesia berbasis WebGL untuk berupaya mengatasi permasalahan yang ditemukan. Aplikasi ini dibuat berupa website terdiri dari peta digital yang dikolaborasikan dengan model 3D bangunan, yang disatukan pada peta digital menggunakan Google earth API, pada aplikasi ini juga terdapat simulasi berbentuk virtual 3D untuk pencarian ruangan dikampus Universitas Komputer Indonesia dengan memanfaatkan teknologi html5(WebGL).

Berdasarkan hasil pengujian dapat disimpulkan bahwa pembangunan aplikasi Peta Kampus 3D Universitas Komputer Indonesia bisa membantu pengunjung mendapatkan informasi ruang lingkup kampus. Aplikasi ini juga dapat Membantu pengguna dalam mencari ruangan perkuliahan melalui sebuah website.

Kata kunci : Peta Kampus 3D, UNIKOM, WebGL,

virtual 3d, Website

1.

PENDAHULUAN

Universitas Komputer Indonesia adalah salah satu Universitas di Kota Bandung. Terdapat beberapa fakultas dan program study di kampus Universitas Komputer Indonesia dan ditunjang oleh

banyaknya ruang perkuliahan, laboratorium dan ruangan lainnya yang berkaitan dengan aktivitas dikampus. Banyaknya ruangan perkuliahan terkadang menjadi permasalahan di lingkungan kampus terutama bagi pengunjung khususnya mahasiswa baru, hal ini dikarenakan bisa berbedanya ruangan perkuliahan dan lokasi gedung untuk satu mata kuliah dalam satu semester, sehingga sering ditemukan mahasiswa yang sering bertanya-tanya kepada mahasiswa yang lainnya disekitar kampus mengenai lokasi gedung dan ruangan perkuliahan maupun ruang ujian, dan juga berbagai alasan keterlambatan datang dikarenakan lupa letak lokasi ruangan, tentunya hal ini dapat mempengaruhi kegiatan belajar di kampus.

Tersedianya beberapa fasilitas kampus dalam menunjang pemberian informasi letak geografis beserta tempat – tempat disekitar kampus termasuk ruangan seperti peta kampus, belum terasa memberikan informasi secara praktis dan efisien dalam memberikan sebuah informasi, baik bagi mahasiswa kampus itu sendiri maupun pengunjung kampus seperti tamu undangan ataupun calon mahasiswa. Adanya sumber informasi yang berkaitan dengan pemberian informasi geografis kampus dan ruangan, masih bersifat manual, seperti pemandu arah ruangan yang hanya tersedia dikampus saja.

Berdasarkan pada uraian permasalahan yang telah dijelaskan, masih banyaknya ditemukan mahasiswa terutama mahasiswa baru yang belum mengatahui letak ruangan perkuliahan,kemudian adanya fasilitas kampus yang berfungsi untuk memberikan informasi geografis, seperti gedung kampus dan ruangan, kurang begitu praktis,efisien dan kaku dalam membantu mahasiswa baru ataupun pengujung mendapatkan informasi. Untuk itu, dalam penelitian ini akan dibangun sebuah fasilitas yang bertujuan membantu memberikan informasi geografis di sebuah kampus, dengan memanfaatkan teknologi informasi berbasis website, hal ini dikarenakan perkembangan teknologi informasi berbasis website begitu pesat sehingga sudah umum bagi masyarakat dalam mendengar istilah website

(13)

Jurnal Ilmiah Komputer dan Informatika (KOMPUTA)

1

Tujuan dari penelitian ini, ditinjau dari penjelasan diatas maka didapatkan tujuan sebagai berikut :

1. Membantu mahasiswa baru dalam hal pemberian informasi geografis kampus dan letak ruang di Universitas Komputer Indonesia dengan memanfaatkan teknologi peta digital. 2. Membuat sebuah fasilitas berupa aplikasi

simulasi 3D pencarian ruangan dalam memberikan informasi letak ruang kepada pengunjung baik calon pengunjung ataupun mahasiswa..

1.1.Peta

Peta adalah gambaran permukaan bumi pada bidang datar dengan skala tertentu melalui suatu sistem proyeksi. Peta bisa disajikan dalam berbagai cara yang berbeda, mulai dari peta konvensional yang tercetak hingga peta digital yang tampil di layar komputer. Istilah peta berasal dari bahasa Yunani mappa yang berarti taplak atau kain penutup meja. Namun secara umum pengertian peta adalah lembaran seluruh atau sebagian permukaan bumi pada bidang datar yang diperkecil dengan menggunakan skala tertentu.Sebuah peta adalah representasi dua dimensi dari suatu ruang tiga dimensi. Ilmu yang mempelajari pembuatan peta disebut kartografi. Banyak peta mempunyai skala, yang menentukan seberapa besar objek pada peta dalam keadaan yang sebenarnya. Kumpulan dari beberapa peta disebut atlas.

1.2.3D

Grafik komputer 3 dimensi biasa disebut 3D atau adalah bentuk dari benda yang memiliki panjang, lebar, dan tinggi. Grafik 3 Dimensi merupakan teknik penggambaran yg berpatokan pada titik koordinat sumbu x(datar), sumbu y(tegak), dan sumbu z(miring). Representasi dari data geometrik 3 dimensi sebagai hasil dari pemrosesan dan pemberian efek cahaya terhadap grafika komputer 2D. Tiga Dimensi, biasanya digunakan dalam penanganan grafis. 3D secara umum merujuk pada kemampuan dari sebuah video card (link). Saat ini video card menggunakan variasi dari instruksi-instruksi yang ditanamkan dalam video card itu sendiri (bukan berasal dari software) untuk mencapai hasil grafik yang lebih realistis dalam memainkan game komputer. Grafik 3D merupakan perkembangan dari grafik 2D. Didalam grafika komputer, 3D merupakan bentuk grafik yang menggunakan representasi data geometri tiga dimensi.Suatu objek rangka 3D apabila disinari dari arah tertentu akan membentuk bayangan pada permukaan gambar. Proses pembuatan grafik komputer 3D dapat dibagi ke dalam tiga fase, yaitu 3D modeling yang mendeskripsikan bentuk dari sebuah objek, layout dan animation yang mendeskripsikan gerakan dan tata letak sebuah objek, dan 3D rendering yang memproduksi image

dari objek tersebut. Istilah atau Pengertian Grafik 3D adalah sebuah gambar, garis, lengkungan dan sebagainya yang memiliki titik-titik yang dihubungkan menjadi sebuah bentuk 3D Di dalam dunia game, 3D secara umum merujuk pada kemampuan dari sebuah video card (link). Saat ini video card menggunakan variasi dari instruksi-instruksi yang ditanamkan dalam video card itu sendiri (bukan berasal dari software) untuk mencapai hasil grafik yang lebih realistis dalam memainkan game komputer.

1.3.WebGL

WebGL singkatan dari (Web-based Graphics Library) merupakan Platform Application Programming Interfaces (APIs) library grafis 3D yang memungkinkan browser internet untuk membuat adegan 3D dengan cara sederhana dan efisien [5]. WebGL pertama kali diperkenalkan oleh Vladimir Vukicevic seorang software engineer pada tahun 2007, dan pada tahun 2009 WebGL dijadikan standar web yang mulai dikembangkan oleh Khronos Group bersama Opera, dan mulai diikuti oleh Google (Chrome), Mozilla (Firefox), Apple (Safari), dan 3D developers lainnya [5]. WebGL memiliki pendekatan client-based rendering dimana unsur-unsur yang membuat bagian dari adegan (scene) 3D biasanya download dari server, namun semua proses yang diperlukan untuk mendapatkan gambar dilakukan secara local menggunakan hardware grafis klien.

WebGL merupakan standar baru untuk grafis 3D di Web . Dengan WebGL, pengembang dapat memanfaatkan kemampuan penuh dari hardware grafis dalam merender pada komputer hanya menggunakan Javascript, web browser, dan web standar teknologi yang cukup. Sebelum adanya WebGL, pengembang harus selalu bergantung pada plug-in atau aplikasi bawaan dan meminta penggunanya untuk men-download dan menginstal perangkat lunak secara kustom untuk memberikan pengalaman 3D yang sesungguhnya. WebGL

merupakan bagian dari keluarga teknologi HTML5. WebGL menjadi komponen penting dalam perangkaian mengubah peramban modern menjadi platform aplikasi dikelasnya [5].

WebGL bekerja pada sebagian besar desktop, serta meningkatnya jumlah browser ponsel. Ada jutaan lokasi WebGL -enabled sudah terpasang, kemungkinan besar ada di sekitar anda, termasuk komputer yang anda jalankan di rumah dan kantor.

(14)

Jurnal Ilmiah Komputer dan Informatika (KOMPUTA)

1

1.3.1. WebGL merupakan API

WebGL diakses secara eksklusif melalui satu set antarmuka pemrograman JavaScript ; tidak ada tag yang menyertainya seperti pada HTML . Merendering 3D di WebGL dengan menggunakan proses analog yaitu dengan gambar 2D menggunakan elemen Canvas, dalam hal ini semua dilakukan melalui pemanggilan JavaScript API. Bahkan, akses ke WebGL disajikan dengan menggunakan kanvas yang mempunyai elemen dan mendapatkan gambar yang khusus untuk WebGL .

WebGL merupakan standar baru untuk grafis 3D di Web. Dengan WebGL, pengembang dapat memanfaatkan penuh kekuatan grafis rendering hardware komputer hanya menggunakan Javascript ,web browser, dan standar teknologi web. Sebelum

WebGL, pengembang harus bergantung pada plugin

atau aplikasi asli dan meminta pengguna untuk mengunduh dan menginstal perangkat lunak secara kustom untuk memberikan pengalaman 3D yang nyata. WebGL merupakan bagian dari keluarga teknologi HTML 5. Meskipun tidak dalam bagian resminya, biasanya diikuti kebanyakan browser

yang mendukung HTML5. Seperti web kerja, web soket, dan teknologi lain diluar rekomendasi resmi dari W3C, WebGL merupakan komponen penting dalam sederetan yang muncul yang mengubah browser modern menjadi kelas aplikasi platform. WebGL bekerja pada sebagian besar desktop, serta semakin banyaknya browser mobile. Ada jutaan tempat WebGL yang sudah terpasang aktif.

1.3.2. WebGL didasarkan pada OpenGL ES 2.0

OpenGL ES merupakan adaptasi lama dari berdirnya standar proses rendering 3D OpenGL. "ES" singkatan dari "embedded system," yang berarti telah disesuaikan untuk penggunaannya dalam perangkat komputasi yang kecil, terutama ponsel dan tablet. OpenGL ES adalah API grafis 3D yang bisa dijalankan pada iPhone, iPad, dan ponsel Android dan tablet. Desainer WebGL merasa, bahwa dengan pondasi API pada OpenGL, memberikan konsistensi, cross-platform, lintas-browser API 3D untuk Web akan lebih terjangkau.

Laplacian

Laplacian merupakan contoh operator yang berdasarkan pada turunan kedua. Operator ini bersifat omnidirectional, yakni menebalkan bagian tepi ke segala arah. Namun, operator Laplacian

memiliki kelemahan, yakni peka terhadap derau, memberikan ketebalan ganda, dan tidak mampu mendeteksi arah tepi (Gonzalez & Woods, 2002).

1.3.3. WebGL adalah bebas biaya

Seperti semua spesifikasi web terbuka,

WebGL bebas untuk digunakan. Tak seorang pun akan meminta anda untuk membayar royalti untuk

hak yang istimewa. Para pembuat Chrome, Firefox,

Safari, dan Opera telah berkomitmen pada sumber daya yang signifikan untuk mengembangkan dan mendukung WebGL, dan para ahli-ahli dari tim ini juga menjadi anggota kunci didalam sebuah grup kerja yang berkembang dan spesifik. Spesifikasi

WebGL Proses ini terbuka untuk semua anggota Khronos, dan ada juga milis terbuka untuk publik. [5] . Sekilas alur rendering WebGL seperti pada Gambar 2.4

Gambar 1.1 Alur rendering WebGL [6]

Penjelasan :

1. Vertex Buffer Objects (VBOs)

VBOs berisi data yang dibutuhkan WebGL untuk menggambarkan geometri yang akan dikirim. Koordinat vertex biasanya disimpan dan diproses didalam WebGL sebagai Vertex Buffer Objects(VBOs). Selain itu, ada beberapa elemen data seperti vertex normal, warna, dan tekstur, dan lainnya, yang dapat dimodelkan sebagai VBOs. 2. Vertex shader

Vertex shader disebut juga pada tiap titik yang membangun geometry. Shader ini memanipulasi data per-vertex seperti sebagai titik koordinat, normals, warna, dan tekstur koordinat. Data ini diwakili oleh atribut dalam shader vertex. Setiap atribut berdasar pada VBO kemudian dikirm pada Data vertex. 3. Fragment shader

Setiap set tiga simpul mendefinisikan segitiga dan setiap elemen pada permukaan segitiga perlu diberikan warna, jika permukaannya transparan. Setiap elemen permukaan disebut fragmen. Karena kita berhadapan dengan permukaan yang akan ditampilkan pada layar, elemen-elemen ini lebih dikenal sebagai piksel. Tujuan utama dari shader fragmen adalah untuk menghitung warna piksel individu.

Fragmen Shader digambarkan pada Gambar 2.5

(15)

Jurnal Ilmiah Komputer dan Informatika (KOMPUTA)

1

4. Framebuffer

Ini adalah penyangga dua dimensi yang berisi fragmen yang telah diolah oleh shader fragmen. Setelah semua fragmen telah diproses, gambar 2D terbentuk dan ditampilkan di layar. Framebuffer

adalah tujuan akhir dari pipa rendering. 5. Attributes, uniforms, and varyings

Atributes, uniforms, dan varyings adalah tiga jenis variabel yang anda akan temukan ketika memulai pemrograman dengan shader.

Atributes adalah variabel input yang digunakan dalam vertex shader. Sebagai contoh, titik koordinat, vertex warna, dan sebagainya. Karena kenyataan bahwa vertex shader disebut pada setiap vertex, atribut akan berbeda setiap kali shader vertex dipanggil.

Uniforms adalah variabel input yang tersedia untuk kedua vertex shader dan fragmen shader. Tidak seperti atribut, uniforms konstan selama terjadinya siklus rendering. Misalnya, posisi lampu.

Varyings digunakan untuk melewati data dari shader vertex ke shader fragmen [6].

1.4. Coppercube

CopperCube adalah editor untuk membuat aplikasi 3D, game 3D dan website. Impor atau membuat model 3D, mengatur pengendali kamera, bahan, perilaku, klik 'publish' dan aplikasi Anda sudah siap. Menciptakan segala sesuatu dari model yang sederhana untuk pemirsa game 3D penuh. Sebagai situs WebGL, Flash. Swfs, Mac OS, Windows dan aplikasi Android. Anda dapat melakukan semua ini tanpa pemrograman.

CopperCube mengimpor 22 format file, misalnya dari Lightwave, 3DS Max, Maya, Blender, Milkshape, Truespace, DeleD atau AutoCAD. Setelah impor, Anda dapat memperbaiki model dan bahan yang langsung di CopperCube, atau panas-memperbaruinya jika Anda mengubah mereka dalam perangkat lunak pemodelan 3d Anda.Menciptakan adegan 3D interaktif dapat dilakukan dengan menggunakan CopperCube tanpa perlu menulis satu baris kode. Bahkan ada perilaku dipilih untuk musuh kecerdasan buatan dikendalikan [10].

Gambar 1.3 Konten-konten dalam Coppercube

2.

ISI PENELITIAN

Tahapan awal untuk membangun Peta Kampus 3D Universitas Komputer Indonesia yaitu dilakukan beberapa tahapan.

2.1.Perapan Google Earth API pada sistem

Aplikasi Peta Kampus 3D Universitas Komputer Indonesia membutuhkan sebuah peta digital, peta digital pada penelitian ini menggunakan Google Earth API.

Gambar 2.1 Ilustrasi proses Google Earth pada Aplikasi

Penjelasan :

1. Adanya data berupa baris kode yang terdapat pada aplikasi yaitu url jsapi untuk webbrowser

yang dibutuhkan untuk menampilkan peta dari

server Google Earth.

2. Url tersebut mengarah dan menuju ke server Google Earth.

3. Terdapat library dan beberapa baris kode berupa API Google Earth, termasuk sebuah

plugin,dan data berbentuk kode untuk merender objek 3D khusus dalam aplikasi yang membutuhkan pemrosesan untuk diterjemahkan di server Google Earth. 4. API Google Earth tersebut setelah

diterjemahkan, kemudian dikirim dalam bentuk terjemahan yang butuhkan oleh aplikasi dalam bentuk peta, simbol dan tools pendukungnya.

2.2.Pembuatan Model Gedung Pada Peta Digital

Google SketchUp adalah perangkat lunak yang digunakan untuk membuat model 3D yang memungkinkan pengguna untuk menciptakan sesuatu yang dapat digambarkan, termasuk model

photorealistic untuk Google Earth dan bangunan 3D yang bisa dipasang di Google Earth.

(16)

Jurnal Ilmiah Komputer dan Informatika (KOMPUTA)

1

Sebuah versi freeware, dan versi bayar dengan fungsi tambahan, Sketchup Pro.

Program ini diklaim mudah digunakan. Ada penyimpanan online rakitan model yang bebas-of-charge (misalnya, jendela, pintu, mobil, dll), Gudang 3D, yang pengguna dapat berkontribusi model. Program ini mencakup gambar tata letak fungsi, memungkinkan rendering permukaan dalam variabel "gaya", mendukung pihak ketiga "plug-in" program host di sebuah situs yang disebut Ekstensi Gudang untuk memberikan kemampuan lain (misalnya, dekat foto-realistis rendering), dan memungkinkan penempatan model di dalam Google Earth.

Software Google SketchUp digunakan untuk membuat model yang digunakan sistem ini yaitu untuk pembuatan objek 3D bangunan UNIKOM,

kelebihan software ini adalah terintegrasinya dengan layanan peta dari Google, sehingga kita bisa dengan mudah membangun objek bangunan 3D dengan bantuan peta digital sebagai alasnya.

Gambar 2.2 Gambar Analisis Proses Penggunaan

Google Sketch Up pada Aplikasi.

Penjelasan berdasarkan anak panah pada gambar 3.8 :

1. SketchUp meminta gambaran alas untuk membangun sebuah bangunan yaitu berupa peta digital yang sudah disediakan oleh server Google Earth melalui salah satu fungsionalitas menu dari SketchUp dengan catatan harus terkoneksi dengan jaringan internet.

2. Goole Earth server merespon dan mengirimkan data berupa data peta digital yang dibutuhkan, sehingga tampil pada software SketchUp berupa informasi peta digital.

3. Lalu setelah informasi yang dibutuhkan diperoleh yaitu berupa peta digital, barulah SketchUp digunakan sesuai fungsi utamanya yaitu untuk membuat objek bangunan 3D, yang kemudian disimpan dalam format khusus yang bisa

diintegrasikan dengan Google-Earth API yaitu format model .kmz.

4. Setelah objek dibangun, pada kenyataannya objek tersebut belum begitu sempurna, maka tahap pengeditan, penambahan arsitektur bangunan sering terjadi pada penggunaan Google SketchUp.

5. Model gedung Unikom yang telah dibuat dalam format file .kmz, dapat kita preview dalam aplikasi Google Earth sehingga kita bisa memperkirakan kelayakan objek secara langsung pada peta digital yang utuh sesuai dari batas longitude dan latitude bumi. 6. Ketika objek perlu adanya pembaharuan

maka objek tersebut dapat ditangani kembali oleh SketchUp, begitu sampai objek 3D benar-benar sesuai dengan keinginan kita dilihat dari sudut geografis pada software Google Earth.

7. Setelah pembuatan objek sesuai, tahap selanjutnya yaitu menyimpan kembali perubahan objek yaitu dengan format .kmz 8. Setelah itu model ditambahkan pada

aplikasi Peta Kampus 3D Unikom.

2.3.Penerapan Virtual 3D dengan WebGL

Salah satu fitur dari aplikasi ini yaitu adanya sebuah virtual tour dalam bentuk teknologi 3D, fitur ini dibuat menggunakan software pemrosesan gambar 3D yaitu Coppercube, format dari hasil rendering

gambar disimpan dalam format .ccb, format ini akan dipanggil oleh sebuah fungsi agar ditampilkan kedalam halaman web yaitu menjadi teknologi

WebGL yang digunakan pada fitur aplikasi Peta Kampus 3D Universitas Komputer Indonesia.

Seperti pada Gambar 3.9

Gambar 2.3 Gambar analisa proses penggunaan file .html(WebGL) aplikasi.

Berikut Skenario proses penggunaan Software Coppercube pada aplikasi :

1. Pembuatan fitur 3D berbasis WebGL pada aplikasi ini menggunakan Software Coppercube, proses pembuatan di dalam

(17)

Jurnal Ilmiah Komputer dan Informatika (KOMPUTA)

1

objek yaitu dengan di drop and drag

sehingga membuat sebuah objek yang kita maksudkan, kemudian simpan project

dengan format file default .cbb.

2. Format file yang telah disimpan sebetulnya masih bisa dikatakan belum berbentuk format yang akan kita gunakan seperti .html, .apk, .app, ataupun .exe. Untuk itu ada fasilitas publish dalam software tersebut yaitu untuk menyimpan format yang akan kita butuhkan, yaitu .html(website) didalam aplikasi ini, dikarenakan aplikasi ini berbasis web.

3. Hasil publish dari software coppercube terdiri dari file .html dan folder yang berisikan item-item dan library grafis untuk menjalankan fitur 3D, namun file yang dipublish untuk aplikasi web hanyalah file dengan format .html saja, sedangkan didalam aplikasi Peta Kampus 3D dibutuhkan sebuah format file untuk dapat mengakses database, untuk itu ada perubahan format file yaitu dari .html menjadi .php.

4. Setelah dirubah bentuk file menjadi .php, maka dibutuhkan konfigurasi sintak yang terdapat pada file webgl.php.

5. Simpan perubahan sintak pada file webgl.php.

6. Hubungkan file webgl.php dengan file utama aplikasi Peta Kampus 3D yaitu index.php, dengan penambahan sintak fungsi-fungsi yang dibutuhkan, sehingga fitur pada aplikasi Peta Kampus dapat dijalankan.

7. Ketika fitur virtual 3D pencarian ruangan pada aplikasi Peta Kampus dijalankan, index.php mengirimkan nilai yaitu kode_ruang yang dimasukkan oleh user, untuk bisa menampilkan virtual 3D pencarian ruangan.

8. Webgl.php merespon kode, jika kode ditemukan virtual 3D bisa dijalankan

2.4.Alur Pencarian Ruangan pada sistem

Adapun alur pencarian ruangan pada virtual 3d digambarkan berupa flowchart, pada Gambar 3.11

Mulai

Input kode ruangan

Ruang ditemukan di dalam database? Substring(kode_ruang) Tidak Ya no_gedung ditemukan? Substring(kode_ruang) Gedung,lantai,ruang Ya Tidak Selesai Tampilkan rute/ navigasi

Gambar 2.4 Flowchart Pencarian Ruangan

2.5.Deskripsi Umum Sistem

Sistem yang akan dibangun adalah suatu aplikasi web yang dijalankan pada browser yang telah mendukung HTML5 termasuk teknologi

WebGl, aplikasi web ini akan menggunakan peta digital atau map engine dari Google yaitu Google-Earth API, sedangkan untuk engine pengolah grafis 3 dimensi untuk fitur pada aplikasi website yaitu

WebGL yang termasuk dari keluarga HTML5, dan database untuk menyimpan informasi ruangan.

Berikut ini menunjukkan gambaran secara umum system, pada Gambar 3.4

(18)

Jurnal Ilmiah Komputer dan Informatika (KOMPUTA)

1

2.6. Antarmuka Aplikasi Peta Kampus

1.

PENUTUP

5.1.Kesimpulan

Berdasarkan hasil yang dapat dalam penulisan skripsi ini, dapat ditarik kesimpulan sebagai berikut :

1. Sistem yang dibangun dapat mempermudah membantu pengunjung dalam mendapatkan informasi area geografis Universitas Komputer Indonesia

2. Sistem yang dibangun dapat memberikan informasi letak ruang yang dicari.

5.2.Saran

Berdasarkan semua hasil pengujian yang telah dicapai, aplikasi peta kampus 3D Universitas Komputer Indonesia yang dibangun masih mempunyai beberapa kekurangan, fitur virual 3D pada Peta Kampus secara tampilan masih belum memuaskan, dikarenakan rendering gambarnya yang kurang halus ketika dijalankan, kemudian penamaan ruangan harus disesuaikan dengan keadaan

(19)

Jurnal Ilmiah Komputer dan Informatika (KOMPUTA)

1

DAFTAR PUSTAKA

[1] I. sommerville, Rekayasa Perangkat Lunak, 2005.

[2] [Online]. Available: www.unikom.ac.id/about/organization chart. [Accessed 12 10 2013].

[3] E. W. Lestari, Geografi 3 Untuk SMA/MA Kelas XII, 2011.

[4] Heriady, Pemrograman grafik 3D Menggunakan C & Open GL, Yogyakarta: Graha Ilmu, 2007.

[5] T. Parisi, WebGL Up and Running, 2012. [6] B. Jones and D. Cantor, WebGL Beginners

Guide, Packt Publishing, 2012.

[7] S. Hari, Sistem Informasi, Jakarta, 2003. [8] [Online]. Available:

https://developers.google.com/earth/faq#whatis api. [Accessed 6 1 2014].

[9] H. Purnomo and T. Zhacarias, Pengenalan Informatika : Perspektif Teknik dan Lingkungan, Yogyakarta: Andi, 2005.

[10 ]

[Online]. Available: http://www.ambiera.com/coppercube/.

[Accessed 3 1 2014]. [11

]

A. Chopra, Google SketchUp 7 for Dummies, Wiley Publishing, Inc, 2009.

[12 ]

[Online].Available:

(20)

(21)