Update readme
This commit is contained in:
parent
f44c4d5799
commit
77340a1818
4 changed files with 10 additions and 5 deletions
15
README.md
15
README.md
|
|
@ -1,8 +1,10 @@
|
||||||
#  SDF-2D library
|
#  SDF-2D library
|
||||||
|
|
||||||
A graphics library to enable the real-time rendering of 2D signed distance fields on web.
|
A graphics library to enable the real-time rendering of 2D signed distance fields on the web.
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
## Links
|
## Links
|
||||||
|
|
||||||
|
|
@ -26,7 +28,7 @@ A graphics library to enable the real-time rendering of 2D signed distance field
|
||||||
- Context lost is handled with automatic restoration
|
- 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)_
|
- Can be used without thinking of the GPU _(although for stunning results it, should be kept in mind)_
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
> Three separate screenshots taken on a mobile device
|
> Three separate screenshots taken on a mobile device
|
||||||
|
|
||||||
|
|
@ -39,21 +41,24 @@ npm install sdf-2d --save-dev
|
||||||
## Use
|
## Use
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { compile, Circle, CircleLight } from 'sdf-2d';
|
import { compile, CircleFactory, hsl, CircleLight } from 'sdf-2d';
|
||||||
|
|
||||||
const main = async () => {
|
const main = async () => {
|
||||||
|
const Circle = CircleFactory(hsl(30, 66, 50));
|
||||||
const canvas = document.querySelector('canvas');
|
const canvas = document.querySelector('canvas');
|
||||||
|
|
||||||
const renderer = await compile(canvas, [Circle.descriptor, CircleLight.descriptor]);
|
const renderer = await compile(canvas, [Circle.descriptor, CircleLight.descriptor]);
|
||||||
|
|
||||||
renderer.addDrawable(new Circle([200, 200], 50));
|
renderer.addDrawable(new Circle([200, 200], 50));
|
||||||
renderer.addDrawable(new CircleLight([500, 300], [1, 0.5, 0], 0.5));
|
renderer.addDrawable(new CircleLight([500, 300], [1, 0.5, 0], 0.5));
|
||||||
|
|
||||||
renderer.renderDrawables();
|
renderer.renderDrawables();
|
||||||
};
|
};
|
||||||
|
|
||||||
main();
|
main();
|
||||||
```
|
```
|
||||||
|
|
||||||
|
> A commented version of the above code can be found [in this repo](https://github.com/schmelczerandras/sdf-2d-minimal-example).
|
||||||
|
|
||||||
## Examples
|
## Examples
|
||||||
|
|
||||||
For further examples, please visit the following repositories:
|
For further examples, please visit the following repositories:
|
||||||
|
|
|
||||||
BIN
media/circles-screenshot.png
Normal file
BIN
media/circles-screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 615 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 426 KiB |
BIN
media/tunnels-screenshot.png
Normal file
BIN
media/tunnels-screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 334 KiB |
Loading…
Add table
Add a link
Reference in a new issue