Download - 5_Banda Grafica Programabila
-
8/18/2019 5_Banda Grafica Programabila
1/34
Lantul de transformari
1
-
8/18/2019 5_Banda Grafica Programabila
2/34
2
Banda grafica fixa
Transformarevarfuri
Asamblare primitive,decupare, rasterizare
Texturare,colorare
Operatii raster
Varfuri 3D siinformatii suplimentare
Varfuritransformate
Conectivitateavarfurilor
Fragmente
TexturiActualizare
Frame-buffer
Fragmente
colorate
-
8/18/2019 5_Banda Grafica Programabila
3/34
3
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 transferatecatre banda grafica - se folosesc functii fixe
Evolutia hardware a procesorului grafic a permisinlocuirea portiunilor din banda grafica cu cod =>banda grafica programabila
Vertex shader: transformarea varfurilorFragment shader: calculul culorilor fragmentelor
-
8/18/2019 5_Banda Grafica Programabila
4/34
4
Banda grafica programabila
Aplicatie 3D
API 3D Interfata UPG
Asamblare primitive
Rasterizare
Operatii raster
Frame buffer
Vertex
shader
Fragmentshader
UPG
-
8/18/2019 5_Banda Grafica Programabila
5/34
5
Banda grafica programabila
Actualizare
frame-buffer
Comenzi si date
Aplicatie grafica 3D
Interfata UPG Asamblare primitive
Operatii raster
Fragmente
Fragmente
Fragmentetransformate
3D API: OpenGL / Direct3D
Rasterizare siinterpolare
Vertex shader
Fragmentshader
UPG
Primitive asamblate
Varfuritransformate
Varfuri
Varfuri
-
8/18/2019 5_Banda Grafica Programabila
6/34
Vertex shader
Se executa o data pentru fiecare vertex
Realizeaza:
Transformarile folosind matricile demodelare-vizualizare, proiectie
Transforma normalele, normalizareaacestora
Generarea coordonatelor de texturare,transformarea acestora
Iluminarea per vertex
Calculul culorii vertexului 6
-
8/18/2019 5_Banda Grafica Programabila
7/34
Fragment shader
Se executa o data pentru fiecare fragment
Realizeaza
Calculul culorilor si a coordonatelor detexturare per fragment
Aplicarea texturii
Calculul normalelor pentru aplicarea iluminarii
per fragment
Poate elimina fragmente pe baza informatieide adancime
7
-
8/18/2019 5_Banda Grafica Programabila
8/34
Banda grafica
8
Framebuffer
(x,y,z) Transformarevarfuri
Asamblare primitive
Decupare,Rasterizare
Colorare
-
8/18/2019 5_Banda Grafica Programabila
9/34
Banda grafica
9Framebuffer
(x,y,z) Transformare
varfuri
Asamblare
primitiveDecupare,Rasterizare
Colorare
Eliminare parti
nevizibile
-
8/18/2019 5_Banda Grafica Programabila
10/34
Banda grafica programabila
10
Framebuffer
(x,y,z) Vertexshader
Asamblare primitive
Decupare,Rasterizare
Fragmentshader
Eliminare parti
nevizibile
-
8/18/2019 5_Banda Grafica Programabila
11/34
VertexShader
Aplicatie
-Coordonatevarfuri
-normale
-coordonatede texturare
-culoare
gl_Position
FragmentShaderrasterizare
FrameBuffer
culoare
(x’ ,y’ ,z’ )(x,y,z)
Transmiterea parametrilor
11
-
8/18/2019 5_Banda Grafica Programabila
12/34
12
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 sial miscarii obiectelor folosind direct hardware-ul grafic)
Limbaje echivalente: HLSL (Direct3D), Cg (Direct3D sauOpenGL)
http://www.opengl.org/documentation/glsl/http://www.opengl.org/documentation/glsl/http://www.opengl.org/documentation/glsl/
-
8/18/2019 5_Banda Grafica Programabila
13/34
13
Diferente fata de limbajul C
Nu suportaPointeri
Recursivitate
Alocare de memorie
Suportastructuri
Fluxul de control din limbajele moderne: bucle,instructiuni de conditionare, apeluri de functii
Tipuri de date: vectori, matrici
Operatii grafice: de exemplu reflect (calculeaza razareflectata)
Biblioteca matematica
-
8/18/2019 5_Banda Grafica Programabila
14/34
14
Tipuri de date
• Tipuri de date de baza – scalari:
• float
•
int• uint
• bool
• struct Structuri ca in C/C++
-
8/18/2019 5_Banda Grafica Programabila
15/34
15
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
Tipuri de date – vectori predefiniti
myColor.xyz myColor.xgbfloat3 myColor
-
8/18/2019 5_Banda Grafica Programabila
16/34
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);
16
vec4 c = vec4(0.5, 1.0, 0.8, 1.0);vec3 rgb = c.rgb; // [0.5, 1.0, 0.8]vec3 bgr = c.bgr; // [0.8, 1.0, 0.5]vec3 rrr = c.rrr; // [0.5, 0.5, 0.5]
c.a = 0.5; // [0.5, 1.0, 0.8, 0.5]
c.rb = 0.0; // [0.0, 1.0, 0.0, 0.5]
float g = rgb[1]; // 0.5, accesare prin index
-
8/18/2019 5_Banda Grafica Programabila
17/34
17
Tipuri de date – matrici predefinite
Patrate: mat2, mat3, mat4
Rectangulare: matm xn
m coloane, n linii
Stocate – vectori coloana
-
8/18/2019 5_Banda Grafica Programabila
18/34
Tipuri de date - matrici
18
Constructori
Acesarea elementelor
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]
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
-
8/18/2019 5_Banda Grafica Programabila
19/34
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
-
8/18/2019 5_Banda Grafica Programabila
20/34
Functii
Functii trigonometrice
float s = sin(theta);
float c = cos(theta);float t = tan(theta);
float theta = asin(s);
vec3 angles = vec3(/* ... */);
vec3 vs = sin(angles);
Se lucreaza pe
componente
Unghiurile sunt masuratein radiani
20
-
8/18/2019 5_Banda Grafica Programabila
21/34
Functii
Functii exponeniale
float xToTheY = pow(x, y);float eToTheX = exp(x);float twoToTheX = exp2(x);
float l = log(x); // lnfloat l2 = log2(x); // log2
float s = sqrt(x);
21
-
8/18/2019 5_Banda Grafica Programabila
22/34
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
-
8/18/2019 5_Banda Grafica Programabila
23/34
Functii
Functii geometrice
vec3 l = // ...vec3 n = // ...vec3 p = // ...
vec3 q = // ...
float f = length(l); // lungime vectorfloat d = distance(p, q); // distanta dintre punctefloat d2 = dot(l, n); // produs scalarvec3 v2 = cross(l, n); // produs vectorial
vec3 v3 = normalize(l); // normalizare
vec3 v3 = reflect(l, n); // reflect
//refract()
23
-
8/18/2019 5_Banda Grafica Programabila
24/34
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); // true
bvec3 b5 = all(b); // false
24
-
8/18/2019 5_Banda Grafica Programabila
25/34
VertexShader
uniform
Aplicatie
-Coordonatevarfuri
-normale
-coordonate
de texturare
-culoare
out
FragmentShaderrasterizare
OperatiiFrame
Bufferin
(x’ ,y’ ,z’ )(x,y,z)
Transmiterea parametrilor
25
in
-
8/18/2019 5_Banda Grafica Programabila
26/34
Primul program
Program OpenGL
glm::mat4model_matrix,view_matrix,
projection_matrix;
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);
glm::vect4 object_color;
Vertex Shader
in vec3 position;uniform mat4 model_matrix,view_matrix, projection_matrix;
void main(){ /* */}
Fragment Shader out vec4 out_color;uniform vec4 object_color;
void main(){/* */}
Frame Buffer
glUniformMatrix
glUniform
glGetUniformLocation
glGetUniformLocation
-
8/18/2019 5_Banda Grafica Programabila
27/34
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) { /* … */ }
Primul program GLSL
27
-
8/18/2019 5_Banda Grafica Programabila
28/34
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);
}
Primul program GLSL – vertex shader
28
-
8/18/2019 5_Banda Grafica Programabila
29/34
Fragment shaderin vec3 vertex_to_fragment_color;
out vec4 fragment_color;
void main(void)
{
fragment_color = vec4(vertex_to_fragment_color,1);}
Primul program GLSL – fragment shader
29
-
8/18/2019 5_Banda Grafica Programabila
30/34
30
Maparea texturilor 2D
Se defineste o mapare intre (x,y,z) din spatiul realin (s,t) in spatiul textura
Pentru a determina culoarea din textura, seconsidera un punct (x,y,z) de pe suprafata, semapeaza in spatiul textura, pe baza caruia de
determina culoarea din texturas = s (x, y, z)
t = t (x, y, z)
s
t
(x,y,z)
-
8/18/2019 5_Banda Grafica Programabila
31/34
31
Texturarea unui poligon
Se specificacoordonatele (s,t) coordonatele in varfuri
s = s (x, y, z)
t = t (x, y, z)
Interpolare liniara
pentru a mapa restulpunctelor din spatiulreal
Textura
s
t
Triunghi (in
spatiul real)
-
8/18/2019 5_Banda Grafica Programabila
32/34
Exemplu 2
Vertex shaderin vec3 in_position;
in vec2 in_texcoord;
uniform mat4 M, V, P;out vec2 texcoord;
void main(void) {
texcoord = in_texcoord;
gl_Position =
P*V*M*vec4(in_position,1);
} 32
Fragment shaderuniform sampler2D img;in vec2 texcoord;out vec4 color;
void main(void) {vec3 tex = texture (img,
texCoord).xyz;color = vec4(tex, 1);
}
-
8/18/2019 5_Banda Grafica Programabila
33/34
Exemplu 3
Vertex shader
uniform vec2 left;
uniform vec2 right;
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
texturare
-
8/18/2019 5_Banda Grafica Programabila
34/34
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