Novel Optimization Techniques for WebGL Based 3D Rendering Software

Introduction

In the past decade, the world has seen a major shift towards web-based applications as opposed to more traditional native applications for each operating system. With the ease of use of web-based applications, coupled with the fact that they require no installation, it is easy to see how web-based applications are quickly replacing their former native applications. Today, much of the software a normal user will use is accessed through their web browser, including applications such as Microsoft Word, Canva, and QuickBooks Online.

Three-Dimensional (3D) rendering is no stranger to this shift, albeit a bit behind the curve. In its current state, web-based 3D rendering is not yet widely used, often being used for small experimental creative projects rather than for larger projects. Web-based 3D rendering seems to exist as a niche at the moment rather than as a fully fledged tool. Given the fact that this sort of technology had really only started to be explored around 2007 (Cabello, 2015, 00:03:30), it is no surprise that it is still in its infancy.

I am interested in this topic because I have always been fascinated by 3D rendering, even from a young age. As someone that grew up playing video games, I naturally had the desire to create my own video games. Through working on my own video games, I discovered my passion for the software engineering side of video game development, and as such I developed an interest in writing code for 3D renderers. When I first learned that I could create 3D applications for the web, I was immediately intrigued and conducted research on the current state of this technology. As it turns out, it is quite underdeveloped in comparison to many other types of web-based applications. Due to this, web-based 3D rendering is not fully optimized for the variety of devices that may need to run it.

The lack of optimization of web-based 3D rendering proves to be an issue for a number of reasons, primarily the fact that many users that engage with web experiences might be accessing the web through a device that has less powerful hardware. I believe that this can and will lead to users with weaker devices missing out on 3D experiences, whether they be used for the purpose of education, entertainment, or a myriad of other useful purposes.

Past Coursework Connection

This project was chosen not just for my interest in 3D rendering, but also for the fact that it ties so much into my studies and other various projects both inside and outside of the classroom. I argue that this topic is the culmination of many years of knowledge I have developed with the aspiration of becoming a software engineer that works on 3D rendering applications.

Much of my coursework pertains to 3D rendering, namely my computer sciences classes. Object-Oriented Programming (OOP) is a course (as well as a method of programming) I took that focuses on how programming can closely mirror the real world through the concepts of objects and their relationship with one another. The knowledge I gained in that course has been very helpful to my development process during this project, as OOP was something I used extensively in creating my demonstrations; it allowed me to properly organize my code such that it would not become overly complicated and messy. Another course I have taken that pertains to this project is modeling for realtime systems, which taught me how to properly optimize 3D scenes to run better on a wider variety of devices. It also taught me a great deal about how the 3D rendering process works as a whole.

I have also dedicated much of my personal time to working on 3D applications, both as a user of 3D applications as well as a developer of such applications. When creating my own video games, I made use of game engines such as Unity3D and Unreal Engine which both provide built-in 3D renderers. I have also engaged with a variety of web-based 3D experiences, namely for Augmented Reality (AR) and Virtual Reality (VR). I have also developed my own 3D applications; one of these applications was a 3D renderer built using C++ that was targeted towards Windows based operating systems. Having been on both sides of 3D applications, this project ties nicely into my experiences outside of my studies.

Additionally, throughout this course, I have learned a great deal relating to conducting research and becoming more acquainted with the use of AI. The ability to properly research new techniques is vital for software developers, as it is often the responsibility of a software developer to research new solutions for a problem on their own. As for AI, it has proven to be quite useful in problem solving when it comes to programming. After having used AI, and having learned to use it more effectively in this course, I feel far more equipped to handle any problem thrown my way.

The experiences I have outlined above relate directly to my future plans, that being to develop 3D rendering applications as a software developer. A lifelong passion of mine has been to create 3D experiences for people, along with all the necessary software to support them. Much of my coursework in college, as well as much of the personal projects I’ve worked on, have all acted as a scaffolding for me to become a better software developer for 3D applications. 3D rendering for the web, especially, allows me to utilize my skills in both web development and 3D. As for this course, I feel that in future jobs, I will be better equipped to research solutions to problems I encounter. This is especially true for domains such as 3D rendering, which is often very complicated without the ability to properly research.

Objective

This project holds the primary goal of discovering novel methods of optimizing 3D rendering for the web so that users with less powerful devices may engage with 3D experiences that they may otherwise miss out on. Due to the fact that mobile devices are most commonly used to access the web, it is imperative that 3D rendering applications can run smoothly on these devices. Through the course of this project, it is my goal to successfully research and apply various optimizations to a web-based 3D renderer that is powered by Three.js. I chose Three.js because it is a large project aiming to provide a cross-browser, general-purpose 3D library (Bohak et al., 2024, p. 3). Three.js utilizes WebGL for its low level graphics functionality, which is an Application Programming Interface (API) that uses 3D hardware acceleration to enable efficient rendering (Peng, 2014, para. 4). Since this project seeks to inform people about different methodologies of optimization, the intended audience for this project is software developers, both hobbyists and professionals.

Implementations

File Compression

A major component of ensuring quick load times is creating files that are smaller in file size. This applies for all types of files used in 3D rendering, especially models and textures. The size of a model file` can be reduced through a reduction in the number of vertices; it is a balancing act of reducing the number of vertices as much as possible while avoiding jagged edges. Fanton (2025, para. 6) explains one technique for achieving this in Blender, which is a 3D modeling software, where the decimate modifier is used to reduce the number of polygons while maintaining the overall shape. Using this technique, models can be quickly optimized for better performance.

Additionally, textures can also be reduced in resolution and have different levels of compression applied to preserve detail while keeping file size down.

LODs

Another major concept in 3D rendering optimization is the process of replacing higher detail models with lower detail models when they are far away from the camera. The idea behind this is that a lesser amount of vertices is needed to produce the same visual quality at a greater distance. This concept is referred to as Level-of-Detail (LOD), where multiple versions of a model are created with decreasing numbers of vertices. Boutsi & Verykokou (2023, para. 9) discuss the idea of view-dependent LOD[s] [that] considers the viewer’s position and orientation to dynamically select the appropriate LODs.

File Format

There are a variety of different file formats that can be used for 3D rendering, including with Three.js. Model files are typically in the format of either a Graphics Library Transmission Format (.GLB/.GLTF) file or a JavaScript Object Notation 3D (.JD) file. Both formats have their advantages and disadvantages in terms of performance. GLB/GLTF files are more compact compared to other formats and … also [minimize] the loading time of 3D models which is essential for a smooth user experience (Koli et al., 2024, para. 24). However, JD files offer the advantage of accessing data only when necessary whereas GLB/GLTF files must be loaded in their entirety. Li et al. (2020, para. 1) found that the JD format reduce[s] the latency of mobile Web 3D in model data transmission and rendering by 24.72%.

Occlusion Culling

Occlusion culling is the concept in 3D rendering of hiding objects that cannot be seen through the camera view for the sake of reducing the number of vertices that need to be rendered. In order to know if an object is part of the screen, raycasting is used ... models not found on the screen will not be rendered (Subratty et al., 2015, para. 14). Here raycasting is drawing a line from the camera to the edges of an object to see if they are not obscured by other objects that are closer to the camera.

Conclusion

The goal of this project was to research methods to optimize web-based 3D rendering in the interest of making 3D experiences more accessible to users with less powerful devices. Through my research, I discovered a wide array of techniques that can be used to make 3D rendering more efficient. In actually implementing said techniques, I saw a great increase in performance in more complex scenes. All of the aforementioned optimization methods in this project seek to reduce the workload on the processor and to use a lesser amount of Random Access Memory (RAM), where weaker devices typically can handle less of a workload on the processor and are equipped with less RAM. The performance increase caused by these optimizations can be seen more clearly in scenes with a greater number of objects being rendered at once, which is vital for the development of more complex 3D experiences.

Much of these techniques are not entirely new to the world of 3D rendering, but rather underutilized in web-based 3D experiences due to Three.js’ lack of built-in support for them. Many 3D rendering applications that run natively on a user’s computer already provide support for these optimizations, leading to many applications utilizing them. However, the difficulty of implementing these features often leads to many web-based 3D rendering applications missing out on these effective optimizations. From my research, I have learned that much of the work that is left to be done for faster web-based 3D rendering is to find a way to properly implement already existing optimization techniques on a new medium. Another challenge with this is the fact that Javascript is required for web development, which is an inherently inefficient programming language compared to languages typically used for native 3D rendering applications. As such, methods that may work well for native 3D applications may be less useful for web browsers.

Reflection

Going into this project, I had a few goals in mind that I hoped to accomplish through both my research and my implementation of different optimizations techniques. I had a personal goal of becoming more proficient at writing 3D software and creating websites. I also had the goal of being able to contribute to the state of web-based 3D rendering as well as help promote more equal access to the opportunities that 3D based experiences can offer to people. I believe that I was able to achieve these goals, especially my personal goals of becoming more adept in my programming skills. While I hope to have had an impact on the industry, I recognize that as an individual my efforts are much more locally concentrated. However, I believe that differences made at the local level can ripple outwards towards a broader audience; this is my hope for this project. Regardless, I plan to continue to evolve and develop my software development skills through further research into 3D rendering well into my career.

Social Change Connection

I sincerely believe that the research conducted throughout this project is very relevant to a wide array of people, and serves to benefit even more people on top of that. Inequalities in access to technology are rampant across the world, which can leave people feeling left behind and can even deny them access to newer digital learning tools. The ability to access information is one of the most powerful tools in the world, and as such I believe that any efforts to increase accessibility to it is vital to the development of communities and countries across the world.

I shared the results of my research with a variety of people that have an interest in 3D rendering and software development. First and foremost, I shared these methodologies with many other people that I personally know that are either software engineers or just hobbyist programmers. I believe that these people stood to benefit from this research not just for the sake of creating better performing applications, but also for them to be able to create 3D experiences about which they are passionate. In addition to this, I also shared my findings at a workshop I hosted on campus related to 3D rendering using Three.js. In this workshop, I outlined my findings and described methodologies to create highly performative Three.js based applications. Throughout said workshop, I also stepped attendees through the entire process of creating a web-based 3D renderer. It is my hope that by sharing this information with others, accessible web-based 3D experiences can become more common and drive more innovation in the industry.

Annotated Bibliography

• Bohak, C., Kovalskyi, D., Linev, S., Alja, M. T., Strban, S., Tadel, M., & Yagil, A. (2024). RenderCore - a new WebGPU-based rendering engine for ROOT-EVE. EPJ Web of Conferences, 295, 03035. https://doi.org/10.1051/epjconf/202429503035

  Bohak et al. describe their process of adopting the RenderCore rendering engine for their data processing framework. Bohak et al. mention how they integrated RenderCore into their tech stack, how they modified it, and what they did to achieve better performance. I will be using this source for general information about Three.js in addition to learning how others have structured their three.js projects.

• Boutsi, A.-M., Ioannidis, C., & Verykokou, S. (2023). Multi-resolution 3D rendering for high-performance Web AR. Sensors, 23(15), 6885. https://doi.org/10.3390/s23156885

  Boutsi and Verykokou outline their use of AR.js and Nexus.js, and Three.js along with various optimization techniques to create high-performance 3D rendering for AR experiences for websites. They talk about using a Nexus.js algorithm to “subdivide mesh[es] into a sequence of increasingly coarser partitions,” allowing the renderer to only render as much detail as is needed for an object's apparent size. I will use this source to implement my own LOD features and file compression features.

• Cabello, R. [Mr.doob]. (2015, April 20). 5 years of three.js [Video]. YouTube. https://www.youtube.com/watch?v=57P8julAaRE

  Cabello discusses the general development process of Three.js, as well as the basics of using it. This is a presentation that Cabello, the lead developer of Three.js, gave at a conference. I will be using this source to explore why Three.js needed to be created in the first place.

• Cabello, R. (2025, March 30). Three.js (dev branch) [Computer software]. GitHub. https://github.com/mrdoob/three.js

  This is the GitHub repository that hosts the entire codebase of Three.js. I will be referring to this and utilizing the community features to figure out how Three.js works under the hood. I will be using this source extensively as I program as a reference.

• Fanton, N. (2025, February 11). Building efficient Three.js scenes: Optimize performance while maintaining quality. Codrops. https://tympanus.net/codrops/2025/02/11/building-efficient-three-js-scenes-optimize-performance-while-maintaining-quality/

  Fanton outlines a few ways of optimizing 3D rendering performance for Three.js powered web applications while retaining visual fidelity. He talks about not only simplifying models before exporting them into GLTF files but also compressing the resulting file. He also mentions using instancing to improve performance when rendering many objects at the same time. I will be using this source to explain how the “decimate” feature in Blender can be used to quickly optimize models.

• Koli, H., Jagdale, Y., Dudhmal, P., & Shaikh, B. (2024). RoomifyAR: Rendering multiple models to design a room. In 2024 3rd International Conference on Applied Artificial Intelligence and Computing (ICAAIC) (pp. 1251-1257). IEEE. https://doi.org/10.1109/ICAAIC60222.2024.10575841

  Koli et al. discuss their process of using Three.js and GLTF models to develop an AR experience for visualizing furniture in one's home. They mention how they make use of GLTFLoader inside of Three.js, which allows for the importing of custom 3D models from applications such as Blender or Maya. They also discuss using markerless tracking, which “bypasses the requirement of placing markers such as QR codes to place the models.” I will be using this source to explain some basics regarding the GLTF file format.

• 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

  Li et al. share their methodologies for separating model data from animation data to increase performance and reduce latency. Primarily, they break data down into “topological data and animation data sequences … [where] only the necessary data of the model [is] loaded.” They concluded by mentioning that they saw a 24.72% reduction in latency and data transfer by implementing a system that separates model data. I will be using this source to learn how I can utilize JSON 3D files to reduce latency.

• Peng, C. (2014). The research and design of 3D Web guide system based on WebGL. In Proceedings of the 26th Chinese Control and Decision Conference (CCDC) (pp. 4052-4054). IEEE. https://doi.org/10.1109/CCDC.2014.6852890

  Peng describes the development of a virtual reality powered guide system, meant for use in “large amusement parks and large shopping malls.” Throughout this article, the general process of creating a 3D web application is outlined, explaining all the technologies that were used to create it. The use of a websocket is explained as well, being used as a method of updating information and processing messages. I will be using this source to explain how WebGL is the standard for 3D rendering APIs for the web.

• Subratty Mohammad, A. I., Tonta Yannick, J. T., & Moloo, R. K. (2015). Increasing efficiency in visualizing large sets of 3D models on the Web. In 2015 IEEE International Conference on Electrical, Computer and Communication Technologies (ICECCT) (pp. 1-4). IEEE. https://doi.org/10.1109/ICECCT.2015.7226097

  Mohammad et al. discuss methods for optimizing rendering algorithms for complex 3D models and large groups of objects. They also discuss an algorithm that uses raycasting to determine what objects should be rendered, where “only the models that are intersected by rays will remain on the screen.” Level of detail (LODs) are mentioned as well, where Mohammed et al. explain their tests with swapping out higher detailed models for lower detail models. I will be using this source to implement an occlusion culling system.

• Three.js. (2025). Three.js documentation. https://threejs.org/docs/

  The Three.js documentation provides a reference and explanation for every feature included in the Three.js library. There are both pages that offer tutorials and pages that simply explain a certain feature. An important component is the getting started series of tutorials. I will be using this as I program to figure out what different built-in functions accomplish.

Works Cited

• Bohak, C., Kovalskyi, D., Linev, S., Alja, M. T., Strban, S., Tadel, M., & Yagil, A. (2024). RenderCore - a new WebGPU-based rendering engine for ROOT-EVE. EPJ Web of Conferences, 295, 03035. https://doi.org/10.1051/epjconf/202429503035
• Boutsi, A.-M., Ioannidis, C., & Verykokou, S. (2023). Multi-resolution 3D rendering for high-performance Web AR. Sensors, 23(15), 6885. https://doi.org/10.3390/s23156885
• Cabello, R. [Mr.doob]. (2015, April 20). 5 years of three.js [Video]. YouTube. https://www.youtube.com/watch?v=57P8julAaRE
• Cabello, R. (2025, March 30). Three.js (dev branch) [Computer software]. GitHub. https://github.com/mrdoob/three.js
• Fanton, N. (2025, February 11). Building efficient Three.js scenes: Optimize performance while maintaining quality. Codrops. https://tympanus.net/codrops/2025/02/11/building-efficient-three-js-scenes-optimize-performance-while-maintaining-quality/
• Koli, H., Jagdale, Y., Dudhmal, P., & Shaikh, B. (2024). RoomifyAR: Rendering multiple models to design a room. In 2024 3rd International Conference on Applied Artificial Intelligence and Computing (ICAAIC) (pp. 1251-1257). IEEE. https://doi.org/10.1109/ICAAIC60222.2024.10575841
• 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
• Peng, C. (2014). The research and design of 3D Web guide system based on WebGL. In Proceedings of the 26th Chinese Control and Decision Conference (CCDC) (pp. 4052-4054). IEEE. https://doi.org/10.1109/CCDC.2014.6852890
• Subratty Mohammad, A. I., Tonta Yannick, J. T., & Moloo, R. K. (2015). Increasing efficiency in visualizing large sets of 3D models on the Web. In 2015 IEEE International Conference on Electrical, Computer and Communication Technologies (ICECCT) (pp. 1-4). IEEE. https://doi.org/10.1109/ICECCT.2015.7226097
• Three.js. (2025). Three.js documentation. https://threejs.org/docs/