Viewing Program

Program Data

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

Title	3D cave
ID	6481090541174784
Created	2 months ago, 1729375035111
Updated	2 months ago, 1729375636177
Code	<!DOCTYPE html> <!-- Contest: Underground! I have completed 100% of Khan Academy's 'Intro to HTML/CSS' and have been programming for 40 months(ish). I would prefer to be placed in the [Intermediate] bracket I would have loved to make this so much better but I got a bad case of the flue and have mostly been stuck in bed :/ Anyways I am feeling alright for the moment so I thought I would take a second to post what I had but I won't enter Advanced because this just isn't quite good enough This is my very first project that uses WebGL, so not to shabby :) I would have added maybe monster eyes and a point of light that advances in front of you, but I can't right now because screens aren't good for you when you have a high temperature 🤒 XP Hope you guys like it, enjoy! --> <html> <head> <meta charset="utf-8"> <title>3D cave</title> <style> #gl-canvas { display: none; overflow:hidden; } { overflow:hidden; margin: 0px; background: black; width: 600px; } </style> </head> <body> <!--Canvases --> <canvas id = 'canvas' width = '600' height = '600'> </canvas> <canvas id = 'gl-canvas' width = '600' height = '600'> </canvas> <!--Console--> <div style="position: absolute; left: 10px; top: 10px; background-color: white;" id="consol"> </div> <!--Vertex--> <script id = 'vertex-shader' type = 'glsl'>#version 300 es in vec2 aPosition; out vec2 pos; void main() { pos = aPosition; gl_Position = vec4(aPosition, 0, 1); } </script> <!--Fragment--> <script id = 'fragment-shader' type = 'glsl'>#version 300 es // --- setup --- precision mediump float; uniform vec2 u_resolution; uniform float drawx; uniform float drawy; uniform float iTime; out vec4 fragColor; vec2 iResolution = vec2(600.0, 600.0); // The far plane #define FAR 50. // 2x2 matrix rotation mat2 rot2( float th ){ vec2 a = sin(vec2(1.5707963, 0) + th); return mat2(a, -a.y, a.x); } // 1x1 and 3x1 hash functions. float hash( float n ){ return fract(cos(n)45758.5453); } float hash( vec3 p ){ return fract(sin(dot(p, vec3(7, 157, 113)))45758.5453); } // Draw the object on the repeat tile float drawObject(in vec3 p){ p = fract(p)-.5; return dot(p, p); } // Repeat cellular tile routine float cellTile(in vec3 p){ // Draw four overlapping objects (spheres, in this case) at various positions throughout the tile. vec4 d; d.x = drawObject(p - vec3(.81, .62, .53)); p.xy = vec2(p.y-p.x, p.y + p.x).7071; d.y = drawObject(p - vec3(.39, .2, .11)); p.yz = vec2(p.z-p.y, p.z + p.y).7071; d.z = drawObject(p - vec3(.62, .24, .06)); p.xz = vec2(p.z-p.x, p.z + p.x).7071; d.w = drawObject(p - vec3(.2, .82, .64)); // Obtain the minimum, and you're done. d.xy = min(d.xz, d.yw); return min(d.x, d.y)2.66; // Scale between zero and one... roughly. } // The path to follow vec2 path(in float z){ return vec2(20.sin(z * .04), 4.cos(z .09) + 3.(sin(z.025) - 1.)); } // Perturb the walls of the passage structure float surfFunc(in vec3 p){ float c = cellTile(p/6.); return mix(c, cos(c6.2832.).5 + .5, .125); } // IQ's smooth minium function float smin(float a, float b , float s){ float h = clamp( 0.5 + 0.5(b-a)/s, 0. , 1.); return mix(b, a, h) - h(1.0-h)s; } // Smooth maximum, based on IQ's smooth minimum float smax(float a, float b, float s){ float h = clamp( 0.5 + 0.5(a-b)/s, 0., 1.); return mix(b, a, h) + h(1.0-h)s; } // The cave float map(vec3 p){ // Surface function to perturb the walls float sf = surfFunc(p); // A gyroid object to form the main passage base layer float cav = dot(cos(p3.14159265/10.0), sin(p.yzx3.14159265/10.0)) + 2.0; // Mold everything around the path p.xy -= path(p.z); // The oval tunnel. Basically, a circle stretched along Y float tun = 1.5 - length(p.xyvec2(0.5, 1.0)); // Smoothly combining the tunnel with the passage base layer, then perturbing the walls tun = smax(tun, 1.-cav, 2.) + .75 + (.5-sf); // The ground float gr = p.y + 8.0 - cav.5 + (.5-sf).5; // The roof cutoff point float rf = p.y - 20.0; // Smoothly combining the passage with the ground, and cap it off at roof height return smax(smin(tun, gr, .1), rf, 1.); } // Basic raymarcher float trace(in vec3 ro, in vec3 rd){ float t = 0., h; for(int i = 0; i < 128; i++){ h = map(ro+rdt); if(abs(h)<0.002(t.25 + 1.) \|\| t>FAR) break; t += h0.8; } return min(t, FAR); } // Tetrahedral normal vec3 normal(in vec3 p){ vec2 e = vec2(-1., 1.)0.001; return normalize(e.yxxmap(p + e.yxx) + e.xxymap(p + e.xxy) + e.xyxmap(p + e.xyx) + e.yyymap(p + e.yyy) ); } // Tri-Planar blending function vec3 tex3D( sampler2D t, in vec3 p, in vec3 n ){ n = max(abs(n) - .2, .001); n /= (n.x + n.y + n.z ); p = (texture(t, p.yz)n.x + texture(t, p.zx)n.y + texture(t, p.xy)n.z).xyz; return pp; } // Texture bump mapping vec3 doBumpMap( sampler2D tx, in vec3 p, in vec3 n, float bf){ const vec2 e = vec2(0.001, 0); // Three gradient vectors rolled into a matrix mat3 m = mat3( tex3D(tx, p - e.xyy, n), tex3D(tx, p - e.yxy, n), tex3D(tx, p - e.yyx, n)); vec3 g = vec3(0.367, 0.587, 0.299)m; g = (g - dot(tex3D(tx, p , n), vec3(0.299, 0.587, 0.114)) )/e.x; g -= ndot(n, g); return normalize( n + gbf ); } // 3D value noise function. float n3D(in vec3 p){ const vec3 s = vec3(7, 157, 113); vec3 ip = floor(p); p -= ip; vec4 h = vec4(0., s.yz, s.y + s.z) + dot(ip, s); p = pp(3. - 2.p); //p = pp(p(p 6. - 15.) + 10.); h = mix(fract(sin(h)43758.5453), fract(sin(h + s.x)43758.5453), p.x); h.xy = mix(h.xz, h.yw, p.y); return mix(h.x, h.y, p.z); // Range: [0, 1]. } // Surface bump function float bumpSurf3D( in vec3 p){ float bmp = cellTile(p/3.).8 + cellTile(p).2; float ns = n3D(p6. - bmp6.); return mix(bmp, 1. - abs(ns-.333)/.667, .05); } // Standard function-based bump mapping function. vec3 doBumpMap(in vec3 p, in vec3 nor, float bumpfactor){ const vec2 e = vec2(0.001, 0); float ref = bumpSurf3D(p); vec3 grad = (vec3(bumpSurf3D(p - e.xyy), bumpSurf3D(p - e.yxy), bumpSurf3D(p - e.yyx) )-ref)/e.x; grad -= nordot(nor, grad); return normalize( nor + gradbumpfactor ); } //Soft shadows float softShadow(in vec3 ro, in vec3 rd, in float start, in float end, in float k){ float shade = 1.0; // Increase this and the shadows will be more accurate, but the wispy light trails in the caves will disappear. const int maxIterationsShad = 10; float dist = start; float stepDist = end/float(maxIterationsShad); // Max shadow iterations - More iterations make nicer shadows, but slows things down. for(int i = 0; i < maxIterationsShad; i++){ float h = map(ro + rddist); //shade = min(shade, kh/dist); shade = min(shade, smoothstep(0., 1., kh/dist)); dist += clamp(h, .2, stepDist); if (abs(h)<0.001 \|\| dist > end) break; } return shade; } // Hemispherical SDF AO - https://www.shadertoy.com/view/4sdGWN float calculateAO( in vec3 p, in vec3 n){ float ao = 0.0, l; const float nbIte = 6.0; const float maxDist = 3.; for(float i = 1.; i < nbIte + .5; i++ ){ l = (i.66 + hash(i).34)/nbItemaxDist; ao += (l - map( p + nl ))/(1.+ l); } return clamp( 1.-ao/nbIte, 0., 1.); } // Just a single color for the sky vec3 getSky(){ return vec3(40, 10, 10)/255.0; } // Code block to produce three layers of fine dust. Not sophisticated at all. float trig3(in vec3 p){ p = cos(p2. + (cos(p.yzx) + 1.)1.57);// + iTime/10 return dot(p, vec3(0.1666)) + 0.5; } // Low quality noise float trigNoise3D(in vec3 p){ // 3D transformation matrix. const mat3 m3RotTheta = mat3(0.25, -0.866, 0.433, 0.9665, 0.25, -0.2455127, -0.058, 0.433, 0.899519 )1.5; float res = 0.; float t = trig3(p3.14159265); p += (t); p = m3RotThetap; //p = (p+0.7071)1.5; res += t; t = trig3(p3.14159265); p += (t)0.7071; p = m3RotThetap; //p = (p+0.7071)1.5; res += t0.7071; t = trig3(p3.14159265); res += t0.5; return res/2.2071; } // Hash to return a scalar value from a 3D vector. float hash31(vec3 p){ return fract(sin(dot(p, vec3(127.1, 311.7, 74.7)))43758.5453); } // Throw it all together float getMist(in vec3 ro, in vec3 rd, in vec3 lp, in float t){ float mist = 0.; ro += rdt/3.; // Edge the ray a little forward to begin. for (int i = 0; i < 3; i++){ // Lighting. Technically, a lot of these points would be shadowed, but we're ignoring that. float sDi = length(lp-ro)/FAR; float sAtt = 1./(1. + sDi0.1 + sDisDi0.01); // Noise layer. mist += trigNoise3D(ro/2.)sAtt;//trigNoise3D ro += rdt/3.; } // Add a little noise, then clamp, and we're done. return clamp(mist/1.5 + hash31(ro)0.1-0.05, 0., 1.); } // Main loop void main(){ // Screen coordinates vec2 u = (gl_FragCoord.xy - iResolution.xy.5)/iResolution.y; // Camera Setup vec3 ro = vec3(0, 0, iTime/10.0); vec3 lookAt = ro + vec3((-drawx/600.0)-0.5, (drawy/600.0)+0.5, .5); ro.xy += path(ro.z); lookAt.xy += path(lookAt.z); //Field of view float FOV = 3.14159265/2.5; vec3 forward = normalize(lookAt - ro); vec3 right = normalize(vec3(forward.z, 0, -forward.x )); vec3 up = cross(forward, right); // Ray direction vec3 rd = normalize(forward + FOVu.xright + FOVu.yup); rd.xy = rot2(path(lookAt.z).x/64.)rd.xy; //light position vec3 lp = vec3(0, 0, (iTime+100.0)/10.0); lp.xy += path(lp.z); // Raymarch float t = trace(ro, rd); // Sky vec3 sky = getSky(); // The passage color vec3 col = sky; // Surface point vec3 sp = ro + t * rd; float pathHeight = sp.y - path(sp.z).y; // Surface normal vec3 sn = normal( sp ); // Light direction vector vec3 ld = lp-sp; ld /= max(length(ld), 0.001); // We've hit something if (t < FAR){ // Texture scale factor. const float tSize = 1./4.; // Function based bump mapping. sn = doBumpMap(sp, sn, .75/(1. + t/FAR.25)); // Bump mapping for gritty detailing float bf = (pathHeight + 5. < 0.)? .05: .025; // Shadows float shd = softShadow(sp, ld, 0.05, FAR, 8.); // Ambient occlusion float ao = calculateAO(sp, sn); // Diffuse float dif = max( dot( ld, sn ), 0.0); // Specular float spe = pow(max( dot( reflect(-ld, sn), -rd ), 0.0 ), 10.); // Fresnel reflection float fre = clamp(1.0 + dot(rd, sn), 0.0, 1.0); // Schlick approximation float Schlick = pow( 1. - max(dot(rd, normalize(rd + ld)), 0.), 5.0); float fre2 = mix(.2, 1., Schlick); // Global ambience float amb = ao.125 + frefre2.2; // Mix two colors vec3 c1 = vec3(50)/255.0; vec3 c2 = vec3(150)/255.0; col = clamp( //mix mix( c1, c2, -sn.y.5 + pathHeight.5 + 1.75 ), //high c1, //low c2 ); // Make the ground reflect just a little more col += smoothstep(0., 1., -pathHeight - 5.5)fre.25; // A bit of sky reflection col += getSky()frefre2; // Combining all the terms from above col = (col(dif + amb)0.4 + vec3(1)fre2spe)shdao + ambpow(col, vec3(2.)); } // Combine the scene with the sky float dust = getMist(ro, rd, lp, t)(1.-clamp((pathHeight - 5.).125, 0., 1.)); sky = getSky()mix(1.0, 0.5, dust); // Quadratic fade off col = mix(col, sky, min(tt1.5/FAR/FAR, 1.0)); // Linear fade off //col = mix(col, sky, min(t.75/FAR, 1.)); // Standard way to do a square vignette u = gl_FragCoord.xy/iResolution.xy; col = min(col, 1.)pow( 16.0u.xu.y(1.0-u.x)(1.0-u.y) , .125); //star /* float starDot = clamp(dot(normalize(rd), normalize(lp)), 0.0, 1.0); vec3 star = 0.2 * vec3(1.0, 1.0, 1.0) * pow(starDot, 1000.0); star += 0.4 * vec3(1.0, 1.0, 1.0) * pow(starDot, 1000.0); star += 0.8 * vec3(1.0, 1.0, 1.0) * pow(starDot, 1000.0); if(length(sp-ro)>length(lp-ro)){ col += star; }*/ // Done fragColor = vec4(sqrt(clamp(col, 0., 1.)), 1.0); } </script> <!--Main--> <script type = 'module'> document.getElementById("consol").style = "display:none"; const canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); var mouseX = 300, pmouseX = 0, mouseY = 300, pmouseY = 0, clicked = false, key = {}; window.addEventListener("mouseover", event => { pmouseX = mouseX; pmouseY= mouseY mouseX = event.pageX; mouseY = event.pageY; }); window.addEventListener("mousemove", event => { pmouseX = mouseX; pmouseY= mouseY mouseX = Math.max(Math.min(event.pageX, 600), 0); mouseY = Math.max(Math.min(event.pageY, 600), 0); }); function createShader(gl, type, source) { const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS)){ document.getElementById("consol").innerHTML = gl.getShaderInfoLog(shader); document.getElementById("consol").style = "position: absolute; left: 10px; top: 10px; width:500px; height:350px; background-color: white;"; console.log(gl.getShaderInfoLog(shader)); } return shader; } function createProgram(gl, vs, fs) { const program = gl.createProgram(); gl.attachShader(program, vs); gl.attachShader(program, fs); gl.linkProgram(program); return program; } function main() { const glCanvas = document.getElementById('gl-canvas'), gl = glCanvas.getContext('webgl2'); const vertexSource = document.getElementById('vertex-shader').textContent, fragmentSource = document.getElementById('fragment-shader').textContent; const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource), fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource); const program = createProgram(gl, vertexShader, fragmentShader); const aPosition = gl.getAttribLocation(program, 'aPosition') const drawx = gl.getUniformLocation(program, "drawx"); const drawy = gl.getUniformLocation(program, "drawy"); const iTime = gl.getUniformLocation(program, "iTime"); const positions = new Float32Array([-1, -1, -1, 3, 3, -1]); var mousex = 0; var mousey = 0; var now; var frameCount = 0; //gets rid of old animation frames for (let i = window.requestAnimationFrame(function() {}); i > 0; i--) { window.cancelAnimationFrame(i); } const posBuffer = gl.createBuffer(); //idk how I'm gonna remember this XD gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer); gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW); gl.viewport(0, 0, 600, 600); gl.clearColor(0, 0, 0, 1); gl.useProgram(program); gl.enableVertexAttribArray(aPosition); gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); ctx.font = "30px monospace"; ctx.fillStyle = 'rgb(225,25,25)'; var pretime; function render() { pretime = performance.now(); window.requestAnimationFrame(render); frameCount++; gl.uniform1f(drawx, -mouseX); gl.uniform1f(drawy, -mouseY); gl.uniform1f(iTime, frameCount); gl.drawArrays(gl.TRIANGLES, 0, 3); ctx.drawImage(glCanvas, 0, 0); } render(); } main(); </script> <!--KA Restart--> <script></script> </body> </html>
Folds	20,622
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNvbx9DBCww
Votes	9
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	{"id":"6509703024001024","title":"Contest: Underground - HTML Submissions","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Cataclysmic Code 🌩‮
Author Name	TheResistor55
Author ID	kaid_820167475461480890635740
Author Profile Access	PUBLIC

Archive Data

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