Melola Discovery

← Melola Discovery

Open access Journal 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

Indonesian

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

40 authors · 97 co-authorship links · 8 across different organisations · showing the 40 most connected

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
  • State University of Semarang
  • Affiliation unknown
  • Different organisations
  • Same organisation
  • Affiliation unknown
  • Thicker line = more joint articles · bigger circle = more articles
Show as table
Co-authorOrganisationJoint articles
Trida Ridho FarizState University of Semarang7
Amnan HarisAffiliation unknown4
Mochamad Chandra SaputraUniversity of Brawijaya3
Putra Pandu AdikaraUniversity of Brawijaya3
Dwi RahmawatiAffiliation unknown3
Muhammad Aminul AkbarUniversity of Brawijaya2
Agi Putra KharismaUniversity of Brawijaya2
Andin IrsadiState University of Semarang2
Habil SultanAffiliation unknown2
Rifa’ AtunnisaState University of Semarang2
Andin Vita AmaliaAffiliation unknown2
Putri Alifa KholilAffiliation unknown2
Cintiya Egi PurwadiAffiliation unknown2
Mahendra GunawanAffiliation unknown2
Dhiyanita ShabrinaAffiliation unknown2
Lenny Helmalia MustikawatiAffiliation unknown2
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
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 Oct 2026, last seen 1 Nov 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>