remove old text rendering code

web/pw-visualizer/src/assets.ts

@@ -7,8 +7,6 @@ export {default as venusSvg} from "../assets/res/venus.svg";
 export {default as earthPng} from "../assets/res/earth.png";
 export {default as shipPng} from "../assets/res/ship.png";
 
-export {default as fontPng} from "../assets/res/font.png";
-
 export {default as robotoMsdfPng} from "../assets/res/fonts/roboto.png";
 export {default as robotoMsdfJson} from "../assets/res/fonts/roboto.json";
 

web/pw-visualizer/src/index.ts

@@ -21,11 +21,10 @@ import {
 import { DefaultRenderable, Renderer } from "./webgl/renderer";
 import { VertexBuffer, IndexBuffer } from "./webgl/buffer";
 import { VertexBufferLayout, VertexArray } from "./webgl/vertexBufferLayout";
-import { defaultLabelFactory, LabelFactory, Align, Label } from "./webgl/text";
 import { VoronoiBuilder } from "./voronoi/voronoi";
 import * as assets from "./assets";
 import { loadImage, Texture } from "./webgl/texture";
-import { defaultMsdfLabelFactory, MsdfLabelFactory, Label as MsdfLabel } from "./webgl/msdf_text";
+import { defaultMsdfLabelFactory, MsdfLabelFactory, Label as MsdfLabel, Align } from "./webgl/msdf_text";
 
 
 function to_bbox(box: number[]): BBox {
@@ -133,10 +132,8 @@ export class GameInstance {
   vor_shader: Shader;
   image_shader: Shader;
   masked_image_shader: Shader;
-
   msdf_shader: Shader;
 
-  text_factory: LabelFactory;
   msdf_text_factory: MsdfLabelFactory;
   planet_labels: MsdfLabel[];
   ship_labels: MsdfLabel[];
@@ -166,7 +163,6 @@ export class GameInstance {
     game: Game,
     planets_textures: Texture[],
     ship_texture: Texture,
-    font_texture: Texture,
     robotoMsdfTexture: Texture,
     shaders: Dictionary<ShaderFactory>
   ) {
@@ -189,7 +185,6 @@ export class GameInstance {
     this.masked_image_shader = shaders["masked_image"].create_shader(GL);
 
     this.msdf_shader = shaders["msdf"].create_shader(GL);
-    this.text_factory = defaultLabelFactory(GL, font_texture, this.image_shader);
     this.msdf_text_factory = defaultMsdfLabelFactory(GL, robotoMsdfTexture, this.msdf_shader);
     this.planet_labels = [];
     this.ship_labels = [];
@@ -607,7 +602,6 @@ export async function set_instance(source: string): Promise<GameInstance> {
   // TODO: this loading code is a mess. Please clean me up!
   if (!texture_images || !shaders) {
     const image_promises = [
-      loadImage(assets.fontPng),
       loadImage(assets.shipPng),
       loadImage(assets.earthPng),
       loadImage(assets.robotoMsdfPng),
@@ -666,17 +660,15 @@ export async function set_instance(source: string): Promise<GameInstance> {
   }
 
   resizeCanvasToDisplaySize(CANVAS);
-  const fontTexture = Texture.fromImage(GL, texture_images[0], "font");
+  const shipTexture = Texture.fromImage(GL, texture_images[0], "ship");
-  const shipTexture = Texture.fromImage(GL, texture_images[1], "ship");
+  const earthTexture = Texture.fromImage(GL, texture_images[1], "earth");
-  const earthTexture = Texture.fromImage(GL, texture_images[2], "earth");
+  const robotoMsdfTexture = Texture.fromImage(GL, texture_images[2], "robotoMsdf");
-  const robotoMsdfTexture = Texture.fromImage(GL, texture_images[3], "robotoMsdf");
 
 
   game_instance = new GameInstance(
     Game.new(source),
     [earthTexture],
     shipTexture,
-    fontTexture,
     robotoMsdfTexture,
     shaders
   );

web/pw-visualizer/src/webgl/msdf_text.ts

@@ -4,7 +4,6 @@ import { DefaultRenderable } from "./renderer";
 import { IndexBuffer, VertexBuffer } from "./buffer";
 import { VertexBufferLayout, VertexArray } from "./vertexBufferLayout";
 import { robotoMsdfJson } from "../assets";
-import { GlypInfo } from "./text";
 
 
 export enum Align {

web/pw-visualizer/src/webgl/text.ts

@@ -1,199 +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";
-import { fontPng } from "../assets";
-
-
-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, fontTexture: Texture, font: FontInfo, shader: Shader) {
-        this.texture = fontTexture;
-        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 = [];
-
-        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;
-
-                // apply half-pixel correction to prevent texture bleeding
-                // we should address the center of each texel, not the border
-                // https://gamedev.stackexchange.com/questions/46963/how-to-avoid-texture-bleeding-in-a-texture-atlas
-                const x0 = (info.x + 0.5) / this.font.textureWidth;
-                const y0 = (info.y + 0.5) / this.font.textureHeight;
-                const letterWidth = (info.width - 1) / this.font.textureWidth;
-                const letterHeight = (this.font.letterHeight - 1) / 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, fontTexture: Texture, 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, fontTexture, fontInfo, shader);
-}