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

remove old text rendering code

Browse source
This commit is contained in:
Ilion Beyst 2022-11-16 13:00:14 +01:00
parent 3afa795cf5
commit e91b1da5b0
5 changed files with 4 additions and 214 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
web/pw-visualizer/assets/res/font.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 912 B

2
web/pw-visualizer/src/assets.ts
View file

@ -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";

16
web/pw-visualizer/src/index.ts
View file

@ -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[1], "ship");
const earthTexture = Texture.fromImage(GL, texture_images[2], "earth");
const robotoMsdfTexture = Texture.fromImage(GL, texture_images[3], "robotoMsdf");
const shipTexture = Texture.fromImage(GL, texture_images[0], "ship");
const earthTexture = Texture.fromImage(GL, texture_images[1], "earth");
const robotoMsdfTexture = Texture.fromImage(GL, texture_images[2], "robotoMsdf");
game_instance = new GameInstance(
Game.new(source),
[earthTexture],
shipTexture,
fontTexture,
robotoMsdfTexture,
shaders
);

1
web/pw-visualizer/src/webgl/msdf_text.ts
View file

@ -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 {

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

@ -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);
}