5 ms·
I made this demo using http://www.pixijs.com/ http://www.pixijs.com/ Something I'm really happy with is the psuedo-3d effect on the cat using a displacement ma
by dhotson 11y ago
I made this demo using http://www.pixijs.com/ http://www.pixijs.com/
Something I'm really happy with is the psuedo-3d effect on the cat using a displacement map.
I took the cat sprite (http://dn.ht/picklecat/mesmercat.png http://dn.ht/picklecat/mesmercat.png) and made a "depth map" (http://dn.ht/picklecat/mesmercatdisplacement.jpg http://dn.ht/picklecat/mesmercatdisplacement.jpg) where white is closest and black is furthest. This information is used to determine how far to move the underlying pixels. It's enough to give a subtle illusion of depth.
- cjslep 11y agoHow did you create the depth map?
- mbilker 11y agoHe did it in Illustrator. I find his work fascinating.
- prezjordan 11y agoWould love to hear more about how you generated the depth map - that's super cool.
- dhotson 11y agoI'm glad you asked! :) I created it in Adobe Illustrator using a gradient mesh: http://i.imgur.com/kuuFVO2.png 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.
- flashman 11y agoThat's a really clever solution!
- ekianjo 11y agoIs that something one can do with Inkscape as well ?
- voltagex_ 11y agoNope, wonder how much it would cost to get it implemented?
- simoncion 11y agoYou sure? http://wiki.inkscape.org/wiki/index.php/Mesh_Gradients http://wiki.inkscape.org/wiki/index.php/Mesh_Gradients http://www.shmoggo.com/inkscape-tutorials/how-to-unlock-the-gradient-mesh-tool-in-inkscape/ http://www.shmoggo.com/inkscape-tutorials/how-to-unlock-the-...
- voltagex_ 11y agoEvidently not! Nice find.
- stuaxo 11y agoThey have been building it, AFAICT looks like it's in the dev builds. http://wiki.inkscape.org/wiki/index.php/Mesh_Gradients http://wiki.inkscape.org/wiki/index.php/Mesh_Gradients
- zionpi 11y agoYou mean each point?That's really tough work.
- egypturnash 11y agoHe 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.
- sgrove 11y agoI was wondering how you did that, actually - well done!
- namuol 11y agoYeah 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!
- rl3 11y agoI'd like to congratulate you for the fact that this has higher production values than the majority of WebGL applications out there.
- _pmf_ 11y ago> 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.
- vonklaus 11y agoI am on mobile with a 3 year old iphone 5. Works.
- x0 11y agoWell, I know what I'm doing for the rest of the day. (if it wasn't obvious, playing around with pixijs!)
- jevgeni 11y agoI'll spend my day looking at pickles, thank you very much.
- morganvachon 11y agoGreat work, silly but ingenious. For some reason I find the "depth map" creepy to look at on its own.
- intjk 11y agoIt looks like a ghost, or a 'soul'--that which brings life to an object. :)
- swcoders 11y agoreally great. Please write blog about this
- ricklamers 11y ago+1 for Pixi.js. Pixi.js is awesome.