30:T526,await visibility(), raymarch(` ${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 p, vec3 eye) { // 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, estimateNormal(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); }` , eye: `vec3(cos((u_mouse.x / u_resolution.x) * 3.1415926 * 2.) * 8., 5., sin((u_mouse.x - u_resolution.x / 2.) / u_resolution.x * 3.1415926 * 2.) * 8.)` , background: `mix(vec3(0.21, 0.10, 0.31), vec3(0.93, 0.22, 0.54), gl_FragCoord.x / u_resolution.x)` , play: false })31:T98d,// based on http://jamie-wong.com/2016/07/15/ray-marching-signed-distance-functions/ await visibility(), raymarch(` #define PI 3.1415926 ${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.3; 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:` ${phong()} vec3 computeColor(vec3 p, vec3 eye, float materialID) { // Use the surface normal as the ambient color of the material vec3 K_a = vec3(0.); if(materialID == 1.) K_a = (estimateNormal(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); }` , eye: `vec3(8.0, 5.0, 7.0)` // custom position of the eye , background: `vec3(gl_FragCoord.xy / u_resolution / 2., 0.5) * 0.75` // custom background color , multiMaterials: true , play: false })32:T62a,await visibility(), raymarch(` #define PI 3.1415926 ${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, 1.0); } ` , { computeColor: ` ${phong()} vec3 computeColor(vec3 p, vec3 eye) { 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); }` , eye: `vec3(8.0, 5.0 * sin(0.2 * u_time), 7.0)` // position of the eye , background: `` // use computeColor for background , play: false })33:T7bd,raymarch = (sceneSDF = `vec2 sceneSDF(vec3 p){return vec2(length(p) - 0.5, 1.0);}`, opts = {}) => { const { computeColor = `${phong()}\n${basicComputeColor()}`, eye = `vec3(0.0, 5.0, 10.0)`, target = `vec3(0.0)`, fieldOfView = `45.`, background = `vec3(0.6 - length((gl_FragCoord.xy - u_resolution / 2.) / u_resolution.x));`, raymarchingSteps = 100, antiAliasing = 1, gamma = `vec3(1.0)`, multiMaterials = false, ...options } = opts const shader = ` precision mediump float; #define ANTI_ALIASING ${antiAliasing} #define MIN_DIST 0.0 #define MAX_DIST 100.0 #define EPSILON 0.0001 uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; ${sceneSDF} ${shortestDistanceToSurface(raymarchingSteps)} ${rayDirection()} ${estimateNormal()} ${viewMatrix()} ${setCamera()} ${computeColor} ${render(background, multiMaterials)} void main(){ vec3 eye = ${eye} * 2.; vec3 target = ${target}; mat3 ca = setCamera(eye, target, 0.0); vec3 color = vec3(0.0); #if ANTI_ALIASING>1 for(int m = 0; m < ANTI_ALIASING; m++) { for(int n = 0; n < ANTI_ALIASING; n++) { vec2 delta = vec2(float(m), float(n)) / float(ANTI_ALIASING) - 0.5; vec3 rayDir = rayDirection(${fieldOfView}, u_resolution, gl_FragCoord.xy + delta); #else vec3 rayDir = rayDirection(${fieldOfView}, u_resolution, gl_FragCoord.xy); #endif // ray direction with camera transformation vec3 worldDir = ca * normalize(vec3(rayDir.xy, 2.0)); // render vec3 col = render(eye, worldDir, MIN_DIST, MAX_DIST); // gamma col = pow(col, ${gamma}); color += col; #if ANTI_ALIASING>1 } } color /= float(ANTI_ALIASING * ANTI_ALIASING); #endif gl_FragColor = vec4(color, 1.0); }` return fragment(shader, options) }34:T9d2,phong = () => ` /** * 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 = estimateNormal(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); //* cos(u_time)); vec3 light1Intensity = vec3(0.4, 0.4, 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); vec3 light2Intensity = vec3(0.4, 0.4, 0.4); color += phongContribForLight(k_d, k_s, alpha, p, eye, light2Pos, light2Intensity); return color; }`35: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) `36:[] 2e:{"title":"Hello Raymarching","cells":[{"id":0,"value":"md`# Hello Raymarching`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"// based on http://jamie-wong.com/2016/07/15/ray-marching-signed-distance-functions/\nawait visibility(), raymarch(`\n#define PI 3.1415926\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, 1.0);\n}`\n, { play: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1910,"value":"md`🎬Click to play/pause`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1902,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1703,"value":"md`🎬Click to play/pause`","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1722,"value":"md`🎬Click to play/pause`","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1725,"value":"md`🎬Click to play/pause`","pinned":false,"hidden":false,"mode":"ojs"},{"id":661,"value":"md`___\n## Raymarch Helper\n\n### Usage\n~~~js\nimport { raymarch } from '@makio135/hello-raymarching' \n~~~\n\nThe \\`raymarch\\` helper is based on the \\`fragment\\` helper from [@makio135/hello-fragment](https://observablehq.com/@makio135/hello-fragment).\n\n\\`raymarch(sceneSDF, options)\\` parameters are:\n- \\`sceneSDF\\`: String (required)\n- \\`options\\`: Object (optional)\n - \\`eye\\`: String (optional)\n - \\`computeColor\\`: String (optional)\n - \\`background\\`: String (optional)\n - \\`w\\`: width of the canvas in pixels. Number (optional) \n Default: \\`width\\`\n - \\`h\\`: height of the canvas in pixels. Number (optional) \n Default: \\`400\\`\n - \\`play\\`: state of the animation on start. Boolean (optional) \n Default: \\`true\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1728,"value":"md`### Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2230,"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":383,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"rayDirection = () => `\n/**\n * Return the normalized direction to march in from the eye point for a single pixel.\n * \n * fieldOfView: vertical field of view in degrees\n * size: resolution of the output image\n * fragCoord: the x,y coordinate of the pixel in the output image\n */\nvec3 rayDirection(float fieldOfView, vec2 size, vec2 fragCoord) {\n vec2 xy = fragCoord - size / 2.0;\n float z = size.y / tan(radians(fieldOfView) / 2.0);\n return normalize(vec3(xy, -z));\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"viewMatrix = () => `\n/**\n * Return a transform matrix that will transform a ray from view space\n * to world coordinates, given the eye point, the camera target, and an up vector.\n *\n * This assumes that the center of the camera is aligned with the negative z axis in\n * view space when calculating the ray marching direction. See rayDirection.\n */\nmat3 viewMatrix(vec3 eye, vec3 center, vec3 up) {\n // Based on gluLookAt man page\n vec3 f = normalize(center - eye);\n vec3 s = normalize(cross(f, up));\n vec3 u = cross(s, f);\n return mat3(s, u, -f);\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"shortestDistanceToSurface = (raymarchingSteps) =>`\n/**\n * Return the shortest distance from the eyepoint to the scene surface along\n * the marching direction. If no part of the surface is found between start and end,\n * return end.\n * \n * eye: the eye point, acting as the origin of the ray\n * marchingDirection: the normalized direction to march in\n * start: the starting distance away from the eye\n * end: the max distance away from the eye to march before giving up\n */\nvec2 shortestDistanceToSurface(vec3 eye, vec3 marchingDirection, float start, float end) {\n float depth = start;\n for (int i = 0; i < ${raymarchingSteps}; i++) {\n vec2 v = sceneSDF(eye + depth * marchingDirection);\n float dist = v[0];\n float material = v[1];\n\n if (dist < EPSILON) return vec2(depth, material);\n\n depth += dist;\n if (depth >= end) return vec2(end, 0.0);\n }\n return vec2(end, 0.0);\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"estimateNormal = () => `\n// Using the gradient of the SDF, estimate the normal on the surface at point p.\nvec3 estimateNormal(vec3 p) {\n float pDist = sceneSDF(p)[0];\n return normalize(vec3(\n sceneSDF(vec3(p.x + EPSILON, p.y, p.z))[0] - pDist,\n sceneSDF(vec3(p.x, p.y + EPSILON, p.z))[0] - pDist,\n sceneSDF(vec3(p.x, p.y, p.z + EPSILON))[0] - pDist\n ));\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1154,"value":"basicComputeColor = () => `\nvec3 computeColor(vec3 p, vec3 eye) {\n vec3 K_a = vec3(0.3, 0.4, 0.5);\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 return phongIllumination(K_a, K_d, K_s, shininess, p, eye);\n}\n\nvec3 computeColor(vec3 p, vec3 eye, 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 return phongIllumination(K_a, K_d, K_s, shininess, p, eye);\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2078,"value":"render = (background, multiMaterials) => `\nvec3 render(vec3 eye, vec3 worldDir, float start, float end) {\n vec2 v = shortestDistanceToSurface(eye, worldDir, MIN_DIST, MAX_DIST);\n float dist = v[0];\n float material = v[1];\n\n // Didn't hit anything\n ${background === `` ? `` : `\n if (material == 0.) {\n return ${background};\n }`}\n\n // The closest point on the surface to the eyepoint along the view ray\n vec3 p = eye + dist * worldDir;\n return computeColor(p, eye${multiMaterials ? ', material' : ''});\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"md`___\n## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1783,"value":"md`The \\`raymarch\\` helper is based on \\`fragment\\` helper:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import { fragment } from '@makio135/hello-fragment'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1780,"value":"md`Signed Distance Functions used for the examples:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1696,"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":"$W36","stdlib":"1","titling":"auto"}