FACULTAD DE INGENIERÍA

CARRERA DE INGENIERÍA DE SISTEMAS

COMPUTACIONALES

“WebGL”
Curso:
Computación grafica y visual

Estudiantes:
Díaz Ruiz, José Luis
Guanilo Chamochumbi, Jefri
Salazar Aliaga, Erick
Ramírez Huamán, Ricardo

Docente:
Ing. Daniel Alexis, Pérez Aguilar

Cajamarca - Perú
 1. WEB GL

WebGL es una API multiplataforma destinada a crear gráficos 3D en un navegador web. Esta
herramienta está basada en la conocida biblioteca de gráficos OpenGL ES 2.0, además utiliza su
mismo lenguaje de sombreado o "shading", GLSL. La API WebGL ha sido desarrollada siguiendo el
estándar OpenGL, es decir, si conoces OpenGL, te será muy sencillo adaptarte a esta nueva API para
navegadores web. Esta nueva tecnología se ejecuta en el elemento Canvas de HTML5, además tiene
una completa integración con todas las interfaces DOM (Document Object Model). Al ser una API
DOM, podemos utilizar cualquier lenguaje de programación compatible con DOM como JavaScript o
java. Los propietarios de los navegadores más famosos y utilizados, Google (Chrome), Opera (Opera),
Mozilla (Firefox) y Apple (Safari), son miembros del grupo de trabajo del consorcio Khronos para el
desarrollo de WebGL, además de muchos otros programadores independientes de aplicaciones 3d.
(Escape Digital, 2018)

1.1. Ventajas

 WebGL se basa en un conocido y ampliamente aceptado estándar de gráficos 3D (OpenGL).

 Compatibilidad con distintos navegadores y plataformas.
 Al ser una API DOM, es compatible con todos los elementos del estándar HTML.
 Gráficos 3D acelerados por hardware (CPU y tarjeta gráfica).
 Al utilizar lenguajes de programación interpretados no es necesario compilar tu código antes
de renderizarlo y mostrarlo por pantalla.

1.2. Características

 Se debe incluir la etiqueta canvas para poder trabajar webGl en HTML.

 Para que funcione webGl nuestra tarjeta grafica tiene que tener la capacidad de soportar
OpenGl 2.0
WebGl está basado en OpenGL

2. HISTORIA

WebGL creció desde los experimentos del canvas 3D comenzados por Vladimir Vukićević en Mozilla.
Vukićević mostró por primera vez un prototipo de Canvas 3D en 2006. A finales de 2007, tanto Mozilla
como Opera7 habían hecho sus propias implementaciones de forma separada. A principios de 2009,
el consorcio de tecnología sin ánimo de lucro Kronos Group consolidaron el WebGL Working Group
(Grupo de Trabajo del WebGL), con la participación inicial de Apple, Google, Mozilla, Opera, y otros.
La versión 1.0 de las especificaciones WebGL fue lanzada en marzo de 2011. Las primeras
aplicaciones de WebGL incluyen Zygote Body y las podemos encontrar
en Firefox 2.0, Chrome 9, Internet Explorer 11, Opera 12, Safari 5.1 y Edge. En dispositivos móviles
lo podemos encontrar en Chrome for Android 25, Edge, Firefox Mobile (Gecko) 4, Opera Mobile 12 y
Safari Mobile 8.1. A partir de marzo de 2012, el presidente del grupo de trabajo es Ken Russell. En
noviembre de 2012, la compañía Autodesk anunció que portaba la mayoría de sus aplicaciones a la
nube que se ejecutaba en clientes WebGL locales. Estas aplicaciones incluyen Fusion 360 y AutoCAD
360. El desarrollo de las especificaciones de WebGL 2.0 empezaron en 2013 y concluyeron en enero
de 2017. Esta especificación está basada en OpenGL ES 3.0. Las primeras implementaciones de
este se pueden encontrar en Firefox 51, Chrome 56 y Opera (wikipedia, 2018)

3. DISEÑO

WebGL 1.0 está basado en OpenGL ES 2.0 y proporciona una API para gráficos 3D.8 Se utiliza el
elemento canvas HTML5 al que se accede mediante interfaces Document Object
Model (DOM).WebGL 2.0 está basado en OpenGL ES 3.0 y garantiza disponibilidad de muchas
extensiones opcionales de WebGL 1.0 y presenta nuevas APIs. La gestión de memoria automática se
proporciona como parte del lenguaje JavaScript. Como ocurre en OpenGL ES 2.0, WebGL carece de
las APIs de funciones de fijación16 introducidas en OpenGL 1.0 y obsoletas en OpenGL 3.0. Esta
funcionalidad en su lugar puede ser proporcionada por el usuario mediante código de sombreado y
configurando enlaces de datos en JavaScript; este código necesario se complementa con frecuencia
con una biblioteca de matriz tal como glMatrix, TDL, o MJS.Los sombreados o shaders en WebGL
están expresados directamente en GLSL y se le transmiten a la API WebGL como cadenas de texto.
La implementación de WebGL compila estas instrucciones shader en código GPU. Este código es
ejecutado para cada vértice enviado a través de la API y para cada pixel rasterizado en la pantalla.
(wikipedia, 2018)

4.SOPORTE

WebGL posee un amplio soporte en los navegadores modernos. Sin embargo, su disponibilidad
depende en otros factores como que la GPU lo soporte. La página web oficial de WebGL ofrece una
sencilla página de prueba para verificar si tu GPU es compatible. Es posible encontrar información
más detallada (como qué tipo de renderizador usa el navegador o que extensiones están disponibles)
en páginas web de terceros.

Google Chrome - WebGL 1.0 ha sido habilitado en todas las plataformas que tengan una tarjeta gráfica
compatible con controladores actualizados desde la versión 9, lanzada en febrero de 2011. Por defecto
en Windows, Chrome usa ANGLE (Almost Native Graphics Layer Engine), renderizador para traducir
OpenGL ES a Direct3D 9.0, ya que posee mejor soporte de controladores. En Linux y Mac OS X el
renderizador por defecto es OpenGL. Es posible también forzar OpenGL como renderizador en
Windows. Desde septiembre de 2013, Chrome posee un nuevo renderizador, Direct3D 11, el cual
requiere una tarjeta gráfica más reciente. A partir de Chrome 56 WebGL 2.0 está soportado.

Mozilla Firefox - WebGL 1.0 ha sido habilitado en todas las plataformas que tengan una tarjeta gráfica
compatible con controladores actualizados desde la versión 4.0. Desde 2013 Firefox también hace
uso de Direct3D en plataformas Windows mediante ANGLE. A partir de Firefox 51 WebGL 2.0 está
soportado.

Safari - Desde Safari 5.1 en Mac OS X Leopard hasta Safari 6.0 en Mac OS X Mountain, y nuevas
versiones, el soporte para WebGL 1.0 está soportado. Antes de Safari 8.0 este venía deshabilitado
por defecto.

Opera - WebGL 1.0 está implementado en Opera 11 y 12, aunque a partir de 2014 ha sido
deshabilitado por defecto. A partir de Opera 43 WebGL 2.0 está soportado.
Internet Explorer - WebGL 1.0 está parcialmente soportado en Internet Explorer 11. Al principio no
cumplía con la mayoría de pruebas de conformidad oficiales de WebGL, pero Microsoft posteriormente
lanzó numerosas actualizaciones para subsanarlos. El motor 0.94 de WebGL actualmente aprueba
aproximadamente el 97% de las pruebas de Khronos. El soporte para WebGL puede añadirse también
de forma manual a versiones anteriores de Internet Explorer usando plugins de terceras partes como
IEWebGL.

Microsoft Edge - La primera publicación estable soporta WebGL versión 0.95 (context name:
"experimental-webgl") con un código abierto GLSL a transcompilador HLSL. A partir de la versión
10240 WebGL 1.0 está soportado. WebGL 2.0 está planeado con prioridad media en futuras
publicaciones. (wikipedia, 2018)

5. LIBRERÍAS GRÁFICAS PARA WEB

Incluir gráficas en proyectos web se ha vuelto más fácil de lo que piensas. En internet hay bastantes
componentes que te permiten hacer gráficas en JavaScript y te hacen la vida fácil al querer mostrar
datos de una manera distinta en vez de usar simples tablas de HTML.

Sin embargo, se puede volver un problema si terminas implementando la primera que encuentres
debido a muchas razones como la incompatibilidad con exploradores viejos, documentación escasa o
limitaciones en las características de la librería.

Es muy importante que leas la documentación y descripción de todas las características de una librería
de gráficas en JavaScript antes de que empieces a usarla en tu proyecto.

5.1. Three.js

Three.js es una librería bastante liviana y muy eficiente para generar y animar gráficos en 3D dentro
del navegador, aprovechando las grandes novedades que nos ofrece HTML5 para la generación de
contenidos multimedia. Aprovecha tanto las capacidades de HTML5 que es capaz de generar escenas
3D con WebGL, Canvas (2D).

Su código está disponible en GitHub y en su web podemos encontrar ejemplos alucinantes de lo que
se puede a llegar a hacer con Three.js.

5.1.1 Posibilidades de diseño de three

Three.js no es popular solo porque es simple a la hora de usarlo a través de JavaScript, sino porque
tiene un equilibrio perfecto entre el diseño y la programación.

Permite, entre otras cosas, importar archivos 3D a partir de Blender o Maya, pudiendo generar
terrenos u objetos totalmente complejos y de gran calidad.

La librería también incorpora potentísimos shaders que se pueden personalizar con OpenGL Shading
Language (GLSL). Y sin duda incorpora todo lo necesario para crear escenas 3D, como son la
posibilidad de manipular luces, cámaras, animar objetos, perspectivas, control de visualizaciones y
mucho más.
5.2. Feature.js

Feature.js es una librería Javascript que pesa 1kb y que se utiliza para obtener información
sobre features de navegadores. Las páginas web pueden tener un comportamiento u otro
dependiendo de si un navegador soporta una tecnología o no, por lo que esta librería puede ser
bastante útil en esos casos en los que necesitamos comprobar si un navegador tiene soporte para
WebGL, canvas o SVG, entre otras cosas.

5.3. Morris.js

El top inicia con una de las librerías para gráficos más utilizadas, morris.js. Esta librería te permite
crear gráficas sencillas con una inicialización bastante sencilla, además ofrece útiles gráficos de
tiempo. Ofrece una sencilla API para renderizar gráficos de línea, barras y anillos. Aunque no ofrece
gran cantidad de característica, a veces gráficas sencillas es todo lo que necesitas para tus tareas de
desarrollador sencillo.

5.4. Chartist.js

Chartist te ofrece una completa librería con un montón de diferentes gráficos, responsivos y contiene
algunas características que ninguna otra librería te ofrece. Chartist te permite agregar plugins (un
plugin personalizado a tu gusto) para extender funcionalidades básicas de tus gráficos. Puedes
desarrollar tus propios plugins o usar los que ya existen.

 Manejo sencillo durante el uso de la convención sobre la configuración

 Gran flexibilidad al utilizar clara separación de tareas (Estilo con CSS y control con JS)
 Uso de SVG
 Totalmente sensible e independiente del DPI
 Configuración responsable con consultas de medios
 Completamente construido y personalizable con Sass

5.5. Cesium.js

Cesium es una biblioteca JavaScript para crear globos en 3D y mapas 2D en un navegador web sin
necesidad de plugins.

Utiliza WebGL para mostrar gráficos en 3D, y es multiplataforma. Cesium es de código abierto bajo la
licencia Apache 2.0. Es gratuito tanto para uso comercial como no comercial.

5.6. ol3-Cesium: La combinación con OpenLayers es perfecta para crear mapas utilizando
OpenLayers 3 y visualizándolos en un globo 3D con Cesium. Esta librería es mantenida por
OpenLayers.

6. Estructura de un archivo WebGL.

6.1. Posición del Vértice
La posición es la propiedad más intuitiva de un vértice. Es la posición en el espacio 3D,
representada por un vector 3D de coordenadas. Si conoces las coordenadas exactas de tres
puntos en el espacio, tendrías toda la información que necesita para dibujar un triángulo simple
entre ellos. Para que los modelos parezcan realmente buenos cuando se procesan, hay un par
de cosas más que deben proporcionarse al renderizador. (Escape Digital, 2018)

6.2. Vértice Normal

Considera los dos modelos anteriores. Consisten en las mismas posiciones del vértice, aunque
se ven totalmente diferente cuando son representadas.

Además de decirle al renderer donde queremos que se encuentre un vértice, también podemos
darle una pista sobre cómo la superficie está inclinada en esa posición exacta. La pista está en
la forma del vector normal de la superficie en ese punto específico del modelo, representado con
un vector 3D. La siguiente imagen debe darte un aspecto más descriptivo de cómo se maneja.

Las superficies de la izquierda y derecha corresponden a la bola izquierda y derecha de la imagen

anterior, respectivamente. Las flechas rojas representan los vectores normales que se
especifican para un vértice, mientras que las flechas azules representan los cálculos del
procesador de cómo un vector normal debe buscar todos los puntos entre los vértices. La imagen
muestra una demostración para el espacio 2D, pero el mismo principio se aplica en 3D.

El vector normal es un indicio de cómo las luces iluminarán la superficie. Cuanto más cerca está
la dirección de un rayo de luz al vector normal, más brillante es el punto. Tener cambios graduales
en dirección al vector normal causa gradientes ligeros, mientras que tener cambios abruptos sin
cambios entre estos, da como resultado superficies con iluminación constante a través de ellos,
al igual que cambios repentinos en la iluminación. (Escape Digital, 2018)

6.3. Coordenadas de Textura

La última propiedad significativa son las coordenadas de textura, comúnmente referidas como
mapeo UV. Tienes un modelo y una textura que deseas aplicarle. La textura tiene varias áreas y
éstas representan las imágenes que queremos aplicar a diferentes partes del modelo. Debe haber
una manera de marcar qué triángulo debe representarse con qué parte de la textura. Ahí es donde
entra el mapeo de textura.

Para cada vértice, marcamos dos coordenadas, U y V. Estas coordenadas representan una
posición en la textura, con U representando el eje horizontal y V el eje vertical. Los valores no
están en píxeles sino en una posición porcentual dentro de la imagen. La esquina inferior
izquierda de la imagen se representa con dos ceros, mientras que la parte superior derecha se
representa con dos unos.

Un triángulo se pinta tomando las coordenadas UV de cada vértice en el triángulo y aplicando la

imagen que se captura entre esas coordenadas en la textura. (Escape Digital, 2018)

6.4. Modelo OBJ

Lo creas o no, esto es todo lo que necesitas saber para crear tu propio cargador de modelos
simple. El formato de archivo OBJ es lo suficientemente simple para implementar un analizador
en unas pocas líneas de código.
El archivo enlista las posiciones de los vértices en un formato v <float> <float> <float>, con un
cuarto float opcional, que ignoraremos, para mantener las cosas simples. Los vértices se
representan de forma similar con vn <float> <float> <float>. Finalmente, las coordenadas de
textura se representan con vt <float> <float>, con un tercer float opcional que seguiremos
ignorando. En los tres casos, los float representan las respectivas coordenadas. Estas tres
propiedades se acumulan en tres matrices.

Los rostros se representan con grupos de vértices. Cada vértice se representa con el índice de
cada una de las propiedades, por lo que los índices comienzan en 1. Hay varias maneras de
cómo esto está representado, pero nos adheriremos a la ‘v1/vt1/vn1 v2/vt2/vn2 v3/vt3/vn3`,
requiriendo que las tres propiedades sean proporcionadas y limitando a tres el número de vértices
por cada cara. Todas estas limitaciones se están haciendo para mantener el cargador tan simple
como sea posible, ya que todas las demás opciones requieren algún procesamiento extra trivial
antes de que puedan estar en un formato que a WebGL le guste.

Hemos puesto muchos requisitos para nuestro cargador de archivos. Eso puede sonar limitante,
pero las aplicaciones de modelado 3D tienden a darle la capacidad de establecer esas
limitaciones al exportar un modelo como un archivo OBJ.

El siguiente código analiza una cadena que representa un archivo OBJ y crea un modelo en forma
de una matriz de rostros.

La estructura Geometry contiene los datos exactos necesarios para enviar un modelo a la tarjeta
gráfica para ser procesados. Antes de hacer eso, es probable que quieras tener la capacidad de
mover el modelo en la pantalla.

6.5. Realización de Transformaciones Espaciales

Todos los puntos en el modelo que cargamos son relativos a su sistema de coordenadas. Si
queremos traducir, rotar y escalar el modelo, lo que debemos hacer es realizar esa operación en
su sistema de coordenadas. El sistema de coordenadas A, relativo al sistema de coordenadas B,
está definido por la posición de su centro como vector p_ab y el vector para cada uno de sus
ejes x_ab, y_ab y z_ab, representando la dirección de ese eje. Así que si un punto se mueve por
10 en el eje x del sistema de coordenadas A, entonces — en el sistema de coordenadas B — se
moverá en la dirección de x_ab, multiplicado por 10.

Si queremos transformar el vector 3D q, sólo tenemos que multiplicar la matriz de transformación

con el vector:

Esto hace que el punto se mueva por q.x a lo largo del nuevo eje x, por q.y a lo largo del nuevo
eje y, y por q.z a lo largo del nuevo eje z. Finalmente hace que el punto se mueva adicionalmente
por el vector p, que es la razón por la que usamos un uno como el elemento final de la
multiplicación.

La gran ventaja de utilizar estas matrices es el hecho de que si tenemos múltiples

transformaciones a realizar en el vértice, podemos fusionarlas en una transformación,
multiplicando sus matrices antes de transformar el vértice mismo.
Hay varias transformaciones que se pueden realizar, y echaremos un vistazo a las principales.
(Escape Digital, 2018)

6.6. Sin Transformación

Si no ocurre ninguna transformación, entonces el vector p es un vector cero, el vector x es [1, 0,
0], y es [0, 1, 0]y z es [0, 0, 1]. A partir de ahora nos referiremos a estos valores como valores por
defecto para estos vectores. La aplicación de estos valores nos da una matriz de identidad:

Éste es un buen punto de partida para encadenar transformaciones. (Escape Digital, 2018)

6.7. Traducción
Al momento de realizar la traducción todos los vectores, excepto el vector p, tienen sus valores
por defecto. Esto da lugar a la siguiente matriz:

6.8. Ajuste

Ajustar un modelo significa reducir la cantidad que cada coordenada contribuye a la posición de
un punto. No existe un desplazamiento uniforme causado por el ajuste, por lo que el
vector p mantiene su valor predeterminado. Los vectores de eje predeterminados deben
multiplicarse por sus respectivos factores de escala, lo que da como resultado la siguiente matriz:

Aquí s_x, s_y, y s_z representan el ajuste aplicado a cada eje.

6.9. Rotación

La imagen anterior muestra lo que sucede cuando giramos el marco de coordenadas alrededor
del eje Z.

La rotación no da lugar a un desplazamiento uniforme, por lo que el vector p mantiene su valor

por defecto. Ahora las cosas se ponen un poco más complicadas. Las rotaciones causan que el
movimiento a lo largo de cierto eje en el sistema de coordenadas original se mueva en una
dirección diferente. Por lo tanto, si giramos un sistema de coordenadas 45 grados alrededor del
eje Z, moviéndonos a lo largo del eje x del sistema de coordenadas original, se produce un
movimiento en una dirección diagonal entre el eje x y el eje y en el nuevo sistema de coordenadas.

Para simplificar las cosas, le mostraremos cómo las matrices de transformación buscan
rotaciones alrededor de los ejes principales. (Escape Digital, 2018)

6.10. Implementación
Todo esto se puede implementar como una clase que almacena 16 números, almacenando
matrices en un orden de columna mayor.

6.11. Mira a Través de una Cámara

Aquí viene la parte clave de la presentación de objetos en la pantalla: la cámara. Hay dos
componentes clave para una cámara; Su posición, y cómo proyecta objetos observados en la
pantalla.
La posición de la cámara se maneja con un simple truco. No hay diferencia visual entre mover la
cámara un metro adelante y mover el mundo entero un metro hacia atrás. Así que naturalmente,
hacemos esto último aplicando la inversa de la matriz como una transformación.

El segundo componente clave es la forma en que los objetos observados se proyectan sobre el
lente. En WebGL, todo lo visible en la pantalla se encuentra en una caja. La caja se extiende
entre -1 y 1 en cada eje. Todo lo visible está dentro de esa caja. Podemos utilizar el mismo
enfoque de matrices de transformación para crear una matriz de proyección. (Escape Digital,
2018)

6.12. Proyección Ortográfica

La proyección más simple es la [proyección ortográfica]
(https://www.scratchapixel.com/lessons/3d-basic-rendering/perspective-and-orthographical-
projection-matrix/orthographic-projection-matrix). Se toma una caja en el espacio que indica el
ancho, la altura y la profundidad con la suposición de que su centro está en la posición cero. A
continuación, la proyección redimensiona la caja para que se ajuste a la caja previamente descrita
dentro de la cual WebGL observa objetos. Dado que queremos cambiar el tamaño de cada
dimensión a dos, ajustamos cada eje a 2/size, donde size es la dimensión del eje respectivo. Una
pequeña advertencia es el hecho de que estamos multiplicando el eje Z con un negativo. Esto se
hace porque queremos voltear la dirección de esa dimensión. La matriz final tiene esta forma:

6.13. Proyección Perspectiva

No vamos a pasar por los detalles de cómo se diseña esta proyección, pero sólo usa la fórmula
final, que es bastante estándar por ahora. Podemos simplificarlo colocando la proyección en la
posición cero en los ejes x e y, haciendo los límites derechos/izquierdo y superior/inferior iguales
a width/2 y height/2, respectivamente. Los parámetros n y f representan los planos de
recorte near y far, que son la distancia más pequeña y más grande que un punto puede ser para
poder ser capturado por la cámara. Están representados por los lados paralelos del frustum en la
imagen anterior.

Una proyección de perspectiva suele estar representada con un campo de visión (we’ll use the
vertical one), relación de aspecto, y las distancias de plano cercano y lejano. Esa información se
puede utilizar para calcular width y height, y entonces la matriz se puede crear a partir de la
siguiente plantilla:

El FOV (campo de visión) representa el ángulo vertical que la cámara captura con su lente. La
relación de aspecto representa la relación entre el ancho y la altura de la imagen y se basa en
las dimensiones de la pantalla que estamos mostrando. (Escape Digital, 2018)

6.14. Implementación
Ahora podemos representar una cámara como una clase, la cual almacena la posición de la
cámara y la matriz de proyección. También necesitamos saber cómo calcular las
transformaciones inversas. Resolver las inversiones de matriz generales puede ser problemático,
pero existe un enfoque simplificado para nuestro caso en especial. (Escape Digital, 2018)

7. CANVAS
Canvas (lienzo) es un elemento HTML que permite la creación de gráficos y animaciones de forma
dinámica por medio de scripts. Sus aplicaciones son prácticamente inimaginables: crear juegos,
interfaces, editores gráficos o efectos dinámicos, aplicaciones 3D…. Sólo la imaginación pone límites
a Canvas. En este artículo, profundizamos en las posibilidades de Canvas y las ejemplificamos con
un sencillo gráfico. A modo anecdótico, sólo señalar Canvas fue creado por Apple, pero han liberado
la propiedad intelectual para englobarlo dentro de los estándares de HTML. Para el usuario, todo son
ventajas. No requiere ningún plugin adicional, sólo una un navegador que soporte HTML5 y hoy en
día todos los navegadores importantes (Safari, Chrome, Firefox, Opera e Internet Explorer) soportan
Canvas, desde hace ya unas cuantas versiones.

8. COMPARACIÓN ENTRE OPENGL Y WEBGL, SIMILITUDES Y DIFERENCIAS.

WebGL, una API de JavaScript para mostrar gráficos 3D y 2D interactivos en

cualquier browser compatible sin necesidad de usar plugins.
WebGL está diseñado para funcionar en páginas web; exactamente, a través del elemento (canvas)
de HTML5. Esto implica que, a diferencia de lo que ocurre con Flash, los gráficos creados con WebGL
se integren perfectamente con el Documento Objeto Modelo (DOM), pudiendo interactuar con los
demás elementos HTML de la página.
WebGL utiliza aceleración por hardware para optimizar la presentación de los gráficos. Esto significa
que recurre a la placa de video del usuario para mejorar el rendimiento; así sí el desempeño de WebGL
depende de una buena medida de las características de la tarjeta gráfica del usuario a comparación
de OpenGL ES 2.0 (destinado a dispositivos móviles) que tiene menos capacidades y que son más
fáciles de usar.

WebGL también está diseñado para ejecutarse en un navegador y por lo tanto, tiene algunas
limitaciones más que OpenGL ES 2.0. A comparación de OpenGL Y WebGL no requiere soporte de
controladores nativos. Un contenedor llamado Angle, Safari, Chrome y Firefox usan para traducir
llamadas WebGL y GLSL voto a la baja WebGL está destinado a ejecutarse en un navegador
(aplicaciones web). WebGL es una biblioteca de software que amplía la capacidad del lenguaje de
programación JavaScript para permitirle generar gráficos 3D interactivos dentro de cualquier
navegador web compatible. Utiliza el elemento canvas de HTML5 y se accede mediante las interfaces
de Documento Objeto Modelo. La gestión automática de la memoria se proporciona como parte del
lenguaje de JavaScript. OpenGL se usa generalmente en aplicaciones de escritorio. Es una
especificación multiplataforma, de la cual WebGL es más o menos un subconjunto. La definición del
consorcio. Los desarrolladores familiarizados con OpenGL ES 2.0 reconocerán WebGL como una API
basada en Shader que usa GLSL, con construcciones que son semánticamente similares a las de la
API subyacente de OpenGL ES 2.0. Se mantiene muy cerca de la especificación con algunas
concesiones hechas para lo que los desarrolladores esperan de lenguajes administrados por memoria
como JavaScript. (UNIYY CORPPORATION, 2016)

8.1. Similitudes y diferencias entre OpenGL y WebGL

Tienen una semántico parecido ya que están codificados en diferentes idiomas. Donde se ve en el
nivel básico que la mayoría de las diferencias están en las construcciones y comparación de lenguaje
de programación de C / C ++ frente a JavaScript WebGL y OpenGL muestran las similitudes entre los
dos, OpenGL en C / C ++ y WebGL en JavaScript.
Una de las principales diferencias entre WebGL y OpenGL es que WebGL está basado en OpenGL
ES, que carece de muchas de las características que tiene OpenGL. Por ejemplo, WebGL solo admite
sombreadores de vértices y fragmentos, mientras que OpenGL tiene esos sombreadores de geometría
más, sombreadores de teselación y sombreadores de cómputo. Hay una serie de otras características
que OpenGL tiene que WebGL no tiene, como texturas 3D, objetos de matriz de vértices y dibujo
instanciado (disponible por extensión en algunos navegadores). Otra diferencia es que en WebGL no
hay un pipeline de funciones fijo. Esto es algo bueno porque en OpenGL muchas personas aún
aprenden la línea de función fija a pesar de que ha estado obsoleta durante muchos años, por lo que
al aprender WebGL se ve obligado a aprender a usar sombreadores y almacenamientos intermedios
desde el principio. Básicamente, si aprende WebGL, es probable que pueda elegir OpenGL fácilmente,
ya que los nombres y parámetros de funciones son muy similares y prácticamente todas las funciones
admitidas en WebGL son compatibles con OpenGL.

Bibliografía
Escape Digital. (JUEVES de 06 de 2018). Obtenido de Escape Digital:
https://miescapedigital.com/graficos-3d-tutorial-webgl/

FLID ANDROID. (s.f.). Obtenido de http://flipandroid.com/opengl-es-2-0-vs-opengl-3-similitudes-y-

diferencias.html

ourcodeworld. (22 de JULIO de 2017). ourcodeworld. Obtenido de

https://es.ourcodeworld.com/articulos/leer/71/top-5-mejores-librerias-para-crear-
graficas-en-javascript

UNIYY CORPPORATION. (2016). docs.unity3d.com. Obtenido de

https://docs.unity3d.com/es/current/Manual/webgl-performance.html

wikipedia. (27 de mayo de 2018). wikipedia. Obtenido de https://es.wikipedia.org/wiki/WebGL