Improve API

src/graphics/rendering/renderer.ts

@@ -0,0 +1,14 @@
+import { vec2 } from 'gl-matrix';
+import { Drawable } from '../../drawables/drawable';
+
+export interface Renderer {
+  setViewArea(topLeft: vec2, size: vec2): void;
+
+  addDrawable(drawable: Drawable): void;
+  renderDrawables(): void;
+
+  autoscaleQuality(deltaTime: DOMHighResTimeStamp): void;
+
+  readonly canvasSize: vec2;
+  setCursorPosition(position: vec2): void;
+}

src/graphics/rendering/rendering-pass-name.ts

@@ -0,0 +1,4 @@
+export enum RenderingPassName {
+  distance = 'distance',
+  pixel = 'pixel',
+}

src/graphics/rendering/rendering-pass.ts

@@ -22,10 +22,6 @@ export class RenderingPass {
     );
   }
 
-  public async initialize(): Promise<void> {
-    await this.program.initialize();
-  }
-
   public addDrawable(drawable: Drawable) {
     this.drawables.push(drawable);
   }
@@ -71,8 +67,8 @@ export class RenderingPass {
         primitivesNearTile.forEach((p) =>
           p.serializeToUniforms(
             uniforms,
-            uniforms.scaleWorldLengthToNDC,
-            uniforms.transformWorldToNDC
+            uniforms.transformWorldToNDC,
+            uniforms.scaleWorldLengthToNDC
           )
         );
 

src/graphics/rendering/webgl2-renderer.ts

@@ -1,57 +1,49 @@
 import { vec2 } from 'gl-matrix';
 import { Drawable } from '../../drawables/drawable';
-import { CircleLight } from '../../drawables/lights/circle-light';
-import { Flashlight } from '../../drawables/lights/flashlight';
-import { Circle } from '../../drawables/shapes/circle';
+import { DrawableDescriptor } from '../../drawables/drawable-descriptor';
 import { DefaultFrameBuffer } from '../graphics-library/frame-buffer/default-frame-buffer';
 import { IntermediateFrameBuffer } from '../graphics-library/frame-buffer/intermediate-frame-buffer';
 import { getWebGl2Context } from '../graphics-library/helper/get-webgl2-context';
 import { WebGlStopwatch } from '../graphics-library/helper/stopwatch';
-import { IRenderer } from '../i-renderer';
 import distanceFragmentShader from '../shaders/distance-fs.glsl';
 import distanceVertexShader from '../shaders/distance-vs.glsl';
 import lightsFragmentShader from '../shaders/shading-fs.glsl';
 import lightsVertexShader from '../shaders/shading-vs.glsl';
 import { FpsAutoscaler } from './fps-autoscaler';
+import { Renderer } from './renderer';
 import { RenderingPass } from './rendering-pass';
+import { RenderingPassName } from './rendering-pass-name';
 import { UniformsProvider } from './uniforms-provider';
 
-export class WebGl2Renderer implements IRenderer {
+export class WebGl2Renderer implements Renderer {
   private gl: WebGL2RenderingContext;
   private stopwatch?: WebGlStopwatch;
   private uniformsProvider: UniformsProvider;
   private distanceFieldFrameBuffer: IntermediateFrameBuffer;
   private lightingFrameBuffer: DefaultFrameBuffer;
-  private distancePass: RenderingPass;
-  private lightingPass: RenderingPass;
+  private passes: { [key in keyof typeof RenderingPassName]: RenderingPass };
   private autoscaler: FpsAutoscaler;
 
-  private initializePromise: Promise<[void, void]>;
-
-  constructor(private canvas: HTMLCanvasElement) {
+  constructor(private canvas: HTMLCanvasElement, descriptors: Array<DrawableDescriptor>) {
     this.gl = getWebGl2Context(canvas);
 
     this.distanceFieldFrameBuffer = new IntermediateFrameBuffer(this.gl);
     this.lightingFrameBuffer = new DefaultFrameBuffer(this.gl);
 
-    this.distancePass = new RenderingPass(
-      this.gl,
-      [distanceVertexShader, distanceFragmentShader],
-      [Circle.descriptor],
-      this.distanceFieldFrameBuffer
-    );
-
-    this.lightingPass = new RenderingPass(
-      this.gl,
-      [lightsVertexShader, lightsFragmentShader],
-      [CircleLight.descriptor, Flashlight.descriptor],
-      this.lightingFrameBuffer
-    );
-
-    this.initializePromise = Promise.all([
-      this.distancePass.initialize(),
-      this.lightingPass.initialize(),
-    ]);
+    this.passes = {
+      [RenderingPassName.distance]: new RenderingPass(
+        this.gl,
+        [distanceVertexShader, distanceFragmentShader],
+        descriptors.filter(WebGl2Renderer.hasSdf),
+        this.distanceFieldFrameBuffer
+      ),
+      [RenderingPassName.pixel]: new RenderingPass(
+        this.gl,
+        [lightsVertexShader, lightsFragmentShader],
+        descriptors.filter((d) => !WebGl2Renderer.hasSdf(d)),
+        this.lightingFrameBuffer
+      ),
+    };
 
     this.uniformsProvider = new UniformsProvider(this.gl);
 
@@ -70,35 +62,37 @@ export class WebGl2Renderer implements IRenderer {
     }
   }
 
-  public async initialize(): Promise<void> {
-    await this.initializePromise;
+  private static hasSdf(descriptor: DrawableDescriptor) {
+    return Object.prototype.hasOwnProperty.call(descriptor, 'sdf');
   }
 
-  public drawShape(shape: Drawable) {
-    this.distancePass.addDrawable(shape);
+  public addDrawable(drawable: Drawable): void {
+    if (WebGl2Renderer.hasSdf((drawable.constructor as typeof Drawable).descriptor)) {
+      this.passes[RenderingPassName.distance].addDrawable(drawable);
+    } else {
+      this.passes[RenderingPassName.pixel].addDrawable(drawable);
+    }
   }
 
-  public drawLight(light: Drawable) {
-    this.lightingPass.addDrawable(light);
-  }
-
-  public startFrame(deltaTime: DOMHighResTimeStamp) {
+  public autoscaleQuality(deltaTime: DOMHighResTimeStamp) {
     this.autoscaler.autoscale(deltaTime);
+  }
 
+  public renderDrawables() {
     this.stopwatch?.start();
 
     this.distanceFieldFrameBuffer.setSize();
     this.lightingFrameBuffer.setSize();
-  }
 
-  public finishFrame() {
     const common = {
       distanceNdcPixelSize: 2 / Math.max(...this.distanceFieldFrameBuffer.getSize()),
       shadingNdcPixelSize: 2 / Math.max(...this.distanceFieldFrameBuffer.getSize()),
     };
 
-    this.distancePass.render(this.uniformsProvider.getUniforms(common));
-    this.lightingPass.render(
+    this.passes[RenderingPassName.distance].render(
+      this.uniformsProvider.getUniforms(common)
+    );
+    this.passes[RenderingPassName.pixel].render(
       this.uniformsProvider.getUniforms(common),
       this.distanceFieldFrameBuffer.colorTexture
     );