2a:null 2b:["$","title",null,{"children":"Flat, Gouraud & Phong | VIDI Intro Graphics | Observable"}] 30:T4d2,## Shading Models # Flat, Gouraud & Phong Some 3D objects appear blocky, while others look silky smooth and full of detail. The difference often comes down to shading, the process that determines how surfaces appear when rendered, based on lighting and material properties. Shading affects not only the realism of a scene but also its rendering speed and performance. - **Flat Shading**: Computes lighting once per triangle, giving a uniform color across the face. Extremely fast but produces a simple faceted look. - **Gouraud Shading**: Computes lighting at vertices and linearly interpolates the colors across the surface. Still fast, smoother than Flat but can miss small specular highlights. - **Phong Shading**: Computes lighting per pixel (fragment), giving smooth and realistic results, especially for highlights. More expensive, but produces the highest quality among the three. You can also explore: - **Camera Comparison**: See how two common camera models affect the scene. - **Lighting Components**: Isolate diffuse and specular reflection to study them individually or combine them to see the collective contribution. - **Material Properties**: Adjust *metalness* and *roughness* to observe their impact on appearance.31:T441,___ ## Quick Manual - Various options under **Camera** and **Shading Technique** allow you to observe their visual impact. - In the **Lighting Components** section, you can toggle individual components ON or OFF to explore their separate or combined effects. (*Note: The Toon Level setting is only available for Toon-style Shading Techniques.*) - The **Geometry** and **Material Properties** section lets you choose different geometry models. - **Detail Level**: Controls the *Mesh Resolution* of the object (available only for select models). - **Metalness**: A Physically Based Rendering attribute that influences the material's *kA, kD, and kS* coefficients. - **Roughness**: Another Physically Based Rendering attribute that affects the material's *shininess* property. *The Metalness and Roughness sliders are inspired by Physically Based Rendering (PBR), but under the hood, the shading is implemented using the classic kA, kD, kS model. While this isn't an exact PBR simulation, it still provides an intuitive sense of how these properties affect the material's appearance.*32:T505,viewof shadingMode = { const form = html``; form.value = form.mode.value; form.addEventListener("change", () => { form.value = form.mode.value; form.dispatchEvent(new CustomEvent("input")); // notify value change }); return form; }33:T598,viewof materialProperties = { const div = html`

Metalness: 0.1 Roughness: 0.5

`; const metalInput = div.querySelector("#metal"); const metalSpan = div.querySelector("#metalVal"); const roughInput = div.querySelector("#rough"); const roughSpan = div.querySelector("#roughVal"); function updateValue() { div.value = { metalness: +metalInput.value, roughness: +roughInput.value }; div.dispatchEvent(new CustomEvent("input")); } metalInput.addEventListener("input", () => { metalSpan.textContent = (+metalInput.value).toFixed(2); updateValue(); }); roughInput.addEventListener("input", () => { roughSpan.textContent = (+roughInput.value).toFixed(2); updateValue(); }); function updateDisabled() { const lc = viewof lightingComponents.value; metalInput.disabled = !(lc.AMBI || lc.DIFF || lc.SPEC || lc.FRES); roughInput.disabled = !lc.SPEC; } viewof lightingComponents.addEventListener("input", updateDisabled); updateDisabled(); updateValue(); return div; }34:T10ef,viewof flat_vert_glsl = mdGLSL_toggle(`#define MAX_LIGHTS 8 struct AmbientLight { vec3 color; float intensity; }; struct DirectionalLight { vec3 direction; vec3 color; float intensity; bool castShadow; }; struct PointLight { vec3 position; vec3 color; float intensity; bool castShadow; }; struct Material { vec3 baseColor; float metalness; float roughness; float shininess; }; uniform bool u_ambi_enable; uniform bool u_diff_enable; uniform bool u_spec_enable; uniform bool u_fres_enable; uniform AmbientLight u_lights_ambient[MAX_LIGHTS]; uniform DirectionalLight u_lights_dir[MAX_LIGHTS]; uniform PointLight u_lights_point[MAX_LIGHTS]; uniform Material u_material; flat out vec4 o_color; vec3 getViewDir(vec3 viewPos) { if (isOrthographic) { return normalize(vec3(0.0, 0.0, 1.0)); } return normalize(-viewPos); } vec3 shadeAmbient(vec3 kA) { vec3 result = vec3(0.0); for (int i = 0; i < MAX_LIGHTS; i++) { result += kA * u_lights_ambient[i].color * u_lights_ambient[i].intensity; } return result; } vec3 shadeDiffuse(vec3 kD, vec3 normal, vec3 viewPos) { vec3 result = vec3(0.0); // Directional lights for (int i = 0; i < MAX_LIGHTS; i++) { vec3 lightViewDir = normalize((mat3(viewMatrix) * -u_lights_dir[i].direction)); float ndotl = max(dot(normalize(normal), normalize(lightViewDir)), 0.0); result += kD * u_lights_dir[i].color * u_lights_dir[i].intensity * ndotl; } // Point lights for (int i = 0; i < MAX_LIGHTS; i++) { vec3 lightViewPos = (viewMatrix * vec4(u_lights_point[i].position, 1.0)).xyz; vec3 lightViewDir = lightViewPos - viewPos; float distanceSQ = max(dot(lightViewDir, lightViewDir), 0.001); float ndotl = max(dot(normalize(normal), normalize(lightViewDir)), 0.0); result += kD * u_lights_point[i].color * u_lights_point[i].intensity * ndotl / distanceSQ; } return result; } vec3 shadeSpecular(Material material, vec3 kS, vec3 normal, vec3 viewPos) { vec3 result = vec3(0.0); float shininess = material.shininess; float normalization = (shininess + 8.0) / 25.1327412287; // 8pi vec3 viewDir = getViewDir(viewPos); // Directional lights for (int i = 0; i < MAX_LIGHTS; i++) { vec3 lightViewDir = normalize((mat3(viewMatrix) * -u_lights_dir[i].direction)); vec3 halfway = normalize(normalize(lightViewDir) + normalize(viewDir)); float ndoth = max(dot(normalize(normal), halfway), 0.0); result += kS * u_lights_dir[i].color * u_lights_dir[i].intensity * normalization * pow(ndoth, shininess); } // Point lights for (int i = 0; i < MAX_LIGHTS; i++) { vec3 lightViewPos = (viewMatrix * vec4(u_lights_point[i].position, 1.0)).xyz; vec3 lightViewDir = lightViewPos - viewPos; float distanceSQ = max(dot(lightViewDir, lightViewDir), 0.001); vec3 halfway = normalize(normalize(lightViewDir) + normalize(viewDir)); float ndoth = max(dot(normalize(normal), halfway), 0.0); result += kS * u_lights_point[i].color * u_lights_point[i].intensity * normalization * pow(ndoth, shininess) / distanceSQ; } return result; } vec3 shadeFresnel(vec3 kS, vec3 normal, vec3 viewPos) { vec3 viewDir = getViewDir(viewPos); float fresnel = pow(1.0 - max(dot(normalize(normal), viewDir), 0.0), 2.0); return kS * fresnel * 0.5; } void main() { vec3 kA = u_material.baseColor * (1.0 - 0.8 * u_material.metalness); vec3 kD = u_material.baseColor * (1.0 - 0.8 * u_material.metalness); vec3 kS = mix(vec3(0.04), u_material.baseColor, 0.2 * u_material.metalness + 0.2); vec3 worldPos = (modelMatrix * vec4(position, 1.0)).xyz; vec3 viewPos = (viewMatrix * vec4(worldPos, 1.0)).xyz; vec3 viewNormal = normalize(normalMatrix * normal); vec3 color = vec3(0.0); if (u_ambi_enable) color += shadeAmbient (kA); if (u_diff_enable) color += shadeDiffuse (kD, viewNormal, viewPos); if (u_spec_enable) color += shadeSpecular (u_material, kS, viewNormal, viewPos); if (u_fres_enable) color += shadeFresnel (kS, viewNormal, viewPos); gl_Position = projectionMatrix * vec4(viewPos, 1.0); o_color = vec4(color, 1.0); } `, "Flat - Vertex shader", 500)35:T10f0,viewof gouraud_vert_glsl = mdGLSL_toggle(`#define MAX_LIGHTS 8 struct AmbientLight { vec3 color; float intensity; }; struct DirectionalLight { vec3 direction; vec3 color; float intensity; bool castShadow; }; struct PointLight { vec3 position; vec3 color; float intensity; bool castShadow; }; struct Material { vec3 baseColor; float metalness; float roughness; float shininess; }; uniform bool u_ambi_enable; uniform bool u_diff_enable; uniform bool u_spec_enable; uniform bool u_fres_enable; uniform AmbientLight u_lights_ambient[MAX_LIGHTS]; uniform DirectionalLight u_lights_dir[MAX_LIGHTS]; uniform PointLight u_lights_point[MAX_LIGHTS]; uniform Material u_material; out vec4 o_color; vec3 getViewDir(vec3 viewPos) { if (isOrthographic) { return normalize(vec3(0.0, 0.0, 1.0)); } return normalize(-viewPos); } vec3 shadeAmbient(vec3 kA) { vec3 result = vec3(0.0); for (int i = 0; i < MAX_LIGHTS; i++) { result += kA * u_lights_ambient[i].color * u_lights_ambient[i].intensity; } return result; } vec3 shadeDiffuse(vec3 kD, vec3 normal, vec3 viewPos) { vec3 result = vec3(0.0); // Directional lights for (int i = 0; i < MAX_LIGHTS; i++) { vec3 lightViewDir = normalize((mat3(viewMatrix) * -u_lights_dir[i].direction)); float ndotl = max(dot(normalize(normal), normalize(lightViewDir)), 0.0); result += kD * u_lights_dir[i].color * u_lights_dir[i].intensity * ndotl; } // Point lights for (int i = 0; i < MAX_LIGHTS; i++) { vec3 lightViewPos = (viewMatrix * vec4(u_lights_point[i].position, 1.0)).xyz; vec3 lightViewDir = lightViewPos - viewPos; float distanceSQ = max(dot(lightViewDir, lightViewDir), 0.001); float ndotl = max(dot(normalize(normal), normalize(lightViewDir)), 0.0); result += kD * u_lights_point[i].color * u_lights_point[i].intensity * ndotl / distanceSQ; } return result; } vec3 shadeSpecular(Material material, vec3 kS, vec3 normal, vec3 viewPos) { vec3 result = vec3(0.0); float shininess = material.shininess; float normalization = (shininess + 8.0) / 25.1327412287; // 8pi vec3 viewDir = getViewDir(viewPos); // Directional lights for (int i = 0; i < MAX_LIGHTS; i++) { vec3 lightViewDir = normalize((mat3(viewMatrix) * -u_lights_dir[i].direction)); vec3 halfway = normalize(normalize(lightViewDir) + normalize(viewDir)); float ndoth = max(dot(normalize(normal), halfway), 0.0); result += kS * u_lights_dir[i].color * u_lights_dir[i].intensity * normalization * pow(ndoth, shininess); } // Point lights for (int i = 0; i < MAX_LIGHTS; i++) { vec3 lightViewPos = (viewMatrix * vec4(u_lights_point[i].position, 1.0)).xyz; vec3 lightViewDir = lightViewPos - viewPos; float distanceSQ = max(dot(lightViewDir, lightViewDir), 0.001); vec3 halfway = normalize(normalize(lightViewDir) + normalize(viewDir)); float ndoth = max(dot(normalize(normal), halfway), 0.0); result += kS * u_lights_point[i].color * u_lights_point[i].intensity * normalization * pow(ndoth, shininess) / distanceSQ; } return result; } vec3 shadeFresnel(vec3 kS, vec3 normal, vec3 viewPos) { vec3 viewDir = getViewDir(viewPos); float fresnel = pow(1.0 - max(dot(normalize(normal), viewDir), 0.0), 2.0); return kS * fresnel * 0.5; } void main() { vec3 kA = u_material.baseColor * (1.0 - 0.8 * u_material.metalness); vec3 kD = u_material.baseColor * (1.0 - 0.8 * u_material.metalness); vec3 kS = mix(vec3(0.04), u_material.baseColor, 0.2 * u_material.metalness + 0.2); vec3 worldPos = (modelMatrix * vec4(position, 1.0)).xyz; vec3 viewPos = (viewMatrix * vec4(worldPos, 1.0)).xyz; vec3 viewNormal = normalize(normalMatrix * normal); vec3 color = vec3(0.0); if (u_ambi_enable) color += shadeAmbient (kA); if (u_diff_enable) color += shadeDiffuse (kD, viewNormal, viewPos); if (u_spec_enable) color += shadeSpecular (u_material, kS, viewNormal, viewPos); if (u_fres_enable) color += shadeFresnel (kS, viewNormal, viewPos); gl_Position = projectionMatrix * vec4(viewPos, 1.0); o_color = vec4(color, 1.0); } `, "Gouraud - Vertex shader", 500)36:T1042,viewof phong_frag_glsl = mdGLSL_toggle(`#define MAX_LIGHTS 8 precision mediump float; struct AmbientLight { vec3 color; float intensity; }; struct DirectionalLight { vec3 direction; vec3 color; float intensity; bool castShadow; }; struct PointLight { vec3 position; vec3 color; float intensity; bool castShadow; }; struct Material { vec3 baseColor; float metalness; float roughness; float shininess; }; uniform bool u_ambi_enable; uniform bool u_diff_enable; uniform bool u_spec_enable; uniform bool u_fres_enable; uniform AmbientLight u_lights_ambient[MAX_LIGHTS]; uniform DirectionalLight u_lights_dir[MAX_LIGHTS]; uniform PointLight u_lights_point[MAX_LIGHTS]; uniform Material u_material; in vec3 v_worldPos; in vec3 v_viewPos; in vec3 v_viewNormal; vec3 getViewDir(vec3 viewPos) { if (isOrthographic) { return normalize(vec3(0.0, 0.0, 1.0)); } return normalize(-viewPos); } vec3 shadeAmbient(vec3 kA) { vec3 result = vec3(0.0); for (int i = 0; i < MAX_LIGHTS; i++) { result += kA * u_lights_ambient[i].color * u_lights_ambient[i].intensity; } return result; } vec3 shadeDiffuse(vec3 kD, vec3 normal, vec3 viewPos) { vec3 result = vec3(0.0); // Directional lights for (int i = 0; i < MAX_LIGHTS; i++) { vec3 L = normalize((mat3(viewMatrix) * -u_lights_dir[i].direction)); float NdotL = max(dot(normalize(normal), L), 0.0); result += kD * u_lights_dir[i].color * u_lights_dir[i].intensity * NdotL; } // Point lights for (int i = 0; i < MAX_LIGHTS; i++) { vec3 lightViewPos = (viewMatrix * vec4(u_lights_point[i].position, 1.0)).xyz; vec3 lightViewDir = lightViewPos - viewPos; vec3 L = normalize(lightViewDir); float distanceSQ = max(dot(lightViewDir, lightViewDir), 0.001); float NdotL = max(dot(normalize(normal), L), 0.0); result += kD * u_lights_point[i].color * u_lights_point[i].intensity * NdotL / distanceSQ; } return result; } vec3 shadeSpecular(Material material, vec3 kS, vec3 normal, vec3 viewPos) { vec3 result = vec3(0.0); float shininess = material.shininess; float normalization = (shininess + 8.0) / 25.1327412287; // 8pi vec3 V = getViewDir(viewPos); // Directional lights for (int i = 0; i < MAX_LIGHTS; i++) { vec3 L = normalize((mat3(viewMatrix) * -u_lights_dir[i].direction)); vec3 halfway = normalize(L + V); float ndoth = max(dot(normalize(normal), halfway), 0.0); result += kS * u_lights_dir[i].color * u_lights_dir[i].intensity * normalization * pow(ndoth, shininess); } // Point lights for (int i = 0; i < MAX_LIGHTS; i++) { vec3 lightViewPos = (viewMatrix * vec4(u_lights_point[i].position, 1.0)).xyz; vec3 lightViewDir = lightViewPos - viewPos; vec3 L = normalize(lightViewDir); float distanceSQ = max(dot(lightViewDir, lightViewDir), 0.001); vec3 halfway = normalize(L + V); float ndoth = max(dot(normalize(normal), halfway), 0.0); result += kS * u_lights_point[i].color * u_lights_point[i].intensity * normalization * pow(ndoth, shininess) / distanceSQ; } return result; } vec3 shadeFresnel(vec3 kS, vec3 normal, vec3 viewPos) { vec3 V = getViewDir(viewPos); float fresnel = pow(1.0 - max(dot(normalize(normal), V), 0.0), 2.0); return kS * fresnel * 0.5; } void main() { vec3 kA = u_material.baseColor * (1.0 - 0.8 * u_material.metalness); vec3 kD = u_material.baseColor * (1.0 - 0.8 * u_material.metalness); vec3 kS = mix(vec3(0.04), u_material.baseColor, 0.2 * u_material.metalness + 0.2); vec3 viewNormal = v_viewNormal; vec3 viewPos = v_viewPos; vec3 color = vec3(0.0); if (u_ambi_enable) color += shadeAmbient (kA); if (u_diff_enable) color += shadeDiffuse (kD, viewNormal, viewPos); if (u_spec_enable) color += shadeSpecular (u_material, kS, viewNormal, viewPos); if (u_fres_enable) color += shadeFresnel (kS, viewNormal, viewPos); gl_FragColor = vec4(color, 1.0); } `, "Phong - Fragment shader", 500)37:T1081,viewof toon_frag_glsl = mdGLSL_toggle(`#define MAX_LIGHTS 8 precision mediump float; struct AmbientLight { vec3 color; float intensity; }; struct DirectionalLight { vec3 direction; vec3 color; float intensity; bool castShadow; }; struct PointLight { vec3 position; vec3 color; float intensity; bool castShadow; }; struct Material { vec3 baseColor; float metalness; float roughness; float shininess; }; uniform bool u_ambi_enable; uniform bool u_diff_enable; uniform bool u_spec_enable; uniform bool u_fres_enable; uniform AmbientLight u_lights_ambient[MAX_LIGHTS]; uniform DirectionalLight u_lights_dir[MAX_LIGHTS]; uniform PointLight u_lights_point[MAX_LIGHTS]; uniform Material u_material; uniform float u_toon_level; in vec3 v_viewPos; in vec3 v_viewNormal; vec3 getViewDir(vec3 viewPos) { if (isOrthographic) { return normalize(vec3(0.0, 0.0, 1.0)); } return normalize(-viewPos); } vec3 shadeAmbient(vec3 kA) { vec3 result = vec3(0.0); for (int i = 0; i < MAX_LIGHTS; i++) { result += kA * u_lights_ambient[i].color * u_lights_ambient[i].intensity; } return result; } vec3 shadeDiffuse(vec3 kD, vec3 normal, vec3 viewPos) { vec3 result = vec3(0.0); // Directional lights for (int i = 0; i < MAX_LIGHTS; i++) { vec3 L = normalize((mat3(viewMatrix) * -u_lights_dir[i].direction)); float NdotL = max(dot(normalize(normal), L), 0.0); result += kD * u_lights_dir[i].color * u_lights_dir[i].intensity * NdotL; } // Point lights for (int i = 0; i < MAX_LIGHTS; i++) { vec3 lightViewPos = (viewMatrix * vec4(u_lights_point[i].position, 1.0)).xyz; vec3 lightViewDir = lightViewPos - viewPos; vec3 L = normalize(lightViewDir); float distanceSQ = max(dot(lightViewDir, lightViewDir), 0.001); float NdotL = max(dot(normalize(normal), L), 0.0); result += kD * u_lights_point[i].color * u_lights_point[i].intensity * NdotL / distanceSQ; } return result; } vec3 shadeSpecular(Material material, vec3 kS, vec3 normal, vec3 viewPos) { vec3 result = vec3(0.0); float shininess = material.shininess; float normalization = (shininess + 8.0) / 25.1327412287; // 8pi vec3 V = getViewDir(viewPos); // Directional lights for (int i = 0; i < MAX_LIGHTS; i++) { vec3 L = normalize((mat3(viewMatrix) * -u_lights_dir[i].direction)); vec3 halfway = normalize(L + V); float ndoth = max(dot(normalize(normal), halfway), 0.0); result += kS * u_lights_dir[i].color * u_lights_dir[i].intensity * normalization * pow(ndoth, shininess); } // Point lights for (int i = 0; i < MAX_LIGHTS; i++) { vec3 lightViewPos = (viewMatrix * vec4(u_lights_point[i].position, 1.0)).xyz; vec3 lightViewDir = lightViewPos - viewPos; vec3 L = normalize(lightViewDir); float distanceSQ = max(dot(lightViewDir, lightViewDir), 0.001); vec3 halfway = normalize(L + V); float ndoth = max(dot(normalize(normal), halfway), 0.0); result += kS * u_lights_point[i].color * u_lights_point[i].intensity * normalization * pow(ndoth, shininess) / distanceSQ; } return result; } vec3 shadeFresnel(vec3 kS, vec3 normal, vec3 viewPos) { vec3 V = getViewDir(viewPos); float fresnel = pow(1.0 - max(dot(normalize(normal), V), 0.0), 2.0); return kS * fresnel * 0.5; } void main() { vec3 kA = u_material.baseColor * (1.0 - 0.8 * u_material.metalness); vec3 kD = u_material.baseColor * (1.0 - 0.8 * u_material.metalness); vec3 kS = mix(vec3(0.04), u_material.baseColor, 0.2 * u_material.metalness + 0.2); vec3 viewNormal = v_viewNormal; vec3 viewPos = v_viewPos; vec3 color = vec3(0.0); if (u_ambi_enable) color += shadeAmbient (kA); if (u_diff_enable) color += shadeDiffuse (kD, viewNormal, viewPos); if (u_spec_enable) color += shadeSpecular (u_material, kS, viewNormal, viewPos); if (u_fres_enable) color += shadeFresnel (kS, viewNormal, viewPos); color = floor(color * u_toon_level) / u_toon_level; gl_FragColor = vec4(color, 1.0); } `, "Toon - Fragment shader", 500)38:T10ca,viewof cel_frag_glsl = mdGLSL_toggle(`#define MAX_LIGHTS 8 precision mediump float; struct AmbientLight { vec3 color; float intensity; }; struct DirectionalLight { vec3 direction; vec3 color; float intensity; bool castShadow; }; struct PointLight { vec3 position; vec3 color; float intensity; bool castShadow; }; struct Material { vec3 baseColor; float metalness; float roughness; float shininess; }; uniform bool u_ambi_enable; uniform bool u_diff_enable; uniform bool u_spec_enable; uniform bool u_fres_enable; uniform AmbientLight u_lights_ambient[MAX_LIGHTS]; uniform DirectionalLight u_lights_dir[MAX_LIGHTS]; uniform PointLight u_lights_point[MAX_LIGHTS]; uniform Material u_material; uniform float u_toon_level; in vec3 v_viewPos; in vec3 v_viewNormal; vec3 getViewDir(vec3 viewPos) { if (isOrthographic) { return normalize(vec3(0.0, 0.0, 1.0)); } return normalize(-viewPos); } vec3 shadeAmbient(vec3 kA) { vec3 result = vec3(0.0); for (int i = 0; i < MAX_LIGHTS; i++) { result += kA * u_lights_ambient[i].color * u_lights_ambient[i].intensity; } return result; } vec3 shadeDiffuse(vec3 kD, vec3 normal, vec3 viewPos) { vec3 result = vec3(0.0); // Directional lights for (int i = 0; i < MAX_LIGHTS; i++) { vec3 L = normalize((mat3(viewMatrix) * -u_lights_dir[i].direction)); float NdotL = max(dot(normalize(normal), L), 0.0); float diff = NdotL > 0.4 ? 0.5 : NdotL; result += kD * u_lights_dir[i].color * u_lights_dir[i].intensity * diff; } // Point lights for (int i = 0; i < MAX_LIGHTS; i++) { vec3 lightViewPos = (viewMatrix * vec4(u_lights_point[i].position, 1.0)).xyz; vec3 lightViewDir = lightViewPos - viewPos; vec3 L = normalize(lightViewDir); float distanceSQ = max(dot(lightViewDir, lightViewDir), 0.001); float NdotL = max(dot(normalize(normal), L), 0.0); float diff = NdotL > 0.4 ? 0.5 : NdotL; result += kD * u_lights_point[i].color * u_lights_point[i].intensity * diff / distanceSQ; } return result; } vec3 shadeSpecular(Material material, vec3 kS, vec3 normal, vec3 viewPos) { vec3 result = vec3(0.0); vec3 V = getViewDir(viewPos); float specularThreshold = 1.0 - 0.02 * u_toon_level; // Directional lights for (int i = 0; i < MAX_LIGHTS; i++) { vec3 L = normalize((mat3(viewMatrix) * -u_lights_dir[i].direction)); vec3 halfway = normalize(L + V); float ndoth = max(dot(normalize(normal), halfway), 0.0); float spec = ndoth > specularThreshold ? 0.8 : 0.0; result += kS * u_lights_dir[i].color * u_lights_dir[i].intensity * spec; } // Point lights for (int i = 0; i < MAX_LIGHTS; i++) { vec3 lightViewPos = (viewMatrix * vec4(u_lights_point[i].position, 1.0)).xyz; vec3 lightViewDir = lightViewPos - viewPos; vec3 L = normalize(lightViewDir); float distanceSQ = max(dot(lightViewDir, lightViewDir), 0.001); vec3 halfway = normalize(L + V); float ndoth = max(dot(normalize(normal), halfway), 0.0); float spec = ndoth > specularThreshold ? 0.8 : 0.0; result += kS * u_lights_point[i].color * u_lights_point[i].intensity * spec / distanceSQ; } return result; } vec3 shadeFresnel(vec3 kS, vec3 normal, vec3 viewPos) { vec3 V = getViewDir(viewPos); float fresnel = pow(1.0 - max(dot(normalize(normal), V), 0.0), 2.0); fresnel = fresnel > 0.5 ? 0.8 : 0.0; return kS * fresnel; } void main() { vec3 kA = u_material.baseColor * (1.0 - 0.8 * u_material.metalness); vec3 kD = u_material.baseColor * (1.0 - 0.8 * u_material.metalness); vec3 kS = mix(vec3(0.04), u_material.baseColor, 0.2 * u_material.metalness + 0.2); vec3 viewNormal = v_viewNormal; vec3 viewPos = v_viewPos; vec3 color = vec3(0.0); if (u_ambi_enable) color += shadeAmbient (kA); if (u_diff_enable) color += shadeDiffuse (kD, viewNormal, viewPos); if (u_spec_enable) color += shadeSpecular (u_material, kS, viewNormal, viewPos); if (u_fres_enable) color += shadeFresnel (kS, viewNormal, viewPos); gl_FragColor = vec4(color, 1.0); } `, "Cel - Fragment shader", 500)39:[{"id":"3a27265aaaa160b74eeda32549f20e894a8ab0fca06d95a9fe88be92986840a1b835a68341056cbf64ed0f2f826f1ade8f21e9ce13872f3b91f7e3ba83f0d24f","href":"https://static.observableusercontent.com/files/3a27265aaaa160b74eeda32549f20e894a8ab0fca06d95a9fe88be92986840a1b835a68341056cbf64ed0f2f826f1ade8f21e9ce13872f3b91f7e3ba83f0d24f","name":"stanford-bunny.obj","type":"model/obj","lastModified":1753995395044.77,"size":4661961},{"id":"0c64a67e3c5ab22c84ac4feddeafcd07ce3f44917be4f6a483530c4a2f3fc3b8f12b38ce575ff5cfa93b7767f0f6d41da55ab68b0fb8dcbeed3a8d745b0cbfad","href":"https://static.observableusercontent.com/files/0c64a67e3c5ab22c84ac4feddeafcd07ce3f44917be4f6a483530c4a2f3fc3b8f12b38ce575ff5cfa93b7767f0f6d41da55ab68b0fb8dcbeed3a8d745b0cbfad","name":"lucy.obj","type":"model/obj","lastModified":1754003239287.571,"size":7006032}] 2e:{"id":"0d107a36a50988fb","slug":"flat-gouraud-phong","title":"Flat, Gouraud & Phong","thumbnail":"8b4416df7e0ff526ed8ce063082b21d4b1746d0c5b75e5e9b7e518b64f108595","access_level":"public","create_time":"$D2025-07-31T08:19:14.476Z","update_time":"$D2026-02-08T19:26:48.747Z","view_time":null,"first_public_time":"$D2025-07-31T12:33:07.306Z","fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"6a2979fe0c58caa8","login":"vidi-intro-graphics","name":"VIDI Intro Graphics","avatar_url":"https://avatars-next.observableusercontent.com/45b660a2d93636af360abe7822040f466ffa17dd2a472fd91fa891a7b544a83c","tier":"starter_2024"},"version":1954,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c3cd8e5f7dd364e3","login":"eroisk","name":"Set Paing","avatar_url":"https://avatars-next.observableusercontent.com/24cc62fc242e5de882ce3ce002c7a093b22513123bd01ac4ec35a17f48595a12","tier":null}],"members":[{"type":"individual","id":"c3cd8e5f7dd364e3","login":"eroisk","name":"Set Paing","avatar_url":"https://avatars-next.observableusercontent.com/24cc62fc242e5de882ce3ce002c7a093b22513123bd01ac4ec35a17f48595a12","tier":null,"role":"editor"},{"type":"team","id":"6a2979fe0c58caa8","login":"vidi-intro-graphics","name":"VIDI Intro Graphics","avatar_url":"https://avatars-next.observableusercontent.com/45b660a2d93636af360abe7822040f466ffa17dd2a472fd91fa891a7b544a83c","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"9e180f6758d4b892","slug":"core-concepts-in-computer-graphics","title":"Core Concepts in Computer Graphics","owner":{"id":"6a2979fe0c58caa8","login":"vidi-intro-graphics","name":"VIDI Intro Graphics"}},"type":"notebook","body":{"title":"Flat, Gouraud & Phong","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1711,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":921,"value":"### Camera:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":927,"value":"viewof cameraType = {\n const form = html``;\n\n form.value = form.mode.value;\n\n form.addEventListener(\"change\", () => {\n form.value = form.mode.value;\n form.dispatchEvent(new CustomEvent(\"input\")); // notify value change\n });\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":412,"value":"### Shading Technique:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":245,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1510,"value":"renderer.domElement;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1175,"value":"### Lighting Components:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1139,"value":"viewof lightingComponents = {\n const form = html``;\n\n const inputs = form.querySelectorAll('input[type=\"checkbox\"]');\n\n function updateValue() {\n const result = {};\n inputs.forEach(input => {\n result[input.value] = input.checked;\n });\n form.value = result;\n form.dispatchEvent(new CustomEvent(\"input\"));\n }\n\n inputs.forEach(input => {\n input.addEventListener(\"change\", () => {\n updateValue();\n });\n });\n updateValue();\n\n return form;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1205,"value":"viewof toonLevel = {\n const div = html`

\n Toon Level:\n 5\n \n

\n Detail Level:\n 6\n \n

`;\n\n const input = div.querySelector(\"input\");\n const span = div.querySelector(\"span\");\n\n div.value = +input.value;\n\n input.addEventListener(\"input\", () => {\n span.textContent = input.value;\n div.value = +input.value;\n div.dispatchEvent(new CustomEvent(\"input\"));\n });\n\n function updateDisabled() {\n const shouldDisable = [\"Bunny\", \"Lucy\"].includes(viewof geometryType.value);\n input.disabled = shouldDisable;\n };\n viewof geometryType.addEventListener(\"input\", updateDisabled);\n updateDisabled();\n\n return div;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":346,"value":"viewof geometryType = {\n const form = html``;\n\n form.mode.value = \"Icosahedron\";\n form.value = form.mode.value;\n\n form.addEventListener(\"change\", () => {\n form.value = form.mode.value;\n form.dispatchEvent(new CustomEvent(\"input\"));\n });\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1543,"value":"### Helpers:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1537,"value":"viewof helper = {\n const form = html``;\n\n const inputs = form.querySelectorAll('input[type=\"checkbox\"]');\n\n function updateValue() {\n const result = {};\n inputs.forEach(input => {\n result[input.value] = input.checked;\n });\n form.value = result;\n form.dispatchEvent(new CustomEvent(\"input\"));\n }\n\n inputs.forEach(input => {\n input.addEventListener(\"change\", updateValue);\n });\n updateValue();\n\n return form;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":984,"value":"___\n## Light Sources\n\n*Note: `castShadow` is not used in this example.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1329,"value":"// match this with GLSL shaders\nMAX_LIGHTS = 8;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1133,"value":"ambientLights = [\n {\n color: new THREE.Vector3(1.0, 1.0, 1.0),\n intensity: 0.05,\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":988,"value":"directionalLights = [\n {\n direction: new THREE.Vector3(-1, -3, -3).normalize(),\n color: new THREE.Vector3(1.0, 1.0, 1.0),\n intensity: 0.8,\n castShadow: false,\n },\n {\n direction: new THREE.Vector3(1, -1, 3).normalize(),\n color: new THREE.Vector3(0.9, 0.8, 1.0),\n intensity: 0.8,\n castShadow: false,\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":992,"value":"pointLights = [\n {\n position: new THREE.Vector3(-8, 0, 0),\n color: new THREE.Vector3(1.0, 0.6, 0.4),\n intensity: 20.0,\n castShadow: false,\n },\n {\n position: new THREE.Vector3(8, 0, 0),\n color: new THREE.Vector3(0.4, 0.6, 1.0),\n intensity: 20.0,\n castShadow: false,\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":996,"value":"uniformLightData = {\n const paddedAmbient = ambientLights.slice(0, MAX_LIGHTS);\n while (paddedAmbient.length < MAX_LIGHTS) {\n paddedAmbient.push({\n color: new THREE.Vector3(0.0, 0.0, 0.0),\n intensity: 0.0,\n });\n }\n\n const paddedDir = directionalLights.slice(0, MAX_LIGHTS);\n while (paddedDir.length < MAX_LIGHTS) {\n paddedDir.push({\n direction: new THREE.Vector3(0, 0, -1),\n color: new THREE.Vector3(0, 0, 0),\n intensity: 0.0,\n castShadow: false,\n });\n }\n\n const paddedPoint = pointLights.slice(0, MAX_LIGHTS);\n while (paddedPoint.length < MAX_LIGHTS) {\n paddedPoint.push({\n position: new THREE.Vector3(0, 0, 0),\n color: new THREE.Vector3(0, 0, 0),\n intensity: 0.0,\n castShadow: false,\n });\n }\n\n return { ambient: paddedAmbient, directional: paddedDir, point: paddedPoint };\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":309,"value":"___\n## Uniform Object and Shader Materials","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1398,"value":"shininessLevel = 1 + Math.pow(1 - materialProperties.roughness, 3) * 1023;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":447,"value":"uniformsObj = {\n return {\n u_ambi_enable: {value: ambi_enable},\n u_diff_enable: {value: diff_enable},\n u_spec_enable: {value: spec_enable},\n u_fres_enable: {value: fres_enable},\n\n u_lights_ambient: {value: uniformLightData.ambient},\n u_lights_dir: {value: uniformLightData.directional},\n u_lights_point: {value: uniformLightData.point},\n\n u_material: {\n value: {\n baseColor: new THREE.Vector3(1.0, 1.0, 1.0),\n metalness: materialProperties.metalness,\n roughness: materialProperties.roughness,\n shininess: shininessLevel,\n // kA: new THREE.Vector3(0, 0, 0),\n // kD: new THREE.Vector3(0, 0, 0),\n // kS: new THREE.Vector3(0, 0, 0),\n }\n },\n\n u_toon_level: {value: toonLevel},\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":450,"value":"makeShaderMaterial = (vertS, fragS) => {\n return new THREE.ShaderMaterial({\n vertexShader: vertS,\n fragmentShader: fragS,\n uniforms: uniformsObj,\n side: THREE.DoubleSide,\n });\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":316,"value":"gouraudMaterial = makeShaderMaterial(gouraud_vert_glsl, gouraud_frag_glsl)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":319,"value":"phongMaterial = makeShaderMaterial(phong_vert_glsl, phong_frag_glsl)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":720,"value":"flatMaterial = makeShaderMaterial(flat_vert_glsl, flat_frag_glsl)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":618,"value":"toonMaterial = makeShaderMaterial(phong_vert_glsl, toon_frag_glsl)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":646,"value":"celMaterial = makeShaderMaterial(phong_vert_glsl, cel_frag_glsl)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1499,"value":"meshNormalMaterial = new THREE.MeshNormalMaterial();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"___\n## GLSL Shaders","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":269,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":273,"value":"viewof flat_frag_glsl = mdGLSL_toggle(`precision mediump float;\n\nflat in vec4 o_color;\n\nvoid main() {\n gl_FragColor = o_color;\n}\n`, \"Flat - Fragment shader\", 500)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"viewof gouraud_frag_glsl = mdGLSL_toggle(`precision mediump float;\n\nin vec4 o_color;\n\nvoid main() {\n gl_FragColor = o_color;\n}\n`, \"Gouraud - Fragment shader\", 500)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":218,"value":"viewof phong_vert_glsl = mdGLSL_toggle(`out vec3 v_worldPos;\nout vec3 v_viewPos;\nout vec3 v_viewNormal;\n\nvoid main() {\n vec3 worldPos = (modelMatrix * vec4(position, 1.0)).xyz;\n vec3 viewPos = (viewMatrix * vec4(worldPos, 1.0)).xyz;\n\n vec3 normal_view = normalize(normalMatrix * normal);\n\n v_worldPos = worldPos;\n v_viewPos = viewPos;\n v_viewNormal = normal_view;\n\n gl_Position = projectionMatrix * vec4(viewPos, 1.0);\n}\n`, \"Phong/Toon/Cel - Vertex shader\", 500)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":222,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":615,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":643,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"___\n## THREE.js Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":30,"value":"meshObj = {\n const geometry = await createGeometry(geometryType, detailLevel);\n if (!geometry) return null;\n\n if (shadingMode === \"FLAT\") {\n geometry.computeVertexNormals();\n geometry.normalizeNormals();\n }\n\n const obj = new THREE.Mesh(geometry, shadingMaterialMap[shadingMode]);\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1558,"value":"wireFrameObj = {\n const geometry = await createGeometry(geometryType, detailLevel);\n if (!geometry) return null;\n\n const material = new THREE.MeshBasicMaterial({ color: 0xdfdfdf, wireframe: true });\n const wireframe = new THREE.Mesh(geometry, material);\n\n return wireframe;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x000000);\n if (helper[\"GridPlane\"]) {\n scene.add(grid);\n // scene.add(plane);\n }\n if (helper[\"Wireframe\"]) {\n scene.add(wireFrameObj);\n }\n scene.add(meshObj);\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1639,"value":"mutable oldCamera = null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1632,"value":"mutable target = new THREE.Vector3(0, 0, 0);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"camera = {\n const aspect = width / height\n\n const oldCam = mutable oldCamera;\n const oldPos = oldCam ? oldCam.position.clone() : new THREE.Vector3(0, 0, 3);\n const oldTarget = target;\n\n let cam;\n if (cameraType === \"PERSPECTIVE\") {\n const fov = 50;\n cam = new THREE.PerspectiveCamera(fov, aspect, 0.01, 100);\n } else {\n const frustumHeight = 2;\n const frustumWidth = frustumHeight * aspect;\n cam = new THREE.OrthographicCamera(\n -frustumWidth / 2, frustumWidth / 2,\n frustumHeight / 2, -frustumHeight / 2,\n -100, 100);\n }\n\n cam.position.copy(oldPos);\n cam.lookAt(oldTarget);\n\n mutable oldCamera = cam;\n\n return cam;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"renderer = {\n const canvas = document.createElement(\"canvas\");\n const renderer = new THREE.WebGLRenderer({ canvas, context: canvas.getContext(\"webgl2\") });\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1057,"value":"controls = {\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n controls.target.copy(mutable target);\n controls.enableDamping = true;\n controls.dampingFactor = 0.15;\n controls.rotateSpeed = 0.4;\n controls.addEventListener(\"change\", () => {\n mutable target.copy(controls.target); // sync to global target\n renderer.render(scene, camera)\n });\n invalidation.then(() => {\n controls.dispose();\n renderer.dispose();\n });\n return controls;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":294,"value":"___\n## Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":418,"value":"// Continuously updates\n{\n while (true) {\n controls.update();\n renderer.render(scene, camera);\n // meshObj.rotation.y += 0.001;\n yield null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":302,"value":"width = 800;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":306,"value":"height = 600;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":790,"value":"ambi_enable = {\n return lightingComponents[\"AMBI\"];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":780,"value":"diff_enable = {\n return lightingComponents[\"DIFF\"];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":783,"value":"spec_enable = {\n return lightingComponents[\"SPEC\"];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":795,"value":"fres_enable = {\n return lightingComponents[\"FRES\"];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":300,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.130.0/build/three.min.js\");\n await require(\"three@0.130.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n await require(\"three@0.130.0/examples/js/loaders/OBJLoader.js\").catch(() => {});\n await require(\"three@0.130.0/examples/js/utils/BufferGeometryUtils.js\").catch(() => {});\n await require(\"three@0.130.0/examples/js/geometries/TeapotGeometry.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":572,"value":"loadAndNormalizeOBJ = async (objText) => {\n const objLoader = new THREE.OBJLoader;\n const object = objLoader.parse(objText);\n\n let geo = null;\n object.traverse((child) => {\n if (child.isMesh && child.geometry) {\n geo = child.geometry;\n }\n });\n\n geo.computeBoundingBox();\n const box = geo.boundingBox;\n\n const center = new THREE.Vector3();\n box.getCenter(center);\n geo.translate(-center.x, -center.y, -center.z);\n\n const size = new THREE.Vector3();\n box.getSize(size);\n const maxDimension = Math.max(size.x, size.y, size.z);\n const scaleFactor = 2.0 / maxDimension;\n geo.scale(scaleFactor, scaleFactor, scaleFactor);\n\n geo = THREE.BufferGeometryUtils.mergeVertices(geo, 0.015);\n geo.computeVertexNormals();\n\n return geo;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1448,"value":"async function createGeometry(geometryType, detailLevel) {\n switch (geometryType) {\n case \"Icosahedron\":\n return new THREE.IcosahedronGeometry(1, detailLevel);\n case \"Torus\":\n return new THREE.TorusGeometry(0.8, 0.2, detailLevel * 2 + 6, detailLevel * 6 + 12);\n case \"TorusKnot\":\n return new THREE.TorusKnotGeometry(0.6, 0.1, detailLevel * 20 + 80, detailLevel * 2 + 6, 3, 5);\n case \"Cube\":\n return new THREE.BoxGeometry(1.2, 1.2, 1.2, detailLevel + 1, detailLevel + 1, detailLevel + 1);\n case \"Teapot\":\n return new THREE.TeapotGeometry(0.5, detailLevel + 4);\n case \"Bunny\":\n return await stanfordBunnyGeometry;\n case \"Lucy\":\n return await lucyGeometry;\n default:\n console.warn(\"Unknown geometry type:\", geometryType);\n return null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":948,"value":"shadingMaterialMap = {\n return {\n GOURAUD: gouraudMaterial,\n PHONG: phongMaterial,\n FLAT: flatMaterial,\n TOON: toonMaterial,\n CEL: celMaterial,\n NORMAL: meshNormalMaterial,\n }\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":942,"value":"plane = {\n const geometry = new THREE.PlaneGeometry( 20, 20, 40, 40 );\n const planeMesh = new THREE.Mesh( geometry, shadingMaterialMap[shadingMode] );\n planeMesh.rotation.x = -Math.PI / 2;\n planeMesh.position.set( 0, -1.6, 0);\n return planeMesh;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":936,"value":"grid = {\n const gridHelper = new THREE.GridHelper( 20, 40 ); // size and divisions\n gridHelper.rotation.y = Math.PI / 2;\n gridHelper.position.set( 0, -1.6, 0);\n return gridHelper;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":563,"value":"stanfordBunnyGeometry = loadAndNormalizeOBJ(await FileAttachment(\"stanford-bunny.obj\").text());","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":740,"value":"lucyGeometry = loadAndNormalizeOBJ(await FileAttachment(\"lucy.obj\").text());","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":247,"value":"import { mdGLSL_toggle, style } from \"@vidi-intro-graphics/resources\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1839,"value":"style;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 2f:"$2e:body"