Graphics framework for efficiently rendering 2D signed distance fields.
npm install sdf-2dA graphics library to enable the real-time rendering of 2D signed distance fields on the web.
!screenshot of merging circles
- View it in action (demos)
- View it in action (video game)
- Documentation
- In-depth information
- 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 screenshots from mobiles
> Four separate screenshots taken on a mobile device
``sh`
npm install sdf-2d --save-dev
`js
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.
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
For more technical details, please consult the documentation available in the repository and at schmelczerandras.github.io/sdf-2d/.
- Automatic tile multiplier scaling
- Non-uniform tile sizes based on scene density