├── FinalWireFrameRaymarch.klproj ├── README.md ├── images ├── figure1.png ├── figure2.png └── figure3.png ├── normals-and-lighting (1).klproj ├── raymarcherWeWroteTogether.klproj └── transp_refraction.klproj /FinalWireFrameRaymarch.klproj: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CharStiles/raymarching/2633dfbb23bdd370b35187aaf2cb46a4b32840b8/FinalWireFrameRaymarch.klproj -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # raymarching 2 | ![raymarching1](images/figure1.png) 3 | ![raymarching1](images/figure2.png) 4 | ![raymarching1](images/figure3.png) 5 | 6 | This is the code: 7 | 8 | ```GLSL 9 | 10 | #ifdef GL_ES 11 | precision highp float; 12 | #endif 13 | 14 | // These are defined by Kodelife, or whatever environment you are using. 15 | uniform float time; 16 | uniform vec2 resolution; 17 | 18 | varying vec3 v_normal; 19 | varying vec2 v_texcoord; 20 | 21 | // Define some constants 22 | const int steps = 128; // This is the maximum amount a ray can march. 23 | const float smallNumber = 0.001; 24 | const float maxDist = 10.; // This is the maximum distance a ray can travel. 25 | 26 | float scene(vec3 position){ 27 | // So this is different from the sphere equation above in that I am 28 | // splitting the position into its three different positions 29 | // and adding a 10th of a cos wave to the x position so it oscillates left 30 | // to right and a (positive) sin wave to the z position 31 | // so it will go back and forth. 32 | float sphere = length( 33 | vec3( 34 | position.x + cos(time)/10., 35 | position.y, 36 | position.z+ sin(time) +1.) 37 | )-0.5; 38 | 39 | // This is different from the ground equation because the UV is only 40 | // between -1 and 1 we want more than 1/2pi of a wave per length of the 41 | // screen so we multiply the position by a factor of 10 inside the trig 42 | // functions. Since sin and cos oscillate between -1 and 1, that would be 43 | // the entire height of the screen so we divide by a factor of 10. 44 | float ground = position.y + sin(position.x * 10.) / 10. 45 | + cos(position.z * 10.) / 10. + 1.; 46 | 47 | // We want to return whichever one is closest to the ray, so we return the 48 | // minimum distance. 49 | return min(sphere,ground); 50 | } 51 | vec4 trace (vec3 origin, vec3 direction){ 52 | 53 | float dist = 0.; 54 | float totalDistance = 0.; 55 | vec3 positionOnRay = origin; 56 | 57 | for(int i = 0 ; i < steps; i++){ 58 | 59 | dist = scene(positionOnRay); 60 | 61 | // Advance along the ray trajectory the amount that we know the ray 62 | // can travel without going through an object. 63 | positionOnRay += dist * direction; 64 | 65 | // Total distance is keeping track of how much the ray has traveled 66 | // thus far. 67 | totalDistance += dist; 68 | 69 | // If we hit an object or are close enough to an object, 70 | if (dist < smallNumber){ 71 | // return the distance the ray had to travel normalized so be white 72 | // at the front and black in the back. 73 | return 1. - (vec4(totalDistance) / maxDist); 74 | 75 | } 76 | 77 | if (totalDistance > maxDist){ 78 | 79 | return vec4(0.); // Background color. 80 | } 81 | } 82 | 83 | return vec4(0.);// Background color. 84 | } 85 | 86 | // main is a reserved function that is going to be called first 87 | void main(void) 88 | { 89 | // We are redefining the UV coordinates (aka texcoords) to be 0,0 in the 90 | // middle of the screen this is because its easier to work with the camera at 91 | // (0,0) instead of (0.5,0.5) for the SDFs 92 | vec2 uv = -1. + 2. * v_texcoord; 93 | // Unfortunately our screens are not square so we must account for that. 94 | uv.x *= (resolution.x / resolution.y); 95 | 96 | vec3 rayOrigin = vec3(uv, 0.); 97 | vec3 camOrigin = vec3(0., 0., -1.); 98 | vec3 direction = camOrigin + rayOrigin; 99 | 100 | // This reserved variable is what we must set the final color to 101 | gl_FragColor = trace(rayOrigin, direction); 102 | } 103 | ``` 104 | 105 | Resources going forward: 106 | 107 | * [Here is an SDF library](http://mercury.sexy/hg_sdf/) from a demoscene group. 108 | 109 | 110 | * Again linking the useful function sheet I put together: [Glsl sticker sheet](https://gist.github.com/CharStiles/e6fec016967c6c8fd648aa4b6c0055cc) 111 | * [This ray marching tutorial](https://github.com/ajweeks/RaymarchingWorkshop) he does it a little differently than we did, so it would be good to go over that, but if you want to skip to stuff like simple shading and material go to the half way point. 112 | * If a prompt sounds tempting I propose this: take this smooth min function and combine two different shapes together, and add some movement to the piece! This little exercise will be very rewarding. 113 | 114 | 115 | ``` 116 | // polynomial smooth min (k = 0.1); 117 | float sminCubic(float a, float b, float k) 118 | { 119 | 120 | float h = max(k-abs(a-b), 0.0); 121 | return min(a, b) - h*h*h/(6.0*k*k); 122 | } 123 | ``` 124 | 125 | Let me know if you make anything! Even if it's a little thing, let me know we can document it and make a recurser online gallery :D -------------------------------------------------------------------------------- /images/figure1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CharStiles/raymarching/2633dfbb23bdd370b35187aaf2cb46a4b32840b8/images/figure1.png -------------------------------------------------------------------------------- /images/figure2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CharStiles/raymarching/2633dfbb23bdd370b35187aaf2cb46a4b32840b8/images/figure2.png -------------------------------------------------------------------------------- /images/figure3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CharStiles/raymarching/2633dfbb23bdd370b35187aaf2cb46a4b32840b8/images/figure3.png -------------------------------------------------------------------------------- /normals-and-lighting (1).klproj: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CharStiles/raymarching/2633dfbb23bdd370b35187aaf2cb46a4b32840b8/normals-and-lighting (1).klproj -------------------------------------------------------------------------------- /raymarcherWeWroteTogether.klproj: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CharStiles/raymarching/2633dfbb23bdd370b35187aaf2cb46a4b32840b8/raymarcherWeWroteTogether.klproj -------------------------------------------------------------------------------- /transp_refraction.klproj: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CharStiles/raymarching/2633dfbb23bdd370b35187aaf2cb46a4b32840b8/transp_refraction.klproj --------------------------------------------------------------------------------