La web es un mundo cambiante y en movimiento cada día. Quizás siempre hemos pensado en una web en dos dimensiones, pero nunca en una en 3 dimensiones, es normal, los sitios web se crearon para ser visualizados en dos dimensiones.

Sin embargo, con el tiempo llegaron los gráficos en tres dimensiones, renderización en vivo, y todo ello requirió plugins tradicionales que todos conocemos: Shockwave gracias a Macromedia, Unity nos trajo Unity Web Player, y también hemos usado gráficos 3D en juegos, mayoritariamente.

HTML5, CSS3 y Javascript en algún punto, han intentado cambiar esta perspectiva, sin embargo el 3D se sigue usando mayoritariamente para juegos, aunque ahora gracias a Voxel, integrar gráficos en un sitio web es más fácil que nunca.

Aunque no debemos de equivocarnos y usar el 3D en el propósito incorrecto (navegación 3D con gráficos, por ejemplo), bien usado puede llegar a ser una gran progresión para cualquier sitio web.

Voxel.css es un framework que utiliza CSS3 para renderizar objetos 3D, Javascript es usado para añadir interactividad, crear las animaciones y poco más.

Estilo

No te ilusiones, no vas a conseguir gráficos de juegos hipermodernos, conseguirás cubos, estilo Minecraft, como el nombre del framework indica. Sin embargo, esto no quita que puedas hacer impresionantes creaciones con bloques gráficos. Piensa en elevar el arte de 8 bit a un nuevo nivel.

Fácil renderización en 3D

La implementación básica de Voxel.css solo requiere incluir la librería y 15 líneas de código. Esto crea una escena donde puedes editar tus modelos con un sistema de “apuntar y hacer click”.

También puedes mostrar esas escenas en cualquier sitio web y animarlas como desees.

Usar cualquier tipo de imagen para texturas

Puedes usar un PNG para transparencia, un gif para animación o un archivo SVG para estabilidad ilimitada, además de usar el formato WebP porque te gustan las cosas que no están implementadas en todos los navegadores. Aquí podrás ver una demo que usa tu webcam como textura para bloques.

Aceleración GPU

No te preocupes por la lentitud en los dispositivos móviles, es CSS3. Pues usar el máximo poder de tu tarjeta gráfica para hacer tus creaciones.

Conclusión

Voxel.css es una manera sencilla para obtener las impresionantes características de las tres dimensiones en tu sitio web, aplicación o juego. Echa un vistazo a las demos y revisa si es la opción adecuada para tu proyecto.

Vía | WDD