Hay retos que suenan absurdos. Hay quien quizás tiene mucho tiempo libre, la destreza en programación necesaria y un afán por resolver problemas, ya sean estos sencillos o complejos. Y este parece ser el caso de tratar de renderear (valga la expresión), la clásica tetera en 3D usando DHTML (Javascript y HTML pero sin hacer uso de Canvas, sin usar CSS 3, sin SVG. Suena imposible, pero no lo es.
Brian Beckman y Erik Meijer son figuras conocidas en el canal 9 de videos de Microsoft, pero su última creación apareció como un artículo escrito en el sitio de ACM (Association of Computing Machinery). La idea es crear una aplicación que haga un render usando solamente HTMLy Javascript.
La clave es que se puede usar div y, usando Javascript, se le puede asignar color, tamaño y posición. Esto significa que se puede tener un pequeño rectángulo de colores que puede ser usado para crear otros dibujos y formas. En otras palabras, DHTML (Dynamic HTML), ya tiene sus propias primitivas de gráficas vctoriales. Se puede incluso trabajar con mapas de bits (bitmaps), “aplastando” el div hasta el tamaño de un solo pixel.
Con esto en mente, se pueden usar divs múltiples para renderear una escena 3D. El problema es que las gráficas modernas trabajan usando triángulos, no rectángulos. La solución es hacer que el div solamente muestre el área de color triangular. Esencialmente el truco se hace usando el estilo del borde, de manera que éste sea tan grande, que no quede nada a la mitad del propio div.
Después, hay que aplastar dos de los triángulos, poniendo el ancho de los bordes en cero y finalmente hacer que uno de los bordes sea transparente. El resultado es un div que muestra un solo triángulo. Sin embargo, el problema es que todos estos triángulos tienen una orientación. Un motor gráfico 3D usualmente usa triángulos generales. No obstante esto, la solución es simple: romper cada triángulo general como una combinación de triángulos div. Suena fácil pero no lo es tanto. Véase el artículo original para todos los detalles.
Se piensa que Jeff Lau fue quien hizo el truco de los triángulos por primera vez, pero de ahí a renderear toda una tetera se ve como una tarea de locura.
Se pueden ver ejemplos del rendereo de la tetera con triánglos div aquí, aunque no hay una implementación de etso en Javascript.
Referencias: