Recomendación: utilice el editor NSDT para crear rápidamente escenarios de aplicaciones 3D
En esta guía, nuestro objetivo es responder la mayoría de las preguntas relacionadas con la tecnología WebGL. Primero, comencemos con la definición de WebGL.
¿Qué es WebGL?
WebGL (Biblioteca de gráficos web) es una interfaz de programación de aplicaciones (API) JavaScript para implementar gráficos web interactivos.
Le permite ejecutar gráficos acelerados por GPU directamente dentro del lienzo HTML sin complementos externos.
WebGL es un conjunto de funciones para dibujar elementos vectoriales generados en la pantalla del navegador. Esto se hace a través de la unidad de procesamiento de gráficos (GPU) del cliente. En otras palabras, la GPU se utiliza para representar elementos vectoriales.
Lo que lo distingue de otras herramientas es la calidad y complejidad de los elementos visuales que puede representar. De hecho, ningún método HTML y CSS puede lograr exactamente el mismo impacto.
Creada por KhronosGroup, la tecnología WebGL es descendiente directa de OpenGL ES y se utiliza para visualización 3D en juegos y realidad virtual. Esta innovadora tecnología se utiliza actualmente en diseño web 3D, juegos interactivos, simulaciones físicas, visualización de datos y obras de arte.
Ahora, comprendamos los conceptos básicos de WebGL.
Conceptos básicos de WebGL
Contrariamente a la idea errónea común, WebGL no es una suite de gráficos. En lugar de utilizar mapas de bits, utiliza código para dibujar objetos geométricos. También utiliza el motor GPU del cliente para rasterizar objetos gráficos en el lienzo HTML.
Para comprender los conceptos básicos de WebGL, es necesario comprender la teoría básica de gráficos 3D y los flujos de trabajo de renderizado.
En una escena 3D, cada punto es un vértice identificado por sus coordenadas x, y, z. Luego, los vértices se conectan para formar un conjunto de formas triangulares llamadas primitivas.
Aplique fuentes de luz para crear la apariencia de sombras y profundidad. Luego, las primitivas se rasterizan para crear gráficos vectoriales 3D como proyecciones de píxeles 2D. Esto engaña al cerebro para que vea objetos 2D en una pantalla de computadora 3D.
Hay dos tipos de funciones en el código WebGL:
- sombreador de vértices,
- Sombreador de fragmentos.
Se utilizan para indicarle a la computadora cómo dibujar píxeles en la pantalla. Mientras que el código principal del programa está escrito en JavaScript, los sombreadores utilizan el lenguaje GL Shader, que es muy similar a C/C++.
El sombreador de vértices calcula las coordenadas de los vértices y el sombreador de fragmentos es responsable de calcular el color del píxel. El proceso de sombreado requiere que una computadora realice muchos cálculos para poder renderizar una imagen sin problemas. La carga de trabajo manejada por la CPU suele ser demasiado grande. Por este motivo, WebGL hace uso de la GPU para distribuir los cálculos de forma más eficiente.
Esencialmente, la API WebGL tiene que ver con el estado del sombreador personalizado para controlar lo que se dibuja en la pantalla del cliente.
Afortunadamente, no es necesario crear manualmente un programa para comenzar a agregar modelos 3D a su sitio web 3D. Puede utilizar recursos como three.js, PlayCanvas o las opciones de compilación WebGL de Unity para diseñar rápidamente experiencias 3D sin muchos conocimientos básicos de WebGL.
Conceptos clave de gráficos 3D y 2D.
Para resumir lo mencionado anteriormente: un conjunto de sombreadores le dice a la GPU cómo convertir líneas de código en gráficos. A su vez, los sombreadores pueden recibir datos de diversas formas. A continuación se describen brevemente cuatro enfoques existentes para la programación de sombreadores, que en última instancia forman los conceptos clave de WebGL.
atributos y buffers
Los buffers son conjuntos de datos que pueden contener casi cualquier parámetro a comunicar. Por ejemplo, colores, coordenadas de textura, posiciones de vértices, etc. Los atributos describen cómo se extraen los datos del búfer.
uniforme
Estas son variables globales que deben definirse antes de ejecutar una función de sombreado.
textura
Las texturas son datos a los que puede acceder públicamente en ambos tipos de sombreadores. Normalmente, las texturas contienen datos de imagen y color, pero pueden contener prácticamente cualquier otro tipo de datos.
Variedad
La variación es el método de transferir datos entre sombreadores. El valor establecido en la variable se aplicará cuando se ejecute el sombreador.
En última instancia, WebGL es una herramienta compleja que utiliza programación y matemáticas complejas para generar gráficos en la pantalla del usuario. Ahora, hablemos de sus pros y sus contras.
Ventajas y desventajas de WebGL
Al elegir la mejor pila de tecnología para su propósito, considere los pros y los contras de la tecnología que desea aplicar.
Las ventajas más importantes de WebGL son las siguientes:
- Es nativo y gratuito en la mayoría de los navegadores de escritorio y móviles más comunes.
- La técnica es relativamente rápida y se mezcla fácilmente con HTML.
- Ejecute WebGL API sin instalar nada en su dispositivo
- Puede aprovechar bibliotecas externas para crear excelentes experiencias web en 3D
Por otro lado, la desventaja de WebGL es la siguiente:
- Es más lento que su predecesor OpenGL en muchos sentidos.
- Para la programación WebGL nativa, la curva de aprendizaje es muy pronunciada.
- Hay agujeros de seguridad, aunque el proveedor afirma estar solucionándolos
- Podría ser responsable de fallos del navegador debido a incompatibilidades de complementos, etc.
Si necesita compatibilidad multiplataforma y entre navegadores, integración continua con HTML e interacción perfecta con todos los elementos. WebGL es la mejor solución.
Ventajas para los negocios
Además de las características puramente técnicas, WebGL tiene muchas otras ventajas tangibles:
- Gráficos espectaculares y gran experiencia de usuario.
WebGL da vida a los gráficos 3D en la pantalla del navegador del usuario, y si cree que no es gran cosa, piénselo de nuevo. Esta API proporciona experiencias reales en 3D y de realidad virtual mediante programación. Esto es lo que hace que esta tecnología sea tan impactante.
- menos problemas de rendimiento
WebGL utiliza hardware del lado del cliente, por lo que se ejecuta más fluidamente en la pantalla del usuario y generalmente tiene una latencia de reproducción más baja.
- Disponibilidad en todas las plataformas
WebGL se ejecutará en los navegadores, dispositivos y sistemas operativos más comunes, lo que lo hace accesible a una amplia variedad de grupos de usuarios.
- Más seguro que otras soluciones
Antes de la llegada de WebGL, la visualización de gráficos y animaciones 3D en el navegador requería complementos específicos. A menudo fallan y causan muchos agujeros de seguridad. Si bien WebGL no está completamente libre de problemas de seguridad, sigue siendo más seguro que cualquier otra tecnología similar hasta la fecha.
- Abra la puerta a los juegos basados en navegador
Los juegos basados en navegador siempre han tenido una gran demanda. Sin embargo, la única forma de entregarlo antes de WebGL era mediante el uso de complementos, lo que implicaba una serie de problemas. WebGL le permitirá crear fácilmente juegos basados en web e ingresar a este segmento de mercado prometedor.
WebGL vs OpenGL: similitudes y diferencias
WebGL a menudo se compara con OpenGL. OpenGL, también creado por el grupo Kronos en 1992, es una API para gráficos 3D y 2D.
Parece que apenas hay diferencia, sin embargo, hay muchos matices sustanciales que no debemos pasar por alto.
- origen
WebGL se originó a partir de OpenGL ES2, que es una versión simplificada de OpenGL. Por otro lado, OpenGL es más complejo y tiene una gran cantidad de funciones.
- característica
En términos de características, OpenGL tiene un alcance más amplio. Incluye una variedad más amplia de tipos de sombreadores además de sombreadores de fragmentos y vértices.
- Instalar
Mientras que WebGL se ejecuta en navegadores de escritorio y dispositivos móviles, OpenGL requiere controladores y requiere instalación.
- lenguaje de programación
WebGL está escrito principalmente en JavaScript, por lo que se integra bien con HTML y se ejecuta en un lienzo HTML. El idioma nativo de OpenGL es C.
- curva de aprendizaje
OpenGL tiene una curva de aprendizaje más pronunciada porque es mucho más complejo. Sin embargo, una vez que dominas WebGL, resulta más fácil de aprender.
- Casos de uso
OpenGL se utiliza ampliamente en la tecnología de juegos para crear videojuegos. WebGL potencia los servicios y aplicaciones web (a continuación, exploramos ejemplos de uso de WebGL con más detalle).
En resumen, tanto OpenGL como WebGL son API para renderizar imágenes. Sin embargo, WebGL es más adecuado para gráficos 3D para la Web y para la creación de servicios basados en la Web. WebGL también es más fácil de aprender, se puede mejorar con bibliotecas externas y tiene una mejor integración de HTML y JavaScript.
Bibliotecas adicionales para WebGL
Los desarrolladores de WebGL pueden utilizar una amplia variedad de marcos y bibliotecas de WebGL para crear sitios web tridimensionales. La aplicación de elementos preescritos puede aumentar considerablemente la velocidad del desarrollo web, en lugar de reinventar la rueda.
Demos ahora una descripción general rápida de algunas bibliotecas complementarias populares para desarrollar sitios web 3D utilizando WebGL.
Unidad WebGL
Si está buscando recursos para el desarrollo WebGL, esta es probablemente la primera biblioteca que encontrará. Unity WebGL permite a los desarrolladores web interactuar directamente con el motor JavaScript del navegador al crear contenido en una página web.
De esta forma, todos los elementos de la página web pueden comunicarse entre sí. Unity WebGL proporciona diferentes formas de hacer esto. Llame a una función Javascript o C desde su script de Unity, o envíe algunos datos a su script de Unity desde el JavaScript de su navegador.
Actualmente, la mayoría de los principales navegadores de escritorio admiten el contenido de Unity WebGL. Sin embargo, aún no ofrece soporte para dispositivos móviles.
Tres.js
Three.js es una biblioteca de elementos JavaScript especialmente preparada para WebGL. La biblioteca tiene una gran colección de efectos, objetos, cámaras, escenas, materiales, sombreadores y otras utilidades. Los manuales todavía se están escribiendo, pero la gran comunidad de desarrolladores en la web organiza foros y debates.
babylon.js
Babylon, otra biblioteca de código abierto en Github, a menudo se describe como un motor para mostrar gráficos 3D en browser.js. Su idioma nativo es Typecript, pero su código es interpretado de forma nativa por todos los navegadores compatibles con WebGL y HTML5. Babylon.js tiene una amplia gama de aplicaciones que incluyen juegos, visualización de datos sobre delitos, moda, educación sanitaria y entrenamiento militar.
lienzo de juego
Específicamente para juegos, PlayCanvas es un motor 3D impulsado por una plataforma de desarrollo patentada basada en la nube. Esto permite a los equipos de desarrollo web editar proyectos web en tiempo real desde varias computadoras. Estas características incluyen animación 3D en el navegador, simulación de física de cuerpos rígidos y diseño de sonido. El motor fue de código abierto en 2014 y también tiene un repositorio gratuito en Github.
Un cuadro
Este marco es adecuado para el desarrollo XR (AR/VR y experiencias de realidad mixta). También se utiliza para mostrar elementos 3D y VR en el navegador. A-Frame es esencialmente un complemento de realidad virtual que tiene varios componentes como animaciones, geometría, cursores, controles y más.
El código generado por A-Frame puede ejecutarse en los cascos de realidad virtual más populares, así como mostrar gráficos en dispositivos móviles y de escritorio. Esto convierte a A-Frame en la biblioteca perfecta para permitir que los juegos de navegador se ejecuten en cualquier dispositivo. También hay disponible un repositorio gratuito en Github.
Cubierta.gl
Deck.gl está destinado principalmente a la visualización de datos geoespaciales y es muy adecuado para trabajar con grandes conjuntos de datos utilizando WebGL. Cree visualizaciones complejas basadas en datos analizados.
Se integra bien con React y ofrece excelentes resultados cuando se combina con MapboxGL. Crea atractivas superposiciones de gráficos 2D o 3D sobre los mapas de Mapbox. Puede utilizar el repositorio Deck.gl Github para crear visualizaciones geoespaciales WebGL.
Filamento
Filament es una biblioteca de código abierto de Google para soluciones móviles. Es un renderizador 3D en tiempo real que también se ejecuta en muchas plataformas. Esta es una nueva biblioteca construida en C++ para un mejor rendimiento. Los desarrolladores de WebGL se centraron en mantenerlo lo más ligero y compacto posible.
patada.js
Kick.js es una opción perfecta para aquellos que desean obtener una experiencia práctica rápida en WebGL. Este motor de juego y biblioteca de gráficos es fácil de aprender con documentación completa, tutoriales y ejemplos. Ideal para desarrollo web y creación de juegos interactivos.
ArcillaGL
ClayGL se utiliza para visualizar grandes colecciones y datos y también se puede aplicar con fines de mapeo geoespacial. Sin embargo, la biblioteca también es adecuada para aplicaciones web multipropósito que necesitan escalar según demanda. La biblioteca proporciona a los usuarios gráficos, ejemplos y tutoriales muy complejos y detallados.
El número total de bibliotecas WebGL adicionales supera las 80 y describirlas todas está fuera del alcance de este artículo. Sin embargo, puede utilizar la extensa lista de bibliotecas de GitHub para encontrar la que mejor se adapte a sus propósitos comerciales.
Mejores prácticas de gráficos 2D y 3D
Para que WebGL alcance su máximo potencial, los expertos han desarrollado una serie de recomendaciones para ayudar a lograr un rendimiento óptimo. Algunas de las mejores prácticas de WebGL son las siguientes:
- Eliminar errores
Normalmente, los mensajes de error de WebGL aparecen como advertencias de JavaScript. El problema con los navegadores que ejecutan WebGL es que después de una cierta cantidad de errores dejan de enviar notificaciones sobre ellos. Esto realmente dificulta la corrección del código WebGL. Se hace todo lo posible para detectar todos los errores y eliminarlos antes de que el código sea demasiado difícil de corregir.getError
- Más información sobre las limitaciones del navegador
Es posible que el navegador del cliente no admita la extensión de su aplicación. Si utiliza extensiones, considere otras formas de brindar la misma experiencia. Sin embargo, algunas extensiones brindan operatividad en varios navegadores, por lo que tiene sentido centrarse en ellas al crear su producto.
- Comprender las limitaciones del sistema
Los sistemas que ejecutan código WebGL pueden tener limitaciones y capacidades que difieren significativamente de las de su sistema. Por lo tanto, tus proyectos pueden tener diferentes velocidades de reproducción, rendimiento, etc. Sin embargo, el código WebGL generalmente no requiere tantos recursos y muchas funciones serán universalmente compatibles.
- Limpiar código cuando sea necesario
La eliminación de objetos borra el contexto de WebGL cuando ya no se necesitan los resultados de representación. Limpiar y eliminar elementos innecesarios ayudará a acelerar la ejecución del código.
5 ejemplos animados de tecnología WebGL
¿Para qué se utiliza WebGL?
Ahora exploremos lo que WebGL puede hacer con estos ejemplos vivos. Algunas de las experiencias visuales a continuación son realmente fascinantes y demuestran con éxito las capacidades de WebGL.
1. Laboratorio de Física Virtual
En el campo de la educación, WebGL ayuda a crear simulaciones que antes sólo eran posibles en entornos de laboratorio reales. En Weisai Technology, construimos un laboratorio de física virtual para ayudar a los estudiantes de universidades estadounidenses a perfeccionar sus habilidades académicas.
2. Medusas digitales
Estas medusas en 3D parecen completamente reales, sin embargo, están creadas usando WebGL. Tenga en cuenta que puede controlar parámetros como el tamaño, la velocidad, el conteo y la turbulencia del agua de las medusas.
3. Componentes químicos del graffiti
Esta es una biblioteca 3D de JavaScript con estructuras químicas, reacciones y otros componentes interactivos. ChemDoodle creado por iChemLabs es una gran herramienta para científicos y sitios web de química.
4. Visualización de disección
Un ejemplo destacado de WebGL, este proyecto de BioDigital visualiza todos los sistemas del cuerpo humano. Proporciona una visualización integral de tratamientos y enfermedades y tiene fines sanitarios, científicos y educativos.
5. Vídeo musical de Roma
3 Dreams of Black es un vídeo musical realizado por Rome utilizando WebGL. Producido por Mirada en colaboración con el director Chris Milk, el vídeo es espectacular e incluye referencias al juego. ¡Debes ver!
Aparte de estos espectaculares ejemplos, una sección completa de desarrollo de software está dedicada a los juegos WebGL. Algunos de los mejores juegos de navegador con tecnología WebGL incluyen Shell Shockers, Derby Crash 4 y Bullet Force. Además, considere echar un vistazo a los proyectos de Google Experiments Showcase realizados con aprendizaje automático y WebGL.
Enlace original: Las 6 mejores bibliotecas WebGL para renderizado de gráficos web 3D (mvrlink.com)