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文本有污点。

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