La interfaz moderna, el juego y el desarrollo web son las mismas cosas que WebGL puede transformar en obras maestras digitales. Al dibujar elementos vectoriales generados en la pantalla del navegador usando la GPU, WebGL crea   y, por lo tanto, una experiencia de usuario. La calidad y la complejidad de los elementos visuales hacen que esta herramienta destaque entre otros métodos como HTML o CSS. gráficos web interactivos  Hay un fuerte crecimiento y un creciente interés en WebGL; sin embargo, a menudo se observa una escasez de información detallada sobre esta tecnología. Solo revelemos todos sus conceptos básicos y la variedad de marcos y bibliotecas que puede proporcionar.   Fundamentos de WebGL  Contrariamente a un concepto erróneo común, WebGL no es una suite gráfica. En su lugar, aprovecha el código para dibujar objetos geométricos y el motor GPU de un cliente para rasterizar objetos gráficos en un lienzo HTML.  Para comprender los conceptos básicos de WebGL, es útil comprender la teoría básica de gráficos 3D y el flujo 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 grupo de formas triangulares, conocidas como primitivas. La fuente de luz se aplica para crear la apariencia de sombras y profundidad. Luego, las primitivas se rasterizan para crear un gráfico vectorial 3D en una proyección de un píxel 2D, que engaña al cerebro para que vea un objeto 3D en una pantalla de computadora 2D.   Hay dos tipos de funciones en un código WebGL:  sombreadores de vértices,  sombreadores de fragmentos.  Se aplican para decirle a la computadora cómo dibujar píxeles en la pantalla. Aunque el código principal del programa está escrito en JavaScript, los shaders usan GL Shader Language, que se parece mucho a C/C++.  Un sombreador de vértices calcula las coordenadas de los vértices, y el sombreador de fragmentos es responsable de calcular los colores de los píxeles. El proceso de sombreado requiere que la computadora realice toneladas de cálculos para representar las imágenes sin problemas. A menudo es demasiada carga de trabajo para que la CPU la procese. Por esta razón, WebGL aprovecha las GPU para distribuir los cálculos de manera más eficiente.  En esencia, la API de WebGL se trata de personalizar los estados de sombreado para controlar lo que se dibuja en las pantallas del cliente.  Afortunadamente, no es necesario crear programas manualmente para comenzar a agregar gráficos 3D a su sitio web. Puede usar recursos como three.js, PlayCanvas o la opción de compilación   para diseñar rápidamente experiencias 3D sin mucho conocimiento subyacente de WebGL. Unity WebGL  Bibliotecas adicionales para WebGL  Existe una gran variedad de marcos y bibliotecas WebGL que los desarrolladores web pueden usar para crear productos web. En lugar de reinventar la rueda, la aplicación de elementos preescritos puede aumentar sustancialmente la velocidad del desarrollo web.   Hagamos ahora una descripción general rápida de algunas de las bibliotecas adicionales populares que se utilizan para desarrollar aplicaciones con WebGL.  Lea también:  ¿Cuánto cuesta hacer una aplicación para empresas en 2021? [Bono interior]   Unidad WebGL  Esta es probablemente la primera biblioteca con la que se encontrará si está buscando recursos para el desarrollo de WebGL. Al crear contenido dentro de la página web, Unity WebGL permite a los desarrolladores web interactuar directamente con el motor JavaScript del navegador.  De esta forma, todos los elementos de la página web pueden comunicarse entre sí. Unity WebGL proporciona diferentes métodos para hacerlo: llamar a funciones Javascript o C desde los scripts de Unity, o incluso enviar algunos datos al script de Unity desde el JavaScript del navegador.  Actualmente, el contenido WebGL de Unity es compatible con la mayoría de los principales navegadores de escritorio. Sin embargo, todavía no proporciona soporte para dispositivos móviles.   tres.js  Three.js es una biblioteca de elementos JavaScript preescritos destinados específicamente a WebGL. La biblioteca presenta una gran cantidad de efectos, objetos, cámaras, escenas, materiales, sombreadores y otras utilidades. Los manuales todavía están en proceso, pero una gran comunidad de desarrolladores en la web organiza foros y debates.  Puede encontrar su   en Github. repositorio de código abierto   Babilonia.js  Otra biblioteca de código abierto   , Babylon.js, a menudo descrita como un motor para mostrar gráficos 3D en un navegador. Su lenguaje original es Typescript, pero su código es interpretado de forma nativa por todos los navegadores que soportan 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. disponible en Github   PlayCanvas  Dedicado específicamente a los juegos, PlayCanvas es un motor 3D respaldado por una plataforma   , que permite a los equipos de desarrollo web editar proyectos web desde varias computadoras en tiempo real. Las características incluyen animación 3D, simulaciones de física de cuerpo rígido y   . De código abierto en 2014, el motor también tiene un   . de desarrollo patentada basada en la nube diseño de sonido repositorio gratuito en Github   Un cuadro  Este marco está diseñado para   (AR/VR y experiencias de realidad mixta) y para mostrar elementos 3D y VR en un navegador. AFrame es, esencialmente, un complemento de realidad virtual, que presenta una variedad de componentes como animaciones, geometrías, cursores, controles, etc. el desarrollo XR  El código generado por AFrame puede ejecutarse en la mayoría de los auriculares VR populares y también puede mostrar gráficos en dispositivos móviles y de escritorio. Esto convierte a AFrame en una biblioteca perfecta para crear juegos de navegador capaces de ejecutarse en cualquier dispositivo. El   también está disponible en Github. repositorio gratuito   Cubierta.gl  Utilizado principalmente para las visualizaciones de datos geoespaciales, Deck.gl es perfecto para procesar grandes conjuntos de datos con WebGL y crear visualizaciones complejas basadas en los datos analíticos. Se integra bien con React y ofrece excelentes resultados cuando se usa en combinación con MapboxGL, creando una atractiva superposición de gráficos en 2D o 3D sobre los mapas de Mapbox. Puede usar el   para crear visualizaciones geoespaciales WebGL. repositorio Deck.gl Github  El número total de bibliotecas WebGL adicionales supera las 80, y describirlas todas queda fuera del alcance de este artículo. Sin embargo, puede usar una extensa lista de bibliotecas que aparecen en   para encontrar la que se adapte perfectamente a sus propósitos comerciales. Openbase   Pensamientos finales  Utilizado en diseño web 3D,   , juegos, simulaciones de física, visualización de datos y obras de arte, WebGL se considera una de las tecnologías innovadoras que crean experiencias de usuario atractivas e interactivas. Creada por KhronosGroup, esta tecnología es descendiente directa de OpenGL ES, utilizada para visualizaciones 3D en juegos y realidad virtual. aplicaciones interactivas  WebGL es, sin duda, el camino a seguir si está buscando compatibilidad entre plataformas y navegadores, integración con HTML e interacción perfecta con todos sus elementos.     También publicado en: https://www.visartech.com/blog/interactive-3d-graphics-with-webgl/

Different

2022 - HackerNoon Contributor of the Year - Frontend

Read My Stories

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Este audio es producido en el idioma original de la historia!

Las 6 mejores bibliotecas WebGL para gráficos web 3D perfectos

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Las capas invisibles: por qué las entrevistas con los usuarios son un activo irremplazable

Crecimiento de las criptomonedas: creación de perfiles de usuarios eficaces

Nómadas digitales escuchen: lo que necesitan saber sobre la nueva visa DTV de Tailandia

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Las capas invisibles: por qué las entrevistas con los usuarios son un activo irremplazable

Crecimiento de las criptomonedas: creación de perfiles de usuarios eficaces

Nómadas digitales escuchen: lo que necesitan saber sobre la nueva visa DTV de Tailandia

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps