Cinco presentaciones de WebGL que sorprenden

¿Un navegador en una computadora, un navegador en un teléfono o reloj inteligente, o tal vez alguien en una tetera? Las tecnologías web nos rodean por todos lados y, a medida que se desarrolla el relleno de hierro, se vuelven más espectaculares y perfectas. Hace solo unos años, se habló de WebGL como un juguete divertido con perspectivas vagas. Pero mucho ha cambiado y el flash anteriormente popular está siendo reemplazado por tecnologías HTML5 / WebGL más avanzadas.

Ha pasado el tiempo en que las demostraciones de WebGL fueron artesanías primitivas, artesanales o demostraciones demostrativas de desarrolladores de software. Ahora, muchas marcas conocidas utilizan esta tecnología para presentaciones y muchas de ellas se ven muy convincentes.

Porshe 911

Todos han oído hablar del Porsche. Alguien acaba de ver, alguien frota amorosamente un trapo en su garaje. Bueno, el resto del famoso fabricante alemán ofrece familiarizarse con la máquina en su sitio web . Y no solo mire las imágenes, sino que “pruebe” los controles, conozca algunos aspectos tecnológicos destacados.

Lo primero que te sorprende cuando comienzas una demostración es la calidad. El modelo se parece a un automóvil "en vivo". Con pequeños detalles hechos con amor, reflejos de escenas, superficies cromadas. Y, lo más interesante, ¡no hay frenos en el navegador!

El desplazamiento libre del modelo, el escalado le permiten considerar literalmente todo e incluso mirar hacia el interior. Los desarrolladores hicieron todo lo posible, optimizando perfectamente la escena y no a expensas de la belleza.



Y aquellos que están cansados ​​de torcer el modelo pueden "torcer" el volante. En realidad, la acción propuesta demuestra las capacidades de iluminación adaptativa y luces altas dinámicas, pero no solo el niño quiere "dirigir" un auto magnífico. ¡Se ve simplemente increíble!

Sin embargo, los alemanes prudentes no se limitaron a la apariencia del automóvil y permitieron echar un vistazo a su interior. Por supuesto, todas las imágenes están marcadas por la calidad fotográfica, ya sea el interior de un automóvil, unidades de suspensión tecnológicas o un motor brillante. Todo gira, gira y ofrece una tonelada de información. Algunos detalles son tan precisos que la duda se arrastra, y ¿no son estas fotos "tensas" en el marco de las primitivas?

Como una apoteosis o simplemente un deseo de "exprimir" al cliente, al final de la presentación se ofrece un tipo de diseñador donde puede elegir una modificación del automóvil, cambiar las ruedas o el color. Por supuesto, todo esto es solo un movimiento de marketing exitoso, ¡pero qué visualización de alta calidad aquí! Por cierto, muchas marcas conocidas (¡ay, AvtoVAZ!) Usan un enfoque similar para las demostraciones de autos nuevos.

Caminar en Marte

Si la primera presentación se realizó con el motor three.js, el siguiente programa es mérito de nuestros programadores. No, la aplicación en sí fue creada en las entrañas de la NASA, solo se usó el desarrollo doméstico Blend4Web como base. Entonces, lo que es interesante aquí ...

En 2012, un dispositivo con el nombre modesto Curiosity fue entregado a la superficie de Marte (traducido del inglés "Curiosity"). En silencio y pacíficamente arrastrándose por la superficie del planeta, el rover analizó el suelo, envió numerosas fotografías del paisaje marciano y entusiasmó a los hermanos científicos con numerosos descubrimientos. Todo estaría bien, pero la NASA decidió popularizar el funcionamiento de la unidad y creó una aplicación web única., lo que permite no solo admirar las características de diseño del dispositivo, sino también mirar en tiempo real a Marte con los "ojos" de Curiosity.



La característica principal de esta aplicación son las trayectorias reales del aparato en la superficie de Marte. Además, todo esto va acompañado de un video filmado por varias cámaras del rover. La trayectoria recorre varios puntos clave donde los operadores del dispositivo realizaron algunas acciones. Desde un lado, es divertido ver cómo la unidad agita el manipulador, ajustándose a la tarea. Al mismo tiempo, las voces en off comentan lo que está sucediendo y, al mismo tiempo, se muestran fotografías vinculadas al terreno.

Y para aquellos que están cansados ​​de mirar el dispositivo, los desarrolladores han preparado una pequeña ayuda en línea sobre su diseño. Al hacer clic en los detalles que atrajeron al mouse, puede descubrir muchas cosas interesantes. Además, los usuarios particularmente corrosivos pueden torcer manualmente los manipuladores móviles, por supuesto, dentro de los disponibles.

Entrar en SkyNet

¡Se acerca el apocalipsis impulsado por SkyNet! Y, si quieres enfrentarte a futuros enemigos, es hora de ingresar a la red .



El sitio especificado no es más que una excelente tentación para ver la película "Terminator: Genesis". Además de los carteles estándar, trailers, teasers, a los cineastas se les ocurrió un gran espectáculo interactivo.

Lo más destacado de la idea es vincular gráficos tridimensionales a cuadros reales de la película. Un visitante de SkyNet puede aprender detalles interesantes sobre los personajes principales, tanto robots como actores en vivo. Por ejemplo, SpIder Tank. ¿Qué tipo de monstruo es? Y así, giró el modelo (por cierto, hecho cualitativamente), leyó la información sobre los nodos clave e incluso vio un video relacionado con las capacidades del monstruo.



Honestamente, esta presentación de información sobre la película parece innovadora y muy atractiva. WebGL / HTML5 eleva el listón a un nivel de percepción completamente diferente.

Humano biodigital

Y este es un nivel completamente diferente. Si en los primeros tres casos la tecnología WebGL se utilizó más para fines de entretenimiento, entonces aquí los desarrolladores ofrecen sus mejores prácticas en un contexto de aprendizaje.



Este proyecto se centra en organizaciones relacionadas con la industria médica. Modelos ejecutados cualitativamente de varios órganos, visualización precisa de procesos en curso, modos de visualización especiales: todo esto nos permite simplificar el proceso de aprendizaje o demostrar las características del curso de la enfermedad.

Y aquí ni siquiera es la calidad de los modelos, sino la precisión de la implementación. Por ejemplo, al demostrar el funcionamiento de la articulación de la rodilla, no podrá doblarla más de lo esperado.

Además, hay un modo de "rayos X" muy interesante, que se activa mediante un botón especial en el reproductor. En este caso, el modelo se vuelve translúcido con la posibilidad de considerar algunas características internas. Además, si es necesario, puede resaltar parte del objeto contra el fondo de la "imagen de rayos X". Entonces, en la captura de pantalla a continuación, puede considerar claramente la ruptura del ligamento.



Según los desarrolladores, se han creado un total de aproximadamente 5,000 objetos, y se han realizado varias lecciones completas sobre anatomía humana. Parece que este enfoque de aprendizaje será mucho más efectivo que con los atlas de papel convencionales.

Hola halo!

Webgl es perfecto para crear escenas interactivas, presentaciones, juegos y, lo que es más importante, une a los usuarios de varias plataformas en una ventana del navegador. Los creadores de la famosa serie del juego Halo, aprovecharon las capacidades únicas de las tecnologías modernas de navegador y crearon una sala especial para "invitados" .



La idea es fácil de deshonrar, pero fue gracias a WebGL que fue posible combinar una imagen visual inusual (debe verse "en vivo", ya que la captura de pantalla no transmite el efecto) con un tablero de mensajes masivo.

De hecho, las partículas que forman la forma del casco del famoso juego son los deseos de los usuarios. Cientos y cientos de mensajes que quedan en la página del sitio, gradualmente forman un modelo integral. Inicialmente, el casco era una rejilla simple y primitiva. Puede verificar esto si mueve el control deslizante en la línea de tiempo en la parte inferior de la pantalla. Me pregunto cómo se verá el casco después de alcanzar un cierto umbral. Mientras tanto, también puedes unirte a aquellos que están esperando el juego y garabatear algunas líneas en este inusual "tablero de mensajes".

PD

Como puede ver, todas las presentaciones seleccionadas muestran la necesidad y la facilidad de uso de la tecnología WebGL. Cada vez más cerca están las computadoras personales con sistemas móviles. Llegará un momento en que las aplicaciones del navegador se convertirán realmente en multiplataforma.

Source: https://habr.com/ru/post/es386071/