Improve API

src/drawables/shapes/circle.ts

@@ -1,14 +1,29 @@
 import { mat2d, vec2 } from 'gl-matrix';
-import { settings } from '../../graphics/settings';
 import { Drawable } from '../drawable';
 import { DrawableDescriptor } from '../drawable-descriptor';
 
 export class Circle extends Drawable {
   public static get descriptor(): DrawableDescriptor {
     return {
+      sdf: {
+        shader: `
+          uniform struct {
+              vec2 center;
+              float radius;
+          }[CIRCLE_COUNT] circles;
+
+          void circleMinDistance(inout float minDistance, inout float color) {
+              for (int i = 0; i < CIRCLE_COUNT; i++) {
+                  float dist = distance(circles[i].center, position) - circles[i].radius;
+                  minDistance = min(minDistance, dist);
+              }
+          }
+        `,
+        distanceFunctionName: 'circleMinDistance',
+      },
       uniformName: 'circles',
-      countMacroName: 'circleCount',
-      shaderCombinationSteps: settings.shaderCombinations.circleSteps,
+      uniformCountMacroName: 'CIRCLE_COUNT',
+      shaderCombinationSteps: [0, 1, 2, 3, 16, 32],
       empty: new Circle(vec2.fromValues(0, 0), 0),
     };
   }
@@ -18,19 +33,13 @@ export class Circle extends Drawable {
   }
 
   public distance(position: vec2): number {
-    return 0;
+    return vec2.dist(this.center, position) - this.radius;
   }
 
-  public serializeToUniforms(uniforms: any, scale: number, transform: mat2d): void {
-    const { uniformName } = Circle.descriptor;
-
-    if (!Object.prototype.hasOwnProperty.call(uniforms, uniformName)) {
-      uniforms[uniformName] = [];
-    }
-
-    uniforms[uniformName].push({
-      center: vec2.transformMat2d(vec2.create(), this.center, transform),
-      radius: this.radius * scale,
-    });
+  protected getObjectToSerialize(transform2d: mat2d, transform1d: number): any {
+    return {
+      center: vec2.transformMat2d(vec2.create(), this.center, transform2d),
+      radius: this.radius * transform1d,
+    };
   }
 }