Viewing Program

Program Data

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

Title	Spin-off of "fiffy"
ID	5253190464356352
Created	2 years ago, 1644847176012
Updated	3 months ago, 1728419124381
Code	<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Spin-off of "fiffy"</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=vertPos0.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; //Paste from Shadertoy between here{ // Borrowed hash and sampling from Poisson (https://www.shadertoy.com/user/Poisson) const vec3 lDir = normalize(vec3(0, -5, -10)); const vec2 camDir = vec2(0, 0); struct material { vec3 col; float emission; float smoothness; float specular; }; 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; } float box(vec3 p, vec3 s) { vec3 q = abs(p) - s; return length(max(q, 0.0)) + min(max(q.x, max(q.y, q.z)), 0.0); } float boxFrame(vec3 p, vec3 b, float e) { p = abs(p) - b; vec3 q = abs(p + e) - e; return min(min( length(max(vec3(p.x, q.y, q.z), 0.0)) + min(max(p.x, max(q.y, q.z)), 0.0), length(max(vec3(q.x, p.y, q.z), 0.0)) + min(max(q.x, max(p.y, q.z)), 0.0)), length(max(vec3(q.x, q.y, p.z), 0.0)) + min(max(q.x, max(q.y, p.z)), 0.0) ); } float sphere(vec3 p, float r) { return length(p) - r; } float scene(vec3 p, out material mat) { float ground = box(p - vec3(0, -3.25, 0), vec3(1000, 1, 1000)); float b1 = boxFrame(rotate2D(p - vec3(0, 0, 5), vec2(0.34, 0.43)), vec3(1), 0.1); float b2 = boxFrame(rotate2D(p - vec3(0, 0, 5), vec2(0.13, 0.73)) - vec3(1), vec3(1), 0.1); float b3 = boxFrame(rotate2D(p - vec3(0, 0, 5), vec2(0.24, 0.92)) + vec3(1), vec3(1), 0.1); float closest = min(ground, min(b1, min(b2, b3))); if (closest == ground) { mat = material(vec3(0), 0.5, 0.7, 0.05); } else if (closest == b1) { mat = material(vec3(1, 1, 0), 0.5, 1.0, 0.06); } else if (closest == b2) { mat = material(vec3(0, 1, 1), 2.0, 0.0, 0.0); } else { mat = material(vec3(1, 0, 0), 2.0, 0.0, 0.0); } return closest; } float raymarch(vec3 o, vec3 d, inout bool h, inout material mat) { float t = 0.0; for (int i = 0; i < 100 && t <= 100.0 && !h; ++i) { float s = scene(o + d * t, mat); t += s; h = s <= 0.003 * t && t >= 0.0; } return t; } vec3 getNormal(vec3 p) { vec2 e = vec2(0, 0.001); material mat; return normalize(vec3( scene(p + e.yxx, mat) - scene(p - e.yxx, mat), scene(p + e.xyx, mat) - scene(p - e.xyx, mat), scene(p + e.xxy, mat) - scene(p - e.xxy, mat) )); } vec3 pathtrace(vec3 o, vec3 d) { vec3 col = vec3(1); float initT = 0.0; vec3 initD = d; for (int i = 0; i < 12; ++i) { bool h = false; material mat; float t = raymarch(o, d, h, mat); if (i < 1) initT = h ? t : 500.0; if (h) { vec3 p = o + d * t; vec3 n = getNormal(p); o = p + n * 0.01; vec3 dd = normalize(randomDir() + n); vec3 rd = normalize(reflect(d, n)); float specular = hash1() < mat.specular ? 1.0 : 0.0; d = mix(dd, rd, mat.smoothness * specular); col = mix(mat.col mat.emission, vec3(1), specular); if (mat.emission > 1.0) break; } else { col = vec3(0.2); break; } } return mix(col, vec3(0), 1.0 - exp(-initT vec3(0.03, 0.036, 0.05))); } 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, 0), vec2(radians(camDir))); vec3 d = rotate2D(normalize(vec3(uv, 0.75)), vec2(radians(0.0), radians(0.0))); vec3 focalPoint = o + d * 5.0; o += rotate2D(vec3(randomDir2D(), 0), vec2(radians(camDir))) * 0.1; 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.xyz999.0,data.w)); // fragColor=ivec4(10,0,0,1); } </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=vertPos0.5+0.5; gl_Position=vec4(vertPos,1.0,1.0); } </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; //Paste from Shadertoy between here{ 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) { // Concise recursion system borrowed from Poisson (starts in main in buffer A) 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); // fragColor=vec4(float(sam.x),0,0,1); // fragColor=vec4(0,1,0,1); } //}and here. 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=[ -0.5,-0.5,0,1,0, 0.5,-0.5,0,0,1, 0.5,0.5,1,0,0, -0.5,0.5,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') // let ogTextureLoc=gl.getAttribLocation 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(){ //1st render pass //here it draws rainbow square to framebuffer "f" //framebuffer "f" is linked to texture "n" gl.bindFramebuffer(gl.FRAMEBUFFER,f2) gl.bindTexture(gl.TEXTURE_2D,n1) // gl.clearColor(0,0.1,0.2,1) // gl.clear(gl.COLOR_BUFFER_BIT) 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) //texture "n" now has the rainbow square above ^^^ //use texture "n" in pprocessingProgram 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	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMO8-7eqCQw
Votes	3
Spin-Offs	1
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Dat
Author Name	Dddatt
Author ID	kaid_4164356982737975081215128
Author Profile Access	COACH

Archive Data

Added	3 months ago, 1728419272202
Updated	3 months ago, 1728419272202
Source Deleted	unknown