2e:null 2f:["$","title",null,{"children":"Digital Images & Color: From Render to Display | Introduction to Computer Graphics MSState | Observable"}] 34:T40b,viewof clamp = { // Do we support WebGPU? if(!("gpu" in navigator) || adapter === undefined) return html`WebGPU Not Supported. Please use Chrome or other supported browser.`; // Create the backing canvas // For now, ignore the device pixel ratio (the ratio of physical to virtual pixels) const canvas = DOM.canvas(ewidth, height); canvas.style.width = `${Math.min(width,ewidth)}px`; canvas.style.height = `${Math.min(width,ewidth) / ewidth * height}px`; canvas.style.border = "thin solid black"; // Load WebGPU into the canvas const context = (canvas.value = canvas.getContext('webgpu')); context.configure({ device, format: presentationFormat, // This is what's required to be able to write to a texture from a compute shader usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.STORAGE_BINDING, }); const fig = html`

${context.canvas}

Clamp tone mapping with${use_srgb[0]?"":"out"} gamma compression`; fig.value = context; return fig; }35:T412,viewof norm = { // Do we support WebGPU? if(!("gpu" in navigator) || adapter === undefined) return html`WebGPU Not Supported. Please use Chrome or other supported browser.`; // Create the backing canvas // For now, ignore the device pixel ratio (the ratio of physical to virtual pixels) const canvas = DOM.canvas(ewidth, height); canvas.style.width = `${Math.min(width,ewidth)}px`; canvas.style.height = `${Math.min(width,ewidth) / ewidth * height}px`; canvas.style.border = "thin solid black"; // Load WebGPU into the canvas const context = (canvas.value = canvas.getContext('webgpu')); context.configure({ device, format: presentationFormat, // This is what's required to be able to write to a texture from a compute shader usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.STORAGE_BINDING, }); const fig = html`

${context.canvas}

Maximum value tone mapping with${use_srgb[0]?"":"out"} gamma compression`; fig.value = context; return fig; }36:T42f,viewof reinhard_luminance = { // Do we support WebGPU? if(!("gpu" in navigator) || adapter === undefined) return html`WebGPU Not Supported. Please use Chrome or other supported browser.`; // Create the backing canvas // For now, ignore the device pixel ratio (the ratio of physical to virtual pixels) const canvas = DOM.canvas(ewidth, height); canvas.style.width = `${Math.min(width,ewidth)}px`; canvas.style.height = `${Math.min(width,ewidth) / ewidth * height}px`; canvas.style.border = "thin solid black"; // Load WebGPU into the canvas const context = (canvas.value = canvas.getContext('webgpu')); context.configure({ device, format: presentationFormat, // This is what's required to be able to write to a texture from a compute shader usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.STORAGE_BINDING, }); const fig = html`

${context.canvas}

Luminance-corrected Reinhard tone mapping with${use_srgb[0]?"":"out"} gamma compression`; fig.value = context; return fig; }37:T40b,viewof hable = { // Do we support WebGPU? if(!("gpu" in navigator) || adapter === undefined) return html`WebGPU Not Supported. Please use Chrome or other supported browser.`; // Create the backing canvas // For now, ignore the device pixel ratio (the ratio of physical to virtual pixels) const canvas = DOM.canvas(ewidth, height); canvas.style.width = `${Math.min(width,ewidth)}px`; canvas.style.height = `${Math.min(width,ewidth) / ewidth * height}px`; canvas.style.border = "thin solid black"; // Load WebGPU into the canvas const context = (canvas.value = canvas.getContext('webgpu')); context.configure({ device, format: presentationFormat, // This is what's required to be able to write to a texture from a compute shader usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.STORAGE_BINDING, }); const fig = html`

${context.canvas}

Hable tone mapping with${use_srgb[0]?"":"out"} gamma compression`; fig.value = context; return fig; }38:T4ff,Later, the Academy of Motion Pictures Arts & Sciences created the Academy Color Encoding Systems (ACES) for digital photography in movie. As part of this, they created a tone mapping specification aimed at preserving saturation during mapping. ACES' mapping is non-linear and complex; it has been approximated by others for calculation simplicity. A common approximation is given by Hill: ${tex.block`\begin{aligned} C_\textrm{ACESrrt} &= \begin{bmatrix} 0.59719 & 0.35458 & 0.04823 \\ 0.07600 & 0.90834 & 0.01566 \\ 0.02840 & 0.13383 & 0.83777\\ \end{bmatrix}C_\textrm{ij}\\ C_\textrm{ACESfitted} &= \frac{\left(C_\textrm{ACESrrt} + 0.0245787\right)C_\textrm{ACESrrt} - 0.000090537}{\left(0.983729C_\textrm{ACESrrt} + 0.4329510\right)C_\textrm{ACESrrt} + 0.238081}\\ C'_\textrm{ij} &= \begin{bmatrix} 1.60475 & -0.53108 & -0.07367\\ -0.10208 & 1.10813 & -0.00605\\ -0.00327 & -0.07276 & 1.07602\\ \end{bmatrix}C_\textrm{ACESfitted}\\ \end{aligned}`} Note the vector/scalar addition & subtraction and vector/vector multiply & divide is component-wise. Similar to Hable, ACES is applied to the color, not the luminance; unlike Hable, this is because the approximation converts to XYZ (and then to the ACES colorspace) and back during the process.39:T422,viewof aces = { // Do we support WebGPU? if(!("gpu" in navigator) || adapter === undefined) return html`WebGPU Not Supported. Please use Chrome or other supported browser.`; // Create the backing canvas // For now, ignore the device pixel ratio (the ratio of physical to virtual pixels) const canvas = DOM.canvas(ewidth, height); canvas.style.width = `${Math.min(width,ewidth)}px`; canvas.style.height = `${Math.min(width,ewidth) / ewidth * height}px`; canvas.style.border = "thin solid black"; // Load WebGPU into the canvas const context = (canvas.value = canvas.getContext('webgpu')); context.configure({ device, format: presentationFormat, // This is what's required to be able to write to a texture from a compute shader usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.STORAGE_BINDING, }); const fig = html`

${context.canvas}

ACES tone mapping with${use_srgb[0]?"":"out"} gamma compression`; fig.value = context; return fig; return context.canvas; }3a:T67f,

Video Killed the Perception Power Law

Which came first: display gamma or encoding gamma? Yes.

Due to a series of coincidences, gamma correction is often assumed to be tied to the characteristics of old CRT technology. CRTs respond to voltage in an exponential manner: Doubling the input voltage would increase the output voltage by roughly an exponent of 2.2. This γ is almost the inverse of the γ already being used in film cameras at the time, so no (or little) additional processing had to be done. **Neither** caused the other.

One may ask why film cameras of the time time were already gamma compressing. The response of film to increases in exposure follows a power law similar to that of our perceptual system (another coincidence) but not at the same γ. Furthermore, because projected film was expected to be viewed in dark environments, film cameras also γ shifted their response to make the result more vivid in these environments. These two factors created an overall inverse γ that was close to the CRT γ.

Modern LCDs do not have the electrical response of CRTs, so tying the γ to the display technology is incorrect—we could skip γ encoding and let the display handle any conversion needed. Gamma compression is useful because of its perceptual qualities (preserving details in dark areas); it would have been invented regardless of display technology.

3b:Td84,shader_src = `// Globals, functions, etc. go here // This is the canvas texture we write to @group(0) @binding(0) var tex: texture_storage_2d<${presentationFormat}, write>; // The HDR Image struct hdr_data { r : f32, g : f32, b : f32 }; @group(0) @binding(1) var hdr_buffer : array; // What are we doing? @group(0) @binding(2) var method : u32; // Other constants const width : u32 = ${ewidth}; const height : u32 = ${height}; const max : vec3f = vec3f(${max[0]},${max[1]},${max[2]}); fn apply_exposure(in_c : vec3f) -> vec3f { return in_c; } fn tone_clamp(in_c : vec3f) -> vec3f { return clamp(in_c, vec3f(0), vec3f(1)); } fn tone_max(in_c : vec3f) -> vec3f { return in_c / max; } fn tone_reinhard(in_c : vec3f) -> vec3f { // This is the "extended" Reinhard return in_c * (1 + in_c / (max*max)) / (1 + in_c); } fn luminance(in_c : vec3f) -> f32 { return dot(in_c, vec3f(0.2126, 0.7152, 0.0722)); } fn tone_reinhard_l(in_c : vec3f) -> vec3f { // This is the "extended" Reinhard let l_in = luminance(in_c); let l_max = luminance(max); return in_c * (1 + l_in / (l_max*l_max)) / (1 + l_in); } fn tone_hable_partial(in_c : vec3f) -> vec3f { let A = 0.15; let B = 0.50; let C = 0.10; let D = 0.20; let E = 0.02; let F = 0.30; return ((in_c*(A*in_c+C*B)+D*E)/(in_c*(A*in_c+B)+D*F))-E/F; } const white_hable = vec3f(${1 / white_hable}); fn tone_hable(in_c : vec3f) -> vec3f { let exposure_bias = 2.; return white_hable * tone_hable_partial(in_c * exposure_bias); } const aces_input_matrix = mat3x3( 0.59719, 0.07600, 0.02840, 0.35458, 0.90834, 0.13383, 0.04823, 0.01566, 0.83777, ); const aces_output_matrix = mat3x3( 1.60475, -0.10208, -0.00327, -0.53108, 1.10813, -0.07276, -0.07367, -0.00605, 1.07602, ); fn tone_aces(in_c : vec3f) -> vec3f { let v = aces_input_matrix * in_c; let a = v * (v + 0.0245786) - 0.000090537; let b = v * (0.983729 * v + 0.4329510) + 0.238081; return clamp(aces_output_matrix * (a / b), vec3(0.0), vec3(1.0)); } fn to_srgb(in_c : vec3f) -> vec3f { // From https://gamedev.stackexchange.com/a/194038 let cutoff = in_c < vec3f(0.0031308); let higher = vec3f(1.055)*pow(in_c, vec3f(1/2.4)) - vec3f(0.055); let lower = in_c * vec3f(12.95); return ${use_srgb[0] ? `mix(higher, lower, vec3f(cutoff))` : `in_c`}; } // Shader main function // Compute shader; works on 8 x 8 tiles of the image @compute @workgroup_size(8, 8) fn set_pixels(@builtin(global_invocation_id) globalId : vec3u) { // Check to see if we are past the size (GPU might create more pixels that // can be set for its efficiency). i,j are the index into our picture (the // pixel coords) var i = globalId.x; let j = globalId.y; if(i >= width || j >= height) { return; } var idx = i + j * width; let pixel = hdr_buffer[idx]; let in_color = apply_exposure(vec3f(pixel.r,pixel.g,pixel.b)); var color = vec3f(0); switch(method) { case 0, default: { color = tone_clamp(in_color); } case 1: { color = tone_max(in_color); } case 2: { color = tone_reinhard(in_color); } case 3: { color = tone_reinhard_l(in_color); } case 4: { color = tone_hable(in_color); } case 5: { color = tone_aces(in_color); } } // Write the color to the texture textureStore(tex, globalId.xy, vec4f(to_srgb(color), 1)); } `3c:T5ef,{ if(device === undefined) return; for(const method in method_array) { // Get the current texture from the canvas context and // set it as the texture to render to. const gpu = canvas_array[method]; const canvasTexture = gpu.getCurrentTexture(); const method_data = new Uint32Array([method_array[method]]); const method_buffer = device.createBuffer({ size: 4, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST, }); device.queue.writeBuffer(method_buffer, 0, method_data); // Bind the texture & other data to the pipeline for writing const bindGroup = device.createBindGroup({ layout: pipeline.getBindGroupLayout(0), entries: [ { binding: 0, resource: canvasTexture.createView() }, { binding: 1, resource: { buffer: hdr_buffer }}, { binding: 2, resource: { buffer: method_buffer }} ], }); // make a command encoder to start encoding commands const encoder = device.createCommandEncoder({ label: 'HDR encoder' }); // make a compute pass encoder to encode the current pipeline and // bind the canvas texture to it for writing const pass = encoder.beginComputePass(); pass.setPipeline(pipeline); pass.setBindGroup(0, bindGroup); pass.dispatchWorkgroups(canvasTexture.width / 8, canvasTexture.height / 8); pass.end(); const commandBuffer = encoder.finish(); device.queue.submit([commandBuffer]); } return md`Rendered.`; }3d:[{"id":"fb563322cdcb0fbe023519c14170f3a2220dcf1cbd41a2ecab00e4f1523f3a6b969d388a3b9fca3d5218b9615598bcb33e2c3fb73665164adb8a87d927816de0","href":"https://static.observableusercontent.com/files/fb563322cdcb0fbe023519c14170f3a2220dcf1cbd41a2ecab00e4f1523f3a6b969d388a3b9fca3d5218b9615598bcb33e2c3fb73665164adb8a87d927816de0","name":"memorial_o876.hdr","type":"application/octet-stream","lastModified":1757349426623.501,"size":1341352},{"id":"4cef8c30635c9e6c8ac81baccd19744d1952efb056303c7a43005f2f933d85c89b21d74d66378b4a20325f748023bbf8cfce4aaa4f64653d3b8f35c984387467","href":"https://static.observableusercontent.com/files/4cef8c30635c9e6c8ac81baccd19744d1952efb056303c7a43005f2f933d85c89b21d74d66378b4a20325f748023bbf8cfce4aaa4f64653d3b8f35c984387467","name":"MtTamWest_o281.hdr","type":"application/octet-stream","lastModified":1757349426623.501,"size":2998251},{"id":"d166011f60e817b178f232701b119afe30b2c6f5953dff72b6884e506aeb0828e2f0802073cb7ba6d7c30a9f06519b9c7a318d2e402c8276ec7a70ab1f08320b","href":"https://static.observableusercontent.com/files/d166011f60e817b178f232701b119afe30b2c6f5953dff72b6884e506aeb0828e2f0802073cb7ba6d7c30a9f06519b9c7a318d2e402c8276ec7a70ab1f08320b","name":"bigFogMap_oDAA.hdr","type":"application/octet-stream","lastModified":1757349426623.501,"size":2746265}] 32:{"id":"c873b885dcbd1749","slug":"digital-images-color-from-render-to-display","title":"Digital Images & Color: From Render to Display","thumbnail":"dd4bc67a93e17ebefa8c6eddc1a9e7fd03495a9f7b78ad6c31a9c61409fe62f3","access_level":"public","create_time":"$D2025-09-08T16:37:06.623Z","update_time":"$D2026-09-03T16:54:25.043Z","view_time":null,"first_public_time":"$D2025-09-10T14:22:25.281Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"7c0dab8b587e2ed2","login":"cse4413msstate","name":"Introduction to Computer Graphics MSState","avatar_url":"https://avatars-next.observableusercontent.com/343b1e48cbb2480c08063f107b4631944c5bb97a5258576dd939a5be852f30bc","tier":"pro_2024"},"version":1020,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e83a97795d4ad3a2","login":"infowantstobeseen","name":"T.J. Jankun-Kelly","avatar_url":"https://avatars-next.observableusercontent.com/df9d7f817f9ad92a763b56ee2e891ca0716a6c2f6c398811547f89f0448fa181","tier":null}],"members":[{"type":"individual","id":"e83a97795d4ad3a2","login":"infowantstobeseen","name":"T.J. Jankun-Kelly","avatar_url":"https://avatars-next.observableusercontent.com/df9d7f817f9ad92a763b56ee2e891ca0716a6c2f6c398811547f89f0448fa181","tier":null,"role":"editor"},{"type":"team","id":"7c0dab8b587e2ed2","login":"cse4413msstate","name":"Introduction to Computer Graphics MSState","avatar_url":"https://avatars-next.observableusercontent.com/343b1e48cbb2480c08063f107b4631944c5bb97a5258576dd939a5be852f30bc","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"16798e6b406d73db","slug":"ray-tracing-notes","title":"Ray Tracing Notes","owner":{"id":"7c0dab8b587e2ed2","login":"cse4413msstate","name":"Introduction to Computer Graphics MSState"}},"type":"notebook","body":{"title":"Digital Images & Color: From Render to Display","cells":[{"id":0,"value":"# Digital Images & Color: From Render to Display\n\nAfter rendering, we have a series of floating point color values stored in a buffer to be displayed. However, due to how images are displayed and how we perceive them, there are some modifications we must still apply before we are done.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1007,"value":"

255 is a Nice Round Number

Often, color is described using triplets with a maximum value of 255. This is due to quantizing the color channels to 3 bytes (one per channel). We put off quantizing as long as possible to work in a more precise space, leaving the operating system and hardware to do so.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":496,"value":"## HDR to LDR\n\nOur images likely have a high dynamic range (HDR)—a large difference between the smallest luminance and largest. In addition, we may have stored pixel values beyond what can be displayed on our screen (values greater than 1.0 for any of red, green, or blue). Before display, we have to change from this high dynamic range to a low(er) dynamic range suitable for that task.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":498,"value":"

How Bright are We?

When correcting for [luminance](https://en.wikipedia.org/wiki/Luminance \"Wikiipedia: Luminance\"), we are correcting for the perceived brightness of the pixel (as opposed to the light energy we generated during rendering: its [radiance](https://en.wikipedia.org/wiki/Radiance \"Wikipedia: Radiance\")). Many notes on this subject ignore the luminance and work on the RGB colors directly; this is inaccurate as we do not perceive all channels equally but can be close enough.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":535,"value":"### Tone Mapping\n\n Tone mapping is the process of shifting this colors to a lower range while preserving observable features of contrast and hue. There are a variety of approaches; we will focus on global tone mapping operations that work on an image uniformly (without local information). Some will work by correcting the luminance, others by manipulating the channels directly.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":528,"value":"

Roses are Red, except in XYZ

If we are changing luminance directly, it is more correct to do these calculations in CIE XYZ instead of linear sRGB (or similar) color space; we then convert back to linear sRGB before gamma compression. Otherwise, we can calculate the luminance from the RGB values and then use the change in luminance to weight the RGB color. The RGB to luminance conversion is

\n ${tex.block`L=0.2126r+ 0.7152g+ 0.0722b`}\n

Luminance weighting the colors directly is less accurate and will tend to desaturate more than if we did a full XYZ conversion.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":540,"value":"#### Clamp\n\nIf an HDR image is presented on an LDR canvas, clamping will occur—values above 1 will be treated as 1. It goes without saying that the larger the dynamic range, the more loss of details will occur.\n\n${tex.block`L_\\textrm{clamp} = \\operatorname{clamp}\\left(L'_\\mathrm{ij}, 0, 1\\right)`}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"viewof image = Inputs.radio([\"memorial\", \"MtTamWest\", \"bigFogMap\"], {label: \"Image\", value: \"memorial\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":840,"value":"Inputs.bind(Inputs.checkbox([\"Gamma Compress\"], {value: [\"Gamma Compress\"]}),viewof use_srgb)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"#### Normalization\n\nIf we want the maximum value to map to full saturation, we can divide the luminance by the maximum to normalize. However, as perception is non-linear (as stated, it follows a power law), this normalization will either under- or over-expose the image and lose details.\n\n${tex.block`L_\\textrm{norm} = \\frac{L'_\\textrm{ij}}{L_\\textrm{max}}`}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":849,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":911,"value":"Inputs.bind(Inputs.radio([\"memorial\", \"MtTamWest\", \"bigFogMap\"], {label: \"Image\", value: \"memorial\"}), viewof image)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"value":"Inputs.bind(Inputs.checkbox([\"Gamma Compress\"], {value: [\"Gamma Compress\"]}),viewof use_srgb)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"#### Photographic: Reinhard\n\nIn photography, tone reproduction uses different curves to compress the dynamic range; none are linear. In modern photography, high luminance regions are compressed more than lower ones to preserve contrast in darker areas; in 2002 Reinhard and others introduce a tone mapping curve to approximate this photographic approach:\n\n${tex.block`L_\\textrm{Reinhard} = \\frac{L'_\\textrm{ij}\\left(1+\\frac{L'_\\textrm{ij}}{L^2_\\textrm{white}}\\right)}{1+L'_\\textrm{ij}}`}\n\nwhere ${tex`L_\\textrm{white}`} is the white point—the smallest luminance value that is mapped to full white (all others above will be similarly mapped after clamping); a good proxy is the maximum luminance ${tex`L_\\textrm{max}`}.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":857,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":914,"value":"Inputs.bind(Inputs.radio([\"memorial\", \"MtTamWest\", \"bigFogMap\"], {label: \"Image\", value: \"memorial\"}), viewof image)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1008,"value":"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":900,"value":"Inputs.bind(Inputs.checkbox([\"Gamma Compress\"], {value: [\"Gamma Compress\"]}),viewof use_srgb)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"

That doesn't look simple!

You might find a different formula for Reinhard that does not have the white point:\n\n ${tex.block`L_\\textrm{Simple Reinhard} = \\frac{L'_\\textrm{ij}}{1+L'_\\textrm{ij}}`}\n\n This simplified Reinhard ensures all values are between ${tex`0\\dots 1`}. However, by doing so, saturation is usually lost.\n

${reinhard}

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":565,"value":"#### Filmic: Hable & ACES\n\nWhile Reinhard uses an approach inspired by photography, it does not account for the behavior of actual film under light. It also does not account for the processes used for display on video and in cinema. A few filmic approaches attempt to capture this behavior.\n\nOne of the first filmic tone mapping approaches was used by Hable and team for Uncharted 2. It is a non-linear curve which grow slower in dark areas than lighter ones thus giving crisper blacks:\n\n${tex.block`\\frac{(0.15C_\\textrm{ij}+0.05)C_\\textrm{ij}+0.004}{(0.15C_\\textrm{ij}+0.5)C_\\textrm{ij}+0.05}-\\frac{2}{30}\n`}\n\nNote, Hable recommends applying this operation to the RGB color ${tex`C_\\textrm{ij}`} not the luminance ${tex`L'_\\textrm{ij}`}!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":869,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":917,"value":"Inputs.bind(Inputs.radio([\"memorial\", \"MtTamWest\", \"bigFogMap\"], {label: \"Image\", value: \"memorial\"}), viewof image)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":903,"value":"Inputs.bind(Inputs.checkbox([\"Gamma Compress\"], {value: [\"Gamma Compress\"]}),viewof use_srgb)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":873,"value":"$38","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":875,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":920,"value":"Inputs.bind(Inputs.radio([\"memorial\", \"MtTamWest\", \"bigFogMap\"], {label: \"Image\", value: \"memorial\"}), viewof image)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"Inputs.bind(Inputs.checkbox([\"Gamma Compress\"], {value: [\"Gamma Compress\"]}),viewof use_srgb)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"## Preparing for Display: Gamma Compression\n\nWhen we are generating color during rendering, we perform operations directly: Scaling, multiplying, etc. However, these operations only work if we assume the space we are working in is linear. This is a good assumption in computer graphics; however, for display purposes, most colors are stored in a compressed, non-linear space where applying these operations directly would be incorrect. If we want our renders to look correct, we must convert to this non-linear space before storing the final color value. We have to gamma compress/encode. Gamma decompression/decoding happens on the display side to convert this space into the color space of the display.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":770,"value":"

Trapped in a Web

On the web, the default color space is gamma compressed sRGB. If you wish to modify colors (or calculate and set them correctly manually), you must uncompress, do the operations, and then recompress. Named colors (as opposed to RGB triplets) have been appropriately compressed.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":609,"value":"\n\nPerceptually, humans are more sensitive to changes at lower luminance than higher luminance—it takes a much larger increase in radiant energy to be noticed at high brightness than low. If luminance was encoded digitally linearly, more bits would be given to the less sensitive bright areas than the more sensitive dark areas. If we compress via a fractional exponent ${tex`C^\\gamma_\\textrm{ij}, \\gamma < 1`}, the darker bits are expanded and the lighter bits are compressed, providing more detail where it is required. In practice, the compression may not be a pure power function (instead, they tend to be piecewise linear). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":625,"value":"{\n let canvas = ramp(d3.interpolateRgb.gamma(2.2)(\"black\",\"white\"));\n canvas.style.width = (36*16-3) + \"px\";\n canvas.style.margin = \"0 0 10px 0px \";\n canvas.style.border = \"thin solid black\";\n \n const fig = html`

${canvas}\n
${swatches([...Array(16).keys().map(i=>d3.rgb(i*255/16,i*255/16,i*255/16))])}
${swatches([...Array(16).keys().map(i=>d3.rgb(Math.pow(i/16,1/2.2)*255,Math.pow(i/16,1/2.2)*255,Math.pow(i/16,1/2.2)*255))])}

Top: A ramp of increasing stored intensity value.
\nMiddle: Equally spaced samples for intensity without gamma compression. Dark tones dominate.
\nBottom: Gamma compressed samples. They now better match the above ramp.

`;\n return fig;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"$3a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":628,"value":"Display standards describe, in part, the encoding and decoding gamma (the OETF and EOTF respectively) used in their color space. For the common sRGB color space, the OETF is not a simple gamma, but instead has a linear part for lower values:\n\n${tex.block`C_\\textrm{encoded} = \\begin{cases}12.92C & C \\leq 0.0031308\\\\ 1.055C^{\\frac{1}{24}} - 0.055 & \\text{otherwise}\\end{cases}`}\n\nThis encoding is done per RGB channel after tone mapping.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":816,"value":"viewof use_srgb = Inputs.checkbox([\"Gamma Compress\"], {value: [\"Gamma Compress\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":763,"value":"## Summary\n- Generate colors in HDR\n- Tone map to project color to LDR\n- Work in linear color\n- Store in gamma compressed color","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":493,"value":"## Acknowledgements\n\nThanks to [Matt Taylor](https://64.github.io/tonemapping/) for a good overview. HDR Images via [Greg Ward](http://www.anyhere.com/gward/hdrenc/pages/originals.html): memorial by Paul Debevec, MtTamWest via ILM, and bigFogMap via Jack Tumblin.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":765,"value":"## References","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1003,"value":"- Reinhard et al., [\"Photographic Tone Reproduction for Digital Images\"](https://www-old.cs.utah.edu/docs/techreports/2002/pdf/UUCS-02-001.pdf)\n- Habble, [Filmic Tonemapping with Piecewise-Power Curves](http://filmicworlds.com/blog/filmic-tonemapping-with-piecewise-power-curves/)\n- Cambridge Color, [Understanding Gamma Correction](https://www.cambridgeincolour.com/tutorials/gamma-correction.htm)\n- Poynton, [\"“Gamma” and its Disguises: The Nonlinear Mappings\nof Intensity in Perception, CRTs, Film and Video\"](https://www.poynton.ca/PDFs/SMPTE93_Gamma.pdf)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":969,"value":"## Appendix: WGSL Snippets\n\nSome WGSL code to implement these tone mapping operations.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":978,"value":"### Luminance \n\n~~~rust\nfn luminance(in_c : vec3f) -> f32\n{\n return dot(in_c, vec3f(0.2126, 0.7152, 0.0722));\n}\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":971,"value":"### Clamping\n\n~~~rust\nfn tone_clamp(in_c : vec3f) -> vec3f\n{\n return clamp(in_c, vec3f(0), vec3f(1));\n}\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":981,"value":"### Normalization\n\n~~~rust\nfn tone_max(in_c : vec3f) -> vec3f\n{\n return in_c / max;\n}\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":984,"value":"### (Extended) Reinhard\n\n~~~rust\nfn tone_reinhard_l(in_c : vec3f) -> vec3f\n{\n let l_in = luminance(in_c);\n let l_max = luminance(max); // max is the chosen maximum white-point\n return in_c * (1 + l_in / (l_max*l_max)) / (1 + l_in);\n}\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":988,"value":"### Hable/Uncharted 2\n\n~~~rust\nfn tone_hable_partial(in_c : vec3f) -> vec3f\n{\n let A = 0.15;\n let B = 0.50;\n let C = 0.10;\n let D = 0.20;\n let E = 0.02;\n let F = 0.30;\n return ((in_c*(A*in_c+C*B)+D*E)/(in_c*(A*in_c+B)+D*F))-E/F;\n}\n\n// white_hable is the inverse of the operator applied to a 11.2 white-point\n// best to be pre-calculated and stored here.\nconst white_hable = vec3f(1 / 0.7251293784387428); \n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":992,"value":"### ACES\n\nVia [Neublet](https://github.com/TheRealMJP/BakingLab/blob/master/BakingLab/ACES.hlsl)\n\n~~~rust\n// Note that wgsl matrices, like most graphics matrices for historical reasons,\n// are stored column-major, not the C-like row major.\nconst aces_input_matrix = mat3x3(\n 0.59719, 0.07600, 0.02840,\n 0.35458, 0.90834, 0.13383,\n 0.04823, 0.01566, 0.83777,\n);\n\nconst aces_output_matrix = mat3x3(\n 1.60475, -0.10208, -0.00327,\n -0.53108, 1.10813, -0.07276,\n -0.07367, -0.00605, 1.07602,\n);\n\nfn tone_aces(in_c : vec3f) -> vec3f\n{\n let v = aces_input_matrix * in_c;\n let a = v * (v + 0.0245786) - 0.000090537;\n let b = v * (0.983729 * v + 0.4329510) + 0.238081;\n return clamp(aces_output_matrix * (a / b), vec3(0.0), vec3(1.0));\n}\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":997,"value":"### sRGB Gamma Compression\n\nAdapted from [StackOverflow](from https://gamedev.stackexchange.com/a/194038),\n\n~~~rust\nfn to_srgb(in_c : vec3f) -> vec3f\n{\n let cutoff = in_c < vec3f(0.0031308);\n let higher = vec3f(1.055)*pow(in_c, vec3f(1/2.4)) - vec3f(0.055);\n let lower = in_c * vec3f(12.95);\n return mix(higher, lower, vec3f(cutoff));\n}\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"## Implementation\n\nBelow are parts need to get the compute pipeline to work. They do not need to be changed.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"error_log = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"### Canvas Variables\n\nEstablish the size of the Canvas.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"ewidth = active.width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"height = active.height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"### WebGPU Initialization & Pipeline Creation\n\nWe initialize WebGPU if supported and then create a render pipeline as needed (when pipeline constants change).\n\nWrite-to-canvas info from [WebGPUFundamentals](https://webgpufundamentals.org/webgpu/lessons/webgpu-storage-textures.html#canvas-as-a-storage-texture \"WebGPU Storage Textures: Canvas as a Storage Texture\").","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"#### Adapter\n\nCreate the WebGPU adapter if we have it","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"adapter = await navigator.gpu?.requestAdapter();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"#### Device and Canvas Storage\n\nSpecify the storage format. If the newer `bgra8unorm`, we have to specify its storage (defaults to `rgba`'s version).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":78,"value":"presentationFormat = adapter?.features.has('bgra8unorm-storage')\n ? navigator.gpu.getPreferredCanvasFormat()\n : 'rgba8unorm';","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"Create the device to use the GPU. We have to explicitly call for `bgra` storage if that is what is preferred. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"device = await adapter?.requestDevice({\n requiredFeatures: presentationFormat === 'bgra8unorm'\n ? ['bgra8unorm-storage']\n : [],\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"#### Initial Shader Source","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"white_hable = {\n let A = 0.15;\n let B = 0.50;\n let C = 0.10;\n let D = 0.20;\n let E = 0.02;\n let F = 0.30;\n let in_c = 11.2;\n return ((in_c*(A*in_c+C*B)+D*E)/(in_c*(A*in_c+B)+D*F))-E/F;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"#### Shader module\n\nCompile the shader. Process any errors for reporting (from [WebGPUFundamentals](https://webgpufundamentals.org/webgpu/lessons/webgpu-debugging.ht \"WebGPU Debugging\")). \n\nFirst, an error logger:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":86,"value":"function log(...args) {\n const elem = html`

`;\n elem.innerHTML = args.join(' ');\n error_log.appendChild(elem);\n error_log.style.display = \"block\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"Now the shader itself. Uses the shader source above.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"gpumodule = \n{\n if(!device)\n return undefined;\n\n const gpumodule = device.createShaderModule({\n label: 'WGSL Playground Shader',\n code: shader_src\n });\n\n error_log.style.display = \"none\";\n error_log.innerHTML = \"\"; \n const errors = await gpumodule.getCompilationInfo();\n if(errors.messages.length != 0)\n {\n \n // Split the code into lines\n const lines = shader_src.split('\\n');\n \n // Sort the messages by line numbers in reverse order\n // so that as we insert the messages they won't affect\n // the line numbers.\n const msgs = [...errors.messages].sort((a, b) => b.lineNum - a.lineNum);\n \n // Insert the error messages between lines\n for (const msg of msgs) {\n lines.splice(msg.lineNum, 0,\n \"

\",\n        `${''.padEnd(msg.linePos - 1)}${''.padEnd(msg.length, '^')}`,\n        msg.message,\n        \"

\"\n      );\n    }\n  \n    log(lines.join('\\n'));\n  }\n  \n  return gpumodule;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"#### Pipeline\n\nCreate the pipeline using the shader module and bound buffers.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":98,"value":"Specify the layout (we have to do this as tick/delta_t is not always used).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":100,"value":" bindGroupLayout = device?.createBindGroupLayout({\n   label : \"WGSL Playground Bind Group\",\n    entries: [\n      {\n        binding: 0,\n        visibility: GPUShaderStage.COMPUTE,\n        storageTexture: {format: presentationFormat, access: \"write-only\"},\n      },\n      {\n        binding: 1,\n        visibility:  GPUShaderStage.COMPUTE,\n        buffer: {type:\"read-only-storage\"},\n      },\n      {\n        binding: 2,\n        visibility:  GPUShaderStage.COMPUTE,\n        buffer: {type:\"uniform\"},\n      },\n    ],\n  });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"Create the pipeline layout.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":106,"value":"pipelineLayout = device.createPipelineLayout({\n  layout: \"WGSL Playground Pipeline Layout\",\n  bindGroupLayouts: [bindGroupLayout],\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"Finally, create the pipeline to be used.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":111,"value":"pipeline = device?.createComputePipeline({\n    label: 'WGSL Playground Pipeline',\n    layout: pipelineLayout,\n    compute: {\n      module: gpumodule,\n      entryPoint: 'set_pixels',\n    },\n  })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"#### GPU Renderer\nThe render function. Called continuously for the Playground due to possible animation. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":394,"value":"method_array = Object({Clamp:0, Max:1, Reinhard:2, \"Reinhard Luminance\":3, Hable:4, ACES:5})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"canvas_array = Object({Clamp:clamp, Max:norm, Reinhard:reinhard_luminance, \"Reinhard Luminance\":reinhard.getContext(\"webgpu\"), Hable:hable, ACES:aces})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":642,"value":"#### Color\n\nFrom d3.color notebook","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":644,"value":"import {swatches,ramp} from \"@d3/working-with-color\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"#### HDR Library","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":276,"value":"hdrjs = require(\"hdr.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"memorial_o876 = await FileAttachment(\"memorial_o876.hdr\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"memorial = fetch(memorial_o876)\n  .then(r => r.arrayBuffer())\n  .then(buf => {\n    const rgbe = new Uint8Array(buf);\n    const result = hdrjs.read(rgbe);\n    if (typeof result === 'string') {\n      const derp = \"derp\";\n    } else {\n      return result;\n    }\n  });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"mttamwest_o281 = FileAttachment(\"MtTamWest_o281.hdr\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"mttamwest = fetch(mttamwest_o281)\n  .then(r => r.arrayBuffer())\n  .then(buf => {\n    const rgbe = new Uint8Array(buf);\n    const result = hdrjs.read(rgbe);\n    if (typeof result === 'string') {\n      const derp = \"derp\";\n    } else {\n      return result;\n    }\n  });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"bigfogmap_odaa = FileAttachment(\"bigFogMap_oDAA.hdr\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"bigfogmap = fetch(bigfogmap_odaa)\n  .then(r => r.arrayBuffer())\n  .then(buf => {\n    const rgbe = new Uint8Array(buf);\n    const result = hdrjs.read(rgbe);\n    if (typeof result === 'string') {\n      const derp = \"derp\";\n    } else {\n      return result;\n    }\n  });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"{\n  switch(image)\n  {\n    default:\n    case \"memorial\":\n      mutable active = memorial;\n      break;\n    case \"MtTamWest\":\n      mutable active = mttamwest;\n      break;\n    case \"bigFogMap\":\n      mutable active = bigfogmap;\n      break;\n  }\n  return md`Updated`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"mutable active = memorial","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"max = { \n let m = [active.rgbFloat[0], active.rgbFloat[1], active.rgbFloat[2]];\n active.rgbFloat.map((x,i) => {if(x>m[i%3]) { m[i%3] = x;}});\n return m;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"hdr_buffer = {\n  if(!device) return undefined;\n\n  // Populate GPU buffers\n  const hdr_buffer = device.createBuffer({\n    size: active.rgbFloat.byteLength,\n    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,\n  });\n  device.queue.writeBuffer(hdr_buffer, 0, active.rgbFloat);\n  \n  return hdr_buffer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"reinhard = {\n  // Do we support WebGPU?\n  if(!(\"gpu\" in navigator) || adapter === undefined)\n    return html`WebGPU Not Supported. Please use Chrome or other supported browser.`;\n\n  // Create the backing canvas \n  // For now, ignore the device pixel ratio (the ratio of physical to virtual pixels)\n  const canvas = DOM.canvas(ewidth, height);\n  canvas.style.width = `${Math.min(width,ewidth)}px`;\n  canvas.style.height = `${Math.min(width,ewidth) / ewidth * height}px`;\n  canvas.style.border = \"thin solid black\";\n\n  // Load WebGPU into the canvas\n  const context = (canvas.value = canvas.getContext('webgpu'));\n  context.configure({\n    device,\n    format: presentationFormat,\n    // This is what's required to be able to write to a texture from a compute shader\n    usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.STORAGE_BINDING,\n  });\n  \n  return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1","titling":"auto"}}
33:"$32:body"