Transcript
Introducción: Laboratorio 0 OpenGL (+3.2) OpenTK Shaders Buffers
CG 2015
Introducción ● En la materia, trabajaremos con la librería gráfica OpenGL ○
En particular, con una versión “moderna”.
● Herramientas que utilizaremos: ○ ○ ○ ○ ○ ○
OpenGL +3.2. OpenTK Visual Studio para C# Herramientas de Modelado: Blender, sketchup, etc. Herramientas para probar shaders: glMan, etc. Herramientas específicas para algún tema.
OpenGL: Definición e Historia Ver transparencias SIGGRAPH 2013.
Intro: OpenTK ● Open toolkit (OpenTK) es una librería de bajo nivel que encapsula (es un wrapper) las librerías OpenGL, OpenCL y OpenAL. ● Ventajas: ○ ○ ○ ○ ○ ○ ○ ○
Multiplataforma (Windows / Linux) Multilenguaje (Mono/.Net) Código abierto. Fuertemente tipado (reemplaza constantes por enumerados). Uso de genericidad. Código completamente manejado (.NET) (No hay que manejar punteros) Documentación en línea. Provee APIs para manejar Vectores, Matrices, Quaterniones, Bezier, Audio, Input.
● Link: www.opentk.com
Intro: OpenTK ● Se descarga e instala desde el sitio oficial. ● Archivos que vamos a utilizar están en [InstallFolder] /Binaries/OpenTK/Release: ○ ○ ○ ○
OpenTK.dll: dll de .Net que debemos incluir. OpenTK.xml: Documentación de las operaciones. OpenTK.GLControl.dll: Componente gráfico para visual studio. OpenTK.GLControl.xml: documentación del GLControl.
● Además del Código fuente, incluye un navegador de ejemplos. (Aunque los ejemplos estan desactualizados.) ○ [InstallFolder]/Binaries/OpenTK/Release/Examples.exe
Intro: OpenTK ● Los espacios de nombres (namespaces) que utilizaremos son: ○ ○
OpenTK: Se encuentran las clases y structs auxiliares matemáticas, como Vector, Matrix, etc. OpenTK.Graphics.OpenGL: Se encuentran todas las clases, enums y structs que reemplazan a OpenGL.
● La clase estática principal es: OpenTK.Graphics.OpenGL.GL En OpenGL:
En OpenTK:
glClear(...);
GL.Clear(...);
glViewport(...);
GL.Viewport(...);
● El componente GLControl nos permitirá crear interfaces gráficas de manera fácil. Lo podemos manejar como cualquier otro componente (botón, slider, label, etc)
Introducción ● Durante el transcurso de la materia utilizaremos la API que nos brinda OpenGL, en su versión 3.2 o superior. ● Para trabajar con este OpenGL moderno, es necesario comprender dos conceptos fundamentales que utilizaremos a lo largo del cuatrimestre:
Shaders
Buffers
Programas en OpenGL ● Los programas OpenGL actuales esencialmente deben realizar los siguientes pasos: 1. Crear y cargar los shaders y programas de shaders. 2. Crear los buffers y cargar los datos en ellos. 3. “Conectar” la ubicación de esos datos con las variables en los shaders. 4. Renderizar (Dibujar).
Shaders En OpenGL 3.x estamos obligados a trabajar con el pipeline programable. ● Vamos a tener que programar (sólamente algunas etapas) de este pipe. ● Esto nos brinda mucha más flexibilidad, a costa de un mayor esfuerzo en la programación. Para programarlo, vamos a utilizar Shaders.
Shaders ● Los shaders son pequeños programas que se ejecutan dentro de la GPU. ○ Su propósito es ejecutar algunas de las etapas del pipeline de rendering.
● Las GPUs actuales nos permiten especificar varias etapas de su pipeline. Sin embargo, nosotros sólo trabajaremos con: ○ ○ ●
Shaders de vértices. Shaders de fragmentos.
Cada shader tiene determinadas entradas y determinadas salidas.
Esquema simplificado de la GPU App.
Framebuffer
GPU Data flow
vertices
vertices Vertex processing
fragments Rasterizer
Vertex shader
pixels Fragment processing
Fragment shader
¡Debemos programarlos!
Shaders en OpenGL En OpenGL, vamos a utilizar el lenguage GLSL (GL Shading Language), que es muy similar a C. Agrega muchas facilidades, pero también tiene restricciones. ● Por ejemplo, tiene soporte para vectores y matrices, pero no soporta recursión. Más sobre GLSL en el Orange Book: OpenGL Shading Language, third ed.
GLSL: Tipos de datos y operaciones ● Scalar types: float, ● Vector types: ○ ○ ○
int, bool
vec2, vec3, vec4 ivec2, ivec3, ivec4 bvec2, bvec3, bvec4
● Matrix types: mat2, mat3, mat4, matNxM ● Texture sampling: sampler1D, sampler2D,
sampler3D,
samplerCube.
● C++ style constructor: vec3 a = vec3(1.0, 2.0, 3.0); ● Operadores aritméticos y lógicos estandar de C/C++ ● Sobrecarga de operadores para vectores y matrices: mat4 m;
b = a * m;
vec4 a, b, c;
c = m * a;
//Multip. de vec y mat.
GLSL: Componentes y “swizzling” ● Diversos modos de acceso a las componentes del vector: ○ ○
[] (usando corchetes, al estilo C) xyzw, rgba ó strq (usando nombres de componentes)
● Ejemplo: ○
vec3 v; v[1], v.y, v.g, v.t - se refieren todos al mismo elemento (segundo elemento del vector v)
● Swizzling: ○ ○
vec3 a, b; a.xy = b.yx
GLSL: Calificadores y funciones ● in, out: Copia atributos de vértices y otras variables hacia o desde los shaders ○ ○
in vec2 textCoord; out vec4 color;
● uniform: Valor constante durante una operación de dibujado. ○ ○
uniform float time; uniform vec4 rotation;
● Funciones built-in: ○ ○ ○
Aritméticas: sqrt, power, abs Trigonométricas: sin, asin Gráficas: length, reflect
● Funciones definidas por el usuario
GLSL: Built-in variables ● gl_Position: ○
(requerida) posición del vertice (en espacio de clipping). Salida del shader de vértices.
● gl_FragCoord: ○
posición del fragmento. Entrada al shader de Fragmentos.
● gl_FragDepth: ○
profundidad del fragmento. Entrada al shader de Fragmentos.
Obligatorio: ● ●
que el shader de vertices retorne la posición en gl_Position. que el shader de fragmentos retorne un color.
Ejemplo (código fuente shader vért.) // VERTEX SHADER. Simple. Transforma la posicion. #version 150
Directivas al compilador
in vec3 vPos; uniform mat4 projMat;
Parámetros de entrada, salida y uniformes
uniform mat4 mvMat; void main(){ gl_Position = projMat * mvMat * vec4(vPos, 1.0); }
Ejemplo (código fuente shader frag.) // FRAGMENT SHADER. #version 150 uniform vec4 figureColor; out vec4 fColor; void main(){ fColor = figureColor; }
Terminología En GLSL, se utiliza una terminología distinta a la de otros lenguajes de shaders. ● Un shader es el código compilado para controlar una determinada etapa (programable) del pipeline. ● Un programa es un conjunto de shaders que controlan las distintas etapas del pipe. Nosotros vamos a construir programas, utilizando shaders, para ser ejecutados en la GPU.
Modelo de Compilación GLSL utiliza un modelo de compilación parecido al de C. ● ●
Se compilan por separado los códigos fuente de cada shader, para generar códigos objeto. Se linkean varios códigos objetos, para generar el programa ejecutable.
El programa ejecutable es el que se envía a la GPU para que controle las etapas del rendering. Estas operaciones de compilación/linkeo se realizan en tiempo de ejecución de nuestra aplicación! ●
Esto quiere decir que cada vez que ejecutamos nuestra aplicación, se compila(n) y linkea(n) nuestros shaders/programas.
En OpenGL ● En OpenGL, los shaders y programas se manejan (al igual que otros recursos) con objetos. ○ NO los objetos de POO!!. ● Cada objeto tiene asignado un identificador (handle) con el cual podemos manipularlo. ● OpenGL crea, asigna y destruye los objetos (e identificadores) a pedido nuestro.
En OpenGL int glCreateShader(tipo); ● Crea un objeto shader vacío y devuelve un identificador para poder referirnos a éste. ● El tipo especifica que shader vamos a crear: de vértices, de fragmentos, geométrico, etc. void glShaderSource(int shader, string source); ● Asigna el código fuente de un determinado shader.
En OpenGL void glCompileShader(int shader); ○ Compila el código fuente de un shader. El estado de la compilación e información sobre la misma, puede obtenerse mediante: glGetShader(..) y glGetShaderInfoLog(...). Consulte la documentación de estas funciones.
En OpenGL int glCreateProgram(); ○ Crea un objeto programa vacío, y retorna un identificador. void glAttachShader(prog, shader); ○ Adosa un objeto shader a un objeto programa. void glGetDettachShader(prog, shader); ○ Quita el shader del programa. Consulte la documentación de estas funciones.
En OpenGL void glLinkProgram(program); ○ Linkea un programa con todos los shaders que tenga adosados. El estado del proceso puede consultarse mediante: glGetProgram(...); glGetProgramInfoLog(...); Consulte la documentación de estas funciones.
En OpenGL void glUseProgram(program); ○ Setea un programa linkeado para ser utilizado en el rendering. ○ A partir de ese momento, se usará el programa hasta que no se especifique otro. (Recordar que OpenGL es una máquina de estados) glUseProgram(0); Setea un programa nulo. ○ Estado indeterminado! ○ Para renderizar, hay que volver a setear otro programa.
En OpenGL void glDeleteShader(shader); ○ Elimina un objeto Shader. ○ Si el shader está adosado a un programa, no se elimina hasta que se elimine el programa, o bien se desacople del mismo (dettach). void glDeleteProgram(program); ○ Elimina un objeto Programa. ○ Para renderizar, hay que volver a setear otro programa.
Secuencia glCreateProgram(...); glCreateShader(...); glShaderSource(...); glCompileShader(...); glAttachShader(...); glLinkProgram(...); glUseProgram(...);
Estos pasos se repiten para cada tipo de shader en el programa.
Estos pasos se realizan una única vez (Inicialización) Cada vez que se quiera dibujar algo utilizando este programa de shader.
Shaders - Parámetros Cada shader tiene entradas y salidas. Estas pueden provenir desde la aplicación o desde otra etapa del pipe. Las entradas del shader de vértices se denominan vertex attributes. Cuando se “linkea” el programa, a cada parámetro de entrada se le asigna una ubicación. ○ Un índice a una tabla interna que nos permitirá especificarle los datos de entrada.
Shaders - Parámetros Se dividen en dos: ● Los indices para los atributos de entrada al shader de vertices. ○ Las variables declaradas como in. ● Los indices para los atributos uniformes. ○ Las variables declaradas como uniform. Para obtener los primeros: glGetProgram(...); (Con el flag ActiveAttributes) glGetActiveAttrib(...);
Para obtener los segundos: glGetProgram(...); (Con el flag ActiveUniforms) glGetActiveUniformName(...);
Modelando Shaders con Clases Como vamos a utilizar frecuentemente los shaders, ya sea para: ○ Crearlos, leerlos de un archivo de texto. ○ Compilarlos y detectar errores. ○ Crear programas para agrupar los shaders. ○ Linkear el programa y detectar errores. ○ Establecer los datos de entrada Podemos tratar de modelarlos con clases, para favorecer su reutilización. Un posible modelo puede ser:
Modelando Shaders con Clases ShaderProgram - ID : int - shaders : List - uniformLocations : Dictionary - attribLocations : Dictionary - ShaderProgram() : void - AddShader(shader) : void - Build() : void - Activate() : void - Deactivate() : void - GetAttribLocation(attribName) : int - GetUniformLocation(uniformName) : int - SetUniformValue(uniformName, value) : void
Shader
2..*
- ID : int - type : ShaderType - fileName : String - source :String - Shader(fileName, type) : void - Compile() : void - Delete() : void - GetID() : int
ProgramLinkageException ShaderCompilationException
Estudiar el ejemplo adjunto para ver cómo se utilizan estas clases!!!
ProgramShaderException
Buffers - Introducción ● Veremos el concepto y la forma de trabajar de OpenGL a la hora de almacenar la geometría y atributos de los objetos que deseamos mostrar en pantalla. ● Esto ha ido variando en las distintas versiones de OpenGL, principalmente por cuestiones de performance. ○ ○
Modo inmediato [OBSOLETO]: Cada vez que se dibujaba la escena, se enviaba toda la geometría a la GPU. Buffers: La mayor parte de la información reside en la GPU, se envía una sola vez.
Esquema ilustrativo ● Los objetos que dibujemos, son enviados a la GPU, donde son procesados y terminan componiendo la imagen vista en la pantalla.
CPU
GPU
● Para renderizar un modelo, la GPU espera un flujo de información sobre los vértices, ó vertex stream.
Vértices ● Los objetos que queremos dibujar se representan mediante vértices. ● Un vértice tiene una colección de atributos: ○ Posición (el más importante) ○ Color ○ Normal ○ Coordenadas de textura ○ Cualquier otro dato asociado a ese punto en el espacio. ● La posición se procesa en coordenadas homogéneas (4D)
Buffers ● Los Buffers son objetos de OpenGL. ○ Son administrados por el contexto de OpenGL. ● Son bloques de memoria asignados por el contexto de OpenGL (GPU) que almacenan información sin formato. ○ Similar al espacio que se reserva al utilizar malloc() en el lenguaje C. ● Se pueden utilizar para almacenar distinto tipo de información: ○ Atributos de vértices, información de pixels, texturas, etc.
VBOs, EBOs y VAOs ● Vertex Buffer Objects (VBOs): Son buffers diseñados para almacenar información (atributos) sobre los vértices: ○ ○ ○ ○ ○
Posiciones Colores Normales Coordenadas de Texturas, etc. Indices. A veces llamados Element Buffer Object (EBO).
● Vertex Array Objects (VAOs): Son objetos de OpenGL que contienen uno o más VBOs y (opcional) un EBO, junto con su configuración. ○
Es decir, contiene toda la información para que un objeto pueda ser renderizado
Pasos para crear un VBO ● Generar un nombre (handler) para el buffer. ○
glGenBuffers(cant, &ids)
● Seleccionarlo para configurarlo/utilizarlo. ○ ○ ○
glBindBuffer(GL_ARRAY_BUFFER, id) GL_ARRAY_BUFFER: Buffer de datos. GL_ELEMENT_ARRAY_BUFFER: Buffer de índices.
● Inicializarlo con datos. ○
glBufferData(...) / glBufferSubData(...)
● Cuando ya no se necesita más. glDeleteBuffers(cant, ids)
glBufferData glBufferData(target, size, data, hint) Reserva espacio para el buffer y llena el mismo con datos. ●
target: GL_ARRAY_BUFFER, GL_ELEMENT_ARRAY_BUFFER, etc.
●
size: Tamaño (en BYTES!) del buffer.
●
data: La información a almacenar.
●
hint: Flag para que la implementación de OpenGL decida dónde almacenar el contenido (entre otras cosas) con relación a: ○ Frecuencia de acceso al buffer: STATIC, DYNAMIC, STREAM. ○ Modo de acceso: DRAW, READ, COPY.
Por ahora utilizaremos GL_STATIC_DRAW
Pasos para crear un VAO ● Generar un nombre (handler) para el objeto. ○
glGenVertexArrays(cant, &ids)
● Seleccionarlo para configurarlo/utilizarlo. ○
glBindVertexArray(id)
● Configuramos cada VBO. ○ ○ ○
glEnableVertexAttribArray(attribLocation) glBindBuffer(bufferType, bufferId) glVertexAttribPointer(...)
● Seleccionamos el EBO a utilizar. ○
glBindBuffer(bufferType, bufferId)
● Cuando ya no se necesita más el VAO. glDeleteVertexArrays(cant, ids)
glVertexAttribPointer glVertexAttribPointer(index, size, type, normalized, stride, offset) Especifica la ubicación y formato de un arreglo de atributos de vértices. ● ●
● ●
index: Número de atributo (ubicación en el programa de shaders) size: Cantidad de componentes de cada dato (1, 2, 3 ó 4) ○ size = 2: (u, v); (s, t) coordenadas de textura. ○ size = 3: (x, y, z); (r, g ,b) posiciones, colores. ○ size = 4: (x, y, z, w); (r, g, b, a) posiciones coord homogeneas, colores con opacidad/transparencias. type: Tipo de cada componente (BYTE, SHORT, INT, HALF_FLOAT, FLOAT, DOUBLE… ) Los tipos enteros pueden ser con o sin signo.(UNSIGNED) normalized: Si type es entero, se pasan a punto flotante. Este flag indica si se pasa directamente ó si lo tiene que normalizar primero. ○ Rango [-1.0, 1.0] para enteros con signo ○ Rango [0.0, 1.0] para enteros sin signo
Stride y Offset En los VBOs almacenamos los atributos de los vértices: ● Cada atributo en un VBO distinto (VBO de posiciones, VBO de colores, VBO de normales, etc.) ● Varios atributos en un mismo VBO. ○ ○
Agrupados: Primero las posiciones, luego colores… Intercalados: posicion, color, normal, posicion,....
● Esto último lo configuramos con los parámetros stride y offset: ○ ○
Offset: desplazamiento (en bytes) de la primer componente del atributo que estamos configurando. Stride: cantidad de bytes que hay que “saltar” para encontrar la próxima componente del atributo que estamos configurando. Si los datos estan uno a continuación del otro, podemos usar Stride = 0.
Dibujar el contenido del VAO En el VAO tenemos toda la configuración para dibujar un objeto ● Seleccionamos el VAO a utilizar: ○
glBindVertexArray(VAO_id)
● Si utilizamos índices, dibujamos con: ○
glDrawElements(primitive, count, idxType, offset)
● Si no usamos índices, dibujamos con: ○
glDrawArrays(primitive, start, count)
● Finalmente, desactivamos el VAO: ○
glBindVertexArray(0)
Primitivas Gráficas ● Para formar los objetos geométricos en 3D, se descomponen en primitivas geométricas que OpenGL puede dibujar: ○ ○
Puntos, Líneas, Triángulos Puede utilizar colecciones del mismo tipo de primitiva para optimizar el rendering.
Recordemos: Programas en OpenGL ● Los programas OpenGL actuales esencialmente deben realizar los siguientes pasos: 1. Crear y cargar los shaders y programas de shaders. 2. Crear los buffers y cargar los datos en ellos. 3. “Conectar” la ubicación de esos datos con las variables en los shaders. 4. Renderizar (Dibujar).
Vinculación buffers - shaders Como vimos, al configurar el VAO, especificamos la ubicación del atributo. Esta ubicación es la que se le asignó a cada variable de tipo IN que hay en el shader de vertices. La ubicación de los atributos puede obtenerse de 3 formas: ● ● ●
Dejar que OpenGL asigne una ubicación, y utilizar glGetAttribLocation (...), DESPUES del linkeo. Especificar la ubicación nosotros con glBindAttribLocation(...), ANTES del linkeo. Especificar la ubicación en el código fuente con una directiva layout (location = x) (sólo para #version 330 o superior)
Ejemplo - Laboratorio 0 ● Una vez que tenemos claros estos dos conceptos principales (Shaders y Buffers), examinemos el proyecto de Visual Studio del Laboratorio 0.