blotter

Migrating from Blotter.js

blotter.ts keeps the rendering architecture of the original Blotter and replaces its API. The atlas, the single draw call, the per-text canvases and the five bundled materials all behave as before; what changes is how you get at them.

Legacy Now
<script> + window.Blotter.* globals Named ESM imports from blotter.ts
Separate material <script> downloads import { ChannelSplitMaterial } from "blotter.ts/materials"
new Blotter.Text(...), new Blotter.Material() new Text(...), new Material()
thing.needsUpdate = true blotter.update() / material.update() / automatic on text.value =
blotter.on("ready", ...) await blotter.ready (the event still fires)
Blotter.Assets.Shaders.PI import { shaders } from "blotter.ts" → shaders.pi
Blotter._extendWithGettersSetters subclass protocol class MyMaterial extends Material
Bundled underscore/EventEmitter/Three custom build Gone; three is a peer dependency

Before

The first example from the original documentation, as it was written for Blotter.js:

<script src="./path/to/blotter.js"></script>
<script src="./path/to/materials/liquidDistortMaterial.js"></script>
<script>
  var text = new Blotter.Text("observation", {
    family : "'EB Garamond', serif",
    size : 27,
    fill : "#202020"
  });

  var material = new Blotter.LiquidDistortMaterial();

  var blotter = new Blotter(material, {
    texts : text
  });

  blotter.on("ready", function () {
    var elem = document.getElementById("plain-text");
    var scope = blotter.forText(text);

    scope.appendTo(elem);
  });
</script>

After

The same example against blotter.ts:

import { Blotter, Text } from "blotter.ts";
import { LiquidDistortMaterial } from "blotter.ts/materials";

const text = new Text("observation", {
  family: "'EB Garamond', serif",
  size: 27,
  fill: "#202020",
});

const material = new LiquidDistortMaterial();
const blotter = new Blotter(material, { texts: text });

const elem = document.getElementById("plain-text");
if (elem) blotter.forText(text)?.appendTo(elem);
await blotter.ready;

Note that forText can return undefined for an unknown text, so TypeScript users will want the optional chain, and that the material no longer needs a separate download: it is a named import.

Credits

Blotter was created by Bradley Griffith. Shader helpers are adapted from Reza Ali's Fragment, and atlas packing from Jake Gordon's bin-packing. See the upstream project for the full original credits.

source code