La web a menudo se ve como un medio decididamente bidimensional. Y, para ser justos, lo es. Para eso fue diseñado.
Además, la adición de gráficos tridimensionales, renderizados en vivo, ha requerido tradicionalmente complementos. Macromedia nos dio Shockwave, Unity nos dio el Unity Web Player, y todo el tiempo, hemos usado gráficos 3D para juegos, en su mayoría.
Sin embargo, HTML5, CSS3 y algunos JavaScript ingeniosos han hecho mucho para cambiar esto. Oh, todavía se usa principalmente para juegos, pero puedes llevarlo más allá e integrar los gráficos en un sitio regular más fácilmente que nunca.
Claro, todavía tenemos problemas de usabilidad. Un sitio que depende de gráficos 3D para navegación o contenido esencial sigue siendo una idea terrible. Sin embargo, cuando se utiliza con mejora progresiva, 3D es una forma viable e incluso de rendimiento para llevar las cosas a un nivel superior.
Para ese fin, presento voxel.css .
voxel.css es un framework que usa CSS3 para hacer el trabajo pesado de renderizar objetos 3D. JavaScript se usa para agregar interactividad, activar las animaciones y prácticamente todo lo demás.
Bueno, esto es CSS de lo que estamos hablando. No obtendrás gráficos a nivel de Crysis. Como sugiere el nombre de este marco, lo que obtienes son muchos cubos. Piensa Minecraft en el navegador. (Y alguien construirá un clon de Minecraft con esto en tres ... dos ...)
Aún así, puede hacer cosas impresionantes con gráficos en bloques. Piénselo como llevar el arte de 8 bits a un nivel completamente nuevo.
La implementación básica de voxel.css solo requiere la inclusión de la biblioteca y 15 líneas de código. Esto crea una escena virtual salvable donde puede editar sus modelos, apuntar y hacer clic en el estilo.
A continuación, puede mostrar estas escenas en cualquier página web y animarlas según lo desee.
Use un PNG para transparencia, un GIF para animación o un archivo SVG para una escalabilidad ilimitada. Use un JPG por razones desconocidas, o el formato WebP porque le gustan las cosas que aún no están implementadas en todos los navegadores.
Incluso hay una demostración que usa imágenes en vivo de tu webcam como texturas para los bloques.
Nuevamente, es CSS3. Puede utilizar el poder de representación superior de la tarjeta gráfica de un dispositivo (o chip, según sea el caso) para mostrar su trabajo. No tendrá que preocuparse por los gráficos entrecortados en nada que no sea el dispositivo móvil más lento. (En cualquier caso, deberías estar recurriendo a un retroceso).
voxel.css es una forma simple y sensata de obtener bondad tridimensional en su aplicación web, página, sitio o juego. Pruébelo, mire las demostraciones y vea si es adecuado para su proyecto.