Experimenting With WebGL

WebGL allows hardware-accelerated 3D graphics to run directly inside of a web browser. Having worked with both OpenGL and Javascript in the past, I wanted to investigate the potentials of working on projects with the two technologies combined.

It appears that your web browser does not support WebGL.
Unfortunately, this means that the demo will not work. However, screenshots will be displayed instead!
This demo should be able to run on the latest versions of Google Chrome and Mozilla Firefox.

Click on an image to enlarge.

To get started, I searched online for tutorials, and found learningwebgl.com. This website features a very easy-to-follow and detailed guide on getting started with the basics of WebGL. It helped me learn how to implement the code, and from there I was able to customize it and make it into my own demo. Although this demo uses some of the code that I discovered from the tutorials, I modified it and split it up into multiple classes, and added some of my own features. My goal is to make a system on which I can later build to work on a WebGL project.

Why not use THREE.js or another library? A library such as THREE.js would make creating a WebGL demo much easier, but it would also greatly diminish my ability to learn how it all works. The point of doing this was not to get quick results, but to understand how to work with WebGL, and starting from scratch was the best way to learn.

One of the biggest modifications I made to the code was implementing a GraphicalObject class. Each GraphicalObject contains the buffers and textures needed to render the 3D object to the screen, but it also contains transformation data that is specific to that object. For example, if I wanted to scale a cube, I can simply do cube.scale(0.5); to halve its size. This will make working with objects much easier in bigger applications.

In order to be able to create full 3D scenes, it was necessary to implement a way of reading in 3D models. I decided to work with Wavefront (.obj) files, as they are a common text-based format, and they are easy to read with Javascript. I implemented the file reader using HTTP requests to fetch the data from the .obj file and a Javascript function to translate the file's data into GraphicalObject objects. Right now it's fairly simple, but I aim to improve my code so that it can read and render models with complex material properties.

While learning WebGL, I happily gained a lot of general knowledge about graphics altogether. The similarities between WebGL and OpenGL helped me learn more about programming 3D graphics, and I hope to eventually find the time to work on a more advanced project using C++ and OpenGL. I also learned some valuable information about working with Wavefront files, and I got some nice experience in using Blender to create 3D models - a task that I was glad to find rather enjoyable.

Plans for the Future

In order to unlock the possibilities of using this code as a foundation for future projects, I intend to add a few more features to the demo. My goal is to familiarize myself with GLSL and improve the shaders to work with object transparency, shadows, and overall more advanced lighting. I would also like to experiment with 3D particle systems. At some point, I hope to bring the entire program over to C++ and try to re-implement it as a normal application so that I can get more experience with classic OpenGL, and/or perhaps even Direct3D.

The more I work with WebGL, the more enjoyable I find it to be. Despite the relatively steep learning curve, I find it very rewarding to see working code running in real-time on the screen. Ultimately, I hope to turn this into a full project, perhaps in the form of a simulation or small game. I believe that WebGL is a great medium for technology and creativity to meet, and I'm looking forward to keep on working with it.

Back to Top