Vizualizáció és képszintézis

Az előadások a következő témára: "Vizualizáció és képszintézis"— Előadás másolata:

1 Vizualizáció és képszintézis
WebGL path tracing Szécsi László

2 Indulás ray tracer rekurzió már van tükröződés van

3 Új színtér 5 fal (3 duplasík kvadratikus felület)
anyag: diffúz színes valami bent, a padlón gömb, vagy gyűrű legyen ez is diffúz egyelőre plafon hiányzik itt fog bejönni a fény fényforrás az égbolt/környezet

4 Vertex shader jó legyen textúra mutatáshoz is
attribute vec3 vertexPosition; attribute vec2 vertexTexCoord; varying vec3 rayDir; varying vec2 tex; uniform mat4 rayDirMatrix; void main(void) { rayDir = (vec4(vertexPosition, 1) * rayDirMatrix).xyz; tex = vertexTexCoord; gl_Position = vec4(vertexPosition, 1); }

5 “Show texture” fragment shader
precision highp float; varying vec2 tex; uniform sampler2D texture; void main(void) { gl_FragColor = texture2D(texture, tex); }

6 Index.html, Scene-be új shader használata
this.fsShow = new Shader(gl, gl.FRAGMENT_SHADER, "show_fs.essl"); this.showProgram = new Program(gl, this.vsQuad, this.fsShow);

7 Render-to-texture erőforrások
this.frameBuffers = [gl.createFramebuffer(), gl.createFramebuffer()]; this.rtts = [gl.createTexture(), gl.createTexture()]; for(var i=0; i<2; i++) { gl.bindTexture(gl.TEXTURE_2D, this.rtts[i]); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, canvas.width, canvas.height, 0, gl.RGB, gl.UNSIGNED_BYTE, null); gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffers[i]); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.rtts[i], 0); gl.bindFramebuffer(gl.FRAMEBUFFER, null); }

8 Render-to-texture gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffers[0]); this.program.commit(); this.quadGeometry.draw(); gl.bindFramebuffer(gl.FRAMEBUFFER, null); this.showProgram.showTexture.set(this.rtts[0]); this.showProgram.commit();

9 Várt eredmény: minden a régi

10 Átlagolás, ping pong gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffers[0]); this.program.prevImage.set(this.rtts[1]); this.program.commit(); this.quadGeometry.draw(); gl.bindFramebuffer(gl.FRAMEBUFFER, null); this.showProgram.showTexture.set(this.rtts[0]); this.showProgram.commit(); this.rtts.reverse(); this.frameBuffers.reverse();

11 Átlagolás, ping pong gl_FragColor = outColor * texture2D(prevImage, tex) * 0.9;

12 Várt eredmény: temporal blur

13 Profibb átlagolás lehet a súlyozás nem fix hanem egyre csökkenő
uniformban átadható az eddigi frameek száma hogy mindig az eddigi összes frame átlagát kapjuk ha mozdul a kamera, kezdjük újra

14 Ray tracing → path tracing
Ha nincs találat Égboltfény visszaadása

15 Hamis random float random(vec3 scale, float seed) {
return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * seed); }

16 Koszinuszos mintavétel
vec3 sampleCosine(float seed, vec3 normal) { float u = random(vec3( , , ), seed); float v = random(vec3( , , ), seed); float r = sqrt(u); float angle = * v; // compute basis from normal vec3 sdir, tdir; if (abs(normal.x)<.5) { sdir = normalize(cross(normal, vec3(1,0,0))); } else { sdir = normalize(cross(normal, vec3(0,1,0))); } tdir = cross(normal, sdir); return r*cos(angle)*sdir + r*sin(angle)*tdir + sqrt(1.-u)*normal;