2a:null 2b:["$","title",null,{"children":"Basic PBR Lighting | T.J. Jankun-Kelly | Observable"}] 31:T45d,## Cook-Torrance Reflection Cook-Torrance reflection models how light interacts with a surface by modelling a surface as a set of microfacets—microscopic perfect mirrors, each oriented according to their own normal. In aggregate (at the macroscopic scale where lighting is evaluated), the overall normal is the surface normal provided by the model; but the microfacet model allows the effective normals to be scattered about the surface normal. When lighting is calculated, the behavior of these distributed normals will affect the strength of the diffuse and specular response—a smoother surface will more easily absorb/reflect light (such as in the Phong model), whereas a rough surface will scatter light away from the viewer/incoming ray, reducing the effective radiance. In addition, facets may occlude each other, further affecting the radiance. Cook-Torrance models these behaviors via a Normal Distribution function (for describing how well the facets are aligned with the light) and a Geometric Attenuation function (for describing occlusion and self-shadowing).32:T65c,### Normal Distribution The Normal Distribution function (ndf) has the largest effect on lighting—it determines how many facets are aligned with the light for maximum specular reflection. There are a variety of such models, such as the Phong-Blinn empirical model we used previously, the [Beckmann distribution](https://en.wikipedia.org/wiki/Specular_highlight#Beckmann_distribution) used by Cook-Torrance in their original work, or [the popular GGX model](https://www.cs.cornell.edu/~srm/publications/EGSR07-btdf.html), [first discovered](https://pharr.org/matt/blog/2022/05/06/trowbridge-reitz) by [Trowbridge and Reitz](https://pharr.org/matt/blog/images/average-irregularity-representation-of-a-rough-surface-for-ray-reflection.pdf) in 1975. Here, we use the Trowbridge-Reitz (GGX) distribution, which has a good fit to empirical data: ${tex.block`N = \frac{\color{${d3.schemeCategory10[4]}}\alpha\color{black}^2}{\pi \left(\left(\mathbf{n} \cdot \mathbf{h}_i\right)^2 \left(\color{${d3.schemeCategory10[4]}}\alpha\color{black}^2-1\right)+1\right)^2}`} where ${tex`\mathbf{n}`} is the surface normal, ${tex`\mathbf{h}_i`} the halfway vector for the incident light ${tex`i`}, and ${tex`\color{${d3.schemeCategory10[4]}}\alpha\color{black}=\color{${d3.schemeCategory10[4]}}r\color{black}^2`} is the square of the roughness factor ${tex`\color{${d3.schemeCategory10[4]}}r`} of the material (with 0 being smooth and 1 being highly rough).33:T5af,### Geometric Attenuation Microfacets can cause shadowing in two ways: the facet could block the light to another facet, or the facet could obscure another facet from view. As with the ndf, there are a variety of models, either independent from or derived from the ndf. Here, we use Schlick's approximation of Smith's attenuation, applied to the Trowbridge-Reitz (GGX) ndf above: ${tex.block`\begin{aligned} G &= \operatorname{g}\left(\color{${d3.schemeCategory10[1]}}\mathbf{e}\color{black}\right)\operatorname{g}\left(\color{${d3.schemeCategory10[2]}}\mathbf{l}_i\color{black}\right)\\ \operatorname{g}\left(\mathbf{m}\right) &= \frac{\mathbf{n}\cdot\mathbf{m}}{\left(\mathbf{n}\cdot\mathbf{m}\right)\left(1-k\right)+k} \end{aligned}`} where ${tex`\color{${d3.schemeCategory10[1]}}\mathbf{e}`} is the vector towards the view/where the incident ray is from, ${tex`|\color{${d3.schemeCategory10[2]}}\mathbf{l}_i`} is the direction to the light, ${tex`k`} is a factor based upon the roughness. Common values for ${tex`k`} are ${tex`\color{${d3.schemeCategory10[4]}}\alpha\color{black}/2`} (a direct mapping from Trowbridge-Reitz (GGX) to Schlick) and ${tex`\left(\color{${d3.schemeCategory10[4]}}r\color{black}+1\right)^2/ 8`} (from [Unreal 4's PBR model](https://cdn2.unrealengine.com/Resources/files/2013SiggraphPresentationsNotes-26915738.pdf)).34:T871,### Microfacet Reflectance With the Normal Distribution and Geometric Attenuation functions, we know how light is attenuated with respect to the microfacets. But how much are the microfacets reflecting in the first place (for those aligned and visible)? To answer this, Cook-Torrance assumes the facets are perfect mirrors, and uses the [Fresnel Equations](https://en.wikipedia.org/wiki/Fresnel_equations) to capture how much energy is reflected based upon the facet's material properties (primarily, its index of refraction). The Fresnel equations capture both the direct reflectance from a view directly above an object (its base reflectivity ${tex`\color{${d3.schemeCategory10[4]}}F_0`}) and how more light is reflected as the view moves perpendicular to the object. Though the Fresnel equations exactly describe the reflectivity of the facets, in practice measuring the indices of refraction's dependence on angle and wavelength is impractical for computer graphics. While Cook-Torrance made their own simplifying assumptions, [the most common approximation of the Fresnel equations](https://en.wikipedia.org/wiki/Schlick%27s_approximation) comes from Schlick ${tex.block`F=\color{${d3.schemeCategory10[4]}}F_0\color{black} + \left(1 - \color{${d3.schemeCategory10[4]}}F_0\color{black}\right) \left(1 - \mathbf{h}_i \cdot \color{${d3.schemeCategory10[1]}}\mathbf{e}\color{black}\right)^5`} Base reflectivity differs greatly for metallic objects vs. non-metallic objects ([dielectrics](https://en.wikipedia.org/wiki/Dielectric)) which do not conduct electromagnetic radiation. In practice, we approximate. [The GLTF standard](https://registry.khronos.org/glTF/specs/2.0/glTF-2.0.html#metal-brdf-and-dielectric-brdf) assumes dielectrics have a base reflectivity of 0.04 while metallic values are provided as a material property of the object (often in place of the diffuse color, which is not used); alternatively, the base reflectivity may be a separate material property.35:T564,### Calculating Lighting Put together, the Cook-Torrance diffuse and specular components of the illumination per light are ${tex.block`I_i=\left(\left(1-s\right)\frac{\color{${d3.schemeCategory10[4]}}c_d}{\pi} + s\frac{NGF}{4\left(\mathbf{n}\cdot\color{${d3.schemeCategory10[1]}}\mathbf{e}\color{black}\right) \left(\mathbf{n}\cdot\color{${d3.schemeCategory10[2]}}\mathbf{l}_i\color{black}\right)}\right) \color{${d3.schemeCategory10[2]}}I_{l_i}\color{black}`} where ${tex`s`} is a energy balance term to ensure that the diffuse and specular reflectance conserves energy, ${tex`\color{${d3.schemeCategory10[4]}}c_d`} is the diffuse color of the object (often called its albedo in this context), and ${tex`\color{${d3.schemeCategory10[2]}}I_{l_i}`} is the intensity of light ${tex`i`}. Cook-Torrance allows ${tex`s`} to be set freely, but [modern metallic PBR pipelines](https://registry.khronos.org/glTF/specs/2.0/glTF-2.0.html#metal-brdf-and-dielectric-brdf) use ${tex`s=F`} (but do not repeat it in the specular term—it should be proportional to ${tex`F`} not ${tex`F^2`}). Phong terms such as ambient and emissive can still be used if desired. 36:T109e,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_dir1 = normalize(vec3(1., 1., -1.)); const float PI = 3.14159265359; uniform float width; uniform float metallic; uniform float roughness; uniform vec3 albedo; uniform float normal_active; uniform float geom_active; uniform float fresnel_active; 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; } 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); } float DistributionGGX(vec3 N, vec3 H, float a) { float a2 = a*a; float NdotH = max(dot(N, H), 0.0); float NdotH2 = NdotH*NdotH; float nom = a2; float denom = (NdotH2 * (a2 - 1.0) + 1.0); denom = PI * denom * denom; return nom / denom; } float GeometrySchlickGGX(float NdotV, float k) { float nom = NdotV; float denom = NdotV * (1.0 - k) + k; return nom / denom; } float GeometrySmith(vec3 N, vec3 V, vec3 L, float k) { float NdotV = max(dot(N, V), 0.0); float NdotL = max(dot(N, L), 0.0); float ggx1 = GeometrySchlickGGX(NdotV, k); float ggx2 = GeometrySchlickGGX(NdotL, k); return ggx1 * ggx2; } vec3 fresnelSchlick(float cosTheta, vec3 F0) { return F0 + (1.0 - F0) * pow(1.0 - cosTheta, 5.0); } vec4 shade(vec3 point, vec3 view_dir) { // Use center difference on sdf to find gradient vec3 n = normal(point); // Final color to accumulate vec3 color = vec3(0., 0., 0.); // Via LearnOpenGL: https://learnopengl.com/PBR/Lighting vec3 F0 = vec3(0.04); F0 = mix(F0, albedo, metallic); // reflectance equation vec3 h = normalize(view_dir + light_dir1); vec3 radiance = vec3(10.0, 10.0, 10.0); // cook-torrance brdf float NDF = mix(DistributionGGX(n, h, roughness * roughness), 1.0, 1.0 - normal_active); float G = mix(GeometrySmith(n, view_dir, light_dir1, (roughness + 1.) * (roughness + 1.) / 8.), 1.0, 1.0 - geom_active); vec3 F = mix(fresnelSchlick(max(dot(h, light_dir1), 0.0), F0), vec3(1.0), 1.0 - fresnel_active); vec3 kS = F; vec3 kD = vec3(1.0) - kS; kD *= 1.0 - metallic; vec3 numerator = NDF * G * F; float denominator = 4.0 * max(dot(n, view_dir), 0.0) * max(dot(n, light_dir1), 0.0); vec3 specular = numerator / max(denominator, 0.001); // add to outgoing radiance Lo float NdotL = max(dot(n, light_dir1), 0.0); color += (kD * albedo / PI + specular) * radiance * NdotL; color = color / (color + vec3(1.0)); // return vec4(gamma(color), 1.0); return vec4(color, 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; }37:[] 2e:{"id":"c7611f1882df0208","slug":"basic-pbr-lighting","title":"Basic PBR Lighting","thumbnail":"c8dbec47d6e738c7c8d1de9383aad708dd618730e80c756c775f2db05d0620e1","access_level":"public","create_time":"$D2020-10-14T14:57:49.516Z","update_time":"$D2025-12-13T05:21:15.818Z","view_time":null,"first_public_time":"$D2024-01-25T22:07:18.738Z","fork":{"id":"d0579a7b381c4cd4","slug":"basic-lighting","title":"Basic Lighting","owner":{"id":"57cbc1498c70b426","login":"infowantstobeseen","name":"T.J. Jankun-Kelly"}},"stars":0,"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":469,"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,"subscribed":null,"forks":1,"collection":{"id":"47062c7e11777d35","slug":"advanced-graphics","title":"Advanced Graphics","owner":{"id":"57cbc1498c70b426","login":"infowantstobeseen","name":"T.J. Jankun-Kelly"}},"type":"notebook","body":{"title":"Basic PBR Lighting","cells":[{"id":54,"value":"md`# Basic PBR Lighting\n\n[The Phong Lighting Model](https://observablehq.com/@infowantstobeseen/basic-lighting) is limited to highly matte materials, such as plastics. A better approximation would incorporate accurate interaction of the light with an object including absorption and scattering. Such approxmations are costly however, but the [Cook-Torrance Reflection Model](https://graphicscompendium.com/gamedev/15-pbr \"Graphics Compendium:Chapter 47: Physically-Based Rendering\nCook-Torrance Reflectance Model\") provides a more realistic basis for lighting by better modelling the surface. Methods based upon Cook-Torrance reflectance are commonly called PBR methods.`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":194,"value":"viewof controls = inputsGroup(\n[\n [\n checkbox({\n title: \"Active Components\",\n options: [{ value: \"on\", label: \"Normal Distribution\" }],\n value: \"on\"\n }),\n checkbox({\n options: [{ value: \"on\", label: \"Geometry\" }],\n value: \"on\"\n }),\n checkbox({\n options: [{ value: \"on\", label: \"Frensel\" }],\n value: \"on\"\n })\n ],\n [\n color({\n title: \"Diffuse color/Metallic Color\",\n value: \"#ff0000\"\n }),\n checkbox({\n options: [{ value: \"on\", label: \"Metallic\" }],\n value: \"on\"\n })\n ],\n [\n slider({'title':'Roughness',min:0, max:1, value: 0.1, step: 0.05 })\n ]\n],\n \n[\n ['normal_dist', 'geom', 'frensel'],\n ['albedo', 'metallic'],\n ['roughness']\n]\n \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":351,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":363,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":392,"value":"$34","pinned":false,"hidden":false,"mode":"md"},{"id":407,"value":"$35","pinned":false,"hidden":false,"mode":"md"},{"id":421,"value":"## References\n\n- Cook and Torrance, \"[A Reflectance Model for Computer Graphics](https://inst.eecs.berkeley.edu/~cs283/sp13/lectures/cookpaper.pdf)\", *ACM Transactions on Graphics,* 1(1):7–24, 1982.\n- Trowbridge and Reitz, \"[Average Irregularity Representation of a Rough Surface for ray Reflection](https://pharr.org/matt/blog/images/average-irregularity-representation-of-a-rough-surface-for-ray-reflection.pdf)\", *Journal of the Optical Society of America*, 65(5):531–536, 1975\n- Walter, Marschner, Li, and Torrance, \"[Microfacet Models for Refraction through Rough Surfaces](https://www.cs.cornell.edu/~srm/publications/EGSR07-btdf.pdf)\", *Proceedings of the 18th Eurographics conference on Rendering Techniques*, 195–206, 2007\n- Schlick, \"[An Inexpensive BRDF for Physically-Based Rendering](https://wiki.jmonkeyengine.org/docs/3.4/tutorials/_attachments/Schlick94.pdf)\", *Computer Graphics Forum*, 13(3):233–246, 1994 ","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"md`## Implementation\n\nUsing the raw WebGL here as its not too complex using the same setup from [Basic Lighting](https://observablehq.com/@infowantstobeseen/basic-lighting). 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. The specific code is based upon [Learn OpenGL](https://learnopengl.com/PBR/Theory).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"ewidth=Math.min(640, width)","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"height = ewidth","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":187,"value":"import {slider, checkbox, color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"import {inputsGroup} from \"@bumbeishvili/input-groups\"","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":80,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":123,"value":"u_width = gl.getUniformLocation(program, \"width\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"u_metallic = gl.getUniformLocation(program, \"metallic\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"u_albedo = gl.getUniformLocation(program, \"albedo\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"u_roughness = gl.getUniformLocation(program, \"roughness\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"u_normal_active = gl.getUniformLocation(program, \"normal_active\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"u_geom_active = gl.getUniformLocation(program, \"geom_active\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"u_fresnel_active = gl.getUniformLocation(program, \"fresnel_active\")","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":77,"value":"draw = {\n setup;\n gl.uniform1f(u_width, ewidth); \n gl.uniform1f(u_metallic, controls.metallic == \"on\");\n gl.uniform3fv(u_albedo, hexToRGB(controls.albedo));\n gl.uniform1f(u_roughness, controls.roughness);\n gl.uniform1f(u_normal_active, controls.normal_dist == \"on\");\n gl.uniform1f(u_geom_active, controls.geom == \"on\");\n gl.uniform1f(u_fresnel_active, controls.frensel == \"on\");\n gl.drawArrays(gl.TRIANGLES, 0, 6);\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}} 2f:"$2e:body"