2d:null 2e:["$","title",null,{"children":"Introduction to Raymarching Distance Functions | Gaëtan Renaudeau | Observable"}] 33:T4a0,md`# Introduction to Raymarching Distance Functions > Previous article: [Introduction to Functional Rendering](/@gre/introduction-to-functional-rendering-paradigm). We'll now see how we can apply [Functional Rendering](/@gre/introduction-to-functional-rendering-paradigm) principle to rendering a 3D scene by raymarching distance functions (also known as "signed distance functions" / "distance estimation functions"). Bunch of crazy demos on Shadertoy.com are based on this principle. http://jamie-wong.com/2016/07/15/ray-marching-signed-distance-functions/ was a great inspiration for me to dig Distance Estimation Functions the past year, and therefore this article might more or less reflect it. See also this great scene with some primitives: https://www.shadertoy.com/view/Xds3zN. I've written last summer two games entirely based on this rendering principle in GLSL: [**memocart**](https://greweb.itch.io/memocart) that I had so much fun creating (and is one of my most ambitious game, on the technical level) and [**AMAZ3D**](https://greweb.itch.io/amaz3d) which is quite close to this present scene. The final goal is to create a scene when some complex shapes in it: `34:T627,function simpleRaymarch (uv, scene) { // uv: is the pixel position of the canvas (normalized in 0 to 1) // scene: is a function that give the closest object distance for a given point in space // We will initialize a ray using the canvas coordinate and pointing along Z axis. we normalize it. the third value "1" can be modified to have a different "camera zoom". (perspective projection, not orthgraphic) const direction = normalize([ 2 * uv[0] - 1, 2 * uv[1] - 1, 1 ]); // Now we'll "raymarch", throw the current ray using the direction, accumlate the distance to the closest object and stop if reached. let totalDist = 0.0; const ITERATIONS = 40; // how much iteration for our algorithm? increase for better quality, decrease for better performance for (let i = 0; i < ITERATIONS; i++) { // p is the 3D position of our "photon" along the ray direction const p = mul(direction, totalDist); // we use that 3D position to calculate the distance with closest object in space. const dist = scene(p); // in our case, we accumulate that distance to progress our photon for the next iteration totalDist += dist; } // Now, we know exactly when our ray hits an object in space. // We're simply going to use the the distance to reach the object to color the pixel: // I call this the fog factor because it's how much you lose "light" with the distance". Our object is just going to emit a RED color! const fogFactor = smoothstep(10, 50, totalDist); return mix([ 1, 0, 0 ], [ 0.1, 0.1, 0.1 ], fogFactor).concat(1.0); }35:T478,function finalScene (p) { // We are offsetting out camera. actually think of it more that we are offseting our "photon". //p = add(p, [ 5, 5.8, -0.2 ]); // Place the origin p = add(p, [0, -1, -2.2]); // rotate with an angle const rotY = 0.3; p[1] = Math.cos(rotY) * p[1] + Math.sin(rotY) * p[2]; p[2] = -Math.sin(rotY) * p[1] + Math.cos(rotY) * p[2]; // Offseting a bit the position will create a cool blob effect. This is cheating a bit with the system because it makes the distance function wrong so we have to be careful about this usage p[0] += 0.02 * Math.cos(8 * p[1] + 3 * p[2]); p[1] += 0.02 * Math.sin(6 * p[2] + 7 * p[0]); p[2] += 0.02 * Math.cos(8 * p[0] + 9 * p[0]); // We are repeating the space! again this is cheating again, but basically this allow use to repeat objects for free! p = opRep(p, [ 10, 14, 4 ]); // Now, we're applying our sphere distance equation const sphere = sdSphere(p, 0.7); p = add(p, [0, 0.8, 0]); const cylinder = sdCappedCylinder(p, [0.4, 0.5]); const shape = smin(sphere, cylinder, 0.5); // And we can return this distance! return shape }36:[] 31:{"id":"65ef65f8c6dae12b","slug":"introduction-to-raymarching-distance-functions","title":"Introduction to Raymarching Distance Functions","thumbnail":"39b74305d6b55a0dc304f1d0f5051507a07dc321a1072d93e8825e8f4eb5e60c","access_level":"public","create_time":"$D2018-06-17T12:07:38.136Z","update_time":"$D2018-07-05T14:46:38.224Z","view_time":null,"first_public_time":"$D2018-07-01T19:30:03.646Z","has_unpublished_edits":null,"fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"b1024f93b6b4e7d0","login":"gre","name":"Gaëtan Renaudeau","avatar_url":"https://avatars-next.observableusercontent.com/6d5591f312c9765b0484a27463898aa7df95d18bcc179a2af9bf06b68140271a","tier":"starter_2024"},"version":857,"publish_version":857,"role":null,"authored":false,"authors":[{"type":"individual","id":"e7fc6dcf0584692d","login":"gre","name":"gre","avatar_url":"https://avatars-next.observableusercontent.com/bf7f0e8641c7695873e2b77edefeb328214cb70819dc00e056d2a660dfaead4b","tier":null}],"members":[{"type":"individual","id":"e7fc6dcf0584692d","login":"gre","name":"gre","avatar_url":"https://avatars-next.observableusercontent.com/bf7f0e8641c7695873e2b77edefeb328214cb70819dc00e056d2a660dfaead4b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Introduction to Raymarching Distance Functions","cells":[{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"canvas(uv => simpleRaymarchWithLighting2(uv, finalScene, [0.2, 0.8, 1.0], {\n direction: [0.5, -1.0, 0.0],\n color: [1, 1, 1]\n}, [0.2, 0.45, 0.6]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"md`\n*Once again, for the sake of this article we'll use Canvas2D. This is definitely slow so we're rendering things small. In real life you would use GLSL and which would run at 60fps*\n\nYou can see in the code we're using again the \"Functional Rendering\" canvas function from previous article.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"function canvas (draw, opts) {\n const { width, height, pixelRatio } = {\n width: 120,\n height: 120,\n pixelRatio: 1,\n ...opts\n };\n const c = document.createElement(\"canvas\");\n c.width = pixelRatio * width;\n c.height = pixelRatio * height;\n c.style.width = width + \"px\";\n c.style.height = height + \"px\";\n const ctx = c.getContext(\"2d\");\n const pixels = ctx.getImageData(0, 0, c.width, c.height);\n for (let y=0; ysource: http://jamie-wong.com/2016/07/15/ray-marching-signed-distance-functions/\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"md`\nOk cool, we've implemented a first version of our raymarching, but how to actually use it? we still remain to implement our \"scene\" that will define the 3D object shapes...\n\n### Sphere\n\nWe're starting by implementing out first primitive, a sphere:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"function sdSphere(p, radius) {\n return length(p) - radius;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"function length (v) { return Math.sqrt(v.reduce((sum, x) => sum + x * x, 0)) }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"md`\n**length** is simply calculating the euclidian distance of a vector. we simply need to remove the radius of the sphere.\n\nremember that p will be used as a \"photon\" position, the position you query to know what's the distance to the sphere.\n\n> Note that this \\`sdSphere\\` could have taken a **center**, but instead the idea is that [0,0,0] is the center, and YOU must offset \\`p\\` to where you want to have your sphere when calling this function.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"md`\nAnd now, we can simply use this to draw our sphere!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"canvas(uv => simpleRaymarch(uv, p => {\n p = add(p, [ 0, 0, -2 ]) // we move our photon 2z behind, which means we move our sphere 2z above!\n return sdSphere(p, 0.8)\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"md`\nOk, it's just a circle you will say, as you can see we have not really a feeling of 3D because, well, our coloring is pretty simple, we don't do any lightning it's literally an object that emits without having any \"material\". We'll fix that soon.\n\nBut for now, as a second example, we'll look at how to implement a torus.\n\n### Torus\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"function sdTorus(p, t) {\n const q = [ length([ p[0], p[2] ]) - t[0], p[1] ];\n return length(q) - t[1];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"canvas(uv => simpleRaymarch(uv, ([x, y, z]) => {\n return sdTorus([ x, y, z - 2 ], [ 0.8, 0.3 ])\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"md`\nLike for the circle, we are offsetting the Z by 2 to not be in the center of the 3D object and not seeing anything. The current torus rendering is however not very interesting because we are actually looking from the side of the torus (which is pointing up).\n\nA simple way to \"look from above\" is to actually change the axis we send to **sdTorus**:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"canvas(uv => simpleRaymarch(uv, ([x, y, z]) => {\n return sdTorus([ x, z - 2, y ], [ 0.8, 0.3 ])\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"md`\nA more traditional way would be of course to use a rotation matrix.\n\nFollowing example combines 2 successive rotations, one around X-axis followed by one on Z-axis.\nIt also repeats the scene by just using modulus (like in previous article) which is pretty cool! so we can actually see many objects in the scene and you can see the fog mecanism in action.\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"viewof rotX = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"viewof rotZ = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"canvas(uv => simpleRaymarch(uv, radiusScene))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"function radiusScene (p) {\n // move the scene above\n p = add(p, [ 0, 0, -2 ]);\n \n // modulus the scene\n p = opRep(p, [ 8, 8, 8 ]);\n \n // Rotation on X axis\n let s = Math.sin(rotX);\n let c = Math.cos(rotX);\n p = [\n p[0],\n p[1] * c - p[2] * s,\n p[1] * s + p[2] * c\n ];\n \n // Rotation on Z axis\n const sZ = Math.sin(rotZ);\n const cZ = Math.cos(rotZ);\n p = [\n p[0] * cZ - p[1] * sZ,\n p[0] * sZ + p[1] * cZ,\n p[2]\n ];\n return sdTorus(p, [ 0.8, 0.3 ])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"md`\n## Lighting\n\nOk, now we'll try to have proper lightning!\n\nWe're improving the raymarching function:\n\nSo now, instead of directly using fogFactor for the color, we'll have to calculate the normal vector.\nNormal vector is a vector that is pointing up the surface of an object.\n\n![](https://upload.wikimedia.org/wikipedia/commons/c/cc/Surface_normals.svg)\n\nThen we can use that and compare with light incidence using dot product as a factor to how much light will be reflected by the object.\n\nCheckout more info in https://en.wikipedia.org/wiki/Diffuse_reflection\n\nWe are adding a materialColor to be able to define the objects color (for all objects for now).\n\nWe are also adding a light parameter to our function to define our global light for our scene rendering.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"function simpleRaymarchWithLighting (uv, scene, materialColor, light) {\n const direction = normalize([ 2 * uv[0] - 1, 2 * uv[1] - 1, 1 ]);\n let totalDist = 0.0;\n const ITERATIONS = 40;\n let p;\n for (let i = 0; i < ITERATIONS; i++) {\n p = mul(direction, totalDist);\n const dist = scene(p);\n totalDist += dist;\n }\n const fogFactor = smoothstep(10, 50, totalDist);\n \n // Basic lambert\n const normal = calculateSceneNormal(p, 0.002, scene);\n const diffuse = dot(light.direction, normal);\n const diffuseLit = mul(materialColor, mul(diffuse, light.color));\n \n return mix(diffuseLit, [0.1, 0.1, 0.1], fogFactor).concat(1.0);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"md`To calculate the normal vector of our scene, we have used this simple technique: just query the scene distance function for 6 points close to the actual point and do a simple difference:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"function calculateSceneNormal(p, smoothness, scene) {\n return normalize([\n scene(add(p, [smoothness, 0, 0])) - scene(add(p, [-smoothness, 0, 0])),\n scene(add(p, [0, smoothness, 0])) - scene(add(p, [0, -smoothness, 0])),\n scene(add(p, [0, 0, smoothness])) - scene(add(p, [0, 0, -smoothness]))\n ]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"md`\nOk, now here we go, we are rendering the previous scene again!\nwe're making the object full white and using a orange light positionned behind the camera and a bit above & left.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"canvas(uv => simpleRaymarchWithLighting(\n uv, radiusScene, [ 1, 1, 1 ], {\n direction: normalize([-0.2, -0.3, -0.5]),\n color: [1, 0.6, 0.2]\n }\n))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"md`\n### Polish\n\nTo polish things a bit, we are adding an **ambiant** parameter. It is a global color that is emitted from all objects.\n\nWe also also using **half diffuse** technique. (like in Half-Life!) Read more about it in https://developer.valvesoftware.com/wiki/Half_Lambert\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"function simpleRaymarchWithLighting2 (uv, scene, materialColor, light, ambiant) {\n const direction = normalize([ 2 * uv[0] - 1, 2 * uv[1] - 1, 1 ]);\n let totalDist = 0.0;\n const ITERATIONS = 40;\n let p;\n for (let i = 0; i < ITERATIONS; i++) {\n p = mul(direction, totalDist);\n const dist = scene(p);\n totalDist += dist;\n }\n const fogFactor = smoothstep(10, 50, totalDist);\n const normal = calculateSceneNormal(p, 0.002, scene);\n let diffuse = dot(light.direction, normal);\n diffuse = 0.5 * diffuse + 0.5; // half diffuse\n const diffuseLit = mul(materialColor, add(mul(diffuse, light.color), ambiant)); // adding ambiant\n return mix(diffuseLit, [0.1, 0.1, 0.1], fogFactor).concat(1.0);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":754,"value":"canvas(uv => simpleRaymarchWithLighting2(\n uv, radiusScene, [ 1, 1, 1 ], {\n direction: normalize([-0.2, -0.3, -0.5]),\n color: [1, 0.6, 0.2] // orange ish light\n }, [0, 0.2, 0.3 ] )) // blue ish ambiant","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"md`\n## Final scene\n\nThis article have not even covered complex shapes yet, but damn this is so easy to do in this paradigm. Like it was for functional rendering.\n\nAs this is basically math, it's very easy to do union, intersection, smooth unions, and things like that.\n\nAnd this is actually very easy in the \"distance function\", it's quite straightward to understand that:\n\n- 3D objects union is just about doing \\`min()\\` between the two distances!\n- 3D objects intersection is just about doing \\`max()\\` between the two distances!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"md`\n**For instance this is intersection between a sphere and a cylinder.**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"canvas(uv => simpleRaymarchWithLighting2(uv, p => {\n p = add(p, [0, -1, -2.2]);\n \n // Now, we're applying our sphere distance equation \n const sphere = sdSphere(p, 0.7);\n \n p = add(p, [0, 0.8, 0]);\n \n const cylinder = sdCappedCylinder(p, [0.4, 0.5]);\n \n const shape = Math.min(sphere, cylinder, 0.5);\n \n // And we can return this distance!\n return shape\n \n}, [0.2, 0.8, 1.0], {\n direction: [0.5, -1.0, 0.0],\n color: [1, 1, 1]\n}, [0.2, 0.45, 0.6]))\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":795,"value":"md`But you know what? we can implement a \"smooth min\" that will smooth the area closed to the two objects.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":796,"value":"canvas(uv => simpleRaymarchWithLighting2(uv, p => {\n p = add(p, [0, -1, -2.2]);\n const sphere = sdSphere(p, 0.7);\n p = add(p, [0, 0.8, 0]);\n const cylinder = sdCappedCylinder(p, [0.4, 0.5]);\n \n // \"smin\" variant\n const shape = smin(sphere, cylinder, 0.5);\n\n return shape\n}, [0.2, 0.8, 1.0], {\n direction: [0.5, -1.0, 0.0],\n color: [1, 1, 1]\n}, [0.2, 0.45, 0.6]))\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":804,"value":"md`This is using following \\`smin\\` function. there are many other variants to checkout.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"function smin(a, b, k) {\n const h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);\n return mix(b, a, h) - k * h * (1.0 - h);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"md`Ok, and finally, we can make the world \"bloby\" by offseting a bit the position with cos and sin.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":817,"value":"viewof blobEffect = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"canvas(uv => simpleRaymarchWithLighting2(uv, p => {\n p = add(p, [0, -1, -2.2]);\n \n // Offseting a bit the position will create a cool blob effect. This is cheating a bit with the system because it makes the distance function wrong so we have to be careful about this usage\n p[0] += blobEffect * Math.cos(8 * p[1] + 3 * p[2]);\n p[1] += blobEffect * Math.sin(6 * p[2] + 7 * p[0]);\n p[2] += blobEffect * Math.cos(8 * p[0] + 9 * p[0]);\n \n const sphere = sdSphere(p, 0.7);\n p = add(p, [0, 0.8, 0]);\n const cylinder = sdCappedCylinder(p, [0.4, 0.5]);\n const shape = smin(sphere, cylinder, 0.5);\n\n return shape\n}, [0.2, 0.8, 1.0], {\n direction: [0.5, -1.0, 0.0],\n color: [1, 1, 1]\n}, [0.2, 0.45, 0.6]))\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"md`\n> *Disclaimer: using sin and cos like this is actually dangerous because it make the distance no longer exact... The imprecisions can lead to errors in the raymarching.*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":835,"value":"md`\n## That's all folks!\n\nHope you liked this introduction.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"canvas(uv => simpleRaymarchWithLighting2(uv, finalScene, [0.2, 0.8, 1.0], {\n direction: [0.5, -1.0, 0.0],\n color: [1, 1, 1]\n}, [0.2, 0.45, 0.6]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"function opRep(p, c) {\n const m = mod(add(p, mul(c, 0.5)), c);\n return add(m, mul(c, -0.5));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"function sdBox (p, b) {\n const d = add(p.map(x => Math.abs(p)), mul(b, -1));\n return Math.min(Math.max(d[0], Math.max(d[1], d[2])), 0.0) + length(d.map(x => Math.max(x, 0.0)));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"function sdCappedCylinder(p, h) {\n const d = add([ length([ p[0], p[2] ]), p[1] ].map(x => Math.abs(x)), mul(h, -1));\n return Math.min(Math.max(d[0], d[1]), 0.0) + length(d.map(x => Math.max(x, 0.0)));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"function clamp (x, minVal, maxVal) { return Math.min(Math.max(x, minVal), maxVal); }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"function normalize (v) { const l = length(v); return v.map(x => x / l); }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"function add (a, b) { return a.map((x,i) => x + b[i]) }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"function mul (a, b) {\n if (typeof a===\"number\") {\n const tmp = b;\n b = a;\n a = tmp;\n }\n return a.map((a, i) => typeof b === \"number\" ? a * b : a * b[i])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"function dot (a, b) { return mul(a, b).reduce((sum, x) => sum + x) }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"function mix(a, b, x) {\n return typeof a === \"number\" ? a * (1 - x) + b * x : a.map((a, i) => mix(a, b[i], x));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"function mod(x, y) {\n return typeof x === \"number\" ? x - y * Math.floor(x / y) : x.map((x, i) => mod(x, typeof y === \"number\" ? y : y[i]));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"function smoothstep (min, max, value) {\n var x = Math.max(0, Math.min(1, (value-min)/(max-min)));\n return x*x*(3 - 2*x);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"