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.

tagged: , , » 1 reaction

Comments

[gravatar]
Román Cortés 6:37 PM on 28 Dec 2009

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:

name
email
Ignore this:
not displayed and no spam.
Leave this empty:
www
not searched.
 
Name and either email or www are required.
Don't put anything here:
Leave this empty:
URLs auto-link and some tags are allowed: <a><b><i><p><br><pre>.