sdf-2d/docs-source

Documentation

Background and more in depth information about the rendring techniques can be found in this technical report.

Links

• Repository
• Demo
• Minimal example
• More complex example

Important to know

Coordinates

Anywhere, where positions need to specified, the y values grow upwards, so are the x values. That means, when specifying the view area, the origin is at the bottom left corner of the display.

Tile-based rendering

For optimising the evaluation of the distance field, the display is divided up into a grid of tiles. The shader for each tile is 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.

Mitigating this issue is quite easy. Instead of the following code:

this.renderer = await compile(canvas, [Circle.descriptor, CircleLight.descriptor]);

Modify it to something similar:

this.renderer = await compile(canvas, [
  {
    ...Circle.descriptor,
    shaderCombinationSteps: [0, 1, 2, 24, 64],
  },
  {
    ...CircleLight.descriptor,
    shaderCombinationSteps: [0, 1, 2, 4],
  },
]);

The usage of too large numbers is not advised for compatibility and performance reasons alike.

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 necesseary number of objects on each tiles.

Usage

To start using cutting-edge 2D graphics, first you have get a renderer instance. This is possible by calling the compile function.