Shader retrofits

Work continues on the space game. It’s now possible to play from about 1 meter in size to somewhere around 1000km and continue to encounter new objects to absorb – planetesimals, moons, gas giants, etc.

Part of doing this has involved a somewhat tedious adaptation of Three.JS’s generic phong material. The problem is basically that you can’t easily ‘add an effect on top’  for the material, you almost have to reimplement the entire shader. I didn’t have to go quite that far, but I did have to print the shader code into the console, copy-paste it into my code, and tweak it from there. The entire thing is something like 600 lines long, and has a bunch of tricksy things you have to do to get it to work (setting defines on the material to enable features that are normally automatically configured by the WebGLRenderer).

The entire experience has made me want to make something like Blender’s node-based materials editor for shaders. If you want a glow on top of a phong material? No problem. Add an electron microscope effect too if you like, and a cartoon shader on top of the whole thing. It’d be a pretty involved project, so its not going to happen for the space game, but it seems a natural tool to have.

Anyhow, the reason for rebuilding Three.JS’s shader? We wanted to add ‘rim lights’ around objects. This effect basically just lights the material when the surface normal is near-perpendicular to the view vector (something like (1-(normal dot view))^4). It turns out that putting this on the ice shard models turns them from looking like kind of purple rocks into really looking like ice. I think its going to do wonders for planetary rims as well.

Leave a comment