aboutsummaryrefslogtreecommitdiff
path: root/web/pw-visualizer/src/webgl/text.ts
diff options
context:
space:
mode:
authorIlion Beyst <ilion.beyst@gmail.com>2022-11-16 13:00:14 +0100
committerIlion Beyst <ilion.beyst@gmail.com>2022-11-16 13:00:14 +0100
commite91b1da5b02ca6abf9bc4afd0d4a62789b688102 (patch)
tree6da7d7a1edf17b0147c6d7b88e95b945ed79b07b /web/pw-visualizer/src/webgl/text.ts
parent3afa795cf559915e95b108e40beea18760b33064 (diff)
downloadplanetwars.dev-e91b1da5b02ca6abf9bc4afd0d4a62789b688102.tar.xz
planetwars.dev-e91b1da5b02ca6abf9bc4afd0d4a62789b688102.zip
remove old text rendering code
Diffstat (limited to 'web/pw-visualizer/src/webgl/text.ts')
-rw-r--r--web/pw-visualizer/src/webgl/text.ts199
1 files changed, 0 insertions, 199 deletions
diff --git a/web/pw-visualizer/src/webgl/text.ts b/web/pw-visualizer/src/webgl/text.ts
deleted file mode 100644
index 1ae6f37..0000000
--- a/web/pw-visualizer/src/webgl/text.ts
+++ /dev/null
@@ -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);
-}