Lantul de transformari

Banda grafica fixa

Varfuri 3D si
informatii suplimentare
Transformare
varfuri
Varfuri
transformate
Fragmente
Asamblare primitive,
decupare, rasterizare

Texturare,
colorare

Conectivitatea
varfurilor

Texturi

Fragmente
colorate

Operatii raster

Actualizare
Frame-buffer
2

Banda grafica programabila

OpenGL:
programele sunt canalizate in generarea si transmiterea
primitivelor (varfurilor) catre banda grafica
Control minimal asupra varfurilor; o data ce au fost transferate
catre banda grafica - se folosesc functii fixe

Evolutia hardware a procesorului grafic a permis

inlocuirea portiunilor din banda grafica cu cod =>
banda grafica programabila
Vertex shader: transformarea varfurilor
Fragment shader: calculul culorilor fragmentelor

Banda grafica programabila

Aplicatie 3D
API 3D

UPG
Interfata UPG
Asamblare
primitive

Vertex
shader

Rasterizare

Operatii raster

Fragment
shader

Frame buffer
4

Banda grafica programabila

Aplicatie grafica 3D
3D API: OpenGL / Direct3D

UPG

Comenzi si date
Varfuri

Interfata UPG
Varfuri

Vertex shader

Primitive asamblate

Asamblare
primitive
Varfuri
transformate

Rasterizare si
interpolare
Fragmente

Fragmente

Operatii raster

Fragment
shader

Fragmente
transformate

Actualizare
frame-buffer
5

Vertex shader
Se executa o data pentru fiecare vertex
Realizeaza:
Transformarile folosind matricile de
modelare-vizualizare, proiectie
Transforma normalele, normalizarea
acestora
Generarea coordonatelor de texturare,
transformarea acestora
Iluminarea per vertex
Calculul culorii vertexului

Fragment shader
Se executa o data pentru fiecare fragment
Realizeaza
Calculul culorilor si a coordonatelor de
texturare per fragment
Aplicarea texturii
Calculul normalelor pentru aplicarea iluminarii
per fragment
Poate elimina fragmente pe baza informatiei
de adancime
7

Banda grafica

(x,y,z)

Transformare
varfuri

Asamblare
primitive

Decupare,
Rasterizare

Colorare
Frame
buffer

Banda grafica

(x,y,z)

Transformare
varfuri

Asamblare
primitive

Decupare,
Rasterizare

Colorare

Eliminare
parti
nevizibile

Frame
buffer 9

Banda grafica programabila

(x,y,z)

Vertex
shader

Asamblare
primitive

Decupare,
Rasterizare

Fragment
shader

Eliminare
parti
nevizibile

Frame
buffer

10

Transmiterea parametrilor
Aplicatie
-Coordonate
varfuri
-normale
-coordonate
de texturare

(x,y,z)

(x,y,z)

Vertex
rasterizare
Shader
gl_Position

Fragment
Frame
Shader
Buffer
culoare

-culoare

11

OpenGL Shading Language (GLSL)

http://www.opengl.org/documentation/glsl/
Dezvoltat peste OpenGL
Similar cu limbajele C si C++

Specializat pentru prelucrari grafice (controlul formei si

al miscarii obiectelor folosind direct hardware-ul grafic)

Limbaje echivalente: HLSL (Direct3D), Cg (Direct3D sau

OpenGL)

12

Diferente fata de limbajul C

Nu suporta
Pointeri
Recursivitate
Alocare de memorie

Suporta
structuri
Fluxul de control din limbajele moderne: bucle,
instructiuni de conditionare, apeluri de functii
Tipuri de date: vectori, matrici
Operatii grafice: de exemplu reflect (calculeaza raza
reflectata)
Biblioteca matematica

13

Tipuri de date

Tipuri de date de baza scalari:

float
int
uint
bool

struct

Structuri ca in C/C++

14

Tipuri de date vectori predefiniti

Tipuri de date vector:
vec2, vec3, vec4
ivec*, uvec*, bvec*

Acesarea componentelor :
.x, .y, .z, .w - pozitie / directie
.r, .g, .b, .a - culoare
.s, .t, .p, .q - coordonate de texturare

float3 myColor

myColor.xyz

myColor.xgb

15

Tipuri de date vectori - constructori

vec3 xyz = vec3(1.0, 2.0, 3.0);

vec3 xyz = vec3(1.0); // [1.0, 1.0, 1.0]
vec3 xyz = vec3(vec2(1.0, 2.0), 3.0);

vec4 c = vec4(0.5,
vec3 rgb = c.rgb;
vec3 bgr = c.bgr;
vec3 rrr = c.rrr;
c.a = 0.5;
c.rb = 0.0;
float g = rgb[1];

1.0, 0.8, 1.0);

// [0.5, 1.0, 0.8]
// [0.8, 1.0, 0.5]
// [0.5, 0.5, 0.5]
// [0.5, 1.0, 0.8, 0.5]
// [0.0, 1.0, 0.0, 0.5]
// 0.5, accesare prin index

16

Tipuri de date matrici predefinite

Patrate: mat2, mat3, mat4
Rectangulare: matmxn
m coloane, n linii

Stocate vectori coloana

17

Tipuri de date - matrici

Constructori
mat3 i = mat3(1.0); // matricea identitate 3x3

mat2 m = mat2(1.0, 2.0, // [1.0 3.0]

3.0, 4.0); // [2.0 4.0]

Acesarea elementelor
float f = m[column][row];

float x = m[0].x; // componenta x a primei coloane

vec2 yz = m[1].yz; // componentele yz ale coloanei 2
18

Vectori si matrici
vec3 xyz = // ...
vec3 v0 = 2.0 * xyz;
vec3 v1 = v0 + xyz;
vec3 v2 = v0 * xyz;

mat3 m = // ...
mat3 v = // ...
mat3 mv = v * m;
mat3 xyz2 = mv * xyz;
mat3 xyz3 = xyz * mv;
19

Functii

Functii trigonometrice
float s = sin(theta);
float c = cos(theta);
float t = tan(theta);

Unghiurile sunt masurate

in radiani

float theta = asin(s);

vec3 angles = vec3(/* ... */);
vec3 vs = sin(angles);

Se lucreaza pe
componente

20

Functii

Functii exponeniale
float xToTheY = pow(x, y);
float eToTheX = exp(x);
float twoToTheX = exp2(x);
float l = log(x);
// ln
float l2 = log2(x); // log2
float s = sqrt(x);

21

Functii

Alte functii
float ax = abs(x);
float sx = sign(x); // -1.0, 0.0, 1.0
float m0 = min(x, y);
float m1 = max(x, y);
float c = clamp(x, 0.0, 1.0);
// floor(), ceil(),

22

Functii

Functii geometrice
vec3
vec3
vec3
vec3

l
n
p
q

=
=
=
=

//
//
//
//

...
...
...
...

float f = length(l);
float d = distance(p, q);
float d2 = dot(l, n);
vec3 v2 = cross(l, n);
vec3 v3 = normalize(l);

//
//
//
//
//

lungime vector
distanta dintre puncte
produs scalar
produs vectorial
normalizare

vec3 v3 = reflect(l, n);

// reflect

//refract()
23

Functii

vec3 p = vec3(1.0, 2.0, 3.0);

vec3 q = vec3(3.0, 2.0, 1.0);

bvec3 b = equal(p, q);

// (false, true, false)
bvec3 b2 = lessThan(p, q);
// (true, false, false)
bvec3 b3 = greaterThan(p, q); // (false, false, true)
bvec3 b4 = any(b);
bvec3 b5 = all(b);

// true
// false

24

Transmiterea parametrilor
Aplicatie
-Coordonate
varfuri
-normale
-coordonate
de texturare

(x,y,z)

(x,y,z)

Fragment
Vertex
rasterizare
Shader
Shader
in
out
in

Operatii
Frame
Buffer

-culoare

uniform

25

Primul program
Program OpenGL

Vertex Shader

glm::mat4
model_matrix,
view_matrix,
projection_matrix;

in vec3 position;
uniform mat4 model_matrix,
view_matrix, projection_matrix;

glGetUniformLocation
glUniformMatrix

void main(){ /* */}

model_matrix =
glm::mat4(1,0,0,0,
0,1,0,0, 0,0,1,0, 0,0,0,1);
view_matrix =
glm::lookAt(obs, catre,
up);

projection_matrix =
glm::perspective(fov,
aspect, n, f);

glGetUniformLocation
glUniform

Fragment Shader
out vec4 out_color;
uniform vec4 object_color;
void main(){/* */}

Frame Buffer
glm::vect4 object_color;

Primul program GLSL

Vertex shader
in vec3 in_position;
uniform mat4 M, V, P;
out vec3 vertex_to_fragment_color;
void main(void) { /**/}
Fragment shader
in vec3 vertex_to_fragment_color;
out vec4 fragment_color;
void main(void) { /* */ }
27

Primul program GLSL vertex shader

Vertex shader
in vec3 in_position;
uniform mat4 M, V, P;

out vec3 vertex_to_fragment_color;

void main(void) {
vertex_to_fragment_color = in_color;
gl_Position = P * V * M * vec4(in_position,1);

}
28

Primul program GLSL fragment shader

Fragment shader

in vec3 vertex_to_fragment_color;
out vec4 fragment_color;
void main(void)
{
fragment_color = vec4(vertex_to_fragment_color,1);
}

29

Maparea texturilor 2D
Se defineste o mapare intre (x,y,z) din spatiul real
in (s,t) in spatiul textura
Pentru a determina culoarea din textura, se
considera un punct (x,y,z) de pe suprafata, se
mapeaza in spatiul textura, pe baza caruia de
determina culoarea din textura
s = s (x, y, z)
(x,y,z)
t = t (x, y, z)
t
s

30

Texturarea unui poligon

Se specifica
coordonatele (s,t)

coordonatele in varfuri
s = s (x, y, z)
t = t (x, y, z)

Interpolare liniara
pentru a mapa restul
punctelor din spatiul
real

t
s
Textura

Triunghi (in
spatiul real)

31

Exemplu 2

Vertex shader
in vec3 in_position;
in vec2 in_texcoord;
uniform mat4 M, V, P;
out vec2 texcoord;

void main(void) {
texcoord = in_texcoord;

Fragment shader
uniform sampler2D img;
in vec2 texcoord;
out vec4 color;

void main(void) {
vec3 tex = texture (img,
texCoord).xyz;
color = vec4(tex, 1);
}

gl_Position =

P*V*M*vec4(in_position,1);
}

32

Exemplu 3

Vertex shader
uniform vec2 left;
uniform vec2 right;

texturare

in vec3 in_position;

in vec2 in_texcoord;
uniform mat4 M, V, P;
out vec2 texcoord1, texcoord2;

void main(void) {
texcoord =;
gl_Position = P*V*M*vec4(in_position,1);

texcoord1 = in_texcoord + left;

texcoord2 = in_texcoord + right; }

33

Exemplu 3

Fragment shader
uniform sampler2D img1;
uniform sampler2D img2;
in vec2 texcoord1, texcoord2;

out vec4 color;

void main(void) {
vec4 c1 = vec4(texture(img1, texcoord1).xyz, 1);
vec4 c2 = vec4(texture(img2, texcoord2).xyz, 1);
color = c1 + c2;
}
34