Analisis Kinerja Augmented Reality HyperText Markup Language (ARHTML) Melalui Pemanfaatan Web Graphics Library dan OpenGl Shading Language untuk Pengembangan 3D
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...
Saved in:
| Main Authors: | , , , |
|---|---|
| Format: | Article |
| Language: | Indonesian |
| Published: |
University of Brawijaya
2024-10-01
|
| Series: | Jurnal Teknologi Informasi dan Ilmu Komputer |
| Subjects: | |
| Online Access: | https://jtiik.ub.ac.id/index.php/jtiik/article/view/8040 |
| Tags: |
Add Tag
No Tags, Be the first to tag this record!
|
| _version_ | 1823858623080562688 |
|---|---|
| author | Multohadi Hamzaturrazak Abdul Jabbar Rizal Setya Perdana Aryo Pinandito |
| author_facet | Multohadi Hamzaturrazak Abdul Jabbar Rizal Setya Perdana Aryo Pinandito |
| author_sort | Multohadi Hamzaturrazak |
| collection | DOAJ |
| description |
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.
|
| format | Article |
| id | doaj-art-65012ae7a5224d24a459a2016a7d009b |
| institution | Kabale University |
| issn | 2355-7699 2528-6579 |
| language | Indonesian |
| publishDate | 2024-10-01 |
| publisher | University of Brawijaya |
| record_format | Article |
| series | Jurnal Teknologi Informasi dan Ilmu Komputer |
| spelling | doaj-art-65012ae7a5224d24a459a2016a7d009b2025-02-11T10:36:51ZindUniversity of BrawijayaJurnal Teknologi Informasi dan Ilmu Komputer2355-76992528-65792024-10-0111510.25126/jtiik.1078040Analisis Kinerja Augmented Reality HyperText Markup Language (ARHTML) Melalui Pemanfaatan Web Graphics Library dan OpenGl Shading Language untuk Pengembangan 3DMultohadi Hamzaturrazak0Abdul Jabbar1Rizal Setya Perdana2https://orcid.org/0000-0001-5420-1252Aryo Pinandito3https://orcid.org/0000-0002-8509-2383Universitas Brawijaya, MalangUniversitas Brawijaya, MalangUniversitas Brawijaya, MalangUniversitas Brawijaya, Malang 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. https://jtiik.ub.ac.id/index.php/jtiik/article/view/8040grafik 3D, augmented realityGrafika KomputerHTML5tekstur mappingWebGL |
| spellingShingle | Multohadi Hamzaturrazak Abdul Jabbar Rizal Setya Perdana Aryo Pinandito Analisis Kinerja Augmented Reality HyperText Markup Language (ARHTML) Melalui Pemanfaatan Web Graphics Library dan OpenGl Shading Language untuk Pengembangan 3D Jurnal Teknologi Informasi dan Ilmu Komputer grafik 3D , augmented reality Grafika Komputer HTML5 tekstur mapping WebGL |
| title | Analisis Kinerja Augmented Reality HyperText Markup Language (ARHTML) Melalui Pemanfaatan Web Graphics Library dan OpenGl Shading Language untuk Pengembangan 3D |
| title_full | Analisis Kinerja Augmented Reality HyperText Markup Language (ARHTML) Melalui Pemanfaatan Web Graphics Library dan OpenGl Shading Language untuk Pengembangan 3D |
| title_fullStr | Analisis Kinerja Augmented Reality HyperText Markup Language (ARHTML) Melalui Pemanfaatan Web Graphics Library dan OpenGl Shading Language untuk Pengembangan 3D |
| title_full_unstemmed | Analisis Kinerja Augmented Reality HyperText Markup Language (ARHTML) Melalui Pemanfaatan Web Graphics Library dan OpenGl Shading Language untuk Pengembangan 3D |
| title_short | Analisis Kinerja Augmented Reality HyperText Markup Language (ARHTML) Melalui Pemanfaatan Web Graphics Library dan OpenGl Shading Language untuk Pengembangan 3D |
| title_sort | analisis kinerja augmented reality hypertext markup language arhtml melalui pemanfaatan web graphics library dan opengl shading language untuk pengembangan 3d |
| topic | grafik 3D , augmented reality Grafika Komputer HTML5 tekstur mapping WebGL |
| url | https://jtiik.ub.ac.id/index.php/jtiik/article/view/8040 |
| work_keys_str_mv | AT multohadihamzaturrazak analisiskinerjaaugmentedrealityhypertextmarkuplanguagearhtmlmelaluipemanfaatanwebgraphicslibrarydanopenglshadinglanguageuntukpengembangan3d AT abduljabbar analisiskinerjaaugmentedrealityhypertextmarkuplanguagearhtmlmelaluipemanfaatanwebgraphicslibrarydanopenglshadinglanguageuntukpengembangan3d AT rizalsetyaperdana analisiskinerjaaugmentedrealityhypertextmarkuplanguagearhtmlmelaluipemanfaatanwebgraphicslibrarydanopenglshadinglanguageuntukpengembangan3d AT aryopinandito analisiskinerjaaugmentedrealityhypertextmarkuplanguagearhtmlmelaluipemanfaatanwebgraphicslibrarydanopenglshadinglanguageuntukpengembangan3d |