javascript - survival - xkcd password

¿Cómo está xkcd haciendo xk3d?

Question

Me sorprenden los webcomics tridimensionales de hoy en día que se encuentran en xkcd . ¿Cómo hubiera hecho eso? ¿Necesitaría volver a hacer manualmente cada comic o hay alguna forma de automatizarlo?

Editar

Los cómics 3D todavía están disponibles en http://xk3d.xkcd.com

Answer 1

Es (semi) manual, y Randall está intentando convertir la conversión en una fuente colectiva, mira aquí

Answer 2

Sí, está usando un script, xk3d.js , combinado con un sistema automático para dividir los cómics en capas.

Esto se ve bien en algunos, como el primero . Pero otros, como 483 , realmente podrían darte un dolor de cabeza, debido al texto en 3D manchado.

Como consecuencia, están buscando voluntarios para dividirlos manualmente en mejores capas.

Answer 3

Cada imagen se divide en capas: cada capa es su propio archivo PNG e incluye mucha transparencia.

Todas estas imágenes están anidadas dentro de un <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>

... el <div id="comic"> está relativamente posicionado (o lo que es más importante, no está posicionado estáticamente) y cada imagen está absolutamente posicionada dentro de él, así como también cambia de tamaño. A medida que mueves el mouse, se realizan algunos crujidos de números intensos para volver a calcular los nuevos valores para las propiedades CSS top e left de cada imagen.

Escribí más sobre esto en mi sitio web y le expliqué cómo crear su propia versión simplificada desde cero: http://richard.jp.leguen.ca/not-blog/how-is-xkcd-in-3d

La división de cada imagen en capas, sin embargo, está automatizada, con un llamado (¿bromistas de abril?) Para que los voluntarios lo mejoren.