When programming WebGL you need to be careful to make it portable. The following post will explain how to make WebGL portable across many devices, what to look out for and techniques to work around the limitations you face.
Shadow mapping is one of those things that a lot of people struggle with. It is also a very old shadowing technique that has been improved in a variety of ways. I'd like to make a brief trip trough the history of shadow mapping hopefully shedding some light on the topic and introduce you to some very nice techniques.
There is (among graphics enthusiasts) a lot of debate what API/version of something to use with a bunch of hotly contested alternatives. I would like to convince you to give WebGL a try, and this blog post explains why. It will also quickly summarize a few things people usually ask about WebGL. There are many gotchas (like with anything) as well, and I am aware of a lot more of them than you can imagine. I will perhaps talk about them in another blog post.
The problem of lighting 3D scenes in hardware accelerated rasterized rendering is really hard to solve. There are no 100% solutions, and what seems perfectly obvious to the uninitiated (light just bounces around) is extremely hard to do in practise. The following blog post is about one such method that I wanted to try out for a long time.
If you need to render trails you can use particles. These give nice puffy effect. At other times you'd like to have a more well defined line (like say for missile trails). The following post shows one technique render trails with a single triangle strip optimized not to use too many triangles and does not lead to the puffy look of particles.
Handling WebGL extensions is a big of a headache becuse of vendor prefixes, which the Khronos WebGL working group choose to conflate with the meaning of experimental (draft) extensions. In order to solve this problem I've written a small library to get rid of the need to use vendor extension names, yet be able to specify if you want draft extensions as well.
In two previous posts I examined capabilities of WebGL and the challenges for WebGL/HTML5 as a game app platform. It has been 8 months since the last writeup, and a lot has happend. Browsers have introduced new capabilities and I have written a site to collect WebGL statistics. The following post will look at what's changed, and what conclusions we can draw from the statistics.
I have been writing a bunch of WebGL code over the last year, and I got a bit into Coffeescript. What has always bothered me is how messy it is to create structured applications. A major part of that is that JS has no module system. The following post presents a way to deal with the issue.
A while ago I finished playing From Dust which I enjoyed a lot. What impressed me about that game was the application of landscape changes by erosion. One drawback of the tool Lithosphere I wrote earlier is that it can't do any form of hydraulic erosion. I decided to write a test in WebGL to see if a few simple algorithms could be used to shape a landscape according to hydraulic erosion.
The grass demo I did earlier used some Screenspace Ambient Occlusion. I thought it was a cool effect, and decided to research the topic futher. Scren-Space Ambient Occlusion is an incorrect aproximation to true ambient occlusion, and it has a couple problems, but it can be a useful technique.
In the book Game Engine Gems 2: Chapter 13 author Rémi Arnaud examines different browser based 3d rendering techniques. According to Rémi, many 3D web rendering technologies failed because they could not get game developers on board. An example is VRML, which was pronounced dead on arrival by John Carmack.
In part 2 of this series I explained about how to get the sky. This entry is about how to compute an irradiance environment map from this cubemap.
I was interested in how many people have support for WebGL and what features they do support. My Demos reported issues to me as well as hardware capabilities. This gives me a good way to analyze what I'm doing right or wrong.
In Part 1 of this howto, I introduced my demo. In this part I'm going to talk about how to make the sky. The demo also computes an irradiance map and applies it to the cube. I'm going to talk about this in Part 3.
WebGL is now enabled by default in both Firefox 4.0 and Chrome 10.0, so I thought I give it a try and see what I can get out of it. The goal was to render some simple terrain, nice looking sky and waving grass. In this part of the description I will give the overview of how that works.