Viewing Program

Program Data

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

Title	Sunset - not an image :)
ID	6336844438487040
Created	4 years ago, 1635867608259
Updated	4 years ago, 1635884654435
Code	<!DOCTYPE html> <html> <!-- --> <head> <meta charset="utf-8"> <title>Sunset - not an image :)</title> <style> body { overflow: hidden; margin: auto; } </style> </head> <body> <canvas id="output-canvas" width="700px" 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; #define pi 3.1415926 #define MOD2 vec2(3.9266, 7.4235) const vec3 sunDir = normalize(vec3(0, -1, -3)); const vec3 sunDir2 = normalize(vec3(-0.2, -1, -3.9)); const vec3 sunC = vec3(5, 1, 1); const vec3 sky = vec3(0.1, 0.1, 0.5); const vec3 sky2 = vec3(4, 0.4, 0.1); const vec3 fogCol = vec3(0.02); //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; }; //sdBox 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); } //Dave Hoskin's hash and noise functions float Hash(float p){ vec2 p2 = fract(vec2(p) / MOD2); p2 += dot(p2.yx, p2.xy+19.19); return fract(p2.x p2.y); } float Hash(vec2 p){ p = fract(p / MOD2); p += dot(p.xy, p.yx+19.19); return fract(p.x * p.y); } float Noise(in vec2 x){ vec2 p = floor(x); vec2 f = fract(x); f = ff(3.0-2.0f); float n = p.x + p.y57.0; float res = mix(mix( Hash(n+ 0.0), Hash(n+ 1.0),f.x), mix( Hash(n+ 57.0), Hash(n+ 58.0),f.x),f.y); return res; } float height(vec2 a){ return Noise(a / 2000.0) * 2000.0 - 950.0 + Noise(a / 300.6) * 100.0 + Noise(a / 140.0) * 50.0 + Noise(a / 78.0) * 25.0 + Noise(a / 20.0) * 5.0; } float sdf(vec3 p) { float h = height(p.xz); float d = p.y; d = smin(p.y - h, d, 400.); d = min(d, p.y - 8.9); vec3 mp = vec3(mod(p.xz, 2000.) - 1000., p.y - h - 1000.0).xzy; //float wacky = length(Noise(p.xy * 0.1) * sin(p.zy * 0.1) * 10.0); float wacky = 0.0; float f = length(mp) - 100.0 + wacky; //return min(d, f); return d; } material getMaterial(vec3 p, vec3 n) { const vec3 c1 = vec3(0.1, 0.2, 0.0); const vec3 c2 = vec3(80) / 255.0; float pattern1 = Noise(p.xz * 0.1) * 0.1; float pattern2 = Noise(p.xz * 0.001) * 0.1 - 0.05; //lakes if(p.y < 10.0){ //float reflec = Noise(p.xz * 0.08); //reflec = clamp(reflec, 0.45, 0.55); return material( vec3(0.1, 1.0, 0.1), 1.0, 0.0 ); } float m = clamp(height(p.xz) / 400.0, 0., 1.); vec3 c = mix(c1 + pattern1, c2 + pattern2, m); return material( c, 1.0, 0.0 ); } /float pixelSize (vec3 pos){ return 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 )); } //create a ray for a given screen position vec3 createRay(vec2 pos) { vec3 r = normalize(vec3(pos, 200.0)); return r; } //raymarching loop float raymarch(vec3 ro, vec3 rd, out bool hit) { const int MAX_STEPS = 400; const float epsilon = 1.0; 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 ambientOcclusion (vec3 rc, vec3 n) { const int MAX_STEPS = 5; float shade = 1.0; float dist = 10.0; for(int i = 0; i < MAX_STEPS; i ++){ float d = sdf(rc + n * dist); shade = min(shade, d / dist); dist += 100.0; } return max(shade, 0.0); } //shadowmarching loop float shadowmarch(vec3 rc) { const int MAX_STEPS = 100; const float epsilon = 1.0; float shade = 1.0; float dist = 0.0; for(int i = 0; i < MAX_STEPS; i ++){ float d = sdf(rc - sunDir * dist); if(d < epsilon){ return 0.0; } shade = min(shade, d * 10.0 / dist); dist += max(100.0, abs(d)); } return max(shade, 0.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 + 0.1; 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) { vec3 fCol = vec3(0.0); //main sun lighting lightR sun = lightR(sunC, sunDir); vec3 sunFin = calcLight(c, n, rd, sun); float sunShadow = shadowmarch(rc + n * 2.0); fCol += sunFin * sunShadow; //ambient lighting const vec3 ambC = vec3(0.5); const vec3 ambD = vec3(0, 1, 0); float ao = ambientOcclusion(rc, n); lightR amb1 = lightR(ambC * 0.2, -ambD); lightR amb2 = lightR(ambC * 0.1, ambD); vec3 ambFin1 = calcLight(c, n, rd, amb1); vec3 ambFin2 = calcLight(c, n, rd, amb2); fCol += ambFin1 * ao; fCol += ambFin2 * ao; //fog float fog = 1.0 - exp(-length(rc.xz) * 0.00005); return mix(fCol, fogCol, fog); } //create a matrix mat3 yMat(float a){ return mat3(cos(a), 0, sin(a), 0, 1, 0, -sin(a), 0, cos(a)); } void main() { //time increment float t = 0.4; //create rotation matrix mat3 rot = yMat(t); //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 vec2 cam2 = vec2(100, 000); vec3 cam = vec3(cam2.x, -height(cam2), cam2.y); //ray initial values vec3 ro = rot * cam; vec3 rd = rot * createRay(unit); //raymarch the ray bool hit; float d = raymarch(ro, rd, hit); //sky color float horizon = clamp(exp(rd.y * -20.0), 0.0, 1.0); vec3 col = mix(sky, sky2, horizon); //sun float sunDot1 = max(dot(-sunDir, rd), 0.0); if(sunDot1 > 0.9){ col += pow(sunDot1, 100.0) * sunC * 0.06; col += pow(sunDot1, 10000.0) * sunC * vec3(15, 15, 8); } if(hit){ //find ray collision vec3 rc = ro + rd * d; //find collision normal vec3 normal = getNormal(rc); //find material material c = getMaterial(rc, normal); //shade material col = doLighting(c, normal, rc, rd); } //cheap HDR col = col / (col + 1.0); //gamma correction col = pow(col, vec3(1.0 / 2.2)); gl_FragColor = vec4(col, 1); } </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); }; window.parent.savers = window.parent.savers \|\| 0; window.parent.addEventListener('message', save); window.parent.savers += 1; for (window.parent.savers; window.parent.savers > 1; window.parent.savers -= 1) { window.parent.removeEventListener('message', save) } </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); console.log(gl.getError()); 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); //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 ); requestAnimationFrame(function(t){ renderLoop(t); save(); }); </script> </body> </html>
Folds	21,23,26,31,34,420,423,446,449,524,527,546
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgIOOueqgCww
Votes	178
Spin-Offs	28
Type	WEBPAGE
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	SpencerKuan
Author Name	SpencerKuan
Author ID	kaid_266759593901575482747326
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739456786027
Updated	10 months ago, 1739456794481
Source Deleted	unknown