2d:null 2e:["$","title",null,{"children":"Basic Lighting | Introduction to Computer Graphics MSState | Observable"}] 33:T568,## 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 graphics. ### Setup The Phong lighting model requires a position to be lit (in this case, the position of the fragment in eye or world coordinates; we cannot do this in window or clip coordinates due to loss of depth or distortion), the normal of the surface at that point (a [bivector-like entity](https://www.reedbeta.com/blog/normals-inverse-transpose-part-1/#bivectors-and-normals "Bivectors and normals") pointing "away" from the surface), a vector towards the light (for each light), and the vector towards the eye.34:T9d5,35:T1643, ### 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 interacted 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; the diffuse and specular components are repeated per light for each position. Without doing high-dynamic range lighting, colors above 1 are just clamped to 1 as a maximum value. We can instead do a simple [Reinhard tone mapping](https://64.github.io/tonemapping/#reinhard) operation to pull all the colors within the range. ~~~glsl vec3 tone_mapped = color / (1.0f + color); ~~~ assuming `color` stores the calculated intensity. Reinhard will wash things out a bit, so other tone mapping might be preferred. The version I do here is [the luminance corrected Reinhard](https://64.github.io/tonemapping/#extended-reinhard-luminance-tone-map "Extened Reinhard") with the obligatory [sRGB correction](https://unlimited3d.wordpress.com/2020/01/08/srgb-color-space-in-opengl/ "sRGB color space in OpenGL"). 36:T93d,### Lighting Calculation The actual lighting calculation is a straightforward combination of the ambient, diffuse, and specular components. We will need to know the direction to each light which depends on the type of the light (in this example, a directional light); we also need to know the light's color. We then just calculate the three components. In a readable style, the lighting code would like something like ~~~glsl void main(void) { vec3 ambient = 0.1 * color; float ldotn = dot(eye_light, eye_normal); if(ldotn > 0.) { vec3 diffuse = ldotn * light_color * color; float rdotv = dot(reflect(-eye_light, eye_normal), eye_view); if(rdotv > 0.) vec3 specular = light_color * specular_color * pow(rdotv, specular_exp); } // sRGB encode (gamma correct) after Enhanced Reinhard tone mapping gl_FragColor = vec4(gamma((ambient + diffuse + specular) / (1. + luminance(ambient + diffuse + specular))), 1.0); } ~~~ Due to the way GPUs execute many waves (groups) of fragments at once, a missed `if` branch could cause issue if the different branches are of different length (not coherent). If one wanted to remove the `if` statements, however, we could go with the less readable `step` idiom that just zeroes out the value if the angles are negative. ~~~glsl void main(void) { // max zeroes out the dot if the angle is bad // step returns 0 if the dot product is less than 0 here, which removes the need for an if. vec3 ambient = 0.1 * color; vec3 diffuse = max(dot(eye_light, eye_normal), 0.) * light_color * color; vec3 specular = step(0., dot(eye_light, eye_normal)) * light_color * specular_color * pow(max(dot(reflect(-eye_light, eye_normal), eye_view), 0.), specular_exp); // sRGB encode (gamma correct) after Enhanced Reinhard tone mapping gl_FragColor = vec4(gamma((ambient + diffuse + specular) / (1. + luminance(ambient + diffuse + specular))), 1.0); } ~~~ Ultimately, one should profile their code to determine which of the two versions is faster. After the light values are calculated, they can be sent to the framebuffer for storing (if they pass the depth test). Here, I've also applied the sRGB gamma correction after tone mapping for colors beyond the gamut.37:T600,fragmentShaderCode = ` precision highp float; const vec4 eye_light = normalize(vec4(1., 1., 1., 0.)); uniform vec3 color; uniform float use_ambient; uniform float use_diffuse; uniform float use_specular; uniform vec3 specular_color; uniform float specular_exp; uniform vec3 light_color; varying vec4 eye_view; varying vec4 eye_normal; float luminance(vec3 color) { // Return the luminance of the color return 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b; } 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; } void main() { vec3 final_color = vec3(0.); // Avoiding if statements via step here (no need to shade if behind) *might* make it faster. Harder to read though. vec3 ambient = use_ambient * 0.1 * color; vec3 diffuse = use_diffuse * max(dot(eye_light, eye_normal), 0.) * light_color * color; vec3 specular = use_specular * step(0., dot(eye_light, eye_normal)) * light_color * specular_color * pow(max(dot(reflect(-eye_light, eye_normal), eye_view), 0.), specular_exp); gl_FragColor = vec4(gamma((ambient + diffuse + specular) / (1. + luminance(ambient + diffuse + specular))), 1.0); } `38:[{"id":"be56546679a6fd169a143c679a22789a2057d905ed3af5e53e5fc080c6e3900a1c4c8dc2ba91cfc1ad5ecd1f62a07cb6ac9b8d40dc7512b51d7ce8d89a1ab3dc","href":"https://static.observableusercontent.com/files/be56546679a6fd169a143c679a22789a2057d905ed3af5e53e5fc080c6e3900a1c4c8dc2ba91cfc1ad5ecd1f62a07cb6ac9b8d40dc7512b51d7ce8d89a1ab3dc","name":"austin_mini_geom.json","type":"application/json","lastModified":1634399569288.896,"size":1134168}] 31:{"id":"1f63eeda5d713318","slug":"basic-lighting","title":"Basic Lighting","thumbnail":"9b7ed4012f4846b15102b8e0c527aade1b575bd84a6b357fbfd058ca06671b7a","access_level":"public","create_time":"$D2021-10-14T03:05:12.416Z","update_time":"$D2022-10-10T22:58:57.722Z","view_time":null,"first_public_time":"$D2021-10-16T21:41:18.915Z","has_unpublished_edits":null,"fork":{"id":"d0579a7b381c4cd4","slug":"basic-lighting","title":"Basic Lighting","owner":{"id":"57cbc1498c70b426","login":"infowantstobeseen","name":"T.J. Jankun-Kelly"}},"stars":1,"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":472,"publish_version":472,"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":"b392a3d6fa4ecd2f","slug":"interactive-notes","title":"Polygonal Rendering Notes","owner":{"id":"7c0dab8b587e2ed2","login":"cse4413msstate","name":"Introduction to Computer Graphics MSState"}},"type":"notebook","body":{"title":"Basic Lighting","cells":[{"id":54,"value":"md`# Basic Lighting\n\nWithout lighting, we do not have any way to perceive the shape of an object. We need a model that simulates light radiance and reflection. To start with a basic model, we use 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","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","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: \"Specular color\",\n value: \"#eeeeee\"\n }),\n color({\n title: \"Light color\",\n value: \"#ffffff\"\n })\n ],\n [\n slider({\n title: \"Specular exponent\",\n min: 0,\n max: 9,\n value: 5,\n step: 1,\n getValue: (n) => Math.pow(2, n.value)\n })\n ]\n ],\n\n [\n [\"ambient\", \"diffuse\", \"specular\"],\n [\"specular_color\", \"light_color\"],\n [\"specular_exp\"]\n ]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"$34","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"## Lighting in (Web|Open)GL\n\nIn WebGL (and OpenGL), to perform lighting, several steps must be followed:\n\n1. The model needs normals (usually uploaded as part of the model)\n2. Those normals must be passed unto the vertex shader\n3. The eye vector and normal for the current vertex must be transformed into a common coordinate system (world or eye coordinates)\n4. The transformed vectors then be passed to the fragment shader\n5. And finally, the lighting calculations can occur in the fragment shader\n\n### Provide Normals to the Vertex Shader\n\nNormals are included with most models. For example, in this model of an Austin Mini Cooper, the normals ${tex`\\vec{n}`} are interleaved with the positions ${tex`\\mathrm{p}`} (and two texture coordinates ${tex`s\\ \\text{and}\\ t`} as ${tex`p_x p_y p_z n_x n_y n_z s t`}. These can then be properly bound to a vertex attribute array that is used by the vertex shader.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"{\n const FLOAT_SIZE = Float32Array.BYTES_PER_ELEMENT;\n\n // Make the appropriate vertex buffer active\n gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);\n\n // Bind and activate the positions: First 3 elements in our 8 element chunk\n const position = gl.getAttribLocation(program, \"position\");\n gl.vertexAttribPointer(position, 3, gl.FLOAT, false, FLOAT_SIZE * 8, 0);\n gl.enableVertexAttribArray(position);\n\n // Bind and activate the normals: Second 3 element in our 8 element chunk\n const normal = gl.getAttribLocation(program, \"normal\");\n gl.vertexAttribPointer(\n normal,\n 3,\n gl.FLOAT,\n false,\n FLOAT_SIZE * 8,\n FLOAT_SIZE * 3\n );\n gl.enableVertexAttribArray(normal);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"### Transform the Eye & Normals\n\nIn the vertex shader, we generate the clip coordinate position that is stored in `gl_Position`. For lighting, we cannot use this for our calculations. Instead, we transform the eye vector (the vector from the current vector to the eye) and the normal into a common coordinate system. The vertex shader below uses eye coordinates (after the model and view transforms), though world coordinates could be used. The two vectors are then passed to the rasterizer for interpolation and use by the fragment shader as `varying`s in WebGL.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"~~~glsl\n${vertexShaderCode}\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"md`## Implementation\n\nThis uses the same OpenGL setup we have used previously, detailed in the cells below. The Austin Mini Cooper model is from [sharpbrothers on SketchFab](https://sketchfab.com/3d-models/mini-cooper-low-poly-95b3227e56204df4a00b37b38f32c5f5 \"Mini Cooper - Low Poly\"), used under a Creative Common Attribution license; it was modified to remove the floor layer and translated into a JSON format.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"glm = import(\"gl-matrix\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"ewidth=Math.min(640, width)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"height = ewidth","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":187,"value":"import {slider, checkbox, color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"import {inputsGroup} from \"@bumbeishvili/input-groups\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":319,"value":"vertexShaderCode = `precision highp float;\n\n// View and projection matrices and time for animation\nuniform mat4 view;\nuniform mat4 projection;\nuniform float time;\n\nconst float PI_OVER_180 = 3.14159265359;\n\n// Input attributes\nattribute vec3 position;\nattribute vec3 normal;\n\n// Output varyings\nvarying vec4 eye_view;\nvarying vec4 eye_normal;\n\nvoid main(void)\n{\n // Rotate the car slowly (our model matrix)\n float angle = 0.2 * PI_OVER_180 * time;\n float c = cos(angle); float s = sin(angle);\n mat4 rot = mat4(c, 0., -s, 0., 0., 1., 0., 0., s, 0., c, 0., 0., 0., 0., 1.);\n gl_Position = projection * view * rot * vec4(position, 1.0);\n\n // Store these for the fragment shader (they will be interpolated)\n // Eye coord vectors for lighting\n eye_view = -normalize(view * rot * vec4(position, 1.));\n eye_normal = normalize(view * rot * vec4(normal, 0.));\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"vertexShader = {\n const shader = gl.createShader(gl.VERTEX_SHADER);\n gl.shaderSource(shader, vertexShaderCode);\n gl.compileShader(shader);\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))\n 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","output":"$undefined","database":"$undefined"},{"id":80,"value":"fragmentShader = {\n const shader = gl.createShader(gl.FRAGMENT_SHADER);\n gl.shaderSource(shader, fragmentShaderCode);\n gl.compileShader(shader);\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))\n throw gl.getShaderInfoLog(shader);\n invalidation.then(() => gl.deleteShader(shader));\n return shader;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":156,"value":"u_ambient = gl.getUniformLocation(program, \"use_ambient\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"u_diffuse = gl.getUniformLocation(program, \"use_diffuse\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"u_specular = gl.getUniformLocation(program, \"use_specular\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","output":"$undefined","database":"$undefined"},{"id":359,"value":"u_viewport = gl.getUniformLocation(program, \"viewport\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"u_time = gl.getUniformLocation(program, \"time\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"vertexBuffer = {\n const buffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n gl.bufferData(\n gl.ARRAY_BUFFER,\n new Float32Array(geometry.vertexdata),\n gl.STATIC_DRAW\n );\n\n invalidation.then(() => gl.deleteBuffer(buffer));\n return buffer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"indexBuffer = {\n const buffer = gl.createBuffer();\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer);\n gl.bufferData(\n gl.ELEMENT_ARRAY_BUFFER,\n new Uint16Array(geometry.indexdata),\n gl.STATIC_DRAW\n );\n\n invalidation.then(() => gl.deleteBuffer(buffer));\n return buffer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"setup = {\n // One time setup\n gl.viewport(0, 0, viewof gl.width, viewof gl.height);\n gl.useProgram(program);\n gl.enable(gl.DEPTH_TEST);\n\n return \"Complete\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"renderLoop = {\n setup;\n gl.uniform2fv(\n u_viewport,\n new Float32Array([devicePixelRatio * ewidth, devicePixelRatio * ewidth])\n );\n while (true) {\n const t = performance.now() / 1000;\n gl.uniform1f(u_time, t);\n draw();\n yield t;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"u_view = gl.getUniformLocation(program, \"view\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"view = glm.mat4.lookAt(glm.mat4.create(), [0, 0, -6.5], [0, 0, 0], [0, 1, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"u_projection = gl.getUniformLocation(program, \"projection\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"projection = glm.mat4.perspective(\n glm.mat4.create(),\n (45 * Math.PI) / 180,\n ewidth / height,\n 1,\n 10\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"u_color = gl.getUniformLocation(program, \"color\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"INDEX_SIZE = Uint16Array.BYTES_PER_ELEMENT","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"function draw() {\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n\n gl.uniformMatrix4fv(u_view, false, view);\n gl.uniformMatrix4fv(u_projection, false, projection);\n gl.uniform1f(u_ambient, controls.ambient == \"on\");\n gl.uniform1f(u_diffuse, controls.diffuse == \"on\");\n gl.uniform1f(u_specular, controls.specular == \"on\");\n gl.uniform3fv(u_specular_color, hexToRGB(controls.specular_color));\n gl.uniform1f(u_specular_exp, controls.specular_exp);\n gl.uniform3fv(u_light_color, hexToRGB(controls.light_color));\n\n for (const group in geometry.indices) {\n gl.uniform3fv(u_color, geometry.materials[group].albedo);\n const [start, end] = geometry.indices[group];\n gl.drawElements(\n gl.TRIANGLES,\n end - start,\n gl.UNSIGNED_SHORT,\n INDEX_SIZE * start\n );\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"geometry = FileAttachment(\"austin_mini_geom.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 32:"$31:body"