Szécsi László 3D Grafikus Rendszerek 1. labor

Az előadások a következő témára: "Szécsi László 3D Grafikus Rendszerek 1. labor"— Előadás másolata:

1 Szécsi László 3D Grafikus Rendszerek 1. labor
WebGL Szécsi László 3D Grafikus Rendszerek 1. labor

2 Kiindulási állapot

3 Ismerkedés az árnyalókkal
Változtassa meg a téglalap színét! a képpont-árnyalóban Kicsinyítse felére a téglalapot! a csúcspont-árnyalóban bedrótozva (mátrix, változtatható skálafaktor nélkül) Változtassa meg a háttérszínt! a Scene.prototype.update-ben rövidítés a diasorokban (nem JS szintaxis): Scenepupdate

4 Ismerkedés a geometriával
A QuadGeometry mintájára gyártson egy TriangleGeometry konstruktort új JS file index.html-ben szerepeljen! kevesebb csúcspont A Scene-ben hozzon létre egy példányt, és rajzolja ki a Scenepupdate-ben a meglevő programmal mehet ez is

5 Ismerkedés az árnyalóprogrammal
Rajzolja a háromszöget más képpont- árnyalóval! új, árnyalókódot tartalmazó JS file a js/shaders/solid_fs.essl mintájára az árnyaló forráskódja a Shader.source objektum tulajdonsága (property) lesz, a neve a filenév figyelem ez nem a prototípusban van! "statikus adattag" pl.: js/shaders/garish_fs.essl index.html-ben szerepeljen! adjon vissza egyelőre csak más színt a Scene-ben új Shader, új Program példány létrehozása rajzolás az új programmal

6 Csúcspont-attribútumok és árnyaló ki-bementek
Rajzoljon színátmenetes háromszöget! új csúcspont-árnyaló (pl. trafo_vs.essl) idle_vs.essl mintájára a vertexPos attribútum mellett a vertexTexCoord attribútumot is használjuk bemenetként új kimenet: varying vec2 tex; az attribútum értékét adjuk át a kimenetnek az új VS-t használjuk a Program példányban képpont-árnyalóba új bemenet: varying vec2 tex; a visszaadott szín két csatornája legyen a tex.xy Változtassa a színeket a TriangleGeometry.js-ben!

7 Uniform paraméter Vegyen fel a csúcspont-árnyalóba egy uniform paramétert. Válasszon: uniform vec2 modelPosition; // kezdőknek uniform mat4 modelMatrix; // haladóknak Az árnyalóban adja hozzá a modell pozícióját a csúcspont pozíciójához, vagy transzformálja a mátrixszal (JS tömb: row major, ESSL Mat4: column major) a Scenepupdate-ben állítsa be a uniform értékét, pl.: gl.uniform2fv( gl.getUniformLocation( this.testProgram.glProgram, "modelPosition"), new Float32Array([0.1, 0.2]) ); nagyon fapados, nem hatékony, könnyű elrontani és nehéz megkeresni a hibát

8 Mátrixos eset gl.uniformMatrix4fv( gl.getUniformLocation(
this.testProgram.glProgram, "modelPosition"), false, new Float32Array([ 1, 0, 0, 0.1, 0, 1, 0, 0.2, 0, 0, 1, 0, 0, 0, 0, 1, ]) ); column major persze attól függ az eltolásmátrix, hogy merről szorzunk a shaderben nagyon fapados, nem hatékony, könnyű elrontani és nehéz megkeresni a hibát

9 Mozgó háromszög 1. Vegyen fel a Scene-be egy, a shaderbeli uniformnak ennek megfelelő tulajdonságot this.modelPosition = new Vec2(); this.modelMatrix = new Mat4(); A Scenepupdate-ben változtassa a fenti tulajdonságot this.modelPosition.x += 0.05; amatőr this.step = new Vec2(0.05, 0); this.modelPosition.add(this.step); JS módi this.modelMatrix.translate( this.step); mátrixos

10 Mozgó háromszög 2. A Scenepupdate-ben töltse fel a uniformba
mint eddig, de a this.modelPosition.storage vagy this.modelMatrix.storage legyen a Float32Array tömb eredmény: mozgó háromszög sebesség: képfrissítési frekvenciától függ

11 Feladat: simán mozgó háromszög
eltelt idő Newton var timeAtThisFrame = new Date().getTime(); var dt = (timeAtThisFrame - this.timeAtLastFrame) / ; this.timeAtLastFrame = timeAtThisFrame; this.modelPosition.addScaled(dt, this.step); this.modelPosition.add(this.step.times(dt)); ez új példányt ad vissza, hogy a step ne változzon this.modelMatrix.translate(this.step.times(dt));

12 Eseménykezelés a Scenepupdate-ben csak akkor mozgasson, ha a gomb épp le van nyomva használja a keysPressed tömböt kezeljen több gombot, több mozgásirányt

13 További feladatok háromszög elrejtése/mutatása gombnyomásra
háromszög színének változtatása gombnyomással háromszög mozgatása egérrel eseményfigyelők az App-ban regisztrálva vannak event.clientX és event.clientY a kattintás koordinátái pixelekben

14 Textúrázott háromszög
képpont-árnyalóba új uniform: uniform sampler2D colorTexture; szín: texture2D(colorTexture, tex); Texture2D objektum létrehozása a Scene konstruktorban Scenepupdate-ben hozzárendelés a colorTexture uniform változóhoz Texture:commit

15 Nem működik 

16 zárjuk be a Chrome-ot az újraindítás előtt
Megoldás webszerverre rakni körülményes lenne itt és most debuggolni lokálisan szeretnénk allow file access Chrome indítása parancssori kapcsolóval --allow_file_access_from_files érdemes rá gyártani egy shortcutot Windowsban zárjuk be a Chrome-ot az újraindítás előtt

17 Enable alpha blending gl.enable(gl.BLEND); gl.blendFunc( gl.SRC_ALPHA,
gl.ONE_MINUS_SRC_ALPHA);

18 1. HÁZI FELADAT: animált textúra
jelenítsen meg egy textúrázott téglalapot legyen a textúrában egy képsorozat a shaderben a textúrakoordináták skálázásával érje el, hogy csak az egyik képelem látszódjon aztán adjon hozzá alkalmas eltolásértéket úgy, hogy egy másik legen az eltolás egy uniform paraméter JS-ből változtassa az eltolást úgy, hogy változzon a fázis jobb eleve 2D-s eltolást átadni, mint képpontonként matekozni