@woosh/meep-engine 3.57.0 → 3.58.0

package/src/generation/foliage/material/tree_cluster_bake.js

@@ -0,0 +1,415 @@
+import { assert } from "../../../core/assert.js";
+import { tri2_rasterize_barycentric } from "../../../core/geom/2d/triangle/tri2_rasterize_barycentric.js";
+import { clamp } from "../../../core/math/clamp.js";
+import { Sampler2D } from "../../../engine/graphics/texture/sampler/Sampler2D.js";
+import { StandardAttributes } from "../../../shade/renderer/geometry/StandardAttributes.js";
+import { foliage_atlas_cutout_fit_alpha } from "./foliage_atlas_cutout.js";
+import { FoliageAtlasCutout } from "./FoliageAtlasCutout.js";
+import { tree_cluster_atlas_pack } from "./tree_cluster_atlas_pack.js";
+import { tree_cluster_press } from "./tree_cluster_press.js";
+import { tree_cluster_tiles } from "./tree_cluster_tiles.js";
+
+/**
+ * Samples along each side of a texel the bake composites: a twig or leaf edge narrower than a texel still draws its
+ * share of it.
+ * @type {number}
+ */
+const BAKE_SUPERSAMPLING = 4;
+
+/**
+ * Per sample: premultiplied linear RGB, alpha, premultiplied card-space normal, premultiplied AO and roughness.
+ */
+const SAMPLE_FLOATS = 9;
+
+
+/**
+ * @param {number} c sRGB in [0, 1]
+ * @returns {number} linear
+ */
+function srgb_to_linear(c) {
+    return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
+
+/**
+ * @param {number} c linear in [0, 1]
+ * @returns {number} sRGB
+ */
+function linear_to_srgb(c) {
+    return c <= 0.0031308 ? c * 12.92 : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+}
+
+/**
+ * Bilinear sample of every channel of a uint8 sampler at texture coordinates `(u, v)`, clamped to its edge, into `out`.
+ */
+function sample_bilinear_uint8(sampler, u, v, out) {
+    const w = sampler.width, h = sampler.height, n = sampler.itemSize, data = sampler.data;
+    const x = clamp(u * w - 0.5, 0, w - 1);
+    const y = clamp(v * h - 0.5, 0, h - 1);
+    const x0 = Math.floor(x), y0 = Math.floor(y);
+    const x1 = Math.min(w - 1, x0 + 1), y1 = Math.min(h - 1, y0 + 1);
+    const fx = x - x0, fy = y - y0;
+    for (let c = 0; c < n; c++) {
+        const a = data[(y0 * w + x0) * n + c], b = data[(y0 * w + x1) * n + c];
+        const d = data[(y1 * w + x0) * n + c], e = data[(y1 * w + x1) * n + c];
+        out[c] = ((a + (b - a) * fx) * (1 - fy) + (d + (e - d) * fx) * fy) / 255;
+    }
+}
+
+/**
+ * Composites one fragment over a sample, painter's order: what is drawn later is in front.
+ */
+function composite(buffer, k, alpha, r, g, b, nx, ny, nz, ao, rough) {
+    const o = k * SAMPLE_FLOATS;
+    const keep = 1 - alpha;
+    buffer[o] = alpha * r + keep * buffer[o];
+    buffer[o + 1] = alpha * g + keep * buffer[o + 1];
+    buffer[o + 2] = alpha * b + keep * buffer[o + 2];
+    buffer[o + 3] = alpha + keep * buffer[o + 3];
+    buffer[o + 4] = alpha * nx + keep * buffer[o + 4];
+    buffer[o + 5] = alpha * ny + keep * buffer[o + 5];
+    buffer[o + 6] = alpha * nz + keep * buffer[o + 6];
+    buffer[o + 7] = alpha * ao + keep * buffer[o + 7];
+    buffer[o + 8] = alpha * rough + keep * buffer[o + 8];
+}
+
+/**
+ * Draws a leaf triangle: its atlas texel, tinted by its vertex colour, its normal map turned into the card's frame.
+ */
+const LEAF_VISITOR = {
+    buffer: null, width: 0,
+    /** per vertex of the triangle: uv, colour, normal; and the triangle's tangent frame, all in card space */
+    u0: 0, v0: 0, u1: 0, v1: 0, u2: 0, v2: 0,
+    c0: new Float64Array(3), c1: new Float64Array(3), c2: new Float64Array(3),
+    n0: new Float64Array(3), n1: new Float64Array(3), n2: new Float64Array(3),
+    t: new Float64Array(3), b: new Float64Array(3),
+    albedo: null, normal: null, orm: null, tint_scale: 1,
+    texel: new Float64Array(4),
+    visit(col, row, l0, l1, l2) {
+        const u = l0 * this.u0 + l1 * this.u1 + l2 * this.u2;
+        const v = l0 * this.v0 + l1 * this.v1 + l2 * this.v2;
+        const tx = this.texel;
+        sample_bilinear_uint8(this.albedo, u, v, tx);
+        const alpha = tx[3];
+        if (alpha <= 0) return;
+        const s = this.tint_scale;
+        const r = Math.min(1, srgb_to_linear(tx[0]) * (l0 * this.c0[0] + l1 * this.c1[0] + l2 * this.c2[0]) * s);
+        const g = Math.min(1, srgb_to_linear(tx[1]) * (l0 * this.c0[1] + l1 * this.c1[1] + l2 * this.c2[1]) * s);
+        const bl = Math.min(1, srgb_to_linear(tx[2]) * (l0 * this.c0[2] + l1 * this.c1[2] + l2 * this.c2[2]) * s);
+
+        sample_bilinear_uint8(this.normal, u, v, tx);
+        const mx = tx[0] * 2 - 1, my = tx[1] * 2 - 1;
+        const mz = Math.sqrt(Math.max(0, 1 - mx * mx - my * my));
+        // the leaf's normal in card space: its map along its tangent frame
+        let nx = l0 * this.n0[0] + l1 * this.n1[0] + l2 * this.n2[0];
+        let ny = l0 * this.n0[1] + l1 * this.n1[1] + l2 * this.n2[1];
+        let nz = l0 * this.n0[2] + l1 * this.n1[2] + l2 * this.n2[2];
+        let wx = this.t[0] * mx + this.b[0] * my + nx * mz;
+        let wy = this.t[1] * mx + this.b[1] * my + ny * mz;
+        let wz = this.t[2] * mx + this.b[2] * my + nz * mz;
+        // seen from the card's side, a leaf facing away shows its other face
+        if (wz < 0) {
+            wx = -wx;
+            wy = -wy;
+            wz = -wz;
+        }
+        const len = Math.hypot(wx, wy, wz) || 1;
+
+        sample_bilinear_uint8(this.orm, u, v, tx);
+        composite(this.buffer, row * this.width + col, alpha, r, g, bl, wx / len, wy / len, wz / len, tx[0], tx[1]);
+    }
+};
+
+/**
+ * Draws a twig as the band it shows: opaque bark, its normal turning across it as a round stem's does.
+ */
+const TWIG_VISITOR = {
+    buffer: null, width: 0,
+    // across the band at each vertex, -1 on one side and 1 on the other
+    a0: 0, a1: 0, a2: 0,
+    // the side the band's across runs to, in card space
+    sx: 0, sy: 0,
+    r: 0, g: 0, b: 0, rough: 0.9,
+    visit(col, row, l0, l1, l2) {
+        const a = clamp(l0 * this.a0 + l1 * this.a1 + l2 * this.a2, -1, 1);
+        const up = Math.sqrt(1 - a * a);
+        composite(this.buffer, row * this.width + col, 1, this.r, this.g, this.b, a * this.sx, a * this.sy, up, 1, this.rough);
+    }
+};
+
+/**
+ * @typedef {Object} TreeClusterBake
+ * @property {Sampler2D} albedo uint8 RGBA, straight alpha, sRGB
+ * @property {Sampler2D} normal uint8, 2 channels: the card-space normal's x and y
+ * @property {Sampler2D} orm uint8 RGBA: AO, roughness, metalness 0
+ * @property {Float32Array} uv_rects per card, `[u0, v0, u1, v1]` of its tile in the atlas
+ * @property {FoliageAtlasCutout} cutout per card, the hull of what its tile draws, in the tile's `[0, 1]^2`
+ * @property {Float64Array} frames per card, 12: its origin, and its axes `e1` (along the tile's u), `e2` (along v)
+ *           and normal `n`
+ * @property {Float64Array} extents per card, 4: where the tile's corners `(0, 0)` and `(1, 1)` lie on the card's
+ *           plane, along `e1` and `e2` from its origin, m
+ */
+
+/**
+ * Bakes each card (`tree_cluster_cards`) into a tile of one atlas: its leaves (the tree's per-leaf geometry, as
+ * `tree_mesh_build_foliage` draws it, with its leaf material) and its twig segments, drawn orthographically onto it.
+ *
+ * Each leaf is first pressed onto the card: turned about where it attaches until it lies parallel to the card (the
+ * least turn that takes its normal, or its other face's, to the card's), so the tile holds the leaf's whole area.
+ * Each card has its own texel, `texels` m; its tile holds what it draws, on its plane, with a texel to spare on every
+ * side (`tree_cluster_tiles`). Fragments
+ * are composited back to front along the card's normal, one leaf or twig segment at a time,
+ * {@link BAKE_SUPERSAMPLING} samples to a side per texel: colour in linear light, tinted as the leaf's vertex colour
+ * and the attachments' `tint_scale` tint it, the leaf's normal map turned into the card's frame, a twig's normal
+ * across its round stem.
+ *
+ * @param {import("../skeleton/TreeSkeleton.js").TreeSkeleton} skeleton
+ * @param {import("../config/TreeSpeciesConfig.js").TreeSpeciesConfig} species
+ * @param {import("../mesh/tree_cluster_cards.js").TreeClusterCard[]} cards
+ * @param {import("../mesh/foliage_collect_attachments.js").FoliageAttachmentSet} attachments the leaves
+ * @param {import("../../../shade/renderer/geometry/Geometry.js").Geometry} leaves every leaf's card, in attachment order
+ * @param {{texture_albedo: *, texture_normal: *, texture_orm: *}} leaf_material the leaves' material
+ * @param {ArrayLike<number>} texels per card, m, a texel's side
+ * @returns {TreeClusterBake}
+ */
+export function tree_cluster_bake(skeleton, species, cards, attachments, leaves, leaf_material, texels) {
+    assert.equal(texels.length, cards.length, 'texels.length');
+    const leaf_count = attachments.count;
+    assert.greaterThan(leaf_count, 0, 'attachments.count');
+    const tint_scale = attachments.tint_scale ?? 1;
+    const S = BAKE_SUPERSAMPLING;
+    const count = cards.length;
+
+    const uvs = leaves.getAttribute(StandardAttributes.TextureCoordinates0).data;
+    const colors = leaves.getAttribute(StandardAttributes.Color).data;
+    const index = leaves.index.data;
+    const verts_per_card = (leaves.getAttribute(StandardAttributes.Position).count) / leaf_count;
+    const tris_per_card = (index.length / 3) / leaf_count;
+    assert.equal(verts_per_card, Math.floor(verts_per_card), 'leaves geometry must hold one card per leaf');
+
+    // every card's leaves pressed onto it, turned about where they attach
+    const pressed = tree_cluster_press(leaves, attachments, cards);
+    const positions = pressed.positions;
+    const normals = pressed.normals;
+
+    const albedo = leaf_material.texture_albedo.image.source;
+    const normal = leaf_material.texture_normal.image.source;
+    const orm = leaf_material.texture_orm.image.source;
+
+    const bark = species.bark_material.primary_color;
+    const bark_r = srgb_to_linear(bark.r), bark_g = srgb_to_linear(bark.g), bark_b = srgb_to_linear(bark.b);
+
+    const P = new Float32Array(3);
+    const Q = new Float32Array(3);
+    const nodes = [], edges = [];
+
+    // ---- each card's frame, extent and tile, packed into the atlas
+    const { frames, extents, sizes } = tree_cluster_tiles(skeleton, cards, pressed, texels);
+    const { boxes, atlas_w, atlas_h } = tree_cluster_atlas_pack(sizes, count);
+
+    const out_albedo = Sampler2D.uint8(4, atlas_w, atlas_h);
+    const out_normal = Sampler2D.uint8(2, atlas_w, atlas_h);
+    const out_orm = Sampler2D.uint8(4, atlas_w, atlas_h);
+    out_normal.data.fill(128);
+    for (let p = 0; p < atlas_w * atlas_h; p++) {
+        out_orm.data[p * 4] = 255;
+        out_orm.data[p * 4 + 1] = 230;
+        out_orm.data[p * 4 + 3] = 255;
+    }
+    const uv_rects = new Float32Array(count * 4);
+    const cutout = new FoliageAtlasCutout();
+    cutout.resize(count);
+
+    // ---- each tile
+    let buffer = new Float32Array(0);
+    let tile_alpha = new Float32Array(0);
+    const order = [];
+    for (let i = 0; i < count; i++) {
+        const card = cards[i];
+        const w = sizes[i * 2], h = sizes[i * 2 + 1];
+        const W = w * S, H = h * S;
+        if (buffer.length < W * H * SAMPLE_FLOATS) buffer = new Float32Array(W * H * SAMPLE_FLOATS * 2);
+        buffer.fill(0, 0, W * H * SAMPLE_FLOATS);
+        const f = i * 12;
+        const ox = frames[f], oy = frames[f + 1], oz = frames[f + 2];
+        const e1x = frames[f + 3], e1y = frames[f + 4], e1z = frames[f + 5];
+        const e2x = frames[f + 6], e2y = frames[f + 7], e2z = frames[f + 8];
+        const nx = frames[f + 9], ny = frames[f + 10], nz = frames[f + 11];
+        const x0 = extents[i * 4], y0 = extents[i * 4 + 1];
+        const inv = S / texels[i];
+        // a point's sample coordinates on the tile, and its depth towards the card's viewer
+        const sx = (x, y, z) => ((x - ox) * e1x + (y - oy) * e1y + (z - oz) * e1z - x0) * inv;
+        const sy = (x, y, z) => ((x - ox) * e2x + (y - oy) * e2y + (z - oz) * e2z - y0) * inv;
+        const depth = (x, y, z) => (x - ox) * nx + (y - oy) * ny + (z - oz) * nz;
+
+        // its leaves and twig segments, back to front
+        order.length = 0;
+        for (let j = 0; j < card.leaves.length; j++) {
+            // the card's own pressed copy of the leaf
+            const slot = pressed.first[i] + j;
+            let d = 0;
+            for (let v = slot * verts_per_card; v < (slot + 1) * verts_per_card; v++) d += depth(positions[v * 3], positions[v * 3 + 1], positions[v * 3 + 2]);
+            order.push({ depth: d / verts_per_card, leaf: card.leaves[j], slot, branch: -1, segment: 0 });
+        }
+        for (let k = 0; k < card.segments.length; k += 2) {
+            const b = card.segments[k], s = card.segments[k + 1];
+            skeleton.collect_branch_chain(b, nodes, edges);
+            skeleton.node_read_position(P, 0, nodes[s]);
+            skeleton.node_read_position(Q, 0, nodes[s + 1]);
+            order.push({ depth: 0.5 * (depth(P[0], P[1], P[2]) + depth(Q[0], Q[1], Q[2])), leaf: -1, slot: -1, branch: b, segment: s });
+        }
+        order.sort((p, q) => p.depth - q.depth);
+
+        LEAF_VISITOR.buffer = buffer;
+        LEAF_VISITOR.width = W;
+        LEAF_VISITOR.albedo = albedo;
+        LEAF_VISITOR.normal = normal;
+        LEAF_VISITOR.orm = orm;
+        LEAF_VISITOR.tint_scale = tint_scale;
+        TWIG_VISITOR.buffer = buffer;
+        TWIG_VISITOR.width = W;
+        TWIG_VISITOR.r = bark_r;
+        TWIG_VISITOR.g = bark_g;
+        TWIG_VISITOR.b = bark_b;
+        const to_card = (out, x, y, z) => {
+            out[0] = x * e1x + y * e1y + z * e1z;
+            out[1] = x * e2x + y * e2y + z * e2z;
+            out[2] = x * nx + y * ny + z * nz;
+        };
+        for (const item of order) {
+            if (item.leaf >= 0) {
+                const t0 = item.leaf * tris_per_card;
+                // from the leaf's vertices to its pressed copy's
+                const shift = (item.slot - item.leaf) * verts_per_card;
+                for (let t = t0; t < t0 + tris_per_card; t++) {
+                    const i0 = index[t * 3], i1 = index[t * 3 + 1], i2 = index[t * 3 + 2];
+                    const q0 = i0 + shift, q1 = i1 + shift, q2 = i2 + shift;
+                    const L = LEAF_VISITOR;
+                    L.u0 = uvs[i0 * 2];
+                    L.v0 = uvs[i0 * 2 + 1];
+                    L.u1 = uvs[i1 * 2];
+                    L.v1 = uvs[i1 * 2 + 1];
+                    L.u2 = uvs[i2 * 2];
+                    L.v2 = uvs[i2 * 2 + 1];
+                    for (let k = 0; k < 3; k++) {
+                        L.c0[k] = colors[i0 * 3 + k];
+                        L.c1[k] = colors[i1 * 3 + k];
+                        L.c2[k] = colors[i2 * 3 + k];
+                    }
+                    to_card(L.n0, normals[q0 * 3], normals[q0 * 3 + 1], normals[q0 * 3 + 2]);
+                    to_card(L.n1, normals[q1 * 3], normals[q1 * 3 + 1], normals[q1 * 3 + 2]);
+                    to_card(L.n2, normals[q2 * 3], normals[q2 * 3 + 1], normals[q2 * 3 + 2]);
+                    // the triangle's tangent frame from its uvs: where u and v grow across it
+                    const p0x = positions[q0 * 3], p0y = positions[q0 * 3 + 1], p0z = positions[q0 * 3 + 2];
+                    const d1x = positions[q1 * 3] - p0x, d1y = positions[q1 * 3 + 1] - p0y, d1z = positions[q1 * 3 + 2] - p0z;
+                    const d2x = positions[q2 * 3] - p0x, d2y = positions[q2 * 3 + 1] - p0y, d2z = positions[q2 * 3 + 2] - p0z;
+                    const du1 = L.u1 - L.u0, dv1 = L.v1 - L.v0, du2 = L.u2 - L.u0, dv2 = L.v2 - L.v0;
+                    const det = du1 * dv2 - du2 * dv1;
+                    if (!(Math.abs(det) > 0)) continue;
+                    const rdet = 1 / det;
+                    to_card(L.t, (d1x * dv2 - d2x * dv1) * rdet, (d1y * dv2 - d2y * dv1) * rdet, (d1z * dv2 - d2z * dv1) * rdet);
+                    to_card(L.b, (d2x * du1 - d1x * du2) * rdet, (d2y * du1 - d1y * du2) * rdet, (d2z * du1 - d1z * du2) * rdet);
+                    const tl = Math.hypot(L.t[0], L.t[1], L.t[2]) || 1;
+                    const bl = Math.hypot(L.b[0], L.b[1], L.b[2]) || 1;
+                    for (let k = 0; k < 3; k++) {
+                        L.t[k] /= tl;
+                        L.b[k] /= bl;
+                    }
+                    tri2_rasterize_barycentric(W, H,
+                        sx(p0x, p0y, p0z), sy(p0x, p0y, p0z),
+                        sx(positions[q1 * 3], positions[q1 * 3 + 1], positions[q1 * 3 + 2]), sy(positions[q1 * 3], positions[q1 * 3 + 1], positions[q1 * 3 + 2]),
+                        sx(positions[q2 * 3], positions[q2 * 3 + 1], positions[q2 * 3 + 2]), sy(positions[q2 * 3], positions[q2 * 3 + 1], positions[q2 * 3 + 2]),
+                        L);
+                }
+            } else {
+                skeleton.collect_branch_chain(item.branch, nodes, edges);
+                const va = nodes[item.segment], vb = nodes[item.segment + 1];
+                skeleton.node_read_position(P, 0, va);
+                const ax = sx(P[0], P[1], P[2]), ay = sy(P[0], P[1], P[2]);
+                skeleton.node_read_position(P, 0, vb);
+                const bx = sx(P[0], P[1], P[2]), by = sy(P[0], P[1], P[2]);
+                const ra = skeleton.node_read_radius(va) * inv, rb = skeleton.node_read_radius(vb) * inv;
+                let dx = bx - ax, dy = by - ay;
+                const dl = Math.hypot(dx, dy);
+                if (!(dl > 0)) continue;
+                // the band's side, across the twig on the card
+                const qx = -dy / dl, qy = dx / dl;
+                TWIG_VISITOR.sx = qx;
+                TWIG_VISITOR.sy = qy;
+                const c0x = ax - qx * ra, c0y = ay - qy * ra, c1x = ax + qx * ra, c1y = ay + qy * ra;
+                const c2x = bx + qx * rb, c2y = by + qy * rb, c3x = bx - qx * rb, c3y = by - qy * rb;
+                TWIG_VISITOR.a0 = -1;
+                TWIG_VISITOR.a1 = 1;
+                TWIG_VISITOR.a2 = 1;
+                tri2_rasterize_barycentric(W, H, c0x, c0y, c1x, c1y, c2x, c2y, TWIG_VISITOR);
+                TWIG_VISITOR.a0 = -1;
+                TWIG_VISITOR.a1 = 1;
+                TWIG_VISITOR.a2 = -1;
+                tri2_rasterize_barycentric(W, H, c0x, c0y, c2x, c2y, c3x, c3y, TWIG_VISITOR);
+            }
+        }
+
+        // ---- down to texels, into the atlas
+        const box = boxes[i];
+        const bx0 = Math.round(box.x0), by0 = Math.round(box.y0);
+        uv_rects.set([bx0 / atlas_w, by0 / atlas_h, (bx0 + w) / atlas_w, (by0 + h) / atlas_h], i * 4);
+        if (tile_alpha.length < w * h) tile_alpha = new Float32Array(w * h * 2);
+        // what an empty texel holds, so filtering at the tile's edges blends towards the cluster's own colour
+        let fill_r = 0, fill_g = 0, fill_b = 0, fill_a = 0;
+        for (let k = 0; k < W * H; k++) {
+            const o = k * SAMPLE_FLOATS;
+            fill_r += buffer[o];
+            fill_g += buffer[o + 1];
+            fill_b += buffer[o + 2];
+            fill_a += buffer[o + 3];
+        }
+        if (fill_a > 0) {
+            fill_r /= fill_a;
+            fill_g /= fill_a;
+            fill_b /= fill_a;
+        }
+        const inv_s2 = 1 / (S * S);
+        for (let ty = 0; ty < h; ty++) {
+            for (let tx = 0; tx < w; tx++) {
+                let r = 0, g = 0, b = 0, a = 0, qx = 0, qy = 0, qz = 0, ao = 0, rough = 0;
+                for (let yy = 0; yy < S; yy++) {
+                    for (let xx = 0; xx < S; xx++) {
+                        const o = ((ty * S + yy) * W + tx * S + xx) * SAMPLE_FLOATS;
+                        r += buffer[o];
+                        g += buffer[o + 1];
+                        b += buffer[o + 2];
+                        a += buffer[o + 3];
+                        qx += buffer[o + 4];
+                        qy += buffer[o + 5];
+                        qz += buffer[o + 6];
+                        ao += buffer[o + 7];
+                        rough += buffer[o + 8];
+                    }
+                }
+                const alpha = a * inv_s2;
+                tile_alpha[ty * w + tx] = alpha;
+                const p = (by0 + ty) * atlas_w + bx0 + tx;
+                if (a > 0) {
+                    r /= a;
+                    g /= a;
+                    b /= a;
+                    const ql = Math.hypot(qx, qy, qz) || 1;
+                    out_normal.data[p * 2] = clamp(Math.round((qx / ql * 0.5 + 0.5) * 255), 0, 255);
+                    out_normal.data[p * 2 + 1] = clamp(Math.round((qy / ql * 0.5 + 0.5) * 255), 0, 255);
+                    out_orm.data[p * 4] = clamp(Math.round(ao / a * 255), 0, 255);
+                    out_orm.data[p * 4 + 1] = clamp(Math.round(rough / a * 255), 0, 255);
+                } else {
+                    r = fill_r;
+                    g = fill_g;
+                    b = fill_b;
+                }
+                out_albedo.data[p * 4] = clamp(Math.round(linear_to_srgb(r) * 255), 0, 255);
+                out_albedo.data[p * 4 + 1] = clamp(Math.round(linear_to_srgb(g) * 255), 0, 255);
+                out_albedo.data[p * 4 + 2] = clamp(Math.round(linear_to_srgb(b) * 255), 0, 255);
+                out_albedo.data[p * 4 + 3] = clamp(Math.round(alpha * 255), 0, 255);
+            }
+        }
+        foliage_atlas_cutout_fit_alpha(cutout, i, tile_alpha.subarray(0, w * h), w, h);
+    }
+
+    return { albedo: out_albedo, normal: out_normal, orm: out_orm, uv_rects, cutout, frames, extents };
+}

package/src/generation/foliage/material/tree_cluster_press.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Each cluster card's leaves (one card per leaf, as `tree_mesh_build_foliage` draws them), pressed onto it: turned
+ * about where each attaches until it lies parallel to the card, so the card holds the leaf's whole area whichever way
+ * the leaf faces. Every card presses its own copy, so a leaf on two cards (cuts of different LODs) lies flat on each:
+ * card `i`'s leaf `card.leaves[j]` is at vertex `(first[i] + j) * verts_per_leaf`.
+ *
+ * @param {import("../../../shade/renderer/geometry/Geometry.js").Geometry} leaves every leaf's card, in attachment order
+ * @param {import("../mesh/foliage_collect_attachments.js").FoliageAttachmentSet} attachments
+ * @param {import("../mesh/tree_cluster_cards.js").TreeClusterCard[]} cards
+ * @returns {{positions: Float32Array, normals: Float32Array, verts_per_leaf: number, first: Int32Array}}
+ */
+export function tree_cluster_press(leaves: import("../../../shade/renderer/geometry/Geometry.js").Geometry, attachments: import("../mesh/foliage_collect_attachments.js").FoliageAttachmentSet, cards: import("../mesh/tree_cluster_cards.js").TreeClusterCard[]): {
+    positions: Float32Array;
+    normals: Float32Array;
+    verts_per_leaf: number;
+    first: Int32Array;
+};
+//# sourceMappingURL=tree_cluster_press.d.ts.map

package/src/generation/foliage/material/tree_cluster_press.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree_cluster_press.d.ts","sourceRoot":"","sources":["../../../../../src/generation/foliage/material/tree_cluster_press.js"],"names":[],"mappings":"AA+CA;;;;;;;;;;GAUG;AACH,2CALW,OAAO,8CAA8C,EAAE,QAAQ,eAC/D,OAAO,wCAAwC,EAAE,oBAAoB,SACrE,OAAO,+BAA+B,EAAE,eAAe,EAAE,GACvD;IAAC,SAAS,EAAE,YAAY,CAAC;IAAC,OAAO,EAAE,YAAY,CAAC;IAAC,cAAc,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,UAAU,CAAA;CAAC,CA0BvG"}

package/src/generation/foliage/material/tree_cluster_press.js

@@ -0,0 +1,83 @@
+import { assert } from "../../../core/assert.js";
+import { StandardAttributes } from "../../../shade/renderer/geometry/StandardAttributes.js";
+
+/**
+ * Turns leaf `c`'s vertices `[v0, v1)` about where it attaches by the least turn that takes its normal, or its other
+ * face's, to `normal`: the leaf pressed flat, parallel to the card.
+ *
+ * @param {Float32Array} positions
+ * @param {Float32Array} normals
+ * @param {number} v0
+ * @param {number} v1
+ * @param {import("../mesh/foliage_collect_attachments.js").FoliageAttachmentSet} attachments
+ * @param {number} c
+ * @param {Float64Array} normal
+ */
+function leaf_press(positions, normals, v0, v1, attachments, c, normal) {
+    const nx = normal[0], ny = normal[1], nz = normal[2];
+    let ux = attachments.up[c * 3], uy = attachments.up[c * 3 + 1], uz = attachments.up[c * 3 + 2];
+    if (ux * nx + uy * ny + uz * nz < 0) {
+        ux = -ux;
+        uy = -uy;
+        uz = -uz;
+    }
+    // Rodrigues: the axis u x n, the angle between them
+    let kx = uy * nz - uz * ny, ky = uz * nx - ux * nz, kz = ux * ny - uy * nx;
+    const sin = Math.hypot(kx, ky, kz);
+    const cos = ux * nx + uy * ny + uz * nz;
+    if (!(sin > 1e-9)) {
+        return;
+    }
+    kx /= sin;
+    ky /= sin;
+    kz /= sin;
+    const ax = attachments.positions[c * 3], ay = attachments.positions[c * 3 + 1], az = attachments.positions[c * 3 + 2];
+    const turn = (arr, o, ox, oy, oz) => {
+        const x = arr[o] - ox, y = arr[o + 1] - oy, z = arr[o + 2] - oz;
+        const d = (kx * x + ky * y + kz * z) * (1 - cos);
+        arr[o] = x * cos + (ky * z - kz * y) * sin + kx * d + ox;
+        arr[o + 1] = y * cos + (kz * x - kx * z) * sin + ky * d + oy;
+        arr[o + 2] = z * cos + (kx * y - ky * x) * sin + kz * d + oz;
+    };
+    for (let v = v0; v < v1; v++) {
+        turn(positions, v * 3, ax, ay, az);
+        turn(normals, v * 3, 0, 0, 0);
+    }
+}
+
+/**
+ * Each cluster card's leaves (one card per leaf, as `tree_mesh_build_foliage` draws them), pressed onto it: turned
+ * about where each attaches until it lies parallel to the card, so the card holds the leaf's whole area whichever way
+ * the leaf faces. Every card presses its own copy, so a leaf on two cards (cuts of different LODs) lies flat on each:
+ * card `i`'s leaf `card.leaves[j]` is at vertex `(first[i] + j) * verts_per_leaf`.
+ *
+ * @param {import("../../../shade/renderer/geometry/Geometry.js").Geometry} leaves every leaf's card, in attachment order
+ * @param {import("../mesh/foliage_collect_attachments.js").FoliageAttachmentSet} attachments
+ * @param {import("../mesh/tree_cluster_cards.js").TreeClusterCard[]} cards
+ * @returns {{positions: Float32Array, normals: Float32Array, verts_per_leaf: number, first: Int32Array}}
+ */
+export function tree_cluster_press(leaves, attachments, cards) {
+    const leaf_count = attachments.count;
+    assert.greaterThan(leaf_count, 0, 'attachments.count');
+    const verts_per_leaf = leaves.getAttribute(StandardAttributes.Position).count / leaf_count;
+    assert.equal(verts_per_leaf, Math.floor(verts_per_leaf), 'leaves geometry must hold one card per leaf');
+
+    const first = new Int32Array(cards.length + 1);
+    for (let i = 0; i < cards.length; i++) first[i + 1] = first[i] + cards[i].leaves.length;
+    const src_positions = leaves.getAttribute(StandardAttributes.Position).data;
+    const src_normals = leaves.getAttribute(StandardAttributes.Normal).data;
+    const floats = verts_per_leaf * 3;
+    const positions = new Float32Array(first[cards.length] * floats);
+    const normals = new Float32Array(first[cards.length] * floats);
+    for (let i = 0; i < cards.length; i++) {
+        const card = cards[i];
+        for (let j = 0; j < card.leaves.length; j++) {
+            const c = card.leaves[j];
+            const slot = first[i] + j;
+            positions.set(src_positions.subarray(c * floats, (c + 1) * floats), slot * floats);
+            normals.set(src_normals.subarray(c * floats, (c + 1) * floats), slot * floats);
+            leaf_press(positions, normals, slot * verts_per_leaf, (slot + 1) * verts_per_leaf, attachments, c, card.normal);
+        }
+    }
+    return { positions, normals, verts_per_leaf, first };
+}

package/src/generation/foliage/material/tree_cluster_tiles.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Where each cluster card's tile lies.
+ *
+ * @typedef {Object} TreeClusterTiles
+ * @property {Float64Array} frames per card, 12: its origin, and its axes `e1` (along the tile's u), `e2` (along v)
+ *           and normal `n`, right-handed
+ * @property {Float64Array} extents per card, 4: where the tile's corners `(0, 0)` and `(1, 1)` lie on the card's plane,
+ *           along `e1` and `e2` from its origin, m
+ * @property {Int32Array} sizes per card, its tile's width and height in texels
+ */
+/**
+ * Each card's tile (`tree_cluster_cards`) at its texel: on its plane, holding its pressed leaves (`tree_cluster_press`)
+ * and its twig segments as wide as they are, with a texel to spare on every side.
+ *
+ * @param {import("../skeleton/TreeSkeleton.js").TreeSkeleton} skeleton
+ * @param {import("../mesh/tree_cluster_cards.js").TreeClusterCard[]} cards
+ * @param {{positions: Float32Array, verts_per_leaf: number, first: Int32Array}} pressed the cards' leaves, pressed onto
+ *        them (`tree_cluster_press`)
+ * @param {ArrayLike<number>} texels per card, m, a texel's side
+ * @returns {TreeClusterTiles}
+ */
+export function tree_cluster_tiles(skeleton: import("../skeleton/TreeSkeleton.js").TreeSkeleton, cards: import("../mesh/tree_cluster_cards.js").TreeClusterCard[], pressed: {
+    positions: Float32Array;
+    verts_per_leaf: number;
+    first: Int32Array;
+}, texels: ArrayLike<number>): TreeClusterTiles;
+/**
+ * Where each cluster card's tile lies.
+ */
+export type TreeClusterTiles = {
+    /**
+     * per card, 12: its origin, and its axes `e1` (along the tile's u), `e2` (along v)
+     * and normal `n`, right-handed
+     */
+    frames: Float64Array;
+    /**
+     * per card, 4: where the tile's corners `(0, 0)` and `(1, 1)` lie on the card's plane,
+     * along `e1` and `e2` from its origin, m
+     */
+    extents: Float64Array;
+    /**
+     * per card, its tile's width and height in texels
+     */
+    sizes: Int32Array;
+};
+//# sourceMappingURL=tree_cluster_tiles.d.ts.map

package/src/generation/foliage/material/tree_cluster_tiles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree_cluster_tiles.d.ts","sourceRoot":"","sources":["../../../../../src/generation/foliage/material/tree_cluster_tiles.js"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH;;;;;;;;;;GAUG;AACH,6CAPW,OAAO,6BAA6B,EAAE,YAAY,SAClD,OAAO,+BAA+B,EAAE,eAAe,EAAE,WACzD;IAAC,SAAS,EAAE,YAAY,CAAC;IAAC,cAAc,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,UAAU,CAAA;CAAC,UAEpE,UAAU,MAAM,CAAC,GACf,gBAAgB,CAoD5B;;;;;;;;;YApEa,YAAY;;;;;aAEZ,YAAY;;;;WAEZ,UAAU"}

package/src/generation/foliage/material/tree_cluster_tiles.js

@@ -0,0 +1,75 @@
+const SCRATCH_P = new Float32Array(3);
+
+/**
+ * Where each cluster card's tile lies.
+ *
+ * @typedef {Object} TreeClusterTiles
+ * @property {Float64Array} frames per card, 12: its origin, and its axes `e1` (along the tile's u), `e2` (along v)
+ *           and normal `n`, right-handed
+ * @property {Float64Array} extents per card, 4: where the tile's corners `(0, 0)` and `(1, 1)` lie on the card's plane,
+ *           along `e1` and `e2` from its origin, m
+ * @property {Int32Array} sizes per card, its tile's width and height in texels
+ */
+
+/**
+ * Each card's tile (`tree_cluster_cards`) at its texel: on its plane, holding its pressed leaves (`tree_cluster_press`)
+ * and its twig segments as wide as they are, with a texel to spare on every side.
+ *
+ * @param {import("../skeleton/TreeSkeleton.js").TreeSkeleton} skeleton
+ * @param {import("../mesh/tree_cluster_cards.js").TreeClusterCard[]} cards
+ * @param {{positions: Float32Array, verts_per_leaf: number, first: Int32Array}} pressed the cards' leaves, pressed onto
+ *        them (`tree_cluster_press`)
+ * @param {ArrayLike<number>} texels per card, m, a texel's side
+ * @returns {TreeClusterTiles}
+ */
+export function tree_cluster_tiles(skeleton, cards, pressed, texels) {
+    const count = cards.length;
+    const positions = pressed.positions;
+    const verts_per_leaf = pressed.verts_per_leaf;
+    const nodes = [], edges = [];
+
+    const frames = new Float64Array(count * 12);
+    const extents = new Float64Array(count * 4);
+    const sizes = new Int32Array(count * 2);
+    for (let i = 0; i < count; i++) {
+        const card = cards[i];
+        const texel = texels[i];
+        const ox = card.origin[0], oy = card.origin[1], oz = card.origin[2];
+        const nx = card.normal[0], ny = card.normal[1], nz = card.normal[2];
+        const e1x = card.axis[0], e1y = card.axis[1], e1z = card.axis[2];
+        // e2 = n x e1, so (e1, e2, n) is right-handed and the tile's u, v run along e1, e2
+        const e2x = ny * e1z - nz * e1y, e2y = nz * e1x - nx * e1z, e2z = nx * e1y - ny * e1x;
+        frames.set([ox, oy, oz, e1x, e1y, e1z, e2x, e2y, e2z, nx, ny, nz], i * 12);
+
+        let min1 = Infinity, max1 = -Infinity, min2 = Infinity, max2 = -Infinity;
+        const extend = (x, y, z, pad) => {
+            const a = (x - ox) * e1x + (y - oy) * e1y + (z - oz) * e1z;
+            const b = (x - ox) * e2x + (y - oy) * e2y + (z - oz) * e2z;
+            min1 = Math.min(min1, a - pad);
+            max1 = Math.max(max1, a + pad);
+            min2 = Math.min(min2, b - pad);
+            max2 = Math.max(max2, b + pad);
+        };
+        for (let v = pressed.first[i] * verts_per_leaf; v < pressed.first[i + 1] * verts_per_leaf; v++) {
+            extend(positions[v * 3], positions[v * 3 + 1], positions[v * 3 + 2], 0);
+        }
+        for (let k = 0; k < card.segments.length; k += 2) {
+            skeleton.collect_branch_chain(card.segments[k], nodes, edges);
+            for (const v of [nodes[card.segments[k + 1]], nodes[card.segments[k + 1] + 1]]) {
+                skeleton.node_read_position(SCRATCH_P, 0, v);
+                extend(SCRATCH_P[0], SCRATCH_P[1], SCRATCH_P[2], skeleton.node_read_radius(v));
+            }
+        }
+        if (!(max1 >= min1)) {
+            min1 = max1 = min2 = max2 = 0;
+        }
+        // a texel to spare on every side
+        const w = Math.ceil((max1 - min1) / texel) + 2;
+        const h = Math.ceil((max2 - min2) / texel) + 2;
+        sizes[i * 2] = w;
+        sizes[i * 2 + 1] = h;
+        extents.set([min1 - texel, min2 - texel, min1 - texel + w * texel, min2 - texel + h * texel], i * 4);
+    }
+
+    return { frames, extents, sizes };
+}