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

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

Ú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

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); }

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

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);

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); }

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();

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

Á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();

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

Várt eredmény: temporal blur

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

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

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

Koszinuszos mintavétel vec3 sampleCosine(float seed, vec3 normal) { float u = random(vec3(12.9898, 78.233, 151.7182), seed); float v = random(vec3(63.7264, 10.873, 623.6736), seed); float r = sqrt(u); float angle = 6.283185307179586 * 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;