pengembangan peta tiga dimensi interaktif jurusan teknik...
TRANSCRIPT
![Page 1: Pengembangan Peta Tiga Dimensi Interaktif Jurusan Teknik ...digilib.its.ac.id/public/ITS-Undergraduate-17607-Presentation-447184.… · PENGEMBANGAN PETA TIGA DIMENSI INTERAKTIF JURUSAN](https://reader035.vdocuments.site/reader035/viewer/2022081400/60930c5e73abe331e6275df3/html5/thumbnails/1.jpg)
PENGEMBANGAN PETA TIGA DIMENSI INTERAKTIF JURUSAN
ARSITEKTUR INSTITUT TEKNOLOGI SEPULUH NOPEMBER SURABAYA
MENGGUNAKAN UNREAL ENGINE
Titus Irma Damaiyanti5207100080
![Page 2: Pengembangan Peta Tiga Dimensi Interaktif Jurusan Teknik ...digilib.its.ac.id/public/ITS-Undergraduate-17607-Presentation-447184.… · PENGEMBANGAN PETA TIGA DIMENSI INTERAKTIF JURUSAN](https://reader035.vdocuments.site/reader035/viewer/2022081400/60930c5e73abe331e6275df3/html5/thumbnails/2.jpg)
PENDAHULUAN
Latar belakang, Perumusan Masalah, Batasan Masalah, Tujuan Tugas Akhir, Relevansi Tugas Akhir
![Page 3: Pengembangan Peta Tiga Dimensi Interaktif Jurusan Teknik ...digilib.its.ac.id/public/ITS-Undergraduate-17607-Presentation-447184.… · PENGEMBANGAN PETA TIGA DIMENSI INTERAKTIF JURUSAN](https://reader035.vdocuments.site/reader035/viewer/2022081400/60930c5e73abe331e6275df3/html5/thumbnails/3.jpg)
Latar Belakang
• Teknologi grafik komputer 2D menuju 3D• Pembuatan peta 3D Jurusan Sistem Informasi ITS
dengan Unreal Engine
![Page 4: Pengembangan Peta Tiga Dimensi Interaktif Jurusan Teknik ...digilib.its.ac.id/public/ITS-Undergraduate-17607-Presentation-447184.… · PENGEMBANGAN PETA TIGA DIMENSI INTERAKTIF JURUSAN](https://reader035.vdocuments.site/reader035/viewer/2022081400/60930c5e73abe331e6275df3/html5/thumbnails/4.jpg)
Perumusan Masalah
1. Bagaimana membangun peta tiga dimensi yang informatif dengan menggunakan Unreal Engine
2. Bagaimana mengembangkan peta tiga dimensi sehingga pengguna dapat berinteraksi dengan obyek dalam peta.
3. Bagaimana membuat peta 3D yang terstandardisasi sehingga dapat diintegrasikan dengan yang lain.
![Page 5: Pengembangan Peta Tiga Dimensi Interaktif Jurusan Teknik ...digilib.its.ac.id/public/ITS-Undergraduate-17607-Presentation-447184.… · PENGEMBANGAN PETA TIGA DIMENSI INTERAKTIF JURUSAN](https://reader035.vdocuments.site/reader035/viewer/2022081400/60930c5e73abe331e6275df3/html5/thumbnails/5.jpg)
Batasan Masalah1. aplikasi dikembangkan dengan menggunakan aplikasi Unreal
Engine versi 3 September 2010,2. aplikasi yang dikembangkan tidak mencakup hubungan interaksi
antarpengguna,3. aplikasi yang dikembangkan hanya mencakup lokasi sebagian
teknik Sipil ITS dan Jurusan Arsitektur 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 Arsitektur dan Teknik Sipil ITS Surabaya), dan
6. aplikasi ini tidak memuat Artificial Intelligence (AI).
![Page 6: Pengembangan Peta Tiga Dimensi Interaktif Jurusan Teknik ...digilib.its.ac.id/public/ITS-Undergraduate-17607-Presentation-447184.… · PENGEMBANGAN PETA TIGA DIMENSI INTERAKTIF JURUSAN](https://reader035.vdocuments.site/reader035/viewer/2022081400/60930c5e73abe331e6275df3/html5/thumbnails/6.jpg)
Tujuan Tugas Akhir
Memahami dan menganalisis karakteristik teknologi pembuatan visual 3D (UDK) dan memanfaatkannya dalam pengembangan peta 3D Jurusan Arsitektur dan Teknik Sipil ITS Surabaya yang interaktif dan informatif.
![Page 7: Pengembangan Peta Tiga Dimensi Interaktif Jurusan Teknik ...digilib.its.ac.id/public/ITS-Undergraduate-17607-Presentation-447184.… · PENGEMBANGAN PETA TIGA DIMENSI INTERAKTIF JURUSAN](https://reader035.vdocuments.site/reader035/viewer/2022081400/60930c5e73abe331e6275df3/html5/thumbnails/7.jpg)
Relevansi Tugas Akhir
Untuk menciptakan sebuah aplikasi yang mempermudah pengguna dalam menelusuri Jurusan Arsitektur dan Teknik Sipil tanpa harus berkunjung langsung ke tempat tersebut.
![Page 8: Pengembangan Peta Tiga Dimensi Interaktif Jurusan Teknik ...digilib.its.ac.id/public/ITS-Undergraduate-17607-Presentation-447184.… · PENGEMBANGAN PETA TIGA DIMENSI INTERAKTIF JURUSAN](https://reader035.vdocuments.site/reader035/viewer/2022081400/60930c5e73abe331e6275df3/html5/thumbnails/8.jpg)
METODOLOGI PENELITIAN Objek Penelitian, Sistematikan Penelitian
![Page 9: Pengembangan Peta Tiga Dimensi Interaktif Jurusan Teknik ...digilib.its.ac.id/public/ITS-Undergraduate-17607-Presentation-447184.… · PENGEMBANGAN PETA TIGA DIMENSI INTERAKTIF JURUSAN](https://reader035.vdocuments.site/reader035/viewer/2022081400/60930c5e73abe331e6275df3/html5/thumbnails/9.jpg)
Objek Penelitian (1)
Arsitektur dan Teknik Sipil lantai 1
![Page 10: Pengembangan Peta Tiga Dimensi Interaktif Jurusan Teknik ...digilib.its.ac.id/public/ITS-Undergraduate-17607-Presentation-447184.… · PENGEMBANGAN PETA TIGA DIMENSI INTERAKTIF JURUSAN](https://reader035.vdocuments.site/reader035/viewer/2022081400/60930c5e73abe331e6275df3/html5/thumbnails/10.jpg)
Objek Penelitian (2)
Arsitektur dan Teknik Sipil lantai 2
![Page 11: Pengembangan Peta Tiga Dimensi Interaktif Jurusan Teknik ...digilib.its.ac.id/public/ITS-Undergraduate-17607-Presentation-447184.… · PENGEMBANGAN PETA TIGA DIMENSI INTERAKTIF JURUSAN](https://reader035.vdocuments.site/reader035/viewer/2022081400/60930c5e73abe331e6275df3/html5/thumbnails/11.jpg)
Objek Penelitian (3)
Arsitektur dan Teknik Sipil lantai 3
![Page 12: Pengembangan Peta Tiga Dimensi Interaktif Jurusan Teknik ...digilib.its.ac.id/public/ITS-Undergraduate-17607-Presentation-447184.… · PENGEMBANGAN PETA TIGA DIMENSI INTERAKTIF JURUSAN](https://reader035.vdocuments.site/reader035/viewer/2022081400/60930c5e73abe331e6275df3/html5/thumbnails/12.jpg)
Sistematika Penelitian
![Page 13: Pengembangan Peta Tiga Dimensi Interaktif Jurusan Teknik ...digilib.its.ac.id/public/ITS-Undergraduate-17607-Presentation-447184.… · PENGEMBANGAN PETA TIGA DIMENSI INTERAKTIF JURUSAN](https://reader035.vdocuments.site/reader035/viewer/2022081400/60930c5e73abe331e6275df3/html5/thumbnails/13.jpg)
IMPLEMENTASI DAN ANALISIS
Lingkungan Implementasi, Peta 2D Aplikasi, Pembuatan Aplikasi, Integrasi Aplikasi, Uji Coba Sistem
![Page 14: Pengembangan Peta Tiga Dimensi Interaktif Jurusan Teknik ...digilib.its.ac.id/public/ITS-Undergraduate-17607-Presentation-447184.… · PENGEMBANGAN PETA TIGA DIMENSI INTERAKTIF JURUSAN](https://reader035.vdocuments.site/reader035/viewer/2022081400/60930c5e73abe331e6275df3/html5/thumbnails/14.jpg)
Lingkungan Implementasi
Processor Intel Pentium Dual Core 1.8 GHz
Operating System Windows 7 Ultimate 32-bit (6.1, Build7601)
Graphic Device NVIDIA GeForce GTX 460
Memory 2048 MB RAM
DirectX Version DirectX 11
Spesifikasi Personal Computer
![Page 15: Pengembangan Peta Tiga Dimensi Interaktif Jurusan Teknik ...digilib.its.ac.id/public/ITS-Undergraduate-17607-Presentation-447184.… · PENGEMBANGAN PETA TIGA DIMENSI INTERAKTIF JURUSAN](https://reader035.vdocuments.site/reader035/viewer/2022081400/60930c5e73abe331e6275df3/html5/thumbnails/15.jpg)
UNREAL ENGINE 3 (UDK)
RESOURCESCRIPT
INTEGRASI
- Objek 3D- Texture- Aktor- Informasi- Suara- Animasi flash
- Konfigurasicontroller
- Pengabunganpeta
Peta Konsep Implementasi
![Page 16: Pengembangan Peta Tiga Dimensi Interaktif Jurusan Teknik ...digilib.its.ac.id/public/ITS-Undergraduate-17607-Presentation-447184.… · PENGEMBANGAN PETA TIGA DIMENSI INTERAKTIF JURUSAN](https://reader035.vdocuments.site/reader035/viewer/2022081400/60930c5e73abe331e6275df3/html5/thumbnails/16.jpg)
Pembuatan Objek 3D
• Pembuatan objek dilakukan dalam Autodesk 3D Studio Max (bentuk objek dan pemberian slot material)
• Proses ekspor dapat dilakukan dengan menggunakan 3 bentuk format.– .ASE– .FBX– .DAE
• Dalam UnrealStaticMesh Editor diatur pemberian material dan collisionnya.
Peta Konsep
![Page 17: Pengembangan Peta Tiga Dimensi Interaktif Jurusan Teknik ...digilib.its.ac.id/public/ITS-Undergraduate-17607-Presentation-447184.… · PENGEMBANGAN PETA TIGA DIMENSI INTERAKTIF JURUSAN](https://reader035.vdocuments.site/reader035/viewer/2022081400/60930c5e73abe331e6275df3/html5/thumbnails/17.jpg)
Texture sebagai dasar pembentukan Material
• Texture merupakan gambar 2D yang terdiri dari 2 jenis, yaitu gambar biasa (berwarna) dan normal.
• Dua gambar diimpor ke dalam UDK dan digunakan dalam UnrealMaterial Editor.
Peta Konsep
![Page 18: Pengembangan Peta Tiga Dimensi Interaktif Jurusan Teknik ...digilib.its.ac.id/public/ITS-Undergraduate-17607-Presentation-447184.… · PENGEMBANGAN PETA TIGA DIMENSI INTERAKTIF JURUSAN](https://reader035.vdocuments.site/reader035/viewer/2022081400/60930c5e73abe331e6275df3/html5/thumbnails/18.jpg)
Pembuatan Aktor
• Pembuatan aktor dilakukan dalam AutoDesk 3D Studio Max yang diekspor menggunakan plugin dari UDK (ActorX).
• Pengaturan material yang digunakan, dilakukan dalam UnrealAnimSet sedangkan pengaturan gerakan aktor dilakukan dalam UnrealAnimTree.
Peta Konsep
![Page 19: Pengembangan Peta Tiga Dimensi Interaktif Jurusan Teknik ...digilib.its.ac.id/public/ITS-Undergraduate-17607-Presentation-447184.… · PENGEMBANGAN PETA TIGA DIMENSI INTERAKTIF JURUSAN](https://reader035.vdocuments.site/reader035/viewer/2022081400/60930c5e73abe331e6275df3/html5/thumbnails/19.jpg)
Penambahan Informasiin
form
asi
Informasi objek yang dapat diinteraksikan
Informasi ruangan
Informasi tambahan
Menu peta 2D
Peta Konsep
![Page 20: Pengembangan Peta Tiga Dimensi Interaktif Jurusan Teknik ...digilib.its.ac.id/public/ITS-Undergraduate-17607-Presentation-447184.… · PENGEMBANGAN PETA TIGA DIMENSI INTERAKTIF JURUSAN](https://reader035.vdocuments.site/reader035/viewer/2022081400/60930c5e73abe331e6275df3/html5/thumbnails/20.jpg)
Menu Peta 2D (1)• Menu peta 2D memiliki fitur yang dapat menunjukkan lokasi aktor
saat itu, memberikan petunjuk kepada pengguna tentang lokasi ruangan, dan teleportasi.
• Untuk menunjukkan lokasi pengguna saat itu, dilakukan transform ukuran UDK ke dalam peta 2D, oleh karena itu dilakukan perbandingan dengan cara:– Menentukan 2 titik yang memiliki nilai x, y dalam UDK dan peta 2D dalam
flash– Ke-2 titik tersebut dicari selisihnya kemudian dibandingkan antara yang
terdapat di flash dan UDK. • Dalam perhitungannya, masih terdapat ketidakcocokan ukuran. Oleh
karena itu, perlu dilakukan penambahan angka yang dilakukan dengan cara mencoba sehingga diperoleh posisi yang sama antara UDK dan peta 2D dalam flash.
Peta Konsep
![Page 21: Pengembangan Peta Tiga Dimensi Interaktif Jurusan Teknik ...digilib.its.ac.id/public/ITS-Undergraduate-17607-Presentation-447184.… · PENGEMBANGAN PETA TIGA DIMENSI INTERAKTIF JURUSAN](https://reader035.vdocuments.site/reader035/viewer/2022081400/60930c5e73abe331e6275df3/html5/thumbnails/21.jpg)
Menu Peta 2D (2)
• Untuk dapat menunjukkan arah suatu tempat, lokasi aktor dan tempat yang dituju harus diketahui secara pasti.
• Properti Rotation (arah rotasi aktor) dan Location (koordinat posisi aktor) adalah properti yang dipakai.
• Penunjukan arah disesuaikan juga fasilitas tangga yang ada pada peta 3D.
• Penunjuk arah masih belum dapat memanfaatkan minimap milik UDK sehingga perlu dilakukan cara tersendiri melalui Kismet dan flash.
Peta Konsep
![Page 22: Pengembangan Peta Tiga Dimensi Interaktif Jurusan Teknik ...digilib.its.ac.id/public/ITS-Undergraduate-17607-Presentation-447184.… · PENGEMBANGAN PETA TIGA DIMENSI INTERAKTIF JURUSAN](https://reader035.vdocuments.site/reader035/viewer/2022081400/60930c5e73abe331e6275df3/html5/thumbnails/22.jpg)
Konfigurasi Aplikasi
• Konfigurasi aplikasi dilakukan dengan membuat class baru INI3D yang mengatur controller aplikasi ini.
• Controller aplikasi yang telah dibuat akhirnya dipanggil ke dalam aplikasi melalui kismet.
Peta Konsep
![Page 23: Pengembangan Peta Tiga Dimensi Interaktif Jurusan Teknik ...digilib.its.ac.id/public/ITS-Undergraduate-17607-Presentation-447184.… · PENGEMBANGAN PETA TIGA DIMENSI INTERAKTIF JURUSAN](https://reader035.vdocuments.site/reader035/viewer/2022081400/60930c5e73abe331e6275df3/html5/thumbnails/23.jpg)
Integrasi Peta (1)
• Pada awalnya, dilakukan riset untuk menggunakan metode streaming. Namun, ketika telah digabungkan, peta berjalan lambat, sehingga digunakan metode loading.
• 1 map utama melibatkan 7 map, yang terdiri dari 1 map yang hanya diambil brush bangunannya dan 6 map lain, map TeksnikSipilArsitektur dan Arsitekturyang akan ditampilkan ketika pengguna ingin pindah peta.
Peta Konsep
![Page 24: Pengembangan Peta Tiga Dimensi Interaktif Jurusan Teknik ...digilib.its.ac.id/public/ITS-Undergraduate-17607-Presentation-447184.… · PENGEMBANGAN PETA TIGA DIMENSI INTERAKTIF JURUSAN](https://reader035.vdocuments.site/reader035/viewer/2022081400/60930c5e73abe331e6275df3/html5/thumbnails/24.jpg)
Integrasi Peta (2)
• Menu awal dibuat dengan menggunakan Adobe Flash serta penggunaan Forecourse UI (komponen Adobe Flash yang digunakan untuk membuat menu) dan Scaleform (plugin untuk Adobe Flash yang diberikan oleh UDK untuk membuat Flash dalam tampilan 3D).
• Juga ditambahkan video pembuka dengan penggunaan BINK video
Peta Konsep
![Page 25: Pengembangan Peta Tiga Dimensi Interaktif Jurusan Teknik ...digilib.its.ac.id/public/ITS-Undergraduate-17607-Presentation-447184.… · PENGEMBANGAN PETA TIGA DIMENSI INTERAKTIF JURUSAN](https://reader035.vdocuments.site/reader035/viewer/2022081400/60930c5e73abe331e6275df3/html5/thumbnails/25.jpg)
BAB VI KESIMPULAN DAN SARAN
![Page 26: Pengembangan Peta Tiga Dimensi Interaktif Jurusan Teknik ...digilib.its.ac.id/public/ITS-Undergraduate-17607-Presentation-447184.… · PENGEMBANGAN PETA TIGA DIMENSI INTERAKTIF JURUSAN](https://reader035.vdocuments.site/reader035/viewer/2022081400/60930c5e73abe331e6275df3/html5/thumbnails/26.jpg)
Kesimpulan
1. Pembangunan peta 3D Jurusan Arsitektur dapat dilakukan menggunakan UDK yang memiliki framework kerja yang reliable walaupunpembangunan peta 3D yang dibangun kompleks
2. Dalam membuat peta 3D, split atau pembagianlevel dibutuhkan untuk file dengan volume data yang besar
3. Dalam pembuatan peta 3D diperlukan survey di awal pada pengguna untuk membangun aplikasi yang sesuai.
![Page 27: Pengembangan Peta Tiga Dimensi Interaktif Jurusan Teknik ...digilib.its.ac.id/public/ITS-Undergraduate-17607-Presentation-447184.… · PENGEMBANGAN PETA TIGA DIMENSI INTERAKTIF JURUSAN](https://reader035.vdocuments.site/reader035/viewer/2022081400/60930c5e73abe331e6275df3/html5/thumbnails/27.jpg)
Saran
• Efisiensi penggunaan sumber hardware• Aktor yang terdapat dalam aplikasi ini masih belum
mendekati nyata dalam hal gerakan maupun bentukbeserta materialnya, sehingga perlu dilakukaneksplorasi yang lebih dalam mengenai aktor
• Untuk membangun Aplikasi dengan volume data besar, dapat dilakukan split atau pembangunan tiap level
• Dapat dilakukan penelitian lebih lanjut tentang tampilanfitur dari sisi interaksi manusia komputer sehingga fitur-fitur dan bentuk tampilannya dapat dikembangkansesuai dengan kebutuhan pengguna.
![Page 28: Pengembangan Peta Tiga Dimensi Interaktif Jurusan Teknik ...digilib.its.ac.id/public/ITS-Undergraduate-17607-Presentation-447184.… · PENGEMBANGAN PETA TIGA DIMENSI INTERAKTIF JURUSAN](https://reader035.vdocuments.site/reader035/viewer/2022081400/60930c5e73abe331e6275df3/html5/thumbnails/28.jpg)
TERIMA KASIH