This project is part of the @thi.ng/umbrella monorepo and anti-framework.

• About
• Status
• Installation
• Dependencies
• Usage examples
• API
• Authors
• License

Multi-channel SDF font rendering & basic text layout for WebGL. This is a support package for @thi.ng/webgl.

This package provides multi-channel SDF font rendering capabilities for @thi.ng/webgl, incl. optional support for basic text alignment, vertex colors (e.g. for multi-color text), and shader options to draw outlines for each character. Furthermore, the key GLSL functions are provided as shader snippets to embed this functionality in custom shaders without having to resort to copy & paste.

There're different versions of MSDF font generators. The format supported by this module is based on Don McCurdy's.

STABLE - used in production

Search or submit any issues for this package

yarn add @thi.ng/webgl-msdf

ES module import:

<script type="module" src="https://cdn.skypack.dev/@thi.ng/webgl-msdf"></script>

Skypack documentation

For Node.js REPL:

const webglMsdf = await import("@thi.ng/webgl-msdf");

Package sizes (brotli'd, pre-treeshake): ESM: 1.56 KB

• @thi.ng/api
• @thi.ng/shader-ast
• @thi.ng/transducers
• @thi.ng/vector-pools
• @thi.ng/vectors
• @thi.ng/webgl

Several demos in this repo's /examples directory are using this package.

A selection:

Screenshot	Description	Live demo	Source
	WebGL MSDF text rendering & particle system	Demo	Source

Generated API docs

TODO

• Karsten Schmidt

If this project contributes to an academic publication, please cite it as:

@misc{thing-webgl-msdf,
  title = "@thi.ng/webgl-msdf",
  author = "Karsten Schmidt",
  note = "https://thi.ng/webgl-msdf",
  year = 2019
}

© 2019 - 2023 Karsten Schmidt // Apache License 2.0