Working version

.gitattributes

@@ -1 +0,0 @@
-*.psd filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -1,3 +1,3 @@
-dist
 node_modules
 package-lock.json
+lib

.npmignore

@@ -0,0 +1,5 @@
+.*
+**/tsconfig.json
+**/webpack.config.js
+node_modules
+src

build/src/graphics/drawables/i-drawable-descriptor.d.ts

@@ -1,7 +0,0 @@
-import { IDrawable } from './i-drawable';
-export interface IDrawableDescriptor {
-    uniformName: string;
-    countMacroName: string;
-    shaderCombinationSteps: Array<number>;
-    readonly empty: IDrawable;
-}

build/src/graphics/drawables/i-drawable.d.ts

@@ -1,5 +0,0 @@
-import { vec2, mat2d } from 'gl-matrix';
-export interface IDrawable {
-    distance(target: vec2): number;
-    serializeToUniforms(uniforms: any, scale: number, transform: mat2d): void;
-}

build/src/graphics/drawables/lights/circle-light.d.ts

@@ -1,14 +0,0 @@
-import { mat2d, vec2, vec3 } from 'gl-matrix';
-import { IDrawableDescriptor } from '../i-drawable-descriptor';
-import { ILight } from './i-light';
-export declare class CircleLight implements ILight {
-    center: vec2;
-    lightDrop: number;
-    color: vec3;
-    lightness: number;
-    static descriptor: IDrawableDescriptor;
-    constructor(center: vec2, lightDrop: number, color: vec3, lightness: number);
-    distance(_: vec2): number;
-    serializeToUniforms(uniforms: any, scale: number, transform: mat2d): void;
-    get value(): vec3;
-}

build/src/graphics/drawables/lights/flashlight.d.ts

@@ -1,15 +0,0 @@
-import { mat2d, vec2, vec3 } from 'gl-matrix';
-import { IDrawableDescriptor } from '../i-drawable-descriptor';
-import { ILight } from './i-light';
-export declare class Flashlight implements ILight {
-    center: vec2;
-    direction: vec2;
-    lightDrop: number;
-    color: vec3;
-    lightness: number;
-    static descriptor: IDrawableDescriptor;
-    constructor(center: vec2, direction: vec2, lightDrop: number, color: vec3, lightness: number);
-    distance(_: vec2): number;
-    serializeToUniforms(uniforms: any, scale: number, transform: mat2d): void;
-    get value(): vec3;
-}

build/src/graphics/drawables/lights/i-light.d.ts

@@ -1,2 +0,0 @@
-import { IDrawable } from '../i-drawable';
-export declare type ILight = IDrawable;

build/src/graphics/graphics-library/compiling/check-program.d.ts

@@ -1 +0,0 @@
-export declare const checkProgram: (gl: WebGL2RenderingContext, program: WebGLProgram) => void;

build/src/graphics/graphics-library/compiling/check-shader.d.ts

@@ -1 +0,0 @@
-export declare const checkShader: (gl: WebGL2RenderingContext, shader: WebGLShader) => void;

build/src/graphics/graphics-library/compiling/create-program.d.ts

@@ -1,3 +0,0 @@
-export declare const createProgram: (gl: WebGL2RenderingContext, vertexShaderSource: string, fragmentShaderSource: string, substitutions: {
-    [name: string]: string;
-}) => Promise<WebGLProgram>;

build/src/graphics/graphics-library/compiling/create-shader.d.ts

@@ -1,3 +0,0 @@
-export declare const createShader: (gl: WebGL2RenderingContext, type: GLenum, source: string, substitutions: {
-    [name: string]: string;
-}) => WebGLShader;

build/src/graphics/graphics-library/frame-buffer/default-frame-buffer.d.ts

@@ -1,5 +0,0 @@
-import { FrameBuffer } from './frame-buffer';
-export declare class DefaultFrameBuffer extends FrameBuffer {
-    constructor(gl: WebGL2RenderingContext);
-    setSize(): boolean;
-}

build/src/graphics/graphics-library/frame-buffer/frame-buffer.d.ts

@@ -1,12 +0,0 @@
-import { vec2 } from 'gl-matrix';
-export declare abstract class FrameBuffer {
-    protected gl: WebGL2RenderingContext;
-    renderScale: number;
-    enableHighDpiRendering: boolean;
-    protected size: vec2;
-    protected frameBuffer: WebGLFramebuffer | null;
-    constructor(gl: WebGL2RenderingContext);
-    bindAndClear(colorInput?: WebGLTexture): void;
-    setSize(): boolean;
-    getSize(): vec2;
-}

build/src/graphics/graphics-library/frame-buffer/intermediate-frame-buffer.d.ts

@@ -1,10 +0,0 @@
-import { FrameBuffer } from './frame-buffer';
-export declare class IntermediateFrameBuffer extends FrameBuffer {
-    private frameTexture;
-    private floatLinearEnabled;
-    constructor(gl: WebGL2RenderingContext);
-    get colorTexture(): WebGLTexture;
-    setSize(): boolean;
-    private configureTexture;
-    private configureFrameBuffer;
-}

build/src/graphics/graphics-library/helper/enable-extension.d.ts

@@ -1,2 +0,0 @@
-export declare const tryEnableExtension: (gl: WebGL2RenderingContext, name: string) => any | null;
-export declare const enableExtension: (gl: WebGL2RenderingContext, name: string) => any;

build/src/graphics/graphics-library/helper/get-webgl2-context.d.ts

@@ -1 +0,0 @@
-export declare const getWebGl2Context: (canvas: HTMLCanvasElement) => WebGL2RenderingContext;

build/src/graphics/graphics-library/helper/load-uniform.d.ts

@@ -1 +0,0 @@
-export declare const loadUniform: (gl: WebGL2RenderingContext, value: any, type: GLenum, location: WebGLUniformLocation) => any;

build/src/graphics/graphics-library/helper/stopwatch.d.ts

@@ -1,11 +0,0 @@
-export declare class WebGlStopwatch {
-    private gl;
-    private timerExtension;
-    private timerQuery?;
-    private isReady;
-    private resultsInNanoSeconds?;
-    constructor(gl: WebGL2RenderingContext);
-    start(): void;
-    stop(): void;
-    get resultsInMilliSeconds(): number;
-}

build/src/graphics/graphics-library/program/fragment-shader-only-program.d.ts

@@ -1,11 +0,0 @@
-import Program from './program';
-export declare class FragmentShaderOnlyProgram extends Program {
-    private vao?;
-    constructor(gl: WebGL2RenderingContext, sources: [string, string], substitutions: {
-        [name: string]: string;
-    });
-    initialize(): Promise<void>;
-    bind(): void;
-    draw(): void;
-    private prepareScreenQuad;
-}

build/src/graphics/graphics-library/program/i-program.d.ts

@@ -1,10 +0,0 @@
-import { vec2 } from 'gl-matrix';
-export interface IProgram {
-    initialize(): Promise<void>;
-    setDrawingRectangleUV(bottomLeft: vec2, size: vec2): void;
-    bindAndSetUniforms(values: {
-        [name: string]: any;
-    }): void;
-    draw(): void;
-    delete(): void;
-}

build/src/graphics/graphics-library/program/program.d.ts

@@ -1,25 +0,0 @@
-import { vec2 } from 'gl-matrix';
-import { IProgram } from './i-program';
-export default abstract class Program implements IProgram {
-    protected gl: WebGL2RenderingContext;
-    protected program?: WebGLProgram;
-    private programPromise;
-    private modelTransform;
-    private readonly ndcToUv;
-    private uniforms;
-    constructor(gl: WebGL2RenderingContext, [vertexShaderSource, fragmentShaderSource]: [string, string], substitutions: {
-        [name: string]: string;
-    });
-    initialize(): Promise<void>;
-    bindAndSetUniforms(values: {
-        [name: string]: any;
-    }): void;
-    setDrawingRectangleUV(bottomLeft: vec2, size: vec2): void;
-    setUniforms(values: {
-        [name: string]: any;
-    }): void;
-    delete(): void;
-    abstract draw(): void;
-    protected bind(): void;
-    private queryUniforms;
-}

build/src/graphics/graphics-library/program/uniform-array-autoscaling-program.d.ts

@@ -1,20 +0,0 @@
-import { vec2 } from 'gl-matrix';
-import { IDrawableDescriptor } from '../../drawables/i-drawable-descriptor';
-import { IProgram } from './i-program';
-export declare class UniformArrayAutoScalingProgram implements IProgram {
-    private gl;
-    private descriptors;
-    private programs;
-    private current?;
-    private drawingRectangleBottomLeft;
-    private drawingRectangleSize;
-    constructor(gl: WebGL2RenderingContext, shaderSources: [string, string], descriptors: Array<IDrawableDescriptor>);
-    initialize(): Promise<void>;
-    bindAndSetUniforms(uniforms: {
-        [name: string]: any;
-    }): void;
-    setDrawingRectangleUV(bottomLeft: vec2, size: vec2): void;
-    draw(): void;
-    delete(): void;
-    private createProgram;
-}

build/src/graphics/i-renderer.d.ts

@@ -1,14 +0,0 @@
-import { vec2 } from 'gl-matrix';
-import { IDrawable } from './drawables/i-drawable';
-import { ILight } from './drawables/lights/i-light';
-export interface IRenderer {
-    initialize(): Promise<void>;
-    startFrame(deltaTime: DOMHighResTimeStamp): void;
-    finishFrame(): void;
-    drawShape(drawable: IDrawable): void;
-    drawLight(light: ILight): void;
-    drawInfoText(text: string): void;
-    readonly canvasSize: vec2;
-    setViewArea(topLeft: vec2, size: vec2): void;
-    setCursorPosition(position: vec2): void;
-}

build/src/graphics/rendering/fps-autoscaler.d.ts

@@ -1,9 +0,0 @@
-import { Autoscaler as AutoScaler } from '../../helper/autoscaler';
-export declare class FpsAutoscaler extends AutoScaler {
-    private timeSinceLastAdjusment;
-    private exponentialDecayedDeltaTime;
-    constructor(setters: {
-        [key: string]: (value: number | boolean) => void;
-    });
-    autoscale(lastDeltaTime: DOMHighResTimeStamp): void;
-}

build/src/graphics/rendering/rendering-pass.d.ts

@@ -1,12 +0,0 @@
-import { IDrawable } from '../drawables/i-drawable';
-import { IDrawableDescriptor } from '../drawables/i-drawable-descriptor';
-import { FrameBuffer } from '../graphics-library/frame-buffer/frame-buffer';
-export declare class RenderingPass {
-    private frame;
-    private drawables;
-    private program;
-    constructor(gl: WebGL2RenderingContext, shaderSources: [string, string], drawableDescriptors: Array<IDrawableDescriptor>, frame: FrameBuffer);
-    initialize(): Promise<void>;
-    addDrawable(drawable: IDrawable): void;
-    render(commonUniforms: any, inputTexture?: WebGLTexture): void;
-}

build/src/graphics/rendering/uniforms-provider.d.ts

@@ -1,18 +0,0 @@
-import { vec2 } from 'gl-matrix';
-export declare class UniformsProvider {
-    private gl;
-    private scaleWorldLengthToNDC;
-    private transformWorldToNDC;
-    private viewAreaBottomLeft;
-    private worldAreaInView;
-    private squareToAspectRatio;
-    private uvToWorld;
-    private cursorPosition;
-    softShadowsEnabled?: boolean;
-    constructor(gl: WebGL2RenderingContext);
-    getUniforms(uniforms: any): any;
-    private getScreenToWorldTransform;
-    uvToWorldCoordinate(screenUvPosition: vec2): vec2;
-    setViewArea(topLeft: vec2, size: vec2): void;
-    setCursorPosition(position: vec2): void;
-}

build/src/graphics/rendering/webgl2-renderer.d.ts

@@ -1,27 +0,0 @@
-import { vec2 } from 'gl-matrix';
-import { IDrawable } from '../drawables/i-drawable';
-import { ILight } from '../drawables/lights/i-light';
-import { IRenderer } from '../i-renderer';
-export declare class WebGl2Renderer implements IRenderer {
-    private canvas;
-    private overlay;
-    private gl;
-    private stopwatch?;
-    private uniformsProvider;
-    private distanceFieldFrameBuffer;
-    private lightingFrameBuffer;
-    private distancePass;
-    private lightingPass;
-    private autoscaler;
-    private initializePromise;
-    constructor(canvas: HTMLCanvasElement, overlay: HTMLElement);
-    initialize(): Promise<void>;
-    drawShape(shape: IDrawable): void;
-    drawLight(light: ILight): void;
-    startFrame(deltaTime: DOMHighResTimeStamp): void;
-    finishFrame(): void;
-    setViewArea(topLeft: vec2, size: vec2): void;
-    setCursorPosition(position: vec2): void;
-    get canvasSize(): vec2;
-    drawInfoText(text: string): void;
-}

build/src/graphics/settings.d.ts

@@ -1,27 +0,0 @@
-export declare const settings: {
-    enableHighDpiRendering: boolean;
-    qualityScaling: {
-        targetDeltaTimeInMilliseconds: number;
-        deltaTimeError: number;
-        deltaTimeResponsiveness: number;
-        adjusmentRateInMilliseconds: number;
-        qualityTargets: {
-            distanceRenderScale: number;
-            finalRenderScale: number;
-            softShadowsEnabled: boolean;
-        }[];
-        startingTargetIndex: number;
-        scalingOptions: {
-            additiveIncrease: number;
-            multiplicativeDecrease: number;
-        };
-    };
-    tileMultiplier: number;
-    shaderMacros: {};
-    shaderCombinations: {
-        lineSteps: number[];
-        blobSteps: number[];
-        circleLightSteps: number[];
-        flashlightSteps: number[];
-    };
-};

build/src/helper/array.d.ts

@@ -1,11 +0,0 @@
-declare global {
-    interface Array<T> {
-        x: number;
-        y: number;
-    }
-    interface Float32Array {
-        x: number;
-        y: number;
-    }
-}
-export declare const applyArrayPlugins: () => void;

build/src/helper/autoscaler.d.ts

@@ -1,17 +0,0 @@
-export declare class Autoscaler {
-    private setters;
-    private targets;
-    private scalingOptions;
-    private index;
-    constructor(setters: {
-        [key: string]: (value: number | boolean) => void;
-    }, targets: Array<{
-        [key: string]: number | boolean;
-    }>, startingIndex: number, scalingOptions: {
-        additiveIncrease: number;
-        multiplicativeDecrease: number;
-    });
-    increase(): void;
-    decrease(): void;
-    private applyScaling;
-}

build/src/helper/clamp.d.ts

@@ -1,2 +0,0 @@
-export declare const clamp: (value: number, min: number, max: number) => number;
-export declare const clamp01: (value: number) => number;

build/src/helper/exponential-decay.d.ts

@@ -1 +0,0 @@
-export declare const exponentialDecay: (accumulator: number, nextValue: number, biasOfNextValue: number) => number;

build/src/helper/get-combinations.d.ts

@@ -1 +0,0 @@
-export declare const getCombinations: (values: Array<Array<number>>) => Array<Array<number>>;

build/src/helper/last.d.ts

@@ -1 +0,0 @@
-export declare function last<T>(a: Array<T>): T | null;

build/src/helper/mix.d.ts

@@ -1 +0,0 @@
-export declare const mix: (from: number, to: number, q: number) => number;

build/src/helper/random.d.ts

@@ -1,5 +0,0 @@
-export declare abstract class Random {
-    private static _seed;
-    static set seed(value: number);
-    static getRandom(): number;
-}

build/src/helper/rotate-90-deg.d.ts

@@ -1,2 +0,0 @@
-import { vec2 } from 'gl-matrix';
-export declare const rotate90Deg: (vec: vec2) => vec2;

build/src/helper/timing.d.ts

@@ -1 +0,0 @@
-export declare function timeIt(interval?: number): (target: any, propertyKey: string, descriptor: PropertyDescriptor) => PropertyDescriptor;

build/src/helper/to-percent.d.ts

@@ -1 +0,0 @@
-export declare const toPercent: (value: number) => string;

build/src/helper/wait-while-false.d.ts

@@ -1 +0,0 @@
-export declare const waitWhileFalse: (body: () => boolean) => Promise<void>;

build/src/helper/wait.d.ts

@@ -1 +0,0 @@
-export declare const wait: (ms: number) => Promise<void>;

build/src/main.d.ts

@@ -1 +0,0 @@
-export {};

package.json

@@ -1,50 +1,41 @@
 {
-  "name": "sdf-2d-gl",
+  "name": "sdf-2d",
   "version": "0.0.0",
   "scripts": {
-    "start": "webpack-dev-server --mode development",
+    "clean": "shx rm -rf _bundles lib lib-esm",
-    "lint": "npx eslint --fix \"src/**/*.ts\" && npx prettier --write \"src/**/*.ts\"",
+    "build": "npm run clean && tsc && tsc -m es6 --outDir lib-esm && webpack"
-    "build": "webpack && find dist -type f -not -name '*.html' | xargs rm"
   },
   "keywords": [],
   "author": "András Schmelczer",
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
-  },
   "browserslist": [
     "defaults"
   ],
   "sideEffects": [
     "*.scss"
   ],
-  "main": "./dist/sdf-2d-gl.js",
+  "main": "lib/sdf-2d.js",
-  "types": "./dist/sdf-2d-gl.d.ts",
+  "types": "lib/src/main.d.ts",
   "files": [
-    "dist"
+    "lib"
   ],
-  "optimization": {
-    "usedExports": true
-  },
   "devDependencies": {
-    "@types/gl-matrix": "^2.4.5",
+    "@typescript-eslint/eslint-plugin": "^3.10.1",
-    "@typescript-eslint/eslint-plugin": "^3.9.1",
+    "@typescript-eslint/parser": "^3.10.1",
-    "@typescript-eslint/parser": "^3.9.1",
+    "awesome-typescript-loader": "^5.2.1",
-    "eslint": "^7.2.0",
+    "eslint": "^7.9.0",
     "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-import": "^2.21.2",
+    "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-unused-imports": "^0.1.3",
     "gl-matrix": "^3.3.0",
-    "prettier": "^2.0.5",
+    "prettier": "^2.1.1",
     "raw-loader": "^4.0.1",
     "resolve-url-loader": "^3.1.1",
-    "terser-webpack-plugin": "^2.3.5",
+    "shx": "^0.3.2",
-    "ts-loader": "^8.0.1",
+    "terser-webpack-plugin": "^2.3.8",
-    "typescript": "^3.8.3",
+    "ts-loader": "^8.0.3",
-    "webpack": "^4.43.0",
+    "typescript": "^3.9.7",
-    "webpack-cli": "^3.3.12",
+    "webpack": "^4.44.1",
-    "webpack-dev-server": "^3.10.3"
+    "webpack-cli": "^3.3.11"
   }
 }

src/drawables/drawable-descriptor.ts

@@ -0,0 +1,8 @@
+import { Drawable } from './drawable';
+
+export interface DrawableDescriptor {
+  uniformName: string;
+  countMacroName: string;
+  shaderCombinationSteps: Array<number>;
+  readonly empty: Drawable;
+}

src/drawables/drawable.ts

@@ -0,0 +1,15 @@
+import { mat2d, vec2 } from 'gl-matrix';
+import { DrawableDescriptor } from './drawable-descriptor';
+
+export abstract class Drawable {
+  static get descriptor(): DrawableDescriptor {
+    throw new Error('This getter should be overriden');
+  }
+
+  public abstract distance(target: vec2): number;
+  public abstract serializeToUniforms(
+    uniforms: any,
+    scale: number,
+    transform: mat2d
+  ): void;
+}

src/drawables/lights/circle-light.ts

@@ -1,22 +1,26 @@
 import { mat2d, vec2, vec3 } from 'gl-matrix';
-import { settings } from '../../settings';
+import { settings } from '../../graphics/settings';
-import { IDrawableDescriptor } from '../i-drawable-descriptor';
+import { Drawable } from '../drawable';
-import { ILight } from './i-light';
+import { DrawableDescriptor } from '../drawable-descriptor';
 
-export class CircleLight implements ILight {
+export class CircleLight extends Drawable {
-  public static descriptor: IDrawableDescriptor = {
+  public static get descriptor(): DrawableDescriptor {
+    return {
       uniformName: 'circleLights',
       countMacroName: 'circleLightCount',
       shaderCombinationSteps: settings.shaderCombinations.circleLightSteps,
       empty: new CircleLight(vec2.fromValues(0, 0), 0, vec3.fromValues(0, 0, 0), 0),
     };
+  }
 
   constructor(
     public center: vec2,
     public lightDrop: number,
     public color: vec3,
     public lightness: number
-  ) {}
+  ) {
+    super();
+  }
 
   public distance(_: vec2): number {
     return 0;

src/drawables/lights/flashlight.ts

@@ -1,10 +1,11 @@
 import { mat2d, vec2, vec3 } from 'gl-matrix';
-import { settings } from '../../settings';
+import { settings } from '../../graphics/settings';
-import { IDrawableDescriptor } from '../i-drawable-descriptor';
+import { Drawable } from '../drawable';
-import { ILight } from './i-light';
+import { DrawableDescriptor } from '../drawable-descriptor';
 
-export class Flashlight implements ILight {
+export class Flashlight extends Drawable {
-  public static descriptor: IDrawableDescriptor = {
+  public static get descriptor(): DrawableDescriptor {
+    return {
       uniformName: 'flashlights',
       countMacroName: 'flashlightCount',
       shaderCombinationSteps: settings.shaderCombinations.flashlightSteps,
@@ -16,6 +17,7 @@ export class Flashlight implements ILight {
         0
       ),
     };
+  }
 
   public constructor(
     public center: vec2,
@@ -23,7 +25,9 @@ export class Flashlight implements ILight {
     public lightDrop: number,
     public color: vec3,
     public lightness: number
-  ) {}
+  ) {
+    super();
+  }
 
   public distance(_: vec2): number {
     return 0;

src/drawables/shapes/circle.ts

@@ -0,0 +1,36 @@
+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 {
+      uniformName: 'circles',
+      countMacroName: 'circleCount',
+      shaderCombinationSteps: settings.shaderCombinations.circleSteps,
+      empty: new Circle(vec2.fromValues(0, 0), 0),
+    };
+  }
+
+  constructor(public center: vec2, public radius: number) {
+    super();
+  }
+
+  public distance(position: vec2): number {
+    return 0;
+  }
+
+  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,
+    });
+  }
+}

src/graphics/drawables/i-drawable-descriptor.ts

@@ -1,8 +0,0 @@
-import { IDrawable } from './i-drawable';
-
-export interface IDrawableDescriptor {
-  uniformName: string;
-  countMacroName: string;
-  shaderCombinationSteps: Array<number>;
-  readonly empty: IDrawable;
-}

src/graphics/drawables/i-drawable.ts

@@ -1,6 +0,0 @@
-import { vec2, mat2d } from 'gl-matrix';
-
-export interface IDrawable {
-  distance(target: vec2): number;
-  serializeToUniforms(uniforms: any, scale: number, transform: mat2d): void;
-}

src/graphics/drawables/lights/i-light.ts

@@ -1,3 +0,0 @@
-import { IDrawable } from '../i-drawable';
-
-export type ILight = IDrawable;

src/graphics/graphics-library/program/uniform-array-autoscaling-program.ts

@@ -1,7 +1,7 @@
 import { mat2d, vec2 } from 'gl-matrix';
+import { DrawableDescriptor } from '../../../drawables/drawable-descriptor';
 import { getCombinations } from '../../../helper/get-combinations';
 import { last } from '../../../helper/last';
-import { IDrawableDescriptor } from '../../drawables/i-drawable-descriptor';
 import { FragmentShaderOnlyProgram } from './fragment-shader-only-program';
 import { IProgram } from './i-program';
 
@@ -18,7 +18,7 @@ export class UniformArrayAutoScalingProgram implements IProgram {
   constructor(
     private gl: WebGL2RenderingContext,
     shaderSources: [string, string],
-    private descriptors: Array<IDrawableDescriptor>
+    private descriptors: Array<DrawableDescriptor>
   ) {
     const names = descriptors.map((o) => o.countMacroName);
     for (const combination of getCombinations(

src/graphics/i-renderer.ts

@@ -1,6 +1,5 @@
 import { vec2 } from 'gl-matrix';
-import { IDrawable } from './drawables/i-drawable';
+import { Drawable } from '../drawables/drawable';
-import { ILight } from './drawables/lights/i-light';
 
 export interface IRenderer {
   initialize(): Promise<void>;
@@ -8,9 +7,8 @@ export interface IRenderer {
   startFrame(deltaTime: DOMHighResTimeStamp): void;
   finishFrame(): void;
 
-  drawShape(drawable: IDrawable): void;
+  drawShape(drawable: Drawable): void;
-  drawLight(light: ILight): void;
+  drawLight(light: Drawable): void;
-  drawInfoText(text: string): void;
 
   readonly canvasSize: vec2;
   setViewArea(topLeft: vec2, size: vec2): void;

src/graphics/rendering/rendering-pass.ts

@@ -1,18 +1,18 @@
 import { vec2 } from 'gl-matrix';
-import { IDrawable } from '../drawables/i-drawable';
+import { Drawable } from '../../drawables/drawable';
-import { IDrawableDescriptor } from '../drawables/i-drawable-descriptor';
+import { DrawableDescriptor } from '../../drawables/drawable-descriptor';
 import { FrameBuffer } from '../graphics-library/frame-buffer/frame-buffer';
 import { UniformArrayAutoScalingProgram } from '../graphics-library/program/uniform-array-autoscaling-program';
 import { settings } from '../settings';
 
 export class RenderingPass {
-  private drawables: Array<IDrawable> = [];
+  private drawables: Array<Drawable> = [];
   private program: UniformArrayAutoScalingProgram;
 
   constructor(
     gl: WebGL2RenderingContext,
     shaderSources: [string, string],
-    drawableDescriptors: Array<IDrawableDescriptor>,
+    drawableDescriptors: Array<DrawableDescriptor>,
     private frame: FrameBuffer
   ) {
     this.program = new UniformArrayAutoScalingProgram(
@@ -26,7 +26,7 @@ export class RenderingPass {
     await this.program.initialize();
   }
 
-  public addDrawable(drawable: IDrawable) {
+  public addDrawable(drawable: Drawable) {
     this.drawables.push(drawable);
   }
 

src/graphics/rendering/webgl2-renderer.ts

@@ -1,8 +1,8 @@
 import { vec2 } from 'gl-matrix';
-import { IDrawable } from '../drawables/i-drawable';
+import { Drawable } from '../../drawables/drawable';
-import { CircleLight } from '../drawables/lights/circle-light';
+import { CircleLight } from '../../drawables/lights/circle-light';
-import { Flashlight } from '../drawables/lights/flashlight';
+import { Flashlight } from '../../drawables/lights/flashlight';
-import { ILight } from '../drawables/lights/i-light';
+import { Circle } from '../../drawables/shapes/circle';
 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';
@@ -28,7 +28,7 @@ export class WebGl2Renderer implements IRenderer {
 
   private initializePromise: Promise<[void, void]>;
 
-  constructor(private canvas: HTMLCanvasElement, private overlay: HTMLElement) {
+  constructor(private canvas: HTMLCanvasElement) {
     this.gl = getWebGl2Context(canvas);
 
     this.distanceFieldFrameBuffer = new IntermediateFrameBuffer(this.gl);
@@ -37,7 +37,7 @@ export class WebGl2Renderer implements IRenderer {
     this.distancePass = new RenderingPass(
       this.gl,
       [distanceVertexShader, distanceFragmentShader],
-      [],
+      [Circle.descriptor],
       this.distanceFieldFrameBuffer
     );
 
@@ -74,11 +74,11 @@ export class WebGl2Renderer implements IRenderer {
     await this.initializePromise;
   }
 
-  public drawShape(shape: IDrawable) {
+  public drawShape(shape: Drawable) {
     this.distancePass.addDrawable(shape);
   }
 
-  public drawLight(light: ILight) {
+  public drawLight(light: Drawable) {
     this.lightingPass.addDrawable(light);
   }
 
@@ -117,10 +117,4 @@ export class WebGl2Renderer implements IRenderer {
   public get canvasSize(): vec2 {
     return vec2.fromValues(this.canvas.clientWidth, this.canvas.clientHeight);
   }
-
-  public drawInfoText(text: string) {
-    if (this.overlay.innerText != text) {
-      this.overlay.innerText = text;
-    }
-  }
 }

src/graphics/settings.ts

@@ -51,9 +51,8 @@ export const settings = {
   tileMultiplier: 8,
   shaderMacros: {},
   shaderCombinations: {
-    lineSteps: [0, 1, 2, 4, 8, 16, 128],
-    blobSteps: [0, 1, 2, 8],
     circleLightSteps: [0, 1],
+    circleSteps: [0, 1, 16],
     flashlightSteps: [0, 1],
   },
 };

src/graphics/shaders/distance-fs.glsl

@@ -2,8 +2,9 @@
 
 precision lowp float;
 
-#define LINE_COUNT {lineCount}
+// #define LINE_COUNT {lineCount}
-#define BLOB_COUNT {blobCount}
+// #define BLOB_COUNT {blobCount}
+#define CIRCLE_COUNT {circleCount}
 
 #define SURFACE_OFFSET 0.001
  
@@ -20,7 +21,7 @@ float smoothMin(float a, float b)
     b = pow(b, k);
     return pow((a * b) / (a + b), 1.0 / k);
 }
-
+/*
 #if LINE_COUNT > 0
     uniform struct {
         vec2 from;
@@ -53,7 +54,22 @@ float smoothMin(float a, float b)
         minDistance = -myMinDistance;
     }
 #endif
+*/
+#if CIRCLE_COUNT > 0
+    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);
+        }
+    }
+#endif
+
+/*
 #if BLOB_COUNT > 0
     uniform struct {
         vec2 headCenter;
@@ -88,22 +104,26 @@ float smoothMin(float a, float b)
         }
     }
 #endif
+*/
 
 out vec2 fragmentColor;
 
 void main() {
-    float minDistance = -maxMinDistance;
+    float minDistance = 10.0; //-maxMinDistance;
-    float color = 0.0;
+    float color = 1.0;
 
-    #if LINE_COUNT > 0
+    /*#if LINE_COUNT > 0
         lineMinDistance(minDistance, color);
     #endif
 
     #if BLOB_COUNT > 0
         blobMinDistance(minDistance, color);
+    #endif*/
+
+    #if CIRCLE_COUNT > 0
+        circleMinDistance(minDistance, color);
     #endif
 
-
     // minDistance / 2.0: NDC to UV scale
-    fragmentColor = vec2((minDistance - SURFACE_OFFSET) / 2.0, color);
+    fragmentColor = vec2(minDistance / 2.0, color);
 }

src/main.ts

@@ -1,18 +1,14 @@
 import { glMatrix } from 'gl-matrix';
+import { IRenderer } from './graphics/i-renderer';
+import { WebGl2Renderer } from './graphics/rendering/webgl2-renderer';
 import { applyArrayPlugins } from './helper/array';
-import { Random } from './helper/random';
 
+export { Drawable } from './drawables/drawable';
+export { CircleLight } from './drawables/lights/circle-light';
+export { Circle } from './drawables/shapes/circle';
+
+export const compile = (canvas: HTMLCanvasElement): IRenderer => {
   glMatrix.setMatrixArrayType(Array);
   applyArrayPlugins();
-
+  return new WebGl2Renderer(canvas);
-const main = async () => {
-  try {
-    Random.seed = 42;
-    //await new Game().start();
-  } catch (e) {
-    console.error(e);
-    alert(e);
-  }
 };
-
-main();

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "outDir": "build",
+    "outDir": "lib",
     "sourceMap": true,
     "noImplicitAny": false,
     "target": "es5",
@@ -12,6 +12,6 @@
     "moduleResolution": "Node",
     "module": "commonjs",
     "declaration": true,
-    "lib": ["es2015", "dom"]
+    "lib": ["es6", "dom", "es2017"]
   }
 }

webpack.config.js

@@ -1,11 +1,34 @@
-const path = require('path');
+var path = require('path');
 const TerserJSPlugin = require('terser-webpack-plugin');
 
+var PATHS = {
+  entryPoint: path.resolve(__dirname, 'src/main.ts'),
+  bundles: path.resolve(__dirname, 'lib'),
+};
+
 const isProduction = process.env.NODE_ENV == 'production';
 const isDevelopment = !isProduction;
 
 module.exports = {
-  devtool: 'inline-source-map',
+  entry: {
+    'sdf-2d': [PATHS.entryPoint],
+    'sdf-2d.min': [PATHS.entryPoint],
+  },
+  output: {
+    path: PATHS.bundles,
+    filename: '[name].js',
+    library: 'SDF2D',
+    libraryTarget: 'umd',
+    umdNamedDefine: true,
+  },
+  devtool: 'source-map',
+  watchOptions: {
+    aggregateTimeout: 600,
+    ignored: /node_modules/,
+  },
+  resolve: {
+    extensions: ['.ts', '.js'],
+  },
   optimization: {
     minimize: true,
     minimizer: [
@@ -31,10 +54,6 @@ module.exports = {
       }),
     ],
   },
-  plugins: [],
-  entry: {
-    main: './src/main.ts',
-  },
   module: {
     rules: [
       {
@@ -43,31 +62,13 @@ module.exports = {
           loader: 'raw-loader',
         },
       },
-      {
-        test: /\.(woff2?|ttf|eot|svg)(?:[?#].+)?$/,
-        use: {
-          loader: 'file-loader',
-          options: {
-            name: '[name].[ext]',
-            outputPath: 'static/fonts/',
-          },
-        },
-        include: /fonts/,
-      },
       {
         test: /\.ts$/,
         use: {
-          loader: 'ts-loader',
+          loader: 'awesome-typescript-loader',
         },
         exclude: /node_modules/,
       },
     ],
   },
-  resolve: {
-    extensions: ['.ts', '.js', '.glsl'],
-  },
-  output: {
-    filename: '[name]-bundle.js',
-    path: path.resolve(__dirname, 'build'),
-  },
 };