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

October 31, 20242 min read

GLSL Unggul atas WebGL pada Augmented Reality Berbasis WebGLSL Unggul atas WebGL pada Augmented Reality Berbasis Web

Sebuah eksperimen membandingkan dua cara menggambar objek virtual di peramban, dan pemenangnya cukup jelas.

  • Jurnal
  • Publikasi

Written by

  • SRShirasaka RenIT & Infrastructure · Student Member

In this article

  1. 01WebGL, GLSL, dan pustaka pendukung
  2. 02Cara perbandingan dilakukan
  3. 03Hasilnya

Augmented reality tidak lagi harus berupa aplikasi yang dipasang di ponsel. Peramban modern sudah mampu menampilkan objek virtual di atas gambar kamera, dan tantangan utamanya adalah menjaga tampilan itu tetap mulus sambil terus memproses video dari dunia nyata.

Penelitian ini membandingkan dua cara menggambar objek tersebut. Tim peneliti menulis shader sendiri, menggabungkannya dengan beberapa pustaka web, lalu melihat mana yang memberi kinerja lebih baik.

01/03

WebGL, GLSL, dan pustaka pendukung

WebGL adalah standar untuk merender grafik 3D di antarmuka web. GLSL adalah bahasa skrip yang mengatur bagaimana hasil render itu ditampilkan. Three.js berperan sebagai perangkat JavaScript untuk membuat grafik 3D interaktif, sedangkan AR.js menangani sisi augmented reality.

Tahapan pemrosesan shader di WebGL. Diagram: Scriptor universalis, CC BY-SA 4.0, via Wikimedia Commons.
Fig. 01Tahapan pemrosesan shader di WebGL. Diagram: Scriptor universalis, CC BY-SA 4.0, via Wikimedia Commons.

Pendekatan yang dipakai adalah shader mentah. Alih alih mengandalkan lapisan bawaan, peneliti menulis instruksi langsung untuk kartu grafis. Jalur ini lebih panjang, tetapi memberi kendali penuh atas setiap piksel yang digambar.

02/03

Cara perbandingan dilakukan

Kedua pendekatan dijalankan pada skenario augmented reality berbasis web yang sama. Shader yang sudah diimplementasikan digabungkan dengan Three.js dan AR.js, lalu diamati bagaimana masing masing menampilkan objek virtual di layar.

Perbandingan teknologi grafis web. Diagram: Scriptor universalis, CC BY-SA 4.0, via Wikimedia Commons.
Fig. 02Perbandingan teknologi grafis web. Diagram: Scriptor universalis, CC BY-SA 4.0, via Wikimedia Commons.

03/03

Hasilnya

GLSL menang. Shader GLSL memberi kinerja yang lebih baik saat menampilkan objek virtual di augmented reality berbasis web dibandingkan jalur WebGL yang diuji pada studi ini.

Bagi pengembang web, temuan ini masuk akal. WebGL menyembunyikan banyak detail perangkat keras supaya mudah dipakai. Ketika detail itu dibuka lewat shader sendiri, kendali atas proses penggambaran menjadi lebih besar, dan hasilnya lebih ringan.

Augmented reality berbasis web penting karena tidak memerlukan instalasi. Pengguna cukup membuka tautan. Karena itu, setiap frame yang bisa dihemat berdampak langsung pada kenyamanan pemakaian.

The graphics hardware that executes every shader call. Photo: C. Spille, CC BY-SA 4.0, via Wikimedia Commons.
Fig. 03The graphics hardware that executes every shader call. Photo: C. Spille, CC BY-SA 4.0, via Wikimedia Commons.

Kesimpulannya, cara menggambar objek tidak kalah penting dari model 3D atau kamera yang dipakai. Pilihan pada tingkat shader ikut menentukan seberapa nyaman sebuah pengalaman AR di peramban.

Sumber

  1. Hamzaturrazak, M., et al. (2024). Analisis Kinerja Augmented Reality Hypertext Markup Language Dengan Pemanfaatan Web Graphics Library Dan OpenGL Shading Language Untuk Pengembangan 3D. Jurnal Teknologi Informasi dan Ilmu Komputer.

    DOI10.25126/jtiik.1078040 (opens in a new tab)

Next articleMembaca Peran Shader dalam Augmented Reality di Peramban(Keep scrolling)(Read it next)(Loading)