30:T409,md`# Raymarch Helper ## Usage ~~~js import { raymarch } from '@makio135/raymarch' ~~~ The \`raymarch\` helper is based on the \`fragment\` helper from [@makio135/hello-fragment](https://observablehq.com/@makio135/hello-fragment). **This is an improved version of [@makio135/hello-raymarching](https://observablehq.com/@makio135/hello-raymarching).** \`raymarch(options)\` where \`options\` is an \`Object\` with the following defaults: ~~~js const options = { sceneSDF: \`vec2 sceneSDF(vec3 p) { return vec2(length(p) - 1., 1.); }\`, eye: \`vec3(0.0, 0.0, 4.0)\`, target: \`vec3(0.0)\`, background: \`vec3(0.6 - length((gl_FragCoord.xy - u_resolution / 2.) / u_resolution.x));\`, distMin: 0.001, distMax: 20, computeColor: phong(), raymarchingSteps: 100, antiAliasing: 1, w: width, // width of the canvas in pixels. Number h: 400, // height of the canvas in pixels. Number play: true, // state of the animation on start. Boolean logShader: false, // return the fragment shader string. Boolean } ~~~`31:T554,await visibility(), raymarch({ eye: `vec3(cos((u_mouse.x / u_resolution.x) * TAU) * 8., 2., sin((u_mouse.x - u_resolution.x / 2.) / u_resolution.x * TAU) * 8.) * .7`, background: `mix(vec3(0.21, 0.10, 0.31), vec3(0.93, 0.22, 0.54), gl_FragCoord.x / u_resolution.x)`, play: false, sceneSDF: ` #define TAU ${Math.PI * 2} ${rotateY()} ${sdSphere()} ${sdOctahedron()} ${opBlend()} vec2 sceneSDF(vec3 p) { float s = sdSphere(p, 2.0); float o = sdOctahedron(p, 2.0); float d = opBlend(s, o, sin(u_time - 0.55) / 2. + 0.5); return vec2(d, 1.0); }`, computeColor: `// use Lambert shading instead of default material vec3 computeColor(vec3 eye, vec3 rd, vec3 p, float dist, float m) { // Lambert lighting is the dot product of a directional light and the normal vec3 light_dir = normalize(vec3(1.0, -0.3, 0.0)); float diffuse = dot(light_dir, calcNormal(p)); // Wrap the lighting around // https://developer.valvesoftware.com/wiki/Half_Lambert diffuse = diffuse * 0.5 + 0.5; // For real diffuse, use this instead (to avoid negative light) //diffuse = max(0.0, diffuse); // Combine ambient light and diffuse lit directional light vec3 light_color = vec3(0.8, 0.6, 0.5); vec3 ambient_color = vec3(0.2, 0.45, 0.6); vec3 materialColor = vec3(0.97, 0.22, 0.5); return materialColor * (diffuse * light_color + ambient_color); }` })32:T9c5,// based on http://jamie-wong.com/2016/07/15/ray-marching-signed-distance-functions/ await visibility(), raymarch({ eye: `vec3(8.0, 5.0, 7.0) * .42`, // custom position of the eye background: `vec3(gl_FragCoord.xy / u_resolution / 2., 0.5) * 0.75`, // custom background color multiMaterials: true, play: false, sceneSDF: ` #define PI ${Math.PI} ${rotateX()} ${rotateY()} ${rotateZ()} ${opUnion()} ${opSubtraction()} ${opIntersection()} ${sdSphere()} ${sdBox()} ${sdCappedCylinder()} // heartbeat function taken from https://observablehq.com/@mattdesl/heartbeat-function float beat (float value, float intensity, float frequency) { float v = atan(sin(value * PI * frequency) * intensity); return (v + PI / 4.) / PI; } vec2 sceneSDF(vec3 p) { // Slowly spin the whole scene p = rotateX(u_time) * p; float duration = 6.; float t = mod(u_time, duration) / duration; float s = beat(t, 5., 2.); p = rotateY(s * PI * 2.) * p; float cylinderRadius = 0.5 + 0.5 * s; float cylinder1 = sdCappedCylinder(p, 1.0, cylinderRadius); float cylinder2 = sdCappedCylinder(rotateX(radians(90.0)) * p, 1.0, cylinderRadius); float cylinder3 = sdCappedCylinder(rotateZ(radians(90.0)) * p, 1.0, cylinderRadius); float cube = sdBox(p, vec3(1.8, 1.8, 1.8)/2.); float sphere = sdSphere(p, 1.2); float ballOffset = 0.6 + 2.0 * s; float ballRadius = 0.4 + .3 * s; float balls = sdSphere(p - vec3(ballOffset, 0.0, 0.0), ballRadius); balls = opUnion(balls, sdSphere(p + vec3(ballOffset, 0.0, 0.0), ballRadius)); balls = opUnion(balls, sdSphere(p - vec3(0.0, ballOffset, 0.0), ballRadius)); balls = opUnion(balls, sdSphere(p + vec3(0.0, ballOffset, 0.0), ballRadius)); balls = opUnion(balls, sdSphere(p - vec3(0.0, 0.0, ballOffset), ballRadius)); balls = opUnion(balls, sdSphere(p + vec3(0.0, 0.0, ballOffset), ballRadius)); float csgNut = opSubtraction(opUnion(cylinder1, opUnion(cylinder2, cylinder3)), opIntersection(cube, sphere)); return vec2(opUnion(balls, csgNut), (balls < csgNut) ? 2. : 1.); }`, computeColor:` ${phongIllumination()} vec3 computeColor(vec3 eye, vec3 rd, vec3 p, float distance, float materialID) { // Use the surface normal as the ambient color of the material vec3 K_a = vec3(0.); if(materialID == 1.) K_a = (calcNormal(p) + vec3(1.)) / 2.; vec3 K_d = K_a; vec3 K_s = vec3(1., 1., 1.); float shininess = 40.0; return phongIllumination(K_a, K_d, K_s, shininess, p, eye); }` })33:T701,await visibility(), raymarch({ eye: `vec3(8.0, 5.0 * sin(0.2 * u_time), 7.0) * .5`, // position of the eye background: `vec3(0.97, 0.22, 0.5)`, play: false, sceneSDF: ` ${rotateX()} ${rotateY()} ${rotateZ()} ${sdCappedCone()} ${opSmoothUnion()} vec2 sceneSDF(vec3 p) { p = rotateY(u_time * 1.5 - 0.5) * p; float s = sin(u_time * 2.) / 2. + 0.5; float t = smoothstep(0., 2., s); float l = 0.5 + s; float r = 0.4; vec3 q1 = p; q1.y = abs(q1.y); float d = sdCappedCone(q1 + vec3(0., -l, 0.), l, r, r - s/2.); vec3 q2 = rotateX(radians(90.)) * p; q2.y = abs(q2.y); d = opSmoothUnion(d, sdCappedCone(q2 + vec3(0., -l, 0.), l, r, r - s/2.), 0.1); vec3 q3 = rotateZ(radians(90.)) * p; q3.y = abs(q3.y); d = opSmoothUnion(d, sdCappedCone(q3 + vec3(0., -l, 0.), l, r, r - s/2.), 0.1); vec3 q4 = rotateY(radians(45.)) * p; q4.yz = abs(q4.yz); q4 = rotateX(radians(45.)) * q4; d = opSmoothUnion(d, sdCappedCone(q4 + vec3(0., -l, 0.), l, r, r - s/2.), 0.1); vec3 q5 = rotateY(radians(-45.)) * p; q5.yz = abs(q5.yz); q5 = rotateX(radians(45.)) * q5; d = opSmoothUnion(d, sdCappedCone(q5 + vec3(0., -l, 0.), l, r, r - s/2.), 0.1); return vec2(d, 2.0); }`, computeColor: ` ${phongIllumination()} float map(float n, float start1, float stop1, float start2, float stop2) { return (n - start1) / (stop1 - start1) * (stop2 - start2) + start2; } vec3 computeColor(vec3 eye, vec3 rd, vec3 p, float dist, float material) { vec3 K_a = vec3(0.75); K_a = vec3(0.97, 0.22, 0.5) * (mod(length(p), 0.2) > 0.1 ? 1. : 0.); vec3 K_d = K_a; vec3 K_s = vec3(1.0, 1.0, 1.0); float shininess = 40.0; return phongIllumination(K_a, K_d, K_s, shininess, p, eye); // float d = clamp(map(dist, 3., 6., 0., 1.), 0., 1.); // return vec3(d); }` })34:T6a6,raymarch = (opts = {}) => { const { sceneSDF = `vec2 sceneSDF(vec3 p) { return vec2(length(p) - 1., 2.); }`, computeColor = computeColorIQ(), eye = `vec3(0.0, 0.0, 4.0)`, target = `vec3(0.0)`, background = `vec3(0.6 - length((gl_FragCoord.xy - u_resolution / 2.) / u_resolution.x))`, distMin = 0.001, distMax = 20, raymarchingSteps = 100, antiAliasing = 1, gamma = `vec3(1.)`, init = `void init() {}`, effect = `vec3 effect(vec3 col) { return col; }`, ...options } = opts return fragment(` precision mediump float; uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; // Antialiasing: number of samples in x and y dimensions #define AA ${antiAliasing | 0} #define MIN_DIST float(${distMin}) #define MAX_DIST float(${distMax}) ${sceneSDF} ${setCamera()} ${castRay(raymarchingSteps)} ${softShadow()} ${calcNormal()} ${calcAO()} ${computeColor} ${render(background)} ${init} ${effect} void main() { // Ray Origin) vec3 ro = ${eye}; vec3 ta = ${target}; // camera-to-world transformation mat3 ca = setCamera(ro, ta, 0.0); vec3 color = vec3(0.0); #if AA>1 for(int m = 0; m < AA; m++) for(int n = 0; n < AA; n++) { // pixel coordinates vec2 o = vec2(float(m), float(n)) / float(AA) - 0.5; vec2 p = (-u_resolution.xy + 2.0 * (gl_FragCoord.xy + o)) / u_resolution.y; #else vec2 p = (-u_resolution.xy + 2.0 * gl_FragCoord.xy) / u_resolution.y; #endif // ray direction vec3 rd = ca * normalize(vec3(p.xy, 2.0)); // render vec3 col = render(ro, rd); color += col; #if AA>1 } color /= float(AA*AA); #endif color = effect(color); gl_FragColor = vec4(color, 1.0); }`, options) }35:T6ba,computeColorIQ = () => ` vec3 computeColor(vec3 ro, vec3 rd, vec3 pos, float d, float m) { vec3 nor = calcNormal(pos); vec3 ref = reflect(rd, nor); // reflected ray // material vec3 col = 0.45 + 0.35 * sin(vec3(0.05, 0.08, 0.10) * (m - 1.0)); if(m == 1.) { // gray checkerboard floor material float f = mod( floor(5.0*pos.z) + floor(5.0*pos.x), 2.0); col = 0.3 + 0.1*f*vec3(1.0); } // lighting float occ = calcAO(pos, nor); // ambient occlusion vec3 lig = normalize(vec3(-0.4, 0.7, -0.6)); // sunlight float amb = clamp(0.5 + 0.5 * nor.y, 0.0, 1.0); // ambient light float dif = clamp(dot(nor, lig), 0.0, 1.0); // diffuse reflection from sunlight // backlight float bac = clamp(dot(nor, normalize(vec3(-lig.x, 0.0, -lig.z))), 0.0, 1.0) * clamp(1.0 - pos.y, 0.0, 1.0); float dom = smoothstep(-0.1, 0.1, ref.y); // dome light float fre = pow(clamp(1.0 + dot(nor, rd), 0.0, 1.0), 2.0); // fresnel float spe = pow(clamp(dot(ref, lig), 0.0, 1.0), 16.0); // specular reflection dif *= softshadow(pos, lig, 0.02, 2.5); dom *= softshadow(pos, ref, 0.02, 2.5); vec3 lin = vec3(0.0); lin += 1.30 * dif * vec3(1.00, 0.80, 0.55); lin += 2.00 * spe * vec3(1.00, 0.90, 0.70) * dif; lin += 0.40 * amb * vec3(0.40, 0.60, 1.00) * occ; lin += 0.50 * dom * vec3(0.40, 0.60, 1.00) * occ; lin += 0.50 * bac * vec3(0.25, 0.25, 0.25) * occ; lin += 0.25 * fre * vec3(1.00, 1.00, 1.00) * occ; col = col * lin; // mix in fog? col = mix(col, vec3(0.8, 0.9, 1.0), 1.0 - exp(-0.0002 * d * d * d)); //col = mix( col, vec3(0.0), 1.0 - exp(-0.02 * d * d * d)); //col += glow * vec3(1., 0.3, 0.3); // gamma col = pow(col, vec3(0.4545)); return col; }`36:T891,phongIllumination = () => ` /** * Lighting contribution of a single point light source via Phong illumination. * * The vec3 returned is the RGB color of the light's contribution. * * k_a: Ambient color * k_d: Diffuse color * k_s: Specular color * alpha: Shininess coefficient * p: position of point being lit * eye: the position of the camera * lightPos: the position of the light * lightIntensity: color/intensity of the light * * See https://en.wikipedia.org/wiki/Phong_reflection_model#Description */ vec3 phongContribForLight(vec3 k_d, vec3 k_s, float alpha, vec3 p, vec3 eye, vec3 lightPos, vec3 lightIntensity) { vec3 N = calcNormal(p); 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 vec3(0.0, 0.0, 0.0); } if (dotRV < 0.0) { // Light reflection in opposite direction as viewer, apply only diffuse // component return lightIntensity * (k_d * dotLN); } return lightIntensity * (k_d * dotLN + k_s * pow(dotRV, alpha)); } /** * Lighting via Phong illumination. * * The vec3 returned is the RGB color of that point after lighting is applied. * k_a: Ambient color * k_d: Diffuse color * k_s: Specular color * alpha: Shininess coefficient * p: position of point being lit * eye: the position of the camera * * See https://en.wikipedia.org/wiki/Phong_reflection_model#Description */ vec3 phongIllumination(vec3 k_a, vec3 k_d, vec3 k_s, float alpha, vec3 p, vec3 eye) { const vec3 ambientLight = 0.5 * vec3(1.0, 1.0, 1.0); vec3 color = ambientLight * k_a; vec3 light1Pos = vec3(-4.0, // * sin(u_time), 2.0, 4.0) * 4.; // * cos(u_time)); vec3 light1Intensity = vec3(0.4); color += phongContribForLight(k_d, k_s, alpha, p, eye, light1Pos, light1Intensity); vec3 light2Pos = vec3(2.0, // * sin(0.37 * u_time), 2.0, // * cos(0.37 * u_time), 2.0) * 4.; vec3 light2Intensity = vec3(0.4); color += phongContribForLight(k_d, k_s, alpha, p, eye, light2Pos, light2Intensity); return color; }`37:T820,md`___ ## Raymarching Resources ![](http://jamie-wong.com/images/16-07-11/spheretrace.jpg) source: http://jamie-wong.com/2016/07/15/ray-marching-signed-distance-functions/ - [Introduction to Functional Rendering paradigm on Observable](https://observablehq.com/@gre/introduction-to-functional-rendering-paradigm) - [How Raymarching Works?](https://observablehq.com/@stwind/how-raymarching-works) - [Introduction to Raymarching Distance Functions on Observable](https://observablehq.com/@gre/introduction-to-raymarching-distance-functions) - [Building Worlds With Distance Functions in GLSL](http://www.geeks3d.com/20130524/building-worlds-with-distance-functions-in-glsl-raymarching-glslhacker-tutorial-opengl/2/) - [Ray Marching and Signed Distance Functions by Jamie Wong](http://jamie-wong.com/2016/07/15/ray-marching-signed-distance-functions/) - [Raymarch Tutorial2 on shadertoy](https://www.shadertoy.com/view/XlBGDW) - [HOWTO: Ray Marching on Shadertoy](https://www.shadertoy.com/view/XllGW4) - [Geodesic domain manipulation on shadertoy](https://www.shadertoy.com/view/4tG3zW) - https://www.alanzucconi.com/2016/07/01/raymarching/ - http://9bitscience.blogspot.com/2013/07/raymarching-distance-fields_14.html?m=1 - http://www.pouet.net/topic.php?which=8177&page=1 - [SDF Tracing Visualization on shadertoy](https://www.shadertoy.com/view/lslXD8) - [HG SDF in WebGL](https://www.shadertoy.com/view/Xs3GRB) - [World, View and Projection Transformation Matrices](http://www.codinglabs.net/article_world_view_projection_matrix.aspx) - [Raymarching Workshop](https://github.com/ajweeks/RaymarchingWorkshop) - [Tutorial of Ray Casting, Ray Tracing, Path Tracing and Ray Marching](http://blog.ruofeidu.com/tutorial-of-ray-casting-ray-tracing-and-ray-marching/) - [Phong reflection model](https://en.wikipedia.org/wiki/Phong_reflection_model) - [Volumetric Rendering: Signed Distance Functions](https://www.alanzucconi.com/2016/07/01/signed-distance-functions/) - [Raymarching a Christmas Tree](http://blog.ruslans.com/2015/01/raymarching-christmas-tree.html) `38:[] 2e:{"title":"Raymarch Helper","cells":[{"id":685,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"await visibility(), raymarch({\n // w: 540, h: 540,\n eye: `vec3(0.0, 2.5, 5.0)`,\n play: false,\n sceneSDF: `\n#define PI ${Math.PI}\n\n${rotateY()}\n${opSmoothUnion()}\n\n// SDF\n${sdSphere()}\n\n// heartbeat function taken from https://observablehq.com/@mattdesl/heartbeat-function\nfloat beat (float value, float intensity, float frequency) {\n float v = atan(sin(value * PI * frequency) * intensity);\n return (v + PI / 2.) / PI;\n}\n\n// Signed distance function describing the scene.\nvec2 sceneSDF(vec3 p) {\n p = rotateY(u_time * 4.) * p;\n\n float duration = 3.;\n float t = mod(u_time - 0.08, duration) / duration;\n float s = beat(t, 5., 2.);\n\n float d = sdSphere(p, 0.6);\n float l = 2.5;\n for (int i = 0; i < 3; i++) {\n vec3 v = vec3(0.);\n v[i] = l;\n vec3 q = p;\n q[i] = abs(q[i]);\n d = opSmoothUnion(d, sdSphere(q - v * s, 0.4), 0.1);\n }\n\n l *= 0.5;\n vec3 q3 = abs(p);\n d = opSmoothUnion(d, sdSphere(abs(p) - vec3(l, l, l) * s, 0.4), 0.1);\n\n return vec2(d, 2.0);\n}`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"md`🎬Click to play/pause`","pinned":false,"hidden":false,"mode":"ojs"},{"id":618,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"md`🎬Click to play/pause`","pinned":false,"hidden":false,"mode":"ojs"},{"id":645,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":661,"value":"md`🎬Click to play/pause`","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"md`🎬Click to play/pause`","pinned":false,"hidden":false,"mode":"ojs"},{"id":641,"value":"md`___\n## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"md`Based on:\n- https://observablehq.com/@makio135/hello-raymarching\n- https://www.shadertoy.com/view/Xds3zN\n- https://www.shadertoy.com/view/ltyXD3`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"render = (background) => `\n// Figure out color value when casting ray from origin ro in direction rd.\nvec3 render(in vec3 ro, in vec3 rd) { \n // cast ray to nearest object\n vec2 res = castRay(ro, rd);\n float distance = res.x; // distance\n float materialID = res.y; // material ID\n\n vec3 col = ${background};\n if(materialID > 0.0) {\n vec3 pos = ro + distance * rd;\n col = computeColor(ro, rd, pos, distance, materialID);\n }\n return vec3(clamp(col, 0.0, 1.0));\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"setCamera = () => `\n// Compute camera-to-world transformation.\nmat3 setCamera(in vec3 ro, in vec3 ta, float cr) {\n vec3 cw = normalize(ta - ro);\n vec3 cp = vec3(sin(cr), cos(cr), 0.0);\n vec3 cu = normalize(cross(cw,cp));\n vec3 cv = normalize(cross(cu,cw));\n return mat3(cu, cv, cw);\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"castRay = (raymarchingSteps) => `\n// Cast a ray from origin ro in direction rd until it hits an object.\n// Return (t,m) where t is distance traveled along the ray, and m\n// is the material of the object hit.\nvec2 castRay(in vec3 ro, in vec3 rd) {\n float tmin = MIN_DIST;\n float tmax = MAX_DIST;\n \n#if 0\n // bounding volume\n float tp1 = (0.0 - ro.y) / rd.y; \n if(tp1 > 0.0) tmax = min(tmax, tp1);\n float tp2 = (1.6 - ro.y) / rd.y; \n if(tp2 > 0.0) { \n if(ro.y > 1.6) tmin = max(tmin, tp2);\n else tmax = min(tmax, tp2 );\n }\n#endif\n \n float t = tmin;\n float m = -1.0;\n for(int i = 0; i < ${raymarchingSteps|0}; i++) {\n float precis = 0.0005 * t;\n vec2 res = sceneSDF(ro + rd * t);\n if(res.x < precis || t > tmax) break;\n t += res.x;\n\t m = res.y;\n }\n\n if(t > tmax) m =- 1.0;\n return vec2(t, m);\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"softShadow = () => `\n// Cast a shadow ray from origin ro (an object surface) in direction rd\n// to compute soft shadow in that direction. Returns a lower value\n// (darker shadow) when there is more stuff nearby as we step along the shadow ray.\nfloat softshadow(in vec3 ro, in vec3 rd, in float mint, in float tmax) {\n float res = 1.0;\n float t = mint;\n for(int i = 0; i < 16; i++) {\n float h = sceneSDF(ro + rd * t).x;\n res = min(res, 8.0 * h / t);\n t += clamp(h, 0.02, 0.10);\n if(h < 0.001 || t > tmax) break;\n }\n return clamp(res, 0.0, 1.0);\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"calcNormal = () => `\n// Compute normal vector to surface at pos, using central differences method?\nvec3 calcNormal(in vec3 pos) {\n // epsilon = a small number\n vec2 e = vec2(1.0, -1.0) * 0.5773 * 0.0005;\n\n return normalize(\n e.xyy * sceneSDF(pos + e.xyy).x + \n e.yyx * sceneSDF(pos + e.yyx).x + \n e.yxy * sceneSDF(pos + e.yxy).x + \n e.xxx * sceneSDF(pos + e.xxx).x\n );\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"calcAO = () => `\n// compute ambient occlusion value at given position/normal\nfloat calcAO(in vec3 pos, in vec3 nor) {\n float occ = 0.0;\n float sca = 1.0;\n for(int i = 0; i < 5; i++) {\n float hr = 0.01 + 0.12 * float(i) / 4.0;\n vec3 aopos = nor * hr + pos;\n float dd = sceneSDF(aopos).x;\n occ += -(dd - hr) * sca;\n sca *= 0.95;\n }\n return clamp(1.0 - 3.0 * occ, 0.0, 1.0);\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":739,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"phong = () => `\n${phongIllumination()}\n\nvec3 computeColor(vec3 ro, vec3 rd, vec3 pos, float distance, float materialID) {\n vec3 K_a = vec3(0.3, 0.4, 0.5);// * materialID;\n vec3 K_d = vec3(0.6, 0.5, 0.4);\n vec3 K_s = vec3(1.0, 1.0, 1.0);\n float shininess = 10.0;\n\n vec3 col = phongIllumination(K_a, K_d, K_s, shininess, pos, ro);\n\n // gamma\n col = pow(col, vec3(1.));\n \n return col;\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":679,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"md`___\n## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":681,"value":"md`The \\`raymarch\\` helper is based on \\`fragment\\` helper:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"import {fragment} from '@makio135/hello-fragment'","pinned":false,"hidden":false,"mode":"ojs"},{"id":578,"value":"md`Signed Distance Functions used for the examples:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":576,"value":"import { sdSphere, sdBox, sdCappedCone, sdCappedCylinder, sdOctahedron,\nopBlend, opUnion, opSmoothUnion, opSubtraction, opIntersection, rotateX, rotateY, rotateZ } from '@makio135/iq-sdf'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}