Web GL Szcsi Lszl 3 D Grafikus Rendszerek

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

Web. GLMath könyvtár letöltése • https: //github. com/szecsi/Web. GLMath • Clone or download • Web. GLMath-master átnevezése sima Web. GLMath-ra • tegyük a 000_initial project mellé • html fileban az elérési utak a filehoz relatívak

Kiindulási állapot

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): Scene#update

Ismerkedés a geometriával • A Quad. Geometry mintájára gyártson egy Triangle. Geometry 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 Scene#update-ben • a meglevő programmal mehet ez is

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

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 vertex. Position attribútum mellett a vertex. Tex. Coord attribútumot is használjuk bemenetként • új kimenet: out vec 2 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: in vec 2 tex; • a visszaadott szín két csatornája legyen a tex. xy • Változtassa a színeket a Triangle. Geometry. js-ben!

Uniform paraméter • Vegyen fel a csúcspont-árnyalóba egy uniform paramétert. Válasszon: • uniform vec 2 model. Position; // kezdőknek • uniform mat 4 model. Matrix; // 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 Mat 4: column major) nagyon nem hatékony, kön • a Scene#update-ben állítsa be afapados, uniform gl. uniform 2 fv( elrontani és nehéz megkeresni a hib értékét, pl. : gl. get. Uniform. Location( this. test. Program. gl. Program, "model. Position"), new Float 32 Array([0. 1, 0. 2]) );

Mátrixos eset gl. uniform. Matrix 4 fv( gl. get. Uniform. Location( this. test. Program. gl. Program, "model. Matrix"), false, new Float 32 Array([ 1, 0, 0, 0. 1, column major persze attól függ az eltolásmátrix, hogy merről szorzunk 0, 1, 0, 0. 2, 0, 0, 1, 0, nagyon fapados, nem hatékony, kön elrontani és nehéz megkeresni a hib 0, 0, 0, 1, ]) );

Mozgó háromszög 1. • Vegyen fel a Scene-be egy, a shaderbeli uniformnak ennek megfelelő tulajdonságot • this. model. Position = new Vec 2(); • this. model. Matrix = new Mat 4(); • A Scene#update-ben változtassa a fenti tulajdonságot amatőr this. model. Position. x += 0. 05; JS módi this. step = new Vec 2(0. 05, 0); this. model. Position. add(this. step); mátrixos this. model. Matrix. translate( this. step);

Mozgó háromszög 2. • A Scene#update-ben töltse fel a uniformba • mint eddig, de a this. model. Position. storage vagy this. model. Matrix. storage legyen a Float 32 Array tömb • eredmény: mozgó háromszög • sebesség: képfrissítési frekvenciától függ

Feladat: simán mozgó háromszög • eltelt idő const time. At. This. Frame = new Date(). get. Time(); const dt = (time. At. This. Frame - this. time. At. Last. Frame) / 1000. 0; this. time. At. Last. Frame = time. At. This. Frame; • Newton this. model. Position. add. Scaled(dt, this. step); this. model. Position. add(this. step. times(dt)); ez új példányt ad vissza, hogy a step ne változzon this. model. Matrix. translate(this. step. times(dt));

Eseménykezelés • a Scene#update-ben csak akkor mozgasson, ha a gomb épp le van nyomva • használja a keys. Pressed tömböt • kezeljen több gombot, több mozgásirányt

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. client. X és event. client. Y a kattintás koordinátái pixelekben

Textúrázott háromszög • képpont-árnyalóba • új uniform: uniform sampler 2 D color. Texture; • szín: texture(color. Texture, tex); • Texture 2 D objektum • létrehozása a Scene konstruktorban • Scene#update-ben hozzárendelés a color. Texture uniform változóhoz • Texture 2 D#commit

Nem működik

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

Enable alpha blending gl. enable(gl. BLEND); gl. blend. Func( gl. SRC_ALPHA, gl. ONE_MINUS_SRC_ALPHA);

fut 1. HÁZI FELADAT: animált textúra suhint vívóállás elesik nyilaz sétál ugrik • jelenítsen meg egy textúrázott téglalapot lépcsőn fel lépcsőn le • 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 offszetértéket úgy, hogy egy másik animációs fázis látszódjon • legyen az offszet egy uniform paraméter • JS-ből változtassa az offszetet úgy, hogy változzon a fázis • jobb eleve 2 D-s offszetet átadni, mint képpontonként matekozni • mozgassa a téglalapot úgy, hogy az animációnak megfelelően mozgó karaktert kapjon (ne