Plot GPU functions

Separate compilation from rendering

A .shade.ts callback is compiled on the build machine. The browser receives a serialized program and the runtime. The compiler and TypeScript are not included in the browser entry. Ordinary JavaScript callbacks supply host-sampled data to the precompiled TypeShade data renderer.

Configure Vite

The plugin compiles ?plot imports and watches shader dependencies. Parameter defaults must follow the callback's extra scalar arguments. Keep the real callback in a named shader file.

import { defineConfig } from "vite";
import { typeplot } from "typeplot/vite";

export default defineConfig({
  plugins: [typeplot({
    configure: file => file.endsWith("curve.shade.ts")
      ? { parameters: { exponent: 2 } }
      : {},
  })],
});

Render a scalar function

The first scalar argument is x. Extra arguments are configurable parameters. Guard the mathematical domain in the callback; a magnitude of at least 1e18 omits a point. Configure parameters for curve.shade.ts as shown above.

// curve.shade.ts — compiled by the TypePlot Vite plugin
"use typeshade";
export function sample(x: f32, exponent: f32): f32 {
  if (x < 0) return 1e20;
  return pow(x, exponent);
}

// main.ts — browser runtime
import { createPlot } from "typeplot";
import curve from "./curve.shade.ts?plot";
const plot = await createPlot(canvas, curve, {
  bounds: { x: [0, 1], y: [0, 1] },
  parameters: { exponent: 2 },
});
// Call plot.destroy() when the view unmounts.

Render a spatial curve

A parametric callback returns vec3. Its first argument is the curve parameter. The x bounds supply its parameter interval; x/y bounds normalize the camera. Spatial plots use a bounded polyline and open in 3D with perspective projection. Orthographic projection is also available; 2D always uses orthographic projection.

// helix.shade.ts
"use typeshade";
export function sample(t: f32): vec3 {
  return vec3(cos(t) * 2, sin(t), t * 0.4);
}

// main.ts
import { createPlot } from "typeplot";
import helix from "./helix.shade.ts?plot=3d";
const plot = await createPlot(canvas, helix, {
  bounds: { x: [-6.28, 6.28], y: [-1.25, 1.25] },
});

Host integration and resources

The host owns the GPU canvas and its CSS size. TypePlot adjusts the drawing buffer for display density. createPlot returns a Promise; await it, handle a rejected backend, and destroy the plot on unmount.

• auto attempts WebGPU and falls back to WebGL2. Explicit backends report failures.
• Add typeplot/client to host declarations and exclude **/*.shade.ts from the host tsconfig.
• Returning a hidden point does not replace all discontinuity handling. Compile with discontinuous: true when needed.
• PNG export through Figure is currently for data figures, not GPU canvases.

const plot = await createPlot(canvas, program, { backend: "auto" });
plot.setParameters({ exponent: 3 });
plot.setMode("3d");
plot.reset();
plot.destroy();