3d-spinner 0.9.4 → 0.9.5

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

@@ -8,15 +8,56 @@ const DEFAULTS = {
 function clamp01(value) {
     return Math.min(1, Math.max(0, value));
 }
+function clamp255(value) {
+    return Math.round(Math.min(255, Math.max(0, value)));
+}
 /**
- * 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.
+ * 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 function shadeColor(normal, color, light) {
+export 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)];
+}
+/**
+ * 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 function shadeColor(normal, color, light, surface) {
+    const [r, g, b] = shade(normal, color, light, surface);
+    return `rgb(${r}, ${g}, ${b})`;
 }
 /** A single directional light with an ambient term, used for flat shading. */
 export class Light {
@@ -29,7 +70,7 @@ export class Light {
         };
     }
     /** 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);
     }
 }

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

@@ -1,16 +1,49 @@
 import type { Vec3 } from "./math.js";
+/**
+ * Surface response of a face, derived from Wavefront MTL properties. All fields
+ * are optional; a face with no material is flat-shaded from its `color` alone,
+ * exactly as before materials existed.
+ */
+export interface Material {
+    /**
+     * Specular reflectivity (`Ks`) as linear `0..1` RGB. Drives the color and
+     * strength of the highlight. Omit or `[0,0,0]` for a matte surface.
+     */
+    specular?: [number, number, number];
+    /**
+     * Specular exponent (`Ns`, Wavefront range `0..1000`). Higher is a tighter,
+     * glossier highlight; lower is broad and soft. Ignored without `specular`.
+     */
+    shininess?: number;
+    /**
+     * Emissive color (`Ke`) as linear `0..1` RGB, added on top of shading so the
+     * face appears self-lit. Omit or `[0,0,0]` for no self-illumination.
+     */
+    emissive?: [number, number, number];
+}
 /** A single flat polygon: indices into the mesh `vertices` plus a base color. */
 export interface Face {
     /** Vertex indices, wound counter-clockwise when viewed from outside. */
     indices: number[];
     /** Base CSS color, for example `"#3b82f6"`. Shading is applied on top of it. */
     color: string;
+    /**
+     * Optional surface material (specular, shininess, emissive) from an MTL
+     * file. When absent the face is flat Lambert-shaded from `color`.
+     */
+    material?: Material;
 }
 /** Geometry: a list of vertices and the colored faces that connect them. */
 export interface Mesh {
     vertices: Vec3[];
     faces: Face[];
 }
+/**
+ * Assign one {@link Material} to every face of a mesh, in place, and return it.
+ * A no-op when `material` is omitted. Shape builders use this to apply a uniform
+ * surface material (specular, shininess, emissive) across all their faces.
+ */
+export declare function attachMaterial(mesh: Mesh, material?: Material): Mesh;
 /** Draw only outward-facing transparent surfaces. */
 export interface OneSidedTransparency {
     mode: "one-sided";

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

@@ -1,3 +1,15 @@
+/**
+ * Assign one {@link Material} to every face of a mesh, in place, and return it.
+ * A no-op when `material` is omitted. Shape builders use this to apply a uniform
+ * surface material (specular, shininess, emissive) across all their faces.
+ */
+export function attachMaterial(mesh, material) {
+    if (material) {
+        for (const face of mesh.faces)
+            face.material = material;
+    }
+    return mesh;
+}
 /** Create a {@link Transform} with sensible defaults (origin, no rotation). */
 export function transform(init) {
     return {

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

@@ -80,8 +80,8 @@ export { starTexture } from "./textures/dynamic/star.js";
 export { shineTexture } from "./textures/dynamic/shine.js";
 export { streakTexture } from "./textures/dynamic/streak.js";
 export { expandToTriangles } from "./core/geometry.js";
-export type { Mesh, Face, Transform, Transparency, OneSidedTransparency, TwoSidedTransparency, } from "./core/mesh.js";
-export { transform } from "./core/mesh.js";
+export type { Mesh, Face, Material, Transform, Transparency, OneSidedTransparency, TwoSidedTransparency, } from "./core/mesh.js";
+export { transform, attachMaterial } from "./core/mesh.js";
 export type { Backend, Renderer, RendererFactory, RenderFrame, RenderItem, RendererOptions, } from "./renderer.js";
 export { orderRenderItems } from "./renderer.js";
 export { type Vec3, vec3, subtract, cross, dot, scale, normalize, } from "./core/math.js";

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

@@ -171,6 +171,6 @@ export { starTexture } from "./textures/dynamic/star.js";
 export { shineTexture } from "./textures/dynamic/shine.js";
 export { streakTexture } from "./textures/dynamic/streak.js";
 export { expandToTriangles } from "./core/geometry.js";
-export { transform } from "./core/mesh.js";
+export { transform, attachMaterial } from "./core/mesh.js";
 export { orderRenderItems } from "./renderer.js";
 export { vec3, subtract, cross, dot, scale, normalize, } from "./core/math.js";

package/dist/engines/little-3d-engine/loaders/obj.d.ts

@@ -10,8 +10,9 @@ export interface ObjOptions {
     /** Contents of an `.mtl` file referenced by the OBJ. */
     mtl?: string;
     /**
-     * Use MTL diffuse (`Kd`) values for faces with matching `usemtl`
-     * statements. Default `false`.
+     * Use MTL material values for faces with matching `usemtl` statements: the
+     * diffuse color (`Kd`) becomes the face color, and specular (`Ks`/`Ns`) and
+     * emissive (`Ke`) become the face {@link Material}. Default `false`.
      */
     useMtlColors?: boolean;
 }
@@ -21,12 +22,12 @@ export interface ObjOptions {
  * Reads `v` vertex positions and `f` faces (triangles, quads, or n-gons, in
  * `v`, `v/vt`, `v/vt/vn`, or `v//vn` form, with 1-based or negative indices).
  * Normals (`vn`) and texture coordinates (`vt`) are ignored - the engine
- * computes a flat normal per face. Material names can select diffuse colors
- * from supplied MTL text; groups and other statements are ignored. Face
- * winding is preserved as-is; the engine expects CCW winding as seen from
- * outside.
+ * computes a flat normal per face. Material names can select the diffuse color
+ * (`Kd`) and surface material (specular `Ks`/`Ns`, emissive `Ke`) from supplied
+ * MTL text; groups and other statements are ignored. Face winding is preserved
+ * as-is; the engine expects CCW winding as seen from outside.
  *
  * @param text Contents of an `.obj` file.
- * @param options Face palette and optional MTL diffuse colors.
+ * @param options Face palette and optional MTL materials.
  */
 export declare function parseObj(text: string, options?: ObjOptions): Mesh;

package/dist/engines/little-3d-engine/loaders/obj.js

@@ -1,31 +1,82 @@
 const DEFAULT_COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
+function clamp01(value) {
+    return Math.min(1, Math.max(0, value));
+}
 function channelToHex(value) {
     const channel = Number.parseFloat(value);
     if (!Number.isFinite(channel))
         return undefined;
-    return Math.round(Math.min(1, Math.max(0, channel)) * 255)
+    return Math.round(clamp01(channel) * 255)
         .toString(16)
         .padStart(2, "0");
 }
-function parseMtlColors(text) {
-    const colors = new Map();
-    let material;
+/** Parse an `Ks`/`Ke`-style RGB triple into clamped `0..1` channels. */
+function parseRgb(parts) {
+    const channels = parts.slice(1, 4).map(Number.parseFloat);
+    if (channels.length !== 3 || !channels.every(Number.isFinite))
+        return undefined;
+    return [clamp01(channels[0]), clamp01(channels[1]), clamp01(channels[2])];
+}
+/** Fold specular/shininess/emissive into a {@link Material}, or `undefined`. */
+function toMaterial(surface) {
+    const material = {};
+    if (surface.specular)
+        material.specular = surface.specular;
+    if (surface.shininess !== undefined)
+        material.shininess = surface.shininess;
+    if (surface.emissive)
+        material.emissive = surface.emissive;
+    return Object.keys(material).length > 0 ? material : undefined;
+}
+/**
+ * Parse MTL text into a map of material name to its color and surface material.
+ * Reads `Kd` (diffuse color), `Ks` (specular), `Ns` (shininess), and `Ke`
+ * (emissive); other statements are ignored.
+ */
+function parseMtl(text) {
+    const materials = new Map();
+    const surfaces = new Map();
+    let name;
     for (const line of text.split("\n")) {
         const trimmed = line.trim();
         if (trimmed === "" || trimmed.startsWith("#"))
             continue;
         const parts = trimmed.split(/\s+/);
-        if (parts[0] === "newmtl") {
-            material = parts.slice(1).join(" ");
+        const keyword = parts[0];
+        if (keyword === "newmtl") {
+            name = parts.slice(1).join(" ");
+            if (name && !materials.has(name)) {
+                materials.set(name, {});
+                surfaces.set(name, {});
+            }
+            continue;
         }
-        else if (parts[0] === "Kd" && material) {
+        if (!name)
+            continue;
+        const entry = materials.get(name);
+        const surface = surfaces.get(name);
+        if (keyword === "Kd") {
             const channels = parts.slice(1, 4).map(channelToHex);
             if (channels.length === 3 && channels.every((channel) => channel !== undefined)) {
-                colors.set(material, `#${channels.join("")}`);
+                entry.color = `#${channels.join("")}`;
             }
         }
+        else if (keyword === "Ks") {
+            surface.specular = parseRgb(parts);
+        }
+        else if (keyword === "Ns") {
+            const ns = Number.parseFloat(parts[1]);
+            if (Number.isFinite(ns))
+                surface.shininess = Math.max(0, ns);
+        }
+        else if (keyword === "Ke") {
+            surface.emissive = parseRgb(parts);
+        }
+    }
+    for (const [key, surface] of surfaces) {
+        materials.get(key).material = toMaterial(surface);
     }
-    return colors;
+    return materials;
 }
 function resolveIndex(token, vertexCount) {
     const n = parseInt(token, 10);
@@ -37,18 +88,18 @@ function resolveIndex(token, vertexCount) {
  * Reads `v` vertex positions and `f` faces (triangles, quads, or n-gons, in
  * `v`, `v/vt`, `v/vt/vn`, or `v//vn` form, with 1-based or negative indices).
  * Normals (`vn`) and texture coordinates (`vt`) are ignored - the engine
- * computes a flat normal per face. Material names can select diffuse colors
- * from supplied MTL text; groups and other statements are ignored. Face
- * winding is preserved as-is; the engine expects CCW winding as seen from
- * outside.
+ * computes a flat normal per face. Material names can select the diffuse color
+ * (`Kd`) and surface material (specular `Ks`/`Ns`, emissive `Ke`) from supplied
+ * MTL text; groups and other statements are ignored. Face winding is preserved
+ * as-is; the engine expects CCW winding as seen from outside.
  *
  * @param text Contents of an `.obj` file.
- * @param options Face palette and optional MTL diffuse colors.
+ * @param options Face palette and optional MTL materials.
  */
 export function parseObj(text, options = {}) {
     const colors = options.colors ?? DEFAULT_COLORS;
-    const materialColors = options.useMtlColors && options.mtl
-        ? parseMtlColors(options.mtl)
+    const materials = options.useMtlColors && options.mtl
+        ? parseMtl(options.mtl)
         : undefined;
     const vertices = [];
     const faces = [];
@@ -76,10 +127,13 @@ export function parseObj(text, options = {}) {
                 indices.push(resolveIndex(vertexToken, vertices.length));
             }
             if (indices.length >= 3) {
-                const mtlColor = material ? materialColors?.get(material) : undefined;
-                const color = mtlColor
-                    ?? (materialColors ? (colors[0] ?? "#888888") : colors[faces.length % colors.length]);
-                faces.push({ indices, color });
+                const entry = material ? materials?.get(material) : undefined;
+                const color = entry?.color
+                    ?? (materials ? (colors[0] ?? "#888888") : colors[faces.length % colors.length]);
+                const face = { indices, color };
+                if (entry?.material)
+                    face.material = entry.material;
+                faces.push(face);
             }
         }
     }

package/dist/engines/little-3d-engine/renderers/canvas2d.js

@@ -60,9 +60,31 @@ export class Canvas2DRenderer {
                     depth += dot(d, d);
                 }
                 depth /= face.indices.length;
+                // Specular needs the view direction from the face toward the eye; use
+                // the face centroid. Emissive-only or plain faces skip that work.
+                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,
                 });

package/dist/engines/little-3d-engine/renderers/webgl.js

@@ -4,28 +4,51 @@ const VERTEX_SHADER = `#version 300 es
 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;
 }`;
 const 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);
 }`;
 function compile(gl, type, source) {
     const shader = gl.createShader(type);
@@ -68,9 +91,12 @@ export class WebGLRenderer {
             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"),
@@ -96,18 +122,20 @@ export class WebGLRenderer {
         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);
@@ -123,6 +151,7 @@ export class WebGLRenderer {
         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);

package/dist/engines/little-3d-engine/renderers/webgpu.js

@@ -7,6 +7,7 @@ struct Uniforms {
   model: mat4x4<f32>,
   toLight: vec4<f32>,
   params: vec4<f32>,
+  eye: vec4<f32>,
 };
 @group(0) @binding(0) var<uniform> u: Uniforms;
 
@@ -14,23 +15,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);
 }
 `;
 // Maps OpenGL clip space (z in -1..1) to WebGPU clip space (z in 0..1).
@@ -77,13 +95,15 @@ export class WebGPURenderer {
                 {
                     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 = {
@@ -99,7 +119,13 @@ export class WebGPURenderer {
             vertex: {
                 module,
                 entryPoint: "vs",
-                buffers: [vertexBuffer(0), vertexBuffer(1), vertexBuffer(2)],
+                buffers: [
+                    vertexBuffer(0),
+                    vertexBuffer(1),
+                    vertexBuffer(2),
+                    vertexBuffer(3),
+                    vertexBuffer(4, 4),
+                ],
             },
             fragment: {
                 module,
@@ -155,6 +181,8 @@ export class WebGPURenderer {
             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);
@@ -212,7 +240,7 @@ export class WebGPURenderer {
         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) => {
@@ -221,6 +249,7 @@ export class WebGPURenderer {
             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();
@@ -247,6 +276,8 @@ export class WebGPURenderer {
             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();
@@ -258,6 +289,8 @@ export class WebGPURenderer {
             mesh.position.destroy?.();
             mesh.normal.destroy?.();
             mesh.color.destroy?.();
+            mesh.emissive.destroy?.();
+            mesh.specular.destroy?.();
         }
         this.cache.clear();
         this.uniformBuffer?.destroy?.();

package/dist/engines/little-3d-engine/shapes/complex/plane.d.ts

@@ -1,3 +1,8 @@
-import type { Mesh } from "../../core/mesh.js";
-/** Build a low-poly plane mesh pointing along the positive X axis. */
-export declare function planeMesh(colors?: string[]): Mesh;
+import { type Material, type Mesh } from "../../core/mesh.js";
+/**
+ * Build a low-poly plane mesh pointing along the positive X axis.
+ *
+ * @param colors CSS colors cycled across faces. Defaults to a built-in palette.
+ * @param material Optional surface material applied to every face.
+ */
+export declare function planeMesh(colors?: string[], material?: Material): Mesh;

package/dist/engines/little-3d-engine/shapes/complex/plane.js

@@ -1,7 +1,13 @@
+import { attachMaterial } from "../../core/mesh.js";
 const DEFAULT_COLORS = ["#e0f2fe", "#7dd3fc", "#38bdf8", "#f8fafc"];
-/** Build a low-poly plane mesh pointing along the positive X axis. */
-export function planeMesh(colors = DEFAULT_COLORS) {
-    return {
+/**
+ * Build a low-poly plane mesh pointing along the positive X axis.
+ *
+ * @param colors CSS colors cycled across faces. Defaults to a built-in palette.
+ * @param material Optional surface material applied to every face.
+ */
+export function planeMesh(colors = DEFAULT_COLORS, material) {
+    return attachMaterial({
         vertices: [
             { x: 0.9, y: 0, z: 0 },
             { x: -0.2, y: 0, z: 0.82 },
@@ -29,5 +35,5 @@ export function planeMesh(colors = DEFAULT_COLORS) {
             { indices: [3, 6, 8], color: colors[0] ?? DEFAULT_COLORS[0] },
             { indices: [3, 8, 6], color: colors[1] ?? DEFAULT_COLORS[1] },
         ],
-    };
+    }, material);
 }

package/dist/engines/little-3d-engine/shapes/primitives/cube.d.ts

@@ -1,9 +1,10 @@
-import type { Mesh } from "../../core/mesh.js";
+import { type Material, type Mesh } from "../../core/mesh.js";
 /**
  * Build a cube mesh centered on the origin.
  *
  * @param size Edge length. Defaults to `1`.
  * @param colors Six CSS colors, one per face (front, back, top, bottom, right, left).
  *   Defaults to a built-in palette.
+ * @param material Optional surface material applied to every face.
  */
-export declare function cube(size?: number, colors?: string[]): Mesh;
+export declare function cube(size?: number, colors?: string[], material?: Material): Mesh;

package/dist/engines/little-3d-engine/shapes/primitives/cube.js

@@ -1,3 +1,4 @@
+import { attachMaterial } from "../../core/mesh.js";
 const DEFAULT_COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
 /**
  * Build a cube mesh centered on the origin.
@@ -5,8 +6,9 @@ const DEFAULT_COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "
  * @param size Edge length. Defaults to `1`.
  * @param colors Six CSS colors, one per face (front, back, top, bottom, right, left).
  *   Defaults to a built-in palette.
+ * @param material Optional surface material applied to every face.
  */
-export function cube(size = 1, colors = DEFAULT_COLORS) {
+export function cube(size = 1, colors = DEFAULT_COLORS, material) {
     const h = size / 2;
     const vertices = [
         { x: -h, y: -h, z: h },
@@ -26,5 +28,5 @@ export 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);
 }