This is another javascript effect I did. I might use it on the loading screen of my next javascript game as it doesn't need any textures (just like the starfield in jswars). It's based on an effect I wrote about 6? years ago. Sadly the canvas tag doesn't support palettes natively and mapping the colors in javscript too slow so the colors look less than optimal. Also chrome seems to render the result differently from firefox. This could be related to this issue.

Demo

Click the image to start the effect

How it works

Basically there are two maps, the heat map and the cooldown map. The cooldown map is generated using a noise function similar to perlin noise.

The noise texture is generated by first randomizing the alpha values and then drawing scaled versions of the noise texture onto itself. The high frequency noise was increased to create more flickering in the flames. The heat map is what you see before you click on the example. The algorithm then basically works like this:

1. Noise is draw on top of image to cool it down
2. The whole image is shifted up one row
3. The heat map is applied to 'heat up' the pixels

For more details just read the source and feel free to ask questions.

I made a little experiment with normal mapping and phong shading in javascript which turned out to work quite well. I think with a little bit of tweaking it could be used in a real time game. Just move your mouse over the images bellow to see it in action. You'll need a modern browser supporting the canvas tag for this to work. Google Chrome seems to be the fastest.

Demo

Source

You can view the source code here: light.js. Feel free to copy from it, but please notify me if you use it for something cool. :) Also beware that the code is pretty hacky and unpolished.

How it works

The 3D effect is basically created using 2 textures. One contains the color of each pixel and the other the surface normal. The color image is rendered using only indirect lighting (ambient occlusion in that case). The direct light is then calculated in real time using phong shading without the diffuse part. For a more accurate description, read the source. ;)

Credits

The dragon head used in this demo comes from planetpixelemporium.com. The Buddah is from the Stanford 3D Scanning Repository and was rendered and baked using blender. Thanks for letting me use it.

I played around with 2d lighting for a game I'm working on. I'll probably post how it's done once it's a bit refined (and quicker!). It's currently written in C and running on the CPU. I'm looking for a way to do it using glsl though.

This is mostly just a note to myself, because I have to look it up every time I need to generate one, and the make-ssl-cert script that comes with debian doesn't appear to work.

openssl req -new -x509 -days 365 -nodes -out /tmp/cert.pem -keyout /tmp/cert.pem

I played around with html5 web workers today. I quickly ran into an issue with chrome. Chrome (and probably also Safari) limit the messages that can be passed around to strings. The spec seems to allow arbitrary objects though, which works in firefox. Luckily Chrome supports native json, so here is a quick workaround.

// in the worker
if(navigator.userAgent.indexOf('WebKit')) {
    var _postMessage = postMessage;
    postMessage = function(data) {
        _postMessage(JSON.stringify(data));
    }
}
// in the page
worker.onmessage = function(e) {
    // assign it to a variable, e.data seems to be read-only
    var data = e.data;
    if(navigator.userAgent.indexOf('WebKit') != -1) {
       data = JSON.parse(data);
    }
// ..

In the worker monkey patching is easily possible. But I'm not aware of a nice way to intercept events so, I just put the decoding in the event handler. If I would need this in a lot of places I would probably write a higher order function the decode the argument.