separate out visualizer library

8 files changed, 0 insertions, 1303 deletions

diff --git a/web/pw-frontend/src/lib/visualizer/webgl/buffer.ts b/web/pw-frontend/src/lib/visualizer/webgl/buffer.ts
deleted file mode 100644
index 2739fbe..0000000
--- a/web/pw-frontend/src/lib/visualizer/webgl/buffer.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-
-export class Buffer {
-    buffer: WebGLBuffer;
-    data: any;
-    count: number;
-    type: number;
-
-    constructor(gl: WebGLRenderingContext, data: number[], type: number) {
-        this.buffer = gl.createBuffer();
-        this.type = type;
-
-        if (data)
-            this.updateData(gl, data);
-    }
-
-    _toArray(data: number[]): any {
-        return new Float32Array(data);
-    }
-
-    updateData(gl: WebGLRenderingContext, data: number[]) {
-        this.data = data;
-        this.count = data.length;
-        gl.bindBuffer(this.type, this.buffer);
-        gl.bufferData(this.type, this._toArray(data), gl.STATIC_DRAW);
-    }
-
-    bind(gl: WebGLRenderingContext) {
-        gl.bindBuffer(this.type, this.buffer);
-    }
-
-    getCount(): number {
-        return this.count;
-    }
-}
-
-export class VertexBuffer extends Buffer {
-    constructor(gl: WebGLRenderingContext, data: any) {
-        super(gl, data, gl.ARRAY_BUFFER);
-    }
-
-    _toArray(data: number[]): any {
-        return new Float32Array(data);
-    }
-}
-
-
-export class IndexBuffer extends Buffer {
-    constructor(gl: WebGLRenderingContext, data: any) {
-        super(gl, data, gl.ELEMENT_ARRAY_BUFFER);
-    }
-
-    _toArray(data: number[]): any {
-        return new Uint16Array(data);
-    }
-}
diff --git a/web/pw-frontend/src/lib/visualizer/webgl/index.ts b/web/pw-frontend/src/lib/visualizer/webgl/index.ts
deleted file mode 100644
index fdb7886..0000000
--- a/web/pw-frontend/src/lib/visualizer/webgl/index.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import { Uniform4f, Uniform1f, Uniform2f, ShaderFactory, UniformMatrix3fv, Uniform3f } from './shader';
-import { resizeCanvasToDisplaySize, FPSCounter, onload2promise, Resizer, url_to_mesh } from "./util";
-import { VertexBuffer, IndexBuffer } from './buffer';
-import { VertexArray, VertexBufferLayout } from './vertexBufferLayout';
-import { Renderer } from './renderer';
-import { Texture } from './texture';
-
-const URL = window.location.origin+window.location.pathname;
-const LOCATION = URL.substring(0, URL.lastIndexOf("/") + 1);
-
-async function create_texture_from_svg(gl: WebGLRenderingContext, name: string, path: string, width: number, height: number): Promise<Texture> {
-
-    const [mesh, factory] = await Promise.all([
-        url_to_mesh(path),
-        ShaderFactory.create_factory(LOCATION + "static/shaders/frag/static_color.glsl", LOCATION + "static/shaders/vert/svg.glsl")
-    ]);
-
-    const program = factory.create_shader(gl);
-    const renderer = new Renderer();
-
-    var positionBuffer = new VertexBuffer(gl, mesh.positions);
-    var layout = new VertexBufferLayout();
-    layout.push(gl.FLOAT, 3, 4, "a_position");
-
-    const vao = new VertexArray();
-    vao.addBuffer(positionBuffer, layout);
-
-    program.bind(gl);
-    vao.bind(gl, program);
-
-    var indexBuffer = new IndexBuffer(gl, mesh.cells);
-    indexBuffer.bind(gl);
-
-    renderer.addToDraw(indexBuffer, vao, program, {});
-
-    return Texture.fromRenderer(gl, name, width, height, renderer);
-}
-
-
-async function main() {
-
-    // Get A WebGL context
-    var canvas = <HTMLCanvasElement>document.getElementById("c");
-    const resolution = [canvas.width, canvas.height];
-
-    const resizer = new Resizer(canvas, [-10, -10, 20, 20], true);
-
-    var gl = canvas.getContext("webgl");
-    if (!gl) {
-        return;
-    }
-
-    const mesh = await url_to_mesh("static/res/images/earth.svg");
-    console.log(Math.max(...mesh.positions), Math.min(...mesh.positions));
-    const renderer = new Renderer();
-
-    const factory = await ShaderFactory.create_factory(LOCATION + "static/shaders/frag/static_color.glsl", LOCATION + "static/shaders/vert/simple.glsl");
-    const program = factory.create_shader(gl);
-
-    var positionBuffer = new VertexBuffer(gl, mesh.positions);
-    var layout = new VertexBufferLayout();
-    layout.push(gl.FLOAT, 3, 4, "a_position");
-    // layout.push(gl.FLOAT, 2, 4, "a_tex");
-
-    const vao = new VertexArray();
-    vao.addBuffer(positionBuffer, layout);
-
-    resizeCanvasToDisplaySize(<HTMLCanvasElement>gl.canvas);
-
-    // Tell WebGL how to convert from clip space to pixels
-    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
-
-    // Clear the canvas
-    gl.clearColor(0, 0, 0, 0);
-    gl.clear(gl.COLOR_BUFFER_BIT);
-
-    gl.enable(gl.BLEND);
-    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-
-    program.bind(gl);
-    vao.bind(gl, program);
-
-    var indexBuffer = new IndexBuffer(gl, mesh.cells);
-    indexBuffer.bind(gl);
-
-    renderer.addToDraw(indexBuffer, vao, program, {});
-
-    const counter = new FPSCounter();
-
-    const step = function (time: number) {
-
-        // console.log(resizer.get_viewbox());
-
-        program.uniform(gl, "u_time", new Uniform1f(time * 0.001));
-        program.uniform(gl, "u_mouse", new Uniform2f(resizer.get_mouse_pos()));
-        program.uniform(gl, "u_viewbox", new Uniform4f(resizer.get_viewbox()));
-        program.uniform(gl, "u_resolution", new Uniform2f(resolution));
-        program.uniform(gl, "u_trans", new UniformMatrix3fv([1, 0, 0, 0, 1, 0, 0, 0, 1]));
-        program.uniform(gl, "u_color", new Uniform3f(1.0, 0.5, 0.0));
-
-        renderer.render(gl);
-
-        counter.frame(time);
-        requestAnimationFrame(step);
-    }
-
-    requestAnimationFrame(step);
-}
-
-
-main();
-
-document.getElementById("loader").classList.remove("loading");
-
-// const loader = document.getElementById("loader");
-// setInterval(() => {
-//     if (loader.classList.contains("loading")) {
-//         loader.classList.remove("loading")
-//     } else {
-//         loader.classList.add("loading");
-//     }
-// }, 2000);
diff --git a/web/pw-frontend/src/lib/visualizer/webgl/renderer.ts b/web/pw-frontend/src/lib/visualizer/webgl/renderer.ts
deleted file mode 100644
index c3b219f..0000000
--- a/web/pw-frontend/src/lib/visualizer/webgl/renderer.ts
+++ /dev/null
@@ -1,157 +0,0 @@
-import type { IndexBuffer } from './buffer';
-import type { VertexArray } from './vertexBufferLayout';
-import type { Texture } from './texture';
-import type { Dictionary } from './util';
-import type { Shader, Uniform } from './shader';
-import { Uniform1i } from './shader';
-
-function sortedIndex(array, value) {
-    var low = 0,
-        high = array.length;
-
-    while (low < high) {
-        var mid = (low + high) >>> 1;
-        if (array[mid] < value) low = mid + 1;
-        else high = mid;
-    }
-    return low;
-}
-
-export interface Renderable {
-    getUniforms() : Dictionary<Uniform>;
-    render(gl: WebGLRenderingContext): void;
-    updateVAOBuffer(gl: WebGLRenderingContext, index: number, data: number[]);
-    updateIndexBuffer(gl: WebGLRenderingContext, data: number[]);
-}
-
-export class DefaultRenderable implements Renderable {
-    ibo: IndexBuffer;
-    va: VertexArray;
-    shader: Shader;
-    textures: Texture[];
-    uniforms: Dictionary<Uniform>;
-
-    constructor(
-        ibo: IndexBuffer,
-        va: VertexArray,
-        shader: Shader,
-        textures: Texture[],
-        uniforms: Dictionary<Uniform>,
-    ) {
-        this.ibo = ibo;
-        this.va = va;
-        this.shader = shader;
-        this.textures = textures;
-        this.uniforms = uniforms;
-    }
-
-    getUniforms(): Dictionary<Uniform> {
-        return this.uniforms;
-    }
-
-    updateVAOBuffer(gl: WebGLRenderingContext, index: number, data: number[]) {
-        this.va.updateBuffer(gl, index, data);
-    }
-
-    updateIndexBuffer(gl: WebGLRenderingContext, data: number[]) {
-        this.ibo.updateData(gl, data);
-    }
-
-    render(gl: WebGLRenderingContext): void {
-
-        const indexBuffer = this.ibo;
-        const vertexArray = this.va;
-        const uniforms = this.uniforms;
-
-        const shader = this.shader;
-        const textures = this.textures;
-        let texLocation = 0;
-
-        for (let texture of textures) {
-
-            shader.uniform(gl, texture.name, new Uniform1i(texLocation));
-            texture.bind(gl, texLocation);
-
-            texLocation ++;
-            // if (texLocation > maxTextures) {
-            //     console.error("Using too many textures, this is not supported yet\nUndefined behaviour!");
-            // }
-        }
-
-        if (vertexArray && shader && uniforms) {
-            for(let key in uniforms) {
-                shader.uniform(gl, key, uniforms[key]);
-            }
-
-            vertexArray.bind(gl, shader);
-
-            if (indexBuffer) {
-                indexBuffer.bind(gl);
-                gl.drawElements(gl.TRIANGLES, indexBuffer.getCount(), gl.UNSIGNED_SHORT, 0);
-            } else {
-                console.error("IndexBuffer is required to render, for now");
-            }
-        }
-
-    }
-}
-
-export class Renderer {
-    renderables: { [id: number] : [Renderable, boolean][]; };
-    renderable_layers: number[];
-
-    constructor() {
-        this.renderables = {};
-        this.renderable_layers = [];
-    }
-
-    updateUniform(i: number, f: (uniforms: Dictionary<Uniform>) => void, layer=0, ) {
-        f(this.renderables[layer][i][0].getUniforms());
-    }
-
-    disableRenderable(i: number, layer=0) {
-        this.renderables[layer][i][1] = false;
-    }
-
-    enableRenderable(i: number, layer=0) {
-        this.renderables[layer][i][1] = true;
-    }
-
-    addRenderable(item: Renderable, layer=0): number {
-        if(!this.renderables[layer]) {
-            const idx = sortedIndex(this.renderable_layers, layer);
-            this.renderable_layers.splice(idx, 0, layer);
-            this.renderables[layer] = [];
-        }
-
-        this.renderables[layer].push([item, true]);
-        return this.renderables[layer].length - 1;
-    }
-
-    addToDraw(indexBuffer: IndexBuffer, vertexArray: VertexArray, shader: Shader, uniforms?: Dictionary<Uniform>, texture?: Texture[], layer=0): number {
-        return this.addRenderable(
-            new DefaultRenderable(
-                indexBuffer,
-                vertexArray,
-                shader,
-                texture || [],
-                uniforms || {},
-            ), layer
-        );
-    }
-
-    render(gl: WebGLRenderingContext, frameBuffer?: WebGLFramebuffer, width?: number, height?: number) {
-        gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer);
-        gl.viewport(0, 0, width || gl.canvas.width, height || gl.canvas.height);
-        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-
-        const maxTextures = gl.getParameter(gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS);
-
-        for (let layer of this.renderable_layers) {
-            for (let [r, e] of this.renderables[layer]) {
-                if (!e) continue;
-                r.render(gl);
-            }
-        }
-    }
-}
diff --git a/web/pw-frontend/src/lib/visualizer/webgl/shader.ts b/web/pw-frontend/src/lib/visualizer/webgl/shader.ts
deleted file mode 100644
index 942c4c2..0000000
--- a/web/pw-frontend/src/lib/visualizer/webgl/shader.ts
+++ /dev/null
@@ -1,327 +0,0 @@
-import type { Dictionary } from './util';
-
-function error(msg: string) {
-  console.error(msg);
-}
-
-const defaultShaderType = [
-  "VERTEX_SHADER",
-  "FRAGMENT_SHADER"
-];
-
-/// Create Shader from Source string
-function loadShader(
-  gl: WebGLRenderingContext,
-  shaderSource: string,
-  shaderType: number,
-  opt_errorCallback: any,
-): WebGLShader {
-  var errFn = opt_errorCallback || error;
-  // Create the shader object
-  var shader = gl.createShader(shaderType);
-
-  // Load the shader source
-  gl.shaderSource(shader, shaderSource);
-
-  // Compile the shader
-  gl.compileShader(shader);
-
-  // Check the compile status
-  var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
-  if (!compiled) {
-    // Something went wrong during compilation; get the error
-    var lastError = gl.getShaderInfoLog(shader);
-    errFn("*** Error compiling shader '" + shader + "':" + lastError);
-    gl.deleteShader(shader);
-    return null;
-  }
-
-  return shader;
-}
-
-/// Actually Create Program with Shader's
-function createProgram(
-  gl: WebGLRenderingContext,
-  shaders: WebGLShader[],
-  opt_attribs: string[],
-  opt_locations: number[],
-  opt_errorCallback: any,
-): WebGLProgram {
-  var errFn = opt_errorCallback || error;
-  var program = gl.createProgram();
-  shaders.forEach(function (shader) {
-    gl.attachShader(program, shader);
-  });
-  if (opt_attribs) {
-    opt_attribs.forEach(function (attrib, ndx) {
-      gl.bindAttribLocation(
-        program,
-        opt_locations ? opt_locations[ndx] : ndx,
-        attrib);
-    });
-  }
-  gl.linkProgram(program);
-
-  // Check the link status
-  var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
-  if (!linked) {
-    // something went wrong with the link
-    var lastError = gl.getProgramInfoLog(program);
-    errFn("Error in program linking:" + lastError);
-
-    gl.deleteProgram(program);
-    return null;
-  }
-  return program;
-}
-
-export class ShaderFactory {
-  frag_source: string;
-  vert_source: string;
-
-  static async create_factory(frag_url: string, vert_url: string): Promise<ShaderFactory> {
-    const sources = await Promise.all([
-      fetch(frag_url).then((r) => r.text()),
-      fetch(vert_url).then((r) => r.text()),
-    ]);
-
-    return new ShaderFactory(sources[0], sources[1]);
-  }
-
-  constructor(frag_source: string, vert_source: string ) {
-    this.frag_source = frag_source;
-    this.vert_source = vert_source;
-  }
-
-  create_shader(
-    gl: WebGLRenderingContext,
-    context?: Dictionary<string>,
-    opt_attribs?: string[],
-    opt_locations?: number[],
-    opt_errorCallback?: any,
-  ): Shader {
-    let vert = this.vert_source.slice();
-    let frag = this.frag_source.slice();
-    for (let key in context) {
-      vert = vert.replace(new RegExp("\\$" + key, 'g'), context[key]);
-      frag = frag.replace(new RegExp("\\$" + key, 'g'), context[key]);
-    }
-
-    const shaders = [
-      loadShader(gl, vert, gl.VERTEX_SHADER, opt_errorCallback),
-      loadShader(gl, frag, gl.FRAGMENT_SHADER, opt_errorCallback),
-    ];
-
-    return new Shader(createProgram(gl, shaders, opt_attribs, opt_locations, opt_errorCallback));
-  }
-}
-
-export class Shader {
-  shader: WebGLProgram;
-  uniformCache: Dictionary<WebGLUniformLocation>;
-  attribCache: Dictionary<number>;
-
-  static async createProgramFromUrls(
-    gl: WebGLRenderingContext,
-    vert_url: string,
-    frag_url: string,
-    context?: Dictionary<string>,
-    opt_attribs?: string[],
-    opt_locations?: number[],
-    opt_errorCallback?: any,
-  ): Promise<Shader> {
-    const sources = (await Promise.all([
-      fetch(vert_url).then((r) => r.text()),
-      fetch(frag_url).then((r) => r.text()),
-    ])).map(x => {
-      for (let key in context) {
-        x = x.replace(new RegExp("\\$" + key, 'g'), context[key]);
-      }
-      return x;
-    });
-
-    const shaders = [
-      loadShader(gl, sources[0], 35633, opt_errorCallback),
-      loadShader(gl, sources[1], 35632, opt_errorCallback),
-    ];
-    return new Shader(createProgram(gl, shaders, opt_attribs, opt_locations, opt_errorCallback));
-  }
-
-  constructor(shader: WebGLProgram) {
-    this.shader = shader;
-    this.uniformCache = {};
-    this.attribCache = {};
-  }
-
-  bind(gl: WebGLRenderingContext) {
-    gl.useProgram(this.shader);
-  }
-
-  // Different locations have different types :/
-  getUniformLocation(gl: WebGLRenderingContext, name: string): WebGLUniformLocation {
-    if (this.uniformCache[name] === undefined) {
-      this.uniformCache[name] = gl.getUniformLocation(this.shader, name);
-    }
-
-    return this.uniformCache[name];
-  }
-
-  getAttribLocation(gl: WebGLRenderingContext, name: string): number {
-    if (this.attribCache[name] === undefined) {
-      this.attribCache[name] = gl.getAttribLocation(this.shader, name);
-    }
-
-    return this.attribCache[name];
-  }
-
-  uniform<T extends Uniform>(
-    gl: WebGLRenderingContext,
-    name: string,
-    uniform: T,
-  ) {
-    this.bind(gl);
-    const location = this.getUniformLocation(gl, name);
-    if (location < 0) {
-      console.error("No location found with name " + name);
-    }
-
-    uniform.setUniform(gl, location);
-  }
-
-  clear(gl: WebGLRenderingContext) {
-    gl.deleteProgram(this.shader);
-  }
-}
-
-export interface Uniform {
-  setUniform(gl: WebGLRenderingContext, location: WebGLUniformLocation): void;
-}
-
-export class Uniform2fv implements Uniform {
-  data: number[] | Float32Array;
-  constructor(data: number[] | Float32Array) {
-    this.data = data;
-  }
-
-  setUniform(gl: WebGLRenderingContext, location: WebGLUniformLocation) {
-    gl.uniform2fv(location, this.data);
-  }
-}
-
-export class Uniform3fv implements Uniform {
-  data: number[] | Float32Array;
-  constructor(data: number[] | Float32Array) {
-    this.data = data;
-  }
-
-  setUniform(gl: WebGLRenderingContext, location: WebGLUniformLocation) {
-    gl.uniform3fv(location, this.data);
-  }
-}
-
-export class Uniform3f implements Uniform {
-  x: number;
-  y: number;
-  z: number;
-
-  constructor(x: number, y: number, z: number) {
-    this.x = x;
-    this.y = y;
-    this.z = z;
-  }
-
-  setUniform(gl: WebGLRenderingContext, location: WebGLUniformLocation) {
-    gl.uniform3f(location, this.x ,this.y, this.z);
-  }
-}
-
-export class Uniform1iv implements Uniform {
-  data: number[] | Int32List;
-  constructor(data: number[] | Int32List) {
-    this.data = data;
-  }
-
-  setUniform(gl: WebGLRenderingContext, location: WebGLUniformLocation) {
-    gl.uniform1iv(location, this.data);
-  }
-}
-
-export class Uniform1i implements Uniform {
-  texture: number;
-
-  constructor(texture: number) {
-    this.texture = texture;
-  }
-
-  setUniform(gl: WebGLRenderingContext, location: WebGLUniformLocation) {
-    gl.uniform1i(location, this.texture);
-  }
-}
-
-export class Uniform1f implements Uniform {
-  texture: number;
-
-  constructor(texture: number) {
-    this.texture = texture;
-  }
-
-  setUniform(gl: WebGLRenderingContext, location: WebGLUniformLocation) {
-    gl.uniform1f(location, this.texture);
-  }
-}
-
-export class Uniform2f implements Uniform {
-  x: number;
-  y: number;
-
-  constructor(xy: number[]) {
-    this.x = xy[0];
-    this.y = xy[1];
-  }
-
-  setUniform(gl: WebGLRenderingContext, location: WebGLUniformLocation) {
-    gl.uniform2f(location, this.x, this.y);
-  }
-}
-
-export class Uniform4f implements Uniform {
-  v0: number;
-  v1: number;
-  v2: number;
-  v3: number;
-
-  constructor(xyzw: number[]) {
-    this.v0 = xyzw[0];
-    this.v1 = xyzw[1];
-    this.v2 = xyzw[2];
-    this.v3 = xyzw[3];
-  }
-
-  setUniform(gl: WebGLRenderingContext, location: WebGLUniformLocation) {
-    gl.uniform4f(location, this.v0, this.v1, this.v2, this.v3);
-  }
-}
-
-export class UniformMatrix3fv implements Uniform {
-  data: number[] | Float32Array;
-  constructor(data: number[] | Float32Array) {
-    this.data = data;
-  }
-
-  setUniform(gl: WebGLRenderingContext, location: WebGLUniformLocation) {
-    gl.uniformMatrix3fv(location, false, this.data);
-  }
-}
-
-export class UniformBool implements Uniform {
-  data: boolean;
-  constructor(data: boolean) {
-    this.data = data;
-  }
-
-  setUniform(gl: WebGLRenderingContext, location: WebGLUniformLocation) {
-    gl.uniform1i(location, this.data ? 1 : 0);
-  }
-}
-
-export default Shader;
\ No newline at end of file
diff --git a/web/pw-frontend/src/lib/visualizer/webgl/text.ts b/web/pw-frontend/src/lib/visualizer/webgl/text.ts
deleted file mode 100644
index 3f1cec6..0000000
--- a/web/pw-frontend/src/lib/visualizer/webgl/text.ts
+++ /dev/null
@@ -1,192 +0,0 @@
-import type { Dictionary } from "./util";
-import type { Shader, UniformMatrix3fv } from "./shader";
-import { Texture } from "./texture";
-import { DefaultRenderable } from "./renderer";
-import { IndexBuffer, VertexBuffer } from "./buffer";
-import { VertexBufferLayout, VertexArray } from "./vertexBufferLayout";
-
-
-export enum Align {
-    Begin,
-    End,
-    Middle,
-}
-
-export class GlypInfo {
-    x: number;
-    y: number;
-    width: number;
-}
-
-export class FontInfo {
-    letterHeight: number;
-    spaceWidth: number;
-    spacing: number;
-    textureWidth: number;
-    textureHeight: number;
-    glyphInfos: Dictionary<GlypInfo>;
-}
-
-export class LabelFactory {
-    texture: Texture;
-    font: FontInfo;
-    shader: Shader;
-
-    constructor(gl: WebGLRenderingContext, loc: string, font: FontInfo, shader: Shader) {
-        this.texture = Texture.fromImage(gl, loc, 'font');
-        this.font = font;
-        this.shader = shader;
-    }
-
-    build(gl: WebGLRenderingContext, transform?: UniformMatrix3fv): Label {
-        return new Label(gl, this.shader, this.texture, this.font, transform);
-    }
-}
-
-export class Label {
-    inner: DefaultRenderable;
-
-    font: FontInfo;
-
-    constructor(gl: WebGLRenderingContext, shader: Shader, tex: Texture, font: FontInfo, transform?: UniformMatrix3fv) {
-        this.font = font;
-
-        const uniforms = transform ? { "u_trans": transform, "u_trans_next": transform, } : {};
-        const ib = new IndexBuffer(gl, []);
-        const vb_pos = new VertexBuffer(gl, []);
-        const vb_tex = new VertexBuffer(gl, []);
-
-        const layout_pos = new VertexBufferLayout();
-        layout_pos.push(gl.FLOAT, 2, 4, "a_position");
-
-        const layout_tex = new VertexBufferLayout();
-        layout_tex.push(gl.FLOAT, 2, 4, "a_texCoord");
-
-        const vao = new VertexArray();
-        vao.addBuffer(vb_pos, layout_pos);
-        vao.addBuffer(vb_tex, layout_tex);
-
-        this.inner = new DefaultRenderable(ib, vao, shader, [tex], uniforms);
-    }
-
-    getRenderable(): DefaultRenderable {
-        return this.inner;
-    }
-
-    setText(gl: WebGLRenderingContext, text: string, h_align = Align.Begin, v_align = Align.Begin) {
-        const idxs = [];
-        const verts_pos = [];
-        const verts_tex = [];
-
-        const letterHeight = this.font.letterHeight / this.font.textureHeight;
-        let xPos = 0;
-
-        switch (h_align) {
-            case Align.Begin:
-                break;
-            case Align.End:
-                xPos = -1 * [...text].map(n => this.font.glyphInfos[n] ? this.font.glyphInfos[n].width : this.font.spaceWidth).reduce((a, b) => a + b, 0) / this.font.letterHeight;
-                break;
-            case Align.Middle:
-                xPos = -1 * [...text].map(n => this.font.glyphInfos[n] ? this.font.glyphInfos[n].width : this.font.spaceWidth).reduce((a, b) => a + b, 0) / this.font.letterHeight / 2;
-                break;
-        }
-        let yStart = 0;
-        switch (v_align) {
-            case Align.Begin:
-                break;
-            case Align.End:
-                yStart = 1;
-                break;
-            case Align.Middle:
-                yStart = 0.5;
-                break;
-        }
-
-        let j = 0;
-        for (let i = 0; i < text.length; i++) {
-            const info = this.font.glyphInfos[text[i]];
-            if (info) {
-                const dx = info.width / this.font.letterHeight;
-                const letterWidth = info.width / this.font.textureWidth;
-                const x0 = info.x / this.font.textureWidth;
-                const y0 = info.y / this.font.textureHeight;
-                verts_pos.push(xPos,      yStart);
-                verts_pos.push(xPos + dx, yStart);
-                verts_pos.push(xPos,      yStart-1);
-                verts_pos.push(xPos + dx, yStart-1);
-
-                verts_tex.push(x0,               y0);
-                verts_tex.push(x0 + letterWidth, y0);
-                verts_tex.push(x0,               y0 + letterHeight);
-                verts_tex.push(x0 + letterWidth, y0 + letterHeight);
-
-                xPos += dx;
-
-                idxs.push(j+0, j+1, j+2, j+1, j+2, j+3);
-                j += 4;
-            } else {
-                // Just move xPos
-                xPos += this.font.spaceWidth / this.font.letterHeight;
-            }
-        }
-
-        this.inner.updateIndexBuffer(gl, idxs);
-        this.inner.updateVAOBuffer(gl, 0, verts_pos);
-        this.inner.updateVAOBuffer(gl, 1, verts_tex);
-    }
-}
-
-export function defaultLabelFactory(gl: WebGLRenderingContext, shader: Shader): LabelFactory {
-    const fontInfo = {
-        letterHeight: 8,
-        spaceWidth: 8,
-        spacing: -1,
-        textureWidth: 64,
-        textureHeight: 40,
-        glyphInfos: {
-            'a': { x: 0, y: 0, width: 8, },
-            'b': { x: 8, y: 0, width: 8, },
-            'c': { x: 16, y: 0, width: 8, },
-            'd': { x: 24, y: 0, width: 8, },
-            'e': { x: 32, y: 0, width: 8, },
-            'f': { x: 40, y: 0, width: 8, },
-            'g': { x: 48, y: 0, width: 8, },
-            'h': { x: 56, y: 0, width: 8, },
-            'i': { x: 0, y: 8, width: 8, },
-            'j': { x: 8, y: 8, width: 8, },
-            'k': { x: 16, y: 8, width: 8, },
-            'l': { x: 24, y: 8, width: 8, },
-            'm': { x: 32, y: 8, width: 8, },
-            'n': { x: 40, y: 8, width: 8, },
-            'o': { x: 48, y: 8, width: 8, },
-            'p': { x: 56, y: 8, width: 8, },
-            'q': { x: 0, y: 16, width: 8, },
-            'r': { x: 8, y: 16, width: 8, },
-            's': { x: 16, y: 16, width: 8, },
-            't': { x: 24, y: 16, width: 8, },
-            'u': { x: 32, y: 16, width: 8, },
-            'v': { x: 40, y: 16, width: 8, },
-            'w': { x: 48, y: 16, width: 8, },
-            'x': { x: 56, y: 16, width: 8, },
-            'y': { x: 0, y: 24, width: 8, },
-            'z': { x: 8, y: 24, width: 8, },
-            '0': { x: 16, y: 24, width: 8, },
-            '1': { x: 24, y: 24, width: 8, },
-            '2': { x: 32, y: 24, width: 8, },
-            '3': { x: 40, y: 24, width: 8, },
-            '4': { x: 48, y: 24, width: 8, },
-            '5': { x: 56, y: 24, width: 8, },
-            '6': { x: 0, y: 32, width: 8, },
-            '7': { x: 8, y: 32, width: 8, },
-            '8': { x: 16, y: 32, width: 8, },
-            '9': { x: 24, y: 32, width: 8, },
-            '-': { x: 32, y: 32, width: 8, },
-            '*': { x: 40, y: 32, width: 8, },
-            '!': { x: 48, y: 32, width: 8, },
-            '?': { x: 56, y: 32, width: 8, },
-        },
-    };
-
-    return new LabelFactory(gl, '/static/res/assets/font.png', fontInfo, shader);
-}
diff --git a/web/pw-frontend/src/lib/visualizer/webgl/texture.ts b/web/pw-frontend/src/lib/visualizer/webgl/texture.ts
deleted file mode 100644
index 9d6adcf..0000000
--- a/web/pw-frontend/src/lib/visualizer/webgl/texture.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import type { Renderer } from "./renderer";
-
-export class Texture {
-    texture: WebGLTexture;
-    width: number;
-    height: number;
-    loaded: boolean;
-    name: string;
-
-    static fromImage(
-        gl: WebGLRenderingContext,
-        path: string,
-        name: string,
-    ): Texture {
-        const out = new Texture(gl, name);
-
-        const image = new Image();
-        image.onload = out.setImage.bind(out, gl, image);
-        image.onerror = error;
-        image.src = path;
-
-        return out;
-    }
-
-    static fromRenderer(
-        gl: WebGLRenderingContext,
-        name: string,
-        width: number,
-        height: number,
-        renderer: Renderer
-    ): Texture {
-        const out = new Texture(gl, name);
-        out.width = width;
-        out.height = height;
-
-        gl.texImage2D(
-            gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0,
-            gl.RGBA, gl.UNSIGNED_BYTE, null);
-
-        const fb = gl.createFramebuffer();
-        gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
-
-        const attachmentPoint = gl.COLOR_ATTACHMENT0;
-        gl.framebufferTexture2D(gl.FRAMEBUFFER, attachmentPoint, gl.TEXTURE_2D, out.texture, 0);
-
-        renderer.render(gl, fb, width, height);
-
-        out.loaded = true;
-
-        return out;
-    }
-
-    constructor(
-        gl: WebGLRenderingContext,
-        name: string,
-    ) {
-        this.loaded = false;
-        this.name = name;
-
-        this.texture = gl.createTexture();
-        this.bind(gl);
-
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA,
-            gl.UNSIGNED_BYTE, new Uint8Array([255, 0, 0, 255]));
-    }
-
-    setImage(gl: WebGLRenderingContext, image: HTMLImageElement) {
-        this.bind(gl);
-        this.width = image.width;
-        this.height = image.height;
-
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
-
-        this.unbind(gl);
-
-        this.loaded = true;
-    }
-
-    bind(gl: WebGLRenderingContext, location=0) {
-        gl.activeTexture(gl.TEXTURE0 + location);
-        gl.bindTexture(gl.TEXTURE_2D, this.texture);
-    }
-
-    unbind(gl: WebGLRenderingContext) {
-        gl.bindTexture(gl.TEXTURE_2D, null);
-    }
-
-
-    getWidth(): number {
-        return this.width;
-    }
-
-    getHeight(): number {
-        return this.height;
-    }
-}
-
-function error(e: any) {
-    console.error("IMAGE LOAD ERROR");
-    console.error(e);
-}
diff --git a/web/pw-frontend/src/lib/visualizer/webgl/util.ts b/web/pw-frontend/src/lib/visualizer/webgl/util.ts
deleted file mode 100644
index 3ed2b4d..0000000
--- a/web/pw-frontend/src/lib/visualizer/webgl/util.ts
+++ /dev/null
@@ -1,229 +0,0 @@
-import { parse as parsePath } from 'extract-svg-path';
-import svgMesh3d from 'svg-mesh-3d';
-
-export interface Dictionary<T> {
-  [Key: string]: T;
-}
-
-
-interface OnLoadable {
-  onload: any;
-}
-
-export function onload2promise<T extends OnLoadable>(obj: T): Promise<T> {
-  return new Promise(resolve => {
-    obj.onload = () => resolve(obj);
-  });
-}
-
-export function resizeCanvasToDisplaySize(
-    canvas: HTMLCanvasElement,
-    multiplier?: number,
-): boolean {
-    multiplier = multiplier || 1;
-    var width  = canvas.clientWidth  * multiplier | 0;
-    var height = canvas.clientHeight * multiplier | 0;
-    if (canvas.width !== width ||  canvas.height !== height) {
-      canvas.width  = width;
-      canvas.height = height;
-      return true;
-    }
-    return false;
-}
-
-export class FPSCounter {
-  last: number;
-  count: number;
-  _delta: number;
-  _prev: number;
-
-  _frame_start: number;
-  _total_frametime: number;
-
-  constructor() {
-    this.last = 0;
-    this.count = 0;
-    this._delta = 0;
-    this._prev = 0;
-  }
-
-  frame(now: number) {
-    this._frame_start = performance.now();
-    this.count += 1;
-    this._delta = now - this._prev;
-    this._prev = now;
-
-    if (now - this.last > 1000) {
-      this.last = now;
-      console.log(`${this.count} fps, ${(this._total_frametime / this.count).toFixed(2)}ms avg per frame`);
-      this.count = 0;
-      this._total_frametime = 0;
-    }
-  }
-
-  frame_end() {
-    this._total_frametime += (performance.now() - this._frame_start);
-  }
-
-  delta(now: number): number {
-    return this._delta;
-  }
-}
-
-export class Resizer {
-    hoovering = false;
-    dragging = false;
-
-    mouse_pos = [0, 0];
-    last_drag = [0, 0];
-
-    viewbox: number[];
-    orig_viewbox: number[];
-
-    el_box: number[];
-
-    scaleX = 1;
-    scaleY = 1;
-
-    constructor(el: HTMLCanvasElement, viewbox: number[], keep_aspect_ratio=false) {
-        viewbox = [-viewbox[0] - viewbox[2], - viewbox[1] - viewbox[3], viewbox[2], viewbox[3]];
-        this.viewbox = [...viewbox];
-        this.el_box = [el.width, el.height];
-
-        if (keep_aspect_ratio) {
-            const or_width = this.viewbox[2];
-            const or_height = this.viewbox[3];
-
-            const width_percentage =  this.viewbox[2] / el.width;
-            const height_percentage = this.viewbox[3] / el.height;
-
-            if (width_percentage < height_percentage) {
-                // width should be larger
-                this.viewbox[2] = height_percentage * el.width;
-            } else {
-                // height should be larger
-                this.viewbox[3] = width_percentage * el.height;
-            }
-
-            this.viewbox[0] -= (this.viewbox[2] - or_width) / 2;
-            this.viewbox[1] -= (this.viewbox[3] - or_height) / 2;
-
-            this.scaleX = this.viewbox[2] / this.viewbox[3];
-        }
-
-        this.orig_viewbox = [...this.viewbox];
-
-        el.addEventListener("mouseenter", this.mouseenter.bind(this), { capture: false, passive: true});
-        el.addEventListener("mouseleave", this.mouseleave.bind(this), { capture: false, passive: true});
-        el.addEventListener("mousemove", this.mousemove.bind(this), { capture: false, passive: true});
-        el.addEventListener("mousedown", this.mousedown.bind(this), { capture: false, passive: true});
-        el.addEventListener("mouseup", this.mouseup.bind(this), { capture: false, passive: true});
-
-        window.addEventListener('wheel', this.wheel.bind(this), { capture: false, passive: true});
-    }
-
-    _clip_viewbox() {
-        this.viewbox[0] = Math.max(this.viewbox[0], this.orig_viewbox[0]);
-        this.viewbox[1] = Math.max(this.viewbox[1], this.orig_viewbox[1]);
-
-        this.viewbox[0] = Math.min(this.viewbox[0] + this.viewbox[2], this.orig_viewbox[0] + this.orig_viewbox[2]) - this.viewbox[2];
-        this.viewbox[1] = Math.min(this.viewbox[1] + this.viewbox[3], this.orig_viewbox[1] + this.orig_viewbox[3]) - this.viewbox[3];
-    }
-
-    mouseenter() {
-        this.hoovering = true;
-    }
-
-    mouseleave() {
-        this.hoovering = false;
-    }
-
-    mousemove(e: MouseEvent) {
-        this.mouse_pos = [e.offsetX, this.el_box[1] - e.offsetY];
-
-        if (this.dragging) {
-            const scaleX = this.viewbox[2] / this.el_box[0];
-            const scaleY = this.viewbox[3] / this.el_box[1];
-
-            this.viewbox[0] += (this.last_drag[0] - this.mouse_pos[0]) * scaleX;
-            this.viewbox[1] += (this.last_drag[1] - this.mouse_pos[1]) * scaleY;
-
-            this.last_drag = [...this.mouse_pos];
-
-            this._clip_viewbox();
-        }
-    }
-
-    mousedown() {
-        this.dragging = true;
-        this.last_drag = [...this.mouse_pos];
-    }
-
-    mouseup() {
-        this.dragging = false;
-    }
-
-    wheel(e: WheelEvent) {
-        if (this.hoovering) {
-            const delta = e.deltaY > 0 ? 0.1 * this.viewbox[2] : -0.1 * this.viewbox[2];
-            const dx =  delta * this.scaleX;
-            const dy = delta * this.scaleY;
-
-            const mouse_dx = this.mouse_pos[0] / this.el_box[0];
-            const mouse_dy = this.mouse_pos[1] / this.el_box[1];
-
-            this._zoom([dx, dy], [mouse_dx, mouse_dy]);
-        }
-    }
-
-    _zoom(deltas: number[], center: number[]) {
-      this.viewbox[2] += deltas[0];
-      this.viewbox[0] -= deltas[0] * center[0];
-      this.viewbox[2] = Math.min(this.viewbox[2], this.orig_viewbox[2]);
-
-      this.viewbox[3] += deltas[1];
-      this.viewbox[1] -= deltas[1] * center[1];
-      this.viewbox[3] = Math.min(this.viewbox[3], this.orig_viewbox[3]);
-
-      this._clip_viewbox();
-    }
-
-    get_viewbox(): number[] {
-      return this.viewbox;
-    }
-
-    get_mouse_pos(): number[] {
-        return this.mouse_pos;
-    }
-}
-
-export class Mesh {
-  cells: number[];
-  positions: number[];
-
-  constructor(mesh: any) {
-      this.cells = mesh.cells.flat();
-      this.positions = mesh.positions.flat();
-  }
-}
-
-export async function url_to_mesh(url: string): Promise<Mesh> {
-
-    return new Promise(function(resolve) {
-      fetch(url)
-        .then(resp => resp.text())
-        .then(data => {
-          // var div = document.createElement('div');
-          // div.innerHTML = data;
-          // var svg = div.querySelector('svg');
-    
-          var svgPath = parsePath(data);
-          var mesh = svgMesh3d(svgPath, {
-              delaunay: false,
-              scale: 10,
-          });
-
-          resolve(new Mesh(mesh));
-        })
-    });
-}
diff --git a/web/pw-frontend/src/lib/visualizer/webgl/vertexBufferLayout.ts b/web/pw-frontend/src/lib/visualizer/webgl/vertexBufferLayout.ts
deleted file mode 100644
index f44ed47..0000000
--- a/web/pw-frontend/src/lib/visualizer/webgl/vertexBufferLayout.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import type { VertexBuffer } from './buffer';
-import type { Shader } from './shader';
-
-export class VertexBufferElement {
-    type: number;
-    amount: number;
-    type_size: number;
-    normalized: boolean;
-    index: string;
-
-    constructor(
-        type: number,
-        amount: number,
-        type_size: number,
-        index: string,
-        normalized: boolean,
-    ) {
-        this.type = type;
-        this.amount = amount;
-        this.type_size = type_size;
-        this.normalized = normalized;
-        this.index = index;
-    }
-}
-
-export class VertexBufferLayout {
-    elements: VertexBufferElement[];
-    stride: number;
-    offset: number;
-
-    constructor(offset = 0) {
-        this.elements = [];
-        this.stride = 0;
-        this.offset = offset;
-    }
-
-    // Maybe wrong normalized type
-    push(
-        type: number,
-        amount: number,
-        type_size: number,
-        index: string,
-        normalized = false,
-    ) {
-        this.elements.push(new VertexBufferElement(type, amount, type_size, index, normalized));
-        this.stride += amount * type_size;
-    }
-
-    getElements(): VertexBufferElement[] {
-        return this.elements;
-    }
-
-    getStride(): number {
-        return this.stride;
-    }
-}
-
-// glEnableVertexAttribArray is to specify what location of the current program the follow data is needed
-// glVertexAttribPointer tells gl that that data is at which location in the supplied data
-export class VertexArray {
-    // There is no renderer ID, always at bind buffers and use glVertexAttribPointer
-    buffers: VertexBuffer[];
-    layouts: VertexBufferLayout[];
-
-    constructor() {
-        this.buffers = [];
-        this.layouts = [];
-    }
-
-    addBuffer(vb: VertexBuffer, layout: VertexBufferLayout) {
-        this.buffers.push(vb);
-        this.layouts.push(layout);
-    }
-
-    updateBuffer(gl: WebGLRenderingContext, index: number, data: number[]) {
-        this.buffers[index].updateData(gl, data);
-    }
-
-    /// Bind buffers providing program data
-    bind(gl: WebGLRenderingContext, shader: Shader) {
-        shader.bind(gl);
-        for(let i = 0; i < this.buffers.length; i ++) {
-            const buffer = this.buffers[i];
-            const layout = this.layouts[i];
-
-            buffer.bind(gl);
-            const elements = layout.getElements();
-            let offset = layout.offset;
-
-            for (let j = 0; j < elements.length; j ++) {
-                const element = elements[j];
-                const location = shader.getAttribLocation(gl, element.index);
-
-                if (location >= 0) {
-                    gl.enableVertexAttribArray(location);
-                    gl.vertexAttribPointer(
-                        location, element.amount, element.type,
-                        element.normalized, layout.stride, offset
-                    );
-                }
-
-                offset += element.amount * element.type_size;
-            }
-        }
-    }
-
-    /// Undo bind operation
-    unbind(gl: WebGLRenderingContext) {
-        this.layouts.forEach((layout) => {
-            layout.getElements().forEach((_, index) => {
-                gl.disableVertexAttribArray(index);
-            });
-        })
-    }
-}