Vizualizáció és képszintézis WebGL keret sugárkövetéshez Szécsi László

Kiindulási állapot

Bemelegítés VS-ben skálázzuk le a quadot más háttérszín más quad szín csináljuk vissza teljes képernyősre

Következő cél

Textúra-koordináták átadása, megjelenítése hamis színezésként új bemener (ESSL-ben: attribute kulcsszó) a VS-ben: vertexTexCoord (VB-ben már bent van, bekötve be van) új kimenet (ESSL-ben: varying kulcsszó) a VS-ben: tex új bemenet (ESSL-ben: varying kulcsszó) a FS-ben: tex FS használja a tex-et a kimeneti színhez kész színátmenetes ablak

Következő cél: perspektív kamera egérrel lehessen forgatni a kamerát VS-ben számítsuk a nézeti irányt (ehhez adjuk át a kamerából számított megfelelő transzformációs mátrixot) FS-ben jelenítsük meg a számított nézeti irányt, mint színt

Vertex Shader új uniform: rayDirMatrix új varying: rayDir rayDir számítása a képernyőkoordinátás pozícióból

Fragment Shader varying rayDir normalizáljuk színként kirajzoljuk

Honnan jön a rayDirMatrix? PerspectiveCamera.js index.html-be bevenni Scene konstruktorban példányosítani Scene updateben camera move program commit előtt rayDirMatrixot beállítani egéresemények átadása a kamerának this.program.rayDirMatrix.set(this.camera.rayDirMatrix); // csak akkor működik ha van ilyen uniform a shaderben

PrespectiveCamera.js var 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;

PrespectiveCamera.js this.speed = 0.5; this.isDragging = false; this.mouseDelta = new Vec2(0.0, 0.0);

PrespectiveCamera.js this.viewMatrix = new Mat4(); this.updateViewMatrix(); this.projMatrix = new Mat4(); this.updateProjMatrix(); this.rayDirMatrix = new Mat4(); this.updateRayDirMatrix(); };

PrespectiveCamera.js 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(); };

PrespectiveCamera.js 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); };

PrespectiveCamera.js PerspectiveCamera.prototype.updateRayDirMatrix = function(){ // feladat megírni };

PrespectiveCamera.js PerspectiveCamera.worldUp = new Vec3(0, 1, 0);

PrespectiveCamera.js 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);

PrespectiveCamera.js 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); }

PrespectiveCamera.js 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);

PrespectiveCamera.js this.updateViewMatrix(); this.updateRayDirMatrix(); };

PrespectiveCamera.js – ezeket hívjuk meg 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;

PrespectiveCamera.js – ezeket hívjuk meg PerspectiveCamera.prototype.setAspectRatio = function(ar) { this.aspect = ar; this.updateProjMatrix(); };

Egér kattintás után egérmozgatás forgat

Ray casting egy objektumra camerapozíció átadása FS-nek uniformban vec4 e (ray origin) vec4 d (ray dir) metszés kvadratikus felülettel ha van metszés, valamilyen szín visszaadása kvadratikus normálvektora?

ESSL metszésszámító float intersectQuadric( mat4 A, vec4 e, vec4 d) { float a = dot( d, A * d); float b = dot( e, A * d) + dot(d, A * e ); float c = dot( e, A * e ); float discr = b * b - 4.0 * a * c; if ( discr < 0.0 ) return -1.0; float sqrt_discr = sqrt( discr ); float t1 = (-b + sqrt_discr)/2.0/a; float t2 = (-b - sqrt_discr)/2.0/a; float t = (t1<t2)?t1:t2; if(t < 0.0) t = (t1<t2)?t2:t1; return t; }

Clipped quadric