https://github.com/schmelczer/sdf-2d
A graphics library to enable the real-time rendering of 2D signed distance fields on the web.
https://github.com/schmelczer/sdf-2d
2d circle-tracing glsl graphics-library raytracing sdf-2d typescript webgl webgl2 webpack
Last synced: about 2 months ago
JSON representation
A graphics library to enable the real-time rendering of 2D signed distance fields on the web.
- Host: GitHub
- URL: https://github.com/schmelczer/sdf-2d
- Owner: schmelczer
- Created: 2020-09-16T20:10:53.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2022-01-29T20:22:25.000Z (over 4 years ago)
- Last Synced: 2025-09-30T11:22:34.370Z (8 months ago)
- Topics: 2d, circle-tracing, glsl, graphics-library, raytracing, sdf-2d, typescript, webgl, webgl2, webpack
- Language: TypeScript
- Homepage: http://schmelczer.dev/sdf-2d/
- Size: 8.6 MB
- Stars: 115
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#  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)](https://sdf2d.schmelczer.dev)
- [View it in action (video game)](https://decla.red)
- [Documentation](https://schmelczerandras.github.io/sdf-2d/)
- [In-depth information](https://github.com/schmelczerandras/sdf-2d/blob/master/media/thesis-andras-schmelczer.pdf)
## 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
```sh
npm install sdf-2d --save-dev
```
## Use
```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](https://github.com/schmelczerandras/sdf-2d-minimal-example).
## Examples
For further examples, please visit the following repositories:
- [Minimal example (using Webpack)](https://github.com/schmelczerandras/sdf-2d-minimal-example)
- [More complex example](https://github.com/schmelczerandras/sdf-2d-minimal-example)
- [Source for the demo page](https://github.com/schmelczerandras/sdf-2d-demo)
- [Source for decla.red, the multiplayer game](https://github.com/schmelczerandras/decla.red)
## Documentation
For more technical details, please consult the documentation available in the repository and at [schmelczerandras.github.io/sdf-2d/](https://schmelczerandras.github.io/sdf-2d/).
## Plans
- Automatic tile multiplier scaling
- Non-uniform tile sizes based on scene density