¡30 experimentos de WebGL que son solo wow!
He aquí, porque una gran herramienta con grandes promesas está llegando a tus ojos. Es rápido y suave. Se renderiza en 3D, y con la integración anima, ¿adivina qué es? HTML5? CSS3? No, se llama WebGL, una biblioteca de software que amplía la capacidad de JavaScript para generar gráficos 3D interactivos, y sí, sin ningún complemento.!
En este escaparate, no queremos mostrarte las cosas normales. Queremos mostrarte a ti 30 experimento de WebGLs están diseñados cuidadosamente por desarrolladores profesionales para que sea testigo del verdadero poder de WebGL que no solo es inspirador, sino que también le permite vislumbrar cómo se verá el futuro de la web. Salta al futuro después de hacer clic!
Se recomienda encarecidamente ver estas demostraciones con la última versión de la versión para desarrolladores de Google Chrome. La mayoría de las demos son compatibles con la última versión de Firefox, Google Chrome y Safari, aunque.
3 sueños de negro
Escrito por el equipo de Google Data Arts, 3 Dreams of Black lo lleva a 3 mundos de ensueño construidos a través de una combinación de dibujos en 2D ricos y animaciones entrelazadas con secuencias interactivas en 3D. Echa un vistazo a las maravillas de la experiencia maravillosa!
Partículas animadas de volumen
Este es realmente artístico: animales animados construidos por partículas 3D que utilizan texturas flotantes y objetos de almacenamiento de imágenes. Más sorpresa si mueves el ratón.!
Acuario
¿Simular un entorno submarino? Eso no es un problema para WebGL. La demostración presenta modelos en 3D con texturas de alta calidad, animación de escenas, animación de sombreado de píxeles, reflexiones, refracción y cáusticos, todo lo que necesita para crear una escena submarina realista!
Azatioprina
Probablemente la demo de WebGL más épica, basta con decirlo. Sombrero de punta para el autor Jochen Wilhelmy..
Viaje de los atractores
Si quieres experimentar el 3D, esta es la mejor demostración para ti, también medita con la inmensa belleza de los gráficos generados por WebGL utilizando la fórmula Hopalong de Martin..
Medusa
“Modelado procesal realizado con Side FX Houdini. Exportado con un exportador de Python en formato json. Textura pintada utilizando Autodesk Mudbox. Animado con un sombreador de vértice..”
Chrysaora
Esta no es una demostración de animación regular, pero presenta esqueletos simulados dinámicamente, simulación parcial del lado del servidor y sincronización con WebSocket, sistema de partículas orientado a la cámara, efecto de luz volumétrica y la biblioteca de matriz mjs de Vladimir Vukićević. En definitiva, un asombroso experimento con obras complejas..
HelloRacer
Presentamos la simulación interactiva de coches de alta gama, presentada exclusivamente por HelloEnjoy..
Materiales: coches
Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 y Chevrolet Camaro en su navegador. Elige tu paseo y disfruta de la vista. Diablos, incluso puedes elegir sus colores..
Coches WebGL
El futuro de la serie Need For Speed estará en el navegador web. ¿Demasiado ambicioso? Ciertamente no si ha visitado estos autos que se renderizan con mapas dinámicos de cubo, mapas de sombra y efectos de posprocesamiento.
Mi nacion robot
Bueno, si la figura no es tu favorita, ¡intenta construir un robot genial y encantador y presumirlo a tu amigo! Incluso puedes gastar tu dinero para que sea un verdadero negocio..
Pacmaze
¿Qué tal un juego de Pac Man 3D? El gráfico y la jugabilidad son agradables, y lo más importante es que es divertido!
Capucha de tiro rojo
Ahora aquí hay uno lindo ... o sangriento. Este no es más que un juego interesante para mostrarte las capacidades de WebGL cuando se desarrolla en el juego de disparos de arriba hacia abajo. Divertido y divertido seguro.
TankWorld
Lo adivinas, un divertido juego de disparos desde el tanque con armas para usar y mapas para explorar, ¡y en algunos niveles incluso puedes conseguir un helicóptero para explorar el mundo! Es realmente más que un juego regular, y el gráfico se ve cómodo!
Pulpo
El mejor ejemplo de cómo los gráficos y la animación simples pueden impresionar a las personas cuando se realizan correctamente.
Superficie
Echa un vistazo a la superficie, un experimento elegante e inspirador realizado por Paul Lewis. No solo puede cambiar la magnitud, la elasticidad, la órbita automática, el alámbrico y las gotas de lluvia en la demostración, sino también arrastrar y soltar sus propias imágenes para sentir el efecto de manera diferente..
Foto particulas
Simplemente coloque su imagen favorita en esta demostración y disfrute observándola explotar en una tonelada de partículas y interactúe con alguna forma de magnetismo. El experimento es una combinación de cuatro tecnologías: Arrastrar y soltar de HTML5, API de archivo, Canvas y WebGL..
Rutt-Etra-Izer
Rutt-Etra-Izer es una emulación WebGL del sintetizador de video clásico Rutt-Etra. La demostración le permite poner sus propias imágenes dentro y manipularlas. Con estas cosas, una imagen en 2D puede incluso parecer un 3D.!
La danza del bamboleo
Una demostración simple pero notable que muestra cuán líquida puede ser la WebGL, con sombreador de luz anisotrópico y deformación de vértice oscilante.
Ultranoir
Otro gran experimento que muestra el potencial de la WebGL. Nouvelle Vague ofrece una experiencia 3D poética e interactiva en tiempo real basada en Twitter, y lo que verá serán tweets que se llevan a cabo con diferentes objetos voladores. Ciertamente una forma artística de disfrutar los tweets..
Mono ondulante
“Esta vez solo quería hacer una prueba para ver cuántas posiciones y normales de vértices podría actualizar directamente en JavaScript. Resulta que 2,000 está bien :) También agregué un poco de mapeo de entorno. Y rareza. Siempre agregue rareza.”
Video FX
Impresionante aplicación realizada por Daniel Pettersson que le permite aplicar múltiples efectos de postprocesamiento simultáneos a un trailer de Happy Feet 2. Prueba y diviertete!
Voxels Liquid
La representación en 3D del algoritmo de efecto de agua en 2D clásico, también muestra cómo es interactiva WebGL.
Librería WebGL
Explore más de 10,000 portadas de libros con esta Librería WebGL, desarrollada por el equipo de Google Data Arts. También puede buscar por tema, abrir un modelo 3D de cada uno haciendo clic en él y descargar libros en su teléfono con el código QR.
WebGL Globe
Un excelente experimento del equipo de Google que realmente te hace sentir como si estuvieras en el futuro con su visualización de datos hermosa, elegante y futurista..
Vuelos del mundo
Otra aplicación de visualización de datos visualmente atractiva que visualiza las principales rutas de vuelo de las aerolíneas, parece prometedora!
Filtro de Imagen WebGL
Aplicación de editor gráfico con WebGL? Nunca es imposible. Lo mejor de todo, es rápido y suave.!
Agua WebGL
“Una piscina de agua renderizada con reflexión, refracción, cáusticos y oclusión ambiental. La piscina se simula con un campo de altura y contiene una esfera que puede interactuar con la superficie del agua..”
Reflexión
El mayor problema que enfrentó WebGL, tal vez es su seguridad. Según la Wikipedia, el Equipo de Preparación para Emergencias Informáticas de los Estados Unidos (US-CERT, por sus siglas en inglés) emitió la advertencia de que WebGL contiene múltiples posibles problemas de seguridad que podrían conducir a la ejecución de código arbitrario, denegación de servicio e incluso ataques entre dominios. Esto significa mucho para el propietario del sitio web..
Sin embargo, el Grupo Khronos, que incluye a Mozilla y Google, ha estado sugiriendo posibles soluciones y un enfoque de desarrollo futuro para fortalecer la seguridad contra las posibles amenazas de seguridad. Esperemos que los problemas puedan reducirse e incluso resolverse en el futuro, ya que el WebGL tiene tantas posibilidades como lo muestran los desarrolladores profesionales y talentosos.!
Háganos saber qué experimento le sorprende más y, por supuesto, preséntenos si tiene uno.!
Más publicaciones relacionadas:
- Sitio web de HTML5: 48 demostraciones potenciales de matanza de flash
- Sitio web HTML5: 15 más experimentos
- Demostraciones de animación CSS3 inspiradoras
