számítógépes grafika gyakorlatok programtervező informatikus (nappali) a, c, t szakirányok

32
Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok OpenGL 2. gyakorlat Hapák József

Upload: saniya

Post on 23-Feb-2016

26 views

Category:

Documents


1 download

DESCRIPTION

Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok. OpenGL 2. gyakorlat Hapák József. Emlékeztető. Múlt órán a Windows-os alkalmazásokat tekintettük át Továbbá láttuk, hogy programjainak szüksége van Egy ablakra, amibe rajzolhatunk - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Számítógépes Grafika gyakorlatokProgramtervező Informatikus (Nappali)

A, C, T szakirányok

OpenGL2. gyakorlat

Hapák József

Page 2: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Emlékeztető

● Múlt órán a Windows-os alkalmazásokat tekintettük át

● Továbbá láttuk, hogy programjainak szüksége van● Egy ablakra, amibe rajzolhatunk● Egy ún. OpenGL context-re, amin keresztül

rajzolunk az ablakra● Illetve a kettő összekapcsolására, amit a WinAPI

segítségével végeztünk (más-más ablakozórendszereknél más-más API/függvényeken-n keresztül történik ez)

Page 3: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Most következik

● Mi a grafikus szerelőszalag/grafikus csővezeték/pipeline

● Geometria tárolása és kirajzolása● Shaderek használata

Page 4: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Grafikus szerelőszalag

Page 5: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Grafikus szerelőszalag

● Az alkalmazásaink célja a színterünk kirajzolása

● A kép előállítása során használt műveletek sorozatát hívjuk grafikus szerelőszalagnak (grafikus csővezeték, graphics pipeline)

● A színterünket benépesítő geometriai elemeket (ember, hajó stb.) egyszerű, elemi geometriai primitívekből építjük fel

● Részletesebben l. előadás

Page 6: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Grafikus szerelőszalag (OGL 2.x)

Vertex shader

Fragmentshader

Page 7: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Ope

nGL

4.x

pipe

line

(x<3

)

Page 8: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Grafikus primitívek

Page 9: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Grafikus primitívek - DEPRECATED

Page 10: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Vertex és pixel shader

Page 11: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Vertex shaderA vertex shader programunkban végezzük el a bejövő geometria csúcspontjainak transzformációjátglDrawArrays/glDrawElements hívásban hivatkozott csúcspontok lesznek a bemeneteiA vertex shader bemeneti változóihoz (in módosító) a hozzárendelést a programból csináljukA csúcspontbeli attribútumoknál ritkábban változó bemenetet uniform változókon keresztül adhatjuk át (uniform = a kirajzolás hívás idejére konstans)

Page 12: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Vertex shader

A bejövő csúcspont koordinátáit clip space-be ( -1 <= x,y,z <= 1) kell transzformálni és a beépített gl_Position változónak átadni – ezt a pipeline nem programozható részeinek is kellgl_Position = gl_MVPMatrix * bejövő_vertex_pos4

Ezen kívül azt csinálunk „amit akarunk” (minden out-tal megjelölt változónak adhatunk értéket és továbbküldhetjük a következő programozható fázisnak)

Page 13: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Vertex shader

A következő beépített kimeneti változók írhatóak a vertex shaderből:vec4 gl_Position: a transzformált homogén koordinátái a bejövő vertex-nek. Ebbe írnia kell a VS-nek.float gl_PointSize: a kirajzolandó pont mérete pixelben (point sprite-okhoz). Opcionális.vec4 gl_ClipVertex: felhasználói vágósíkokhoz. Opcionális.És ezeken kívül minden, amit mi is felveszünk...

Page 14: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Fragment shader vec4 gl_FragColor: a fragment színe, de ha nem írun bele viszont van kimeneti vec4, az lesz ez vec4 glFragData[gl_MaxDrawBuffers]: ha több color attachment-je van az aktív FBO-nak, akkor ezen keresztül írhatunk rájuk float gl_FragDepth: fragment mélységi értéke (ha módosítanánk, mint a raycasterben) vec4 gl_FragCoord: csak olvasható, a fragment homogén koordinátái (4. koord 1/w) bool gl_FrontFacing: előrefelé néz-e a fragment lapja

Page 15: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Vertex shader

#version 400in vec3 VertexPosition;in vec3 VertexColor;out vec3 Color;void main(){ Color = VertexColor; gl_Position = vec4(VertexPosition,1.0);

}

Page 16: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Fragment shader

#version 400

in vec3 Color;

out vec4 FragColor;

void main(){

FragColor = vec4(Color, 1.0);}

Page 17: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Program-shader megfeleltetések

Vertex attribútumok és a shader bemeneti változóinak összerendelés:glBindAttribLocation(

programHandle, // shader prog0, // index"VertexPosition"); // sh-s nev

glBindAttribLocation(programHandle, 1, "VertexColor");

Page 18: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Program-shader megfeleltetésekglGenVertexArrays( 1, &vaoHandle );

glBindVertexArray(vaoHandle);

glEnableVertexAttribArray(0); // Vertex position

glEnableVertexAttribArray(1); // Vertex color

glBindBuffer(GL_ARRAY_BUFFER, positionBufferHandle);

glVertexAttribPointer( 0, 3, GL_FLOAT, GL_FALSE, 0, (GLubyte *)NULL );

glBindBuffer(GL_ARRAY_BUFFER, colorBufferHandle);

glVertexAttribPointer( 1, 3, GL_FLOAT, GL_FALSE, 0, (GLubyte *)NULL );

Page 19: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Program-shader megfeleltetések

Lényegében tehát általános, indexekkel azonosított csatornákon keresztül megy az információátadásA csatornák száma a GL_MAX_VERTEX_ATTRIBS segítségével kérhetőek le

Page 20: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Layout

A shader oldalon is megcsinálhatjuk a bejövő csatornák „index-esítését”, és nem kell bind-olni az attrib location-öket:layout (location = 0) in vec3 VertexPosition;

layout (location = 1) in vec3 VertexColor;

Ezt a kimeneti változóknál is lehet használni:layout (location = 0) out vec4 FragColor;

Page 21: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Uniform változók

A shaderen belül read-only-k (konstansok), de kezdeti értéket kaphatnakuniform mat4 MVPTípusok:, n = 2,3,4mat<n>: n x n-es mátrixvec<n>: n dim vektor

Page 22: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Uniform változók

Először meg kell tudnunk az OpenGL-es azonosítóját a uniform változónak:GLuint mvpInShader = glGetUniformLocation(programHandle, "MVP");

Ezután már típusának megfelelő fv-vel értéket adhatunk neki:GlUniformMatrix4fv(mvpInShader, 1, GL_FALSE, &app_mvp[0][0]);Többiek: http://www.opengl.org/sdk/docs/man/xhtml/glUniform.xml

Page 23: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Uniform változók

Alaptípusok tömbjét is megjelölhetünk uniform-kéntEkkor pl. egy mátrixtömb konkrét indexen lévő mátrixának azonosítóját megkapjuk így:GLuint location = glGetUniformLocation( programHandle, "MyArray[1]" );

Page 24: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Uniform block

Több shader változó használhatja a program szempontjából ugyanazon uniform változókatEzeket mégis külön-külön kellene feltöltenünk stb., mert ugyanannak a uniform változónak más lesz a címe a különböző shader programokbanA uniform block segítségével ezen segíthetünk (csak használjunk shared layout-ot)

Page 25: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Uniform block – a shaderben

uniform BlobSettings{

vec4 InnerColor;vec4 OuterColor;float RadiusInner;float RadiusOuter;

};

Page 26: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Uniform block

A uniform változók adatait tartalmazó puffer objektum a uniform buffer objectA változókra hivatkozásnál elég az adattag nevét írni, nem kell prefixelni az UBO nevével (tehát pl. elég az InnerColor, nem kell BlobSettings.InnerColor)

Page 27: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Uniform block

GLuint blockIndex = glGetUniformBlockIndex(

programHandle, "BlobSettings");

GLint blockSize;

glGetActiveUniformBlockiv( programHandle, blockIndex,GL_UNIFORM_BLOCK_DATA_SIZE,

&blockSize);GLubyte * blockBuffer=

(GLubyte *)malloc(blockSize);

Page 28: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Uniform block

const GLchar *names[] = { "InnerColor", "OuterColor",

"RadiusInner", "RadiusOuter" };GLuint indices[4];glGetUniformIndices(

programHandle, 4, names, indices);

GLint offset[4];glGetActiveUniformsiv(

programHandle, 4, indices,GL_UNIFORM_OFFSET, offset);

Page 29: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Uniform block

GLfloat outerColor[] = {0.0f, 0.0f, 0.0f, 0.0f};GLfloat innerColor[] = {1.0f, 1.0f, 0.75f, 1.0f};

GLfloat innerRadius = 0.25f, outerRadius = 0.45f;

memcpy(blockBuffer + offset[0], innerColor, 4 *

sizeof(GLfloat));memcpy(blockBuffer + offset[1],

outerColor, 4 * sizeof(GLfloat));memcpy(blockBuffer + offset[2],

&innerRadius, sizeof(GLfloat));memcpy(blockBuffer + offset[3],

&outerRadius, sizeof(GLfloat));

Page 30: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Uniform block

GLuint uboHandle;glGenBuffers( 1, &uboHandle );glBindBuffer( GL_UNIFORM_BUFFER,

uboHandle );

glBufferData( GL_UNIFORM_BUFFER, blockSize,blockBuffer, GL_DYNAMIC_DRAW );

glBindBufferBase( GL_UNIFORM_BUFFER, blockIndex, uboHandle );

Page 31: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok

Fragment shader

#version 400in vec3 Color;out vec4 FragColor;void main(){

FragColor = vec4(Color, 1.0);}

Page 32: Számítógépes Grafika gyakorlatok Programtervező Informatikus (Nappali) A, C, T szakirányok