Function compile

Compiles a new renderer instance. There can be multiple renderers on a single page.

Asynchronous behaviour is required for parallel shader compiling. Trying to draw before the returned promise resolves results in no action being taken. Settings can be set before the promise resolves and they will be applied later.

The descriptors of all 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, hsl, CircleFactory, CircleLight } from 'sdf-2d';

 const canvas = document.querySelector('canvas');
 const Circle = CircleFactory(hsl(30, 66, 50));
 const renderer = await compile(canvas, [Circle.descriptor, CircleLight.descriptor]);
Copy