Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Glass Caustics
ID	6725258429513728
Created	2 months ago, 1728799408865
Updated	2 months ago, 1728799522158
Code	<!DOCTYPE html> <!--Thanks to Dat for the boilerplate.--> <!--// Borrowed hash and sampling from my friend Poisson (https://www.shadertoy.com/user/Poisson)--> <html> <head> <meta charset="utf-8"> <title>Glass Caustics</title> </head> <body> <canvas id='gl-canvas' width='600' height='600'></canvas> <style> body{ overflow:hidden; margin:0; } </style> <script id='geometry_vsh' type='3d'>#version 300 es precision mediump float; uniform vec2 iResolution; uniform float iTime; in vec2 vertPos; in vec3 vertColor; out vec3 pixColor; out vec2 pixTexCoord; void main(){ pixColor = vertColor; pixTexCoord = vertPos * 0.5 + 0.5; gl_Position = vec4(vertPos, 1.0, 1); } </script> <script id='geometry_fsh' type='3d'>#version 300 es precision mediump float; precision mediump isampler2D; precision mediump int; uniform vec2 iResolution; uniform float iTime; uniform isampler2D iChannel0; in vec2 pixTexCoord; const vec3 lDir = normalize(vec3(10, -10, 10)); struct material { vec3 col; float emission; float smoothness; float specularProb; float refractIndex; float opacity; }; // Poisson's hash (https://www.shadertoy.com/view/dssXRj) float seed; vec2 hash22(vec2 p){ vec3 p3 = fract(vec3(p.xyx) * vec3(0.1031, 0.1030, 0.0973)); p3 += dot(p3, p3.yzx + 33.33); return fract((p3.xx + p3.yz) * p3.zy); } float hash1() { return fract(sin(seed += 0.1) * 4568.7564); } vec2 hash2() { return vec2(hash1(), hash1()); } vec3 hash3() { return vec3(hash1(), hash1(), hash1()); } vec2 randomDir2D() { vec2 curr; while(true) { curr = hash2() * 2.0 - 1.0; if(length(curr) < 1.0){ return curr; } } } vec3 randomDir() { vec3 d; while(true) { d = hash3() * 2.0 - 1.0; if(length(d) <= 1.0) return normalize(d); } } vec3 rotate2D(vec3 p, vec2 t){ float stx = sin(t.x); float ctx = cos(t.x); float sty = sin(t.y); float cty = cos(t.y); mat3 xRotation; xRotation[0] = vec3(1, 0, 0); xRotation[1] = vec3(0, ctx, -stx); xRotation[2] = vec3(0, stx, ctx); mat3 yRotation; yRotation[0] = vec3(cty, 0, -sty); yRotation[1] = vec3(0, 1, 0); yRotation[2] = vec3(sty, 0, cty); return pxRotationyRotation; } void raytraceSphere(vec3 o, vec3 d, inout bool h, vec4 s, inout float t, inout vec3 n, in material inMat, inout material outMat) { vec3 oc = o - s.xyz; float a = dot(d, d); float b = 2.0 * dot(oc, d); float c = dot(oc, oc) - s.w * s.w; float disc = b * b - 4.0 * a * c; float currT = (-b - sqrt(disc))/(2.0 * a); if (disc > 0.0 && currT >= 0.0 && currT < t) { t = currT; h = true; n = normalize((o + d * t) - s.xyz); outMat = inMat; } } float raytraceScene(vec3 o, vec3 d, out bool h, out vec3 n, out material mat) { h = false; n = vec3(0); float t = 1000000.0; //raytraceSphere(o, d, h, vec4(1, -0.25, 0, 0.25), t, n, material(vec3(0, 0, 1), 0.5, 1.0, 1.0, 1.52, 10.0), mat); //raytraceSphere(o, d, h, vec4(0, 0, 0, 0.5), t, n, material(vec3(0, 1, 0), 0.5, 0.6, 1.0, 1.52, 10.0), mat); //raytraceSphere(o, d, h, vec4(-1, -0.175, 0, 0.325), t, n, material(vec3(1, 0, 0), 0.5, 1.0, 1.0, 1.52, 10.0), mat); raytraceSphere(o, d, h, vec4(0, -10000.25, 0, 10000), t, n, material(vec3(1), 0.5, 1.0, 0.1, 0.0, 0.0), mat); for (int i = -2; i <= 2; ++i) { raytraceSphere(o, d, h, vec4(-2, 0, i, 0.25), t, n, material(vec3(0.2, float(i + 2) / 4.0, 0.5), 0.5, 0.0, 0.0, 0.0, 0.0), mat); raytraceSphere(o, d, h, vec4(-1, 0, i, 0.25), t, n, material(vec3(0.4, float(i + 2) / 4.0, 0.5), 0.5, 0.8, 0.05, 0.0, 0.0), mat); raytraceSphere(o, d, h, vec4(0, 0, i, 0.25), t, n, material(vec3(0.6, float(i + 2) / 4.0, 0.5), 0.5, 1.0, 0.02, 0.0, 0.0), mat); raytraceSphere(o, d, h, vec4(1, 0, i, 0.25), t, n, material(vec3(0.8, float(i + 2) / 4.0, 0.5), 0.5, 1.0, 0.5, 0.0, 0.0), mat); raytraceSphere(o, d, h, vec4(2, 0, i, 0.25), t, n, material(vec3(1, float(i + 2) / 4.0, 0.5), 0.5, 1.0, 1.0, 1.52, 10.0), mat); } return t; } // Raytracing in One Weekend (https://raytracing.github.io/books/RayTracingInOneWeekend.html) float schlick(float cosTheta, float refractRatio) { float r = (1.0 - refractRatio) / (1.0 + refractRatio); r = r * r; return r + (1.0 - r) * pow((1.0 - cosTheta), 5.0); } vec3 pathtrace(vec3 o, vec3 d) { vec3 col = vec3(1); float t; vec3 n; material mat; bool h = false; for (int i = 0; i < 12; ++i) { h = false; t = raytraceScene(o, d, h, n, mat); if (!h) { col = mix(vec3(0.7, 0.8, 1), vec3(1, 0.9, 0.8) 250.0, pow(clamp(dot(d, -lDir), 0.0, 1.0), 500.0)); break; } else { float isSpecular = mat.specularProb > hash1() ? 1.0 : 0.0; vec3 diffuseD = normalize(randomDir() + n); vec3 reflectD = normalize(reflect(d, n)); float cosTheta = min(dot(-d, n), 1.0); float sinTheta = sqrt(1.0 - cosTheta * cosTheta); float refractRatio = dot(d, n) >= 0.0 ? mat.refractIndex : 1.0 / mat.refractIndex; o = o + d * t + n * sign(dot(d, n)) * 0.01; if (mat.refractIndex > 1.0 && schlick(cosTheta, refractRatio) <= hash1() && refractRatio * sinTheta <= 1.0) { float inside = sign(dot(d, n)); d = mix(randomDir(), refract(d, -n * inside, refractRatio), mat.smoothness * isSpecular); if (inside < 0.0) { col = mat.col mat.emission; } } else { d = mix(diffuseD, reflectD, mat.smoothness * isSpecular); col = mix(mat.col mat.emission, vec3(1), isSpecular); } } if (mat.emission > 1.0) break; } return col; } out ivec4 fragColor; void main(){ seed = iTime + dot(sin(gl_FragCoord.xy), vec2(443.712, 983.234)); seed += hash1() * 434.251; vec2 uv = ((gl_FragCoord.xy + hash2() - 0.5) - 0.5 * iResolution.xy) / iResolution.y; vec3 o = rotate2D(vec3(0, 0, -12), vec2(radians(20.0), radians(40.0))); vec3 d = rotate2D(normalize(vec3(uv, 1.75)), vec2(radians(20.0), radians(40.0))); vec3 focalPoint = o + d * 12.0; o += rotate2D(vec3(randomDir2D(), 0), vec2(radians(20.0), radians(40.0))) * 0.12; vec3 shiftedDir = normalize(focalPoint - o); vec3 col = pathtrace(o, shiftedDir); ivec4 sam = texture(iChannel0, pixTexCoord); vec4 data = vec4(vec3(sam.rgb) / 999.0, sam.a); data += vec4(col, 1); fragColor = ivec4(vec4(data.xyz * 999.0, data.w)); } </script> <script id='pprocessing_vsh' type='3d'>#version 300 es precision mediump float; uniform vec2 iResolution; uniform float iTime; in vec2 vertPos; out vec2 pixTexCoord; void main(){ pixTexCoord = vertPos * 0.5 + 0.5; gl_Position = vec4(vertPos, 1, 1); } </script> <script id='pprocessing_fsh' type='3d'>#version 300 es precision mediump float; precision mediump isampler2D; precision mediump int; uniform vec2 iResolution; uniform float iTime; uniform isampler2D iChannel0; in vec2 pixTexCoord; vec3 ACES(vec3 x) { float a = 2.51; float b = 0.03; float c = 2.1; float d = 0.7; float e = 0.12; return (x * (a * x + b)) / (x * (c * x + d) + e); } void mainImage(out vec4 fragColor, vec2 fragCoord) { ivec4 sam = texture(iChannel0, pixTexCoord); vec4 col = vec4(vec3(sam.rgb) / 999.0, sam.a); col.rgb /= col.a; col.rgb = ACES(col.rgb); fragColor = vec4(pow(col.rgb, vec3(1.0 / 2.2)), 1); } out vec4 fragColor; void main(){ mainImage(fragColor, gl_FragCoord.xy); } </script> <script type='application/javascript'> function main(){ const glCanvas = document.getElementById('gl-canvas'); const gl = glCanvas.getContext('webgl2', {preserveDrawingBuffer: true}); if (!gl) { alert('No WebGL'); return; } const width = window.innerWidth; const height = window.innerHeight; gl.viewport(0, 0, width,height); function createProgram(vsh,fsh) { let vshText=document.getElementById(vsh).text; let fshText=document.getElementById(fsh).text; vsh=gl.createShader(gl.VERTEX_SHADER); fsh=gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(vsh,vshText); gl.shaderSource(fsh,fshText); gl.compileShader(vsh); gl.compileShader(fsh); if (!gl.getShaderParameter(vsh,gl.COMPILE_STATUS)) console.error(vshText + " " + gl.getShaderInfoLog(vsh)); if (!gl.getShaderParameter(fsh,gl.COMPILE_STATUS)) console.error(fshText + " " + gl.getShaderInfoLog(fsh)); let p = gl.createProgram(); gl.attachShader(p, vsh); gl.attachShader(p, fsh); gl.linkProgram(p); return p } const geometryProgram = createProgram('geometry_vsh', 'geometry_fsh'); const pprocessingProgram = createProgram('pprocessing_vsh', 'pprocessing_fsh'); let screenVerts = [ -1, -1, 1, -1, 1, 1, -1, 1 ]; let screenIndex = [ 0, 1, 2, 0, 2, 3 ]; let verts = [ -1, -1, 0, 1, 0, 1, -1, 0, 0, 1, 1, 1, 1, 0, 0, -1, 1, 0.8, 0.8, 0 ]; let index=[0, 1, 2, 2, 3, 0]; let vertBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW); let indexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(index),gl.STATIC_DRAW); let screenVertBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, screenVertBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(screenVerts), gl.STATIC_DRAW); let screenIndexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, screenIndexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(screenIndex), gl.STATIC_DRAW); let posAttribLoc = gl.getAttribLocation(geometryProgram,'vertPos'); let colAttribLoc = gl.getAttribLocation(geometryProgram, 'vertColor'); gl.vertexAttribPointer(posAttribLoc, 2, gl.FLOAT, gl.FALSE, 20, 0); gl.vertexAttribPointer(colAttribLoc, 3, gl.FLOAT, gl.FALSE, 20, 8); gl.enableVertexAttribArray(posAttribLoc); gl.enableVertexAttribArray(colAttribLoc); function createNullTexture() { let t = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, t); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32I, width, height, 0, gl.RGBA_INTEGER, gl.INT, null); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 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); return t; } function createFramebufferTexture(target){ let f = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, f); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, target, 0); return f; } let n1=createNullTexture(); let f1=createFramebufferTexture(n1); let n2=createNullTexture(); let f2=createFramebufferTexture(n2); gl.bindBuffer(gl.ARRAY_BUFFER, vertBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); gl.vertexAttribPointer(posAttribLoc, 2, gl.FLOAT, gl.FALSE, 20, 0); gl.vertexAttribPointer(colAttribLoc, 3, gl.FLOAT, gl.FALSE, 20, 8); let resL_0 = gl.getUniformLocation(geometryProgram, 'iResolution'), timeL_0 = gl.getUniformLocation(geometryProgram, 'iTime'); let resL_1 = gl.getUniformLocation(pprocessingProgram, 'iResolution'), timeL_1 = gl.getUniformLocation(pprocessingProgram, 'iTime'); let START = performance.now(); function render() { gl.bindFramebuffer(gl.FRAMEBUFFER, f2); gl.bindTexture(gl.TEXTURE_2D, n1); gl.useProgram(geometryProgram); gl.uniform1f(timeL_0, (performance.now() - START) * 0.001); gl.uniform2f(resL_0, width, height); gl.drawElements(gl.TRIANGLES, index.length, gl.UNSIGNED_SHORT, 0); gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.bindTexture(gl.TEXTURE_2D, n2); gl.useProgram(pprocessingProgram); gl.uniform1f(timeL_1, (performance.now() - START) * 0.001); gl.uniform2f(resL_1, width, height); gl.drawElements(gl.TRIANGLES, index.length, gl.UNSIGNED_SHORT, 0); const t = f1; f1 = f2; f2 = t; const _t=n1; n1 = n2; n2 = _t; parent.raf = requestAnimationFrame(render); } if (parent.raf) { cancelAnimationFrame(parent.raf); } render(); } main(); </script> <!--For restart button--> <script></script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNv945L5Cww
Votes	1
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Fifth
Author Name	FifthStateOfMatter
Author ID	kaid_1065213098995021368328526
Author Profile Access	PUBLIC

Archive Data

Added	2 months ago, 1728799770502
Updated	2 months ago, 1728799770502
Source Deleted	unknown