2D Lighting and Shadows Engine


The research and preparation for this project began the week of the 15th of December 2014. This was about 1 week after Ludum Dare 31 had finished. I don't know what exactly got me motivated to start this project but inbetween finishing my game for Ludum Dare 31, looking for ways to improve and watching this youtube video I found myself working towards trying to implement this.

Research and Preparation

I began by going through this webgl blog and following the tutorials there. I only actually did the first 4 or 5 of them because the rest were 3D and this project was going to be 2D. After completing the relevant tutorials from that blog I noticed the person who made the youtube video of the 2D lighting and shadows in OpenGL had ported it to WebGL (click this to see it). This was exactly what I wanted. So I inspected the page to look at the source but it was obfuscated. So I followed up by contacting Jacob the person who made it to see if he had the original source and this was part of his reply: "Yeah, the WebGL one is obfuscated. In retrospect it was silly of me to do that, but I actually don't have the original source to it". After further research I could not find another WebGL lighting and shadows live example. So with my very little WebGL experience I began work on attempting to convert his OpenGL lighting system on github to WebGL.


Converting took time, a lot of time. It probably took a week to get a majority of it working properly. The main issue I had was that the code I was converting used OpenGL primitive functions like "glBegin(GL_QUADS)". These are low performance functions that make for a quick and easy way to draw polygons. WebGL is based off OpenGL ES 2.0 which do not have these primitive functions. So obviously I couldn't easily convert this code. To solve this issue I looked back on those tutorials I did which to draw polygons used these things called Vertex Buffer Objects or VBOs for short. I hacked and slashed these VBOs into the rest of the converted code and after a bit of tweaking it worked. It would draw squares on the screen but the shadows still wern't casting off these squares. I spent several hours trying to figure out why the shadows wouldn't cast and in the end nothing was wrong with the shadow code. The problem was stenciling wasn't enabled when I would initialize WebGL.

Once the core engine mechanics were working I put everything into nice easy to use high level functions so that this could be used in the future with ease. Other than that I added extra features like being able to draw polgons with up to 52 faces. I capped it at 52 because anymore than that still looked like a circle and would just degrade performance. Another feature I added was being able to texture squares because plain shapes get boring after a while. I edited the shaders so that an ambient light was multiplied by anything being rendered, this would be useful in games that wanted day/night cycles etc. To go with this I added a higher level function for this where you could set the ambient light colour/intensity easily. There were other features that were added that I don't think is worth mentioning here.


As the engine is feeling more and more complete my work on it slows down but if I see a feature that needs adding or a bug that needs fixing I will eventually do it. I hope to use this engine in Ludum Dare 32 to create an awesome game with it. A live example of this 2D lighting and shadows engine can be seen here. You will need a decent computer to be able to run that demo. The entire engine is open source and available on github here.