31:T407,## Pinhole vs. Thin Lens Cameras So far, when we have shown our ${spancolor(camera_color, "camera")} model, we have depicted that the ${spancolor(viewport_color, "viewport")} and the ${spancolor(image_color, "image")} overlap. This is simpler conceptually, but incorrect technically. In the pinhole ${spancolor(camera_color, "camera")} model, light passes from the ${spancolor(viewport_color, "viewport")} through the ${spancolor(camera_color, "focal point")} at the ${spancolor(camera_color, "aperture")} and arrives (inverted) at the ${spancolor(image_color, "image")} behind the ${spancolor(camera_color, "focus")}. In this model, the distance from the ${spancolor(camera_color, "focal point")} to the ${spancolor(image_color, "image plane")} and the distance from the ${spancolor(camera_color, "focal point")} to the ${spancolor(viewport_color, "viewport plane")} is the same—the ${spancolor(camera_color, "focal length")} or ${spancolor(camera_color, "focus distance")}. In a real camera, these distances are different.32:Tb03,{ let h = (selected_pt[1] - center[1]) / (selected_pt[0] - center[0]) * focus_distance; let pinhole_fig = html`

Pinhole model. Click on the scene to determine where the point is projected.

`; d3.select(pinhole_fig).selectAll("svg").on("click", (event)=>{ // Where is the point? What is its depth? let pt = d3.pointer(event); let f_p = pt[0] - center[0]; if(f_p < 0) return; mutable selected_pt = pt; }); return pinhole_fig; }33:T73c,Because the pinhole ${spancolor(camera_color, "aperture")} is a single point (the ${spancolor(camera_color, "focal point")}) ${texcolor(camera_color, "\\bullet \\mathrm{fp}")}, the entire ${spancolor(image_color, "image")} is in focus—every point in the ${spancolor(scene_color, "scene")} is mapped onto a single (depth-wise unique) point within an ${spancolor(image_color, "images's")} bounds as shown in the figure above. In reality, the ${spancolor(camera_color, "aperture")} has a finite area and the ${spancolor(camera_color, "focal point")}—where objects a infinity are projected onto—lies behind the ${spancolor(camera_color, "aperture")}, its location depending on the size, shape, and location of any ${spancolor(camera_color, "lenses")}. The simplest lens model we can use is the thin lens model. This model has a single ${spancolor(camera_color, "lens")} located at the ${spancolor(camera_color, "aperture")} whose thickness is much smaller than its diameter/height. Only ${spancolor(ray_color, "rays")} from infinitely far away (which are parallel at the ${spancolor(camera_color, "lens")}) are focused at the ${spancolor(camera_color, "focal point")} ${texcolor(camera_color, "\\bullet \\mathrm{fp'}")} at a ${spancolor(camera_color, "focal length")} ${texcolor(camera_color, "f'")} from the ${spancolor(camera_color, "lens")}; any other ${spancolor(object_color, "object's")} ${spancolor(ray_color, "rays")} are projected behind this point—an ${spancolor(object_color, "object")} a distance ${texcolor(viewport_color, "f_v")} from the ${spancolor(camera_color, "camera")} (the ${spancolor(viewport_color, "focus distance")}) is at focus on an ${spancolor(image_color, "image plane")} at distance ${texcolor(image_color, "f'_i")} (the ${spancolor(image_color, "focal distance")}).34:T59f,

Focal Focus Frustration

The naming conventions for the ${spancolor(camera_color, "camera")} related distances are not consistent between computer graphics, optics, and photography. In optics, the distance from the ${spancolor(camera_color, "lens")} to the ${spancolor(object_color, "object")} is the clear ${spancolor(object_color, "object distance")} and the distance to its in-focus projection is the ${spancolor(image_color, "image distance")}. In photography, these distances can be ${spancolor(object_color, "working distance")} and ${spancolor(image_color, "focal length")} (which confuses with the optics usage of ${spancolor(camera_color, "focal length")}). Other conventions in photography are also sometimes used. The naming convention used here is common in ray tracing for computer graphics, but not universal (e.g., the ${spancolor(viewport_color, "focus distance")} is sometimes called the ${spancolor(camera_color, "near distance")} in the context of a projective viewing volume).

We are also using the convention that values in front of the ${spancolor(camera_color, "aperture")} (in the ${spancolor(scene_color, "scene")}) are unprimed and those behind (in the ${spancolor(camera_color, "camera")}) are primed. We are also using the Gaussian convention of the distance values being unsigned.

35:T145a,{ let lens_w = 7.5; // Make sure focal length & viewport distance valid var f_l = 0.5 * focus_distance; var f_v = focus_distance; var f_img = focus_distance; let img_h = 0.25 * height * f_img / focus_distance; let f_p = selected_pt[0] - center[0]; let h = f_img * (center[1] - selected_pt[1]) / f_p; // What is the circle of confusion diameter? let coc_diameter = Math.abs(lens_diameter * f_l * (-f_p + f_v) / (-f_p) / Math.min(f_l - f_v, -Number.EPSILON)); // Three spheres: Center, back left, front right let v_w = 0.5 * ewidth; let v_h = 0.5 * height; let r1 = 0.25 * Math.min(v_w,v_h); let c1 = [0, 0, -0.5 * 0.5 * ewidth]; let color1 = [0.5,0.5,0.5]; let r2 = 0.5 * r1; let c2 = [0.20 * v_w, 0.20 * v_h, -0.35 * v_w]; let color2 = [0.5, 0, 0]; let r3 = 0.5 * r1; let c3 = [-0.35 * v_w, -0.35 * v_h, -0.75 * v_w]; let color3 = [0, 0.5, 0]; let thin_lens_fig = html`

Thin lens model. Click on the scene to determine where the point is projected and its cone of confusion.

`; d3.select(thin_lens_fig).selectAll("svg").on("click", (event)=>{ // Where is the point? What is its depth? let pt = d3.pointer(event); let f_p = pt[0] - center[0]; if(f_p < 0) return; mutable selected_pt = pt; }); return thin_lens_fig; }36:T492,### Ray Generation To generate a ${spancolor(ray_color,"ray")} for a thin lens, first determine where the point will exit the ${spancolor(viewport_color,"viewport")} [as before](https://observablehq.com/@cse4413msstate/modelling-view-frame-ray-generation?collection=@cse4413msstate/ray-tracing-notes): based upon ${spancolor(image_color,"the pixel's")} ${texcolor(image_color,"i,j")}, calculate the ${spancolor(ray_color,"ray's origin")} ${texcolor(ray_color,"\\bullet\\mathrm{r_0}")} on ${spancolor(viewport_color,"the viewport")} from the ${spancolor(camera_color,"focus point")} ${texcolor(camera_color,"\\bullet\\mathrm{fp'}")} and the ${spancolor(viewport_color,"focus distance")} ${texcolor(viewport_color,"f_v")}. Next, select a sample on the ${spancolor(camera_color,"lens")} ${texcolor(camera_color,"\\bullet\\mathrm{p_l}")}; this will become ${spancolor(ray_color,"the ray's new origin")} and ${spancolor(ray_color,"the new ray direction")} is just the normalized direction vector between these two ${tex`\textcolor{${ray_color}}{\mathbf{d}}=\|\overrightarrow{\textcolor{${camera_color}}{\bullet\mathrm{p_l}}\textcolor{${ray_color}}{\bullet\mathrm{r_0}}}\|`}.37:T1490,{ let lens_w = 7.5; // Make sure focal length & viewport distance valid var f_l = 0.5 * focus_distance; var f_v = focus_distance; var f_img = focus_distance; let img_h = 0.25 * height * f_img / focus_distance; let f_p = selected_pt[0] - center[0]; let h = f_img * (center[1] - selected_pt[1]) / f_p; // What is the lens diameter? let lens_diameter = 2 * focus_distance * Math.tan(0.5 * Math.PI / 180 * lens_fov); // What is the circle of confusion diameter? let coc_diameter = Math.abs(lens_diameter * f_l * (-f_p + f_v) / (-f_p) / Math.min(f_l - f_v, -Number.EPSILON)); // Three spheres: Center, back left, front right let v_w = 0.5 * ewidth; let v_h = 0.5 * height; let r1 = 0.25 * Math.min(v_w,v_h); let c1 = [0, 0, -0.5 * 0.5 * ewidth]; let color1 = [0.5,0.5,0.5]; let r2 = 0.5 * r1; let c2 = [0.20 * v_w, 0.20 * v_h, -0.35 * v_w]; let color2 = [0.5, 0, 0]; let r3 = 0.5 * r1; let c3 = [-0.35 * v_w, -0.35 * v_h, -0.75 * v_w]; let color3 = [0, 0.5, 0]; let thin_lens_fig = html`

Thin lens model using lens field of view.

`; d3.select(thin_lens_fig).selectAll("svg").on("click", (event)=>{ // Where is the point? What is its depth? let pt = d3.pointer(event); let f_p = pt[0] - center[0]; if(f_p < 0) return; mutable selected_pt = pt; }); return thin_lens_fig; }38:T4d5,From single ray images, it is clear that a single sample is not enough to resolve the depth of field. With a lens, a ray can travel along many different paths. Similarly, with scenes that have a lot of changing detail—including just sharp edges—there are visual artifacts due to aliasing. Spatial aliasing occurs when different samples from the same or neighboring pixels vary dramatically (in [technical terms](https://en.wikipedia.org/wiki/Aliasing), there are high frequencies in the image that are lost with the low frequency samples which are replaced by other low frequency aliasing artifacts). More samples can help ameliorate the loss of information. The simplest approach is to just take more samples over the projected pixel area on the viewport. While this improves the sampling, the random points will cluster enough (be close to each other) not to give us as much benefit—ideal samples are as far apart from each other as they can. To break up these clusters, we can use stratification: We break the pixel into equal size regions and sample in each individually. 9 samples in a strata provide more information about the scene then 9 randomly in a single pixel.39:T55a,### Filtering The question now becomes what do we do with the multiple samples—how do we turn them into a single representation/color? The most straightforward is to average the colors: Given 10 samples, we add all the color values then divide by 10. However, this reintroduces aliasing—at the border where the sample's influence ends, there is a discontinuous jump of color, a high frequency change. We can use a filter on the samples to smooth the colors to reduce this jump. A filter, roughly speaking, indicates the area of influence of a sample (its support) and how much the sample contributes (the filter amplitude/magnitude). It takes as input the sample location ${tex`\bullet \mathrm{p}`}, the pixel center location ${tex`\bullet \mathrm{p}_0`}, and the filter support radii ${tex`r_x, r_y`} and returns the weight of the sample's contribution; this calculation is applied per dimension instead of using the Cartesian distance. When we average the colors (a box filter), we treat all the samples at contributing equally everywhere across the pixel area (even if far from the pixel center where the final result is located) which creates the color jumps aforementioned. Better filters would use the distance of the sample from pixel center to create better weights (though there is a trade-off as we will discuss).3a:T2371,regl_config = Object({ vert: ` precision mediump float; attribute vec2 position; void main () { gl_Position = vec4(position, 0, 1); }`, attributes: { position: [[-1, -1], [+1, -1], [+1, +1], [-1, +1]] }, primitive: "triangles", elements: [0, 1, 2, 0, 2, 3], viewport: { x: (ctx, {view}) => view.x, y: 0, width: (ctx, {view}) => view.width, height: (ctx, {view}) => view.height }, uniforms: { light_pos: (ctx, {light_pos}) => light_pos, w: (ctx, {view}) => 0.5 * view.width, h: (ctx, {view}) => 0.5 * view.height, f_v: (ctx, {f_v}) => f_v, d: (ctx, {view}) => 0.5 * view.width, lens_d: (ctx,{lens_d}) => lens_d , r1: (ctx, {view}) => 0.25 * Math.min(0.5 * view.width, 0.5 * view.height), c1: (ctx, {view}) => [0, 0, -0.5 * 0.5 * view.width], r2: (ctx, {view}) => 0.5 * 0.25 * Math.min(0.5 * view.width, 0.5 * view.height), c2: (ctx, {view}) => [0.1 * 0.5 * view.width, 0, -0.35 * 0.5 * view.width], r3: (ctx, {view}) => 0.5 * 0.25 * Math.min(0.5 * view.width, 0.5 * view.height), c3: (ctx, {view}) => [-0.35 * 0.25 * view.width, 0.35 * 0.25 * view.height, -0.75 * 0.5* view.width], spp_x: (ctx, {spp_x}) => spp_x, spp_y: (ctx, {spp_y}) => spp_y, stratify: (ctx, {stratify}) => stratify, spp: (ctx, {spp_x, spp_y}) => spp_x * spp_y, filter: (ctx, {filter}) => filter }, frag: ` precision mediump float; #define RANDOM_SINLESS // Samples uniform int spp_x; uniform int spp_y; uniform int spp; uniform bool stratify; uniform int filter; const float sigma = 1.; ${random} uniform vec3 light_pos; const float pi = 3.14159; // Viewing volume uniform float w; uniform float h; uniform float f_v; uniform float d; uniform float lens_d; // Background const vec4 whitesmoke = vec4(${whitesmoke.join(",")}); // Three spheres: Center, back left, front right uniform float r1; uniform vec3 c1; const vec3 color1 = vec3(0.5); uniform float r2; uniform vec3 c2; const vec3 color2 = vec3(0.5, 0, 0); uniform float r3; uniform vec3 c3; const vec3 color3 = vec3(0, 0.5, 0); vec3 gamma(vec3 color) { // sRGB gamma correction float exp = 1.0/2.4; if(color.r < 0.0031308) color.r *= 12.92; else color.r = 1.055 * pow(color.r, exp) - 0.055; if(color.g < 0.0031308) color.g *= 12.92; else color.g = 1.055 * pow(color.g, exp) - 0.055; if(color.b < 0.0031308) color.b *= 12.92; else color.b = 1.055 * pow(color.b, exp) - 0.055; return color; } vec3 sample_disc(float diameter, int sample) { // Try 5 times then punt for(int i=0; i < 5; i++) { float x = random(vec4(gl_FragCoord.xy, float(sample), 3+2*i)); float y = random(vec4(gl_FragCoord.xy, float(sample), 4+2*i)); float cx = x - 0.5; float cy = y - 0.5; if(cx*cx+cy*cy < 0.5) return vec3(diameter*(x-0.5),diameter*(y-0.5),0); } return vec3(0); } float mod(int a, int b) { return float(a)-floor(float(a)/float(b))*float(b); } vec2 sample_pixel(float width, float height, int sample) { // Split into zones float x = random(vec4(gl_FragCoord.xy, sample, 0)); float y = random(vec4(gl_FragCoord.xy, sample, 1)); if(!stratify) return vec2(width * (x-0.5), height * (y-0.5)); float p_w = width / float(spp_x); float p_h = height / float(spp_y); return vec2(p_w * (mod(sample, spp_y) + x) - 0.5 * width, p_h * (floor(float(sample) / float(spp_y)) + y) - 0.5 * height); } #define MAX_INT 65536 void main () { // Viewport coords float x = 0.5 * gl_FragCoord.x - 0.5 * w; float y = 0.5 * gl_FragCoord.y - 0.5 * h; gl_FragColor = vec4(gamma(whitesmoke.rgb), 1.0); vec3 final_color = vec3(0); float sum_weights = 0.; bool hit = false; float pixel_w = 0.5; float pixel_h = 0.5; for(int sample = 0; sample < MAX_INT; sample++) { // Terminate if needed if(sample >= spp) break; // Sample color vec3 sample_color = whitesmoke.rgb; // Ray // Generate the disc location vec3 origin = sample_disc(lens_d, sample); vec3 dir = normalize(vec3(x,y,-f_v)-origin); vec2 diff = vec2(0); if(spp != 1) { diff = sample_pixel(pixel_w, pixel_h, sample); dir = normalize(vec3(diff+vec2(x,y),-f_v)-origin); } // First sphere float old_t = -1000.; float b = dot(dir,origin-c1)*dot(dir,origin-c1)-dot(origin-c1,origin-c1)+r1*r1; if(b >= 0.) { float t1 = -dot(dir,origin-c1)-sqrt(b); float t2 = -dot(dir,origin-c1)+sqrt(b); float t = t1; if(t1<0.) t = t2; if(t > 0.) { hit = true; old_t = t; vec3 pt = origin + t * dir; vec3 n = normalize(pt - c1); vec3 l = light_pos; if(dot(n,l) >= 0.) { // Note, we do not divide by pi as we are sampling once over the // entire hemisphere // Assume we have done the integration float c = dot(l, n) * max(dot(l, n), 0.); sample_color = color1 * c; } else { sample_color = vec3(0); } } } // Second sphere b = dot(dir,origin-c2)*dot(dir,origin-c2)-dot(origin-c2,origin-c2)+r2*r2; if(b >= 0.) { float t1 = -dot(dir,origin-c2)-sqrt(b); float t2 = -dot(dir,origin-c2)+sqrt(b); float t = t1; if(t1<0.) t = t2; if(t > 0. && (old_t < 0. || t < old_t)) { hit = true; old_t = t; vec3 pt = origin + t * dir; vec3 n = normalize(pt - c2); vec3 l = light_pos; if(dot(n,l) >= 0.) { // Note, we do not divide by pi as we are sampling once over the entire hemisphere // Assume we have done the integration float c = dot(l, n) * max(dot(l, n), 0.); sample_color = color2 * c; } else { sample_color = vec3(0); } } } // Third sphere b = dot(dir,origin-c3)*dot(dir,origin-c3)-dot(origin-c3,origin-c3)+r3*r3; if(b >= 0.) { float t1 = -dot(dir,origin-c3)-sqrt(b); float t2 = -dot(dir,origin-c3)+sqrt(b); float t = t1; if(t1<0.) t = t2; if(t > 0. && (old_t < 0. || t < old_t)) { hit = true; old_t = t; vec3 pt = origin + t * dir; vec3 n = normalize(pt - c3); vec3 l = light_pos; if(dot(n,l) >= 0.) { // Note, we do not divide by pi as we are sampling once over the entire hemisphere // Assume we have done the integration float c = dot(l, n) * max(dot(l, n), 0.); sample_color = color3 * c; } else { sample_color = vec3(0); } } } // Plane at bottom float t_plane = dot(vec3(0,-0.5 *h,0)-origin,vec3(0,1,0))/ dot(dir, vec3(0,1,0)); if(t_plane > 0. && (old_t < 0. || t_plane < old_t)) { hit = true; old_t = t_plane; vec3 pt = origin + t_plane * dir; // If in circle of sphere projection on plane, then in shadow if(length(pt.xz-c1.xz) < r1 || length(pt.xz-c2.xz) < r2 || length(pt.xz-c3.xz) < r3) { sample_color=vec3(0); } else { if(mod(floor(pt.x / 10.), 2.) != mod(floor(pt.z / 10.), 2.)) { sample_color=vec3(0.75); } else { sample_color =vec3(0.25); } } } float weight = 1.; if(filter == 1) { weight = (0.5 * pixel_w - abs(diff.x)) * (0.5 * pixel_h - abs(diff.y)); } else if(filter == 2) { float pw2 = 0.5 * pixel_w; float ph2 = 0.5 * pixel_h; weight = 1. / (2. * 3.141596 * sigma * sigma) * (exp(-diff.x * diff.x / (2. * sigma * sigma)) - exp(-pw2 * pw2 / (2. * sigma * sigma))) * (exp(-diff.y * diff.y / (2. * sigma * sigma)) - exp(-ph2 * ph2 / (2. * sigma * sigma))); } sum_weights += weight; final_color += weight * sample_color; } if(hit) gl_FragColor = vec4(gamma(final_color / sum_weights), 1); }`, })3b:T777,{ // Clear screen drawDOFDemo.regl.clear({ color: whitesmoke }); drawDOFDemo_lens.regl.clear({ color: whitesmoke }); drawStatifyDemo.regl.clear({ color: whitesmoke }); drawFilterDemo.regl.clear({ color: whitesmoke }); let filter_map = {"Box":0, "Tent":1, "Gaussian":2}; // Position light const light_pos = [Math.sin((0) * Math.PI / 180) * Math.sin(0 * Math.PI / 180), Math.cos(0 * Math.PI / 180), Math.cos((0) * Math.PI / 180) * Math.sin(0 * Math.PI / 180)]; // Render drawDOFDemo({light_pos: light_pos, view: {x: 0, width: ewidth, height: height}, f_v: focus_distance, lens_d: lens_diameter, spp_x: 1, spp_y: 1, stratify: false, filter: 0}); drawDOFDemo_lens({light_pos: light_pos, view: {x: 0, width: ewidth, height: height}, f_v: focus_distance, lens_d: 2 * focus_distance * Math.tan(0.5 * Math.PI / 180 * lens_fov), spp_x: 1, spp_y: 1, stratify: false, filter: 0}); drawStatifyDemo({light_pos: light_pos, view: {x: 0, width: ewidth, height: height}, f_v: focus_distance, lens_d: lens_diameter, spp_x: spp_x, spp_y: spp_y, stratify: stratify[0] !== undefined, filter: 0}); drawFilterDemo({light_pos: light_pos, view: {x: 0, width: ewidth, height: height}, f_v: focus_distance, lens_d: lens_diameter, spp_x: spp_x, spp_y: spp_y, stratify: stratify[0] !== undefined, filter: filter_map[filter]}); return `Demos Drawn`; }3c:[] 2f:{"title":"Advanced Modelling: Camera Depth of Field & Image Antialiasing","cells":[{"id":0,"value":"# Advanced Modelling: Camera Depth of Field & Image Antialiasing","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"The [${spancolor(camera_color, \"camera\")} model](https://observablehq.com/@cse4413msstate/modelling-view-frame-ray-generation) we used previously is simple: It models a [(ideal) pinhole camera](https://en.wikipedia.org/wiki/Pinhole_camera). In this model, the ${spancolor(camera_color, \"aperture\")} (where the light enters the ${spancolor(camera_color, \"camera\")} for ${spancolor(image_color, \"imaging\")}) is infinitely small and gathers light instantly. This limits the effects the ${spancolor(camera_color, \"camera\")} can model, including the lack of depth of field. In addition, our previous approach only uses one ${spancolor(ray_color, \"ray\")} per pixel. This causes an additional issue with aliasing—artifacts in the ${spancolor(image_color, \"image\")} due to not having enough samples to discriminate features. By modifying our ${spancolor(camera_color, \"camera\")} model, we can address these issues.","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"viewof focus_distance = Inputs.range([Math.floor((1 - f_cap_factor) * 0.5 * ewidth), Math.floor(f_cap_factor * 0.5 * ewidth)], {label: html`${spancolor(viewport_color, \"Focus Distance\")} ${texcolor(viewport_color,\"f\")}`, step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":438,"value":"$34","pinned":false,"hidden":false,"mode":"md"},{"id":426,"value":"To specify a thin lens system, any two of the ${spancolor(camera_color, \"focal length\")}, the ${spancolor(viewport_color, \"focus distance\")}, and the ${spancolor(image_color, \"focal distance\")} must be given in addition to the ${spancolor(camera_color, \"lens diameter\")}; using [the Gaussian thin lens equation](https://en.wikipedia.org/wiki/Thin_lens#Image_formation), the other can be found:","pinned":false,"hidden":false,"mode":"md"},{"id":459,"value":"tex.block`\\frac{1}{\\color{${image_color}}{f'_i}} + \\frac{1}{\\color{${viewport_color}}{f_v}} = \\frac{1}{\\color{${camera_color}}{f'}}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"If simulating a a real ${spancolor(camera_color, \"camera\")}, the ${spancolor(camera_color, \"len's focal length\")} ${texcolor(camera_color, \"f'\")} could be used with the chosen ${spancolor(viewport_color, \"focus distance\")} ${texcolor(viewport_color, \"f_v\")} to determine the ${spancolor(image_color, \"image sensor distance\")} ${texcolor(image_color, \"f'_i\")}; the dimensions of the ${spancolor(camera_color, \"sensor\")} and ${spancolor(camera_color, \"lens\")} would then be used to determine the ${spancolor(viewport_color, \"viewport\")} dimensions. In computer graphics, it is common to specify the ${spancolor(viewport_color, \"viewport distance\")} ${texcolor(viewport_color, \"f_v\")} to determine the other parameters; assuming no lens magnification, then ${tex`\\textcolor{${image_color}}{f'_i}=\\textcolor{${viewport_color}}{f_v}`} and thus ${tex`\\textcolor{${camera_color}}{f'}=\\frac{1}{2}\\textcolor{${viewport_color}}{f_v}`}.","pinned":false,"hidden":false,"mode":"md"},{"id":36,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"Inputs.bind(Inputs.range([Math.floor((1 - f_cap_factor) * 0.5 * ewidth), Math.floor(f_cap_factor * 0.5 * ewidth)], {label:html`${spancolor(viewport_color, \"Focus Distance\")} ${texcolor(viewport_color,\"f_v\")}`, step: 1, value: 0.5}), viewof focus_distance)","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"viewof lens_diameter = Inputs.range([0, 100], {label: html`${spancolor(camera_color, \"Lens Diameter\")} ${texcolor(camera_color,\"d\")}`, value: 5, step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"The plane the ${spancolor(viewport_color, \"viewport\")} is part of is called the ${spancolor(viewport_color, \"plane of focus\")}; all points on the plane are focused to a unique point on the ${spancolor(image_color, \"image plane\")}. ${spancolor(object_color, \"Objects\")} at distances greater or less than the ${spancolor(viewport_color, \"focus distance\")} are blurry; this area where the blurriness is imperceptible is the depth of field. The size of the blur (called the circle of confusion) is proportional to the distance of the ${spancolor(image_color, \"imaging plane\")} from the plane where the ${spancolor(object_color, \"objects\")} would be in focus (indicated by ${spancolor(ray_color, \"the cone\")} in the figure above).","pinned":false,"hidden":false,"mode":"md"},{"id":223,"value":"$36","pinned":false,"hidden":false,"mode":"md"},{"id":219,"value":"dof_demo = {\n const canvas = html`