midgard/planetwars.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add half-pixel correction to text

Browse source
This commit is contained in:
Ilion Beyst 2022-07-18 07:54:18 +02:00
parent 270476e038
commit 6e494aca46
1 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
web/pw-visualizer/src/webgl/text.ts
View file

@ -79,7 +79,6 @@ export class Label {
const verts_pos = []; const verts_pos = [];
const verts_tex = []; const verts_tex = [];
const letterHeight = this.font.letterHeight / this.font.textureHeight;
let xPos = 0; let xPos = 0;
switch (h_align) { switch (h_align) {
@ -108,10 +107,17 @@ export class Label {
for (let i = 0; i < text.length; i++) { for (let i = 0; i < text.length; i++) {
const info = this.font.glyphInfos[text[i]]; const info = this.font.glyphInfos[text[i]];
if (info) { if (info) {
const dx = info.width / this.font.letterHeight; const dx = info.width / this.font.letterHeight;
const letterWidth = info.width / this.font.textureWidth;
const x0 = info.x / this.font.textureWidth; // apply half-pixel correction to prevent texture bleeding
const y0 = info.y / this.font.textureHeight; // 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, yStart);
verts_pos.push(xPos + dx, yStart); verts_pos.push(xPos + dx, yStart);
verts_pos.push(xPos, yStart-1); verts_pos.push(xPos, yStart-1);