3d-spinner 0.9.0

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

@@ -0,0 +1,222 @@
+import { expandToTriangles, parseColor } from "../core/geometry.js";
+import { multiply } from "../core/math.js";
+const WGSL = `
+struct Uniforms {
+  viewProj: mat4x4<f32>,
+  model: mat4x4<f32>,
+  toLight: vec4<f32>,
+  params: vec4<f32>,
+};
+@group(0) @binding(0) var<uniform> u: Uniforms;
+
+struct VSOut {
+  @builtin(position) position: vec4<f32>,
+  @location(0) normal: vec3<f32>,
+  @location(1) color: vec3<f32>,
+};
+
+@vertex
+fn vs(@location(0) pos: vec3<f32>, @location(1) normal: vec3<f32>, @location(2) color: vec3<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);
+  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 brightness = clamp(u.params.y + u.params.x * lambert, 0.0, 1.0);
+  return vec4<f32>(in.color * brightness, 1.0);
+}
+`;
+// Maps OpenGL clip space (z in -1..1) to WebGPU clip space (z in 0..1).
+const CLIP_Z_FIX = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0.5, 0, 0, 0, 0.5, 1];
+const UNIFORM_STRIDE = 256;
+/** Hardware renderer using WebGPU: GPU transforms with a real depth buffer. */
+export class WebGPURenderer {
+    constructor(options = {}) {
+        this.uniformCapacity = 0;
+        this.depthSize = "";
+        this.destroyed = false;
+        this.cache = new Map();
+        if (options.background) {
+            const [r, g, b] = parseColor(options.background);
+            this.clearValue = { r: r / 255, g: g / 255, b: b / 255, a: 1 };
+            this.alphaMode = "opaque";
+        }
+        else {
+            this.clearValue = { r: 0, g: 0, b: 0, a: 0 };
+            this.alphaMode = "premultiplied";
+        }
+    }
+    async init(canvas) {
+        const gpu = navigator.gpu;
+        if (!gpu)
+            throw new Error("3d-spinner: WebGPU is not supported in this browser.");
+        const adapter = await gpu.requestAdapter();
+        if (!adapter)
+            throw new Error("3d-spinner: no WebGPU adapter is available.");
+        const device = await adapter.requestDevice();
+        if (this.destroyed) {
+            device.destroy?.();
+            return;
+        }
+        const context = canvas.getContext("webgpu");
+        if (!context)
+            throw new Error("3d-spinner: could not get a WebGPU canvas context.");
+        const format = gpu.getPreferredCanvasFormat();
+        context.configure({ device, format, alphaMode: this.alphaMode });
+        const module = device.createShaderModule({ code: WGSL });
+        const stage = globalThis.GPUShaderStage;
+        const layout = device.createBindGroupLayout({
+            entries: [
+                {
+                    binding: 0,
+                    visibility: stage.VERTEX | stage.FRAGMENT,
+                    buffer: { type: "uniform", hasDynamicOffset: true, minBindingSize: 160 },
+                },
+            ],
+        });
+        const vertexBuffer = (location) => ({
+            arrayStride: 12,
+            attributes: [{ shaderLocation: location, offset: 0, format: "float32x3" }],
+        });
+        this.pipeline = device.createRenderPipeline({
+            layout: device.createPipelineLayout({ bindGroupLayouts: [layout] }),
+            vertex: {
+                module,
+                entryPoint: "vs",
+                buffers: [vertexBuffer(0), vertexBuffer(1), vertexBuffer(2)],
+            },
+            fragment: { module, entryPoint: "fs", targets: [{ format }] },
+            primitive: { topology: "triangle-list", cullMode: "back", frontFace: "ccw" },
+            depthStencil: { format: "depth24plus", depthWriteEnabled: true, depthCompare: "less" },
+        });
+        this.canvas = canvas;
+        this.device = device;
+        this.context = context;
+    }
+    resize() {
+        this.ensureDepth();
+    }
+    ensureDepth() {
+        const canvas = this.canvas;
+        if (!this.device || !canvas)
+            return;
+        const width = Math.max(1, canvas.width);
+        const height = Math.max(1, canvas.height);
+        const key = `${width}x${height}`;
+        if (key === this.depthSize && this.depthTexture)
+            return;
+        this.depthTexture?.destroy?.();
+        this.depthTexture = this.device.createTexture({
+            size: { width, height },
+            format: "depth24plus",
+            usage: globalThis.GPUTextureUsage.RENDER_ATTACHMENT,
+        });
+        this.depthSize = key;
+    }
+    buffers(mesh) {
+        const cached = this.cache.get(mesh);
+        if (cached)
+            return cached;
+        const data = expandToTriangles(mesh);
+        const usage = globalThis.GPUBufferUsage.VERTEX | globalThis.GPUBufferUsage.COPY_DST;
+        const upload = (array) => {
+            const buffer = this.device.createBuffer({ size: array.byteLength, usage });
+            this.device.queue.writeBuffer(buffer, 0, array);
+            return buffer;
+        };
+        const result = {
+            position: upload(data.positions),
+            normal: upload(data.normals),
+            color: upload(data.colors),
+            count: data.count,
+        };
+        this.cache.set(mesh, result);
+        return result;
+    }
+    ensureUniformCapacity(items) {
+        if (items <= this.uniformCapacity && this.uniformBuffer)
+            return;
+        this.uniformBuffer?.destroy?.();
+        this.uniformBuffer = this.device.createBuffer({
+            size: Math.max(1, items) * UNIFORM_STRIDE,
+            usage: globalThis.GPUBufferUsage.UNIFORM | globalThis.GPUBufferUsage.COPY_DST,
+        });
+        this.uniformCapacity = items;
+    }
+    render(frame) {
+        if (this.destroyed || !this.device || !this.context || !this.pipeline)
+            return;
+        if (frame.width === 0 || frame.height === 0 || frame.items.length === 0)
+            return;
+        this.ensureDepth();
+        this.ensureUniformCapacity(frame.items.length);
+        const viewProj = multiply(CLIP_Z_FIX, frame.viewProjection);
+        const layout = this.pipeline.getBindGroupLayout(0);
+        const bindGroup = this.device.createBindGroup({
+            layout,
+            entries: [
+                { binding: 0, resource: { buffer: this.uniformBuffer, offset: 0, size: 160 } },
+            ],
+        });
+        frame.items.forEach((item, i) => {
+            const data = new Float32Array(UNIFORM_STRIDE / 4);
+            data.set(viewProj, 0);
+            data.set(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, 0, 0], 36);
+            this.device.queue.writeBuffer(this.uniformBuffer, i * UNIFORM_STRIDE, data);
+        });
+        const encoder = this.device.createCommandEncoder();
+        const pass = encoder.beginRenderPass({
+            colorAttachments: [
+                {
+                    view: this.context.getCurrentTexture().createView(),
+                    clearValue: this.clearValue,
+                    loadOp: "clear",
+                    storeOp: "store",
+                },
+            ],
+            depthStencilAttachment: {
+                view: this.depthTexture.createView(),
+                depthClearValue: 1,
+                depthLoadOp: "clear",
+                depthStoreOp: "store",
+            },
+        });
+        pass.setPipeline(this.pipeline);
+        frame.items.forEach((item, i) => {
+            const mesh = this.buffers(item.mesh);
+            pass.setBindGroup(0, bindGroup, [i * UNIFORM_STRIDE]);
+            pass.setVertexBuffer(0, mesh.position);
+            pass.setVertexBuffer(1, mesh.normal);
+            pass.setVertexBuffer(2, mesh.color);
+            pass.draw(mesh.count);
+        });
+        pass.end();
+        this.device.queue.submit([encoder.finish()]);
+    }
+    destroy() {
+        this.destroyed = true;
+        for (const mesh of this.cache.values()) {
+            mesh.position.destroy?.();
+            mesh.normal.destroy?.();
+            mesh.color.destroy?.();
+        }
+        this.cache.clear();
+        this.uniformBuffer?.destroy?.();
+        this.depthTexture?.destroy?.();
+        this.device?.destroy?.();
+        this.device = undefined;
+        this.context = undefined;
+        this.pipeline = undefined;
+        this.uniformBuffer = undefined;
+        this.depthTexture = undefined;
+        this.canvas = undefined;
+    }
+}

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

@@ -0,0 +1,11 @@
+import type { Mesh } from "../core/mesh.js";
+/**
+ * Build a cube-sphere (spherified cube) centered on the origin: each cube face
+ * is gridded and projected onto the sphere. Even, all-quad, no poles.
+ *
+ * @param size Diameter. Defaults to `1`.
+ * @param detail Subdivisions per cube face edge, `1` = simplest (6 quads).
+ *   Defaults to `1`.
+ * @param colors CSS colors cycled across faces. Defaults to a built-in palette.
+ */
+export declare function cubeSphere(size?: number, detail?: number, colors?: string[]): Mesh;

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

@@ -0,0 +1,50 @@
+const DEFAULT_COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
+// right x up == normal for each face, so generated quads wind CCW outward.
+const CUBE_FACES = [
+    { normal: [0, 0, 1], right: [1, 0, 0], up: [0, 1, 0] },
+    { normal: [0, 0, -1], right: [-1, 0, 0], up: [0, 1, 0] },
+    { normal: [1, 0, 0], right: [0, 0, -1], up: [0, 1, 0] },
+    { normal: [-1, 0, 0], right: [0, 0, 1], up: [0, 1, 0] },
+    { normal: [0, 1, 0], right: [1, 0, 0], up: [0, 0, -1] },
+    { normal: [0, -1, 0], right: [1, 0, 0], up: [0, 0, 1] },
+];
+/**
+ * Build a cube-sphere (spherified cube) centered on the origin: each cube face
+ * is gridded and projected onto the sphere. Even, all-quad, no poles.
+ *
+ * @param size Diameter. Defaults to `1`.
+ * @param detail Subdivisions per cube face edge, `1` = simplest (6 quads).
+ *   Defaults to `1`.
+ * @param colors CSS colors cycled across faces. Defaults to a built-in palette.
+ */
+export function cubeSphere(size = 1, detail = 1, colors = DEFAULT_COLORS) {
+    const r = size / 2;
+    const n = Math.max(1, Math.floor(detail));
+    const vertices = [];
+    const faces = [];
+    let ci = 0;
+    for (const face of CUBE_FACES) {
+        const base = vertices.length;
+        for (let i = 0; i <= n; i++) {
+            for (let j = 0; j <= n; j++) {
+                const u = -1 + (2 * i) / n;
+                const v = -1 + (2 * j) / n;
+                const x = face.normal[0] + u * face.right[0] + v * face.up[0];
+                const y = face.normal[1] + u * face.right[1] + v * face.up[1];
+                const z = face.normal[2] + u * face.right[2] + v * face.up[2];
+                const len = Math.hypot(x, y, z);
+                vertices.push({ x: (x / len) * r, y: (y / len) * r, z: (z / len) * r });
+            }
+        }
+        const idx = (i, j) => base + i * (n + 1) + j;
+        for (let i = 0; i < n; i++) {
+            for (let j = 0; j < n; j++) {
+                faces.push({
+                    indices: [idx(i, j), idx(i + 1, j), idx(i + 1, j + 1), idx(i, j + 1)],
+                    color: colors[ci++ % colors.length],
+                });
+            }
+        }
+    }
+    return { vertices, faces };
+}

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

@@ -0,0 +1,9 @@
+import 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.
+ */
+export declare function cube(size?: number, colors?: string[]): Mesh;

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

@@ -0,0 +1,30 @@
+const DEFAULT_COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
+/**
+ * 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.
+ */
+export function cube(size = 1, colors = DEFAULT_COLORS) {
+    const h = size / 2;
+    const vertices = [
+        { x: -h, y: -h, z: h },
+        { x: h, y: -h, z: h },
+        { x: h, y: h, z: h },
+        { x: -h, y: h, z: h },
+        { x: -h, y: -h, z: -h },
+        { x: h, y: -h, z: -h },
+        { x: h, y: h, z: -h },
+        { x: -h, y: h, z: -h },
+    ];
+    const faces = [
+        { indices: [0, 1, 2, 3], color: colors[0 % colors.length] },
+        { indices: [5, 4, 7, 6], color: colors[1 % colors.length] },
+        { indices: [3, 2, 6, 7], color: colors[2 % colors.length] },
+        { indices: [4, 5, 1, 0], color: colors[3 % colors.length] },
+        { indices: [1, 5, 6, 2], color: colors[4 % colors.length] },
+        { indices: [4, 0, 3, 7], color: colors[5 % colors.length] },
+    ];
+    return { vertices, faces };
+}

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

@@ -0,0 +1,11 @@
+import type { Mesh } from "../core/mesh.js";
+/**
+ * Build an icosphere (subdivided icosahedron) centered on the origin. Gives the
+ * most uniform triangle distribution of the sphere types.
+ *
+ * @param size Diameter. Defaults to `1`.
+ * @param detail Subdivision level, `1` = base icosahedron (20 faces). Each level
+ *   splits every triangle into four. Defaults to `1`.
+ * @param colors CSS colors cycled across faces. Defaults to a built-in palette.
+ */
+export declare function icosphere(size?: number, detail?: number, colors?: string[]): Mesh;

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

@@ -0,0 +1,51 @@
+import { sphereFromTriangles } from "../core/geometry.js";
+const DEFAULT_COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
+const T = (1 + Math.sqrt(5)) / 2;
+const SEED_VERTICES = [
+    { x: -1, y: T, z: 0 },
+    { x: 1, y: T, z: 0 },
+    { x: -1, y: -T, z: 0 },
+    { x: 1, y: -T, z: 0 },
+    { x: 0, y: -1, z: T },
+    { x: 0, y: 1, z: T },
+    { x: 0, y: -1, z: -T },
+    { x: 0, y: 1, z: -T },
+    { x: T, y: 0, z: -1 },
+    { x: T, y: 0, z: 1 },
+    { x: -T, y: 0, z: -1 },
+    { x: -T, y: 0, z: 1 },
+];
+const SEED_FACES = [
+    [0, 11, 5],
+    [0, 5, 1],
+    [0, 1, 7],
+    [0, 7, 10],
+    [0, 10, 11],
+    [1, 5, 9],
+    [5, 11, 4],
+    [11, 10, 2],
+    [10, 7, 6],
+    [7, 1, 8],
+    [3, 9, 4],
+    [3, 4, 2],
+    [3, 2, 6],
+    [3, 6, 8],
+    [3, 8, 9],
+    [4, 9, 5],
+    [2, 4, 11],
+    [6, 2, 10],
+    [8, 6, 7],
+    [9, 8, 1],
+];
+/**
+ * Build an icosphere (subdivided icosahedron) centered on the origin. Gives the
+ * most uniform triangle distribution of the sphere types.
+ *
+ * @param size Diameter. Defaults to `1`.
+ * @param detail Subdivision level, `1` = base icosahedron (20 faces). Each level
+ *   splits every triangle into four. Defaults to `1`.
+ * @param colors CSS colors cycled across faces. Defaults to a built-in palette.
+ */
+export function icosphere(size = 1, detail = 1, colors = DEFAULT_COLORS) {
+    return sphereFromTriangles(SEED_VERTICES, SEED_FACES, size, detail, colors);
+}

package/dist/engines/little-3d-engine/shapes/octa-sphere.d.ts

@@ -0,0 +1,10 @@
+import type { Mesh } from "../core/mesh.js";
+/**
+ * Build an octa-sphere (subdivided octahedron) centered on the origin.
+ *
+ * @param size Diameter. Defaults to `1`.
+ * @param detail Subdivision level, `1` = base octahedron (8 faces). Each level
+ *   splits every triangle into four. Defaults to `1`.
+ * @param colors CSS colors cycled across faces. Defaults to a built-in palette.
+ */
+export declare function octaSphere(size?: number, detail?: number, colors?: string[]): Mesh;

package/dist/engines/little-3d-engine/shapes/octa-sphere.js

@@ -0,0 +1,31 @@
+import { sphereFromTriangles } from "../core/geometry.js";
+const DEFAULT_COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
+const SEED_VERTICES = [
+    { x: 1, y: 0, z: 0 },
+    { x: -1, y: 0, z: 0 },
+    { x: 0, y: 1, z: 0 },
+    { x: 0, y: -1, z: 0 },
+    { x: 0, y: 0, z: 1 },
+    { x: 0, y: 0, z: -1 },
+];
+const SEED_FACES = [
+    [4, 0, 2],
+    [4, 2, 1],
+    [4, 1, 3],
+    [4, 3, 0],
+    [5, 2, 0],
+    [5, 1, 2],
+    [5, 3, 1],
+    [5, 0, 3],
+];
+/**
+ * Build an octa-sphere (subdivided octahedron) centered on the origin.
+ *
+ * @param size Diameter. Defaults to `1`.
+ * @param detail Subdivision level, `1` = base octahedron (8 faces). Each level
+ *   splits every triangle into four. Defaults to `1`.
+ * @param colors CSS colors cycled across faces. Defaults to a built-in palette.
+ */
+export function octaSphere(size = 1, detail = 1, colors = DEFAULT_COLORS) {
+    return sphereFromTriangles(SEED_VERTICES, SEED_FACES, size, detail, colors);
+}

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

@@ -0,0 +1,8 @@
+import type { Mesh } from "../core/mesh.js";
+/**
+ * Build a regular octahedron mesh centered on the origin.
+ *
+ * @param size Distance between opposite vertices. Defaults to `1`.
+ * @param colors Eight CSS colors, one per triangular face. Defaults to a built-in palette.
+ */
+export declare function octahedron(size?: number, colors?: string[]): Mesh;

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

@@ -0,0 +1,38 @@
+const DEFAULT_COLORS = [
+    "#3b82f6",
+    "#8b5cf6",
+    "#ec4899",
+    "#f59e0b",
+    "#10b981",
+    "#ef4444",
+    "#06b6d4",
+    "#eab308",
+];
+/**
+ * Build a regular octahedron mesh centered on the origin.
+ *
+ * @param size Distance between opposite vertices. Defaults to `1`.
+ * @param colors Eight CSS colors, one per triangular face. Defaults to a built-in palette.
+ */
+export function octahedron(size = 1, colors = DEFAULT_COLORS) {
+    const r = size / 2;
+    const vertices = [
+        { x: r, y: 0, z: 0 },
+        { x: -r, y: 0, z: 0 },
+        { x: 0, y: r, z: 0 },
+        { x: 0, y: -r, z: 0 },
+        { x: 0, y: 0, z: r },
+        { x: 0, y: 0, z: -r },
+    ];
+    const faces = [
+        { indices: [4, 0, 2], color: colors[0 % colors.length] },
+        { indices: [4, 2, 1], color: colors[1 % colors.length] },
+        { indices: [4, 1, 3], color: colors[2 % colors.length] },
+        { indices: [4, 3, 0], color: colors[3 % colors.length] },
+        { indices: [5, 2, 0], color: colors[4 % colors.length] },
+        { indices: [5, 1, 2], color: colors[5 % colors.length] },
+        { indices: [5, 3, 1], color: colors[6 % colors.length] },
+        { indices: [5, 0, 3], color: colors[7 % colors.length] },
+    ];
+    return { vertices, faces };
+}

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

@@ -0,0 +1,9 @@
+import type { Mesh } from "../core/mesh.js";
+/**
+ * Build a square pyramid mesh centered on the origin, base down.
+ *
+ * @param size Base edge length (also the height). Defaults to `1`.
+ * @param colors Five CSS colors: the square base, then the four triangular sides.
+ *   Defaults to a built-in palette.
+ */
+export declare function pyramid(size?: number, colors?: string[]): Mesh;

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

@@ -0,0 +1,26 @@
+const DEFAULT_COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981"];
+/**
+ * Build a square pyramid mesh centered on the origin, base down.
+ *
+ * @param size Base edge length (also the height). Defaults to `1`.
+ * @param colors Five CSS colors: the square base, then the four triangular sides.
+ *   Defaults to a built-in palette.
+ */
+export function pyramid(size = 1, colors = DEFAULT_COLORS) {
+    const h = size / 2;
+    const vertices = [
+        { x: -h, y: -h, z: h },
+        { x: h, y: -h, z: h },
+        { x: h, y: -h, z: -h },
+        { x: -h, y: -h, z: -h },
+        { x: 0, y: h, z: 0 },
+    ];
+    const faces = [
+        { indices: [0, 3, 2, 1], color: colors[0 % colors.length] },
+        { indices: [4, 0, 1], color: colors[1 % colors.length] },
+        { indices: [4, 1, 2], color: colors[2 % colors.length] },
+        { indices: [4, 2, 3], color: colors[3 % colors.length] },
+        { indices: [4, 3, 0], color: colors[4 % colors.length] },
+    ];
+    return { vertices, faces };
+}

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

@@ -0,0 +1,8 @@
+import type { Mesh } from "../core/mesh.js";
+/**
+ * Build a regular tetrahedron mesh centered on the origin.
+ *
+ * @param size Approximate diameter. Defaults to `1`.
+ * @param colors Four CSS colors, one per triangular face. Defaults to a built-in palette.
+ */
+export declare function tetrahedron(size?: number, colors?: string[]): Mesh;

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

@@ -0,0 +1,23 @@
+const DEFAULT_COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b"];
+/**
+ * Build a regular tetrahedron mesh centered on the origin.
+ *
+ * @param size Approximate diameter. Defaults to `1`.
+ * @param colors Four CSS colors, one per triangular face. Defaults to a built-in palette.
+ */
+export function tetrahedron(size = 1, colors = DEFAULT_COLORS) {
+    const s = size / 2;
+    const vertices = [
+        { x: s, y: s, z: s },
+        { x: s, y: -s, z: -s },
+        { x: -s, y: s, z: -s },
+        { x: -s, y: -s, z: s },
+    ];
+    const faces = [
+        { indices: [0, 1, 2], color: colors[0 % colors.length] },
+        { indices: [0, 3, 1], color: colors[1 % colors.length] },
+        { indices: [0, 2, 3], color: colors[2 % colors.length] },
+        { indices: [1, 3, 2], color: colors[3 % colors.length] },
+    ];
+    return { vertices, faces };
+}

package/dist/engines/little-3d-engine/shapes/uv-sphere.d.ts

@@ -0,0 +1,10 @@
+import type { Mesh } from "../core/mesh.js";
+/**
+ * Build a UV (latitude/longitude) sphere centered on the origin.
+ *
+ * @param size Diameter. Defaults to `1`.
+ * @param detail Tessellation level, `1` = simplest. Higher values add rings and
+ *   segments. Defaults to `1`.
+ * @param colors CSS colors cycled across faces. Defaults to a built-in palette.
+ */
+export declare function uvSphere(size?: number, detail?: number, colors?: string[]): Mesh;

package/dist/engines/little-3d-engine/shapes/uv-sphere.js

@@ -0,0 +1,50 @@
+const DEFAULT_COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
+/**
+ * Build a UV (latitude/longitude) sphere centered on the origin.
+ *
+ * @param size Diameter. Defaults to `1`.
+ * @param detail Tessellation level, `1` = simplest. Higher values add rings and
+ *   segments. Defaults to `1`.
+ * @param colors CSS colors cycled across faces. Defaults to a built-in palette.
+ */
+export function uvSphere(size = 1, detail = 1, colors = DEFAULT_COLORS) {
+    const r = size / 2;
+    const d = Math.max(1, Math.floor(detail));
+    const slices = Math.max(4, d * 4);
+    const stacks = Math.max(2, d * 2);
+    const vertices = [{ x: 0, y: r, z: 0 }];
+    const ring = (i, j) => 1 + (i - 1) * slices + j;
+    for (let i = 1; i < stacks; i++) {
+        const phi = (Math.PI * i) / stacks;
+        const y = r * Math.cos(phi);
+        const rr = r * Math.sin(phi);
+        for (let j = 0; j < slices; j++) {
+            const theta = (2 * Math.PI * j) / slices;
+            vertices.push({ x: rr * Math.cos(theta), y, z: rr * Math.sin(theta) });
+        }
+    }
+    const bottom = vertices.length;
+    vertices.push({ x: 0, y: -r, z: 0 });
+    const faces = [];
+    let ci = 0;
+    const color = () => colors[ci++ % colors.length];
+    for (let j = 0; j < slices; j++) {
+        faces.push({ indices: [0, ring(1, (j + 1) % slices), ring(1, j)], color: color() });
+    }
+    for (let i = 1; i < stacks - 1; i++) {
+        for (let j = 0; j < slices; j++) {
+            const j1 = (j + 1) % slices;
+            faces.push({
+                indices: [ring(i, j), ring(i, j1), ring(i + 1, j1), ring(i + 1, j)],
+                color: color(),
+            });
+        }
+    }
+    for (let j = 0; j < slices; j++) {
+        faces.push({
+            indices: [bottom, ring(stacks - 1, j), ring(stacks - 1, (j + 1) % slices)],
+            color: color(),
+        });
+    }
+    return { vertices, faces };
+}

package/dist/engines/little-tween-engine/core/tweens.d.ts

@@ -0,0 +1,39 @@
+export type EaseType = "linear" | "quadratic" | "cubic" | "quartic" | "quintic" | "easeInSine" | "easeOutSine" | "easeInOutSine" | "easeInQuad" | "easeOutQuad" | "easeInOutQuad" | "easeInCubic" | "easeOutCubic" | "easeInOutCubic" | "easeInQuart" | "easeOutQuart" | "easeInOutQuart" | "easeInQuint" | "easeOutQuint" | "easeInOutQuint" | "easeInExpo" | "easeOutExpo" | "easeInOutExpo" | "easeInCirc" | "easeOutCirc" | "easeInOutCirc" | "easeInBack" | "easeOutBack" | "easeInOutBack" | "easeInElastic" | "easeOutElastic" | "easeInOutElastic" | "easeInBounce" | "easeOutBounce" | "easeInOutBounce";
+export type EaseFunction = (value: number, overextend?: boolean) => number;
+export declare function linear(value: number, overextend?: boolean): number;
+export declare function quadratic(value: number, overextend?: boolean): number;
+export declare function cubic(value: number, overextend?: boolean): number;
+export declare function quartic(value: number, overextend?: boolean): number;
+export declare function quintic(value: number, overextend?: boolean): number;
+export declare function easeInSine(value: number, overextend?: boolean): number;
+export declare function easeOutSine(value: number, overextend?: boolean): number;
+export declare function easeInOutSine(value: number, overextend?: boolean): number;
+export declare function easeInQuad(value: number, overextend?: boolean): number;
+export declare function easeOutQuad(value: number, overextend?: boolean): number;
+export declare function easeInOutQuad(value: number, overextend?: boolean): number;
+export declare function easeInCubic(value: number, overextend?: boolean): number;
+export declare function easeOutCubic(value: number, overextend?: boolean): number;
+export declare function easeInOutCubic(value: number, overextend?: boolean): number;
+export declare function easeInQuart(value: number, overextend?: boolean): number;
+export declare function easeOutQuart(value: number, overextend?: boolean): number;
+export declare function easeInOutQuart(value: number, overextend?: boolean): number;
+export declare function easeInQuint(value: number, overextend?: boolean): number;
+export declare function easeOutQuint(value: number, overextend?: boolean): number;
+export declare function easeInOutQuint(value: number, overextend?: boolean): number;
+export declare function easeInExpo(value: number, overextend?: boolean): number;
+export declare function easeOutExpo(value: number, overextend?: boolean): number;
+export declare function easeInOutExpo(value: number, overextend?: boolean): number;
+export declare function easeInCirc(value: number, overextend?: boolean): number;
+export declare function easeOutCirc(value: number, overextend?: boolean): number;
+export declare function easeInOutCirc(value: number, overextend?: boolean): number;
+export declare function easeInBack(value: number, overextend?: boolean): number;
+export declare function easeOutBack(value: number, overextend?: boolean): number;
+export declare function easeInOutBack(value: number, overextend?: boolean): number;
+export declare function easeInElastic(value: number, overextend?: boolean): number;
+export declare function easeOutElastic(value: number, overextend?: boolean): number;
+export declare function easeInOutElastic(value: number, overextend?: boolean): number;
+export declare function easeInBounce(value: number, overextend?: boolean): number;
+export declare function easeOutBounce(value: number, overextend?: boolean): number;
+export declare function easeInOutBounce(value: number, overextend?: boolean): number;
+export declare const easeTypes: Readonly<Record<EaseType, EaseFunction>>;
+export declare function ease(type: EaseType, value: number, overextend?: boolean): number;