A grafikus hardware programozása

Slides:



Advertisements
Hasonló előadás
OpenGL 2. gyakorlat Hapák József
Advertisements

L ÁTHATÓSÁG MEGHATÁROZÁSA tavaszi félév.
2D képszintézis Szirmay-Kalos László.
2D grafikus rendszerek Szirmay-Kalos László. 2D grafikus editor: GUI, use-case, dinamikus modell L L L R LD LU MouseLDown első pont MouseLDown második...
Inkrementális 3D képszintézis
GPU Szirmay-Kalos László.
Inkrementális 3D képszintézis Szirmay-Kalos László.
2D képszintézis Szirmay-Kalos László. Számítógépes grafika feladata képszintézis Virtuális világ modell modellezés Metafórák: 2D rajzolás világ = sík.
Számítógépes grafika Szirmay-Kalos László
Számítógépes grafika Szirmay-Kalos László
Bevezetés.  A számítógépes grafika inkrementális képszintézis algoritmusának hardver realizációja  Teljesítménykövetelmények:  Animáció: néhány nsec.
GPGPU labor I. OpenGL, Cg.
 Nincs szinkronizáció és kommunikáció  Csővezeték alkalmazása  Párhuzamosítás Proc 2Proc 1 Csővezeték Proc 1 Proc 21 Proc 22 Párhuzamosság.
Grafika a programban Készítette: Pető László. Bevezetés Valójában nem a célobjektumra rajzolunk, hanem annak festővászon területére (canvas). Csak olyan.
Grafikus Rendszerek Zsitnyánszki Zoltán.
Alapok 2013/2014, őszi szemeszter gyakorlati foglalkozás Automatizálási tanszék.
Számítógépes grafika, PPKE-ITK, Benedek Csaba, D képszintézis 4. előadás.
A számítógépes grafika céljai és feladatai
2D képszintézis és textúrák
PHP I. Alapok. Mi a PHP? PHP Hypertext Preprocessor Szkriptnyelv –Egyszerű, gyors fejlesztés –Nincs fordítás (csak értelmező) Alkalmazási lehetőségek:
Fejlett grafikai algoritmusok Megvilágítási modellek
Számítógépes grafika 3. gyakorlat.
2008/2009 tavasz Klár Gergely  Gyakorlatok időpontjai: ◦ Szerda 10:05–11:35 ◦ Csütörtök 10:00+ε –11:30+ε  Gyakvez: ◦ Klár Gergely ◦
Pixel műveletek, képek Szirmay-Kalos László.
Vektorok különbsége e-x = [ex-xx ey-xy ez-xz] e e-x x szempozíció
Fraktálok és csempézések
2D képszintézis Szirmay-Kalos László.
Számítógépes grafika Bevezetés
3D képszintézis fizikai alapmodellje Szirmay-Kalos László Science is either physics or stamp collecting. Rutherford.
Rendering pipeline Ogre3D
Textúrák Grafikus játékok fejlesztése Szécsi László g07-texture.
Plakátok, részecskerendszerek Grafikus játékok fejlesztése Szécsi László g09-billboard.
Effect framework, HLSL shader László Szécsi. forráskódban elérhető egyszerűsíti a shaderek fordítását, rajzolási állapot beállítását – pass: egy ilyen.
Többmenetes renderelés Grafikus játékok fejlesztése Szécsi László g11-multipass.
Grafikus játékok fejlesztése Szécsi László t09-texture
Rekurzív algoritmusok
GPU ELTE IK Számítógépes Grafika II. Jeni László Attila
OpenGL 4 shaderek, GLSL Valasek Gábor
GPGPU A grafikus hardver általános célú felhasználása
2. gyakorlat DirectX 2007/2008 tavasz Klár Gergely
Fejlett grafikai algoritmusok Megvilágítás SZTE, 2010.
Illés Zoltán ELTE Informatikai Kar
Informatikai eszközök a virtuális valóság szolgálatában Hapák József ELTE-IK X. Eötvös Konferencia.
Vizualizáció és képszintézis Sugárkövetés (Dart + GLSL) Szécsi László.
Számítógépes grafika gyakorlat: DirectX 2007/2008 tavasz Klár Gergely
Számítógépes Grafika OpenGL 4 shaderek, GLSL. OpenGL 4 A következő programozható fázisok vannak a 4.x-es OpenGL-ben: Vertex shader Tesselation control.
Képek, képfeldolgozás Szirmay-Kalos László.
Vizualizáció és képszintézis Térfogati textúrák kezelése (Dart + GLSL) Szécsi László.
Grafikus szoftver Szirmay-Kalos László. Interaktív programok felépítése input csővezeték output csővezeték.
Anyagok, megvilágítás. Rendering egyenlet I(x,  )=I e (x,  )+   I(h(x,-  ’ ,  ’) f r (  ’,x,  ) cos  ’d  ’
Grafikus hardver/szoftver alapok Szirmay-Kalos László.
Bevezetés.  Miért …  … egyszálúan programozunk?  … probléma ez?  Hogyan …  … változik ez?  … tudjuk kihasználni?  Megéri-e párhuzamosítani?
Framebuffer.
OpenGL 2. gyakorlat Valasek Gábor
Vizualizáció és képszintézis
Vizualizáció és képszintézis
Szécsi László 3D Grafikus Rendszerek 14. előadás
OpenGL IV.
Szécsi László 3D Grafikus Rendszerek 1. labor
Vizualizáció és képszintézis
GPGPU – CUDA 2..
OpenGL II.
OpenGL kiterjesztések (extensions)
JavaScript a böngészőben
OpenGL V.
Sugármetszés implicit szintfelülettel
Bevezetés GPGPU Alkalmazások.
Environment mapping Szécsi László
JavaScript a böngészőben
CUDA – OpenGL.
Előadás másolata:

A grafikus hardware programozása Szécsi László 3D Grafikus Rendszerek 3. előadás

GPU pipeline input vertex bufferek index buffer rajzolási állapot egyes pipeline-elemek működési beállításai programozható elemek shader programjai erőforrások – globális memóriában adatok globális (uniform) változók textúrák adatbufferek csak olvasható

GPU pipeline output kép render target mélységbuffer (+stencil) frame buffer textúra mélységbuffer (+stencil)

GPU pipeline tesszellátor nélkül IA VS IA RS FS OM textúrák TS

Rajzolási állapot IA IA RS OM attribute binding primitive topology rasterizer state viewport depth-stencil state blend state

Lépések I vertexek összeállítása Vertex Shader model trafó árnyalás view és proj trafó primitívek összeállítása vertexek összeválogatása vertex bufferbeli sorrend alapján index bufferbeli indexek alapján

Lépések II raszterizálás Fragment shader z-teszt blending hátsólap-eldobás vágás homogén osztás viewport trafó Fragment shader pixelszín meghatározása z-teszt blending

Vertexek összeállítása Vertex buffer rekordok tömbje IA pos normal tex pos normal tex pos normal tex vertex

Vertex shader bejövő adat kimenő adat VS bejövő adat uniform: model, view, proj mátrixok, fények, ... minden vertexre más: vertex és instance elemek [pozíció, normál, szín, texcoord] kimenő adat pozíció homogén normalizált képernyő koordinátákban árnyalás eredménye [szín] bármi más [normál, texcoord]

Primitívek összeállítása non-indexed vertex bufferben egymás után következők triangle list triangle strip 1 2 3 4 5 6 1 2 3 4 5 2 5 2 4 1 3 4 6 1 5 3 WebGL.RenderingContext.TRIANGLES WebGL.RenderingContext.TRIANGLE_STRIP

Raszterizáló egység: lapeldobás körüljárási irány (képernyőn) alapján eldobhatunk lapokat ha a modellünkben (index bufferben) konzisztens a háromszögek körüljárási iránya, ezzel eldobhatjuk a test hátsó lapjait a belsejét úgysem látjuk, ha poliéder

Raszterizáló egység: vágás ami kilógna a képernyőről, vágjuk le hsz vágás szakasz vágásra visszavezethető szakasz vágás = pont vágás + metszéspont számítás normalizált képernyőkoordinátákban [-1, -1, 0] [1, 1, 1] téglatestre vágunk [Descartes] Átfordulási probléma a homogén osztás előtt kell vágni

ablak a virtuális világra Átfordulási probléma itt kellene látszania, nem a két vetületi pont között ide vetül ide vetül 1 ablak a virtuális világra

ablak a virtuális világra Átfordulási probléma első vágósík, mögöttünk levő dolgok eldobása itt kellene látszania nem a két vetületi pont között ide vetül metszéspont ablak a virtuális világra

Raszterizáció homogén osztás viewport trafó: pixel koordináták RS homogén osztás viewport trafó: pixel koordináták lineáris interpoláció vertex output adatok (kivéve pozíció) interpolálása minden kitöltendő pixelhez pixel shader indítása minden pixelszín meghatározásához

Pixel shader bejövő adat kimenő adat PS bejövő adat vertex shader kimenő adatai lineárisan interpolálva pixel koordináták kimenő adat pixel szín [RGBA] mélység, ha felül akarjuk írni a háromszög csúcsainak z-jéből interpolált eredetit ha nem, akkor a z-teszt előrehozható a pixel shader elé

Kimeneti műveletek bufferek műveletek OM bufferek célterület: frame buffer vagy textúra mélység-stencil buffer műveletek mélység teszt stencil teszt keverés [alfa blending]

Z-teszt a 3D takarási probléma megoldására 2. 1. 3. 1 0.1325 0.628 0.3325

Keverés [alpha blending] A célterületen már meglevő érték [dest] és az újonnan számított szín [src] kombinálása mindkettőhöz megadható egy súly (0, 1, srcalpha, dstalpha, 1-alpha ...) megadható a függvény (add, subtract, min, max ...) átlátszóság: hátulról előre rajzolás + blending src * srcalpha + dst * (1- srcalpha)

WebGL Vertex shader Fragment shader Vertex buffer Texture Framebuffer Render state nincs Geometry shader Tessellation shader Vertex Array Object Multiple render target Floating-point texture Compressed texture FS depth write 3D texture

WebGL Nincsnek GPGPU képességek sem de lesz WebCL nemsokára Atomics Texture load store de lesz WebCL nemsokára WebGL 2 is van már

WebGL hasonló, mint a desktop OpenGL: // ... gl.bindBuffer(/* ... */); gl.vertexAttribPointer(/* ... */); gl.useProgram(/* ... */); gl.drawArrays(/* ... */);

Scene – időlépcső és képernyőtörlés var Scene = function(gl, canvas) { this.canvas = canvas; this.timeAtLastFrame = new Date().getTime(); } Scene.prototype.update = function(gl) { var timeAtThisFrame = new Date().getTime(); var dt = (timeAtThisFrame - this.timeAtLastFrame) / 1000.0; this.timeAtLastFrame = timeAtThisFrame; // clear the screen gl.clearColor(0.6, 0.0, 0.3, 1.0); gl.clearDepth(1.0); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

Rajzolás kell geometria kell GPU program vertex bufferek, index buffer attribútum kötések kell GPU program vertex shader pixel shader

Scene – geometria és GPU program var Scene = function(gl, canvas) { ... this.vsIdle = new Shader(gl, gl.VERTEX_SHADER, "idle_vs.essl"); this.fsSolid = new Shader(gl, gl.FRAGMENT_SHADER, "solid_fs.essl"); this.solidProgram = new Program(gl, this.vsIdle, this.fsSolid); this.quadGeometry = new QuadGeometry(gl); } Scene.prototype.update = function(gl) { ... this.solidProgram.commit(); this.quadGeometry.draw();

Shader források JS kódban legegyszerűbb nem kell XMLHttpRequest-elni, várni az eredményre, stb. többsoros stringben `között` syntax highlighting is működik, mert GLSL-ben nincs ilyen a shaderkódot tartalmazó file JS file valójában, de a syntax highlighting meg az igazság kedvéért a kiterjesztése .essl Sublime menüben, GLSL extension felrakása után: View | Syntax | Open all with current extension as | OpenGL | ESSL minden essl file berakja a shaderforrást egy globális shaderSource objektumba tulajdonságnév: a forrásfile elérési útja (az elejét levágva) érték: a forráskód string

Vertex shader: js/shaders/idle_vs.essl var shaderSource = {}; shaderSource[document.currentScript.src.split('js/shaders/')[1]] = ` attribute vec3 vertexPosition; void main(void) { gl_Position = vec4(vertexPosition, 1); } `; Fontos, hogy a string az első sorban kezdődik. Így a hibaüzenetekben sorszámok megegyeznek a filebeli sorszámokkal.

Fragment shader: js/shaders/solid_fs.essl shaderSource[document.currentScript.src.split('js/shaders/')[1]] = ` precision highp float; void main(void) { gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0); } `;

Shader objektum var Shader = function(gl, shaderType, sourceFileName) { this.sourceFileName = sourceFileName; this.glShader = gl.createShader(shaderType); if(shaderSource.hasOwnProperty(sourceFileName)) gl.shaderSource(this.glShader,shaderSource[sourceFileName]); else throw new Error('Shader ' + sourceFileName + ' not found. Check spelling, and whether the essl file is embedded into the html file.'); gl.compileShader(this.glShader); if (!gl.getShaderParameter(this.glShader, gl.COMPILE_STATUS)) throw new Error('Error in shader ' + sourceFileName + ':\n' + gl.getShaderInfoLog(this.glShader)); }

Program objektum var Program = function(gl, vertexShader, fragmentShader) { this.gl = gl; this.glProgram = gl.createProgram(); gl.attachShader(this.glProgram, vertexShader.glShader); gl.attachShader(this.glProgram, fragmentShader.glShader); gl.bindAttribLocation(this.glProgram, 0, 'vertexPosition'); gl.bindAttribLocation(this.glProgram, 1, 'vertexNormal'); gl.bindAttribLocation(this.glProgram, 2, 'vertexTexCoord'); gl.linkProgram(this.glProgram); if (!gl.getProgramParameter(this.glProgram, gl.LINK_STATUS)) throw new Error('Could not link shaders [vertex shader:' + vertexShader.sourceFileName + ']:[fragment shader: ' + fragmentShader.sourceFileName + ']\n' + gl.getProgramInfoLog(this.glProgram)); } Program.prototype.commit = function(){ this.gl.useProgram(this.glProgram);

QuadGeometry – vertex buffer var QuadGeometry = function(gl) { this.vertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ -1, -1, 0, -1, 1, 0, 1, -1, 0, 1, 1, 0, ]), gl.STATIC_DRAW); // vertexNormalBuffer, vertexTexCoordBuffer ugyanígy

QuadGeometry – index buffer this.indexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([ 0, 1, 2, 1, 2, 3, ]), gl.STATIC_DRAW); }

QuadGeometry – rajzolás QuadGeometry.prototype.draw = function(gl) { gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 3, gl.FLOAT, //< 3 floats false, //< do not normalize (make unit length) 0, //< tightly packed 0 //< data starts at array start ); // normal, texcoord ugyanígy gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); }