2c:null 2d:["$","title",null,{"children":"Basic Lighting | T.J. Jankun-Kelly | Observable"}] 32:T1628,md`## Phong Lighting Model Phong lighting has four components: 1. Ambient: The reflection from light scattered in the environment 1. Diffuse: The reflection from a light directly without considering the viewer 1. Specular: The reflection of light towards a viewer 1. Emmisive: The light emmitted by an object While physically inspired, Phong illumination is not physical: Energy is not conserved, even when distance terms are applied, and absorption and scattering are not accurately modeled. However, its ease of computation and suitable approximation for realism makes it a good starting point for graphical approximations. ### Ambient The ambient term represents the "left-over" light that has scattered about the entire scene and that essentially comes from everywhere. It is an approximation to light energy at equilibrium after it has interactived with the entire environment. In many ways, it acts as a correction term that adds more light energy until the result "looks right:" ${tex.block`I_a = \color{${d3.schemeCategory10[4]}}c_d\color{${d3.schemeCategory10[1]}}I_m`} where ${tex`\color{${d3.schemeCategory10[1]}}I_m`} is the intensity of the ambient light, a property of the scene and ${tex`\color{${d3.schemeCategory10[4]}}c_d`} is the (diffuse) color of the object, one of its material properties. ### Diffuse Light directly hitting an object reflects back light that it does not scatter away with the apparent color of the object. This reflection is strongest for light surfaces if the light is directly above the surface, and decreases as the light makes a larger angle (until the point it is at right angle to the surface, and no light strikes). We represent that intensity by the scalar product of the normal and the vector towards the light ${tex.block`I_d = \color{${d3.schemeCategory10[4]}}c_d\color{black} \sum_i \color{${d3.schemeCategory10[2]}}I_{l_i}\color{black} \mathbf{n} \cdot \color{${d3.schemeCategory10[2]}}\mathbf{l}_i`} If the dot product is negative, the light is behind the object. Normally, we just do not light the object, though some approaches will allow the object to be lit in both directions. ### Specular There is a specific direction with respect to an object where the light reflection is the strongest for particularly shining objects. By [the Law of Reflection](https://en.wikipedia.org/wiki/Reflection_%28physics%29#Laws_of_reflection), the direction of maximum reflection is the ray with the same angle as the incident light with respect to the surface/normal, but at right angles to the incident light: ${tex.block`\mathbf{r}_i=2\left(\mathbf{n}\cdot\color{${d3.schemeCategory10[2]}}\mathbf{l}_i\color{black}\right)\mathbf{n}-\color{${d3.schemeCategory10[2]}}\mathbf{l}_i`} The maximum reflection occurs when this reflected ray is aligned with the vector towards the eye, which we can measure via the dot product again. This reflection strength is attenuated by a specular factor ${tex`\alpha`}—more matte objects have a low specular factor, while shiny objects have a larger factor. Combined with a reflection color, we can determine the specular intensity: ${tex.block`I_s = \color{${d3.schemeCategory10[4]}}c_s\color{black} \sum_i \color{${d3.schemeCategory10[2]}}I_{l_i}\color{black} \left(\color{${d3.schemeCategory10[1]}}\mathbf{e}\color{black} \cdot \mathbf{r}_i\right)^\alpha`} This value is treated as zero if the light is behind the object (unless two-sided lighting is performed). For lights and view positions that are very far away, we can approximate the reflection via the *halfway vector*— the average of the light vector and eye vector respectively. ${tex.block`\mathbf{h}_i=\frac{\color{${d3.schemeCategory10[1]}}\mathbf{e}\color{black} + \color{${d3.schemeCategory10[2]}}\mathbf{l}_i\color{black}}{\left\|\color{${d3.schemeCategory10[1]}}\mathbf{e}\color{black} + \color{${d3.schemeCategory10[2]}}\mathbf{l}_i\color{black}\right\|}`} If this vector aligns with the surface normal, than the eye is aligned with the maximum reflection: ${tex.block`I_s = \color{${d3.schemeCategory10[4]}}c_s\color{black} \sum_i \color{${d3.schemeCategory10[2]}}I_{l_i}\color{black} \left(\mathbf{n} \cdot \mathbf{h}_i\right)^{\alpha'}`} The halfway vector is somewhat cheaper to calculate as it does not differ per-object, only per-light. ### Emissive The emissive component just represents light the object itself contributes. Headlight in a car, a bulb in a light figure—all have emissive components. ${tex.block`I_e = \color{${d3.schemeCategory10[4]}}c_e`} ### Final Calculation Each component is calculated and added together to determine the final illuminated color. Without doing high-dynamic range lighting, colors above 1 are just clamped to 1 as a maximum value. `33:Tac8,fragmentShader = { const shader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(shader, ` precision highp float; const float image_plane = -5.; const vec3 eye = vec3(0.5, 0.5, -10.); const float delta = 0.0001; const vec3 light_dir = normalize(vec3(1., 1., -1.)); uniform float width; uniform bool ambient; uniform bool diffuse; uniform bool specular; uniform vec3 diffuse_color; uniform vec3 specular_color; uniform float specular_exp; uniform vec3 light_color; float signed_distance(vec3 pt) { return length(pt-vec3(0.5,0.5,0.)) - 1.0; } vec3 normal(vec3 pt) { vec3 offset = vec3(delta * 2., 0., 0.); vec3 normal = vec3(signed_distance(pt + offset.xyy) - signed_distance(pt - offset.xyy), signed_distance(pt + offset.yxy) - signed_distance(pt - offset.yxy), signed_distance(pt + offset.yyx) - signed_distance(pt - offset.yyx)); return normalize(normal); } 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; } vec4 shade(vec3 pt, vec3 view) { // Ambient vec3 color = vec3(0., 0., 0.); if(ambient) color += diffuse_color * 0.1; // Use center difference on sdf to find gradient then calculate other parameters vec3 n = normal(pt); float angle = dot(light_dir, n); if(angle > 0.) { if(diffuse) color += diffuse_color * light_color * angle; if(specular) { float angle2 = dot(reflect(-light_dir, n), view); if(angle2 > 0.) color += specular_color * light_color * pow(angle2, specular_exp); } } //Color and tone map return vec4(gamma(color / (color + vec3(1.0))), 1.0); } void main() { vec3 pixel = vec3(gl_FragCoord.xy / width, image_plane); vec3 dir = normalize(pixel - eye); float traveled_distance = 0.; gl_FragColor = vec4(0., 0., 0., 0.); for(int iteration = 0; iteration < 15; ++iteration) { vec3 location = vec3(pixel+dir*traveled_distance); float dist = signed_distance(location); if(dist < delta) { gl_FragColor = shade(location, -dir); break; } traveled_distance += dist; if(traveled_distance >= 15.) break; } } `); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw gl.getShaderInfoLog(shader); invalidation.then(() => gl.deleteShader(shader)); return shader; }34:[] 30:{"id":"d0579a7b381c4cd4","slug":"basic-lighting","title":"Basic Lighting","thumbnail":"c7c6c30769f00e2e049a973c159974eec23c3377b8cac9972fa1893753cd5aa3","access_level":"public","create_time":"$D2020-09-01T19:22:06.170Z","update_time":"$D2021-10-14T04:09:54.128Z","view_time":null,"first_public_time":"$D2020-09-07T00:48:18.010Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"57cbc1498c70b426","login":"infowantstobeseen","name":"T.J. Jankun-Kelly","avatar_url":"https://avatars-next.observableusercontent.com/df9d7f817f9ad92a763b56ee2e891ca0716a6c2f6c398811547f89f0448fa181","tier":"starter_2024"},"version":295,"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"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"47062c7e11777d35","slug":"advanced-graphics","title":"Advanced Graphics","owner":{"id":"57cbc1498c70b426","login":"infowantstobeseen","name":"T.J. Jankun-Kelly"}},"type":"notebook","body":{"titling":"auto","title":"Basic Lighting","cells":[{"id":54,"value":"md`# Basic Lighting\n\nOur ray has hit something; how do we determine its color? This is the question of lighting, of shading the pixel. The method we build will start at the same place as polygonal rendering—the [Phong Lighting model](https://en.wikipedia.org/wiki/Phong_reflection_model Wikipedia:Phong Reflection Model).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"viewof gl = {\n const canvas = DOM.canvas(ewidth * devicePixelRatio, height * devicePixelRatio);\n canvas.style.width = `${ewidth}px`;\n canvas.style.height = `${height}px`;\n const gl = canvas.value = canvas.getContext(\"webgl\");\n gl.viewport(0, 0, canvas.width, canvas.height);\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"viewof controls = inputsGroup(\n[\n [\n checkbox({\n title: \"Lighting options\",\n options: [{ value: \"on\", label: \"Ambient\" }],\n value: \"on\"\n }),\n checkbox({\n options: [{ value: \"on\", label: \"Diffuse\" }],\n value: \"on\"\n }),\n checkbox({\n options: [{ value: \"on\", label: \"Specular\" }],\n value: \"on\"\n })\n ],\n [\n color({\n title: \"Diffuse color\",\n value: \"#ff0000\"\n }),\n color({\n title: \"Specular color\",\n value: \"#eeeeee\"\n }),\n color({\n title: \"Light color\",\n value: \"#ffffff\"\n })\n ],\n [\n slider({'title':'Specular exponent',min:0, max:9, value: 5, step: 1, getValue: n => Math.pow(2,n.value) })\n ]\n],\n \n[\n ['ambient', 'diffuse', 'specular'],\n ['diffuse_color', 'specular_color', 'light_color'],\n ['specular_exp']\n]\n \n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"md`## Implementation\n\nUsing the raw WebGL here as its not too complex. Setup guidance taken from the [Mike Bostock](https://bost.ocks.org/mike/) and his [\"Making WebGL Dance\"](https://observablehq.com/@mbostock/making-webgl-dance) demo that shows the parts of the intergration we need.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"ewidth=Math.min(640, width)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"height = ewidth","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"d3 = require(\"d3-selection@1.4\", \"d3-drag@1.2\", \"d3-ease\", \"d3-interpolate\", \"d3-scale-chromatic\",\"d3-array\", \"d3-transition@1.3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"import {slider, checkbox, color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"import {inputsGroup} from \"@bumbeishvili/input-groups\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"function hexToRGB(h) {\n // Modified from https://css-tricks.com/converting-color-spaces-in-javascript/#output-rgb-with-s \n let r = 0, g = 0, b = 0;\n\n if (h.length == 4) {\n r = \"0x\" + h[1] + h[1];\n g = \"0x\" + h[2] + h[2];\n b = \"0x\" + h[3] + h[3];\n \n } \n else if (h.length == 7) {\n r = \"0x\" + h[1] + h[2];\n g = \"0x\" + h[3] + h[4];\n b = \"0x\" + h[5] + h[6];\n }\n \n return new Float32Array([+(r / 255).toFixed(4),+(g / 255).toFixed(4),+(b / 255).toFixed(4)]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"vertexShader = {\n const shader = gl.createShader(gl.VERTEX_SHADER);\n gl.shaderSource(shader, `\nattribute vec3 corner;\n\nvoid main()\n{\n // Nothing much to do: Just put in the full-\"screen\" quad corner\n gl_Position = vec4(corner, 1.0);\n}\n`);\n gl.compileShader(shader);\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw gl.getShaderInfoLog(shader);\n \n // Important: delete our resources when the cell is invalidated\n invalidation.then(() => gl.deleteShader(shader));\n return shader;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"program = {\n const program = gl.createProgram();\n gl.attachShader(program, vertexShader);\n gl.attachShader(program, fragmentShader);\n gl.linkProgram(program);\n if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw gl.getProgramInfoLog(program);\n invalidation.then(() => gl.deleteProgram(program));\n return program;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"u_width = gl.getUniformLocation(program, \"width\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"u_ambient = gl.getUniformLocation(program, \"ambient\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"u_diffuse = gl.getUniformLocation(program, \"diffuse\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"u_specular = gl.getUniformLocation(program, \"specular\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"u_diffuse_color = gl.getUniformLocation(program, \"diffuse_color\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"u_specular_color = gl.getUniformLocation(program, \"specular_color\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"u_specular_exp = gl.getUniformLocation(program, \"specular_exp\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"u_light_color = gl.getUniformLocation(program, \"light_color\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"vertexBuffer = {\n // A non-indexed full-\"screen\" quad of two triangles\n const buffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, +1,-1, +1,+1, -1,-1, +1, +1, -1,+1]), gl.STATIC_DRAW);\n invalidation.then(() => gl.deleteBuffer(buffer));\n return buffer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"setup = {\n // One time setup\n const corners = gl.getAttribLocation(program, \"corner\");\n gl.viewport(0, 0, viewof gl.width, viewof gl.height);\n gl.useProgram(program);\n gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);\n gl.vertexAttribPointer(corners, 2, gl.FLOAT, false, 0, 0);\n gl.enableVertexAttribArray(corners);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"draw = {\n setup;\n gl.uniform1f(u_width, ewidth); \n gl.uniform1i(u_ambient, controls.ambient == \"on\");\n gl.uniform1i(u_diffuse, controls.diffuse == \"on\");\n gl.uniform1i(u_specular, controls.specular == \"on\");\n gl.uniform3fv(u_diffuse_color, hexToRGB(controls.diffuse_color));\n gl.uniform3fv(u_specular_color, hexToRGB(controls.specular_color));\n gl.uniform3fv(u_light_color, hexToRGB(controls.light_color));\n gl.uniform1f(u_specular_exp, controls.specular_exp);\n gl.drawArrays(gl.TRIANGLES, 0, 6);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"