sdf-2d
v0.7.6
Published
Graphics framework for efficiently rendering 2D signed distance fields.
Downloads
6
Maintainers
Readme
SDF-2D library
A graphics library to enable the real-time rendering of 2D signed distance fields on the web.
Links
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