SDF-2D library

A graphics library to enable the real-time rendering of 2D signed distance fields on the web.

Links

• View it in action (demos)
• View it in action (video game)
• Documentation
• In-depth information

Features

• Works with both WebGL and WebGL2

  The former is mostly required for supporting iPhones.

• Performant even on low-end mobile devices

  Try it out yourself!

• Has a number of built-in shapes and lights
• Easily extensible with new shapes
• Antialiasing is implemented
• Has built-in quality autoscaling
• Requires no boilerplate code
  • Automatic detection of WebGL and its extensions is provided
  • Parallel, non-blocking shader compiling
  • Context lost is handled with automatic restoration
  • Can be used without thinking of the GPU (although for stunning results it, should be kept in mind)

Four separate screenshots taken on a mobile device

Install

npm install sdf-2d --save-dev

Use

import { compile, CircleFactory, hsl, CircleLight } from 'sdf-2d';

const main = async () => {
  const Circle = CircleFactory(hsl(30, 66, 50));
  const canvas = document.querySelector('canvas');

  const renderer = await compile(canvas, [Circle.descriptor, CircleLight.descriptor]);

  renderer.addDrawable(new Circle([200, 200], 50));
  renderer.addDrawable(new CircleLight([500, 300], [1, 0.5, 0], 0.5));
  renderer.renderDrawables();
};

main();

A commented version of the above code can be found in this repo.

Examples

For further examples, please visit the following repositories:

• Minimal example (using Webpack)
• More complex example
• Source for the demo page
• Source for decla.red, the multiplayer game

Documentation

For more technical details, please consult the documentation available in the repository and at schmelczerandras.github.io/sdf-2d/.

Plans

• Automatic tile multiplier scaling
• Non-uniform tile sizes based on scene density