Pengembangan Tur Virtual 3D Fakultas Teknik Universitas Gadjah Mada berbasis Web

Ave Syah Shina, Lukito Edi Nugroho, Prof. Ir., M.Sc., Ph.D.; Adhistya Erna Permanasari, S.T., M.T., Ph.D.

2023 | Skripsi | TEKNOLOGI INFORMASI

Dalam era digital saat ini, berbagai situs web telah menyediakan informasi mengenai Fakultas Teknik Universitas Gadjah Mada (FT UGM) serta fasilitasnya. Namun, terdapat peluang untuk peningkatan, yaitu dengan menambahkan platform sebagai alternatif yang dapat menyajikan informasi tentang FT UGM dengan tampilan model 3D, denah area dan bangunan, serta panorama di dalamnya virtual. Oleh karenanya, penelitian ini diarahkan untuk merancang dan mengembangkan situs web dengan nama "Virtual Tour FT UGM".

Pembuatan model 3D dalam penelitian ini dilakukan menggunakan metode fotogrametri. Metode ini memanfaatkan foto udara yang diambil oleh drone dan diproses menggunakan aplikasi Agisoft Metashape. Hasilnya kemudian dikonfigurasi dan dioptimalkan melalui aplikasi Blender dan dikompresi dengan Draco. Selain itu, data situs web disimpan menggunakan Strapi, sebuah headless CMS dengan database MySQL yang dipasang pada virtual machine di cloud. Dalam pengembangan situs web ini, framework Next.js dan Tailwind CSS digunakan untuk tata letak tampilan. Redux Toolkit digunakan untuk mengelola state aplikasi. Situs web ini memiliki fitur utama berupa model 3D yang ditampilkan menggunakan library React Three Fiber, denah bangunan yang ditampilkan dengan library Map interaction CSS beserta titik lokasi suatu bangunan atau panorama yang ditampilkan dengan library React Konva, dan panorama area FT UGM beserta bangunan di dalamnya yang ditampilkan dengan library React Pannellum. Selain itu, situs web ini juga dirancang agar responsif pada perangkat desktop dan mobile untuk mengoptimalkan pengalaman dan menjangkau pengguna yang lebih luas.

Hasil dari penelitian ini menunjukkan bahwa teknologi ini memungkinkan pengguna untuk lebih efektif dalam menjelajahi dan mengenal FT UGM. Blackbox testing mengindikasikan bahwa semua fitur beroperasi dengan baik, sementara usability testing menunjukkan skor 84,6\% yang mengindikasikan tingkat kepuasan pengguna terhadap sistem ini. Secara keseluruhan, penelitian ini menghasilkan desain pengalaman menjelajah FT UGM secara virtual yang dapat dijadikan referensi untuk pengembangan platform serupa di masa depan.

In the current digital era, various websites have provided information about the Faculty of Engineering at Gadjah Mada University (FT UGM) and its facilities. However, there is an opportunity for improvement by adding a platform as an alternative that can present information about FT UGM in a virtual form, including a 3D model, area and building map, and panoramas inside. Therefore, this research aims to design and develop a website called "Virtual Tour FT UGM".

The creation of 3D models in this study was conducted using the photogrammetry method. This method utilizes aerial photos taken by drones and processed using the Agisoft Metashape application. The results are then configured and optimized through the Blender application and compressed with Draco. In addition, the website data is stored using Strapi, a headless CMS with a MySQL database installed on a virtual machine in the cloud.}\textit{In the development of this website, the Next.js and Tailwind CSS frameworks are used for the display layout with Redux Toolkit is used to manage the application's state. The website's main features include a 3D model displayed using the React Three Fiber library, building maps shown with the Map interaction CSS library with location points displayed with the React Konva library, and a panorama of the FT UGM area along with the buildings inside shown using the React Pannellum library. Furthermore, this website is also designed to be responsive on both desktop and mobile devices to optimize the experience and reach a wider audience.

The results of this research show that this technology enables users to more effectively explore and familiarize themselves with FT UGM. Blackbox testing indicates that all features are functioning well, while usability testing shows a score of 84,6\%, indicating user satisfaction with this system. Overall, this study produces a design for a virtual exploration experience of FT UGM, which can serve as a reference for the development of similar platforms in the future.

Kata Kunci : panorama, aplikasi web 3D, tur virtual, 3D web application, virtual tour