3d-spinner 0.9.3 → 0.9.5

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;
 }

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);