Melola Discovery

← Melola Discovery

Open access Jurnal SINTA 2

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 (JTIIK) · Vol. 11 No. 5 (2024) · pp. 1145–1150

DOI
10.25126/jtiik.2024118040
ISSN
2528-6579, 2355-7699
Published
2024-10-31
Publisher
Fakultas Ilmu Komputer, Universitas Brawijaya
Language
id
License
creativecommons.org/licenses/by-sa/4.0

Abstract

Bahasa Indonesia

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.

English

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

Collaboration network of the authors

34 authors · 65 co-authorship links · 5 across different organisations

Hover or tap a name to highlight its co-authors. Double-click to open the author's page.

  • University of Brawijaya
  • Institut Teknologi Sepuluh Nopember
  • Affiliation unknown
  • Different organisations
  • Same organisation
  • Affiliation unknown
  • Thicker line = more joint articles · bigger circle = more articles
Show as table
Co-authorOrganisationJoint articles
Mochamad Chandra SaputraUniversity of Brawijaya3
Putra Pandu AdikaraUniversity of Brawijaya2
Muhammad Aminul AkbarUniversity of Brawijaya2
Agi Putra KharismaUniversity of Brawijaya2
Satrio Agung WicaksonoUniversity of Brawijaya2
Tri Hadiah MuliawatiInstitut Teknologi Sepuluh Nopember1
Reddy AlexandroInstitut Teknologi Sepuluh Nopember1
Fitra Abdurrachman BachtiarUniversity of Brawijaya1
Nathanael Victor DarenohUniversity of Brawijaya1
Chastine FatichahInstitut Teknologi Sepuluh Nopember1
Diana PurwitasariInstitut Teknologi Sepuluh Nopember1
Rochmat SetiyawanUniversity of Brawijaya1
Budi Darma SetiyawanUniversity of Brawijaya1
Ari HernawanUniversity of Brawijaya1
Wayan Firdaus MahmudyUniversity of Brawijaya1
Ghenniy RachmansyahUniversity of Brawijaya1
Bella Aulia MustikaningtyasUniversity of Brawijaya1
Satrio Hadi WijoyoUniversity of Brawijaya1
Indriati .Affiliation unknown1
Anshar ZulhilmiUniversity of Brawijaya1
Muhammad Fathur Rahman KhairulUniversity of Brawijaya1
Zahra Asma AnnisaUniversity of Brawijaya1
Faiz Aulia Al FarisiUniversity of Brawijaya1
Raihan Fikri BrilliansyachUniversity of Brawijaya1
Jasmine Prigel Palupi PrasojoUniversity of Brawijaya1
Candra DewiUniversity of Brawijaya1
Firman AfrialdyAffiliation unknown1
Firman AfrialdyAffiliation unknown1
Candra DewiAffiliation unknown1
Dicky PujakesumaAffiliation unknown1

Affiliations come from OpenAlex; journal OAI-PMH metadata carries none. Authors without an OpenAlex ID are matched by name, which can merge or split people.

Metadata source: OAI-PMH (metadata jurnal) https://jtiik.ub.ac.id/index.php/jtiik/en/oai, first harvested 27 Okt 2026, last seen 27 Okt 2026.
Original metadata (oai_dc) 
<oai_dc:dc xmlns="http://www.openarchives.org/OAI/2.0/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:oai_dc="http://www.openarchives.org/OAI/2.0/oai_dc/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.openarchives.org/OAI/2.0/oai_dc/  http://www.openarchives.org/OAI/2.0/oai_dc.xsd">
	<dc:title xml:lang="id">Analisis Kinerja Augmented Reality HyperText Markup Language (ARHTML) Melalui Pemanfaatan Web Graphics Library dan OpenGl Shading Language untuk Pengembangan 3D</dc:title>
	<dc:title xml:lang="en">Analisis Kinerja Augmented Reality HyperText Markup Language (ARHTML) Melalui Pemanfaatan Web Graphics Library dan OpenGl Shading Language untuk Pengembangan 3D</dc:title>
	<dc:creator xml:lang="id">Hamzaturrazak, Multohadi</dc:creator>
	<dc:creator xml:lang="id">Jabbar, Abdul</dc:creator>
	<dc:creator xml:lang="id">Setya Perdana, Rizal</dc:creator>
	<dc:creator xml:lang="id">Pinandito, Aryo</dc:creator>
	<dc:subject xml:lang="id">grafik 3D</dc:subject>
	<dc:subject xml:lang="id">, augmented reality</dc:subject>
	<dc:subject xml:lang="id">Grafika Komputer</dc:subject>
	<dc:subject xml:lang="id">HTML5</dc:subject>
	<dc:subject xml:lang="id">tekstur mapping</dc:subject>
	<dc:subject xml:lang="id">WebGL</dc:subject>
	<dc:description xml:lang="id">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.</dc:description>
	<dc:description xml:lang="en">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.</dc:description>
	<dc:publisher xml:lang="en">Fakultas Ilmu Komputer, Universitas Brawijaya</dc:publisher>
	<dc:date>2024-10-31</dc:date>
	<dc:type>info:eu-repo/semantics/article</dc:type>
	<dc:type>info:eu-repo/semantics/publishedVersion</dc:type>
	<dc:format>application/pdf</dc:format>
	<dc:identifier>https://jtiik.ub.ac.id/index.php/jtiik/article/view/8040</dc:identifier>
	<dc:identifier>10.25126/jtiik.2024118040</dc:identifier>
	<dc:source xml:lang="id">Jurnal Teknologi Informasi dan Ilmu Komputer; Vol 11 No 5: Oktober 2024; 1145-1150</dc:source>
	<dc:source xml:lang="en">Jurnal Teknologi Informasi dan Ilmu Komputer; Vol. 11 No. 5: Oktober 2024; 1145-1150</dc:source>
	<dc:source>2528-6579</dc:source>
	<dc:source>2355-7699</dc:source>
	<dc:source>10.25126/jtiik.115</dc:source>
	<dc:language>id</dc:language>
	<dc:relation>https://jtiik.ub.ac.id/index.php/jtiik/article/view/8040/1241</dc:relation>
	<dc:rights xml:lang="en">Copyright (c) 2024 Jurnal Teknologi Informasi dan Ilmu Komputer</dc:rights>
	<dc:rights xml:lang="en">https://creativecommons.org/licenses/by-sa/4.0</dc:rights>
</oai_dc:dc>