I'd like to congratulate you for the fact that this has higher production values than the majority of WebGL applications out there.

> I'd like to congratulate you for the fact that this has higher production values than the majority of WebGL applications out there.

1. Doesn't crash video card driver. 2. Doesn't crash browser. 3. Doesn't show empty tab. 4. Doesn't cause 100% CPU usage. 5. Doesn't hang browser forever.

I am on mobile with a 3 year old iphone 5.

Works.

Would love to hear more about how you generated the depth map - that's super cool.

I'm glad you asked! :)

I created it in Adobe Illustrator using a gradient mesh: http://i.imgur.com/kuuFVO2.png

Illustrator's gradient mesh tool lets you create a grid of points where you can choose a colour for each point. I overlayed the grid onto the sprite and estimated the distance at each point.

Is that something one can do with Inkscape as well ?

They have been building it, AFAICT looks like it's in the dev builds.

http://wiki.inkscape.org/wiki/index.php/Mesh_Gradients

Nope, wonder how much it would cost to get it implemented?

You sure?

http://wiki.inkscape.org/wiki/index.php/Mesh_Gradients

http://www.shmoggo.com/inkscape-tutorials/how-to-unlock-the-...

Evidently not! Nice find.

That's a really clever solution!

You mean each point?That's really tough work.

He didn't have to color in every single pixel. The gradient mesh lets you create a loose grid of Bezier curves, with a color set at each intersection; Illustrator will interpolate between them.

Great work, silly but ingenious. For some reason I find the "depth map" creepy to look at on its own.

It looks like a ghost, or a 'soul'--that which brings life to an object. :)

Well, I know what I'm doing for the rest of the day.

(if it wasn't obvious, playing around with pixijs!)

I'll spend my day looking at pickles, thank you very much.

Yeah I came here to ask how you did the faux-3d cat. It's very subtle, but effective as hell. I thought you were using some kind of fancy parallax shader, but I can see how a displacement map can approximate the same thing. Awesome!

+1 for Pixi.js. Pixi.js is awesome.

I was wondering how you did that, actually - well done!

really great. Please write blog about this

How did you create the depth map?

He did it in Illustrator. I find his work fascinating.