From 6e494aca463b8632fe2b78ee89b8651187f8061a Mon Sep 17 00:00:00 2001 From: Ilion Beyst Date: Mon, 18 Jul 2022 07:54:18 +0200 Subject: add half-pixel correction to text --- web/pw-visualizer/src/webgl/text.ts | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) (limited to 'web/pw-visualizer/src/webgl/text.ts') diff --git a/web/pw-visualizer/src/webgl/text.ts b/web/pw-visualizer/src/webgl/text.ts index fdfbc55..cb72a42 100644 --- a/web/pw-visualizer/src/webgl/text.ts +++ b/web/pw-visualizer/src/webgl/text.ts @@ -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); -- cgit v1.2.3 From d092f5d89c0fda5cc67349d5489b4ef1b294e053 Mon Sep 17 00:00:00 2001 From: Ilion Beyst Date: Mon, 18 Jul 2022 21:02:27 +0200 Subject: use texture for rendering ships --- web/pw-visualizer/src/webgl/text.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'web/pw-visualizer/src/webgl/text.ts') diff --git a/web/pw-visualizer/src/webgl/text.ts b/web/pw-visualizer/src/webgl/text.ts index cb72a42..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; } @@ -144,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, @@ -195,5 +195,5 @@ export function defaultLabelFactory(gl: WebGLRenderingContext, shader: Shader): }, }; - return new LabelFactory(gl, fontPng, fontInfo, shader); + return new LabelFactory(gl, fontTexture, fontInfo, shader); } -- cgit v1.2.3