How is xkcd doing xk3d? [closed]

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 10 years ago.

Improve this 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

---

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.

---

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

---

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.