Shading on blog https://jpcharalambosh.co/tags/shading/ Recent content in Shading on blog blog https://jpcharalambosh.co/papermod-cover.png https://jpcharalambosh.co/papermod-cover.png Hugo en Thu, 09 Apr 2026 15:52:34 -0500 Toon shading https://jpcharalambosh.co/posts/toon/ Thu, 09 Apr 2026 15:52:34 -0500 https://jpcharalambosh.co/posts/toon/ <blockquote> <p>Toon shading, or <a href="https://en.wikipedia.org/wiki/Cel_shading">cel shading</a>, gives 3D geometry a flat, cartoon-like look by quantizing diffuse reflection into a finite number of discrete <code>shades</code>. In this p5.js v2 version the shader is written as a <a href="https://beta.p5js.org/reference/p5/basematerialshader/"><code>baseMaterialShader().modify()</code></a> hook using the <a href="https://beta.p5js.org/tutorials/intro-to-p5-strands/">p5.strands</a> DSL — no raw GLSL strings, no hand-written vertex shader. <a href="https://github.com/VisualComputing/p5.tree"><code>createPanel</code></a> wires the color and shades controls to the shader automatically each frame.</p> </blockquote> <iframe id='p5-0' style='border:none; display:block; width:0; height:0;' srcdoc=" <!DOCTYPE html> <html> <head> <style>body{margin:0;padding:0;overflow:hidden}</style> <script src='https://cdn.jsdelivr.net/npm/p5@2.2.3/lib/p5.min.js'></script> <script src='https://cdn.jsdelivr.net/npm/p5.tree/dist/p5.tree.min.js'></script> <script> &#39;use strict&#39; let models, modelsDisplayed let toon, panel const depth = 0.4 function setup() { createCanvas(600, 400, WEBGL) panel = createPanel({ u_shades: { min: 1, max: 10, value: 5, step: 1, label: &#39;shades&#39; }, u_tint: { value: &#39;#ffd700&#39;, label: &#39;tint&#39; } }, { x: 10, y: 10, labels: true, color: &#39;white&#39; }) toon = baseMaterialShader().modify({ uniforms: { &#39;float u_shades&#39;: 5, &#39;vec3 u_tint&#39;: [1, 0.84, 0], &#39;vec3 u_lightDir&#39;: [0, 0, 1], &#39;vec3 u_color&#39;: [1, 1, 1] }, &#39;vec4 combineColors&#39;: `(ColorComponents components) { float intensity = max(0.0, dot(normalize(vNormal), normalize(u_lightDir))); float shadeSize = 1.0 / clamp(u_shades, 1.0, 10.0); float k = floor(intensity / shadeSize) * shadeSize; k = max(k, shadeSize * 0.5); return vec4(k * u_tint * u_color, 1.0); }` }) colorMode(RGB, 1) noStroke() setAttributes(&#39;antialias&#39;, true) document.oncontextmenu = () =&gt; false const trange = 200 models = [] for (let i = 0; i &lt; 100; i&#43;&#43;) { models.push({ position: createVector( (random() * 2 - 1) * trange, (random() * 2 - 1) * trange, (random() * 2 - 1) * trange ), angle: random(0, TWO_PI), axis: p5.Vector.random3D(), size: random() * 50 &#43; 16, color: [random(), random(), random()] }) } modelsDisplayed = createSlider(1, models.length, int(models.length / 2), 1) modelsDisplayed.position(width - 125, 15) modelsDisplayed.style(&#39;width&#39;, &#39;120px&#39;) } function draw() { orbitControl() background(&#39;#1C1D1F&#39;) push() stroke(&#39;green&#39;) axes({ size: 175 }) grid({ size: 175 }) pop() const lx = (mouseX / width - 0.5) * 2 const ly = (mouseY / height - 0.5) * 2 const len = Math.sqrt(lx*lx &#43; ly*ly &#43; depth*depth) const tv = panel.u_tint.value() shader(toon) toon.setUniform(&#39;u_lightDir&#39;, [lx/len, ly/len, depth/len]) toon.setUniform(&#39;u_shades&#39;, panel.u_shades.value()) toon.setUniform(&#39;u_tint&#39;, [tv[0], tv[1], tv[2]]) noStroke() for (let i = 0; i &lt; modelsDisplayed.value(); i&#43;&#43;) { toon.setUniform(&#39;u_color&#39;, models[i].color) push() translate(models[i].position) rotate(models[i].angle, models[i].axis) const r = models[i].size / 2 if (i % 3 === 0) cone(r) else if (i % 3 === 1) sphere(r) else torus(r, r / 4) pop() } resetShader() } function mouseWheel() { return false } </script> <script> (function() { var t = setInterval(function() { var c = document.querySelector('canvas') if (c && c.offsetWidth > 0) { clearInterval(t) window.parent.postMessage({ type: 'p5resize', id: 'p5-0', w: c.offsetWidth, h: c.offsetHeight }, '*') } }, 100) })() </script> </head> <body></body> </html> " ></iframe> <script> window.addEventListener('message', function(e) { if (e.data && e.data.type === 'p5resize' && e.data.id === 'p5-0') { var f = document.getElementById('p5-0') if (f) { f.style.width = e.data.w + 'px'; f.style.height = e.data.h + 'px' } } }) </script> <hr> <h1 id="toon-shader">Toon shader</h1> <p>The <code>combineColors</code> hook in <code>baseMaterialShader().modify()</code> receives the eye-space <code>vNormal</code> varying directly — no vertex shader boilerplate required. Diffuse intensity is the dot product of the surface normal and the (normalized) light direction; it is then snapped into discrete bands to produce the cel-shading look.</p>