How is xkcd doing xk3d? [closed]

Question

I'm amazed by today's 3D webcomics found at xkcd. How would he have done that? Would it require manually redoing every single comic or is there some way to automate it?

Edit

The 3D comics are still available on http://xk3d.xkcd.com

Answer 1

Yeah, it's using a script, xk3d.js, combined with an automatic system to split the comics into layers.

This looks good on some, like the first. But others, like 483, really could give you a headache, due to the blotchy 3D text.

As a consequence, they're seeking volunteers to manually split them into better layers.

Answer 2

It's (semi) manual, and Randall is trying to crowdsource the conversion, see here

Answer 3

Each image is split into layers - each layer is its own PNG file and includes a lot of transparency.

All these images are nested inside a <div>:

<div id="comic">
    <!-- style attributes omitted -->
    <img src="http://imgs.xkcd.com/xk3d/880/headache_box.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_handle.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_bike.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_handle.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_girl.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_desk.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_mask.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_computer.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_desk_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_guy.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_computer.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_desk.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_box.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_text.png" >
</div>

... the <div id="comic"> is relatively positioned (or more importantly, non-statically positioned) and each image is absolutely positioned within it, as well as re-sized. As you move the mouse, some intense number crunching is done to recalculate new values for the top and left CSS properties of each image.

I wrote some more about it on my web site, and explain how to build your own simplified version from the ground up: http://richard.jp.leguen.ca/not-blog/how-is-xkcd-in-3d

The splitting of each image into layers, however, is automated, with a (April fools joke?) call for volunteers to make it better.