gloop-sim 0.0.0-stage → 1.0.0

package/dist/render/backend/cloud.d.ts

@@ -0,0 +1,77 @@
+import type { Mesh } from "three/webgpu";
+import { type Frame } from "../../render/frame.js";
+import type { ParticleGlyph } from "../../render/layer.js";
+import type { ColorValue, ScalarValue } from "../../render/ramp.js";
+import type { Source } from "../../render/sources.js";
+/**
+ * The position, size, and color of one glyph, in scene units and linear
+ * color.
+ */
+export interface GlyphInstance {
+    halfSize: number;
+    center: {
+        x: number;
+        y: number;
+        z: number;
+    };
+    color: {
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+    };
+}
+/**
+ * Reads the glyph drawn for one particle.
+ */
+export type GlyphReader = (particle: number) => GlyphInstance;
+export interface GlyphStyle {
+    /**
+     * The rendering data source from which the style values should be computed.
+     */
+    readonly source: Source;
+    /**
+     * The color of the glyphs.
+     */
+    readonly color: ColorValue;
+    /**
+     * The size of the glyphs.
+     */
+    readonly size: ScalarValue;
+    /**
+     * The opacity of the glyphs.
+     */
+    readonly opacity: ScalarValue;
+}
+export interface GlyphCloud {
+    /**
+     * The mesh used to render the glyphs.
+     */
+    readonly mesh: Mesh;
+    /**
+     * Updates the glyph cloud with the given frame data and index list.
+     */
+    update(frame: Frame, indices: readonly number[]): void;
+    /**
+     * Disposes the glyph cloud, freeing its resources.
+     */
+    dispose(): void;
+}
+export interface GlyphCloudOptions<G extends ParticleGlyph = ParticleGlyph> {
+    /**
+     * The shape of the glyphs.
+     */
+    shape: G;
+    /**
+     * Styling options for the glyphs.
+     */
+    style: GlyphStyle;
+    /**
+     * A scale factor for the size of the glyphs.
+     */
+    sizeScale: number;
+}
+/**
+ * Prepares a reader for the glyphs of `frame` in the given style.
+ */
+export declare function prepareGlyphReader(style: GlyphStyle, sizeScale: number, frame: Frame): GlyphReader;

package/dist/render/backend/cloud.js

@@ -0,0 +1,29 @@
+import { PackedPositions } from "../../render/frame.js";
+const PARTICLE_HALF_SIZE_WORLD = 0.006;
+/**
+ * Prepares a reader for the glyphs of `frame` in the given style.
+ */
+export function prepareGlyphReader(style, sizeScale, frame) {
+    const sizeAt = style.size.prepare(style.source);
+    const colorAt = style.color.prepare(style.source);
+    const opacityAt = style.opacity.prepare(style.source);
+    const points = PackedPositions.of(frame.positions);
+    return (particle) => {
+        const rgba = colorAt(particle);
+        return {
+            halfSize: sizeAt(particle) * sizeScale * PARTICLE_HALF_SIZE_WORLD,
+            center: {
+                x: points.x(particle),
+                y: points.y(particle),
+                z: points.z(particle),
+            },
+            color: {
+                r: rgba.r,
+                g: rgba.g,
+                b: rgba.b,
+                a: rgba.a * opacityAt(particle),
+            },
+        };
+    };
+}
+//# sourceMappingURL=cloud.js.map

package/dist/render/backend/cloud.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cloud.js","sourceRoot":"","sources":["../../../src/render/backend/cloud.ts"],"names":[],"mappings":"AACA,OAAO,EAAc,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAKhE,MAAM,wBAAwB,GAAG,KAAK,CAAC;AAyEvC;;GAEG;AACH,MAAM,UAAU,kBAAkB,CAAC,KAAiB,EAAE,SAAiB,EAAE,KAAY;IACnF,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACtD,MAAM,MAAM,GAAG,eAAe,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAEnD,OAAO,CAAC,QAAgB,EAAE,EAAE;QAC1B,MAAM,IAAI,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAC;QAC/B,OAAO;YACL,QAAQ,EAAE,MAAM,CAAC,QAAQ,CAAC,GAAG,SAAS,GAAG,wBAAwB;YACjE,MAAM,EAAE;gBACN,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;gBACrB,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;gBACrB,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;aACtB;YACD,KAAK,EAAE;gBACL,CAAC,EAAE,IAAI,CAAC,CAAC;gBACT,CAAC,EAAE,IAAI,CAAC,CAAC;gBACT,CAAC,EAAE,IAAI,CAAC,CAAC;gBACT,CAAC,EAAE,IAAI,CAAC,CAAC,GAAG,SAAS,CAAC,QAAQ,CAAC;aAChC;SACF,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import type { Mesh } from \"three/webgpu\";\nimport { type Frame, PackedPositions } from \"@/render/frame.js\";\nimport type { ParticleGlyph } from \"@/render/layer.js\";\nimport type { ColorValue, ScalarValue } from \"@/render/ramp.js\";\nimport type { Source } from \"@/render/sources.js\";\n\nconst PARTICLE_HALF_SIZE_WORLD = 0.006;\n\n/**\n * The position, size, and color of one glyph, in scene units and linear\n * color.\n */\nexport interface GlyphInstance {\n  halfSize: number;\n  center: { x: number; y: number; z: number };\n  color: { r: number; g: number; b: number; a: number };\n}\n\n/**\n * Reads the glyph drawn for one particle.\n */\nexport type GlyphReader = (particle: number) => GlyphInstance;\n\nexport interface GlyphStyle {\n  /**\n   * The rendering data source from which the style values should be computed.\n   */\n  readonly source: Source;\n\n  /**\n   * The color of the glyphs.\n   */\n  readonly color: ColorValue;\n\n  /**\n   * The size of the glyphs.\n   */\n  readonly size: ScalarValue;\n\n  /**\n   * The opacity of the glyphs.\n   */\n  readonly opacity: ScalarValue;\n}\n\nexport interface GlyphCloud {\n  /**\n   * The mesh used to render the glyphs.\n   */\n  readonly mesh: Mesh;\n\n  /**\n   * Updates the glyph cloud with the given frame data and index list.\n   */\n  update(frame: Frame, indices: readonly number[]): void;\n\n  /**\n   * Disposes the glyph cloud, freeing its resources.\n   */\n  dispose(): void;\n}\n\nexport interface GlyphCloudOptions<G extends ParticleGlyph = ParticleGlyph> {\n  /**\n   * The shape of the glyphs.\n   */\n  shape: G;\n\n  /**\n   * Styling options for the glyphs.\n   */\n  style: GlyphStyle;\n\n  /**\n   * A scale factor for the size of the glyphs.\n   */\n  sizeScale: number;\n}\n\n/**\n * Prepares a reader for the glyphs of `frame` in the given style.\n */\nexport function prepareGlyphReader(style: GlyphStyle, sizeScale: number, frame: Frame): GlyphReader {\n  const sizeAt = style.size.prepare(style.source);\n  const colorAt = style.color.prepare(style.source);\n  const opacityAt = style.opacity.prepare(style.source);\n  const points = PackedPositions.of(frame.positions);\n\n  return (particle: number) => {\n    const rgba = colorAt(particle);\n    return {\n      halfSize: sizeAt(particle) * sizeScale * PARTICLE_HALF_SIZE_WORLD,\n      center: {\n        x: points.x(particle),\n        y: points.y(particle),\n        z: points.z(particle),\n      },\n      color: {\n        r: rgba.r,\n        g: rgba.g,\n        b: rgba.b,\n        a: rgba.a * opacityAt(particle),\n      },\n    };\n  };\n}\n"]}

package/dist/render/backend/compile.d.ts

@@ -0,0 +1,31 @@
+import type { Node } from "three/webgpu";
+import type { Channel } from "../../render/channel.js";
+import { type ColorValue, type ScalarValue } from "../../render/ramp.js";
+import type { Signal } from "../../render/signal.js";
+import type { Source } from "../../render/sources.js";
+/**
+ * A compiled scalar value in the shader node graph.
+ */
+export type ScalarNode = Node<"float">;
+/**
+ * A compiled color in the shader node graph, holding sRGB channels that are not
+ * scaled by opacity.
+ */
+export type ColorNode = Node<"vec3">;
+/**
+ * Returns the node holding a channel's raw per-element value.
+ */
+export type ChannelNodes<S extends Source> = (channel: Channel<S>) => ScalarNode;
+/**
+ * Maps a signal's channel from its domain into `0..1`. This is the GPU version
+ * of `normalizeSignal`.
+ */
+export declare function compileSignal<S extends Source>(signal: Signal<S>, raw: ChannelNodes<S>): ScalarNode;
+/**
+ * Compiles a dynamic scalar into a shader-graph node.
+ */
+export declare function compileScalar<S extends Source>(value: ScalarValue<S>, raw: ChannelNodes<S>): ScalarNode;
+/**
+ * Compiles a dynamic color into a `vec3` shader-graph node of sRGB channels.
+ */
+export declare function compileColor<S extends Source>(value: ColorValue<S>, raw: ChannelNodes<S>): ColorNode;

package/dist/render/backend/compile.js

@@ -0,0 +1,73 @@
+import { clamp, float, mix, vec3 } from "three/tsl";
+import { color as srgb } from "../../render/color.js";
+import { ramp } from "../../render/ramp.js";
+/**
+ * Maps a signal's channel from its domain into `0..1`. This is the GPU version
+ * of `normalizeSignal`.
+ */
+export function compileSignal(signal, raw) {
+    const [low, high] = signal.domain;
+    const t = raw(signal.channel)
+        .sub(low)
+        .div(high - low);
+    return signal.clamp ? clamp(t, 0, 1) : t;
+}
+/**
+ * Compiles a dynamic scalar into a shader-graph node.
+ */
+export function compileScalar(value, raw) {
+    if (!ramp.is(value)) {
+        return float(value.value);
+    }
+    return foldScalar(value.stops, compileSignal(value.by, raw));
+}
+/**
+ * Compiles a dynamic color into a `vec3` shader-graph node of sRGB channels.
+ */
+export function compileColor(value, raw) {
+    if (!ramp.is(value)) {
+        return colorNode(value.value);
+    }
+    return foldColor(value.stops, compileSignal(value.by, raw));
+}
+function colorNode(value) {
+    const { r, g, b } = srgb.parse(value);
+    return vec3(r, g, b);
+}
+function localFraction(from, to, t) {
+    const span = to - from;
+    return span === 0 ? float(1) : clamp(t.sub(from).div(span), 0, 1);
+}
+function foldScalar(stops, t) {
+    const first = stops[0];
+    if (first === undefined) {
+        return float(0);
+    }
+    let value = float(first.value);
+    for (let index = 1; index < stops.length; index++) {
+        const from = stops[index - 1];
+        const to = stops[index];
+        if (from === undefined || to === undefined) {
+            continue;
+        }
+        value = mix(value, float(to.value), localFraction(from.at, to.at, t));
+    }
+    return value;
+}
+function foldColor(stops, t) {
+    const first = stops[0];
+    if (first === undefined) {
+        return vec3(0, 0, 0);
+    }
+    let value = colorNode(first.value);
+    for (let index = 1; index < stops.length; index++) {
+        const from = stops[index - 1];
+        const to = stops[index];
+        if (from === undefined || to === undefined) {
+            continue;
+        }
+        value = mix(value, colorNode(to.value), localFraction(from.at, to.at, t));
+    }
+    return value;
+}
+//# sourceMappingURL=compile.js.map

package/dist/render/backend/compile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compile.js","sourceRoot":"","sources":["../../../src/render/backend/compile.ts"],"names":[],"mappings":"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","sourcesContent":["import { clamp, float, mix, vec3 } from \"three/tsl\";\nimport type { Node } from \"three/webgpu\";\nimport type { Channel } from \"@/render/channel.js\";\nimport { type Color, color as srgb } from \"@/render/color.js\";\nimport { type ColorValue, ramp, type ScalarValue, type Stop } from \"@/render/ramp.js\";\nimport type { Signal } from \"@/render/signal.js\";\nimport type { Source } from \"@/render/sources.js\";\n\n/**\n * A compiled scalar value in the shader node graph.\n */\nexport type ScalarNode = Node<\"float\">;\n\n/**\n * A compiled color in the shader node graph, holding sRGB channels that are not\n * scaled by opacity.\n */\nexport type ColorNode = Node<\"vec3\">;\n\n/**\n * Returns the node holding a channel's raw per-element value.\n */\nexport type ChannelNodes<S extends Source> = (channel: Channel<S>) => ScalarNode;\n\n/**\n * Maps a signal's channel from its domain into `0..1`. This is the GPU version\n * of `normalizeSignal`.\n */\nexport function compileSignal<S extends Source>(signal: Signal<S>, raw: ChannelNodes<S>): ScalarNode {\n  const [low, high] = signal.domain;\n  const t = raw(signal.channel)\n    .sub(low)\n    .div(high - low);\n  return signal.clamp ? clamp(t, 0, 1) : t;\n}\n\n/**\n * Compiles a dynamic scalar into a shader-graph node.\n */\nexport function compileScalar<S extends Source>(value: ScalarValue<S>, raw: ChannelNodes<S>): ScalarNode {\n  if (!ramp.is(value)) {\n    return float(value.value);\n  }\n  return foldScalar(value.stops, compileSignal(value.by, raw));\n}\n\n/**\n * Compiles a dynamic color into a `vec3` shader-graph node of sRGB channels.\n */\nexport function compileColor<S extends Source>(value: ColorValue<S>, raw: ChannelNodes<S>): ColorNode {\n  if (!ramp.is(value)) {\n    return colorNode(value.value);\n  }\n  return foldColor(value.stops, compileSignal(value.by, raw));\n}\n\nfunction colorNode(value: Color): ColorNode {\n  const { r, g, b } = srgb.parse(value);\n  return vec3(r, g, b);\n}\n\nfunction localFraction(from: number, to: number, t: ScalarNode): ScalarNode {\n  const span = to - from;\n  return span === 0 ? float(1) : clamp(t.sub(from).div(span), 0, 1);\n}\n\nfunction foldScalar(stops: readonly Stop<number>[], t: ScalarNode): ScalarNode {\n  const first = stops[0];\n  if (first === undefined) {\n    return float(0);\n  }\n  let value: ScalarNode = float(first.value);\n  for (let index = 1; index < stops.length; index++) {\n    const from = stops[index - 1];\n    const to = stops[index];\n    if (from === undefined || to === undefined) {\n      continue;\n    }\n    value = mix(value, float(to.value), localFraction(from.at, to.at, t));\n  }\n  return value;\n}\n\nfunction foldColor(stops: readonly Stop<Color>[], t: ScalarNode): ColorNode {\n  const first = stops[0];\n  if (first === undefined) {\n    return vec3(0, 0, 0);\n  }\n  let value: ColorNode = colorNode(first.value);\n  for (let index = 1; index < stops.length; index++) {\n    const from = stops[index - 1];\n    const to = stops[index];\n    if (from === undefined || to === undefined) {\n      continue;\n    }\n    value = mix(value, colorNode(to.value), localFraction(from.at, to.at, t));\n  }\n  return value;\n}\n"]}

package/dist/render/backend/glyph.d.ts

@@ -0,0 +1,8 @@
+import type { Node } from "three/webgpu";
+import type { FlatGlyph } from "../../render/layer.js";
+/**
+ * Computes a particle glyph's opacity at one point inside its quad. `p` is the
+ * point's position from the glyph center: `-1` at one edge, `1` at the other, on
+ * each axis. The result is `0` for transparent and `1` for opaque.
+ */
+export declare function glyphMask(shape: FlatGlyph, p: Node<"vec2">): Node<"float">;

package/dist/render/backend/glyph.js

@@ -0,0 +1,38 @@
+import { abs, float, length, max, smoothstep } from "three/tsl";
+const EDGE = 0.08;
+function ring({ radius, width, distance }) {
+    return float(1).sub(smoothstep(width, width + EDGE, abs(distance.sub(radius))));
+}
+function bar({ across, along, width, extent }) {
+    const inWidth = float(1).sub(smoothstep(width, width + EDGE, abs(across)));
+    const inLength = float(1).sub(smoothstep(extent, extent + EDGE, abs(along)));
+    return inWidth.mul(inLength);
+}
+/**
+ * Computes a particle glyph's opacity at one point inside its quad. `p` is the
+ * point's position from the glyph center: `-1` at one edge, `1` at the other, on
+ * each axis. The result is `0` for transparent and `1` for opaque.
+ */
+export function glyphMask(shape, p) {
+    const px = p.x;
+    const py = p.y;
+    const distance = length(p);
+    const diamond = abs(px).add(abs(py));
+    switch (shape) {
+        case "point":
+            return float(1).sub(smoothstep(0.45, 0.7, distance));
+        case "circle":
+            return ring({ radius: 0.6, width: 0.13, distance });
+        case "diamond":
+            return ring({ radius: 0.7, width: 0.14, distance: diamond });
+        case "cross":
+            return max(bar({ across: py, along: px, width: 0.13, extent: 0.85 }), bar({ across: px, along: py, width: 0.13, extent: 0.85 }));
+        case "reticle":
+            return max(ring({ radius: 0.58, width: 0.1, distance }), max(bar({ across: py, along: px, width: 0.07, extent: 0.9 }), bar({ across: px, along: py, width: 0.07, extent: 0.9 })));
+        case "gyroscope":
+            return max(max(ring({ radius: 0.85, width: 0.09, distance }), ring({ radius: 0.48, width: 0.09, distance })), max(bar({ across: py, along: px, width: 0.06, extent: 0.85 }), bar({ across: px, along: py, width: 0.06, extent: 0.85 })));
+        default:
+            return float(1);
+    }
+}
+//# sourceMappingURL=glyph.js.map

package/dist/render/backend/glyph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"glyph.js","sourceRoot":"","sources":["../../../src/render/backend/glyph.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAIhE,MAAM,IAAI,GAAG,IAAI,CAAC;AAelB,SAAS,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAe;IACpD,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,EAAE,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AAClF,CAAC;AAED,SAAS,GAAG,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAc;IACvD,MAAM,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAC3E,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC7E,OAAO,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;AAC/B,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,SAAS,CAAC,KAAgB,EAAE,CAAe;IACzD,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;IACf,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;IACf,MAAM,QAAQ,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAC3B,MAAM,OAAO,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;IAErC,QAAQ,KAAK,EAAE,CAAC;QACd,KAAK,OAAO;YACV,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC;QACvD,KAAK,QAAQ;YACX,OAAO,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;QACtD,KAAK,SAAS;YACZ,OAAO,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC;QAC/D,KAAK,OAAO;YACV,OAAO,GAAG,CACR,GAAG,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EACzD,GAAG,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAC1D,CAAC;QACJ,KAAK,SAAS;YACZ,OAAO,GAAG,CACR,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,EAC5C,GAAG,CACD,GAAG,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EACxD,GAAG,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CACzD,CACF,CAAC;QACJ,KAAK,WAAW;YACd,OAAO,GAAG,CACR,GAAG,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,EACjG,GAAG,CACD,GAAG,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EACzD,GAAG,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAC1D,CACF,CAAC;QACJ;YACE,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC;IACpB,CAAC;AACH,CAAC","sourcesContent":["import { abs, float, length, max, smoothstep } from \"three/tsl\";\nimport type { Node } from \"three/webgpu\";\nimport type { FlatGlyph } from \"@/render/layer.js\";\n\nconst EDGE = 0.08;\n\ninterface RingOptions {\n  radius: number;\n  width: number;\n  distance: Node<\"float\">;\n}\n\ninterface BarOptions {\n  across: Node<\"float\">;\n  along: Node<\"float\">;\n  width: number;\n  extent: number;\n}\n\nfunction ring({ radius, width, distance }: RingOptions): Node<\"float\"> {\n  return float(1).sub(smoothstep(width, width + EDGE, abs(distance.sub(radius))));\n}\n\nfunction bar({ across, along, width, extent }: BarOptions): Node<\"float\"> {\n  const inWidth = float(1).sub(smoothstep(width, width + EDGE, abs(across)));\n  const inLength = float(1).sub(smoothstep(extent, extent + EDGE, abs(along)));\n  return inWidth.mul(inLength);\n}\n\n/**\n * Computes a particle glyph's opacity at one point inside its quad. `p` is the\n * point's position from the glyph center: `-1` at one edge, `1` at the other, on\n * each axis. The result is `0` for transparent and `1` for opaque.\n */\nexport function glyphMask(shape: FlatGlyph, p: Node<\"vec2\">): Node<\"float\"> {\n  const px = p.x;\n  const py = p.y;\n  const distance = length(p);\n  const diamond = abs(px).add(abs(py));\n\n  switch (shape) {\n    case \"point\":\n      return float(1).sub(smoothstep(0.45, 0.7, distance));\n    case \"circle\":\n      return ring({ radius: 0.6, width: 0.13, distance });\n    case \"diamond\":\n      return ring({ radius: 0.7, width: 0.14, distance: diamond });\n    case \"cross\":\n      return max(\n        bar({ across: py, along: px, width: 0.13, extent: 0.85 }),\n        bar({ across: px, along: py, width: 0.13, extent: 0.85 }),\n      );\n    case \"reticle\":\n      return max(\n        ring({ radius: 0.58, width: 0.1, distance }),\n        max(\n          bar({ across: py, along: px, width: 0.07, extent: 0.9 }),\n          bar({ across: px, along: py, width: 0.07, extent: 0.9 }),\n        ),\n      );\n    case \"gyroscope\":\n      return max(\n        max(ring({ radius: 0.85, width: 0.09, distance }), ring({ radius: 0.48, width: 0.09, distance })),\n        max(\n          bar({ across: py, along: px, width: 0.06, extent: 0.85 }),\n          bar({ across: px, along: py, width: 0.06, extent: 0.85 }),\n        ),\n      );\n    default:\n      return float(1);\n  }\n}\n"]}

package/dist/render/backend/glyphs.d.ts

@@ -0,0 +1,6 @@
+import { type GlyphCloud, type GlyphCloudOptions } from "../../render/backend/cloud.js";
+/**
+ * Builds one glyph cloud: camera-facing quads for a flat glyph, or shaded
+ * solids for a solid one.
+ */
+export declare function buildGlyphCloud(options: GlyphCloudOptions): GlyphCloud;

package/dist/render/backend/glyphs.js

@@ -0,0 +1,146 @@
+import { attribute, cameraProjectionMatrix, modelViewMatrix, positionGeometry, uv, vec4 } from "three/tsl";
+import { BufferAttribute, BufferGeometry, DynamicDrawUsage, Mesh } from "three/webgpu";
+import { assert } from "../../assert.js";
+import { prepareGlyphReader, } from "../../render/backend/cloud.js";
+import { glyphMask } from "../../render/backend/glyph.js";
+import { material as materialFactory } from "../../render/backend/material.js";
+import { buildSolidCloud, isSolid } from "../../render/backend/solids.js";
+const VERTICES_PER_GLYPH = 6;
+const FLOATS_PER_POSITION = 3;
+const FLOATS_PER_OFFSET = 2;
+const FLOATS_PER_COLOR = 4;
+const FLOATS_PER_UV = 2;
+const POSITION_ATTRIBUTE = "position";
+const OFFSET_ATTRIBUTE = "aOffset";
+const COLOR_ATTRIBUTE = "aColor";
+const UV_ATTRIBUTE = "uv";
+const GLYPH_CORNER_OFFSETS = [
+    [-1, -1],
+    [1, -1],
+    [1, 1],
+    [-1, -1],
+    [1, 1],
+    [-1, 1],
+];
+function cornerAt(vertex) {
+    const corner = GLYPH_CORNER_OFFSETS[vertex];
+    assert(corner !== undefined, `missing glyph corner ${vertex}`);
+    return corner;
+}
+function writeGlyphTo(buffers, { at }, { halfSize, center, color }) {
+    for (let vertex = 0; vertex < VERTICES_PER_GLYPH; vertex++) {
+        const corner = cornerAt(vertex);
+        const slot = at * VERTICES_PER_GLYPH + vertex;
+        const p = slot * FLOATS_PER_POSITION;
+        buffers.positions[p] = center.x;
+        buffers.positions[p + 1] = center.y;
+        buffers.positions[p + 2] = center.z;
+        const o = slot * FLOATS_PER_OFFSET;
+        buffers.offsets[o] = corner[0] * halfSize;
+        buffers.offsets[o + 1] = corner[1] * halfSize;
+        const c = slot * FLOATS_PER_COLOR;
+        buffers.colors[c] = color.r;
+        buffers.colors[c + 1] = color.g;
+        buffers.colors[c + 2] = color.b;
+        buffers.colors[c + 3] = color.a;
+    }
+}
+function writeGlyphTextureCoordinatesTo(target, { at }) {
+    const base = at * VERTICES_PER_GLYPH * FLOATS_PER_UV;
+    for (let vertex = 0; vertex < VERTICES_PER_GLYPH; vertex++) {
+        const corner = cornerAt(vertex);
+        const offset = base + vertex * FLOATS_PER_UV;
+        target[offset] = (corner[0] + 1) / 2;
+        target[offset + 1] = (corner[1] + 1) / 2;
+    }
+}
+function fillGlyphTextureCoordinates(target, count) {
+    for (let slot = 0; slot < count; slot++) {
+        writeGlyphTextureCoordinatesTo(target, { at: slot });
+    }
+}
+function createGlyphMaterial(shape) {
+    const color = attribute(COLOR_ATTRIBUTE, "vec4");
+    const result = materialFactory.flat({
+        color: color.xyz,
+        opacity: color.w.mul(glyphMask(shape, uv().sub(0.5).mul(2))),
+    });
+    // The corner offset is added in view space, so the quad faces the camera
+    // from any direction.
+    const offset = attribute(OFFSET_ATTRIBUTE, "vec2");
+    result.vertexNode = cameraProjectionMatrix.mul(modelViewMatrix.mul(vec4(positionGeometry, 1)).add(vec4(offset, 0, 0)));
+    return result;
+}
+function dynamicAttribute(count, itemSize) {
+    const result = new BufferAttribute(new Float32Array(count * VERTICES_PER_GLYPH * itemSize), itemSize);
+    result.setUsage(DynamicDrawUsage);
+    return result;
+}
+function allocateGlyphAttributes(count) {
+    const textureCoordinates = new BufferAttribute(new Float32Array(count * VERTICES_PER_GLYPH * FLOATS_PER_UV), FLOATS_PER_UV);
+    fillGlyphTextureCoordinates(textureCoordinates.array, count);
+    return {
+        position: dynamicAttribute(count, FLOATS_PER_POSITION),
+        offsets: dynamicAttribute(count, FLOATS_PER_OFFSET),
+        colors: dynamicAttribute(count, FLOATS_PER_COLOR),
+        textureCoordinates,
+    };
+}
+function attachGlyphAttributes(geometry, attributes) {
+    geometry.setAttribute(POSITION_ATTRIBUTE, attributes.position);
+    geometry.setAttribute(OFFSET_ATTRIBUTE, attributes.offsets);
+    geometry.setAttribute(COLOR_ATTRIBUTE, attributes.colors);
+    geometry.setAttribute(UV_ATTRIBUTE, attributes.textureCoordinates);
+}
+function buffersOf(attributes) {
+    return {
+        positions: attributes.position.array,
+        offsets: attributes.offsets.array,
+        colors: attributes.colors.array,
+    };
+}
+function writeGlyphsTo(buffers, indices, read) {
+    for (let slot = 0; slot < indices.length; slot++) {
+        const particle = indices[slot];
+        assert(particle !== undefined, `glyph slot ${slot} has no source particle`);
+        writeGlyphTo(buffers, { at: slot }, read(particle));
+    }
+}
+/**
+ * Builds one glyph cloud: camera-facing quads for a flat glyph, or shaded
+ * solids for a solid one.
+ */
+export function buildGlyphCloud(options) {
+    const { shape } = options;
+    return isSolid(shape) ? buildSolidCloud({ ...options, shape }) : buildFlatCloud({ ...options, shape });
+}
+function buildFlatCloud({ shape, style, sizeScale }) {
+    const geometry = new BufferGeometry();
+    const material = createGlyphMaterial(shape);
+    const mesh = new Mesh(geometry, material);
+    mesh.frustumCulled = false;
+    let count = -1;
+    let attributes = allocateGlyphAttributes(0);
+    function resize(next) {
+        count = next;
+        attributes = allocateGlyphAttributes(next);
+        attachGlyphAttributes(geometry, attributes);
+    }
+    return {
+        mesh,
+        update(frame, indices) {
+            if (indices.length !== count) {
+                resize(indices.length);
+            }
+            writeGlyphsTo(buffersOf(attributes), indices, prepareGlyphReader(style, sizeScale, frame));
+            attributes.position.needsUpdate = true;
+            attributes.offsets.needsUpdate = true;
+            attributes.colors.needsUpdate = true;
+        },
+        dispose() {
+            geometry.dispose();
+            material.dispose();
+        },
+    };
+}
+//# sourceMappingURL=glyphs.js.map

package/dist/render/backend/glyphs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"glyphs.js","sourceRoot":"","sources":["../../../src/render/backend/glyphs.ts"],"names":[],"mappings":"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","sourcesContent":["import { attribute, cameraProjectionMatrix, modelViewMatrix, positionGeometry, uv, vec4 } from \"three/tsl\";\nimport { BufferAttribute, BufferGeometry, DynamicDrawUsage, Mesh, type MeshBasicNodeMaterial } from \"three/webgpu\";\nimport { assert } from \"@/assert.js\";\nimport {\n  type GlyphCloud,\n  type GlyphCloudOptions,\n  type GlyphInstance,\n  type GlyphReader,\n  prepareGlyphReader,\n} from \"@/render/backend/cloud.js\";\nimport { glyphMask } from \"@/render/backend/glyph.js\";\nimport { material as materialFactory } from \"@/render/backend/material.js\";\nimport { buildSolidCloud, isSolid } from \"@/render/backend/solids.js\";\nimport type { Frame } from \"@/render/frame.js\";\nimport type { FlatGlyph } from \"@/render/layer.js\";\n\nconst VERTICES_PER_GLYPH = 6;\nconst FLOATS_PER_POSITION = 3;\nconst FLOATS_PER_OFFSET = 2;\nconst FLOATS_PER_COLOR = 4;\nconst FLOATS_PER_UV = 2;\n\nconst POSITION_ATTRIBUTE = \"position\";\nconst OFFSET_ATTRIBUTE = \"aOffset\";\nconst COLOR_ATTRIBUTE = \"aColor\";\nconst UV_ATTRIBUTE = \"uv\";\n\nconst GLYPH_CORNER_OFFSETS: readonly [number, number][] = [\n  [-1, -1],\n  [1, -1],\n  [1, 1],\n  [-1, -1],\n  [1, 1],\n  [-1, 1],\n];\n\ninterface GlyphBuffers {\n  positions: Float32Array;\n  offsets: Float32Array;\n  colors: Float32Array;\n}\n\ninterface GlyphAttributes {\n  position: BufferAttribute;\n  offsets: BufferAttribute;\n  colors: BufferAttribute;\n  textureCoordinates: BufferAttribute;\n}\n\nfunction cornerAt(vertex: number): [number, number] {\n  const corner = GLYPH_CORNER_OFFSETS[vertex];\n  assert(corner !== undefined, `missing glyph corner ${vertex}`);\n  return corner;\n}\n\nfunction writeGlyphTo(buffers: GlyphBuffers, { at }: { at: number }, { halfSize, center, color }: GlyphInstance): void {\n  for (let vertex = 0; vertex < VERTICES_PER_GLYPH; vertex++) {\n    const corner = cornerAt(vertex);\n    const slot = at * VERTICES_PER_GLYPH + vertex;\n\n    const p = slot * FLOATS_PER_POSITION;\n    buffers.positions[p] = center.x;\n    buffers.positions[p + 1] = center.y;\n    buffers.positions[p + 2] = center.z;\n\n    const o = slot * FLOATS_PER_OFFSET;\n    buffers.offsets[o] = corner[0] * halfSize;\n    buffers.offsets[o + 1] = corner[1] * halfSize;\n\n    const c = slot * FLOATS_PER_COLOR;\n    buffers.colors[c] = color.r;\n    buffers.colors[c + 1] = color.g;\n    buffers.colors[c + 2] = color.b;\n    buffers.colors[c + 3] = color.a;\n  }\n}\n\nfunction writeGlyphTextureCoordinatesTo(target: Float32Array, { at }: { at: number }): void {\n  const base = at * VERTICES_PER_GLYPH * FLOATS_PER_UV;\n\n  for (let vertex = 0; vertex < VERTICES_PER_GLYPH; vertex++) {\n    const corner = cornerAt(vertex);\n    const offset = base + vertex * FLOATS_PER_UV;\n    target[offset] = (corner[0] + 1) / 2;\n    target[offset + 1] = (corner[1] + 1) / 2;\n  }\n}\n\nfunction fillGlyphTextureCoordinates(target: Float32Array, count: number): void {\n  for (let slot = 0; slot < count; slot++) {\n    writeGlyphTextureCoordinatesTo(target, { at: slot });\n  }\n}\n\nfunction createGlyphMaterial(shape: FlatGlyph): MeshBasicNodeMaterial {\n  const color = attribute<\"vec4\">(COLOR_ATTRIBUTE, \"vec4\");\n  const result = materialFactory.flat({\n    color: color.xyz,\n    opacity: color.w.mul(glyphMask(shape, uv().sub(0.5).mul(2))),\n  });\n\n  // The corner offset is added in view space, so the quad faces the camera\n  // from any direction.\n  const offset = attribute<\"vec2\">(OFFSET_ATTRIBUTE, \"vec2\");\n  result.vertexNode = cameraProjectionMatrix.mul(\n    modelViewMatrix.mul(vec4(positionGeometry, 1)).add(vec4(offset, 0, 0)),\n  );\n  return result;\n}\n\nfunction dynamicAttribute(count: number, itemSize: number): BufferAttribute {\n  const result = new BufferAttribute(new Float32Array(count * VERTICES_PER_GLYPH * itemSize), itemSize);\n  result.setUsage(DynamicDrawUsage);\n  return result;\n}\n\nfunction allocateGlyphAttributes(count: number): GlyphAttributes {\n  const textureCoordinates = new BufferAttribute(\n    new Float32Array(count * VERTICES_PER_GLYPH * FLOATS_PER_UV),\n    FLOATS_PER_UV,\n  );\n  fillGlyphTextureCoordinates(textureCoordinates.array as Float32Array, count);\n\n  return {\n    position: dynamicAttribute(count, FLOATS_PER_POSITION),\n    offsets: dynamicAttribute(count, FLOATS_PER_OFFSET),\n    colors: dynamicAttribute(count, FLOATS_PER_COLOR),\n    textureCoordinates,\n  };\n}\n\nfunction attachGlyphAttributes(geometry: BufferGeometry, attributes: GlyphAttributes): void {\n  geometry.setAttribute(POSITION_ATTRIBUTE, attributes.position);\n  geometry.setAttribute(OFFSET_ATTRIBUTE, attributes.offsets);\n  geometry.setAttribute(COLOR_ATTRIBUTE, attributes.colors);\n  geometry.setAttribute(UV_ATTRIBUTE, attributes.textureCoordinates);\n}\n\nfunction buffersOf(attributes: GlyphAttributes): GlyphBuffers {\n  return {\n    positions: attributes.position.array as Float32Array,\n    offsets: attributes.offsets.array as Float32Array,\n    colors: attributes.colors.array as Float32Array,\n  };\n}\n\nfunction writeGlyphsTo(buffers: GlyphBuffers, indices: readonly number[], read: GlyphReader): void {\n  for (let slot = 0; slot < indices.length; slot++) {\n    const particle = indices[slot];\n    assert(particle !== undefined, `glyph slot ${slot} has no source particle`);\n    writeGlyphTo(buffers, { at: slot }, read(particle));\n  }\n}\n\n/**\n * Builds one glyph cloud: camera-facing quads for a flat glyph, or shaded\n * solids for a solid one.\n */\nexport function buildGlyphCloud(options: GlyphCloudOptions): GlyphCloud {\n  const { shape } = options;\n  return isSolid(shape) ? buildSolidCloud({ ...options, shape }) : buildFlatCloud({ ...options, shape });\n}\n\nfunction buildFlatCloud({ shape, style, sizeScale }: GlyphCloudOptions<FlatGlyph>): GlyphCloud {\n  const geometry = new BufferGeometry();\n  const material = createGlyphMaterial(shape);\n  const mesh = new Mesh(geometry, material);\n  mesh.frustumCulled = false;\n\n  let count = -1;\n  let attributes = allocateGlyphAttributes(0);\n\n  function resize(next: number): void {\n    count = next;\n    attributes = allocateGlyphAttributes(next);\n    attachGlyphAttributes(geometry, attributes);\n  }\n\n  return {\n    mesh,\n\n    update(frame: Frame, indices: readonly number[]): void {\n      if (indices.length !== count) {\n        resize(indices.length);\n      }\n\n      writeGlyphsTo(buffersOf(attributes), indices, prepareGlyphReader(style, sizeScale, frame));\n\n      attributes.position.needsUpdate = true;\n      attributes.offsets.needsUpdate = true;\n      attributes.colors.needsUpdate = true;\n    },\n\n    dispose(): void {\n      geometry.dispose();\n      material.dispose();\n    },\n  };\n}\n"]}

package/dist/render/backend/gpu.d.ts

@@ -0,0 +1,12 @@
+import type { RenderBackend, Stage, StageOptions } from "../../render/stage.js";
+export declare namespace backend {
+    /**
+     * Selects the GPU rendering device.
+     */
+    function gpu(): RenderBackend;
+}
+/**
+ * Creates a GPU-backed stage on `canvas`. Waits for the device to initialize
+ * before returning.
+ */
+export declare function createStage(options: StageOptions): Promise<Stage>;