Mesh from file, OrthoCamera, PerspectiveCamera

Az előadások a következő témára: "Mesh from file, OrthoCamera, PerspectiveCamera"— Előadás másolata:

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
extra 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?
extra 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
extra 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 GameObject kiegészítés
extra 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
extra Ü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
extra Ü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