PENGEMBANGAN PETA INTERAKTIF TIGA DIMENSI JURUSAN TEKNIK SIPIL INSTITUT TEKNOLOGI SEPULUH NOPEMBER SURABAYA MENGGUNAKAN UNREAL ENGINE

(1)

PENGEMBANGAN PETA INTERAKTIF TIGA

DIMENSI JURUSAN TEKNIK SIPIL INSTITUT

TEKNOLOGI SEPULUH NOPEMBER

SURABAYA MENGGUNAKAN UNREAL

ENGINE

Fitrah Meilia Purnama 5207100071

(2)

PENDAHULUAN

Latar belakang, Perumusan Masalah, Batasan Masalah, Tujuan Tugas Akhir, Relevansi Tugas Akhir

(3)

Latar Belakang

• Peningkatan layanan terhadap pihak-pihak penting (calon

mahasiswa baru, orang tua mahasiswa, alumni, atau pun

perusahaan yang ingin bekerja sama dengan ITS Surabaya)

• Bentuk dari peningkatan tersebut adalah dengan memberikan

fasilitas yang memberikan kenyamanan ketika pihak-pihak

tersebut

(4)

Latar Belakang

Partner

• Peningkatan layanan terhadap pihak-pihak penting (calon mahasiswa baru, orang tua mahasiswa, alumni, atau pun perusahaan yang ingin bekerja sama dengan ITS Surabaya)

Rencana

• Bentuk dari peningkatan tersebut adalah dengan

memberikan fasilitas yang memberikan kenyamanan ketika pihak-pihak tersebut

(5)

Perumusan Masalah

1. Bagaimana

membangun peta 3D yang informatif

dengan menggunakan Unreal Engine

.

2. Bagaimana

mengembangkan peta 3D sehingga

pengguna dapat berinteraksi dengan objek

serta mendapatkan informasi

dalam peta 3D.

3. Bagaimana

membuat peta 3D yang

terstandardisasi

sehingga dapat diintegrasikan dengan

modul peta 3D dari lokasi lain di ITS Surabaya.

(6)

Batasan Masalah

1. aplikasi dikembangkan dengan menggunakan aplikasi Unreal

Engine versi 3,

2. aplikasi yang dikembangkan tidak mencakup hubungan

interaksi antarpengguna,

3. aplikasi yang dikembangkan hanya mencakup lokasi Jurusan

Teknik Sipil ITS Surabaya di mana batasan-batasan gedung

dan objek akan dijelaskan lebih detail di bagian metodologi

penelitian,

4. aplikasi yang dikembangkan tidak dapat diubah oleh

pengguna,

5. aplikasi tidak akan menggambarkan daerah yang dilarang

oleh pihak yang berkaitan (Jurusan Teknik Sipil ITS

Surabaya), dan

(7)

Tujuan Tugas Akhir

Memahami dan menganalisis karakteristik

teknologi pembuatan visual 3D (UDK) dan

memanfaatkannya dalam pengembangan peta 3D

Jurusan Teknik Sipil ITS Surabaya yang interaktif

dan informatif.

(8)

Relevansi Tugas Akhir

Untuk menciptakan sebuah aplikasi yang

mempermudah pengguna dalam menelusuri

Jurusan Teknik Sipil tanpa harus berkunjung

(9)

METODOLOGI PENELITIAN

Objek Penelitian, Sistematikan Penelitian

(10)

Objek Penelitian (Lantai 1)

• Laboratorium Hidro dan Pantai • Workshop Struktur

• SKK Teknik Sipil

• Ruang Baca Teknik Sipil • Musholla

• Sekretariat Program Lintas Jalur • CECC

• Kantin

• Ruang Kreativitas dan Seni

• Himpunan Mahasiswa Teknik Sipil • Ruang Kelas I 101 • Ruang Kelas I 102 • Ruang Kelas I 103 • Ruang Kelas J 101 • Ruang Kelas J 102 • Ruang Kelas J 103 • Taman tengah • Taman depan • Parkiran mobil

(11)

Objek Penelitian (Lantai 2)

• Ruang sidang

• Tata usaha (TU Corner)

• Tata usaha (ruang Ketua

Jurusan, Sekretaris

Jurusan (I dan II), Server,

dan Administrasi)

• 11 Ruang dosen, 1 Ruang

bersama, 1 Musholla

(I 201 – I 213)

• 9 Ruang dosen

(12)

(13)

Sistematika Penelitian (1)

Studi

Literatur

Standardisasi

Survey Lokasi

dan

Pengumpulan

Data

3 tahapan ini merupakan tahapan awal yang bertujuan untuk memperdalam ide pengerjaan tugas akhir, standardisasi pengerjaan antarmodul, dan survey lokasi yang akan dibuat.

(14)

Sistematika Penelitian (2)

Desain

Sistem

Desain

Peta

2 tahapan ini merupakan tahapan perancangan aplikasi yang terdiri dari perancangan sistem dengan menggunakan tools UML, khususnya dengan metode Use Case Driven Object serta desain peta yang meliputi desain peta 2D, desain interaksi, dan desain informasi.

(15)

Sistematika Penelitian (3)

Pembuatan peta 3D (geometri) Pembuatan dan peletakan objek Penambahan interaksi Pengaturan pencahayaan Penambahan suara

5 tahapan di atas merupakan tahapan dalam pembuatan aplikasi dengan menggunakan Unreal Engine

(16)

DESAIN PERANGKAT LUNAK

(17)

GUI Menu Memilih Jelajahi Peta

GUI Storyboard dibuat untuk mengetahui rancangan awal aliran aplikasi menggunakan tampilan-tampilan.

(18)

GUI Storyboard Aplikasi

Untuk lebih jelasnya, dapat dilihat dalam lampiran B tentang GUI Storyboard.

(19)

Use Case Diagram

Batasan Sistem Pengguna Memilih menu Memilih peta Mengubah resolusi

Menj elaj ahi peta Memilih bantuan Melihat peta 2 dimensi Nav igasi Interaksi dengan obj ek Mengaktifkan layar informasi (mini info)

Melihat penunj uk arah Teleportasi meminj am ruangan meminj am buku menggunakan alat/obj ek laboratorium membuka dan menutup pintu menghidupkan dan mematikan lampu menghidupkan dan mematikan kran air/komputer kembali ke menu utama «precedes» «precedes» «precedes» «precedes» «precedes» «precedes» «precedes» «precedes» «precedes» «invokes» «precedes» «precedes» «invokes» «invokes» «invokes» «invokes» «invokes» «precedes»

(20)

Sequence Diagram UC14

sd Interaction

Pengguna menampilkan instruksi

trigger alat/objek cinematic movie

mengatur interaksi sound effect

Peta 3 dimensi stop cinematic

isIn3DMap() :true trigger(touched) :triggertouched instruksi(interaksidenganobjek) display(interaksidenganobjek) trigger(used) :triggerused callInteraction() callCinematic(cinematic) :cinematic callSound(sound) :sound display(cinematicmovie) clickStopButton(button) :stop stopCinematic() :stop resetCinematic() backtomap() :map display() :3Dmap

(21)

Test Case UC14 (menggunakan alat/objek

laboratorium)

UC14 – Interaksi Menggunakan alat/mesin laboratorium Primary Actor:

Pengguna Level: User Goal

Pre-conditions:

Pengguna berada di halaman Peta 3D Triggers:

 _{Pengguna berada di area trigger alat/mesin laboratorium dan melakukan klik kiri}

Basic course:

Pengguna menyentuh trigger alat sehingga muncul informasi cara penggunaan. Pengguna melakukan klik kiri sehingga sistem menjalankan cinematic movie.

Post-conditions: -

Alternate courses:

Jika pengguna tidak beinteraksi dengan alat, Ketika sistem memunculkan informasi cara berinteraksi dengan alat, pengguna tidak melakukan klik kiri sehingga sistem tidak melakukan aksi apapun.

Jika pengguna menekan tombol Hentikan Peragaan ketika cinematic berjalan, Ketika sistem menjalankan cinematic movie, pengguna memilih tombol Hentikan Peragaan sehingga sistem memberhentikan cinematic movie yang sedang berjalan, termasuk aktivasi suara dan pengaturan material objek (jika terdapat perubahan).

(22)

Contoh Desain Peta 2D Teknik

Sipil (Lantai 2)

(23)

Daftar Desain Interaksi Umum

No Jenis interaksi Keterangan 1. Membuka dan menutup

pintu Setiap memasuki ruangan, pengguna dapat berinteraksi dengan pintu dengan cara membuka atau menutup pintu.

2 Menyalakan dan

mematikan lampu Dalam setiap ruangan, terdapat lampu ruangan yang sewaktu-waktu dapat dinyalakan atau dimatikan oleh pengguna.

3 Menyalakan dan

mematikan komputer Terdapat beberapa ruangan yang memiliki objek komputer. Interaksi komputer ini merupakan interaksi sederhana yang memiliki kemiripan dengan 2 interaksi sebelumnya, yaitu hanya mematikan dan menghidupkan komputer.

4 Mengalirkan air dari kran

air Interaksi menghidupkan dan mematikan kran air yang sederhana lain adalah terdapat di tempat wudhu.

(24)

Daftar Desain Interaksi Khusus

No Jenis interaksi Keterangan 1 Menjalankan

mesin-mesin Pengguna informasi dengan melakukan akses dapat mengetahui terhadap mesin-mesin yang ada dalam laboratorium.

2 Menggunakan alat

musik Pengguna beberapa alat musik di ruangan dapat menggunakan Kreativitas dan Seni.

3 Melakukan

peminjaman buku Pengguna melakukan peminjaman buku di Ruang Baca Teknik Sipil dengan mengikuti alur yang ada.

4 Melakukan perizinan untuk menemui ketua/sekretaris

jurusan

Untuk menemui Ketua/Sekretaris Jurusan Teknik Sipil dibutuhkan perizinan terlebih dahulu di bagian front desk Tata Usaha.

(25)

Desain Informasi

(26)

IMPLEMENTASI DAN ANALISIS

Lingkungan Implementasi, Peta 2D Aplikasi, Pembuatan Aplikasi, Integrasi Aplikasi, Uji Coba Sistem

(27)

Lingkungan Implementasi

Processor AMD Phenom(tm) II X4 955 Processor (4 CPUs), ~3.2GHz Operating System Windows 7 Ultimate 64-bit(6.1, Build 7601)

Graphic Device NVIDIA GeForce GTS 450 4065 MB

Memory 8129MB RAM

DirectX Version DirectX 11

Processor Intel® Core™ i5 CPU M 450 @ 2.40GHz (4CPUs), ~2.4GHz Operating System Windows 7 Home Premium 64-bit (6.1, Build 7600)

Graphic Device ATI Mobility Radeon HD 5650

Memory 4096MB RAM

DirectX Version DirectX 11

Spesifikasi Personal Computer (Integrasi)

(28)

PEMBUATAN APLIKASI

Pembuatan Peta 3D, Pembuatan dan Peletakan Objek, Penambahan Interaksi, Pengaturan Pencahayaan,

(29)

Pembuatan Peta 3D

(30)

Pembuatan dan Peletakan Objek

Pembuatan

(31)

Penambahan Interaksi

Penandaan objek interaktif

• Objek interaktif dengan informasi

(32)

Penambahan Interaksi

Penambahan Layar Informasi

Contoh layar

(33)

Penambahan Interaksi

Penambahan Informasi Objek

(34)

Penambahan Interaksi

Penambahan Menu Peta 2D

Teleportasi

(35)

Pengaturan Pencahayaan

Digunakan aktor Dominant Directional Light (pencahayaan alam) Aktor PointLight Toggelable (pencahayaan ruangan)

(36)

(37)

Integrasi Aplikasi

Standardisasi

Nama Peta Pembuatan Aktor Konfigurasi Aplikasi

Pengaturan World Properties Menu Aplikasi Splash Screen dan Movie Integrasi

(38)

Uji Coba Fungsional Sistem

• Semua test case yang telah dibuat di bab IV telah dipenuhi

oleh aplikasi peta 3D yang telah dibuat. Untuk lebih jelasnya,

dapat dilihat dalam Bab V tabel 5.10 dan Lampiran E mengenai

Test Case.

(39)

Uji Coba Non-Fungsional Sistem

stat FPS

0 5 10 15 20 25 FPS 1 FPS 2 FPS 3 FPS 4 Spesifikasi 1 Spesifikasi 2

(40)

Uji Coba Non-Fungsional Sistem

stat Unit (Spesifikasi 1)

0 10 20 30 40 50 60

Test Unit 1 Test Unit 2 Test Unit 3 Test Unit 4

Frame Game Draw

(41)

Uji Coba Non-Fungsional Sistem

stat Unit (Spesifikasi 2)

0 10 20 30 40 50 60 70 80

Test Unit 1 Test Unit 2 Test Unit 3 Test Unit 4

Frame Game Draw

(42)

Contoh Evaluasi Akurasi

Tampilan

(43)

(44)

Kesimpulan (1)

• Peta 3D Teknik Sipil ITS Surabaya dibangun dengan menggunakan

framework (kerangka kerja) dari teknologi Unreal Engine dengan

menggunakan editor-editor Unreal Engine, yaitu UnrealMatinee, UnrealKismet, Unreal Static Mesh Editor, Unreal Material Editor, Unreal Animtree Editor, Unreal Animset, Unreal SoundCue, dan Unreal Front End Editor. Pembangunan ini mencakup pembuatan objek (barang-barang di dalam ruangan) sampai dengan

penambahan informasi objek dan ruangan serta penambahan interaksi objek dalam aplikasi.

• Unreal Engine mampu melakukan proses packaging dengan hasil

sampai dengan

24%

dari jumlah sumber daya aslinya yang meliputi

file peta 3D beserta resource objek-objek (mesh), material, video, dan suara yang digunakan.

• Metode integrasi modul peta yang digunakan dalam projek ini

adalah metode

Loading

dengan mempertimbangkan kapasitas

file setiap modul peta beserta resource-nya. Metode yang dipilih berpengaruh terhadap performa aplikasi ketika digunakan.

(45)

Kesimpulan (2)

• Tingkat interaktif dan informatif dari aplikasi INI3D telah dicapai

melalui uji coba fungsional dan evaluasi penggunaan aplikasi yang dapat dilihat di bab V tentang uji coba fungsional sistem.

• Hasil pengukuran performa dari aplikasi INI3D dengan menggunakan

console yang disediakan dalam UDK menunjukkan bahwa aplikasi ini

memiliki rata-rata nilai fps sebesar

13.9

dengan menggunakan

spesifikasi komputer yang telah disebutkan dalam bab V tentang pengujian non-fungsional aplikasi. Semakin banyak objek, detail brush, dan detail lighting yang ditampilkan, maka mempengaruhi performa kecepatan aplikasi. Dengan kata lain, performa dari aplikasi (kecepatan) dipengaruhi oleh efektivitas dan efisiensi penggunaan sumber daya.