Mesh from file, OrthoCamera, PerspectiveCamera. Szécsi László 3D Grafikus Rendszerek 3. labor

Átírás

1 Mesh from file, OrthoCamera, PerspectiveCamera Szécsi László 3D Grafikus Rendszerek 3. labor

2 OrthoCamera.js const OrthoCamera = function() { this.position = new Vec2(0.5, 0); this.rotation = 0; this.windowsize = new Vec2(2, 2); this.viewprojmatrix = new Mat4(); this.updateviewprojmatrix(); };

3 OrthoCamera.js OrthoCamera.prototype.updateViewProjMatrix = function(){ this.viewprojmatrix.set(). scale(0.5). scale(this.windowsize). rotate(this.rotation). translate(this.position). invert(); };

4 OrthoCamera.js aspect ratio OrthoCamera.prototype.setAspectRatio = function(ar) { this.windowsize.x = this.windowsize.y * ar; this.updateviewprojmatrix(); };

5 Színtérmenedzsment vegyen fel a színtérbe egy kamerát resize esemény -> setaspectratio

6 Geometria JSON-ból TriangleMeshGeometry.js a QuadGeometry.js mintájára a konstruktor kapjon egy mesh-leíró objektumot (ahogy az a JSON fileból jön) azért nem a filenevet adjuk át, mert egy fileban több mesh lehet vertices tulajdonság: 3n db koordináta folyotonos tömbben normals tulajdonság: 3n db érték folyotonos tömbben texturecoords tulajdonság: 2n db értéket tartalmazó folyotonos tömbök tömbje (de tipikusan csak egy textúrakoordináta-készlet van) faces tulajdonság: 3 indexet tartalmazó tömböcskék tömbje egy folytonos tömböt lehet belőle gyártani így: [].concat.apply([], jsonobject.faces)

7 Index buffer az indexek száma nem fix a konstruktorban el kell tárolni tulajdonságként rajzoláskor fel lehet használni

8 MultiMesh.js - betöltés const MultiMesh = function( gl, jsonmodelfileurl, materials) { this.meshes = []; const request = new XMLHttpRequest(); request.open("get", jsonmodelfileurl); const themultimesh = this; request.onreadystatechange = function () { // next slide }; request.send(); };

9 MultiMesh.js betöltés után if (request.readystate == 4) { const meshesjson = JSON.parse(request.responseText).meshes; for (let i = 0; i < meshesjson.length; i++) { themultimesh.meshes.push( new Mesh( new IndexedTrianglesGeometry( gl, meshesjson[i]), materials[i]) ); } }

10 MultiMesh.js rajzolás MultiMesh.prototype.draw = function(gl){ for (let i = 0; i < this.meshes.length; i++) { this.meshes[i].draw(gl); } };

11 Skálázni, forgatni kell

12 3D kamera PerspectiveCamera object view, proj mátrixok beállítása egérrel és WASD billentyűkkel mozgatható

13 Kamera paraméterek const PerspectiveCamera = function() { this.position = new Vec3(0.0, 0.0, 0.0); this.ahead = new Vec3(0.0, 0.0, -1.0); this.right = new Vec3(1.0, 0.0, 0.0); this.up = new Vec3(0.0, 1.0, 0.0); this.yaw = 0.0; this.pitch = 0.0; this.fov = 1.0; this.aspect = 1.0; this.nearplane = 0.1; this.farplane = ;

14 Tagváltozók mozgatáshoz this.speed = 0.5; this.isdragging = false; this.mousedelta = new Vec2(0.0, 0.0);

15 Mátrixok this.viewmatrix = new Mat4(); this.projmatrix = new Mat4(); this.raydirmatrix = new Mat4(); this.viewprojmatrix = new Mat4(); this.updateviewmatrix(); this.updateprojmatrix(); this.updateraydirmatrix(); };

16 Világ felfelé iránya PerspectiveCamera.worldUp = new Vec3(0, 1, 0);

17 View mátrix számítása PerspectiveCamera.prototype.updateViewMatrix = function(){ this.viewmatrix.set( this.right.x, this.right.y, this.right.z, 0, this.up.x, this.up.y, this.up.z, 0, -this.ahead.x, -this.ahead.y, -this.ahead.z, 0, 0, 0, 0, 1).translate(this.position).invert(); this.viewprojmatrix.set(this.viewmatrix).mul(this.projmatrix); };

18 Proj mátrix számítása PerspectiveCamera.prototype.updateProjMatrix = function() { var yscale = 1.0 / Math.tan(this.fov * 0.5); var xscale = yscale / this.aspect; var f = this.farplane; var n = this.nearplane; this.projmatrix.set( xscale, 0, 0, 0, 0, yscale, 0, 0, 0, 0, (n+f)/(n-f), -1, 0, 0, 2*n*f/(n-f), 0); this.viewprojmatrix.set(this.viewmatrix). mul(this.projmatrix); };

19 RayDir mátrix számítása PerspectiveCamera.prototype.updateRayDirMatrix = function(){ // önállóan megoldandó feladat // de ráér // az env mapping háttérhez kell csak };

20 Mozgatás: yaw, pitch drag PerspectiveCamera.prototype.move = function(dt, keyspressed) { if(this.isdragging){ this.yaw -= this.mousedelta.x * 0.002; this.pitch -= this.mousedelta.y * 0.002; if(this.pitch > 3.14/2.0) { this.pitch = 3.14/2.0; } if(this.pitch < -3.14/2.0) { this.pitch = -3.14/2.0; } this.mousedelta = new Vec2(0.0, 0.0);

21 Mozgatás: főirányok a szögekből } this.ahead = new Vec3( -Math.sin(this.yaw)*Math.cos(this.pitch), Math.sin(this.pitch), -Math.cos(this.yaw)*Math.cos(this.pitch) ); this.right.setvectorproduct( this.ahead, PerspectiveCamera.worldUp ); this.right.normalize(); this.up.setvectorproduct(this.right, this.ahead);

22 Mozgatás gombokkal if(keyspressed.w) { this.position.addscaled(this.speed * dt, this.ahead); } if(keyspressed.s) { this.position.addscaled(-this.speed * dt, this.ahead); } if(keyspressed.d) { this.position.addscaled(this.speed * dt, this.right); } if(keyspressed.a) { this.position.addscaled(-this.speed * dt, this.right); } if(keyspressed.e) { this.position.addscaled(this.speed * dt, PerspectiveCamera.worldUp); } if(keyspressed.q) { this.position.addscaled(-this.speed * dt, PerspectiveCamera.worldUp); }

23 Mátrixok frissítése this.updateviewmatrix(); this.updateraydirmatrix(); };

24 Eseménykezelők feladat: meg is kell hívni őket! PerspectiveCamera.prototype.mouseDown = function() { this.isdragging = true; this.mousedelta.set(); }; PerspectiveCamera.prototype.mouseMove = function(event) { this.mousedelta.x += event.movementx; this.mousedelta.y += event.movementy; event.preventdefault(); }; PerspectiveCamera.prototype.mouseUp = function() { this.isdragging = false; };

25 Képméretarány állítása feladat: ezt is meg kell hívni! // ar: canvas.clientwidth / canvas.clientheight PerspectiveCamera.prototype.setAspectRatio = function(ar) { this.aspect = ar; this.updateprojmatrix(); };

26 Rakjuk össze! ortho kamera lecserélése mélységteszt bekapcsolása eseményfigyelők bekötése GameObject jó lehet még de figyeljünk rá, hogy a modelviewprojmatrix beállítása rajzoláshoz a PerspectiveCamera tulajdonságai alapján történjen forgatás még csak 2D

27 3D transzformáló vertex shader kell neki a modelviewprojmatrix továbbra is de kell egy modelmatrix uniform is nincs benne a kameratrafó modellből világkoordintákba transzformál új varying kimenet: worldpos és még kell egy modelmatrixinverse uniform a normálvektorok transzformálásához ezt most bal oldalról szorozzuk, mert az inverz transzponálttal kell a normálvektort transzformálni új varying kimenet: worldnormal

28 Fragment shader a 3D trafó ellenőrzéséhez rajzoljuk ki a worldnormal-t színként

29 Várt eredmény

30 Animáció játékobjektumok különböző move metódusokkal leszármaztatás? lehetséges, de elég merev mozgatási logika függvényben, és adjuk ezt a függvényt értékül a megfelelő játékobjektumok move tulajdonságának! paraméterek: t - abszolút idő képletanimációhoz dt - időlépcső fizikai animációhoz keyspressed - vezérléshez gameobjects - interakcióhoz

31 Fizikai animáció move metódus mellett kapjon még az objektum lendületet (vagy sebességet) perdületet (vagy szögsebességet) tömeget, tehetetlenségi nyomatékot akár lehet is egy segédfüggvény ami ezeket mind rárakja egy objektumra gömbnyomásra erő, forgatónyomaték erő modellezési koordinátákban: transzformáljuk világba move-ban Euler integrálás "légellenállás" lendület, perdület exponenciálisan csökken az idővel

32 Csatolt objektum keringjen a mozgatott körül move: sima körmozgás origó körül GameObject kiegészítés updatemodelmatrix a szülőét is frissítsük a teljes modellmátrix a saját pozíció/orientációból jövő és a szülőé szorzata előbb transzformálunk a szülő terébe, majd onnan tovább

33 Ütközés-detektálás repkedő aszteroidák ütközésdetektálás bennfoglaló körökkel honnan tudjuk, hogy mi a másik objektum? duck typing pl. ha van hitbyasteriod metódusa (pl. az űrhajónak), akkor ő reagálni tud aszteroidára a metódus aztán ellenőrzi, összeérnek-e valami hatást érvényesít az objektumon ugyanígy hitbyship is lehet (pl. az aszteroidának), abban meg az aszteroidára kifejtett hatást kezelhetjük

34 Ütközés-válasz ha ütközünk, történjen valami eltűnik az aszteroida move visszatérés true/false, tömbből kirúgjuk ha false visszapattanunk róla ütközésválasz: sebességek ütközési normállal párhuzamos részének megfordítása * restitúciós tényező robbanás animációs fázis követése a GameObject-ben (vagy leszármazottban) közös uniform a materialban rajzolás előtt beállítani a GameObject.prototype.draw-ban

35 3. HÁZI FELADAT: biliárd ütközőgeometria: egy gömb per objektum, plusz 4 fal render-geometria betöltött gömb modell, textúrázott megjelenítéssel lehessen lőni space lenyomva + valamennyi idő eltelt a múlkori lövés óta: új golyó, kamera-előre-irányú kezdősebességgel orientáció: 3D forgatás mátrixszal, mindig csúszás nélkül gördül (sebességből minden frameben számolható a szögsebesség) ütközésdetektálás (2D-ben elég) minden gömböt minden gömbbel, plusz keret ütközésválasz (2D-ben elég) restitúciós tényező: 1.7 energiaveszteség: 30% per másodperc