function createShader(gl, source, type) { const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { throw new Error(gl.getShaderInfoLog(shader) + source); } return shader; } function createProgram(gl, vertexShader, fragmentShader) { const program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { throw new Error(gl.getProgramInfoLog(program)); } return program; } function createProgramFromSource(gl, vertexShaderSource, fragmentShaderSource) { const vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER); const fragmentShader = createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER); return createProgram(gl, vertexShader, fragmentShader); } function createVbo(gl, array, usage) { const vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, array, usage !== undefined ? usage : gl.STATIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, null); return vbo; } function createIbo(gl, array) { const ibo = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, array, gl.STATIC_DRAW); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); return ibo; } function createVao(gl, vboObjs, ibo) { const vao = gl.createVertexArray(); gl.bindVertexArray(vao); if (ibo !== undefined) { gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo); } vboObjs.forEach((vboObj) => { gl.bindBuffer(gl.ARRAY_BUFFER, vboObj.buffer); gl.enableVertexAttribArray(vboObj.index); gl.vertexAttribPointer(vboObj.index, vboObj.size, gl.FLOAT, false, 0, 0); }); gl.bindVertexArray(null); if (ibo !== undefined) { gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); } gl.bindBuffer(gl.ARRAY_BUFFER, null); return vao; } function getUniformLocations(gl, program, keys) { const locations = {}; keys.forEach(key => { locations[key] = gl.getUniformLocation(program, key); }); return locations; } function setUniformTexture(gl, index, texture, location) { gl.activeTexture(gl.TEXTURE0 + index); gl.bindTexture(gl.TEXTURE_2D, texture); gl.uniform1i(location, index); } function setUniformCubeMapTexture(gl, index, texture, location) { gl.activeTexture(gl.TEXTURE0 + index); gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture); gl.uniform1i(location, index); } (function() { const FULL_SCREEN_VERTEX_SHADER_SOURCE = `#version 300 es out vec2 v_uv; const vec2[4] POSITIONS = vec2[]( vec2(-1.0, -1.0), vec2(1.0, -1.0), vec2(-1.0, 1.0), vec2(1.0, 1.0) ); const int[6] INDICES = int[]( 0, 1, 2, 3, 2, 1 ); void main(void) { vec2 pos = POSITIONS[INDICES[gl_VertexID]]; v_uv = pos * 0.5 + 0.5; gl_Position = vec4(pos, 0.0, 1.0); } ` const RAYMARCH_FRAGMENT_SHADER_SOURCE = `#version 300 es precision highp float; out vec4 o_color; uniform vec2 u_resolution; uniform float u_time; uniform float u_maxDistance; mat2 rotate(float r) { float c = cos(r); float s = sin(r); return mat2(c, s, -s, c); } float sdTorus(vec3 p, vec2 t) { vec2 q = vec2(length(p.xz) - t.x, p.y); return length(q) - t.y; } float sdBox(vec3 p, float b) { p = abs(p) - b; return length(max(p, 0.0)) + min(max(p.x, max(p.y, p.z)), 0.0); } float sdOctahedron(vec3 p, float s) { p = abs(p); float m = p.x + p.y + p.z - s; vec3 q; if (3.0 * p.x < m) q = p.xyz; else if (3.0 * p.y < m) q = p.yzx; else if (3.0 * p.z < m) q = p.zxy; else return m * 0.57735027; float k = clamp(0.5 * (q.z - q.y + s), 0.0, s); return length(vec3(q.x, q.y - s + k, q.z - k)); } float map(vec3 p) { p.z += u_time * 2.0; p += 5.0; p = mod(p, 10.0) - 5.0; p.xy *= rotate(u_time); p.yz *= rotate(u_time * 0.3); float bd = sdBox(p, 0.5); float od = sdOctahedron(p, 1.0); float t = u_time * 0.2; float m = mod(t, 2.0); float f = fract(m); if (m < 1.0) { return mix(bd, od, smoothstep(0.7, 1.0, f)); } else { return mix(od, bd, smoothstep(0.7, 1.0, f)); } } vec3 calcNormal(vec3 p) { float d = 0.01; return normalize(vec3( map(p + vec3(d, 0.0, 0.0)) - map(p - vec3(d, 0.0, 0.0)), map(p + vec3(0.0, d, 0.0)) - map(p - vec3(0.0, d, 0.0)), map(p + vec3(0.0, 0.0, d)) - map(p - vec3(0.0, 0.0, d)) )); } vec3 schlickFresnel(vec3 f0, float cosine) { return f0 + (1.0 - f0) * pow(1.0 - cosine, 5.0); } vec4 raymarch(vec3 ro, vec3 rd) { vec3 p = ro; float t = 0.0; for (int i = 0; i < 64; i++) { float d = map(p); t += d; if (t > u_maxDistance) { break; } p += d * rd; if (d < 0.01) { vec3 normal = calcNormal(p); vec3 reflectDir = reflect(rd, normal); float dotNR = max(0.0, dot(normal, reflectDir)); vec3 fresnel = schlickFresnel(vec3(0.04), dotNR); vec3 specular = vec3(0.4) * fresnel; vec3 lightDir = normalize(vec3(0.0, 1.0, 0.0)); float dotNL = max(0.0, dot(normal, lightDir)); vec3 diffuse = vec3(0.2, 0.8, 0.85) * smoothstep(-3.0, 1.0, dot(normal, lightDir)); return vec4(diffuse + specular, t); } } return vec4(vec3(1.0, 0.75, 0.9), u_maxDistance - 0.01); } void main(void) { vec2 st = (2.0 * gl_FragCoord.xy - u_resolution) / min(u_resolution.x, u_resolution.y); vec3 ro = vec3(1.0, 2.0, -5.0); vec3 ta = vec3(0.0); vec3 z = normalize(ta - ro); vec3 up = vec3(0.0, 1.0, 0.0); vec3 x = normalize(cross(z, up)); vec3 y = normalize(cross(x, z)); vec3 rd = normalize(x * st.x + y * st.y + z * 1.5); vec4 res = raymarch(ro, rd); o_color = vec4(res.rgb, 1.0); gl_FragDepth = res.w / u_maxDistance; } `; const COPY_FRAGMENT_SHADER_SOURCE = `#version 300 es precision highp float; in vec2 v_uv; out vec4 o_color; uniform sampler2D u_texture; void main(void) { o_color = vec4(texture(u_texture, v_uv).rgb, 1.0); } `; const BLUR_FRAGMENT_SHADER_SOURCE = `#version 300 es precision highp float; in vec2 v_uv; out vec4 o_color; uniform sampler2D u_texture; uniform bool u_horizontal; const float[5] weights = float[](0.2270270, 0.1945945, 0.1216216, 0.0540540, 0.0162162); ivec2 clampCoord(ivec2 coord, ivec2 size) { return max(min(coord, size - 1), 0); } void main(void) { ivec2 coord = ivec2(gl_FragCoord.xy); ivec2 texSize = textureSize(u_texture, 0); vec3 sum = weights[0] * texelFetch(u_texture, coord, 0).rgb; for (int i = 1; i <= 4; i++) { ivec2 offset = u_horizontal ? ivec2(i, 0) : ivec2(0, i); sum += weights[i] * texelFetch(u_texture, clampCoord(coord + offset, texSize), 0).rgb; sum += weights[i] * texelFetch(u_texture, clampCoord(coord - offset, texSize), 0).rgb; } o_color = vec4(sum, 1.0); } `; const DOF_FRAGMENT_SHADER_SOURCE = `#version 300 es precision highp float; in vec2 v_uv; out vec4 o_color; uniform sampler2D u_originalTexture; uniform sampler2D u_blurredTexture; uniform sampler2D u_depthTexture; uniform float u_maxDistance; uniform float u_focalDistance; uniform float u_focalRegion; uniform float u_nearTransition; uniform float u_farTransition; float focalDistance = 1.0; float focalRegion = 10.0; float nearTransition = 1.0; float farTransition = 10.0; void main(void) { vec3 original = texture(u_originalTexture, v_uv).rgb; vec3 blurred = texture(u_blurredTexture, v_uv).rgb; float dist = texture(u_depthTexture, v_uv).x * u_maxDistance; float nearTransStart = u_focalDistance - u_nearTransition; float nearTransEnd = u_focalDistance; float farTransStart = u_focalDistance + u_focalRegion; float farTransEnd = farTransStart + u_farTransition; vec3 c; if (dist < nearTransEnd) { c = mix(blurred, original, smoothstep(nearTransStart, nearTransEnd, dist)); } else if (dist < farTransStart) { c = original; } else { c = mix(original, blurred, smoothstep(farTransStart, farTransEnd, dist)); } o_color = vec4(c, 1.0); } `; function createTexture(gl, width, height, internalFormat, format, type, filter, wrap) { const texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture); gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, width, height, 0, format, type, null); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, wrap); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, wrap); gl.bindTexture(gl.TEXTURE_2D, null); return texture; } const createRaymarchFbObj = function(gl, width, height) { const framebuffer = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer); const colorTexture = createTexture(gl, width, height, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, gl.LINEAR, gl.CLAMP_TO_EDGE); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, colorTexture, 0); const depthTexture = createTexture(gl, width, height, gl.DEPTH_COMPONENT16, gl.DEPTH_COMPONENT, gl.UNSIGNED_SHORT, gl.NEAREST, gl.CLAMP_TO_EDGE); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, depthTexture, 0); gl.bindFramebuffer(gl.FRAMEBUFFER, null); return { framebuffer: framebuffer, colorTexture: colorTexture, depthTexture: depthTexture, width: width, height: height }; }; const createBlurFbObj = function(gl, width, height) { const framebuffer = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer); const texture = createTexture(gl, width, height, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, gl.LINEAR, gl.CLAMP_TO_EDGE); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0); gl.bindFramebuffer(gl.FRAMEBUFFER, null); return { framebuffer: framebuffer, texture: texture, width: width, height: height, }; }; const parameters = { 'reduction rate': 4, 'blur num': 1, 'max distance': 100.0, 'focal distance': 5.0, 'focal region': 5.0, 'near transition': 2.0, 'far transition': 20.0, }; const canvas = document.getElementById('canvas'); const gl = canvas.getContext('webgl2'); const raymarchProgram = createProgramFromSource(gl, FULL_SCREEN_VERTEX_SHADER_SOURCE, RAYMARCH_FRAGMENT_SHADER_SOURCE); const copyProgram = createProgramFromSource(gl, FULL_SCREEN_VERTEX_SHADER_SOURCE, COPY_FRAGMENT_SHADER_SOURCE); const blurProgram = createProgramFromSource(gl, FULL_SCREEN_VERTEX_SHADER_SOURCE, BLUR_FRAGMENT_SHADER_SOURCE); const dofProgram = createProgramFromSource(gl, FULL_SCREEN_VERTEX_SHADER_SOURCE, DOF_FRAGMENT_SHADER_SOURCE); const raymarchUniforms = getUniformLocations(gl, raymarchProgram, ['u_resolution', 'u_time', 'u_maxDistance']); const copyUniforms = getUniformLocations(gl, copyProgram, ['u_texture']); const blurUniforms = getUniformLocations(gl, blurProgram, ['u_texture', 'u_horizontal']); const dofUniforms = getUniformLocations(gl, dofProgram, ['u_originalTexture', 'u_blurredTexture', 'u_depthTexture', 'u_maxDistance', 'u_focalDistance', 'u_focalRegion', 'u_nearTransition', 'u_farTransition']); let requestId = null; const reset = function() { if (requestId !== null) { cancelAnimationFrame(requestId); requestId = null; } canvas.width = window.innerWidth; canvas.height = window.innerHeight; const reductionRate = parameters['reduction rate']; const blurWidth = Math.ceil(canvas.width / reductionRate); const blurHeight = Math.ceil(canvas.height / reductionRate); const raymarchFbObj = createRaymarchFbObj(gl, canvas.width, canvas.height); let blurFbObjR = createBlurFbObj(gl, blurWidth, blurHeight); let blurFbObjW = createBlurFbObj(gl, blurWidth, blurHeight); const swapBlurFbObj = function() { const tmp = blurFbObjR; blurFbObjR = blurFbObjW; blurFbObjW = tmp; }; const raymarch = function(elapsedTime) { gl.enable(gl.DEPTH_TEST); gl.bindFramebuffer(gl.FRAMEBUFFER, raymarchFbObj.framebuffer); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.viewport(0.0, 0.0, raymarchFbObj.width, raymarchFbObj.height); gl.useProgram(raymarchProgram); gl.uniform2f(raymarchUniforms['u_resolution'], canvas.width, canvas.height); gl.uniform1f(raymarchUniforms['u_time'], elapsedTime); gl.uniform1f(raymarchUniforms['u_maxDistance'], parameters['max distance']); gl.drawArrays(gl.TRIANGLES, 0, 6); gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.disable(gl.DEPTH_TEST); }; const applyBlur = function() { gl.viewport(0.0, 0.0, blurFbObjR.width, blurFbObjR.height); gl.bindFramebuffer(gl.FRAMEBUFFER, blurFbObjW.framebuffer); gl.useProgram(copyProgram); setUniformTexture(gl, 0, raymarchFbObj.colorTexture, copyUniforms['u_texture']); gl.drawArrays(gl.TRIANGLES, 0, 6); swapBlurFbObj(); gl.useProgram(blurProgram); const blurNum = parameters['blur num']; for (let i = 0; i < blurNum; i++) { gl.bindFramebuffer(gl.FRAMEBUFFER, blurFbObjW.framebuffer); setUniformTexture(gl, 0, blurFbObjR.texture, blurUniforms['u_texture']); gl.uniform1i(blurUniforms['u_horizontal'], true); gl.drawArrays(gl.TRIANGLES, 0, 6); swapBlurFbObj(); gl.bindFramebuffer(gl.FRAMEBUFFER, blurFbObjW.framebuffer); setUniformTexture(gl, 0, blurFbObjR.texture, blurUniforms['u_texture']); gl.uniform1i(blurUniforms['u_horizontal'], false); gl.drawArrays(gl.TRIANGLES, 0, 6); swapBlurFbObj(); } gl.bindFramebuffer(gl.FRAMEBUFFER, null); } const applyDof = function() { gl.viewport(0.0, 0.0, canvas.width, canvas.height); gl.useProgram(dofProgram); setUniformTexture(gl, 0, raymarchFbObj.colorTexture, dofUniforms['u_originalTexture']); setUniformTexture(gl, 1, blurFbObjR.texture, dofUniforms['u_blurredTexture']); setUniformTexture(gl, 2, raymarchFbObj.depthTexture, dofUniforms['u_depthTexture']); gl.uniform1f(dofUniforms['u_maxDistance'], parameters['max distance']); gl.uniform1f(dofUniforms['u_focalDistance'], parameters['focal distance']); gl.uniform1f(dofUniforms['u_focalRegion'], parameters['focal region']); gl.uniform1f(dofUniforms['u_nearTransition'], parameters['near transition']); gl.uniform1f(dofUniforms['u_farTransition'], parameters['far transition']); gl.drawArrays(gl.TRIANGLES, 0, 6); }; const startTime = performance.now(); const loop = function() { const currentTime = performance.now(); const elapsedTime = (currentTime - startTime) * 0.001; raymarch(elapsedTime); applyBlur(); applyDof(); requestId = requestAnimationFrame(loop); }; loop(); } window.addEventListener('resize', reset); reset(); }());

Raymarching with DoF