MGMLaboratory
Back

Menu

01Home
02About Us
03Projects
04Publications
05Member
06Articles
07Contact

Let's Talk

Open in Mail app

Socials

Malang (ID) --:--Privacy PolicyTerms of Service

January 1, 20221 min read

Membuat Skybox 3D Tampil Cepat di PerambanMembuat Skybox 3D Tampil Cepat di Peramban

Panorama 360 derajat yang dipotong menjadi enam sisi kubus cukup untuk membangun ruang virtual yang ringan.

  • Jurnal
  • Publikasi

Written by

  • SRShirasaka RenIT & Infrastructure · Student Member

In this article

  1. 01Cara kerjanya
  2. 02Hasil pengujian

Bayangkan calon mahasiswa mengunjungi kampus tanpa harus datang. Mereka membuka peramban, memutar pandangan 360 derajat, dan melihat gedung dari segala arah. Idenya terdengar sederhana, tetapi menuntut proses render yang cepat.

Tim peneliti dari FILKOM Universitas Brawijaya membangun prototipe objek skybox 3D berbasis WebGL. Skybox adalah latar berbentuk kubus yang membungkus sebuah pemandangan, sehingga pengguna merasa berada di dalam lokasi tersebut.

01/02

Cara kerjanya

Panorama 360 derajat dipotong menjadi enam sisi kubus: posx, posy, posz, negx, negy, dan negz. Keenam sisi itu menjadi dinding ruang virtual. Ke dalamnya ditambahkan objek dasar seperti bola, kubus, torus, dan silinder sebagai elemen augmented reality, lengkap dengan pemetaan tekstur, efek cermin, gradasi warna, dan animasi gerakan.

Panorama 360 derajat menjadi bahan dasar skybox. Foto: Wilfredor, CC BY-SA 4.0, via Wikimedia Commons.
Fig. 01Panorama 360 derajat menjadi bahan dasar skybox. Foto: Wilfredor, CC BY-SA 4.0, via Wikimedia Commons.

WebGL dipilih karena berjalan langsung di peramban tanpa plugin tambahan. Tim memakai dua pendekatan sekaligus, yaitu shader dan non shader. Shader ditulis dengan GLSL untuk mengatur posisi verteks dan warna fragmen, sementara jalur non shader dipakai sebagai pembanding.

Perbandingan hasil render waktu nyata dan pra render. Gambar: Adamgmz, CC BY-SA 4.0, via Wikimedia Commons.
Fig. 02Perbandingan hasil render waktu nyata dan pra render. Gambar: Adamgmz, CC BY-SA 4.0, via Wikimedia Commons.

02/02

Hasil pengujian

Pengujian dilakukan di lima titik lokasi kampus, masing-masing sepuluh kali percobaan. Rata rata waktu render yang tercatat adalah 0,12668 detik. Nilai itu menunjukkan bahwa adegan tiga dimensi berisi skybox dan beberapa objek tambahan masih nyaman dibuka dari peramban.

Teknik rasterisasi yang dipakai aplikasi waktu nyata. Gambar: KaiaVintr, CC BY-SA 4.0, via Wikimedia Commons.
Fig. 03Teknik rasterisasi yang dipakai aplikasi waktu nyata. Gambar: KaiaVintr, CC BY-SA 4.0, via Wikimedia Commons.

Bagi pengembang aplikasi wisata virtual, hasil ini menegaskan satu hal. Kunci kenyamanan bukan pada perangkat keras pengguna, melainkan pada seberapa rapi adegan disusun. Memotong panorama menjadi enam sisi dan mengendalikan shader dengan tepat sudah cukup untuk membuat pengalaman berjalan mulus.

Sumber

  1. Cholissodin et al. (2022). Pengembangan Fast Render Objek Grafis Menggunakan Shader dan Non-Shader Berbasis WebGL dari Primitive Object untuk Membuat Raw Metaverse Material Objek Skybox 3D di Filkom UB. Jurnal Teknologi Informasi dan Ilmu Komputer.

Next articlePelajaran dari Membangun Tur Virtual Kampus(Keep scrolling)(Read it next)(Loading)