Fun day! I've been working on a new shield effect the last couple days and I got it working today. The idea was to develop something like this fresnel soap bubble effect. I have to say, WebGL is pretty cool. I never thought I'd be following 3D rendering examples that run live in a web browser. Really nice of them to supply the source code for the shader.
Not that it's a simple drop in...
The biggest part of the job was adding support for cube maps to my renderer. Unfortunately, I discovered that my OpenGL books are outdated again! I have the OpenGL SuperBible and OpenGL Shading Language as well as the OpenGL Programming Guide. They cover most of the things you need to know, but with OpenGL 3.0 a whole bunch of functionality became deprecated, and at some point on the way to the current 4.2, the techniques for passing values in and out of shaders have been redone. There are newer editions of the books, but they are for OpenGL 3 when OpenGL 4 is almost two years old already. It can be expensive staying modern.
The OpenGL SuperBible has OpenGL 3.1 source code for a cube-map example online and it was pretty easy to follow.
The fresnel shader needed a couple of extra matrices my material system didn't have an easy way to pass to the shader. Newer OpenGL deprecates a lot of the gl_ constants and ftransform, so I took a step forward by adding support for automatically passing the modelMatrix, viewMatrix, projectionMatrix and modelViewMatrix to shaders that need them.
Debugging shaders is pain. I'm not all that hot at math, particularly 3D math, so there's a lot of staring at it to decide if it is correct. After doing a few shaders, I now start with a simple solid color shader, then build from there. With the fresnel shader, there are two parts to the shader: the reflective part and the fresnel part. The reflective part seemed the easiest part to be able to judge its correctness by looking at it so I started there. First I noticed that when the camera moved the reflection moved the wrong way. Turns out I had to reverse the X coordinates for the cube mapping.
I am mapping a sphere, but if you look at the soap bubbles in the sample, they are nice and smooth looking, but mine was all faceted - kind of like a disco ball. Something was wrong with the normals. Got it! All the normals were sticking straight out from the faces, rather than half-way between the adjacent faces. Hunted around in Blender and found I needed to select smooth shading rather than the default shading. Immediately the sphere switched to smooth in blender. Loading it into the game, it looked just like it did in Blender. It amazes me every time that happens (although it happens pretty consistently now - the pipeline's getting solid.)
With the reflection working I put the fresnel part back into the pixel shader, and voila - a soap bubble appeared.
I still have some work to do on my shield effect. Now that its working, I'm not sure if I'm going to use the cube map. The one problem with the cube map is that it needs to be generated based on where the object that is reflecting is located in the world, so as a practical matter, for moving objects the cube map texture needs to be updated frequently. I'm not sure I want to go to all that trouble. I thought I might be able to use it with a static cube map of grass and sky, but I'm not really satisfied with the look of that now that I've seen it.
Cube maps are certainly a worthwhile feature however as it gives me the option of supporting reflective surfaces and I can easily add a skybox.
