Improve language
This commit is contained in:
parent
cb6de98737
commit
7e61ea317e
2 changed files with 26 additions and 26 deletions
20
README.md
20
README.md
|
|
@ -1,6 +1,6 @@
|
||||||
#  SDF-2D library
|
#  SDF-2D library
|
||||||
|
|
||||||
A graphics library to enable the real-time rendering of 2D signed distance fields on the web.
|
A graphics library for real-time rendering of 2D signed distance fields on the web.
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
|
|
@ -16,18 +16,18 @@ A graphics library to enable the real-time rendering of 2D signed distance field
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
- Works with both WebGL and WebGL2
|
- Works with both WebGL and WebGL2
|
||||||
> The former is mostly required for supporting iPhones.
|
> The former is mainly needed to support older iPhones.
|
||||||
- Performant even on low-end mobile devices
|
- Performant even on low-end mobile devices
|
||||||
> Try it out yourself!
|
> Try it out yourself!
|
||||||
- Has a number of built-in shapes and lights
|
- Comes with a number of built-in shapes and lights
|
||||||
- Easily extensible with new shapes
|
- Easily extensible with new shapes
|
||||||
- Antialiasing is implemented
|
- Antialiasing is built in
|
||||||
- Has built-in quality autoscaling
|
- Built-in quality autoscaling
|
||||||
- Requires no boilerplate code
|
- Requires no boilerplate code
|
||||||
- Automatic detection of WebGL and its extensions is provided
|
- WebGL and its extensions are detected automatically
|
||||||
- Parallel, non-blocking shader compiling
|
- Shaders are compiled in parallel, without blocking
|
||||||
- Context lost is handled with automatic restoration
|
- Context loss 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 about the GPU _(although for stunning results, it should be kept in mind)_
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
|
|
@ -65,7 +65,7 @@ main();
|
||||||
For further examples, please visit the following repositories:
|
For further examples, please visit the following repositories:
|
||||||
|
|
||||||
- [Minimal example (using Webpack)](https://github.com/schmelczerandras/sdf-2d-minimal-example)
|
- [Minimal example (using Webpack)](https://github.com/schmelczerandras/sdf-2d-minimal-example)
|
||||||
- [More complex example](https://github.com/schmelczerandras/sdf-2d-minimal-example)
|
- [More complex example](https://github.com/schmelczerandras/sdf-2d-more-complex-example)
|
||||||
- [Source for the demo page](https://github.com/schmelczerandras/sdf-2d-demo)
|
- [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)
|
- [Source for decla.red, the multiplayer game](https://github.com/schmelczerandras/decla.red)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -12,46 +12,46 @@ The motivation behind this library and more in-depth information about the rende
|
||||||
|
|
||||||
## Usage (1st option)
|
## Usage (1st option)
|
||||||
|
|
||||||
- To start using cutting-edge 2D graphics, first you have get a renderer instance. This is possible by calling the [compile function](globals.html#compile).
|
- To start using cutting-edge 2D graphics, you first need a renderer instance. You can get one by calling the [compile function](globals.html#compile).
|
||||||
- For this, some [DrawableDescriptors](interfaces/drawabledescriptor.html) has to be provided.
|
- For this, you have to provide one or more [DrawableDescriptors](interfaces/drawabledescriptor.html).
|
||||||
- Optionally, default compile settings can overridden using [StartupSettings](interfaces/startupsettings.html).
|
- Optionally, the default compile settings can be overridden using [StartupSettings](interfaces/startupsettings.html).
|
||||||
- After acquiring a renderer, the drawing of objects can be started through the [Renderer](interfaces/renderer.html) interface.
|
- Once you have a renderer, you can start drawing objects through the [Renderer](interfaces/renderer.html) interface.
|
||||||
|
|
||||||
## Usage (2nd option)
|
## Usage (2nd option)
|
||||||
|
|
||||||
If you're planning on creating animated content, use the [runAnimation function](globals.html#runanimation) to spare yourself from writing boilerplate code.
|
If you're planning to create animated content, use the [runAnimation function](globals.html#runanimation) to save yourself from writing boilerplate code.
|
||||||
Further documentation on its usage is available in its [documentation](globals.html#runanimation).
|
See its [documentation](globals.html#runanimation) for more details.
|
||||||
|
|
||||||
## Extending drawables
|
## Extending drawables
|
||||||
|
|
||||||
> Iñigo Quilez has some great [2D SDF-s](https://iquilezles.org/www/articles/distfunctions2d/distfunctions2d.htm)
|
> Iñigo Quilez has a great collection of [2D SDFs](https://iquilezles.org/www/articles/distfunctions2d/distfunctions2d.htm)
|
||||||
|
|
||||||
- Subclass [Drawable](classes/drawable.html)
|
- Subclass [Drawable](classes/drawable.html)
|
||||||
- Implement its abstract methods
|
- Implement its abstract methods
|
||||||
- Add a static property to your class called `descriptor` of type [DrawableDescriptors](interfaces/drawabledescriptor.html)
|
- Add a static `descriptor` property of type [DrawableDescriptor](interfaces/drawabledescriptor.html) to your class
|
||||||
- Follow the instructions given in [Usage](#usage)
|
- Follow the instructions given in [Usage](#usage-1st-option)
|
||||||
|
|
||||||
## Useful to know
|
## Useful to know
|
||||||
|
|
||||||
### Math
|
### Math
|
||||||
|
|
||||||
The `vec2`, `vec3`, and `vec4` types seen in the documentation come from the [glMatrix](http://glmatrix.net/) library and are equivalent to regular JS Arrays or Float32Arrays. So, feel free to give `[x, y]` as an input for functions requiring `vec2`.
|
The `vec2`, `vec3`, and `vec4` types seen in the documentation come from the [glMatrix](http://glmatrix.net/) library and are equivalent to regular JS Arrays or Float32Arrays, so feel free to pass `[x, y]` to functions that expect a `vec2`.
|
||||||
|
|
||||||
### Coordinates
|
### Coordinates
|
||||||
|
|
||||||
Anywhere, where positions need to be specified, the `y` values grow upwards. That means, when setting the view area, the origin is at the bottom left corner of the display.
|
Wherever positions need to be specified, the `y` axis grows upwards. This means that when you set the view area, the origin is at the bottom-left corner of the display.
|
||||||
|
|
||||||
### Tile-based rendering
|
### Tile-based rendering
|
||||||
|
|
||||||
For optimising the evaluation of the distance field, the display is divided up into a grid of tiles. The shaders for each tile are compiled to support a fix maximum number of objects on it. When using the built-in drawables it is possible that after a certain number of on-screen objects new ones won't be visible.
|
To optimise the evaluation of the distance field, the display is divided into a grid of tiles. The shaders for each tile are compiled to support a fixed maximum number of objects. When using the built-in drawables, this means that beyond a certain number of on-screen objects, new ones may stop appearing.
|
||||||
|
|
||||||
Mitigating this issue is quite easy. Instead of the following code:
|
Mitigating this is easy. Instead of the following code:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
this.renderer = await compile(canvas, [Circle.descriptor, CircleLight.descriptor]);
|
this.renderer = await compile(canvas, [Circle.descriptor, CircleLight.descriptor]);
|
||||||
```
|
```
|
||||||
|
|
||||||
Modify it to something similar:
|
modify it to something like this:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
this.renderer = await compile(canvas, [
|
this.renderer = await compile(canvas, [
|
||||||
|
|
@ -66,6 +66,6 @@ this.renderer = await compile(canvas, [
|
||||||
]);
|
]);
|
||||||
```
|
```
|
||||||
|
|
||||||
The usage of too large numbers is not advised for compatibility and performance reasons alike.
|
Using very large numbers is not advised, for both compatibility and performance reasons.
|
||||||
|
|
||||||
> Steps are very useful for tile-based rendering, because it is possible for one tile (at a given moment) to be empty or contain just a few objects, while others have a large cluster of objects. The compiled shaders only take into account the necessary number of objects on each tile.
|
> Steps are especially useful for tile-based rendering: at any given moment, one tile may be empty or contain just a few objects, while another holds a large cluster. The compiled shaders only account for the number of objects actually present on each tile.
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue