Как xkcd делает xk3d?

Ответ 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"> относительно позиционируется (или, что более важно, не статически позиционируется), и каждое изображение абсолютно позиционируется внутри него, а также изменяет размер. Когда вы перемещаете мышь, выполняется некоторое интенсивное хрустение числа, чтобы пересчитать новые значения для свойств CSS top и left для каждого изображения.

Я написал еще немного об этом на своем веб-сайте и объясню, как создать свою упрощенную версию с нуля: http://richard.jp.leguen.ca/not-blog/how-is-xkcd-in-3d

Разделение каждого изображения на слои, однако, автоматизировано, с (шутка в апреле-дураке?) призывает добровольцев сделать это лучше.

Ответ 2

Это (полу) руководство, и Рэндалл пытается перераспределить конверсию, см. здесь

Ответ 3

Да, он использует script, xk3d.js в сочетании с автоматическая система, чтобы разделить комиксы на слои.

Это выглядит неплохо на некоторых, например . Но другие, такие как 483, действительно могут дать вам головную боль из-за пятнистого 3D-текста.

Как следствие, они ищут добровольцев, чтобы разбить их на более качественные слои.