Viewing Program

Program Data

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

Title	Basic Raymarcher
ID	6234537789964288
Created	4 years ago, 1617014995982
Updated	4 years ago, 1617472828060
Code	<!DOCTYPE html> <!-- GLSLforKHAN Editor Version 2.0 Permission is granted to all to copy and use this code found here with no restrictions. -Ky @KyProgramming Please see the GLSLforKHAN home page here: https://www.khanacademy.org/computer-programming/glslforka-editor-home/5313525003010048 Also use the above link to report any errors. Credit to Bluebird @birdwatcher03 for the autosave code. Credit to Mozilla for some of the WebGL --> <!-- Please do NOT edit this code here, because the autosaver will delete any changes you make to it. If you would like to request a feature please go to the homepage. --> <html> <head> <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet"> <title>Basic Raymarcher</title> <style id="style"></style> <script type="application/javascript"> var ky__width = 603; var ky__height = 603; var ky__prgmID = "6234537789964288"; var ky__importantKey = "91138778"; </script> </head> <body> <!--Vertex Shader--> <script type="not-js" id="ky__vs"> attribute vec4 avtx_pos; void main(){ gl_Position = avtx_pos; } </script> <!--Fragment Shader--> <script type="not-js" id="ky__fs">//Basic Raymarcher // Credit to Iñigo Quílez for basic functions // https://www.youtube.com/watch?v=Cfe5UQ-1L9Q // https://www.shadertoy.com/view/3lsSzf // https://iquilezles.org/www/articles/distfunctions/distfunctions.htm #ifdef GL_ES precision highp float; #endif #define MAXD 20.0 #define STYLE_AMOUNT 4 // Define u_time variable. uniform float u_time; // The size of the canvas uniform vec2 u_resolution; // Returns random value between 0 and 1 float rand3D(float valueX, float valueY, float valueZ){ return fract(sin(100.0cos(10233.5sin(valueX)+12013.2sin(valueY)+1111.1cos(valueZ)))); } // Creates 3D noise float noise3D(float valueX, float valueY, float valueZ){ float flooredValueX = floor(valueX); float flooredValueY = floor(valueY); float flooredValueZ = floor(valueZ); float a = rand3D(flooredValueX, flooredValueY, flooredValueZ); float b = rand3D(flooredValueX + 1.0, flooredValueY, flooredValueZ); float c = rand3D(flooredValueX, flooredValueY + 1.0, flooredValueZ); float d = rand3D(flooredValueX + 1.0, flooredValueY + 1.0, flooredValueZ); float e = rand3D(flooredValueX, flooredValueY, flooredValueZ + 1.0); float f = rand3D(flooredValueX + 1.0, flooredValueY, flooredValueZ + 1.0); float g = rand3D(flooredValueX, flooredValueY + 1.0, flooredValueZ + 1.0); float h = rand3D(flooredValueX + 1.0, flooredValueY + 1.0, flooredValueZ + 1.0); float smoothFractX = smoothstep(0.0, 1.0, fract(valueX)); float smoothFractY = smoothstep(0.0, 1.0, fract(valueY)); float bottom = mix(a,b,smoothFractX)+(c-a)smoothFractY(1.0-smoothFractX)+(d-b)smoothFractXsmoothFractY; float top = mix(e,f,smoothFractX)+(g-e)smoothFractY(1.0-smoothFractX)+(h-f)smoothFractXsmoothFractY; return mix(bottom, top, smoothstep(0.0, 1.0, fract(valueZ))); } //Adds fractal brownian motion to the noise. float fbm3D(float valueX, float valueY, float valueZ, int detail){ float n = 0.5 * noise3D(valueX, valueY, valueZ); float a = 0.25; int iteration = 0; for(int i = 0; i < 10; i++){ if(iteration >= detail - 1){ return n; } n += a * noise3D(valueX * 0.5 / a, valueY * 0.5 / a, valueZ * 0.5 / a); a /= 2.0; iteration ++; } return n; } //Finds the distance from the objects vec2 map(vec3 pos){ // Part of distance calc for the 2 prisms vec3 pd = abs(vec3(abs(pos.x), pos.yz) + vec3(-0.9, -0.05, 0.0)) - vec3(0.1, 0.2, 0.1); // Ground float d1 = pos.y + 0.25; // Center Sphere float d2 = length(pos + vec3(0.0, -0.1, 0.0)) - 0.25; // 2 Other spheres float d3 = length(max(pd,0.0)) + min(max(pd.x,max(pd.y,pd.z)),0.0) - 0.05; // The prism float d4 = length(vec3(pos.xy, abs(pos.z)) + vec3(0.0, 0.05, -0.9)) - 0.15; // Finds the minimum distance (closest object) float mini = min( min(d1, d2), min(d3, d4) ); //which object is the point a part of? float which = 0.0; if(d2 == mini){ which = 1.0; }else if(d3 == mini){ which = 2.0; }else if(d4 == mini){ which = 3.0; } //Returns float array with length of 2 (basically) return vec2(mini, which); } vec3 calcNormal(vec3 pos){ //The offeset to calculate normals vec2 off_set = vec2(0.0001, 0.0); return normalize(vec3( map(pos + off_set.xyy).x - map(pos - off_set.xyy).x, map(pos + off_set.yxy).x - map(pos - off_set.yxy).x, map(pos + off_set.yyx).x - map(pos - off_set.yyx).x )); } vec2 castRay(vec3 origin, vec3 ray_direction, float start_dist){ // Cast ray from point // distance from start float dist = start_dist; // Stores mapped data vec2 mapped; for(int i = 0; i < 100; i ++){ // The position of raymarched ray. vec3 pos = origin + dist * ray_direction; mapped = map(pos); //How close to the nearest object? float closeness = mapped.x; //Stop if in object if(closeness < 0.001){ break; } //Else continue dist += closeness; // Stop if past the limit (prevent infinite loop) if(dist >= MAXD){ break; } } // Set the value to -1 if didn't collide with anything (sky) if(dist > MAXD){ dist = -1.0; } return vec2(dist, mapped.y); } //Cast a ray without the start distance specified. vec2 castRay(vec3 origin, vec3 ray_direction){ return castRay(origin, ray_direction, 0.0); } // Cast shadow ray float shadow(vec3 origin, vec3 ray_direction, float spread){ //Same as regular ray float res = 1.0; float dist = 0.0; for(int i = 0; i < 1000; i++){ float closeness = map(origin + ray_directiondist).x; if(dist >= MAXD){ break; } if(closeness < 0.001){ return 0.0; } // Find closest point ray ever comes to object res = min(res, spreadcloseness/dist); dist += closeness; } //Return closeness return res; } // Colour the objects void colours(inout float styles[STYLE_AMOUNT], int which, vec3 pos, float dist){ // Return Colour vec3 returnC = vec3(0.0); float refle = 0.0; if(which == 0){ // For ground, create checkered pattern int zC = int(0.5 + fract(pos.z * 2.0)); int xC = int(0.5 + fract(pos.x * 2.0)); float d = min(dist / 10.0, 1.0); returnC = vec3(mix(0.2 * (zC + xC == 1 ? 1.0 : 0.0), 0.1, d)); }else if(which == 1){ // For central sphere, set reflectiveness to 100% refle = 1.0; returnC = vec3(0.5); }else if(which == 2){ // Red and blue for 2 prisms returnC = pos.x < 0.0 ? vec3(0.2, 0.0, 0.0) : vec3(0.0, 0.0, 0.2); }else if(which == 3){ // Yellow & green for spheres. returnC = pos.z < 0.0 ? vec3(0.2, 0.2, 0.0) : vec3(0.0, 0.2, 0.0); } // Return the colours. styles[0] = returnC.r; styles[1] = returnC.g; styles[2] = returnC.b; styles[3] = refle; } vec3 sky(vec3 rayDir, vec3 sunDir){ // Colour the sky vec3 scol = vec3(0.3, 0.5, 1.0) - clamp(0.7 * rayDir.y, 0.0, 0.4); // Add sun scol += vec3(1.0, 0.8, 0.5) * smoothstep(1.0, 0.0, 10.0 * length(rayDir - sunDir)); // Add clouds return scol + vec3(0.7) * fbm3D(rayDir.x * 2.0, rayDir.y * 2.0, rayDir.z * 2.0, 5); } //Main function void main(){ // position (-1 to 1) vec2 p = (2.0gl_FragCoord.xy-u_resolution.xy) / u_resolution.y; // Angle of camera float angle = u_time / 1.5; // How far is camera float farness = 1.5 + 0.5 sin(u_time / 3.0); // Where is camera vec3 origin = vec3(farness * sin(angle), 0.5 + 0.6 * cos(u_time / 3.0), farness * cos(angle)); // Look at center sphere vec3 look_dir = normalize(-origin); //perpendicular right direction vec3 perRight = normalize(cross(look_dir, vec3(0.0, 1.0, 0.0))); //perpendicular upwards direction. vec3 perUp = normalize(cross(perRight, look_dir)); // Find which way ray shoots vec3 ray_direction = normalize(p.x * perRight + p.y * perUp + 1.5 * look_dir); // Direction to sun vec3 sun_dir = normalize(vec3(0.8, 0.4, 0.2)); // Current colour vec3 col = vec3(0.0); // Cast a ray and see what it hits vec2 casted = castRay(origin, ray_direction); float dist = casted.x; int which = int(casted.y); // If the ray hit something if(dist > 0.0){ vec3 pos = origin + dist * ray_direction; vec3 nor = calcNormal(pos); // Find colour of point float style[STYLE_AMOUNT]; colours(style, which, pos, dist); vec3 base = vec3(style[0], style[1], style[2]); float refl = style[3]; //If reflective if(refl > 0.0){ // Send another ray at reflection angle vec3 refAng = reflect(ray_direction, nor); casted = castRay(pos, refAng, 0.01); // If it hits something if(casted.x > 0.0){ vec3 rpos = pos + casted.x * refAng; vec3 rnor = calcNormal(rpos); //Find colour of reflected point float rstyle[STYLE_AMOUNT]; colours(rstyle, int(casted.y), rpos, casted.x); vec3 rbase = vec3(rstyle[0], rstyle[1], rstyle[2]); // Find shadows of reflected object float rsun_sha = shadow(rpos + rnor0.001, sun_dir, 8.0); // Find the lighting float rsun_dif = clamp(dot(rnor, sun_dir), 0.0, 1.0); float rsky_dif = clamp(dot(rnor, vec3(0.0, 1.0, 0.0)), 0.0, 1.0); float rbou_dif = clamp(dot(rnor, vec3(0.0, -1.0, 0.0)), 0.0, 1.0); // Add the lighting vec3 rcol = vec3(7.0, 4.5, 3.0) rsun_dif * rsun_sha; rcol += vec3(0.5, 0.8, 0.9) * (rsky_dif * 0.8 + 0.2); rcol += vec3(0.7, 0.3, 0.2) * rbou_dif; rcol = rbase; rcol = pow(rcol, vec3(0.4545)) refl; //Make colour the reflected colour col += rcol; }else{ // If didn't hit anything, make sky colour. col += sky(refAng, sun_dir) * refl; } } // If not complete reflection if(refl < 1.0){ // Find shadows and lighting float sun_sha = shadow(pos + nor0.001, sun_dir, 8.0); float sun_dif = clamp(dot(nor, sun_dir), 0.0, 1.0); float sky_dif = clamp(dot(nor, vec3(0.0, 1.0, 0.0)), 0.0, 1.0); float bou_dif = clamp(dot(nor, vec3(0.0, -1.0, 0.0)), 0.0, 1.0); //Add lighting to colour col += vec3(7.0, 4.5, 3.0) sun_dif * sun_sha * (1.0 - refl); col += vec3(0.5, 0.8, 0.9) * (sky_dif * 0.8 + 0.2) * (1.0 - refl); col += vec3(0.7, 0.3, 0.2) * bou_dif * (1.0 - refl); } col = base; }else{ // Colour in sky col = sky(ray_direction, sun_dir); } // Add gamma correction col = pow(col, vec3(0.4545)); // Set colour. gl_FragColor = vec4(col, 1.0); }</script> <script id="ky__jsC" type="notjs">var time = 0; var speed = 1; draw = function(){ u_vec2("u_resolution", width, height); u_float("u_time", time / 40); //u_float("u_time", frameCount / 40); time += speed; if(mouseIsPressed){ speed += 0.01; }else{ speed -= 0.01; } speed = Math.max(Math.min(speed, 2.5), 0.5); };</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.9/ace.js"></script> <script id="jscbk" type="application/javascript"></script> <script src="https://cdn.jsdelivr.net/gh/KY246/GLSLforKHAN@35/v2.0.js"></script> <script type="application/javascript"> // Credit to Bluebird for this section. // @birdwatcher03 on Khan Academy var bb__save = function(){ var code = ky__pageBasics[0].replace("<title>WIP</title>", "<title>"+document.title+"</title>") + "\n var ky__width = " + ky__width + ";\n var ky__height = " + ky__height + ";\n var ky__prgmID = \"" + ky__prgmID + "\";\n var ky__importantKey = \""+ Math.floor(Math.random() 100000000) +"\";\n " + ky__pageBasics[1] + ky__editor.getValue() + ky__pageBasics[2] + ky__editor2.getValue() + ky__pageBasics[3]; window.top.postMessage(JSON.stringify({ code: code }), "https://www.khanacademy.org"); window.top.postMessage(ky__pic, "https://www.khanacademy.org/"); }; var bb__handleSave = function(e) { if (JSON.parse(e.data).screenshot) { setTimeout(function() { console.log("Saving..."); bb__save(); }, 1000) } }; window.parent.savers = window.parent.savers \|\| 0; window.parent.addEventListener('message', bb__handleSave); window.parent.savers += 1; for (window.parent.savers; window.parent.savers > 1; window.parent.savers -= 1) { window.parent.removeEventListener('message', bb__handleSave) } </script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgL2S98iJCww
Votes	203
Spin-Offs	19
Type
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Ky
Author Name	KyProgramming
Author ID	kaid_734655799699922356147662
Author Profile Access	COACH

Archive Data

Added	1 years ago, 1707881043605
Updated	10 months ago, 1739455349963
Source Deleted	unknown