Flat vs Gouraud

Two spheres: flat shading (one color per face) vs Gouraud shading (per-vertex, interpolated).

import * as EASEL from "easel";

const scene = new EASEL.Scene();
const camera = new EASEL.OrthographicCamera({
  left: -size * aspect, right: size * aspect,
  top: size, bottom: -size,
  near: 0.1, far: 100,
});

scene.add(new EASEL.AmbientLight(0xffffff, 0.3));
const dirLight = new EASEL.DirectionalLight(0xffffff, 0.9);
dirLight.position.set(3, 5, 4);
scene.add(dirLight);

const geo = new EASEL.SphereGeometry(1.4, 12, 8);

// Left: Flat - one lighting sample per face
const flat = new EASEL.Mesh(
  geo,
  new EASEL.LambertMaterial({ color: 0x44aa88, shading: EASEL.Shading.Flat }),
);
flat.position.x = -2.5;

// Right: Gouraud - per-vertex lighting, bilinearly interpolated
const gouraud = new EASEL.Mesh(
  geo,
  new EASEL.LambertMaterial({ color: 0x44aa88, shading: EASEL.Shading.Gouraud }),
);
gouraud.position.x = 2.5;