Mesh from file, OrthoCamera, PerspectiveCamera Szécsi László 3D Grafikus Rendszerek 3. labor
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(); };
OrthoCamera.js OrthoCamera.prototype.updateViewProjMatrix = function(){ this.viewprojmatrix.set(). scale(0.5). scale(this.windowsize). rotate(this.rotation). translate(this.position). invert(); };
OrthoCamera.js aspect ratio OrthoCamera.prototype.setAspectRatio = function(ar) { this.windowsize.x = this.windowsize.y * ar; this.updateviewprojmatrix(); };
Színtérmenedzsment vegyen fel a színtérbe egy kamerát resize esemény -> setaspectratio
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)
Index buffer az indexek száma nem fix a konstruktorban el kell tárolni tulajdonságként rajzoláskor fel lehet használni
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(); };
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]) ); } }
MultiMesh.js rajzolás MultiMesh.prototype.draw = function(gl){ for (let i = 0; i < this.meshes.length; i++) { this.meshes[i].draw(gl); } };
Skálázni, forgatni kell
3D kamera PerspectiveCamera object view, proj mátrixok beállítása egérrel és WASD billentyűkkel mozgatható
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 = 1000.0;
Tagváltozók mozgatáshoz this.speed = 0.5; this.isdragging = false; this.mousedelta = new Vec2(0.0, 0.0);
Mátrixok this.viewmatrix = new Mat4(); this.projmatrix = new Mat4(); this.raydirmatrix = new Mat4(); this.viewprojmatrix = new Mat4(); this.updateviewmatrix(); this.updateprojmatrix(); this.updateraydirmatrix(); };
Világ felfelé iránya PerspectiveCamera.worldUp = new Vec3(0, 1, 0);
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); };
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); };
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 };
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);
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);
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); }
Mátrixok frissítése this.updateviewmatrix(); this.updateraydirmatrix(); };
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; };
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(); };
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
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
Fragment shader a 3D trafó ellenőrzéséhez rajzoljuk ki a worldnormal-t színként
Várt eredmény
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
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
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
Ü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
Ü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
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