Jurnal TEKINKOM, Volume 5, Nomor 2, Desember 2022 E-ISSN: 2621-3079

DOI: 10.37600/tekinkom.v5i2.623 ISSN: 2621-1556

IMPLEMENTASI TEKNOLOGI VIRTUAL DALAM VISUALISASI PENGENALAN

KAMPUS MENGGUNAKAN WEBVR

Yuliana1), Helena Anggraeni (Reni) Tjondro Sugianto2)

1
Teknologi Informasi, Institut Shanti Bhuana
email: yuliana@[Link]
2
Manajemen, Institut Shanti Bhuana
email: helena@[Link]

Abstract
One of the developments from this information is Virtual Reality (VR), a Virtual Web Technology that
allows users to interact through an environment on the internet that has been simulated by a computer so
that users feel they are in a virtual world. VR technology is becoming the top choice because of how it
conveys messages to the environment to attract [Link] purpose of this research is to be able to produce
virtual web technology-based campus introduction visualizations with website results/output for campus
buildings as well as immersive spatial displays and dynamic information. The research began by carrying
out the 3D modeling stage using the help of Photoshop, marzipano, 3DVista tools (photos, sketches and 3D
objects on one of the campus buildings. The campus building used is the Rectorate Building. Lecture
building, Auditorium building. Then the system development is carried out by building data and the room
is stored in a database and coded using the PHP programming language. The results of process
observations during design, analysis and implementation produce a visualization WebVR Application by
displaying information in the form of object, image and video formats. Virtual web technology can provide
information related to the environment, campus buildings.
Keywords: Virtual Reality, Visualization, Campus Introduction, Web Technology
1. PENDAHULUAN pengguna/user dengan rancangan teknologi
Perkembangan teknologi sangat cepat, berbasis web menggunakan WebVR dapat
membawa kemudahan bagi pengguna dalam tersampaikan dengan mudah dipahami dan juga
menyampaikan informasi secara tepat dan interaktif. Penelitian ini mengambil studi kasus
bermanfaat dengan hadirnya Teknologi gedung yang terdapat dilingkungan kampus
Informasi. Dalam meningkatkan keinginan Shanti Bhuana Bengkayang. Tujuan penelitian
masyarakat yang sedang mencari ilmu adalah agar dapat menghasilkan visualisasi
pengetahuan di perguruan tinggi pilihan, pengenalan kampus berbasis teknologi web
diperlukan upaya strategi khusus dalam virtual dengan hasil/output website untuk gedung
memperkenalkan kelebihan dan tujuan masing- kampus serta tampilan tata ruang secara imersif
masing setiap perguruan tinggi. dan informasi yang dinamis.
Teknologi VR ini menjadi pilihan utama Beberapa perguruan tinggi sudah
karena cara penyajian pesan yang ingin menerapkan inovasi teknologi, untuk mengajak
disampaikan kepada lingkungannya menjadi calon mahasiswa bisa bergabung dengan
daya tarik pengguna. Pengenalan Lingkungan perguruan tinggi pilihan, misalnya yang
Kampus Shanti Bhuana menjadi pilihan yang dilakukan oleh Universitas Islam Majapahit
akan dibahas pada penelitian ini. Permasalahan daerah Mojokerto mempromosikan kampusnya
utama adalah bagaimana menampilkan secara konvensional atau virtual menerapkan
visualisasi lingkungan kampus agar dikenal teknologi WebVR sehingga calon mahasiswa
secara virtual kepada pengunjung atau atau masyarakat umum dapat mengetahui dan

Copyright: ©2022 by authors. [Link] 377

Jurnal TEKINKOM, Volume 5, Nomor 2, Desember 2022 E-ISSN: 2621-3079
DOI: 10.37600/tekinkom.v5i2.623 ISSN: 2621-1556

berkunjung melalui virtual [1], [2], [3]. ruangan dan fasilitas berdasarkan aspek rekayasa
Persiapan yang tepat dengan perangkat lunak dan komunikasi visual masing-
memanfaatkan peran Teknologi Website masing sebesar 51% dan 48 %. Dalam
menggunakan WebVR. WebVR adalah Website penanganan konten informasi yang dibuat secara
Virtual Reality yang membuat pengguna dapat dinamis dengan bantuan alat sensor (gyroscope)
berinteraksi melalui lingkungan yang ada dalam untuk pergerakan VR yang hasil outputnya
internet (dunia maya) yang telah di simulasikan adalah teks dan gambar [4].
oleh komputer, sehingga pengguna sedang Pada masa pandemi ini untuk melakukan
merasakan berada dalam dunia virtual [4], [5], promosi kampus secara konvensional sangatlah
[6], [7], [8]. sulit, maka atas bantuan promosi secara virtual
Perguruan tinggi adalah tempat yang dibangun sebuah aplikasi WebVR sebagai sarana
disediakan sebagai penelitian dan perkembangan dalam mendukung untuk membantu pada
dalam membentuk manusia yang berwawasan kegiatan pengenalan kampus Universitas Islam
untuk menghasilkan generasi penerus yang Majapahit dengan menerapkan teknologi
memiliki kepribadian dan kompetensi keilmuan WebVR. Ditinjau dari hasil kuesioner pengujian
yang sesuai dengan bidangnya. Sekarang ini, jika hasil aspek interface mendapatkan nilai tertinggi
seseorang memilih untuk melanjutkan jenjang yaitu 85.00% dan uji aspek visualisasi
pendidikan pada Perguruan Tinggi maka orang mendapatkan hasil 80.00 & lalu aspek umum
tersebut meraih pendidikan tinggi atau investasi sebesar 80.00% [1].
di bidang pendidikan [9], [10]. Penelitian berikutnya juga menerapkan
Pengenalan atau promosi kampus untuk Pengembangan tour virtual berbasis 3D
mahasiswa baru merupakan hal yang menarik menggunakan 3Dvista yang hasilnya diterapkan
karena mampu menumbuhkan inovasi dan di 3 gedung. Penampilan hasil analisis
kreatifitas dalam menyampaikan informasi menggunakan tools Jmeter, dengan parameter
tentang keunggulan dan potensi setiap Perguruan 1000 jumlah user. Penelitian ini dilakukan
Tinggi. Pengertian promosi sendiri menurut para dengan tujuan untuk menarik calon mahasiswa
ahli adalah suatu upaya atau kegiatan suatu [16] .
perusahaan dalam mempengaruhi konsumen agar Visualisasi Teknologi AR berbasis web
mereka mau melakukan pembelian terhadap dalam mengenal kerajinan tangan tradisional dan
produk yang ditawarkan, bisa sekarang dan bisa cara pembuatannya juga di implementasikan
dimasa yang akan datang. Kemauan mahasiswa dalam penelitian ini dengan menggunakan
baru terhadap perguruan tinggi tergantung pada Teknologi Augemented Reality (AR) yang
kualitas perguruan tinggi itu sendiri yang harus merupakan bagian dari Teknologi WebVR. Hasil
menjaga dan meningkatkan kualitas pendidikan yang didapatkan dalam pengujian menunjukan
dan mampu menciptakan daya tarik [10], [11]. aplikasi berjalan dengan baik dengan metode
Virtual Reality adalah visualisasi gambar pemindaian vertikal maupun horisontal, dan hasil
tiga dimensi yang dibuat komputer hingga terlihat pengujian menggunakan usability test melibatkan
nyata dengan bantuan sejumlah peralatan 27 responden, menunjukkan sebanyak 91,53%
tertentu, yang membuat pengguna seolah-olah responden setuju bahwa aplikasi mudah
terlibat langsung virtual secara fisik. Virtual digunakan [17].
reality membutuhkan perangkat yang dirancang Tujuan penelitian ini adalah agar dapat
untuk tujuan tertentu dalam teknologi ini, menghasilkan visualisasi pengenalan kampus
sehingga pengguna merasakan sedang berada di berbasis teknologi web virtual dengan
dunia maya [12], [13], [14], [15]. hasil/output website untuk gedung kampus serta
Hasil penelitian terdahulu menyimpul- tampilan tata ruang secara imersif dan informasi
kan Aplikasi VR pada mobile dapat membantu yang dinamis. Penelitian diawali dengan
dalam memberikan informasi gambaran gedung, melakukan tahap Pemodelan 3D menggunakan

Copyright: ©2022 by authors. [Link] 378

Jurnal TEKINKOM, Volume 5, Nomor 2, Desember 2022 E-ISSN: 2621-3079
DOI: 10.37600/tekinkom.v5i2.623 ISSN: 2621-1556

bantuan tools photoshop, marzipano, 3DVista pada Kabupaten Bengkayang, Kalimantan

(foto, sketsa dan Objek 3D terhadap salah satu Barat.
gedung kampus. Gedung kampus yang digunakan 4. Analisis dan Perancangan digambarkan
terdapat Gedung Rektorat. Gedung perkuliahan, dengan diagram Usecase dan membuat alur
gedung Auditorium. Kemudian pengembangan pengembangan sistem. Dapat di lihat pada
sistem di lakukan data gedung dan ruangan gambar 1 dan gambar 2 sebagai berikut:
disimpan kedalam database dan pengkodingan a. Diagram Usecase
menggunakan bahasa pemrograman PHP,
evaluasi sistem yang belum layak digunakan
kemudian dilanjutkan ke hasil.

2. METODE PENELITIAN
Berikut adalah tahapan metode penelitian
1. Mendeskripsi ruang lingkup masalah dengan
menentukan ruang lingkup yang akan
diteliti; dengan mencari data untuk di
analisis menentukan tahapan proses Gambar 1. Use Case Sistem
penelitian melalui pencarian data penelitian
seperti data gedung dan data ruangan yang Terdapat dua aktor atau user yaitu pengunjung
terdapat pada Kampus. sehingga data dan pengembang, pengunjung dapat melakukan
gedung dan ruangan digunakan sebagai kunjungan atau menjalankan sistem,
objek penelitian untuk menghasilkan memvisualisasikan sistem dengan melihat
informasi. gedung, ruang/fasilitas kampus, setelah itu
pengunjung dapat melihat info sistem dan
Tabel 1. Data Objek (tata letak kampus) keluar/logout.
No Nama Gedung Nama Ruangan
Gedung Rektorat Ruang b. Diagram Alur pengembangan sistem
1
Perpustakaan Model alur Penelitian dirancang untuk
2 Gedung Auditorium Microteaching menjelaskan mengenai tahapan penelitian.
3 Gedung Perkuliahan Lab Komputer
4 Gedung Kapel Lab Bahasa
Gedung Asrama
5 Ruang Dosen
Wisma Maria
Gedung Asrama
6 Ruang kelas
Wisma Yosef
Gedung Asrama Ruang Alat Peraga
7
Wisma Maria PGSD
8 Gedung Refter
9 Lapangan Futsal Galeri Investasi
10 Lapangan Badminton Kantin

2. Mempelajari studi literatur dengan mencari

literatur yag berkaitan dengan permasalahan
yang diangkat sebagai bahan penelitian.
Membaca jurnal, mengumpulkan bahan
referensi
3. Observasi melakukan penelitian langsung di Gambar 2. Diagram Alur Pengembangan Sistem
Kampus Institut Shanti Bhuana yang terletak

Copyright: ©2022 by authors. [Link] 379

Jurnal TEKINKOM, Volume 5, Nomor 2, Desember 2022 E-ISSN: 2621-3079
DOI: 10.37600/tekinkom.v5i2.623 ISSN: 2621-1556

Alur penelitian diawali dengan Lingkungan

melakukan tahap Pemodelan 3D terhadap salah kampus
satu gedung kampus. Gedung kampus yang tampak
depan
digunakan terdapat Gedung Rektorat. Gedung
gedung
perkuliahan, gedung Auditorium. Kemudian Auditorium
pengembangan sistem, evaluasi sistem yang
belum layak digunakan kemudian dilanjutkan ke
hasil. Diagram yang berisi alur penelitian dapat depan
gedung
dilihat pada gambar 2. rektorat dan
samping
3. HASIL DAN PEMBAHASAN auditorium
Melalui tahapan alur pengembangan
sistem maka di jelaskan tahapannya sebagai
berikut: tampak
3.1 Pembuatan Produk (Pemodelan 3D) depan
Gedung
1. Konsep Auditorim
Menganalisis perancangan visualisasi
pengenalan kampus berbasis teknologi web
virtual dengan hasil output website untuk
menampilkan gedung kampus dan lingkungan Ruang
kampus secara imersif dan informasi yang Refter
dinamis.

2. Design Lingkungan
Dalam tahapan design dirancang storyboard kampus
tampak
untuk digunakan dalam menggambar alur depan
perancangan desain tampilan dan deskripsi setiap Gedung
gambar. Design storyboard ini untuk dijadikan Refter
acuan dalam proses pembuatan project terdapat
pada tabel 1 berikut: 3. Material Collecting
Tahap material collecting merupakan
Tabel 2. Storyboard tahap pengumpulan bahan atau elemen
Gambar Ket kebutuhan yang akan dikerjakan. Bahan yang di
kumpulkan adalah teks, gambar dan gambar-
gambar pendukung lain yang di jelaskan dalam
Area depan tabel berikut:

Tabel 3. Material Collecting

depan kapel Gambar Keterangan
dan gedung
Depan I
auditorium
Sebelum
masuk
lingkungan
kampus

Copyright: ©2022 by authors. [Link] 380

Jurnal TEKINKOM, Volume 5, Nomor 2, Desember 2022 E-ISSN: 2621-3079
DOI: 10.37600/tekinkom.v5i2.623 ISSN: 2621-1556

1. Tahap Penggabungan frame

Lingkungan
Kampus

Lingkungan
Kampus

Gedung
Auditorium

Depan sebelum
masuk gedung
rektorat

Depan
Rektortat Gambar 3. Tahapan penggabungan gambar
2. Assembly
Tahap assembly merupakan pembuatan
seluruh objek atau bahan multimedia dibuat,
Ruang Refter menggunakan secara animasi didasarkan pada
tahap design. Pada tahap ini dilakukan dengan
pembuatan gambar dan video. Berikut adalah
tahapan pembuatannya:

Gedung Refter

3.2 Pembuatan compositing dan final Render

(Pemodelan 3D)
Tahapan ini untuk menggabungkan
semua hasil objek/gambar menjadi gambar
panaroma menggunakan software Adobe
photoshop CS. Berikut adalah tahapannya: Gambar 4. Tahap Assembly

Copyright: ©2022 by authors. [Link] 381

Jurnal TEKINKOM, Volume 5, Nomor 2, Desember 2022 E-ISSN: 2621-3079
DOI: 10.37600/tekinkom.v5i2.623 ISSN: 2621-1556

3. Hasil Final Render Software Marzipano berfungsi sebagai

penghubung/memanggil ke dalam pengcodingan
Hasil final render berupa visualisasi
yang kodenya dapat digunakan untuk bisa
video virtual reality yang dapat dijalankan
diekspor ke dalam bahasa pemrograman php
melalui smartphone dan laptop.
sehingga bisa terimplementasi berbasis
website.[19][20] Kemudian data hasil 3D di input
kedalam database
3.4 Implementasi Sistem
Berikut adalalah tampilan interface
pengunjung tampilan halaman utama yang dilihat
user pertama kali ketika mengakses halaman
web, halaman ini merupakan hasil tampilan dari
sistem marzipano dan database yang berisi
storyboard atau pemodelan 3D

Gambar 5. Hasil Final Render

3.3 Tahap pengembangan
Hasil final render pada gambar 3. Gambar 7. Halaman utama sistem
Merupakan Tahapan penggabungan gambar
diatas selanjutnya digunakan untuk diinput
kedalam software Marzipano, dibawah ini: Dengan menekan tombol play yang ada di
halaman. Halaman ini menampilkan visualisasi
lingkungan gedung [Link] adalah
tampilannya, user dapat menggunakan kursur
yang tersedia pada layar/halaman sistem untuk
menjalankan visualisasi. Tahapan ini
menggunakan bantual tools 3D Vista

Gambar 6. Software Marzipano [19] Gambar 8. Tampilan Virtual Reality sistem

Copyright: ©2022 by authors. [Link] 382

Jurnal TEKINKOM, Volume 5, Nomor 2, Desember 2022 E-ISSN: 2621-3079
DOI: 10.37600/tekinkom.v5i2.623 ISSN: 2621-1556

4. KESIMPULAN Hadikusuma, “Teknologi Virtual Reality

Kesimpulan berikut dibuat berdasarkan untuk Media Informasi Kampus,” J.
pengamatan proses selama perancangan, analisis Teknol. Inf. dan Ilmu Komput., vol. 6, no.
dan implementasi sehingga menghasilkan: 1, p. 71, 2019, doi:
1. Aplikasi WebVR pengenalan Kampus 10.25126/jtiik.2019611238.
menggunakan berbagai bantuan tools sebagai [5] I. Rizaldy, I. Agustina, and F. Fauziah,
alat pembantu dalam membangun teknologi “Implementasi Virtual Reality Pada Tur
Web Virtual. Virtual Monumen Nasional
2. Teknologi Web Virtual tersebut dapat Menggunakan Unity 3D Algoritma
menampilkan informasi berupa format object, Greedy Berbasis Android,” JOINTECS
gambar dan video. (Journal Inf. Technol. Comput. Sci., vol.
3. Teknologi web virtual dapat memberikan 3, no. 2, 2018, doi:
informasi terkait lingkungan, gedung kampus. 10.31328/jointecs.v3i2.786.
4. Masih banyak kekurangan dalam penelitian [6] J. Hui, Y. Zhou, M. Oubibi, W. Di, L.
ini, terutama pada kebutuhan sistem sangat Zhang, and S. Zhang, “Research on Art
memerlukan software dan hadware tingkat Teaching Practice Supported by Virtual
tinggi dan juga dalam persiapan keuntuk Reality (VR) Technology in the Primary
penelitian selanjutnya dapat dikembangkan Schools,” Sustain., vol. 14, no. 3, 2022,
agar dalam pendistribusian visualisasi doi: 10.3390/su14031246.
pengenalan kampus berbasis WebVR dapat [7] M. A. Rojas-Sánchez, P. R. Palos-
digunakan dan dikembangkan dalam kegiatan Sánchez, and J. A. Folgado-Fernández,
promosi sehingga selanjutnya dapat di jadi Systematic literature review and
bahan evaluasi kedepan. bibliometric analysis on virtual reality
and education, no. 0123456789. Springer
5. REFERENSI US, 2022.
[8] K. S. C. Xiong, Chuyi, “The effect of
[1] A. Y. Santoso, 1, R. M. Akbar, 2, and
virtual reality on the marketing of
Yanuarini Nur Sukmaningtyas,
residential property,” 2022, doi:
“PENERAPAN TEKNOLOGI WEBVR
[Link]
UNTUK PENGENALAN KAMPUS,”
074971.
(Jurnal Ilm. Teknol. Inf. dan Sains), vol.
2, 2022. [9] S. Dharmawansyah, H. Cangara, and M. I.
Sultan, “MAHASISWA PADA
[2] T. F. Prasetyo, A. Bastian, and H. Sujadi,
POLITEKNIK NEGERI MEDIA
“Optimalisasi Penerapan Teknologi
KREATIF,” vol. 3, no. 4, 2014.
Virtual Reality Tour Kampus Universitas
Majalengka Menggunakan Metode [10] W. Feriyan, S. Selatan, and S. Selatan,
Multimedia Development Life Cycle,” “Promosi dan pengaruhnya terhadap
INFOTECH J., vol. 7, pp. 15–28, 2021, terhadap animo calon mahasiswa baru
doi: 10.31949/infotech.v7i2.1313. dalam memilih perguruan tinggi swasta,”
vol. 16, no. 1, pp. 21–27, 2018.
[3] I. C. Wulandari, D.T., & Sayekti,
“Pengembangan Virtual reality dalam [11] H. Yenni, “Pengenalan Model Perumahan
Upaya Meningkatkan Kesiapan Menggunakan Metode Polygonal
Mahasiswa untuk Menghadapi Modeling Dengan Teknik Extrude Face
Pengenalan Lapangan Persekolahan,” J. Berbasis Virtual Reality,” JATISI (Jurnal
basicedu, vol. 6, no. 4, pp. 5877–5889, Tek. Inform. dan Sist. Informasi), vol. 9,
2022. no. 2, pp. 864–875, 2022, doi:
10.35957/jatisi.v9i2.1518.
[4] H. T. T. Saurik, D. D. Purwanto, and J. I.

Copyright: ©2022 by authors. [Link] 383

Jurnal TEKINKOM, Volume 5, Nomor 2, Desember 2022 E-ISSN: 2621-3079
DOI: 10.37600/tekinkom.v5i2.623 ISSN: 2621-1556

[12] E. Rodríguez et al., “We are IntechOpen ,

the world ’ s leading publisher of Open
Access books Built by scientists , for
scientists TOP 1 %,” Intech, vol. 32, no.
tourism, pp. 137–144.
[13] Š. Korečko, M. Va’a, and M. Fekete,
“VISUALIZATION of
EXPERIMENTAL DATA in WEB-
BASED VIRTUAL REALITY,” CEUR
Workshop Proc., vol. 3041, pp. 149–152,
2021, doi: 10.54546/mlit.2021.42.97.001.
[14] A. S. Yudhanto, Yudho, Panduan
Aplikasi VIRTUAL REALITY (VR).
Jakarta: PT Elex Media Komputindo,
2022.
[15] T. Morimoto et al., “XR (Extended
Reality: Virtual Reality, Augmented
Reality, Mixed Reality) Technology in
Spine Medicine: Status Quo and Quo
Vadis,” J. Clin. Med., vol. 11, no. 2, 2022,
doi: 10.3390/jcm11020470.
[16] D. Perdana, A. Irawan, and R. Munadi,
“Implementation of a Web Based Campus
Virtual Tour for Introducing Telkom
University Building,” Int. J. Simul. Syst.
Sci. Technol., pp. 6–11, 2020, doi:
10.5013/ijssst.a.20.01.06.
[17] A. Wibisono and T. Indriari Wardhani,
“Desain Virtual Tour Bangunan
Bersejarah Lawang Sewu Semarang
Menggunakan Aplikasi Augmented
Reality Berbasis Web (Webar),” Jurnal
Ilmiah Teknosains, vol. 6, no. 2/Nov. pp.
39–50, 2020, doi:
10.26877/jitek.v6i2/nov.7100.
[18] C. O. Alfa, “Optimalisasi Peranan
Teknologi Informasi untuk Sosialisasi
Kampus sebagai media Promosi di Masa
Pandemi,” 2022.
[19] “MARZIPANO TOOL.” [Online].
Available:
[Link]
[20] L. Siddiqui, “What is Marzipano? | Here
is a Complete Guide,” [Link], 2021.

Copyright: ©2022 by authors. [Link] 384