3 files changed, 27 insertions, 23 deletions

diff --git a/web/pw-visualizer/src/webgl/index.ts b/web/pw-visualizer/src/webgl/index.ts
index 1742713..8d785ef 100644
--- a/web/pw-visualizer/src/webgl/index.ts
+++ b/web/pw-visualizer/src/webgl/index.ts
@@ -57,8 +57,8 @@ async function main() {
         return;
     }
 
+    // TODO: do we still need this?
     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(assets.simpleFragmentShader, assets.simpleVertexShader);
diff --git a/web/pw-visualizer/src/webgl/text.ts b/web/pw-visualizer/src/webgl/text.ts
index fdfbc55..1ae6f37 100644
--- a/web/pw-visualizer/src/webgl/text.ts
+++ b/web/pw-visualizer/src/webgl/text.ts
@@ -33,8 +33,8 @@ export class LabelFactory {
     font: FontInfo;
     shader: Shader;
 
-    constructor(gl: WebGLRenderingContext, loc: string, font: FontInfo, shader: Shader) {
-        this.texture = Texture.fromImage(gl, loc, 'font');
+    constructor(gl: WebGLRenderingContext, fontTexture: Texture, font: FontInfo, shader: Shader) {
+        this.texture = fontTexture;
         this.font = font;
         this.shader = shader;
     }
@@ -79,7 +79,6 @@ export class Label {
         const verts_pos = [];
         const verts_tex = [];
 
-        const letterHeight = this.font.letterHeight / this.font.textureHeight;
         let xPos = 0;
 
         switch (h_align) {
@@ -108,10 +107,17 @@ export class Label {
         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;
+
+                // 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);
@@ -138,7 +144,7 @@ export class Label {
     }
 }
 
-export function defaultLabelFactory(gl: WebGLRenderingContext, shader: Shader): LabelFactory {
+export function defaultLabelFactory(gl: WebGLRenderingContext, fontTexture: Texture, shader: Shader): LabelFactory {
     const fontInfo = {
         letterHeight: 8,
         spaceWidth: 8,
@@ -189,5 +195,5 @@ export function defaultLabelFactory(gl: WebGLRenderingContext, shader: Shader):
         },
     };
 
-    return new LabelFactory(gl, fontPng, fontInfo, shader);
+    return new LabelFactory(gl, fontTexture, fontInfo, shader);
 }
diff --git a/web/pw-visualizer/src/webgl/texture.ts b/web/pw-visualizer/src/webgl/texture.ts
index 9d6adcf..faafe76 100644
--- a/web/pw-visualizer/src/webgl/texture.ts
+++ b/web/pw-visualizer/src/webgl/texture.ts
@@ -11,15 +11,18 @@ export class Texture {
         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;
+    ): Promise<Texture> {
+        return new Promise((resolve, reject) => {
+            const out = new Texture(gl, name);
+
+            const image = new Image();
+            image.onload = () => {
+                out.setImage(gl, image);
+                resolve(out);
+            }
+            image.onerror = reject;
+            image.src = path;
+        })
     }
 
     static fromRenderer(
@@ -99,8 +102,3 @@ export class Texture {
         return this.height;
     }
 }
-
-function error(e: any) {
-    console.error("IMAGE LOAD ERROR");
-    console.error(e);
-}