2d:null 2e:["$","title",null,{"children":"Lighting & Shading I: Radiometry | Introduction to Computer Graphics MSState | Observable"}] 33:Tbdb,energy_demo = { const sphere_id = DOM.uid("spheres"); const start = Math.round(0.75 * Math.round(width / 12)); const end = Math.round(1.25 * Math.round(width / 12)); const angles = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330]; const radius = Math.round(0.065 * Math.round(width / 12)); const lerp = x => start * (1 - (x % 10) / 10) + end * (x % 10) / 10; const fig_svg = svg``; const fig = html`

${fig_svg}

The radiant flux ${tex`\Phi`} measures how much energy passes a closed surface (in this case, a sphere) over time.

`; return fig; }34:Tdd7,irradiance_demo = { const start_e = Math.round(0.75 * Math.round(width / 12)); const end_e = Math.round(1.0 * Math.round(width / 12)); const start_m = Math.round(1.0 * Math.round(width / 12)); const end_m = Math.round(1.25 * Math.round(width / 12)); const start = select_i == "Irradiance" ? start_e : start_m; const end = select_i == "Irradiance" ? end_e : end_m; const angles = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330]; const radius = Math.round(0.065 * Math.round(width / 12)); const lerp = x => start * (1 - (x % 10) / 10) + end * (x % 10) / 10; const fig_svg = svg``; const fig = html`

${fig_svg}

The ${select_i == "Irradiance" ? html`incoming` : html`outgoing`} flux density (the ${select_i == "Irradiance" ? html`irradiance ${tex`E`}` : html`radiant exitance ${tex`M`}`} or amount of ${select_i == "Irradiance" ? html`incoming` : html`outgoing`} energy flux per unit area) decreases as we move away from the point light.

`; return fig; }35:Ta14,irradiance_direct_demo = { const start_e = Math.round(0.75 * Math.round(width / 6)); const end_e = Math.round(1.0 * Math.round(width / 6)); const start_m = Math.round(1.0 * Math.round(width / 6)); const end_m = Math.round(1.25 * Math.round(width / 6)); const start = select_i == "Irradiance" ? start_e : start_m; const end = select_i == "Irradiance" ? end_e : end_m; const levels = Array.from({length: 13}, (x, i) => i * width / 3 / 12); const radius = Math.round(0.065 * Math.round(width / 12)); const lerp = x => start * (1 - (x % 10) / 10) + end * (x % 10) / 10; const fig_svg = svg``; const fig = html`

${fig_svg}

`; return fig; }36:T1745,lambert_demo = { const light_width = Math.min(300, width); const offset = 0.5 * width - 0.5 * light_width; const surf_start = 0.5 * Math.round(width / 3 ); const radius = Math.round(0.065 * Math.round(width / 12)); const beam_pos = Math.round(((old_spot + width / 240 * (tick - old_tick)) % (surf_start+light_width * Math.sin(rot / 180 * Math.PI) - 4.2 * radius)) / (surf_start+light_width * Math.sin(rot / 180 * Math.PI) - 4.2 * radius) * 100 ); const radius_percent = Math.round(20 * radius / (surf_start+light_width * Math.sin(rot / 180 * Math.PI) - 4.2 * radius) * 100); const beam_id = DOM.uid("beam"); const black_arrow_id = DOM.uid("arrow"); const orange_arrow_id = DOM.uid("o_arrow"); const fig_svg = svg``; mutable old_spot = (old_spot + width / 240 * (tick - old_tick)) % (surf_start+light_width * Math.sin(rot / 180 * Math.PI) - 4.2 * radius); const fig = html`

${fig_svg}

Lambert's Law: The irradiance on a surface decreases with the angle the surface makes with the light.

`; return fig; }37:T1cea,radiance_demo = { const light_width = Math.min(300, width); const offset = 0.5 * width - 0.5 * light_width; const surf_start = 0.75 * Math.round(width / 3 ); const radius = Math.round(0.065 * Math.round(width / 12)); const beam_pos = Math.round(((old_spot2 + width / 240 * (tick - old_tick)) % (surf_start - 4.2 * radius)) / (surf_start - 4.2 * radius) * 100 ); const radius_percent = Math.round(20 * radius / (surf_start+light_width * Math.sin(rot / 180 * Math.PI) - 4.2 * radius) * 100); const beam_id = DOM.uid("beam"); const lo_beam_id = DOM.uid("lobeam"); const black_arrow_id = DOM.uid("arrow"); const slategray_arrow_id = DOM.uid("sg_arrow"); const fig_svg = svg``; mutable old_spot2 = (old_spot2 + width / 240 * (tick - old_tick)) % (surf_start - 4.2 * radius); const fig = html`

${fig_svg}

Radiance: The radiant flux projected onto a small area orthogonal to a direction specified by a small solid angle. In this example, the choice of solid angle/direction is limited to a fixed azimuthal angle ${tex`\phi`} above the surface; only the inclination angle ${tex`\theta`} may be changed.

`; return fig; }38:[] 31:{"id":"bfd7db5096914561","slug":"lighting-shading-i-radiometry","title":"Lighting & Shading I: Radiometry","thumbnail":"182dc3f599c1b38b94729cbe57fb0b1289873643d1f431e056adfbe00a21bedf","access_level":"public","create_time":"$D2024-10-31T15:00:14.698Z","update_time":"$D2025-08-14T15:58:45.829Z","view_time":null,"first_public_time":"$D2024-11-10T05:02:19.567Z","has_unpublished_edits":null,"fork":false,"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":272,"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":true,"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":"Lighting & Shading I: Radiometry","cells":[{"id":0,"value":"# Lighting & Shading I: Radiometry\n\nTo make 3D objects look realistic when rendering, we need to perform lighting and shading. Lighting determines how our object looks under light while shading takes that information to finalize the rendering (by adding post-lighting effects or ignoring it all together for some artistic rendering). \n\nThere are three parts to a lighting model:\n- Materials which represent the materials under lighting, with differing levels of physical fidelity.\n- Light Models which model that types of lights there are in a scene and how they illuminate.\n- Light Transport which models how light moves through the environment.\n \nBefore we can model these, we need to understand what we are modelling. Thus, we need *radiometry*.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":269,"value":"toc({\n headers: \"h2,h3,h4\",\n title: null\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"## Energy to Radiance: What are we transporting?\n\n

A note about notation

These notes use the SI radiometry units and names instead of those used elsewhere. For example, Marschner & Shirley use ${tex`H`} for irradiance (incoming flux per unit area) and ${tex`E`} for radiant exitance; similarly they use ${tex`d\\sigma`} for differential solid angle instead of ${tex`d\\omega`}. Be aware of the difference!

\n\nRadiometry discusses how electromagnetic energy (such as light) interacts with the environment. Radiometry provides several concepts useful in computer graphics, though the primary one we will use is radiance, as defined below. But first, we start with light.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"### Radiant Flux (${tex`\\Phi`})\n\nLight is characterized by its radiant energy ${tex`Q(\\lambda)`} which is proportional to its wavelength ${tex`\\lambda`}; we will generally ignore the spectral term (the wavelength) and measure a group of wavelengths in bulk (our red/green/blue primaries). When measuring how strong a light is, we are measuring radiant flux or power ${tex`\\Phi \\propto \\frac{\\Delta Q}{\\Delta t} `}: This is the amount of energy ${tex`\\Delta Q`} (proportional to the number of photons at a all wavelengths) passing by during a unit of time ${tex`\\Delta t`} through space.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"viewof flux = Inputs.range([10, 100], {label: html`Radiant Flux ${tex`\\Phi`} (W)`, step: 10, value: 50})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"### Irradiance (${tex`E`})/Radiant Exitance (${tex`M`})\n\nFor graphics purposes, we measure light at a small area ${tex`\\Delta A`} on a surface; this quantity is known as the flux density or irradiance ${tex`E \\propto \\frac{\\Delta Q}{\\Delta t\\Delta A}`}. It is important to differentiate between light hitting/arriving at the small area (the irradiance ${tex`E`}) and the amount of light leaving the area (the radiant exitance ${tex`M`}). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"viewof shell = Inputs.range([1, 6], {label: \"Shell\", value: 1, step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"viewof select_i = Inputs.radio([\"Irradiance\", \"Radiative Exitance\"], {label: \"Density Type\", value: \"Irradiance\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"Inputs.text({label: html`${select_i == \"Irradiance\" ? html`Irradiance ${tex`E`} (${tex`\\mathrm{\\frac{W}{m^2}}`})` : html`Radiant exitance ${tex`M`} (${tex`\\mathrm{\\frac{W}{m^2}}`})`}`, disabled: true, value: `${flux / 4 / Math.PI / (shell*shell)}`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"Radiant flux density does not always decrease with distance; for parallel light from a distant source like the Sun, the photons do not appreciably disperse.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"Inputs.text({label: html`${select_i == \"Irradiance\" ? html`Irradiance ${tex`E`} (${tex`\\mathrm{\\frac{W}{m^2}}`})` : html`Radiant exitance ${tex`M`} (${tex`\\mathrm{\\frac{W}{m^2}}`})`}`, disabled: true, value: `${flux}`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"Irradiance is affected by the angle the surface we are measuring from makes with the light. As the surface rotates so it out of alignment, less of the light falls on the surface. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"viewof rot = Inputs.range([0, 90], {label: html`Rotation (${tex`\\degree`})`, step: 5, value: 0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"Inputs.text({label: html`${select_i == \"Irradiance\" ? html`Irradiance ${tex`E`} (${tex`\\mathrm{\\frac{W}{m^2}}`})` : html`Radiant exitance ${tex`M`} (${tex`\\mathrm{\\frac{W}{m^2}}`})`}`, disabled: true, value: `${flux * Math.cos(rot * Math.PI / 180)}`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"### Radiance (${tex`L`})\n\nTo calculate the irradiance (or radiant exitance), we need to know how much light from all directions is hitting the infinitesimal surface patch. Light does not come equally from all directions as light sources and reflective surfaces are distributed at all angles. To measure light from a specific direction, we measure the amount of radiant flux ${tex`\\Delta \\Phi`} on/leaving a surface area ${tex`\\Delta A`} perpendicular to a small solid angle ${tex`\\Delta \\omega`}—this is the **radiance** ${tex`L \\propto \\frac{\\Delta \\Phi}{\\Delta A \\Delta \\omega} \\propto \\frac{\\Delta E}{\\Delta \\omega}`}. When we integrate the radiance over the hemisphere above the sample area, we get the irradiance again.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":78,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"viewof r_rot = Inputs.range([0, 90], {label: html`Sensor Rotation (${tex`\\degree`})`, step: 5})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"Inputs.text({label: html`${select_i == \"Irradiance\" ? html`Incident Radiance ${tex`L_i`} (${tex`\\mathrm{\\frac{W}{m^2sr}}`})` : html`Exitant Radiance ${tex`L_o`} (${tex`\\mathrm{\\frac{W}{m^2sr}}`})`}`, disabled: true, value: `${flux * Math.cos(r_rot * Math.PI / 180) / (2 * Math.PI)}`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"Radiance is the fundamental value we are calculating when performing computer graphics:\n- When we ray trace from the eye, we are measuring the radiance towards the pixel\n- When we bounce a ray from an object to find it's color, we are calculating the radiance from that direction\n- When we calculate the color at a fragment in polygonal rendering, we are gathering radiance samples along our light rays\n \nBy the conservation of energy, the power ${tex`\\Phi_o`} leaving the surface must be the same as the power the surface emits ${tex`\\Phi_e`} and the power remaining after incoming power is absorbed:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":225,"value":"tex.block`\\begin{aligned}\n \\Phi_o &= \\Phi_e + (\\Phi_i - \\Phi_a)\\\\\n &= \\Phi_e + \\Phi_r\n\\end{aligned}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"By analogy then, the radiance (or color) ${tex`L_o`} we see in a specific outgoing direction ${tex`\\omega_o`} sampled at point ${tex`\\mathrm{p}`} on a surface must be a combination of the radiance emitted ${tex`L_e`} in that direction and the radiance of the reflected light ${tex`L_r`} in our direction after absorption:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":248,"value":"tex.block`L_o\\left(\\mathrm{p}, \\omega_o\\right) = L_e\\left(\\mathrm{p}, \\omega_o\\right) \n + L_r\\left(\\mathrm{p}, \\omega_o\\right) `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"Shading in computer graphics is thus the solution to this equation for every surface seen by every pixel.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":265,"value":"import {toc} from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"tick = {\n //return 1;\n let i = 0;\n while (true) {\n mutable old_tick = i;\n yield Promises.tick(50 / flux * 100, ++i);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"mutable old_tick = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"mutable old_spot = Math.round(3 / 8 * width / 3);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"mutable old_spot2 = Math.round(3 / 8 * width / 3);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 32:"$31:body"