@multiplekex/shallot 0.2.3 → 0.2.5

package/src/extras/text/font.ts

@@ -82,7 +82,10 @@ function parseHead(r: Reader, table: TableEntry): { unitsPerEm: number; indexToL
     return { unitsPerEm, indexToLocFormat };
 }
 
-function parseHhea(r: Reader, table: TableEntry): { ascender: number; descender: number; lineGap: number; numHMetrics: number } {
+function parseHhea(
+    r: Reader,
+    table: TableEntry
+): { ascender: number; descender: number; lineGap: number; numHMetrics: number } {
     seek(r, table.offset + 4);
     const ascender = i16(r);
     const descender = i16(r);
@@ -92,7 +95,12 @@ function parseHhea(r: Reader, table: TableEntry): { ascender: number; descender:
     return { ascender, descender, lineGap, numHMetrics };
 }
 
-function parseHmtx(r: Reader, table: TableEntry, numHMetrics: number, numGlyphs: number): { advances: Uint16Array } {
+function parseHmtx(
+    r: Reader,
+    table: TableEntry,
+    numHMetrics: number,
+    numGlyphs: number
+): { advances: Uint16Array } {
     const advances = new Uint16Array(numGlyphs);
     seek(r, table.offset);
 
@@ -114,7 +122,12 @@ function parseMaxp(r: Reader, table: TableEntry): number {
     return u16(r);
 }
 
-function parseLoca(r: Reader, table: TableEntry, numGlyphs: number, indexToLocFormat: number): Uint32Array {
+function parseLoca(
+    r: Reader,
+    table: TableEntry,
+    numGlyphs: number,
+    indexToLocFormat: number
+): Uint32Array {
     const offsets = new Uint32Array(numGlyphs + 1);
     seek(r, table.offset);
 
@@ -210,7 +223,8 @@ function parseCmap(r: Reader, table: TableEntry): Map<number, number> {
                     if (rangeOffset === 0) {
                         glyphId = (c + delta) & 0xffff;
                     } else {
-                        const glyphIdOffset = idRangeOffsetPos + i * 2 + rangeOffset + (c - start) * 2;
+                        const glyphIdOffset =
+                            idRangeOffsetPos + i * 2 + rangeOffset + (c - start) * 2;
                         seek(r, glyphIdOffset);
                         glyphId = u16(r);
                         if (glyphId !== 0) {
@@ -291,7 +305,12 @@ const REPEAT = 8;
 const X_SAME = 16;
 const Y_SAME = 32;
 
-function parseGlyph(r: Reader, glyfOffset: number, loca: Uint32Array, glyphId: number): { path: string; bounds: [number, number, number, number] } | null {
+function parseGlyph(
+    r: Reader,
+    glyfOffset: number,
+    loca: Uint32Array,
+    glyphId: number
+): { path: string; bounds: [number, number, number, number] } | null {
     const start = loca[glyphId];
     const end = loca[glyphId + 1];
     if (start === end) return null;
@@ -372,7 +391,11 @@ function parseGlyph(r: Reader, glyfOffset: number, loca: Uint32Array, glyphId: n
         while (firstOn < points.length && !points[firstOn].on) firstOn++;
 
         if (firstOn === points.length) {
-            const mid = { x: (points[0].x + points[1].x) / 2, y: (points[0].y + points[1].y) / 2, on: true };
+            const mid = {
+                x: (points[0].x + points[1].x) / 2,
+                y: (points[0].y + points[1].y) / 2,
+                on: true,
+            };
             points.unshift(mid);
             firstOn = 0;
         }
@@ -412,17 +435,28 @@ function parseGlyph(r: Reader, glyfOffset: number, loca: Uint32Array, glyphId: n
     return { path, bounds: [xMin, yMin, xMax, yMax] };
 }
 
-function parseCompositeGlyph(r: Reader, glyfOffset: number, loca: Uint32Array): { path: string; bounds: [number, number, number, number] } | null {
+function parseCompositeGlyph(
+    r: Reader,
+    glyfOffset: number,
+    loca: Uint32Array
+): { path: string; bounds: [number, number, number, number] } | null {
     let path = "";
-    let xMin = Infinity, yMin = Infinity, xMax = -Infinity, yMax = -Infinity;
+    let xMin = Infinity,
+        yMin = Infinity,
+        xMax = -Infinity,
+        yMax = -Infinity;
     let hasMore = true;
 
     while (hasMore) {
         const flags = u16(r);
         const glyphIndex = u16(r);
 
-        let dx = 0, dy = 0;
-        let a = 1, b = 0, c = 0, d = 1;
+        let dx = 0,
+            dy = 0;
+        let a = 1,
+            b = 0,
+            c = 0,
+            d = 1;
 
         if (flags & 1) {
             dx = i16(r);
@@ -464,7 +498,15 @@ function parseCompositeGlyph(r: Reader, glyfOffset: number, loca: Uint32Array):
     return { path, bounds: [xMin, yMin, xMax, yMax] };
 }
 
-function transformPath(path: string, a: number, b: number, c: number, d: number, dx: number, dy: number): string {
+function transformPath(
+    path: string,
+    a: number,
+    b: number,
+    c: number,
+    d: number,
+    dx: number,
+    dy: number
+): string {
     return path.replace(/(-?\d+(?:\.\d+)?),(-?\d+(?:\.\d+)?)/g, (_, x, y) => {
         const nx = parseFloat(x) * a + parseFloat(y) * b + dx;
         const ny = parseFloat(x) * c + parseFloat(y) * d + dy;
@@ -485,7 +527,15 @@ export function parseFont(buffer: ArrayBuffer): Font {
     const glyfTable = tables.get("glyf");
     const kernTable = tables.get("kern");
 
-    if (!headTable || !hheaTable || !hmtxTable || !maxpTable || !cmapTable || !locaTable || !glyfTable) {
+    if (
+        !headTable ||
+        !hheaTable ||
+        !hmtxTable ||
+        !maxpTable ||
+        !cmapTable ||
+        !locaTable ||
+        !glyfTable
+    ) {
         throw new Error("Missing required font tables");
     }
 
@@ -497,14 +547,19 @@ export function parseFont(buffer: ArrayBuffer): Font {
     const cmap = parseCmap(r, cmapTable);
     const kern = kernTable ? parseKern(r, kernTable) : new Map<number, number>();
 
-    const glyphCache = new Map<number, { path: string; bounds: [number, number, number, number] } | null>();
+    const glyphCache = new Map<
+        number,
+        { path: string; bounds: [number, number, number, number] } | null
+    >();
     const glyfOffset = glyfTable.offset;
 
     function getGlyphId(char: string): number {
         return cmap.get(char.codePointAt(0) ?? 0) ?? 0;
     }
 
-    function getGlyph(glyphId: number): { path: string; bounds: [number, number, number, number] } | null {
+    function getGlyph(
+        glyphId: number
+    ): { path: string; bounds: [number, number, number, number] } | null {
         if (glyphCache.has(glyphId)) return glyphCache.get(glyphId)!;
         const glyph = parseGlyph(r, glyfOffset, loca, glyphId);
         glyphCache.set(glyphId, glyph);

package/src/extras/text/index.ts

@@ -21,8 +21,8 @@ import {
     type Draw,
     type SharedPassContext,
 } from "../../standard/render";
-import { DEPTH_FORMAT } from "../../standard/render/scene";
-import { SCENE_STRUCT_WGSL } from "../../standard/render/shaders";
+import { Z_FORMAT } from "../../standard/render/scene";
+import { SCENE_STRUCT_WGSL } from "../../standard/render/surface/structs";
 import { Transform } from "../../standard/transforms";
 
 const MAX_GLYPHS = 50000;
@@ -366,7 +366,7 @@ function layoutText(text: string, atlas: GlyphAtlas, fontSize: number): LayoutRe
         if (!metrics) continue;
 
         if (prevChar) {
-            cursorX += atlas.font.kerning(prevChar, char) / atlas.font.unitsPerEm * scale;
+            cursorX += (atlas.font.kerning(prevChar, char) / atlas.font.unitsPerEm) * scale;
         }
 
         const glyphW = metrics.glyphWidth * scale;
@@ -520,13 +520,18 @@ fn fs(input: VertexOutput) -> FragmentOutput {
     // Smoothstep with adaptive band
     let alpha = smoothstep(aaDist, -aaDist, signedDist);
 
-    if alpha < 0.01 {
+    // Dilate mask by FXAA span (8 pixels) to prevent edge bleeding
+    let fxaaSpan = aaDist * 8.0;
+    let inMaskRegion = signedDist < fxaaSpan;
+
+    // Only discard if outside both visible region and mask region
+    if alpha < 0.01 && !inMaskRegion {
         discard;
     }
 
     var out: FragmentOutput;
     out.color = vec4(input.color.rgb, input.color.a * alpha);
-    out.mask = select(0.0, 1.0, alpha > 0.01);
+    out.mask = select(0.0, 1.0, inMaskRegion);
     return out;
 }
 `;
@@ -574,7 +579,7 @@ function createTextPipeline(
             cullMode: "none",
         },
         depthStencil: {
-            format: DEPTH_FORMAT,
+            format: Z_FORMAT,
             depthCompare: "less",
             depthWriteEnabled: false,
         },
@@ -664,6 +669,8 @@ interface PendingGlyph {
     a: number;
 }
 
+let glyphsByFont: PendingGlyph[][] = [];
+
 const TextSystem: System = {
     group: "draw",
 
@@ -676,7 +683,8 @@ const TextSystem: System = {
         const { atlases, staging, ranges } = text;
         const stagingU32 = new Uint32Array(staging.buffer);
 
-        const glyphsByFont: PendingGlyph[][] = atlases.map(() => []);
+        while (glyphsByFont.length < atlases.length) glyphsByFont.push([]);
+        for (let i = 0; i < atlases.length; i++) glyphsByFont[i].length = 0;
 
         for (const eid of state.query([Text, Transform])) {
             if (!Text.visible[eid]) continue;

package/src/extras/text/sdf.ts

@@ -340,14 +340,25 @@ export class SDFGenerator {
         const segments = segmentPath(path, this.curveSubdivisions);
         if (segments.length === 0) return;
         if (segments.length > this.maxSegments) {
-            console.warn(`Too many segments (${segments.length}), truncating to ${this.maxSegments}`);
+            console.warn(
+                `Too many segments (${segments.length}), truncating to ${this.maxSegments}`
+            );
             segments.length = this.maxSegments;
         }
 
         const [xMin, yMin, xMax, yMax] = bounds;
         const maxDist = Math.max(xMax - xMin, yMax - yMin) / 2;
 
-        const uniformData = new Float32Array([xMin, yMin, xMax, yMax, maxDist, this.exponent, 0, 0]);
+        const uniformData = new Float32Array([
+            xMin,
+            yMin,
+            xMax,
+            yMax,
+            maxDist,
+            this.exponent,
+            0,
+            0,
+        ]);
         this.device.queue.writeBuffer(this.uniformBuffer, 0, uniformData);
 
         const segmentData = new Float32Array(segments.length * 4);

package/src/extras/water.ts

@@ -0,0 +1,64 @@
+import { surface } from "../standard/render/surface";
+import type { MeshData } from "../standard/render/mesh";
+
+const SEED1 = "vec2(127.1, 311.7)";
+const SEED2 = "vec2(269.5, 183.3)";
+
+export const Water = surface({
+    fragment: `
+    let p = (*surface).worldPos.xz * 3.0;
+    let t = scene.time;
+    let t1 = vec2(t * 0.6, t * 0.4);
+    let t2 = vec2(t * 0.5, t * 0.7);
+    let eps = 0.1;
+
+    let h  = (value2d(p + t1, ${SEED1}) + value2d(p - t2, ${SEED2})) * 0.5;
+    let hx = (value2d(p + vec2(eps, 0.0) + t1, ${SEED1}) + value2d(p + vec2(eps, 0.0) - t2, ${SEED2})) * 0.5;
+    let hz = (value2d(p + vec2(0.0, eps) + t1, ${SEED1}) + value2d(p + vec2(0.0, eps) - t2, ${SEED2})) * 0.5;
+
+    let dx = (hx - h) / eps;
+    let dz = (hz - h) / eps;
+    (*surface).normal = normalize(vec3(-dx * 0.015, 1.0, -dz * 0.015));`,
+});
+
+export function createSubdividedPlane(subdivisions: number = 32): MeshData {
+    const segments = subdivisions;
+    const vertexCount = (segments + 1) * (segments + 1);
+    const indexCount = segments * segments * 6;
+
+    const vertices = new Float32Array(vertexCount * 6);
+    const indices = new Uint16Array(indexCount);
+
+    let vi = 0;
+    for (let z = 0; z <= segments; z++) {
+        for (let x = 0; x <= segments; x++) {
+            const u = x / segments;
+            const v = z / segments;
+            vertices[vi++] = u - 0.5;
+            vertices[vi++] = 0;
+            vertices[vi++] = v - 0.5;
+            vertices[vi++] = 0;
+            vertices[vi++] = 1;
+            vertices[vi++] = 0;
+        }
+    }
+
+    let ii = 0;
+    for (let z = 0; z < segments; z++) {
+        for (let x = 0; x < segments; x++) {
+            const topLeft = z * (segments + 1) + x;
+            const topRight = topLeft + 1;
+            const bottomLeft = (z + 1) * (segments + 1) + x;
+            const bottomRight = bottomLeft + 1;
+
+            indices[ii++] = topLeft;
+            indices[ii++] = bottomLeft;
+            indices[ii++] = topRight;
+            indices[ii++] = topRight;
+            indices[ii++] = bottomLeft;
+            indices[ii++] = bottomRight;
+        }
+    }
+
+    return { vertices, indices, vertexCount, indexCount };
+}

package/src/standard/defaults.ts

@@ -3,6 +3,7 @@ import { TransformsPlugin } from "./transforms";
 import { InputPlugin } from "./input";
 import { ComputePlugin, initCanvas } from "./compute";
 import { RenderPlugin } from "./render";
+import { RasterPlugin } from "./raster";
 import { ActivityPlugin, spinnerDark } from "./activity";
 import { shallotDark } from "./loading";
 
@@ -12,6 +13,7 @@ export const DEFAULT_PLUGINS: readonly Plugin[] = [
     InputPlugin,
     ComputePlugin,
     RenderPlugin,
+    RasterPlugin,
 ];
 
 StateBuilder.defaultPlugins = DEFAULT_PLUGINS;

package/src/standard/index.ts

@@ -4,5 +4,7 @@ export * from "./input";
 export * from "./tween";
 export * from "./transforms";
 export * from "./render";
+export * from "./raster";
+export * from "./raytracing";
 export * from "./loading";
 export * from "./defaults";