Analisis Kinerja Augmented Reality HyperText Markup Language (ARHTML) Melalui Pemanfaatan Web Graphics Library dan OpenGl Shading Language untuk Pengembangan 3D
DOI:
https://doi.org/10.25126/jtiik.1078040Kata Kunci:
grafik 3D, , augmented reality, Grafika Komputer, HTML5, tekstur mapping, WebGLAbstrak
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.
Downloads
Referensi
TOLLE, H., PINANDITO, A., ADAMS, E.M. AND ARAI, K., 2015. Virtual reality game controlled with user’s head and body movement detection using smartphone sensors. Journal of Engineering and Applied Sciences, 10(15), pp.6380–6387.
ASADZADEH, A., SAMAD-SOLTANI, T., REZAEI-HACHESU, P., 2021. Applications of virtual and augmented reality in infectious disease epidemics with a focus on the COVID-19 outbreak. Inform. Med. Unlocked 24, 100579. https://doi.org/10.1016/j.imu.2021.100579
CHOLISSODIN, I., JONEMARO, E.M.A., RAHAYUDI, B., KSATRIA, W.E., SUKMAWATI, A., MUZAYYANI, M.F., 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. J. Teknol. Inf. Dan Ilmu Komput. 9, 1357. https://doi.org/10.25126/jtiik.2022976739
FERRÃO, J.M.M., DIAS, P., SANTOS, B., OLIVEIRA, M., 2022. Environment-aware rendering and interaction in web-based augmented reality. http://dx.doi.org/10.2139/ssrn.4251267
FLOREZ, C.C., QUEVEDO, W., GALORA, F.J., TOASA, R.M., 2021. Performance of WebGL standard for displaying 3D applications on mobile devices, in: 2021 16th Iberian Conference on Information Systems and Technologies (CISTI). Presented at the 2021 16th Iberian Conference on Information Systems and Technologies (CISTI), IEEE, Chaves, Portugal, pp. 1–6. https://doi.org/10.23919/CISTI52073.2021.9476391
HE, Y., FOLEY, T., HOFSTEE, T., LONG, H., FATAHALIAN, K., 2017. Shader components: modular and high performance shader development. ACM Trans. Graph. 36, 1–11. https://doi.org/10.1145/3072959.3073648
HEINRICH, F., BORNEMANN, K., LAWONN, K., HANSEN, C., 2019. Depth Perception in Projective Augmented Reality: An Evaluation of Advanced Visualization Techniques. Proc. 25th ACM Symp. Virtual Real. Softw. Technol.
LI, L., QIAO, X., LU, Q., REN, P., LIN, R., 2020. Rendering Optimization for Mobile Web 3D Based on Animation Data Separation and On-Demand Loading. IEEE Access 8, 88474–88486. https://doi.org/10.1109/ACCESS.2020.2993613
MIAO, R., SONG, J., ZHU, Y., 2017. 3D geographic scenes visualization based on WebGL, in: 2017 6th International Conference on Agro-Geoinformatics. Presented at the 2017 6th International Conference on Agro-Geoinformatics, IEEE, Fairfax, VA, USA, pp. 1–6. https://doi.org/10.1109/Agro-Geoinformatics.2017.8046999
PARASHAR, V., 2020. AUGMENTED REALITY A NEW ERA IN EDUCATION. Int. J. Eng. Technol. Manag. Res. 5, 19–29. https://doi.org/10.29121/ijetmr.v5.i2.2018.608
PATRIO GONZALEZ VIVO, JEN LOWE, 2015. The Book of Shaders.
QIAO, X., REN, P., DUSTDAR, S., LIU, L., MA, H., CHEN, J., 2019. Web AR: A Promising Future for Mobile Augmented Reality—State of the Art, Challenges, and Insights. Proc. IEEE 107, 651–666. https://doi.org/10.1109/JPROC.2019.2895105
SCHWARZ, K., SAUER, A., NIEMEYER, M., LIAO, Y., GEIGER, A., 2022. VoxGRAF: Fast 3D-Aware Image Synthesis with Sparse Voxel Grids.
VAN KREVELEN, D.W.F., POELMAN, R., 2010. A Survey of Augmented Reality Technologies, Applications and Limitations. Int. J. Virtual Real. 9, 1–20. https://doi.org/10.20870/IJVR.2010.9.2.2767
Unduhan
Diterbitkan
Terbitan
Bagian
Lisensi
Hak Cipta (c) 2023 Jurnal Teknologi Informasi dan Ilmu Komputer
Artikel ini berlisensiCreative Commons Attribution-ShareAlike 4.0 International License.
Artikel ini berlisensi Creative Common Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)
Penulis yang menerbitkan di jurnal ini menyetujui ketentuan berikut:
- Penulis menyimpan hak cipta dan memberikan jurnal hak penerbitan pertama naskah secara simultan dengan lisensi di bawah Creative Common Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) yang mengizinkan orang lain untuk berbagi pekerjaan dengan sebuah pernyataan kepenulisan pekerjaan dan penerbitan awal di jurnal ini.
- Penulis bisa memasukkan ke dalam penyusunan kontraktual tambahan terpisah untuk distribusi non ekslusif versi kaya terbitan jurnal (contoh: mempostingnya ke repositori institusional atau menerbitkannya dalam sebuah buku), dengan pengakuan penerbitan awalnya di jurnal ini.
- Penulis diizinkan dan didorong untuk mem-posting karya mereka online (contoh: di repositori institusional atau di website mereka) sebelum dan selama proses penyerahan, karena dapat mengarahkan ke pertukaran produktif, seperti halnya sitiran yang lebih awal dan lebih hebat dari karya yang diterbitkan. (Lihat Efek Akses Terbuka).
