3d-spinner 0.9.4 → 0.9.5

package/dist/cjs/prefabs/prefabs.cjs

@@ -136,7 +136,10 @@ function expandToTriangles(mesh) {
   const positions = new Float32Array(triangles * 9);
   const normals = new Float32Array(triangles * 9);
   const colors = new Float32Array(triangles * 9);
+  const emissives = new Float32Array(triangles * 9);
+  const speculars = new Float32Array(triangles * 12);
   let o = 0;
+  let so = 0;
   for (const face of mesh.faces) {
     const v0 = mesh.vertices[face.indices[0]];
     const v1 = mesh.vertices[face.indices[1]];
@@ -146,6 +149,15 @@ function expandToTriangles(mesh) {
     const cr = r / 255;
     const cg = g / 255;
     const cb = b / 255;
+    const emissive = face.material?.emissive;
+    const er = emissive ? emissive[0] : 0;
+    const eg = emissive ? emissive[1] : 0;
+    const eb = emissive ? emissive[2] : 0;
+    const specular = face.material?.specular;
+    const sr = specular ? specular[0] : 0;
+    const sg = specular ? specular[1] : 0;
+    const sb = specular ? specular[2] : 0;
+    const sn = specular ? face.material?.shininess ?? 32 : 1;
     for (let k = 1; k < face.indices.length - 1; k++) {
       const tri = [face.indices[0], face.indices[k], face.indices[k + 1]];
       for (const index of tri) {
@@ -159,11 +171,19 @@ function expandToTriangles(mesh) {
         colors[o] = cr;
         colors[o + 1] = cg;
         colors[o + 2] = cb;
+        emissives[o] = er;
+        emissives[o + 1] = eg;
+        emissives[o + 2] = eb;
+        speculars[so] = sr;
+        speculars[so + 1] = sg;
+        speculars[so + 2] = sb;
+        speculars[so + 3] = sn;
         o += 3;
+        so += 4;
       }
     }
   }
-  return { positions, normals, colors, count: positions.length / 3 };
+  return { positions, normals, colors, emissives, speculars, count: positions.length / 3 };
 }
 function midpoint(a, b) {
   return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2, z: (a.z + b.z) / 2 };
@@ -201,13 +221,42 @@ var init_geometry = __esm({
 function clamp01(value) {
   return Math.min(1, Math.max(0, value));
 }
-function shadeColor(normal, color, light) {
+function clamp255(value) {
+  return Math.round(Math.min(255, Math.max(0, value)));
+}
+function shade(normal, color, light, surface) {
   const lambert = Math.max(0, dot(normal, light.toLight));
   const brightness = clamp01(light.ambient + light.intensity * lambert);
-  const [r, g, b] = parseColor(color);
-  return `rgb(${Math.round(r * brightness)}, ${Math.round(g * brightness)}, ${Math.round(
-    b * brightness
-  )})`;
+  const [baseR, baseG, baseB] = parseColor(color);
+  let r = baseR * brightness;
+  let g = baseG * brightness;
+  let b = baseB * brightness;
+  const material = surface?.material;
+  const specular = material?.specular;
+  const viewDir = surface?.viewDir;
+  if (specular && viewDir && lambert > 0) {
+    const half = normalize({
+      x: light.toLight.x + viewDir.x,
+      y: light.toLight.y + viewDir.y,
+      z: light.toLight.z + viewDir.z
+    });
+    const shininess = material?.shininess ?? 32;
+    const highlight = Math.pow(Math.max(0, dot(normal, half)), shininess) * light.intensity * 255;
+    r += highlight * specular[0];
+    g += highlight * specular[1];
+    b += highlight * specular[2];
+  }
+  const emissive = material?.emissive;
+  if (emissive) {
+    r += emissive[0] * 255;
+    g += emissive[1] * 255;
+    b += emissive[2] * 255;
+  }
+  return [clamp255(r), clamp255(g), clamp255(b)];
+}
+function shadeColor(normal, color, light, surface) {
+  const [r, g, b] = shade(normal, color, light, surface);
+  return `rgb(${r}, ${g}, ${b})`;
 }
 var DEFAULTS2, Light;
 var init_light = __esm({
@@ -230,8 +279,8 @@ var init_light = __esm({
         };
       }
       /** Convenience wrapper around {@link shadeColor} using this light. */
-      shade(normal, color) {
-        return shadeColor(normal, color, this.params);
+      shade(normal, color, surface) {
+        return shadeColor(normal, color, this.params, surface);
       }
     };
   }
@@ -271,28 +320,51 @@ var init_webgl = __esm({
 in vec3 aPos;
 in vec3 aNormal;
 in vec3 aColor;
+in vec3 aEmissive;
+in vec4 aSpecular;
 uniform mat4 uViewProj;
 uniform mat4 uModel;
 out vec3 vNormal;
 out vec3 vColor;
+out vec3 vEmissive;
+out vec4 vSpecular;
+out vec3 vWorldPos;
 void main() {
   vNormal = mat3(uModel) * aNormal;
   vColor = aColor;
-  gl_Position = uViewProj * uModel * vec4(aPos, 1.0);
+  vEmissive = aEmissive;
+  vSpecular = aSpecular;
+  vec4 world = uModel * vec4(aPos, 1.0);
+  vWorldPos = world.xyz;
+  gl_Position = uViewProj * world;
 }`;
     FRAGMENT_SHADER = `#version 300 es
 precision mediump float;
 in vec3 vNormal;
 in vec3 vColor;
+in vec3 vEmissive;
+in vec4 vSpecular;
+in vec3 vWorldPos;
 uniform vec3 uToLight;
+uniform vec3 uEye;
 uniform float uIntensity;
 uniform float uAmbient;
 uniform float uOpacity;
 out vec4 fragColor;
 void main() {
-  float lambert = max(dot(normalize(vNormal), normalize(uToLight)), 0.0);
+  vec3 normal = normalize(vNormal);
+  vec3 toLight = normalize(uToLight);
+  float lambert = max(dot(normal, toLight), 0.0);
   float brightness = clamp(uAmbient + uIntensity * lambert, 0.0, 1.0);
-  fragColor = vec4(vColor * brightness, uOpacity);
+  vec3 lit = vColor * brightness;
+  if (lambert > 0.0) {
+    vec3 viewDir = normalize(uEye - vWorldPos);
+    vec3 halfVec = normalize(toLight + viewDir);
+    float highlight = pow(max(dot(normal, halfVec), 0.0), vSpecular.w) * uIntensity;
+    lit += highlight * vSpecular.xyz;
+  }
+  lit += vEmissive;
+  fragColor = vec4(lit, uOpacity);
 }`;
     WebGLRenderer = class {
       constructor(options = {}) {
@@ -313,9 +385,12 @@ void main() {
           aPos: gl.getAttribLocation(this.program, "aPos"),
           aNormal: gl.getAttribLocation(this.program, "aNormal"),
           aColor: gl.getAttribLocation(this.program, "aColor"),
+          aEmissive: gl.getAttribLocation(this.program, "aEmissive"),
+          aSpecular: gl.getAttribLocation(this.program, "aSpecular"),
           uViewProj: gl.getUniformLocation(this.program, "uViewProj"),
           uModel: gl.getUniformLocation(this.program, "uModel"),
           uToLight: gl.getUniformLocation(this.program, "uToLight"),
+          uEye: gl.getUniformLocation(this.program, "uEye"),
           uIntensity: gl.getUniformLocation(this.program, "uIntensity"),
           uAmbient: gl.getUniformLocation(this.program, "uAmbient"),
           uOpacity: gl.getUniformLocation(this.program, "uOpacity")
@@ -339,17 +414,19 @@ void main() {
         const data = expandToTriangles(mesh);
         const vao = gl.createVertexArray();
         gl.bindVertexArray(vao);
-        const attribute = (location, array) => {
+        const attribute = (location, array, size = 3) => {
           if (location < 0) return;
           const buffer = gl.createBuffer();
           gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
           gl.bufferData(gl.ARRAY_BUFFER, array, gl.STATIC_DRAW);
           gl.enableVertexAttribArray(location);
-          gl.vertexAttribPointer(location, 3, gl.FLOAT, false, 0, 0);
+          gl.vertexAttribPointer(location, size, gl.FLOAT, false, 0, 0);
         };
         attribute(loc.aPos, data.positions);
         attribute(loc.aNormal, data.normals);
         attribute(loc.aColor, data.colors);
+        attribute(loc.aEmissive, data.emissives);
+        attribute(loc.aSpecular, data.speculars, 4);
         gl.bindVertexArray(null);
         const result = { vao, count: data.count };
         this.cache.set(mesh, result);
@@ -364,6 +441,7 @@ void main() {
         gl.useProgram(this.program);
         gl.uniformMatrix4fv(loc.uViewProj, false, new Float32Array(frame.viewProjection));
         gl.uniform3f(loc.uToLight, frame.light.toLight.x, frame.light.toLight.y, frame.light.toLight.z);
+        gl.uniform3f(loc.uEye, frame.eye.x, frame.eye.y, frame.eye.z);
         gl.uniform1f(loc.uIntensity, frame.light.intensity);
         gl.uniform1f(loc.uAmbient, frame.light.ambient);
         gl.disable(gl.BLEND);
@@ -438,6 +516,7 @@ struct Uniforms {
   model: mat4x4<f32>,
   toLight: vec4<f32>,
   params: vec4<f32>,
+  eye: vec4<f32>,
 };
 @group(0) @binding(0) var<uniform> u: Uniforms;
 
@@ -445,23 +524,40 @@ struct VSOut {
   @builtin(position) position: vec4<f32>,
   @location(0) normal: vec3<f32>,
   @location(1) color: vec3<f32>,
+  @location(2) emissive: vec3<f32>,
+  @location(3) specular: vec4<f32>,
+  @location(4) worldPos: vec3<f32>,
 };
 
 @vertex
-fn vs(@location(0) pos: vec3<f32>, @location(1) normal: vec3<f32>, @location(2) color: vec3<f32>) -> VSOut {
+fn vs(@location(0) pos: vec3<f32>, @location(1) normal: vec3<f32>, @location(2) color: vec3<f32>, @location(3) emissive: vec3<f32>, @location(4) specular: vec4<f32>) -> VSOut {
   var out: VSOut;
   let m = mat3x3<f32>(u.model[0].xyz, u.model[1].xyz, u.model[2].xyz);
   out.normal = m * normal;
   out.color = color;
-  out.position = u.viewProj * u.model * vec4<f32>(pos, 1.0);
+  out.emissive = emissive;
+  out.specular = specular;
+  let world = u.model * vec4<f32>(pos, 1.0);
+  out.worldPos = world.xyz;
+  out.position = u.viewProj * world;
   return out;
 }
 
 @fragment
 fn fs(in: VSOut) -> @location(0) vec4<f32> {
-  let lambert = max(dot(normalize(in.normal), normalize(u.toLight.xyz)), 0.0);
+  let normal = normalize(in.normal);
+  let toLight = normalize(u.toLight.xyz);
+  let lambert = max(dot(normal, toLight), 0.0);
   let brightness = clamp(u.params.y + u.params.x * lambert, 0.0, 1.0);
-  return vec4<f32>(in.color * brightness, u.params.z);
+  var lit = in.color * brightness;
+  if (lambert > 0.0) {
+    let viewDir = normalize(u.eye.xyz - in.worldPos);
+    let halfVec = normalize(toLight + viewDir);
+    let highlight = pow(max(dot(normal, halfVec), 0.0), in.specular.w) * u.params.x;
+    lit = lit + highlight * in.specular.xyz;
+  }
+  lit = lit + in.emissive;
+  return vec4<f32>(lit, u.params.z);
 }
 `;
     CLIP_Z_FIX = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0.5, 0, 0, 0, 0.5, 1];
@@ -502,13 +598,15 @@ fn fs(in: VSOut) -> @location(0) vec4<f32> {
             {
               binding: 0,
               visibility: stage.VERTEX | stage.FRAGMENT,
-              buffer: { type: "uniform", hasDynamicOffset: true, minBindingSize: 160 }
+              buffer: { type: "uniform", hasDynamicOffset: true, minBindingSize: 176 }
             }
           ]
         });
-        const vertexBuffer = (location) => ({
-          arrayStride: 12,
-          attributes: [{ shaderLocation: location, offset: 0, format: "float32x3" }]
+        const vertexBuffer = (location, components = 3) => ({
+          arrayStride: components * 4,
+          attributes: [
+            { shaderLocation: location, offset: 0, format: `float32x${components}` }
+          ]
         });
         const pipelineLayout = device.createPipelineLayout({ bindGroupLayouts: [layout] });
         const blend = {
@@ -524,7 +622,13 @@ fn fs(in: VSOut) -> @location(0) vec4<f32> {
           vertex: {
             module: module2,
             entryPoint: "vs",
-            buffers: [vertexBuffer(0), vertexBuffer(1), vertexBuffer(2)]
+            buffers: [
+              vertexBuffer(0),
+              vertexBuffer(1),
+              vertexBuffer(2),
+              vertexBuffer(3),
+              vertexBuffer(4, 4)
+            ]
           },
           fragment: {
             module: module2,
@@ -577,6 +681,8 @@ fn fs(in: VSOut) -> @location(0) vec4<f32> {
           position: upload(data.positions),
           normal: upload(data.normals),
           color: upload(data.colors),
+          emissive: upload(data.emissives),
+          specular: upload(data.speculars),
           count: data.count
         };
         this.cache.set(mesh, result);
@@ -628,7 +734,7 @@ fn fs(in: VSOut) -> @location(0) vec4<f32> {
         const bindGroup = this.device.createBindGroup({
           layout,
           entries: [
-            { binding: 0, resource: { buffer: this.uniformBuffer, offset: 0, size: 160 } }
+            { binding: 0, resource: { buffer: this.uniformBuffer, offset: 0, size: 176 } }
           ]
         });
         draws.forEach((draw, i) => {
@@ -637,6 +743,7 @@ fn fs(in: VSOut) -> @location(0) vec4<f32> {
           data.set(draw.item.model, 16);
           data.set([frame.light.toLight.x, frame.light.toLight.y, frame.light.toLight.z, 0], 32);
           data.set([frame.light.intensity, frame.light.ambient, draw.opacity, 0], 36);
+          data.set([frame.eye.x, frame.eye.y, frame.eye.z, 0], 40);
           this.device.queue.writeBuffer(this.uniformBuffer, i * UNIFORM_STRIDE, data);
         });
         const encoder = this.device.createCommandEncoder();
@@ -663,6 +770,8 @@ fn fs(in: VSOut) -> @location(0) vec4<f32> {
           pass.setVertexBuffer(0, mesh.position);
           pass.setVertexBuffer(1, mesh.normal);
           pass.setVertexBuffer(2, mesh.color);
+          pass.setVertexBuffer(3, mesh.emissive);
+          pass.setVertexBuffer(4, mesh.specular);
           pass.draw(mesh.count);
         });
         pass.end();
@@ -674,6 +783,8 @@ fn fs(in: VSOut) -> @location(0) vec4<f32> {
           mesh.position.destroy?.();
           mesh.normal.destroy?.();
           mesh.color.destroy?.();
+          mesh.emissive.destroy?.();
+          mesh.specular.destroy?.();
         }
         this.cache.clear();
         this.uniformBuffer?.destroy?.();
@@ -756,9 +867,30 @@ var init_canvas2d = __esm({
               depth += dot(d, d);
             }
             depth /= face.indices.length;
+            let surface;
+            const material = face.material;
+            if (material) {
+              if (material.specular) {
+                let cx = 0;
+                let cy = 0;
+                let cz = 0;
+                for (const i of face.indices) {
+                  cx += world[i].x;
+                  cy += world[i].y;
+                  cz += world[i].z;
+                }
+                const inv = 1 / face.indices.length;
+                const viewDir = normalize(
+                  subtract(frame.eye, { x: cx * inv, y: cy * inv, z: cz * inv })
+                );
+                surface = { material, viewDir };
+              } else {
+                surface = { material };
+              }
+            }
             polygons.push({
               points,
-              color: shadeColor(normal, face.color, frame.light),
+              color: shadeColor(normal, face.color, frame.light, surface),
               depth,
               opacity: faceOpacity
             });
@@ -1624,6 +1756,12 @@ init_light();
 init_math();
 
 // src/engines/little-3d-engine/core/mesh.ts
+function attachMaterial(mesh, material) {
+  if (material) {
+    for (const face of mesh.faces) face.material = material;
+  }
+  return mesh;
+}
 function transform(init) {
   return {
     position: init?.position ?? { x: 0, y: 0, z: 0 },
@@ -1638,7 +1776,7 @@ init_light();
 
 // src/engines/little-3d-engine/shapes/primitives/cube.ts
 var DEFAULT_COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
-function cube(size = 1, colors = DEFAULT_COLORS) {
+function cube(size = 1, colors = DEFAULT_COLORS, material) {
   const h = size / 2;
   const vertices = [
     { x: -h, y: -h, z: h },
@@ -1658,12 +1796,12 @@ function cube(size = 1, colors = DEFAULT_COLORS) {
     { indices: [1, 5, 6, 2], color: colors[4 % colors.length] },
     { indices: [4, 0, 3, 7], color: colors[5 % colors.length] }
   ];
-  return { vertices, faces };
+  return attachMaterial({ vertices, faces }, material);
 }
 
 // src/engines/little-3d-engine/shapes/primitives/quad.ts
 var DEFAULT_COLORS2 = ["#3b82f6"];
-function quad(size = 1, colors = DEFAULT_COLORS2) {
+function quad(size = 1, colors = DEFAULT_COLORS2, material) {
   const s = size / 2;
   const vertices = [
     { x: -s, y: -s, z: 0 },
@@ -1671,12 +1809,15 @@ function quad(size = 1, colors = DEFAULT_COLORS2) {
     { x: s, y: s, z: 0 },
     { x: -s, y: s, z: 0 }
   ];
-  return { vertices, faces: [{ indices: [0, 1, 2, 3], color: colors[0] }] };
+  return attachMaterial(
+    { vertices, faces: [{ indices: [0, 1, 2, 3], color: colors[0] }] },
+    material
+  );
 }
 
 // src/engines/little-3d-engine/shapes/primitives/tetrahedron.ts
 var DEFAULT_COLORS3 = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b"];
-function tetrahedron(size = 1, colors = DEFAULT_COLORS3) {
+function tetrahedron(size = 1, colors = DEFAULT_COLORS3, material) {
   const s = size / 2;
   const vertices = [
     { x: s, y: s, z: s },
@@ -1690,12 +1831,12 @@ function tetrahedron(size = 1, colors = DEFAULT_COLORS3) {
     { indices: [0, 2, 3], color: colors[2 % colors.length] },
     { indices: [1, 3, 2], color: colors[3 % colors.length] }
   ];
-  return { vertices, faces };
+  return attachMaterial({ vertices, faces }, material);
 }
 
 // src/engines/little-3d-engine/shapes/primitives/pyramid.ts
 var DEFAULT_COLORS4 = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981"];
-function pyramid(size = 1, colors = DEFAULT_COLORS4) {
+function pyramid(size = 1, colors = DEFAULT_COLORS4, material) {
   const h = size / 2;
   const vertices = [
     { x: -h, y: -h, z: h },
@@ -1711,7 +1852,7 @@ function pyramid(size = 1, colors = DEFAULT_COLORS4) {
     { indices: [4, 2, 3], color: colors[3 % colors.length] },
     { indices: [4, 3, 0], color: colors[4 % colors.length] }
   ];
-  return { vertices, faces };
+  return attachMaterial({ vertices, faces }, material);
 }
 
 // src/engines/little-3d-engine/shapes/primitives/spheres/icosphere.ts
@@ -1754,8 +1895,11 @@ var SEED_FACES = [
   [8, 6, 7],
   [9, 8, 1]
 ];
-function icosphere(size = 1, detail = 1, colors = DEFAULT_COLORS5) {
-  return sphereFromTriangles(SEED_VERTICES, SEED_FACES, size, detail, colors);
+function icosphere(size = 1, detail = 1, colors = DEFAULT_COLORS5, material) {
+  return attachMaterial(
+    sphereFromTriangles(SEED_VERTICES, SEED_FACES, size, detail, colors),
+    material
+  );
 }
 
 // src/engines/little-3d-engine/shapes/primitives/spheres/octa-sphere.ts
@@ -1763,8 +1907,8 @@ init_geometry();
 
 // src/engines/little-3d-engine/shapes/complex/plane.ts
 var DEFAULT_COLORS6 = ["#e0f2fe", "#7dd3fc", "#38bdf8", "#f8fafc"];
-function planeMesh(colors = DEFAULT_COLORS6) {
-  return {
+function planeMesh(colors = DEFAULT_COLORS6, material) {
+  return attachMaterial({
     vertices: [
       { x: 0.9, y: 0, z: 0 },
       { x: -0.2, y: 0, z: 0.82 },
@@ -1792,7 +1936,7 @@ function planeMesh(colors = DEFAULT_COLORS6) {
       { indices: [3, 6, 8], color: colors[0] ?? DEFAULT_COLORS6[0] },
       { indices: [3, 8, 6], color: colors[1] ?? DEFAULT_COLORS6[1] }
     ]
-  };
+  }, material);
 }
 
 // src/engines/little-3d-engine/textures/dynamic/canvas-texture.ts
@@ -2252,6 +2396,7 @@ var REENTER_STAGGER_MS = 45;
 var CENTER_POP_OUT_AT = REENTER_MS + (MINIS - 1) * REENTER_STAGGER_MS + 150;
 var CENTER_POP_OUT_MS = 420;
 var PARKED = { x: 0, y: 0, z: 50 };
+var ORB_MATERIAL = { specular: [1, 1, 1], shininess: 28 };
 var CENTER_COLORS = ["#67e8f9", "#22d3ee", "#0ea5e9", "#38bdf8", "#7dd3fc"];
 var MINI_COLORS = [
   ["#e0f2fe", "#bae6fd", "#7dd3fc"],
@@ -2280,9 +2425,9 @@ var ChargedOrbAnimation = class {
       backend: this.backend,
       camera: { position: { x: 0, y: 0, z: CAMERA_Z } }
     });
-    this.center = engine.add(icosphere(1, 2, CENTER_COLORS), { scale: 0 });
+    this.center = engine.add(icosphere(1, 2, CENTER_COLORS, ORB_MATERIAL), { scale: 0 });
     for (let i = 0; i < MINIS; i++) {
-      const mesh = icosphere(1, 1, MINI_COLORS[i % MINI_COLORS.length]);
+      const mesh = icosphere(1, 1, MINI_COLORS[i % MINI_COLORS.length], ORB_MATERIAL);
       this.minis.push(engine.add(mesh, { scale: 0, transparency: { ...MINI_TRANSPARENCY } }));
     }
     this.engine = engine;
@@ -2944,6 +3089,7 @@ var WARP_ACCEL = 1e3;
 var TRAIL_OUTRO_MS = 1200;
 var TRANSPARENCY = { mode: "two-sided", opacity: 0.275 };
 var CAR_COLORS = ["#bae6fd", "#7dd3fc", "#38bdf8", "#0ea5e9", "#a5f3fc", "#e0f2fe"];
+var CAR_MATERIAL = { emissive: [0.1, 0.2, 0.3] };
 var WORLD_UP2 = { x: 0, y: 1, z: 0 };
 function clamp014(value) {
   return Math.max(0, Math.min(1, value));
@@ -3004,7 +3150,7 @@ var GhostTrainAnimation = class {
       backend: this.backend,
       camera: { position: { x: 0, y: 0, z: CAMERA_Z2 }, fov: FOV }
     });
-    const mesh = cube(1, CAR_COLORS);
+    const mesh = cube(1, CAR_COLORS, CAR_MATERIAL);
     for (let i = 0; i < MAX_CARS; i++) {
       this.cars.push(engine.add(mesh, { scale: 0, transparency: { ...TRANSPARENCY } }));
     }

package/dist/engines/little-3d-engine/core/geometry.d.ts

@@ -7,13 +7,26 @@ export interface TriangleData {
     positions: Float32Array;
     normals: Float32Array;
     colors: Float32Array;
+    /**
+     * Per-vertex emissive (`Ke`) as linear `0..1` RGB, duplicated across each
+     * face's vertices. Faces with no material emit `(0,0,0)`, so a GPU shader can
+     * add this term unconditionally and unlit meshes stay identical.
+     */
+    emissives: Float32Array;
+    /**
+     * Per-vertex specular packed as 4 floats: `Ks` linear RGB in `xyz` and the
+     * `Ns` shininess exponent in `w`. Faces with no specular emit `(0,0,0,1)`, so
+     * the highlight term multiplies to zero and unlit meshes stay identical.
+     * Note the stride is 4 floats here, not 3 like the other arrays.
+     */
+    speculars: Float32Array;
     /** Number of vertices (positions.length / 3). */
     count: number;
 }
 /**
  * Triangulate a mesh into a non-indexed soup where every vertex carries its
- * face's normal and color. This is what GPU backends upload to render flat
- * shading without per-primitive state.
+ * face's normal, color, and emissive. This is what GPU backends upload to
+ * render flat shading without per-primitive state.
  */
 export declare function expandToTriangles(mesh: Mesh): TriangleData;
 /**

package/dist/engines/little-3d-engine/core/geometry.js

@@ -13,8 +13,8 @@ export function parseColor(color) {
 }
 /**
  * Triangulate a mesh into a non-indexed soup where every vertex carries its
- * face's normal and color. This is what GPU backends upload to render flat
- * shading without per-primitive state.
+ * face's normal, color, and emissive. This is what GPU backends upload to
+ * render flat shading without per-primitive state.
  */
 export function expandToTriangles(mesh) {
     let triangles = 0;
@@ -23,7 +23,10 @@ export function expandToTriangles(mesh) {
     const positions = new Float32Array(triangles * 9);
     const normals = new Float32Array(triangles * 9);
     const colors = new Float32Array(triangles * 9);
+    const emissives = new Float32Array(triangles * 9);
+    const speculars = new Float32Array(triangles * 12);
     let o = 0;
+    let so = 0;
     for (const face of mesh.faces) {
         const v0 = mesh.vertices[face.indices[0]];
         const v1 = mesh.vertices[face.indices[1]];
@@ -33,6 +36,17 @@ export function expandToTriangles(mesh) {
         const cr = r / 255;
         const cg = g / 255;
         const cb = b / 255;
+        const emissive = face.material?.emissive;
+        const er = emissive ? emissive[0] : 0;
+        const eg = emissive ? emissive[1] : 0;
+        const eb = emissive ? emissive[2] : 0;
+        const specular = face.material?.specular;
+        const sr = specular ? specular[0] : 0;
+        const sg = specular ? specular[1] : 0;
+        const sb = specular ? specular[2] : 0;
+        // Ns only matters where Ks is non-zero; default the exponent to 1 (32 is
+        // the flat-shading default when a specular is present but Ns is omitted).
+        const sn = specular ? face.material?.shininess ?? 32 : 1;
         for (let k = 1; k < face.indices.length - 1; k++) {
             const tri = [face.indices[0], face.indices[k], face.indices[k + 1]];
             for (const index of tri) {
@@ -46,11 +60,19 @@ export function expandToTriangles(mesh) {
                 colors[o] = cr;
                 colors[o + 1] = cg;
                 colors[o + 2] = cb;
+                emissives[o] = er;
+                emissives[o + 1] = eg;
+                emissives[o + 2] = eb;
+                speculars[so] = sr;
+                speculars[so + 1] = sg;
+                speculars[so + 2] = sb;
+                speculars[so + 3] = sn;
                 o += 3;
+                so += 4;
             }
         }
     }
-    return { positions, normals, colors, count: positions.length / 3 };
+    return { positions, normals, colors, emissives, speculars, count: positions.length / 3 };
 }
 function midpoint(a, b) {
     return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2, z: (a.z + b.z) / 2 };

package/dist/engines/little-3d-engine/core/light.d.ts

@@ -1,4 +1,5 @@
 import { type Vec3 } from "./math.js";
+import type { Material } from "./mesh.js";
 /** Directional light configuration. */
 export interface LightOptions {
     /** Direction the light travels. Default points down-forward into the scene. */
@@ -16,10 +17,33 @@ export interface LightParams {
     ambient: number;
 }
 /**
- * Flat-shade a face: brighten its base `color` by how directly its `normal`
- * faces the light, floored at the ambient level. Returns an `rgb(...)` string.
+ * Per-face surface inputs for {@link shade}/{@link shadeColor} beyond the base
+ * color: its MTL {@link Material} and the direction from the face toward the
+ * camera. Both are needed for the specular highlight; without them shading
+ * falls back to flat Lambert plus any emissive term.
  */
-export declare function shadeColor(normal: Vec3, color: string, light: LightParams): string;
+export interface Surface {
+    /** MTL-derived specular/shininess/emissive for this face. */
+    material?: Material;
+    /** Unit vector from the face toward the eye, for the specular highlight. */
+    viewDir?: Vec3;
+}
+/**
+ * Shade a face and return `0..255` RGB channels.
+ *
+ * The diffuse term is flat Lambert: the base `color` brightened by how directly
+ * `normal` faces the light, floored at the ambient level. When a {@link Surface}
+ * supplies a specular material and a `viewDir`, a Blinn-Phong highlight (`Ks`
+ * tinted, tightened by `Ns`) is added; an emissive material (`Ke`) is always
+ * added on top. With no material this reduces exactly to the previous flat
+ * shading.
+ */
+export declare function shade(normal: Vec3, color: string, light: LightParams, surface?: Surface): [number, number, number];
+/**
+ * Shade a face and return an `rgb(...)` string. Thin wrapper over {@link shade};
+ * see it for the shading model. Passing no `surface` gives flat Lambert shading.
+ */
+export declare function shadeColor(normal: Vec3, color: string, light: LightParams, surface?: Surface): string;
 /** A single directional light with an ambient term, used for flat shading. */
 export declare class Light {
     readonly options: LightOptions;
@@ -27,5 +51,5 @@ export declare class Light {
     readonly params: LightParams;
     constructor(options?: Partial<LightOptions>);
     /** Convenience wrapper around {@link shadeColor} using this light. */
-    shade(normal: Vec3, color: string): string;
+    shade(normal: Vec3, color: string, surface?: Surface): string;
 }