Performance Analysis of 3D Rendering Method on Web-Based Augmented Reality Application Using WebGL and OpenGL Shading Language

In recent years, web programming has increased to the extent where it is capable of rendering 3D objects on the web. Its rendering performance varied depending on where it ran and what library was used to render the objects. This study aims to investigate the rendering performance of several 3D renderer libraries that render 3D objects in an augmented reality application. WebGL is one of the APIs that uses the Javascript programming language to render 3D objects in web applications. To create augmented reality on the web, a JavaScript library called AR.js is needed, which allows developers to create augmented reality on the web without the need to use additional plugins. AR.js supports various types of augmented reality, i.e., bookmarks, images, and location-based types. It also allows developers to incorporate visual and audio effects into augmented reality. This study aims to investigate the rendering performance of WebGL raw shaders and GLSL shaders in an HTML-based augmented reality application. The results suggested that both WebGL and GLSL could render low-poly and medium-poly 3D objects well. However, according to the test, WebGL performance drops significantly when rendering high-polygon 3D objects. Nonetheless, the GLSL library could render the same high-poly 3D objects at a similar level with native library rendering performance. Thus, suggest GLSL shaders as the recommended library to render 3D objects on the web.