xkcd怎么做xk3d？

Question

今天在xkcd发现的3D网络漫画让我感到惊讶。他怎么会这样做的？是否需要手动重做每一部漫画，或者是否有某种方式使其自动化？

修改

3D漫画仍可在http://xk3d.xkcd.com

上找到

Answer 1

每个图像都分为多个图层 - 每个图层都是自己的PNG文件，并且包含很多透明度。

所有这些图片都嵌套在<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>

... <div id="comic">相对定位（或更重要的是，非静态定位），每个图像绝对定位在其中，并重新调整大小。移动鼠标时，会进行一些强烈的数字运算，以重新计算每个图像的top和left CSS属性的新值。

我在我的网站上写了更多关于它的内容，并解释了如何从头开始构建自己的简化版本：http://richard.jp.leguen.ca/not-blog/how-is-xkcd-in-3d

然而，每个图像分层都是自动化的，并且（愚人节玩笑？）要求志愿者做得更好。

Answer 2

这是（半）手册，兰德尔试图众包转换，请参阅here

Answer 3

是的，它正在使用一个脚本xk3d.js，并结合automatic system将漫画分割成图层。

这在某些方面看起来不错，比如first。但是其他人，比如483，由于3D文本的斑点，真的会让你头疼。

因此，他们正在寻求志愿者手动将他们分成更好的层次。