Jurnal Teknologi Informasi dan Ilmu Komputer (Dec 2023)

Analisis Kinerja Augmented Reality HyperText Markup Language (ARHTML) Melalui Pemanfaatan Web Graphics Library dan OpenGl Shading Language untuk Pengembangan 3D

  • Multohadi Hamzaturrazak,
  • Abdul Jabbar,
  • Rizal Setya Perdana,
  • Aryo Pinandito

DOI
https://doi.org/10.25126/jtiik.1078040
Journal volume & issue
Vol. 10, no. 7

Abstract

Read online

Di era digital ini, teknologi mengalami kemajuan pesat, termasuk penggunaan augmented reality yang semakin populer. Perpaduan elemen virtual dan dunia nyata oleh augmented reality menciptakan interaksi pengguna yang berkesan dan dinamis. Munculnya alat-alat ini mempermudah pengintegrasian augmented reality ke dalam aplikasi web. Dengan memanfaatkan mentahan shader mentah dari WebGL dan GLSL, tujuan penelitian ini adalah untuk menyelidiki dan membangun lingkungan augmented reality berbasis web melalui library Three.js. WebGL berfungsi sebagai standar otoritatif untuk rendering grafis 3D dalam antarmuka berbasis web, sedangkan GLSL berfungsi sebagai bahasa skrip yang bertanggung jawab untuk mengatur presentasi visual yang dihasilkan oleh WebGL. Three.js berfungsi sebagai perangkat JavaScript yang dirancang untuk membuat grafik 3D interaktif berbasis web. Dalam studi ini, eksplorasi shader mentah dari WebGL dan GLSL dilakukan untuk menganalisis pengalaman web augmented reality. Shader yang diimplementasikan digabungkan dengan Three.js dan AR.js untuk membangun atmosfer augmented reality yang menawan. Selanjutnya dilakukan perbandingan antara hasil penggunaan GLSL dan WebGL dalam konteks augmented reality di web. Analisis menunjukkan bahwa GLSL mengungguli WebGL dalam skenario augmented reality berbasis web. Shader GLSL memberikan kinerja yang lebih baik untuk menampilkan objek virtual di augmented reality. Abstract In this digital era, technology has changed rapidly advancements, including the usage of augmented reality, which has become increasingly popular. The fusion of virtual and real-world elements by augmented reality creates memorable and dynamic user interactions. The emergence of these tools has made it simpler to integrate augmented reality into web applications. By leveraging raw WebGL and GLSL shaders, we aim to investigate and establish web-based augmented reality environments via the Three.js library. WebGL serves as the authoritative standard for 3D graphical rendering within web-based interfaces, whereas GLSL functions as the scripting language responsible for regulating the visual presentation produced by WebGL. Three.js serves as a JavaScript toolset designed to create interactive, web-based 3D graphics. In this study, an exploration of raw WebGL and GLSL shaders is conducted to analyze the augmented reality web experience. The implemented shaders are combined with Three.js and AR.js tools to construct a captivating augmented reality atmosphere. Furthermore, a comparison is made between the results of using GLSL and WebGL in the context of augmented reality on the web. The analysis demonstrates that GLSL outperforms WebGL in web-based augmented reality scenarios. GLSL shaders provide better performance for displaying virtual objects in augmented reality.

Keywords