WebGL 2.0 - Parte 2

WebGL 2.
0
Parte 2
Jhonny Felipez Andrade

Contenido
• Ejemplos Iniciales
• Primitivas
• Consideraciones
• Código en Java Script
• Shader
• Código de Shader de Vértice
• Código de Shader de Fragmento
• Ejemplo en WebGL 2.0
EJEMPLOS INICIALES
Ejemplo 1: Canvas en blanco
<!DOCTYPE HTML>
<html>
<head>
<title>Un canvas blanco</title>
<style>
body{ background-color: grey; }
canvas{ background-color: white; }
</style>
</head>
<body>
<canvas id="my-canvas" width="400" height="300">
Su navegador no admite el elemento canvas HTML5.
</canvas>
</body>
</html>
4
Ejemplo 2: Verifica si el navegador
soporta el WebGL 2.0
<!DOCTYPE HTML>
<html>
<head>
<title>Contexto WebGL 2.0</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<h2>Contexto WebGL 2.0</h2>
<canvas id="webglcanvas" style="border: none;" width="500" height="500"></canvas>
<noscript><p><b>Lo siento, pero ésta página requiere JavaScript.</b></p></noscript>
<script>
function main() {
var canvas = document.getElementById("webglcanvas");
gl = canvas.getContext("webgl2", { antialias: true });
if (!gl) {
document.write("WebGL 2.0 no está disponible en tu navegador");
return;
}
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.clearColor(0.0, 1.0, 1.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
}
window.onload = main;
</script>
</body> 5
</html>
PRIMITIVAS
Primitivas
GL_POINTS
GL_LINES GL_LINE_STRIP
GL_LINE_LOOP
GL_TRIANGLES
GL_TRIANGLE_STRIP GL_TRIANGLE_FAN
7
CONSIDERACIONES
Código WebGL 2.0
OpenGL ES 2.0
Código Shader de Shader de

Java Script + Vértice Fragmento
Shader
CÓDIGO EN JAVA SCRIPT
Ejemplo de código en Java Script
<!DOCTYPE html>
<html>
<body>
<h1>Mi Primer Página Web</h1>

<p>Mi primer párrafo.</p>
<script>
document.write(Math.random() * (2.5 - 1.5) + 1.5); // 1.5...2.5
</script>
</body>
</html>
11
SHADER
GPU
• La unidad de procesamiento gráfico o GPU
(acrónimo del ingles graphics processing unit)
es un coprocesador dedicado al
procesamiento de gráficos u operaciones de
coma flotante, para aligerar la carga de
trabajo del procesador central en
aplicaciones como los videojuegos y/o
aplicaciones 3D interactivas.
13
Shader
• Los shaders son programas que permiten
controlar la GPU. Existe más de un tipo de
shaders.
– Shader de Vértice. Permite realizar operaciones
sobre los vértices de un polígono.
– Shader de Fragmento. Permite realizar
operaciones sobre cada pixel.
14
Shader
Vértice
Fragmento
15
Evolución del OpenGL y el GLSL
Versión OpenGL Versión GLSL Cuando
1.0 --- 1993
1.1 --- 1997
1.2 --- 1998
1.3 --- 2001
1.4 --- 2002
1.5 --- 2003
2.0 1.10 2003
2.1 1.20 2006
3.0 1.30 Julio 2008
3.1, 3.2, 3.3 3.30 Julio 2009
4.0 4.00 Marzo 2010
4.1 4.10 Julio 2010
4.2 4.20 Agosto 2011
4.3 4.30 Agosto 2012
4.4 4.40 Julio 2013
4.5 4.50 Agosto 2014 16
OpenGLES y el GLSL
Versión OpenGLES Versión GLSL Cuando
1.0 --- Julio 2003
2.0 --- Septiembre 2006
2.0 1.00 Marzo 2007
3.0 3.00 Enero 2014
3.1 3.10 Marzo 2014
3.2 3.20 Agosto 2015
17
Libro
18
CÓDIGO DE SHADER DE VÉRTICE
19
Shader de Vértice
<script id="vs" type="vertex">
#version 300 es
layout(location = 0) in vec2 aVertices;
layout(location = 1) in vec4 aColores;
out vec4 vColores;
void main() {
vColores = aColores;
gl_Position = vec4(aVertices, 0.0, 1.0);
}
</script>
Versión 3.0 20
Shader de Vértice
#version 300 es
out vec4 vColores;
void main() {
}
</script>
Parámetro in (entrada):
21
aVertices = {x, y}
Shader de Vértice
#version 300 es
out vec4 vColores;
void main() {
}
</script>
22
aColores = {r, g, b, a}
Shader de Vértice
#version 300 es
out vec4 vColores;
void main() {
}
</script>
Parámetro out (salida):

23
vColores = {r, g, b, a}
Shader de Vértice
#version 300 es
out vec4 vColores;
void main() {
}
</script>
Asignación de aColores (entrada) a vColores(salida)

24
Shader de Vértice
#version 300 es
out vec4 vColores;
void main() {
}
</script>
gl_Position = Proy * Vista * Modelo * Vértices 25

CÓDIGO DE SHADER DE
FRAGMENTO
26
Shader de Fragmento
<script id="fs" type="fragment">
#version 300 es
precision highp float;
in vec4 vColores;
out vec4 color;
void main() {
color = vColores;
}
</script>
Determina cuánta precisión utilizará la GPU para

calcular los tipos float.
27
Modificadores de precisión de los
shader en OpenGL ES
Modificador Bits Rango en punto flotante Rango en entero

highp 16 -2^62 hasta 2^62 -2^16 hasta 2^16
mediump 10 -2^14 hasta 2^14 -2^10 hasta 2^10
lowp 8 -2 hasta 2 -2^8 hasta 2^8
Shader de Fragmento
#version 300 es
in vec4 vColores;
out vec4 color;
void main() {
color = vColores;
}
</script>
vColores = {r, g, b, a} 29
Shader de Fragmento
#version 300 es
in vec4 vColores;
out vec4 color;
void main() {
color = vColores;
}
</script>
Parámetro out (salida) de color al buffer de video,

similar a glColor4f(rojo, verde, azul, alfa) 30
Shader de Fragmento
#version 300 es
in vec4 vColores;
out vec4 color;
void main() {
color = vColores;
}
</script>
Asignación de vColores (entrada) a color(salida)

31
Triángulo en WebGL 2.0
EJEMPLO EN WEBGL 2.0

Triángulo WebGL 2.0
Ejemplo 3: Triángulo WebGL 2.0
<!DOCTYPE HTML>
<html>
<head>
<title>Triángulo en WebGL 2.0</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<h2>Triángulo en WebGL 2.0</h2>
<canvas id="webglcanvas" style="border: none;" width="500" height="500"></canvas>
<noscript><p><b>Lo siento, pero ésta página requiere JavaScript.</b></p></noscript>
#version 300 es
out vec4 vColores;
void main() {
}
</script>
#version 300 es
in vec4 vColores;
out vec4 color;
void main() { 34
color = vColores;
}
</script>
Ejemplo 3: (cont.)
/***************************************************************************/
/* Paso 1: Se prepara el lienzo y se obtiene el contexto del WebGL. */
/***************************************************************************/
var canvas = document.getElementById("webglcanvas");
var gl = canvas.getContext("webgl2");
if (!gl) {
document.write("WebGL 2.0 no está disponible en tu navegador");
return;
}
/* Se define la ventana de despliegue */

gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
35
Ejemplo 3: (cont.)
/***************************************************************************/
/* Paso 2: Se crean, compilan y enlazan los programas Shader */
/***************************************************************************/
var shaderDeVertice = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(shaderDeVertice, document.getElementById("vs").text.trim());
gl.compileShader(shaderDeVertice);
if (!gl.getShaderParameter(shaderDeVertice, gl.COMPILE_STATUS)) {
console.error(gl.getShaderInfoLog(shaderDeVertice));
}
var shaderDeFragmento = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(shaderDeFragmento, document.getElementById("fs").text.trim());
gl.compileShader(shaderDeFragmento);
if (!gl.getShaderParameter(shaderDeFragmento, gl.COMPILE_STATUS)) {
console.error(gl.getShaderInfoLog(shaderDeFragmento));
}
var programaID = gl.createProgram();
gl.attachShader(programaID, shaderDeVertice);
gl.attachShader(programaID, shaderDeFragmento);
gl.linkProgram(programaID);
if (!gl.getProgramParameter(programaID, gl.LINK_STATUS)) {
console.error(gl.getProgramInfoLog(programaID));
}
gl.useProgram(programaID); 36
Ejemplo 3: (cont.)
/***************************************************************************/
/* Paso 3: Se define la geometría y se almacenan en los buffers de memoria.*/
/***************************************************************************/
var vertices = [
-1, -1, // 0
1, -1, // 1
0, 1, // 2
]; Se transfiere
var colores = [
1, 0, 0, 1, // 0 los datos a la
0, 1, 0, 1, // 1 memoria de
0, 0, 1, 1 // 2
];
la GPU
var trianguloVAO = gl.createVertexArray();
gl.bindVertexArray(trianguloVAO);
var codigoVertices = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, codigoVertices);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
var codigoColores = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, codigoColores);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colores), gl.STATIC_DRAW);
gl.enableVertexAttribArray(1);
37
gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 0, 0);
gl.bindVertexArray(null);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
Ejemplo 3: (cont.)
/***************************************************************************/
/* Paso 4: Se renderiza */
/***************************************************************************/
/* Color de fondo */
gl.clearColor(0.0, 0.0, 0.0, 1.0);
/* Inicializa el buffer de color */ Se renderiza

gl.clear(gl.COLOR_BUFFER_BIT);
/* Se activa el objeto del arreglo de vértices */

gl.bindVertexArray(trianguloVAO);
/* Se renderiza las primitivas desde los datos del arreglo */

gl.drawArrays(gl.TRIANGLES, 0, 3);
/* Se desactiva el objeto del arreglo de vértices */

gl.bindVertexArray(null);
38
GRACIAS

WebGL 2.0 - Parte 2

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

WebGL 2.0 - Parte 2

Cargado por

Copyright:

Formatos disponibles

WebGL 2.

Jhonny Felipez Andrade

Código Shader de Shader de

<h1>Mi Primer Página Web</h1>

1.0 --- Julio 2003

2.0 --- Septiembre 2006

2.0 1.00 Marzo 2007

3.0 3.00 Enero 2014

3.1 3.10 Marzo 2014

3.2 3.20 Agosto 2015

Parámetro out (salida):

Asignación de aColores (entrada) a vColores(salida)

gl_Position = Proy * Vista * Modelo * Vértices 25

Determina cuánta precisión utilizará la GPU para

Modificador Bits Rango en punto flotante Rango en entero

Parámetro out (salida) de color al buffer de video,

Asignación de vColores (entrada) a color(salida)

EJEMPLO EN WEBGL 2.0

/* Se define la ventana de despliegue */

/* Inicializa el buffer de color */ Se renderiza

/* Se activa el objeto del arreglo de vértices */

/* Se renderiza las primitivas desde los datos del arreglo */

/* Se desactiva el objeto del arreglo de vértices */

También podría gustarte