30:T463,md`## Ray casting When dealing with objects in 3D, we must find a way to establish a 1 to 1 mapping between pixels of an image and the distance to an object. This can be done by adopting the idea of ray-casting, where a ray is fired from the camera through the center of each pixel. By determining the intersection of a ray with the closest object on the scene, one can compute a color for it using some illumination model, including shadows and other nice effects. The picture below, borrowed from [wikipedia](https://en.wikipedia.org/wiki/Ray_tracing_(graphics)), gives us an idea of the process. ${html`${await FileAttachment("Ray_trace_diagram.svg").text()}`} ### Ray-object intersections Computing intersections requires finding roots of an equation. Intersecting a ray with respect to a sphere, for instance, requires solving a quadratic equation. Below we show how to ray cast a single sphere of unit radius centered at the origin using a fragment shader. `31:T4ac,viewof rayCasting = toy(` const float MAX_DIST = 100.0; // Our definition of "way too far" const float fieldOfView = radians(45.0); // Vertical camera angle const vec3 eye = vec3(0.0, 0.0, 6.0); // Position of the eye /** * Returns the distance from a sphere of unit radius to the eye * along a ray with direction dir. Returns MAX_DIST if ray misses the sphere. **/ float sphereIntersection (vec3 dir) { vec3 w = -eye; float c = dot(eye,eye) - 1.0; float b = -2.0 * dot(eye,dir); float a = 1.0; float delta = b*b - 4.0*a*c; if (delta < 0.0) return MAX_DIST; return (-b - sqrt(delta))/2.0/a; } /** * Normalized vector passing through pixel fragCoord. **/ vec3 rayDirection(vec2 fragCoord) { vec2 xy = fragCoord - u_resolution / 2.0; float z = u_resolution.y / tan(fieldOfView / 2.0); return normalize(vec3(xy, -z)); } /** * Ray casts a unit sphere. Fragment is set to red * if ray hits the sphere and to black otherwise. **/ void main( ) { vec3 dir = rayDirection(gl_FragCoord.xy); float dist = sphereIntersection(dir); if (dist == MAX_DIST) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); } else { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); } }` )32:T894,md`## Ray marching The main problem with ray casting is that rays must be intersected with every object in the scene in order to establish which one is closest. Also, root finding is not always a straightforward process. Here's where the idea of ray marching comes in to save the day. Rather that solving intersections analytically, the problem is solved iteratively. More importantly, one only needs to know the SDF of the objects at hand in order to compute an approximate answer to the problem. The idea goes like this. Let us consider a ray ${tex`r(t) = p + t \vec v`}, where ${tex`p`} is the position of the eye and ${tex`\vec v`} is the direction of propagation. Suppose now that we know the SDF ${tex`f(q)`} of an object, i.e., ${tex`f`} tells us the distance from the object to any point ${tex`q`}. Then, we can start our intersection algorithm by computing

${tex`d_0 = f(p).`}

If this gives us a negative number, then the eye is inside the object, and we are done. Otherwise, we 'march' the eye by advancing it along the ray to point

${tex`p_1 = p + d_0 \vec v`}.

This new point can at most be on the surface of the object, i.e., ${tex`f(p_1) \geq 0.`} If this is very close to zero, one can assume that the ray 'hit' the object and we are done. Otherwise, we 'march' the eye forward along the ray by ${tex`f(p_1)`}, which is guaranteed not to overshoot the object. In other words, we compute

${tex`p_2 = p_1 + f(p_1) \vec v`},

and we can now test ${tex`f(p_2)`} again to see if we got any closer to the object. You get the idea, now! At each step, we advance the eye along the ray so that we either get quite close to the object, or we get farther and farther away. We use a small constant to establish the first case, and a large constant (or limit the number of iterations) to establish the second case. The picture below, borrowed from [GPU Gems II](https://developer.nvidia.com/gpugems/gpugems2/part-i-geometric-complexity/chapter-8-pixel-displacement-mapping-distance-functions) illustrates the process. ${await FileAttachment("08_displacement_05.jpg").image()} `33:T4cf,viewof simpleMarching = toy(` const int MAX_MARCHING_STEPS = 255; const float MIN_DIST = 0.0; const float MAX_DIST = 100.0; const float EPSILON = 0.0001; const float fieldOfView = radians(45.0); // Vertical camera angle const vec3 eye = vec3(0.0, 0.0, 6.0); // Position of the eye float sphereSDF(vec3 samplePoint) { return length(samplePoint) - 1.0; } float sceneSDF(vec3 samplePoint) { return sphereSDF(samplePoint); } float shortestDistanceToSurface(vec3 marchingDirection, float start, float end) { float depth = start; for (int i = 0; i < MAX_MARCHING_STEPS; i++) { float dist = sceneSDF(eye + depth * marchingDirection); if (dist < EPSILON) { return depth; } depth += dist; if (depth >= end) { return end; } } return end; } vec3 rayDirection(vec2 fragCoord) { vec2 xy = fragCoord - u_resolution / 2.0; float z = u_resolution.y / tan(fieldOfView / 2.0); return normalize(vec3(xy, -z)); } void main( ) { vec3 dir = rayDirection(gl_FragCoord.xy); float dist = shortestDistanceToSurface(dir, MIN_DIST, MAX_DIST); if (dist > MAX_DIST - EPSILON) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); } else { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); } }`)34:T449,md`## Surface normals In order to compute an illumination model for our objects, we must know the surface normal at each point hit by the ray. Using ray-casting we typically compute the normal analytically using the gradient of the surface at the point in question. In other words, we compute

${tex.block`\nabla(f) = \left[ \frac{\partial f}{\partial x}, \frac{\partial f}{\partial y}, \frac{\partial f}{\partial z}\right]^\top`}

at the point hit by the ray. Fortunately, we can estimate the gradient numerically by sampling the SDF close to the hit point. If ${tex`\epsilon`} is a small constant, then

${ tex.block`\nabla(f) \approx \begin{bmatrix} f(x+\epsilon,y,z)-f(x-\epsilon,y,z)\\ f(x,y+\epsilon,z)-f(x,y-\epsilon,z)\\ f(x,y,z+\epsilon)-f(x,y,z-\epsilon) \end{bmatrix}`}.

Here's an adaptation of our previous ray-marching application where the colors are set to the the normal vector, i.e., the *red/green/blue* color components are set to the (absolute values of) coordinates *x/y/z* of the normal vector. ` 35:T618,viewof marchingNormals = toy(` const int MAX_MARCHING_STEPS = 255; const float MIN_DIST = 0.0; const float MAX_DIST = 100.0; const float EPSILON = 0.0001; const float fieldOfView = radians(45.0); // Vertical camera angle const vec3 eye = vec3(0.0, 0.0, 6.0); // Position of the eye float sphereSDF(vec3 samplePoint) { return length(samplePoint) - 1.0; } float sceneSDF(vec3 samplePoint) { return sphereSDF(samplePoint); } float shortestDistanceToSurface(vec3 marchingDirection, float start, float end) { float depth = start; for (int i = 0; i < MAX_MARCHING_STEPS; i++) { float dist = sceneSDF(eye + depth * marchingDirection); if (dist < EPSILON) { return depth; } depth += dist; if (depth >= end) { return end; } } return end; } vec3 rayDirection(vec2 fragCoord) { vec2 xy = fragCoord - u_resolution / 2.0; float z = u_resolution.y / tan(fieldOfView / 2.0); return normalize(vec3(xy, -z)); } vec3 normal(vec3 p) { return normalize (vec3 (sceneSDF(p+vec3(EPSILON,0.0,0.0))-sceneSDF(p-vec3(EPSILON,0.0,0.0)), sceneSDF(p+vec3(0.0,EPSILON,0.0))-sceneSDF(p-vec3(0.0,EPSILON,0.0)), sceneSDF(p+vec3(0.0,0.0,EPSILON))-sceneSDF(p-vec3(0.0,0.0,EPSILON)))); } void main( ) { vec3 dir = rayDirection(gl_FragCoord.xy); float dist = shortestDistanceToSurface(dir, MIN_DIST, MAX_DIST); if (dist > MAX_DIST - EPSILON) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); } else { gl_FragColor = vec4(abs(normal(eye + dist * dir)), 1.0); } }`)36:Tc44,viewof lightedSphere = toy(` const int MAX_MARCHING_STEPS = 255; const float MIN_DIST = 0.0; const float MAX_DIST = 100.0; const float EPSILON = 0.0001; const float fieldOfView = radians(45.0); // Vertical camera angle const vec3 eye = vec3(0.0, 0.0, 6.0); // Position of the eye float sphereSDF(vec3 samplePoint) { return length(samplePoint) - 1.0; } float sceneSDF(vec3 samplePoint) { return sphereSDF(samplePoint); } float shortestDistanceToSurface(vec3 marchingDirection, float start, float end) { float depth = start; for (int i = 0; i < MAX_MARCHING_STEPS; i++) { float dist = sceneSDF(eye + depth * marchingDirection); if (dist < EPSILON) { return depth; } depth += dist; if (depth >= end) { return end; } } return end; } vec3 rayDirection(vec2 fragCoord) { vec2 xy = fragCoord - u_resolution / 2.0; float z = u_resolution.y / tan(fieldOfView / 2.0); return normalize(vec3(xy, -z)); } vec3 normal(vec3 p) { return normalize (vec3 (sceneSDF(p+vec3(EPSILON,0.0,0.0))-sceneSDF(p-vec3(EPSILON,0.0,0.0)), sceneSDF(p+vec3(0.0,EPSILON,0.0))-sceneSDF(p-vec3(0.0,EPSILON,0.0)), sceneSDF(p+vec3(0.0,0.0,EPSILON))-sceneSDF(p-vec3(0.0,0.0,EPSILON)))); } /** * Returns the lighting contribution of a single point light source via Phong illumination. * * k_a: Ambient color * k_d: Diffuse color * k_s: Specular color * alpha: Shininess coefficient * p: position of point being lit * N: normal at p * lightPos: the position of the light * lightIntensity: color/intensity of the light */ vec3 phong (vec3 k_a, vec3 k_d, vec3 k_s, float alpha, vec3 p, vec3 N, vec3 lightPos, vec3 lightIntensity) { vec3 L = normalize(lightPos - p); vec3 V = normalize(eye - p); vec3 R = normalize(reflect(-L, N)); float dotLN = dot(L, N); float dotRV = dot(R, V); if (dotLN < 0.0) { // Light not visible from this point on the surface return k_a * lightIntensity; } if (dotRV < 0.0) { // Light reflection in opposite direction as viewer, apply only diffuse // component return lightIntensity * (k_a + k_d * dotLN); } return lightIntensity * (k_a + k_d * dotLN + k_s * pow(dotRV, alpha)); } void main( ) { vec3 dir = rayDirection(gl_FragCoord.xy); float dist = shortestDistanceToSurface(dir, MIN_DIST, MAX_DIST); if (dist > MAX_DIST - EPSILON) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); } else { vec3 p = eye + dist * dir; vec3 N = normal(p); gl_FragColor = vec4(phong (vec3 (0.2, 0.0, 0.0), // ambient vec3 (0.5, 0.0, 0.0), // diffuse vec3 (0.5, 0.5, 0.5), // specular 50.0, // shininess p, // point N, // normal at point 10.0*vec3(u_mouse/u_resolution-0.5,0.5), // light position vec3(1.0,1.0,1.0)), // light color/intensity 1.0); } }`, {render:'onmouse'}) 37:T107c,viewof renderCube = toy(` const int MAX_MARCHING_STEPS = 255; const float MIN_DIST = 0.0; const float MAX_DIST = 100.0; const float EPSILON = 0.0001; const float fieldOfView = radians(45.0); // Vertical camera angle vec3 eye = 10.0*normalize(vec3(u_mouse/u_resolution-0.5,0.5)); // Position of the eye /** * Signed distance function for a cube centered at the origin * with width = height = length = 2.0 */ float cubeSDF(vec3 p) { // If d.x < 0, then -1 < p.x < 1, and same logic applies to p.y, p.z // So if all components of d are negative, then p is inside the unit cube vec3 d = abs(p) - vec3(1.0, 1.0, 1.0); // Assuming p is inside the cube, how far is it from the surface? // Result will be negative or zero. float insideDistance = min(max(d.x, max(d.y, d.z)), 0.0); // Assuming p is outside the cube, how far is it from the surface? // Result will be positive or zero. float outsideDistance = length(max(d, 0.0)); return insideDistance + outsideDistance; } float sphereSDF(vec3 samplePoint) { return length(samplePoint) - 1.0; } float sceneSDF(vec3 samplePoint) { return cubeSDF(samplePoint); } float shortestDistanceToSurface(vec3 marchingDirection, float start, float end) { float depth = start; for (int i = 0; i < MAX_MARCHING_STEPS; i++) { float dist = sceneSDF(eye + depth * marchingDirection); if (dist < EPSILON) { return depth; } depth += dist; if (depth >= end) { return end; } } return end; } vec3 rayDirection(vec2 fragCoord) { vec2 xy = fragCoord - u_resolution / 2.0; float z = u_resolution.y / tan(fieldOfView / 2.0); return normalize(vec3(xy, -z)); } vec3 normal(vec3 p) { return normalize (vec3 (sceneSDF(p+vec3(EPSILON,0.0,0.0))-sceneSDF(p-vec3(EPSILON,0.0,0.0)), sceneSDF(p+vec3(0.0,EPSILON,0.0))-sceneSDF(p-vec3(0.0,EPSILON,0.0)), sceneSDF(p+vec3(0.0,0.0,EPSILON))-sceneSDF(p-vec3(0.0,0.0,EPSILON)))); } vec3 phong (vec3 k_a, vec3 k_d, vec3 k_s, float alpha, vec3 p, vec3 N, vec3 lightPos, vec3 lightIntensity) { vec3 L = normalize(lightPos - p); vec3 V = normalize(eye - p); vec3 R = normalize(reflect(-L, N)); float dotLN = dot(L, N); float dotRV = dot(R, V); if (dotLN < 0.0) { // Light not visible from this point on the surface return k_a * lightIntensity; } if (dotRV < 0.0) { // Light reflection in opposite direction as viewer, apply only diffuse // component return lightIntensity * (k_a + k_d * dotLN); } return lightIntensity * (k_a + k_d * dotLN + k_s * pow(dotRV, alpha)); } /** * Return a transform matrix that will transform a ray from view space * to world coordinates, given the eye point, the camera target, and an up vector. * * This assumes that the center of the camera is aligned with the negative z axis in * view space when calculating the ray marching direction. See rayDirection. */ mat4 lookAt(vec3 eye, vec3 center, vec3 up) { // Based on gluLookAt man page vec3 f = normalize(center - eye); vec3 s = normalize(cross(f, up)); vec3 u = cross(s, f); return mat4( vec4(s, 0.0), vec4(u, 0.0), vec4(-f, 0.0), vec4(0.0, 0.0, 0.0, 1) ); } void main( ) { mat4 view = lookAt(eye,vec3(0.0,0.0,0.0),vec3(0.0,1.0,0.0)); vec3 dir = (view*(vec4(rayDirection(gl_FragCoord.xy),1.0))).xyz; float dist = shortestDistanceToSurface(dir, MIN_DIST, MAX_DIST); if (dist > MAX_DIST - EPSILON) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); } else { vec3 p = eye + dist * dir; vec3 N = normal(p); gl_FragColor = vec4(phong (vec3 (0.2, 0.0, 0.0), // ambient vec3 (0.5, 0.0, 0.0), // diffuse vec3 (0.5, 0.5, 0.5), // specular 50.0, // shininess p, // point N, // normal at point vec3(5.0,5.0,10.0), // light position vec3(1.0,1.0,1.0)), // light color/intensity 1.0); } }`)38:Tded,viewof cubeIntersectSphere = toy(` const int MAX_MARCHING_STEPS = 255; const float MIN_DIST = 0.0; const float MAX_DIST = 100.0; const float EPSILON = 0.0001; const float fieldOfView = radians(45.0); // Vertical camera angle vec3 eye = 10.0*normalize(vec3(u_mouse/u_resolution-0.5,0.5)); // Position of the eye float cubeSDF(vec3 p) { vec3 d = abs(p) - vec3(1.0, 1.0, 1.0); float insideDistance = min(max(d.x, max(d.y, d.z)), 0.0); float outsideDistance = length(max(d, 0.0)); return insideDistance + outsideDistance; } /** * SDF for a sphere of radius 1.2 **/ float largeSphereSDF(vec3 samplePoint) { return length(samplePoint) - 1.2; } /** * Intersection between a cube of side 2 and a sphere of radius 1.2 **/ float sceneSDF(vec3 samplePoint) { return max(cubeSDF(samplePoint),largeSphereSDF(samplePoint)); } float shortestDistanceToSurface(vec3 marchingDirection, float start, float end) { float depth = start; for (int i = 0; i < MAX_MARCHING_STEPS; i++) { float dist = sceneSDF(eye + depth * marchingDirection); if (dist < EPSILON) { return depth; } depth += dist; if (depth >= end) { return end; } } return end; } vec3 rayDirection(vec2 fragCoord) { vec2 xy = fragCoord - u_resolution / 2.0; float z = u_resolution.y / tan(fieldOfView / 2.0); return normalize(vec3(xy, -z)); } vec3 normal(vec3 p) { return normalize (vec3 (sceneSDF(p+vec3(EPSILON,0.0,0.0))-sceneSDF(p-vec3(EPSILON,0.0,0.0)), sceneSDF(p+vec3(0.0,EPSILON,0.0))-sceneSDF(p-vec3(0.0,EPSILON,0.0)), sceneSDF(p+vec3(0.0,0.0,EPSILON))-sceneSDF(p-vec3(0.0,0.0,EPSILON)))); } vec3 phong (vec3 k_a, vec3 k_d, vec3 k_s, float alpha, vec3 p, vec3 N, vec3 lightPos, vec3 lightIntensity) { vec3 L = normalize(lightPos - p); vec3 V = normalize(eye - p); vec3 R = normalize(reflect(-L, N)); float dotLN = dot(L, N); float dotRV = dot(R, V); if (dotLN < 0.0) { // Light not visible from this point on the surface return k_a * lightIntensity; } if (dotRV < 0.0) { // Light reflection in opposite direction as viewer, apply only diffuse // component return lightIntensity * (k_a + k_d * dotLN); } return lightIntensity * (k_a + k_d * dotLN + k_s * pow(dotRV, alpha)); } mat4 lookAt(vec3 eye, vec3 center, vec3 up) { // Based on gluLookAt man page vec3 f = normalize(center - eye); vec3 s = normalize(cross(f, up)); vec3 u = cross(s, f); return mat4( vec4(s, 0.0), vec4(u, 0.0), vec4(-f, 0.0), vec4(0.0, 0.0, 0.0, 1) ); } void main( ) { mat4 view = lookAt(eye,vec3(0.0,0.0,0.0),vec3(0.0,1.0,0.0)); vec3 dir = (view*(vec4(rayDirection(gl_FragCoord.xy),1.0))).xyz; float dist = shortestDistanceToSurface(dir, MIN_DIST, MAX_DIST); if (dist > MAX_DIST - EPSILON) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); } else { vec3 p = eye + dist * dir; vec3 N = normal(p); gl_FragColor = vec4(phong (vec3 (0.2, 0.0, 0.0), // ambient vec3 (0.5, 0.0, 0.0), // diffuse vec3 (0.5, 0.5, 0.5), // specular 50.0, // shininess p, // point N, // normal at point vec3(5.0,5.0,10.0), // light position vec3(1.0,1.0,1.0)), // light color/intensity 1.0); } }`)39:T9d1,md`## Applying transformations When combining several complicated SDFs very frequently we'd like to apply affine transformations to the objects. This is also in line with what CSG is all about, since the scheme allows applying arbitrary affine transformations to the tree nodes. How does one go about this without having to rewrite the SDFs by hand, like we did in the example above, where we changed the definition of \`sphereSDF()\` in order to render a sphere of radius 1.2 rather than 1? When ray-casting an object transformed by ${tex`T`}, you can apply the inverse transform ${tex`T^{-1}`} to the ray, compute the intersection point ${tex`q`}, and then obtain the true intersection point ${tex`p`} by applying ${tex`T`} to ${tex`q`}, that is, ${tex`p = Tq`}. The diagram below illustrates the concept. ${html`${await FileAttachment("transformations in ray casting (2).svg").text()}`} Unfortunately, this solution does not quite help us when using ray marching. Suppose we want to ray-march an object given by SDF ${tex`f(p)`} that is transformed by ${tex`T`}. Then, we can do the following: 1. Compute distance ${tex`d = f(T^{-1}p)`}. 2. Adjust ${tex`d`} to take into account ${tex`T`}. Step 1 is easy enough for simple transformations. For instance, the inverse of a rotation of ${tex`\theta`} degrees about a given axis is equivalent to rotating the object by angle ${tex`-\theta`} about the same axis. Similarly, the inverse of a translation by ${tex`\vec u`} is a translation by ${tex`- \vec u`}, and an uniform scale by a factor of ${tex`s`} can be inverted by scaling by ${tex`s^{-1}`}. Step 2 is also easy when ${tex`T`} is a translation and/or a rotation, since these are *rigid* transformations, in the sense that they do not change the distances between points. In this case, there is no adjustment to be made. When applying an uniform scale ${tex`s`}, however, the distance from ${tex`p`} to the object will be bigger or larger by a factor of ${tex`s`}, meaning that the real distance will be ${tex`d \cdot s`}, rather than ${tex`d`}. Thus, we can rework our earlier example by rewriting the main SDF function as: \`\`\`glsl /** * Intersection between a cube translated by 't' and a unit sphere scaled by 's' **/ float sceneSDF(vec3 samplePoint) { return max(cubeSDF(samplePoint-t),sphereSDF(samplePoint/s)*s); } \`\`\` The reworked example is shown below. Drag the mouse up and down to change the radius of the sphere, and left and right to change the translation vector. `3a:Tdf7,viewof cubeIntersectSphere2 = toy(` const int MAX_MARCHING_STEPS = 255; const float MIN_DIST = 0.0; const float MAX_DIST = 100.0; const float EPSILON = 0.0001; const float fieldOfView = radians(45.0); // Vertical camera angle vec3 eye = vec3(5.0,5.0,5.0); // Position of the eye float s = 0.5+(u_resolution.y-u_mouse.y)/u_resolution.y; // Scale factor vec3 t = vec3((u_resolution.x-u_mouse.x)/u_resolution.x*2.0 - 1.0); // Translate vector float cubeSDF(vec3 p) { vec3 d = abs(p) - vec3(1.0, 1.0, 1.0); float insideDistance = min(max(d.x, max(d.y, d.z)), 0.0); float outsideDistance = length(max(d, 0.0)); return insideDistance + outsideDistance; } float sphereSDF(vec3 samplePoint) { return length(samplePoint) - 1.0; } float sceneSDF(vec3 samplePoint) { return max(cubeSDF(samplePoint),-sphereSDF((samplePoint - t)/s)*s); } float shortestDistanceToSurface(vec3 marchingDirection, float start, float end) { float depth = start; for (int i = 0; i < MAX_MARCHING_STEPS; i++) { float dist = sceneSDF(eye + depth * marchingDirection); if (dist < EPSILON) { return depth; } depth += dist; if (depth >= end) { return end; } } return end; } vec3 rayDirection(vec2 fragCoord) { vec2 xy = fragCoord - u_resolution / 2.0; float z = u_resolution.y / tan(fieldOfView / 2.0); return normalize(vec3(xy, -z)); } vec3 normal(vec3 p) { return normalize (vec3 (sceneSDF(p+vec3(EPSILON,0.0,0.0))-sceneSDF(p-vec3(EPSILON,0.0,0.0)), sceneSDF(p+vec3(0.0,EPSILON,0.0))-sceneSDF(p-vec3(0.0,EPSILON,0.0)), sceneSDF(p+vec3(0.0,0.0,EPSILON))-sceneSDF(p-vec3(0.0,0.0,EPSILON)))); } vec3 phong (vec3 k_a, vec3 k_d, vec3 k_s, float alpha, vec3 p, vec3 N, vec3 lightPos, vec3 lightIntensity) { vec3 L = normalize(lightPos - p); vec3 V = normalize(eye - p); vec3 R = normalize(reflect(-L, N)); float dotLN = dot(L, N); float dotRV = dot(R, V); if (dotLN < 0.0) { // Light not visible from this point on the surface return k_a * lightIntensity; } if (dotRV < 0.0) { // Light reflection in opposite direction as viewer, apply only diffuse // component return lightIntensity * (k_a + k_d * dotLN); } return lightIntensity * (k_a + k_d * dotLN + k_s * pow(dotRV, alpha)); } mat4 lookAt(vec3 eye, vec3 center, vec3 up) { // Based on gluLookAt man page vec3 f = normalize(center - eye); vec3 s = normalize(cross(f, up)); vec3 u = cross(s, f); return mat4( vec4(s, 0.0), vec4(u, 0.0), vec4(-f, 0.0), vec4(0.0, 0.0, 0.0, 1) ); } void main( ) { mat4 view = lookAt(eye,vec3(0.0,0.0,0.0),vec3(0.0,1.0,0.0)); vec3 dir = (view*(vec4(rayDirection(gl_FragCoord.xy),1.0))).xyz; float dist = shortestDistanceToSurface(dir, MIN_DIST, MAX_DIST); if (dist > MAX_DIST - EPSILON) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); } else { vec3 p = eye + dist * dir; vec3 N = normal(p); gl_FragColor = vec4(phong (vec3 (0.2, 0.0, 0.0), // ambient vec3 (0.5, 0.0, 0.0), // diffuse vec3 (0.5, 0.5, 0.5), // specular 50.0, // shininess p, // point N, // normal at point vec3(5.0,5.0,10.0), // light position vec3(1.0,1.0,1.0)), // light color/intensity 1.0); } }`)3b:Td68,viewof roundedCube = toy(` const int MAX_MARCHING_STEPS = 255; const float MIN_DIST = 0.0; const float MAX_DIST = 100.0; const float EPSILON = 0.0001; const float fieldOfView = radians(60.0); // Vertical camera angle vec3 eye = vec3(5.0,5.0,5.0); // Position of the eye float radius = (u_resolution.y-u_mouse.y)/u_resolution.y*0.3; // Torus radii float cubeSDF(vec3 p) { vec3 d = abs(p) - vec3(1.0, 1.0, 1.0); float insideDistance = min(max(d.x, max(d.y, d.z)), 0.0); float outsideDistance = length(max(d, 0.0)); return insideDistance + outsideDistance; } float sphereSDF(vec3 samplePoint) { return length(samplePoint) - 1.0; } float sceneSDF(vec3 p) { return cubeSDF(p) - radius; } float shortestDistanceToSurface(vec3 marchingDirection, float start, float end) { float depth = start; for (int i = 0; i < MAX_MARCHING_STEPS; i++) { float dist = sceneSDF(eye + depth * marchingDirection); if (dist < EPSILON) { return depth; } depth += dist; if (depth >= end) { return end; } } return end; } vec3 rayDirection(vec2 fragCoord) { vec2 xy = fragCoord - u_resolution / 2.0; float z = u_resolution.y / tan(fieldOfView / 2.0); return normalize(vec3(xy, -z)); } vec3 normal(vec3 p) { return normalize (vec3 (sceneSDF(p+vec3(EPSILON,0.0,0.0))-sceneSDF(p-vec3(EPSILON,0.0,0.0)), sceneSDF(p+vec3(0.0,EPSILON,0.0))-sceneSDF(p-vec3(0.0,EPSILON,0.0)), sceneSDF(p+vec3(0.0,0.0,EPSILON))-sceneSDF(p-vec3(0.0,0.0,EPSILON)))); } vec3 phong (vec3 k_a, vec3 k_d, vec3 k_s, float alpha, vec3 p, vec3 N, vec3 lightPos, vec3 lightIntensity) { vec3 L = normalize(lightPos - p); vec3 V = normalize(eye - p); vec3 R = normalize(reflect(-L, N)); float dotLN = dot(L, N); float dotRV = dot(R, V); if (dotLN < 0.0) { // Light not visible from this point on the surface return k_a * lightIntensity; } if (dotRV < 0.0) { // Light reflection in opposite direction as viewer, apply only diffuse // component return lightIntensity * (k_a + k_d * dotLN); } return lightIntensity * (k_a + k_d * dotLN + k_s * pow(dotRV, alpha)); } mat4 lookAt(vec3 eye, vec3 center, vec3 up) { // Based on gluLookAt man page vec3 f = normalize(center - eye); vec3 s = normalize(cross(f, up)); vec3 u = cross(s, f); return mat4( vec4(s, 0.0), vec4(u, 0.0), vec4(-f, 0.0), vec4(0.0, 0.0, 0.0, 1) ); } void main( ) { mat4 view = lookAt(eye,vec3(0.0,0.0,0.0),vec3(0.0,1.0,0.0)); vec3 dir = (view*(vec4(rayDirection(gl_FragCoord.xy),1.0))).xyz; float dist = shortestDistanceToSurface(dir, MIN_DIST, MAX_DIST); if (dist > MAX_DIST - EPSILON) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); } else { vec3 p = eye + dist * dir; vec3 N = normal(p); gl_FragColor = vec4(phong (vec3 (0.2, 0.0, 0.0), // ambient vec3 (0.5, 0.0, 0.0), // diffuse vec3 (0.5, 0.5, 0.5), // specular 50.0, // shininess p, // point N, // normal at point vec3(5.0,5.0,10.0), // light position vec3(1.0,1.0,1.0)), // light color/intensity 1.0); } }`)3c:T458,viewof shapeScene = { let scenes = { torus : ` vec2 radii = 0.1+(u_resolution-u_mouse)/u_resolution*vec2(0.3,1.2); return torusSDF(p, radii.x, radii.y);`, cone: ` vec2 sizes = 0.1+(u_resolution-u_mouse)/u_resolution*vec2(1.5,1.5); return coneSDF(p, sizes.x, sizes.y);`, cylinder: ` vec2 sizes = 0.1+(u_resolution-u_mouse)/u_resolution*vec2(1.2,1.2); return cylinderSDF(p, sizes.x, sizes.y);`, capsule: ` vec2 sizes = 0.01+(u_resolution-u_mouse)/u_resolution*vec2(0.8,0.8); return capsuleSDF(p, sizes.x, sizes.y);`, icosahedron: ` vec2 sizes = 0.1+(u_resolution-u_mouse)/u_resolution*vec2(0.9,0.9); return icosahedronSDF (p, sizes.y);`, dodecahedron: ` vec2 sizes = 0.1+(u_resolution-u_mouse)/u_resolution*vec2(0.9,0.9); return dodecahedronSDF (p, sizes.y);`, truncated_octahedron: ` vec2 sizes = 0.1+(u_resolution-u_mouse)/u_resolution*vec2(0.9,0.9); return truncatedOctahedronSDF (p, sizes.y);`, } return select({options:Object.keys(scenes).map(k=>{return {label:k, value:scenes[k]}})}) }3d:T1bf9,viewof shapes = { let GDF = function (begin, end) { let f = ` // Generic distance function using the GDF constants float GDF${begin}_${end}(vec3 p, float r) { float d = 0.0;`; for (let i = begin; i <= end; i++) { f += ` d = max(d, abs(dot(p, GDF${i})));`; } f += ` return d - r; } `; return f; }; return toy( ` // // "Generalized Distance Functions" by Akleman and Chen. // see the Paper at https://www.viz.tamu.edu/faculty/ergun/research/implicitmodeling/papers/sm99.pdf // // This set of constants is used to construct a large variety of geometric primitives. // Indices are shifted by 1 compared to the paper because we start counting at Zero. // Some of those are slow whenever a driver decides to not unroll the loop, // which seems to happen for fIcosahedron und fTruncatedIcosahedron on nvidia 350.12 at least. // Specialized implementations can well be faster in all cases. // const float PHI = (sqrt(5.0)*0.5 + 0.5); const vec3 GDF0 = normalize(vec3(1.0, 0.0, 0.0)); const vec3 GDF1 = normalize(vec3(0.0, 1.0, 0.0)); const vec3 GDF2 = normalize(vec3(0.0, 0.0, 1.0)); const vec3 GDF3 = normalize(vec3(1.0, 1.0, 1.0 )); const vec3 GDF4 = normalize(vec3(-1.0, 1.0, 1.0)); const vec3 GDF5 = normalize(vec3(1.0, -1.0, 1.0)); const vec3 GDF6 = normalize(vec3(1.0, 1.0, -1.0)); const vec3 GDF7 = normalize(vec3(0.0, 1.0, PHI+1.0)); const vec3 GDF8 = normalize(vec3(0.0, -1.0, PHI+1.0)); const vec3 GDF9 = normalize(vec3(PHI+1.0, 0.0, 1.0)); const vec3 GDF10 = normalize(vec3(-PHI-1.0, 0.0, 1.0)); const vec3 GDF11 = normalize(vec3(1.0, PHI+1.0, 0.0)); const vec3 GDF12 = normalize(vec3(-1.0, PHI+1.0, 0.0)); const vec3 GDF13 = normalize(vec3(0.0, PHI, 1.0)); const vec3 GDF14 = normalize(vec3(0.0, -PHI, 1.0)); const vec3 GDF15 = normalize(vec3(1.0, 0.0, PHI)); const vec3 GDF16 = normalize(vec3(-1.0, 0.0, PHI)); const vec3 GDF17 = normalize(vec3(PHI, 1.0, 0.0)); const vec3 GDF18 = normalize(vec3(-PHI, 1.0, 0.0)); const int MAX_MARCHING_STEPS = 255; const float MIN_DIST = 0.0; const float MAX_DIST = 100.0; const float EPSILON = 0.0001; const float fieldOfView = radians(45.0); // Vertical camera angle vec3 eye = vec3(5.0,5.0,5.0); // Position of the eye // cube float cubeSDF(vec3 p) { vec3 d = abs(p) - vec3(1.0, 1.0, 1.0); float insideDistance = min(max(d.x, max(d.y, d.z)), 0.0); float outsideDistance = length(max(d, 0.0)); return insideDistance + outsideDistance; } // sphere float sphereSDF(vec3 samplePoint) { return length(samplePoint) - 1.0; } // Torus on the xz plane. float torusSDF (vec3 p, float smallRadius, float largeRadius) { return length(vec2(length(p.xz) - largeRadius, p.y)) - smallRadius; } // Cone with correct distances to tip and base circle. Y is up, 0 is in the middle of the base. float coneSDF(vec3 p, float radius, float height) { vec2 q = vec2(length(p.xz), p.y); vec2 tip = q - vec2(0, height); vec2 mantleDir = normalize(vec2(height, radius)); float mantle = dot(tip, mantleDir); float d = max(mantle, -q.y); float projected = dot(tip, vec2(mantleDir.y, -mantleDir.x)); // distance to tip if ((q.y > height) && (projected < 0.0)) { d = max(d, length(tip)); } // distance to base ring if ((q.x > radius) && (projected > length(vec2(height, radius)))) { d = max(d, length(q - vec2(radius, 0.0))); } return d; } // Cylinder standing upright on the xz plane float cylinderSDF(vec3 p, float r, float height) { float d = length(p.xz) - r; d = max(d, abs(p.y) - height); return d; } // Capsule: A Cylinder with round caps on both sides float capsuleSDF(vec3 p, float r, float c) { return mix(length(p.xz) - r, length(vec3(p.x, abs(p.y) - c, p.z)) - r, step(c, abs(p.y))); } ${GDF(3, 12)} // Icosahedron of radius r float icosahedronSDF (vec3 p, float r) { return GDF3_12(p,r); } ${GDF(13, 18)} // Dodecahedron of radius r float dodecahedronSDF (vec3 p, float r) { return GDF13_18(p,r); } ${GDF(0, 6)} float truncatedOctahedronSDF (vec3 p, float r) { return GDF0_6(p, r); } float sceneSDF(vec3 p) { ${shapeScene} } float shortestDistanceToSurface(vec3 eye, vec3 marchingDirection, float start, float end) { float depth = start; for (int i = 0; i < MAX_MARCHING_STEPS; i++) { float dist = sceneSDF(eye + depth * marchingDirection); if (dist < EPSILON) { return depth; } depth += dist; if (depth >= end) { return end; } } return end; } vec3 rayDirection(vec2 fragCoord) { vec2 xy = fragCoord - u_resolution / 2.0; float z = u_resolution.y / tan(fieldOfView / 2.0); return normalize(vec3(xy, -z)); } vec3 normal(vec3 p) { return normalize (vec3 (sceneSDF(p+vec3(EPSILON,0.0,0.0))-sceneSDF(p-vec3(EPSILON,0.0,0.0)), sceneSDF(p+vec3(0.0,EPSILON,0.0))-sceneSDF(p-vec3(0.0,EPSILON,0.0)), sceneSDF(p+vec3(0.0,0.0,EPSILON))-sceneSDF(p-vec3(0.0,0.0,EPSILON)))); } vec3 phong (vec3 k_a, vec3 k_d, vec3 k_s, float alpha, vec3 p, vec3 N, vec3 lightPos, vec3 lightIntensity) { vec3 L = normalize(lightPos - p); vec3 V = normalize(eye - p); vec3 R = normalize(reflect(-L, N)); float dotLN = dot(L, N); float dotRV = dot(R, V); if (dotLN < 0.0) { // Light not visible from this point on the surface return k_a * lightIntensity; } if (dotRV < 0.0) { // Light reflection in opposite direction as viewer, apply only diffuse // component return lightIntensity * (k_a + k_d * dotLN); } return lightIntensity * (k_a + k_d * dotLN + k_s * pow(dotRV, alpha)); } mat4 lookAt(vec3 eye, vec3 center, vec3 up) { // Based on gluLookAt man page vec3 f = normalize(center - eye); vec3 s = normalize(cross(f, up)); vec3 u = cross(s, f); return mat4( vec4(s, 0.0), vec4(u, 0.0), vec4(-f, 0.0), vec4(0.0, 0.0, 0.0, 1) ); } mat4 rotationY( in float angle ) { return mat4(cos(angle), 0, sin(angle), 0, 0, 1.0, 0, 0, -sin(angle), 0, cos(angle), 0, 0, 0, 0, 1); } void main( ) { mat4 rot = rotationY(float(u_frame)*3.1416/180.0); // eye = (rot*vec4(eye,1.0)).xyz; mat4 view = lookAt(eye,vec3(0.0,0.0,0.0),vec3(0.0,1.0,0.0)); vec3 dir = (view*(vec4(rayDirection(gl_FragCoord.xy),1.0))).xyz; float dist = shortestDistanceToSurface(eye, dir, MIN_DIST, MAX_DIST); if (dist > MAX_DIST - EPSILON) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); } else { vec3 p = eye + dist * dir; vec3 N = normal(p); gl_FragColor = vec4(phong (vec3 (0.2, 0.0, 0.0), // ambient vec3 (0.5, 0.0, 0.0), // diffuse vec3 (0.5, 0.5, 0.5), // specular 50.0, // shininess p, // point N, // normal at point vec3(5.0,5.0,10.0), // light position vec3(1.0,1.0,1.0)), // light color/intensity 1.0); } }`, { render: "continuous" } ); }3e:T8a2,// // Creates a canvas and runs a WebGL program that draws two triangles covering the whole canvas, where // the fragment processing is performed by 'shader', which should be valid fragment shader code. // Some useful uniforms are automaticlly passed to the shader: // . u_resolution, a vec2 containing the width and height of the canvas. // . u_mouse, a vec2 containing the position of the mouse in the canvas. // . u_frame, an int containing the number of frames rendered so far. // By default, the canvas is rendered a single time and once again for each click or drag of the mouse. toy = function (shader, options = {}) { let { width = 512, height = 512, render = "onmouse" } = options; let canvas = DOM.canvas(width, height); let regl = createRegl({ canvas }); let uniforms = { u_resolution: [width, height], u_frame: 0, u_mouse: [0, 0] }; let draw = regl({ frag: ` precision mediump float; uniform vec2 u_resolution; uniform int u_frame; uniform vec2 u_mouse; ` + shader, vert: ` attribute vec2 position; void main () { gl_Position = vec4(position, 0, 1); }`, attributes: { position: [ [-1, -1], [1, -1], [1, 1], [1, 1], [-1, 1], [-1, -1] ] }, uniforms: { u_resolution: regl.prop("u_resolution"), u_frame: regl.prop("u_frame"), u_mouse: regl.prop("u_mouse") }, count: 6 }); let requestId = null; function renderFrame() { uniforms.u_frame++; draw(uniforms); } canvas.onmousedown = (e) => { uniforms.u_mouse = [e.offsetX, height - e.offsetY]; if (render != "single") renderFrame(); }; canvas.onmousemove = (e) => { uniforms.u_mouse = [e.offsetX, height - e.offsetY]; if (render != "single" && e.buttons != 0) renderFrame(); }; invalidation.then(() => { if (requestId) cancelAnimationFrame(requestId); }); canvas.value = shader; if (render == "continuous") { function animationRender() { renderFrame(); requestId = requestAnimationFrame(animationRender); } animationRender(); } else { renderFrame(); } return canvas; }3f:T43e,playerBar = function (w,h) { let bar = html`