PENGEMBANGAN PETA INTERAKTIF TIGA DIMENSI JURUSAN TEKNIK SIPIL INSTITUT TEKNOLOGI SEPULUH NOPEMBER SURABAYA MENGGUNAKAN UNREAL ENGINE Fitrah Meilia Purnama 5207100071
Latar belakang, Perumusan Masalah, Batasan Masalah, Tujuan Tugas Akhir, Relevansi Tugas Akhir
PENDAHULUAN
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 • Peta 3D interaktif
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
Bentuk
• Peta 3D interaktif
Perumusan Masalah 1. 2.
3.
Bagaimana membangun peta
3D yang informatif dengan menggunakan Unreal Engine. Bagaimana mengembangkan peta 3D sehingga pengguna dapat berinteraksi dengan objek serta mendapatkan informasi dalam peta 3D. Bagaimana membuat peta 3D yang terstandardisasi sehingga dapat diintegrasikan dengan modul peta 3D dari lokasi lain di ITS Surabaya.
Batasan Masalah 1. 2. 3.
4. 5. 6.
aplikasi dikembangkan dengan menggunakan aplikasi Unreal Engine versi 3, aplikasi yang dikembangkan tidak mencakup hubungan interaksi antarpengguna, 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, aplikasi yang dikembangkan tidak dapat diubah oleh pengguna, aplikasi tidak akan menggambarkan daerah yang dilarang oleh pihak yang berkaitan (Jurusan Teknik Sipil ITS Surabaya), dan aplikasi ini tidak memuat Artificial Intelligence (AI).
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.
Relevansi Tugas Akhir Untuk menciptakan sebuah aplikasi yang mempermudah pengguna dalam menelusuri Jurusan Teknik Sipil tanpa harus berkunjung langsung ke tempat tersebut.
Objek Penelitian, Sistematikan Penelitian
METODOLOGI PENELITIAN
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
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 (J 201 – J 209)
Sistematika Penelitian
Sistematika Penelitian (1)
Standardisasi Studi Literatur
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.
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.
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
Desain sistem, desain peta
DESAIN PERANGKAT LUNAK
GUI Menu Memilih Jelajahi Peta
GUI Storyboard dibuat untuk mengetahui rancangan awal aliran aplikasi menggunakan tampilan-tampilan.
GUI Storyboard Aplikasi
Untuk lebih jelasnya, dapat dilihat dalam lampiran B tentang GUI Storyboard.
Use Case Diagram Batasan Sistem
Melihat penunj uk arah Memilih peta «precedes» Melihat peta 2 dimensi
«precedes»
Memilih menu
Teleportasi «precedes»
Mengubah resolusi «precedes»
meminj am buku
Pengguna Nav igasi «precedes» «precedes»
«precedes»
«invokes» «precedes»
Memilih bantuan
Menj elaj ahi peta «precedes»
«precedes»
menggunakan alat/obj ek laboratorium
«invokes»
Interaksi dengan obj ek
«invokes» meminj am ruangan «invokes» «precedes» «invokes»
«precedes»
«invokes»
membuka dan menutup pintu
Mengaktifkan layar informasi (mini info)
kembali ke menu utama
menghidupkan dan mematikan kran air/komputer
menghidupkan dan mematikan lampu
Sequence Diagram UC14 sd Interaction
Pengguna
Peta 3 dimensi
menampilkan instruksi
mengatur interaksi
trigger alat/objek
cinematic movie
sound effect
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
stop cinematic
Test Case UC14 (menggunakan alat/objek laboratorium) UC14 – Interaksi Menggunakan alat/mesin laboratorium Primary Actor: Level: Pengguna 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).
Contoh Desain Peta 2D Teknik Sipil (Lantai 2)
Daftar Desain Interaksi Umum No 1.
Jenis interaksi Keterangan Membuka dan menutup Setiap memasuki ruangan, pengguna dapat berinteraksi dengan pintu dengan cara pintu membuka atau menutup pintu.
2
Menyalakan mematikan lampu
3
Menyalakan dan Terdapat beberapa ruangan yang memiliki objek komputer. Interaksi komputer ini mematikan komputer merupakan interaksi sederhana yang memiliki kemiripan dengan 2 interaksi sebelumnya, yaitu hanya mematikan dan menghidupkan komputer.
4
Mengalirkan air dari kran Interaksi sederhana lain adalah menghidupkan dan mematikan kran air yang air terdapat di tempat wudhu.
dan Dalam setiap ruangan, terdapat lampu ruangan yang sewaktu-waktu dapat dinyalakan atau dimatikan oleh pengguna.
Daftar Desain Interaksi Khusus 1
2 3 4
No
Jenis interaksi Keterangan Menjalankan mesin- Pengguna dapat mengetahui informasi dengan melakukan akses mesin terhadap mesin-mesin yang ada dalam laboratorium. Menggunakan alat Pengguna dapat menggunakan beberapa alat musik di ruangan musik Kreativitas dan Seni. Melakukan Pengguna melakukan peminjaman buku di Ruang Baca Teknik Sipil peminjaman buku dengan mengikuti alur yang ada. Melakukan perizinan Untuk menemui Ketua/Sekretaris untuk menemui Jurusan Teknik Sipil dibutuhkan ketua/sekretaris perizinan terlebih dahulu di bagian jurusan front desk Tata Usaha.
Desain Informasi
Menu peta 2D
Informasi Ruangan
Informasi Objek
Informasi Pemberitahuan
Lingkungan Implementasi, Peta 2D Aplikasi, Pembuatan Aplikasi, Integrasi Aplikasi, Uji Coba Sistem
IMPLEMENTASI DAN ANALISIS
Lingkungan Implementasi Spesifikasi Personal Computer (Integrasi) 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 Memory DirectX Version
NVIDIA GeForce GTS 450 4065 MB 8129MB RAM DirectX 11
Spesifikasi Notebook Processor Operating System Graphic Device Memory DirectX Version
Intel® Core™ i5 CPU M 450 @ 2.40GHz (4CPUs), ~2.4GHz Windows 7 Home Premium 64-bit (6.1, Build 7600) ATI Mobility Radeon HD 5650 4096MB RAM DirectX 11
Pembuatan Peta 3D, Pembuatan dan Peletakan Objek, Penambahan Interaksi, Pengaturan Pencahayaan, Penambahan Suara
PEMBUATAN APLIKASI
Pembuatan Peta 3D
Geometri
Material
FluidSurface
Terrain
Pembuatan dan Peletakan Objek
Pembuatan & Ekspor
Impor dan Pengaturan
Penggunaan
Penambahan Interaksi Penandaan objek interaktif • Objek interaktif dengan informasi
• Objek pintu dengan informasi
Penambahan Interaksi Penambahan Layar Informasi
Contoh layar informasi
Struktur kismet yang digunakan untuk menampilkan informasi
Penambahan Interaksi Penambahan Informasi Objek
Informasi ketika pintu tertutup
Informasi ketika pintu terbuka
Penambahan Interaksi Penambahan Menu Peta 2D
Teleportasi Lokasi Aktor
Penunjuk Arah
Pengaturan Pencahayaan
Digunakan aktor Dominant Directional Light (pencahayaan alam) Aktor PointLight Toggelable (pencahayaan ruangan)
Penambahan Suara
Integrasi Aplikasi Standardisasi Nama Peta
Pembuatan Aktor
Konfigurasi Aplikasi
Splash Screen dan Movie
Menu Aplikasi
Pengaturan World Properties
Integrasi Modul Peta
Packaging
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.
Uji Coba Non-Fungsional Sistem stat FPS 25
20
15 Spesifikasi 1 Spesifikasi 2 10
5
0 FPS 1
FPS 2
FPS 3
FPS 4
Uji Coba Non-Fungsional Sistem stat Unit (Spesifikasi 1) 60
50
40
Frame
30
Game Draw
20
10
0 Test Unit 1
Test Unit 2
Test Unit 3
Test Unit 4
Uji Coba Non-Fungsional Sistem stat Unit (Spesifikasi 2) 80
70
60
50 Frame
40
Game Draw
30
20
10
0 Test Unit 1
Test Unit 2
Test Unit 3
Test Unit 4
Contoh Evaluasi Akurasi Tampilan Ruangan Asli
Ruangan dalam Aplikasi
BAB VI KESIMPULAN DAN SARAN
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.
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.
Saran • • • • • • •
Eksplorasi teknologi jaringan Efisiensi aplikasi Aktor Lingkungan peta Kuisioner pengguna Perpindahan peta Pertimbangan sisi interaksi manusia komputer
TERIMA KASIH Fitrah Meilia Purnama 5207100071
