- SDF-2D library
-
- SDF-2D library
-The returned renderer will only be able to draw to this canvas.
+The descriptor of every single object (and light) that + ever needs to be drawn by this renderer has to be given before compiling.
+Sensible defaults are provided, but these can be overriden.
+
DocumentationBackground and more in depth information about the rendring techniques can be found in this technical report.
+ +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.
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.
+
To start using cutting-edge 2D graphics, first you have get a renderer instance. This is possible by calling the compile function.
+
Compiles a new renderer instance. There can multiple renderers on a single page.
+ +The descriptors of every to-be-drawn objects are required before creating the renderer, + allowing the compiler to only create the shaders that will actually be used.
+Example usage:
+import { compile, Circle, CircleLight } from 'sdf-2d'; + + const canvas = document.querySelector('canvas'); + const renderer = await compile(canvas, [Circle.descriptor, CircleLight.descriptor]);