Viewing Program

Program Data

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

Title	3D Lava Lamp
ID	4559572446429184
Created	3 years ago, 1631810071816
Updated	3 years ago, 1631850502469
Code	<!DOCTYPE html> <html> <!-- No P3D :) This basis of this raymarching engine came from my earlier program "3D Photorealism." This program also adds shadows and a seperate glass raymarching loop. If anyone has any better ideas for how to quickly approximate transparent glass-like surfaces, I would love to hear them. --> <head> <meta charset="utf-8"> <title>3D Lava Lamp</title> <style> body { overflow: hidden; margin: auto; } </style> </head> <body> <canvas id="output-canvas" width="620px" height="400px"> Your device doesn't support the canvas element. </canvas> <!-- vertex shader --> <script type="webgl" id="vertex-shader"> attribute vec4 a_position; void main(){ gl_Position = a_position; } </script> <!-- fragment shader --> <script type="webgl" id="fragment-shader"> precision lowp float; uniform float u_time; uniform vec2 u_res; /* uncomment for anti-aliasing: / //#define MULTIPASS; #define pi 3.1415926 //point-light source structure struct Light { vec3 o; vec3 col; }; //light ray structure struct lightR { vec3 col; vec3 dir; }; //material structure struct material { vec3 albedo; float rough; float metal; }; //lights array Light lights[4]; //sdBox, sdCone, and smin by Inigo Quilez float sdBox( vec3 p, vec3 b ) { vec3 q = abs(p) - b; return length(max(q,0.0))+min(max(q.x,max(q.y,q.z)),0.0); } float smin(float a, float b, float k) { float h = max( k-abs(a-b), 0.0 )/k; return min( a, b ) - hhk(1.0/4.0); } float sdCone(vec3 p, vec2 c, float h) { // c is the sin/cos of the angle, h is height // Alternatively pass q instead of (c,h), // which is the point at the base in 2D vec2 q = hvec2(c.x/c.y,-1.0); vec2 w = vec2( length(p.xz), p.y ); vec2 a = w - qclamp( dot(w,q)/dot(q,q), 0.0, 1.0 ); vec2 b = w - qvec2( clamp( w.x/q.x, 0.0, 1.0 ), 1.0 ); float k = sign( q.y ); float d = min(dot( a, a ),dot(b, b)); float s = max( k(w.xq.y-w.yq.x),k(w.y-q.y) ); return sqrt(d)sign(s); } float blob(vec3 p, vec4 i, float t) { float h = sin(t + i.z) * 30.0; float s = clamp((h + 50.0) / 50.0, 0.5, 1.0); return length(p + vec3(i.x, h, i.y)) - i.w * s; } /float Bblob(vec3 p, vec4 i, float t) { float h = sin(t + i.z) 150.0; return length(p + vec3(i.x, h - 20.0, i.y)) - i.w; }/ //transparent signed dist func float tsdf(vec3 p) { float shape = max(sdCone(p+vec3(0,-180,0),vec2(sin(.09),cos(.09)),188.0), p.y - 70.0); float d = max(shape, p.y - 49.3); return d; } //main signed dist function float sdf(vec3 p) { //time float t = u_time 0.0002; //floor float d = p.y + 80.0; //pedestal d = min(d, sdBox(p+vec3(0,70,0),vec3(40,10,40))); //walls d = min(d, -sdBox(p, vec3(200))); //translated blob position vec3 mp = p + vec3(0, -20, 0); //lamp components float top = max(sdCone(p+vec3(0,-90,0),vec2(sin(.3),cos(.3)),40.), p.y - 70.0); float bottom = max(sdCone(-p+vec3(0,-49,0),vec2(sin(.4),cos(.4)),40.), -p.y - 50.); float base = sdCone(p+vec3(0,20,0),vec2(sin(.4),cos(.4)),40.); //adding the lamp pieces d = min(d, top); d = min(d, bottom); d = min(d, base); //lava blobs float b = d; b = smin(b, blob(mp, vec4(-6,5,1,5), t), 10.); b = smin(b, blob(mp, vec4(-3,0,2.3,5), t), 10.); b = smin(b, blob(mp, vec4(0,8,3,2), t), 10.); b = smin(b, blob(mp, vec4(0,7,4,2), t), 10.); b = smin(b, blob(mp, vec4(-8,-4,5,3), t), 10.); b = smin(b, blob(mp, vec4(7,0,6,3), t), 10.); b = smin(b, blob(mp, vec4(2,2,7,4), t), 10.); //constrain blobs to the container float container = tsdf(vec3(p.xz, clamp(p.y, -3.0, 44.0)).xzy); b = max(b, container + 2.0); b = max(b, p.y - 50.0); b = max(b, -p.y - 10.0); /* d = smin(d, Bblob(mp, vec4(-120,50,1,20),t),20.); d = smin(d, Bblob(mp, vec4(-100,0,2.3,1),t),20.); d = smin(d, Bblob(mp, vec4(0,120,3,9),t),20.); d = smin(d, Bblob(mp, vec4(0,90,4,9),t),20.); d = smin(d, Bblob(mp, vec4(-100,-40,5,11),t),20.); d = smin(d, Bblob(mp, vec4(80,60,6,3),t),20.); d = smin(d, Bblob(mp, vec4(80,90,7,4),t),20.); / d = min(d, b); return d; } material getMaterial(vec3 p) { //walls if(max(abs(p.x), abs(p.z)) > 199.0){ return material( vec3(1), 0.1, 0.0 ); } if(max(abs(p.x), abs(p.z)) < 50.0) { //blob stuff if( p.y > -11.0 && p.y < 49.9 && length(p.xz) < 16.0) { return material( vec3(0.4, 0.1, 0.4), 0.1, 0.0 ); } //shiny lamp metal if( p.y > -59.5 && p.y < 80.0) { return material( vec3(0.2), 0.2, 1.0 ); } } return material( vec3(0.1, 0.4, 0.5), 1.0, 0.0 ); } //normal calculation vec3 getNormal(vec3 pos) { //epsilon value float h = 0.1; float dist1 = sdf(pos); return normalize(vec3( sdf(pos + vec3(h, 0, 0)) - dist1, sdf(pos + vec3(0, h, 0)) - dist1, sdf(pos + vec3(0, 0, h)) - dist1 )); } //glass normal calculation vec3 getGlassNormal(vec3 pos) { //epsilon value float h = 0.1; float dist1 = tsdf(pos); return normalize(vec3( tsdf(pos + vec3(h, 0, 0)) - dist1, tsdf(pos + vec3(0, h, 0)) - dist1, tsdf(pos + vec3(0, 0, h)) - dist1 )); } //create a ray for a given screen position vec3 createRay(vec2 pos) { return normalize(vec3(pos, 200.0)); } //raymarching loop float raymarch(vec3 ro, vec3 rd, out bool hit) { const int MAX_STEPS = 70; const float epsilon = 0.5; hit = false; float totalDist = 0.0; for(int i = 0; i < MAX_STEPS; i ++){ float d = sdf(ro + rd totalDist); if(abs(d) < epsilon){ hit = true; break; } totalDist += d; } return totalDist; } float glassmarch(vec3 ro, vec3 rd, out bool hit) { const int MAX_STEPS = 20; const float epsilon = 0.5; hit = false; float totalDist = 0.0; for(int i = 0; i < MAX_STEPS; i ++){ float d = tsdf(ro + rd * totalDist); if(abs(d) < epsilon){ hit = true; break; } totalDist += d; } return totalDist; } float shadowmarch(vec3 rc, vec3 ld, float md) { const int MAX_STEPS = 50; const float step = 0.1; float t = 0.0; for(int i = 0; i < MAX_STEPS; i++){ float s = sdf(rc + ld * t); if(t > md) return 1.0; if(s < 0.0) return 0.0; t += max(step, s); } return 1.0; } //normal distribution function float NDF(vec3 h, vec3 n, float a) { float a2 = a * a; float dotHN = dot(h, n); float x = dotHN * dotHN * (a2 - 1.0) + 1.0; return a2 / (pi * x * x); } //geometry function float GF(vec3 v, vec3 n, float a) { float dotNV = max(dot(n, -v), 0.0); float a2 = a * a; float k = (a + 1.0) * (a + 1.0) / 8.0; return dotNV / (dotNV * (1.0 - k) + k); } //fresnel function vec3 FF(vec3 v, vec3 n, vec3 f0) { float x = clamp(1.0 - dot(v, n), 0.0, 1.0); return f0 + (1.0 - f0) * pow(x, 5.0); } //calculate contribution of individual light vec3 calcLight (material c, vec3 n, vec3 rd, lightR lr) { vec3 dir = lr.dir; vec3 l = lr.col; //material values vec3 a = c.albedo; float rough = c.rough; float metal = c.metal; //halfway vector vec3 h = normalize(rd + dir); vec3 f0 = mix(vec3(0.01), a, metal); //normal distribution float nd = NDF(dir, n, rough); //geometry occulsion float g = GF(dir, n, rough)GF(rd, n, rough); //fresnel vec3 f = FF(-rd, n, f0); //some dot products float dotDN = max(dot(-dir, n), 0.0); float dotRN = max(dot(-rd, n), 0.0); //specular denominator float specDenom = 2.0 dotDN * dotRN + .0001; vec3 spec = g * nd * f / specDenom; //diffuse contribution vec3 kd = (vec3(1) - f) * (1.0 - metal); vec3 fin = ((kd * a / pi) + spec) * l * dotDN; return fin; } //calculate contribution of all lights vec3 doLighting(material c, vec3 n, vec3 rc, vec3 rd, bool doShadow) { vec3 fCol = vec3(0.0); const int len = 4; for(int i = 0; i < 4; i++) { //get the light Light light = lights[i]; //find light ray direction vec3 dir = normalize(rc - light.o); //light radius float r = length(rc - light.o); //light brightness (attenuation) float b = 1.0 / r; //resulting light ray color vec3 l = light.col * b; //light ray lightR lr = lightR(l, dir); //shadows float s = doShadow ? shadowmarch(rc, -dir, r) : 1.0; //final light contribution vec3 fin = calcLight(c, n, rd, lr) * s; fCol += fin; } //ambient light fCol += c.albedo * (1.0 - c.metal) * 0.1; //global directional lighting //const vec3 sCol = vec3(0.1); //const vec3 sDir = normalize(vec3(1, -5, 0)); //float s = shadowmarch(rc, -sDir); //fCol += calcLight(c, n, rd, lightR(sCol, sDir))s; //fog float fog = exp(-length(rc) 0.01); return fCol * fog; } //create a matrix mat3 yMat(float a){ return mat3(cos(a), 0, sin(a), 0, 1, 0, -sin(a), 0, cos(a)); } mat3 xMat(float a){ return mat3(1, 0, 0, 0, cos(a), -sin(a), 0, sin(a), cos(a)); } vec4 shadeP (float t, vec3 cam, mat3 rot, vec2 unit) { //ray initial values vec3 ro = rot * cam; vec3 rd = rot * createRay(unit); //raymarch the ray bool hit; float d = raymarch(ro, rd, hit); //fragment color vec3 col = vec3(0); if(!hit){ return vec4(col, 1); } //find ray collision vec3 rc = ro + rd * d; //find collision normal vec3 normal = getNormal(rc); //find material material c = getMaterial(rc); //raymarch the glass bool glass; const material glassMat = material(vec3(1), 0.4, 1.0); const vec3 glassTint = vec3(2, 1, 2); float gd = glassmarch(ro, rd, glass); vec3 gc = gd * rd + ro; bool glassVis = gd < d \|\| !hit; //shade material col = doLighting(c, normal, rc, rd, true); //glass shading if(glass && glassVis) { col = glassTint; col += doLighting(glassMat, getGlassNormal(gc), gc, rd, false) 0.1; } //cheap HDR col = col / (col + 1.0); //gamma correction col = pow(col, vec3(1.0 / 2.2)); return vec4(col, 1); } void main() { //set the light positions lights[0] = Light( vec3(80, 10, 100), vec3(200, 100, 100) ); lights[1] = Light( vec3(120, 80, -130), vec3(250, 250, 500) ); lights[2] = Light( vec3(-50, 120, 120), vec3(300) ); lights[3] = Light( vec3(-90, 110, -80), vec3(100, 200, 100) ); //time increment float t = mod(u_time * 0.0004, 2.0 * pi); //create rotation matrix mat3 rot = yMat(t) * xMat(sin(t).1-0.4); //find the screen scale float scale = 2.0 / min(u_res.x, u_res.y); //create clip-space-ish coordinates vec2 clip = (gl_FragCoord.xy - u_res / 2.0)scale; //translate clip space into unit space vec2 unit = clip * 100.0; //camera position const vec3 cam = vec3(10, -10, -199); # ifdef MULTIPASS gl_FragColor = ( shadeP(t, cam, rot, unit) + shadeP(t, cam, rot, unit + vec2(0.25)) ) * 0.5; # else gl_FragColor = shadeP(t, cam, rot, unit); # endif } </script> <!-- based on the autosaver by BlueBird --> <script> var altCanvas = document.createElement("canvas"); altCanvas.width = 400; altCanvas.height = 400; var altCtx = altCanvas.getContext("2d"); var save = function(){ (function(canvas){ altCtx.drawImage(canvas, 150, 0, 400, 400, 0, 0, 400, 400); b64Img = altCanvas.toDataURL(); window.top.postMessage(b64Img, "https://www.khanacademy.org/"); })(output); }; var handleSave = function(e) { if (JSON.parse(e.data).screenshot) { setTimeout(function() { window.saveDaCanvas = true; console.log("Saving..."); }, 1000) } }; window.parent.savers = window.parent.savers \|\| 0; window.parent.addEventListener('message', handleSave); window.parent.savers += 1; for (window.parent.savers; window.parent.savers > 1; window.parent.savers -= 1) { window.parent.removeEventListener('message', handleSave) } </script> <!-- WebGL setup --> <script type> function createRayRenderer (output, vertCode, fragCode){ //get the output res var width = output.width; var height = output.height; var res = [width, height]; //get the webgl context var gl = output.getContext("webgl"); if(!gl) alert("Your browser doesn't support WEBGL"); //create a webgl program var program = gl.createProgram(); //create the vertex shader var vertShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vertShader, vertCode); gl.compileShader(vertShader); gl.attachShader(program, vertShader); //create fragment shader var fragShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fragShader, fragCode); gl.compileShader(fragShader); gl.attachShader(program, fragShader); //link the program gl.linkProgram(program); //find the uniform and attribute positions var posLoc = gl.getAttribLocation(program, "a_position"); var timeLoc = gl.getUniformLocation(program, "u_time"); var resLoc = gl.getUniformLocation(program, "u_res"); //create a position buffer var posBuf = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, posBuf); gl.enableVertexAttribArray(posLoc); gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0); //coords define two triangles that cover the screen var positions = [-1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1]; gl.bufferData( gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW ); gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); gl.useProgram(program); gl.uniform2fv(resLoc, res); var renderId = window.parent.renderId + 1 \|\| 0; window.parent.renderId = renderId; var render = function(time){ //clear the scene gl.clearColor(0, 0, 0, 1); gl.clear(gl.COLOR_BUFFER_BIT); //draw the scene gl.uniform1f(timeLoc, time); gl.drawArrays(gl.TRIANGLES, 0, 6); //save the canvas image if(window.saveDaCanvas === true){ save(); window.saveDaCanvas = false; } //render the next frame if(parent.renderId === renderId){ requestAnimationFrame(render); } } return render; }; </script> <!-- Initialize render loop --> <script> var output = document.querySelector("#output-canvas"); var vertShader = document.querySelector("#vertex-shader") .innerHTML; var fragShader = document.querySelector("#fragment-shader"). innerHTML; var renderLoop = createRayRenderer( output, vertShader, fragShader ); renderLoop(); </script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgP3_gt2MCAw
Votes	150
Spin-Offs	19
Type	WEBPAGE
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	true
By Child	false
Author Nick	SpencerKuan
Author Name	SpencerKuan
Author ID	kaid_266759593901575482747326
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1709834708437
Updated	10 months ago, 1709834708437
Source Deleted	unknown