Viewing Program

Program Data

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

Title	Equilibrium (Takes a while to compile)
ID	5046811102855168
Created	3 years ago, 1653396044822
Updated	3 years ago, 1658343045790
Code	<!DOCTYPE html> <html> <head> <!-- Equilibrium May 22, 2022 --> <meta charset="utf-8"> <title>Equilibrium (Takes a while to compile)</title> <meta name="viewport" content="width=device-width"> <style> body { background-color: black; margin: 0px; overflow: hidden; } #canvas { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: auto; } </style> <script type=""> function resizeCanvas(gl, resolutionUniLoc, w = 400, h = 400) { if (gl.canvas.width !== w \|\| gl.canvas.height !== h) { // size canvas to w, h gl.canvas.width = w; gl.canvas.height = h; // set viewport gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); // pass in resolution gl.uniform2fv(resolutionUniLoc, [gl.canvas.width, gl.canvas.height]); } } // get webgl2 context function getWEBGL2(canvas) { const gl = canvas.getContext("webgl2", { antialias: false, preserveDrawingBuffer: true, premultipliedAlpha: false }); if (gl) return gl; else console.log("No WebGL2 for you! :((("); } function createShader(gl, srcId, replaceStrings) { // get source const scriptTag = document.getElementById(srcId) let source = scriptTag.text; if (!source) { console.log("Unknown script element."); return; } // replace strings for (let strng in replaceStrings) { source = source.replaceAll(strng, replaceStrings[strng]); } // get type of source let type; if (scriptTag.type === "x-shader/x-vertex") { type = gl.VERTEX_SHADER; } else if (scriptTag.type === "x-shader/x-fragment") { type = gl.FRAGMENT_SHADER; } else { console.log("Wrong type for script tag."); return; } // create shader, set source code, and compile const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); // check if success if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { return shader; } else { // log error and delete shader console.log(gl.getShaderInfoLog(shader)); gl.deleteShader(shader); } } // link two shaders into a program function createProgram(gl, vsId, fsId, replaceStrings = {}) { const program = gl.createProgram(); // create and attach shaders const vShader = createShader(gl, vsId, replaceStrings); const fShader = createShader(gl, fsId, replaceStrings); gl.attachShader(program, vShader); gl.attachShader(program, fShader); // link and validate gl.linkProgram(program); gl.validateProgram(program); // check if (gl.getProgramParameter(program, gl.LINK_STATUS)) { return program; } else { // log error and delete program console.log(gl.getProgramInfoLog(program)); gl.deleteProgram(program); } } function attribute(gl, program, name, size, type, normalize, stride = 0, offset = 0) { const location = gl.getAttribLocation(program, name); gl.enableVertexAttribArray(location); gl.vertexAttribPointer(location, size, type, normalize, stride, offset); return location; } function buffer(gl, target, data, usage) { const b = gl.createBuffer(); gl.bindBuffer(target, b); gl.bufferData(target, data, usage); return b; } function programLog(gl, program) { const log = gl.getProgramInfoLog(program); if (log.length > 0) { console.log(log); return true; } } </script> </head> <body> <canvas id="canvas" preserveDrawingBuffer="true"></canvas> <!--Vertex Shader--> <script id="vs" type="x-shader/x-vertex">#version 300 es in vec4 a_position; void main() { gl_Position = a_position; } </script> <!--Fragment Shader--> <script id="fs" type="x-shader/x-fragment">#version 300 es precision highp float; uniform vec2 u_resolution; uniform float u_time; out vec4 fragColor; const float EPSILON = 0.001; const float MAX_DIST = 60.0; // if good computer set to 2 const int AA = 1; const float FRESNEL_POWER = 4.5; //******************************************************// // Light structs struct Light { bool isPointLight; vec3 clr; float shadowSoftness; // if isPointLight, set position, else set direction vec3 pos; vec3 dir; float brightness; }; // create a light Light createLight(in vec3 pt, in bool isPointLight, in float fadeAdjust, in float shadowSoftness, in vec3 dirOrPos, in vec3 clr) { Light light; light.clr = clr; light.shadowSoftness = shadowSoftness; if (isPointLight) { light.pos = dirOrPos; light.isPointLight = true; float d = distance(pt, light.pos); d = pow(d, fadeAdjust); light.brightness = 1.0 / (d d); light.dir = normalize(light.pos - pt); } else { light.brightness = 1.0; light.dir = dirOrPos; } return light; } // Material struct struct Material { vec3 clr; float amb; float dif; float spec; float shininess; vec3 ref; bool hasFresnel; int id; vec3 groundBounceClr; }; // return a nondescript material Material defaultMaterial() { Material mat; mat.amb = 0.1; mat.clr = vec3(0.05); mat.dif = 1.0; mat.spec = 1.0; mat.shininess = 10.0; mat.ref = vec3(0.0); mat.hasFresnel = false; mat.id = -1; mat.groundBounceClr = vec3(0.0); return mat; } //*****************************************************// // clamp value from 0 to 1 float uclamp(float val) { return clamp(val, 0.0, 1.0); } //****************************************************// // random and noise float random(in float v) { return fract(15465.1327854 sin(v * 231.72)); } float random(in vec2 v) { return fract(15465.1327854 * sin(dot(v, vec2(173.93422, 102.5165)))); } float random(in vec3 v) { return fract(15465.1327854 * sin(dot(v, vec3(173.93422, 102.5165, 23.1234)))); } float noise(in vec2 uv) { vec2 fid = fract(uv); // fraction part of uv -> where in the grid fid = fid * fid * (3.0 - 2.0 * fid); vec2 id = floor(uv); // integer part of uvw -> which grid // corners of square float bl = random(id + vec2(0, 0)); float br = random(id + vec2(1, 0)); float tl = random(id + vec2(0, 1)); float tr = random(id + vec2(1, 1)); // interpolate between corner float b = mix(bl, br, fid.x); float t = mix(tl, tr, fid.x); return mix(b, t, fid.y); } float noise(in vec3 uvw) { vec3 fid = fract(uvw); // fraction part of uvw -> where in the grid cell fid = fid * fid * (3.0 - 2.0 * fid); vec3 id = floor(uvw); // integer part of uvw -> which grid cell // lerp bottom face float bf = mix(random(id + vec3(0, 0, 0)), random(id + vec3(1, 0, 0)), fid.x); float bb = mix(random(id + vec3(0, 0, 1)), random(id + vec3(1, 0, 1)), fid.x); float b = mix(bf, bb, fid.z); // lerp top face float tf = mix(random(id + vec3(0, 1, 0)), random(id + vec3(1, 1, 0)), fid.x); float tb = mix(random(id + vec3(0, 1, 1)), random(id + vec3(1, 1, 1)), fid.x); float t = mix(tf, tb, fid.z); return mix(b, t, fid.y); } //******************************************************// // SDFs float sdCapsule(in vec3 pt, in vec3 a, in vec3 b, in float r) { vec3 apt = pt - a; vec3 ab = b - a; float t = clamp(dot(apt, ab) / dot(ab, ab), 0.0, 1.0); return length( apt - ab t ) - r; } //******************************************************// // SDF SCENE float sdf(in vec3 pt, out Material mat) { // distance to closest object float res = MAX_DIST; // default mat = defaultMaterial(); vec3 t = vec3(u_time 0.7); float n = - 1.0 + 0.7noise(pt 0.4 + t); // water { float s = pt.y - n; if (s < res) { res = s; mat.id = 0; mat.hasFresnel = true; mat.dif = 0.2; mat.spec = 0.2; mat.clr = vec3(0.06, 0.06, 0.2) * 0.07; mat.ref = vec3(0.2, 0.25, 0.5); } } { vec3 p = pt - vec3(0, 0.2noise(t), 0); // sphere float b = length(p) - 2.0; if (b < res) { res = b; mat.id = 1; mat.dif = 0.8; mat.spec = 0.5; mat.shininess = 50.0; mat.clr = p.y < 0.1 ? vec3(0.2, 0.2, 0.13) : vec3(0.3, 0.1, 0.1); mat.ref = vec3(1.1); } // attachment to sphere thingy float s = sdCapsule(p, vec3(0), vec3(0, 2.35, 0), 0.18); if (s < res) { res = s; mat.id = 2; mat.dif = 0.4; mat.spec = 0.9; mat.shininess = 10.0; mat.hasFresnel = false; mat.clr = vec3(0.15); mat.ref = vec3(0.15); } // line vec3 lp = p - vec3(0.0, smoothstep(1.0, 8.0, length(pt.xz)), 0.0); float l = sdCapsule(lp, vec3(-4, 5.0 + 0.5sin(t.x), -10), vec3(0, 2.35, 0), 0.04); if (l < res) { res = l; mat.id = 3; mat.dif = 0.9; mat.spec = 0.5; mat.hasFresnel = false; mat.shininess = 50.0; mat.ref = vec3(0.0); mat.clr = vec3(0.08); } } return res; } //*****************************************************// // https://iquilezles.org/articles/normalsSDF vec3 calcNormal(in vec3 pt) { vec2 h = vec2(EPSILON, 0); Material m; // central difference sdf(pt + EPSILON) - sdf(pt - EPSILON) return normalize(vec3( sdf(pt + h.xyy, m) - sdf(pt - h.xyy, m), sdf(pt + h.yxy, m) - sdf(pt - h.yxy, m), sdf(pt + h.yyx, m) - sdf(pt - h.yyx, m) )); } //****************************************************// float castRay(in vec3 ro, in vec3 rd, out Material mat) { // total distance traveled float td = 0.0; for (int i = 0; i < 100; i++) { float h = sdf(ro + tdrd, mat); // if distance is really close, break if (abs(h) < (0.0001td)) break; // add to total distance td += h; // if too far, break if (td >= MAX_DIST) { mat.id = -1; mat.ref = vec3(0.0); mat.hasFresnel = false; break; } } return td; } // https://iquilezles.org/articles/rmshadows float softShadow(in vec3 ro, in vec3 rd, in float k) { float res = 1.0; // result float td = 0.05; // total distance traveled for (int i = 0; i < 200 && td < MAX_DIST; i++) { Material m; float d = sdf(ro + tdrd, m); if (d < 0.001) { // intersection, so return shadow return 0.0; } res = min(res, kd/td); td += d; } // if no intersection -> shadow 0.0 to light 1.0 return res; } // https://www.shadertoy.com/view/3lsSzf // ambient occlusion float calcOcc(in vec3 pt, in vec3 nor) { float occ = 0.0; float scl = 1.0; Material m; // placeholder for (int i = 0; i < 5; i++) { float h = 0.01 + 0.11 0.25 * float(i); float d = sdf(pt + h * nor, m); occ += (h-d)scl; scl = 0.95; } return uclamp(1.0 - 2.0 * occ); } //******************************************************// // https://iquilezles.org/articles/fog vec3 applyFog(in vec3 rd, in float d, in vec3 clr, in vec3 sunClr, in vec3 sunDir, in vec3 skyClr) { vec3 fogClr = mix( skyClr, sunClr, pow(max(dot(rd, sunDir), 0.0), 15.0) ); return mix(clr, fogClr, 1.0 - exp(-0.00005 d * d * d)); // fog } vec3 calcLighting(in vec3 pt, in vec3 rd, in vec3 nor, in Light light, in Material mat) { // diffuse float dif = uclamp(dot(nor, light.dir)) * mat.dif; // shadow float shadow = light.isPointLight ? 1.0 : softShadow(pt, light.dir, light.shadowSoftness); // specular vec3 ref = reflect(light.dir, nor); float spec = pow(uclamp(dot(rd, ref)), mat.shininess) * mat.spec; // return dif * clr * shadow * spec + dif * clr * shadow; return light.brightness * light.clr * shadow * dif * (spec + 1.0); } vec3 calcClr(in vec3 ro, in vec3 rd, in float d, in vec3 nor, in Material mat) { vec3 pt = ro + rd * d; // COLORS vec3 skyClr = vec3(0.75, 0.6, 0.5) + 0.15smoothstep(5.5, -1.0, pt.y); // KEY LIGHT Light sun = createLight(pt, false, 1.0, 10.9, normalize(vec3(8, 1.5, 10)), vec3(15.8, 9.0, 6.7)); // background color vec3 clr = skyClr; // return background if too far (id is -1.0) if (mat.id == -1) {// sun clr = mix(skyClr, sun.clr 0.12, 0.7 * smoothstep(8.0, -2.0, pt.y) * pow(max(dot(rd, sun.dir), 0.0), 20.0)); return clr; } clr = mat.clr; // LIGHTS // CALCULATE COLOR float occ = calcOcc(pt, nor); vec3 light = vec3(mat.amb); light += calcLighting(pt, rd, nor, sun, mat); // sun light += (uclamp(dot(nor, vec3(0, 1, 0))) * 0.5 + 0.5) * skyClr; // sky diffuse clr = light occ; clr = applyFog(rd, d, clr, sun.clr * 0.1, sun.dir, skyClr); return clr; } //******************************************************// vec3 render(in vec3 ro, in vec3 rd) { Material mat; float d = castRay(ro, rd, mat); vec3 nor = calcNormal(ro + rdd); vec3 clr = calcClr(ro, rd, d, nor, mat); bool willReflect = mat.ref.r > 0.0 \|\| mat.ref.g > 0.0 \|\| mat.ref.b > 0.0; if (mat.hasFresnel \|\| willReflect) { int bounces = 1; vec3 ref = vec3(0.0); float fresnel = 0.5 * uclamp(pow(1.0 - dot(nor, -rd), FRESNEL_POWER)); // if the material will reflect if (willReflect) { bounces = 1; // if reflective and doesn't have fresnel if (!mat.hasFresnel) ref = mat.ref; // if reflective with fresnel else ref = fresnel * mat.ref; } else { ref = vec3(fresnel); } // bouncing around for fresnel and reflection if (fresnel > 0.0) { vec3 fil = vec3(1.0); for (int i = 0; i < bounces; i++) { fil = ref; // to intersection point and reflect ro += rdd + norEPSILON3.0; rd = reflect(rd, nor); // find new point d = castRay(ro, rd, mat); nor = calcNormal(ro + rdd); // add color clr += fil calcClr(ro, rd, d, nor, mat); if (mat.id == -1) break; } } } clr = pow(clr, vec3(1.0 / 2.2)); // gamma correction return clr; } //******************************************************// vec3 setCamera(in vec2 uv, in vec3 ro, in vec3 target) { vec3 forward = normalize(target - ro); vec3 right = normalize(cross(forward, vec3(0, 1, 0))); vec3 up = normalize(cross(right, forward)); // ray direction vec3 rd = normalize(uv.x right + uv.y * up + 1.2 * forward); return rd; } void main() { float time = u_time; vec2 res = u_resolution; // target vec3 target = vec3(0, 0, 0); // ray origin vec3 ro = vec3(-6, 0, 0); // accumulate color vec3 clr = vec3(0.0); for (int i = 0; i < AA; i++) { for (int j = 0; j < AA; j++) { // Normalized pixel coordinates vec2 f = gl_FragCoord.xy + vec2(float(i), float(j)) / float(AA); vec2 uv = (2.0f - res) / min(res.x, res.y); vec3 rd = setCamera(uv, ro, target); // calculate color based on distance, etc clr += render(ro, rd); } } clr /= float(AAAA); // Output to screen fragColor = vec4(clr, 1.0); } </script> <!-- Main js --> <script type=""> function main() { /INIT/ // get context const glCanvas = document.getElementById("canvas"); const gl = getWEBGL2(glCanvas); if (!gl) return; // create program const prog = createProgram(gl, "vs", "fs"); // uniform resolution const resUniLoc = gl.getUniformLocation(prog, "u_resolution"); // time uniform const timeUniLoc = gl.getUniformLocation(prog, "u_time"); // position buffer const positions = [ -1, 1, -1, -1, 1, 1, -1, -1, 1, -1, 1, 1 ]; const positionBuffer = buffer(gl, gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); // position attribute const posAttrLoc = attribute(gl, prog, "a_position", 2, gl.FLOAT, false, 0, 0); // Clear the canvas gl.clearColor(0, 0, 0, 1); gl.clear(gl.COLOR_BUFFER_BIT); // use program gl.useProgram(prog); /* DRAW / resizeCanvas(gl, resUniLoc, window.innerWidth, window.innerHeight); // loop function drawScene(time) { // pass in time gl.uniform1f(timeUniLoc, time 0.001); // draw gl.drawArrays(gl.TRIANGLES, 0, positions.length / 2); // log errors -> returns true if error if (!programLog(gl, prog)) { window.requestAnimationFrame(drawScene); } } // init draw scene window.requestAnimationFrame(drawScene); } main(); </script> </body> </html>
Folds	25,132,137,145
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgKO4xMH7CAw
Votes	217
Spin-Offs	15
Type	WEBPAGE
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Prisha B
Author Name	prishainabox
Author ID	kaid_861909786767545381407237
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739373851686
Updated	10 months ago, 1739373858719
Source Deleted	unknown