SSAO JS Snowman WTF?

Monday 28 December 2009This is close to 15 years old. Be careful.

Román Cortés has a special place in my heart, since it was my animation of his Homer Simpson in CSS that got me my first and only Slashdotting. But Román hasn’t rested on his laurels. His blog is full of edge-pushing browser experiments.

So far in December alone, he’s done Las Meninas in 3D with CSS, a pure JavaScript text reflection, and his latest, a 3D snowman in JavaScript.

This last one, he explains, uses parallel sphere raycasting, with some simplified screen-space ambient occlusion, all built on the canvas element with direct pixel color control. Of course it does. The words describing it are practically longer than the mere 4k of JavaScript that implemented it!

I don’t understand what all that is (yet!), but I know Román routinely does things other people don’t realize are possible.

Comments

[gravatar]
Hi Ned!

Merry Christmas and Happy New Year! How are you? Thanks so much for writing and for the nice words.

I'm just recovering of swine flu and playing a bit with the canvas element during these holydays.

The "parallel sphere raycasting" is something much easier than what it sounds: given the 2d center (x and y coordinates) and the radious of a sphere, I calculate the z coordinate for the pixels on the screen. Since I do it "parallel" - or, with other words, without perspective -, the ray/sphere intersection is fast and simple.

Then, the SSAO. It is a technique created for the videogame Crysis for fast realistic-to-the-eye lightning, and again, it sounds more complex than what it really is. It is just adding shadows to pixels that have higher z-indexs in the pixel neighbourhood. Even being that simple, the results looks very good, with a extremely low cost compared to any global illumination method used in 3d applications.

Add a comment:

Ignore this:
Leave this empty:
Name is required. Either email or web are required. Email won't be displayed and I won't spam you. Your web site won't be indexed by search engines.
Don't put anything here:
Leave this empty:
Comment text is Markdown.