Render text at
scene scale.

bun add pixi-glyphflow pixi.js pixi-viewport

import { Application } from "pixi.js";
import { TextLayer } from "pixi-glyphflow";

const app = new Application();
await app.init({
  resizeTo: window,
  preference: ["webgpu", "webgl"],
  webgl: { preferWebGLVersion: 2 },
});
document.body.appendChild(app.canvas);

const labels = new TextLayer({
  renderer: app.renderer,
  initialCapacity: 1_000_000,
  culling: {
    bounds: { x: 0, y: 0, width: 1280, height: 720 },
    padding: 32,
  },
});
app.stage.addChild(labels);

labels.create({
  text: "Shanghai 24 C",
  x: 24,
  y: 32,
  style: { fontFamily: "Inter", fontSize: 18, fill: 0xffffff },
});

await labels.commit();

const id = labels.create({
  text: "Hello, Glyphflow",
});

await labels.commit();

const stationSigns = labels.createGroup();

labels.create({ text: "Entrance", group: stationSigns });
const exit = labels.create({ text: "Exit", group: stationSigns });

labels.setGroupVisible(stationSigns, false);
await labels.commit();

labels.setGroupVisible(stationSigns, true);
labels.update(exit, { visible: false });
await labels.commit();

labels.create({
  text: "入口",
  x: 80,
  y: 40,
  layout: { writingMode: "vertical-rl" },
  style: {
    fontSize: 24,
    fontWeight: "700",
    fill: 0x38bdf8,
  },
});

await labels.commit();

import { Viewport } from "pixi-viewport";
import { bindViewport } from "pixi-glyphflow/viewport";

const viewport = new Viewport({
  screenWidth: app.screen.width,
  screenHeight: app.screen.height,
  worldWidth: 18_000,
  worldHeight: 12_000,
  events: app.renderer.events,
});

viewport.drag().decelerate().wheel().pinch();
app.stage.addChild(viewport);

const binding = bindViewport(labels, viewport, { addChild: true });
await binding.whenIdle();

const movingIds = new Float64Array(100_000);
const positions = new Float32Array(200_000);

// Fill identities from createMany() and write packed x/y pairs.
labels.updatePositions(movingIds, positions);
await labels.commit();

console.table({
  revision: labels.stats.revision,
  visible: labels.stats.visibleLabelCount,
  glyphs: labels.stats.submittedGlyphs,
});

const productFonts = [
  ["Product CJKV", "/fonts/product-cjkv.ttf"],
  ["Product Arabic", "/fonts/product-arabic.ttf"],
  ["Product Devanagari", "/fonts/product-devanagari.ttf"],
  ["Product Hebrew", "/fonts/product-hebrew.ttf"],
  ["Product Thai", "/fonts/product-thai.ttf"],
] as const;

await Promise.all(
  productFonts.map(async ([family, url]) => {
    const source = new Uint8Array(
      await fetch(url).then((response) => response.arrayBuffer()),
    );
    await labels.fonts.register({ family, source });
  }),
);

labels.fonts.registerFallback("global-ui", [
  ...productFonts.map(([family]) => family),
  "system-ui",
  "PingFang SC",
  "Hiragino Sans",
  "Apple SD Gothic Neo",
  "sans-serif",
]);

labels.create({
  text: "日本語 · 東京テキスト",
  style: { fontFamily: "global-ui", fontSize: 24 },
  shaping: {
    language: "ja",
    script: "Jpan",
    features: ["kern", "liga"],
    variations: { wght: 560 },
  },
});

await labels.commit();