CLICK HERE TO SEE THE EFFECT!

(versión en castellano abajo)

First of all: Merry Christmas and Happy New Year!

 Today I’ve done a 3D snowman in Javascript. I decided to do something Christmas-related and also to try the canvas element and the direct pixels color-value control with createImageData and putImageData.

So, just before the web gets truly 3D with standards like WebGL, I thought it would be cool to try the oldschool cpu software rendering in Javascript. Would it be possible? Could I even do some kind of lightning? The answer is yes: but it required a lot of tricks and even with those, a fast computer to render at a reasonable framerate. Javascript continues being very slow for things like this one.

 What I did: parallel sphere raycasting with some modifyed/simplified SSAO (screen space ambient occlussion).

Just a little note: This is a one-file effect, there are no textures or whatever, and everthing fits in only 4kb.

UPDATE: Thanks so much to p01 - an expert javascript coder and part of the Opera browser team - for suggesting the change from createImageData(widht, height) to getImageData(0, 0, width, height). Now it works in more versions of browsers.

Castellano

Ante todo: ¡Feliz Navidad y próspero año nuevo!

Hoy he hecho este muñeco de nieve en 3D con Javascript. Decidí hacer algo navideño y también probar el elemento canvas (aún no había hecho nada porque suelo inclinarme más por efectos totalmente crossbrowser) y el manejo de color de píxeles directo que proporcionan createImageData y putImageData.

Antes de que la web se vuelva totalmente 3D gracias a futuros estándares como WebGL, pensé que estaría bien intentar algo de renderizado a la antigua usanza, usando la cpu en Javascript. ¿Sería posible? ¿Podría agregar algún tipo de iluminación? La respuesta es sí: pero ha requerido bastantes trucos y aún así necesita un ordenador bastante potente para mostrar suficientes imágenes por segundo. Javascript sigue siendo un poco lento para estos fines.

Lo que hice: trazado de rayos no recursivo para esferas e iluminación SSAO (Oclusión ambiental aproximada basada en el buffer de profundidad), modificada/simplicada para mi efecto.

Una pequeña nota: este efecto está contenido al completo en un único fichero html, no hay texturas ni similar, y todo ocupa sólo 4kb.