diff --git a/web/pw-visualizer/assets/res/font.png b/web/pw-visualizer/assets/res/font.png deleted file mode 100644 index 1724e0d..0000000 Binary files a/web/pw-visualizer/assets/res/font.png and /dev/null differ diff --git a/web/pw-visualizer/src/assets.ts b/web/pw-visualizer/src/assets.ts index abd17e4..817f766 100644 --- a/web/pw-visualizer/src/assets.ts +++ b/web/pw-visualizer/src/assets.ts @@ -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"; diff --git a/web/pw-visualizer/src/index.ts b/web/pw-visualizer/src/index.ts index 8159134..6bc72f6 100644 --- a/web/pw-visualizer/src/index.ts +++ b/web/pw-visualizer/src/index.ts @@ -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 ) { @@ -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 { // 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 { } 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 ); diff --git a/web/pw-visualizer/src/webgl/msdf_text.ts b/web/pw-visualizer/src/webgl/msdf_text.ts index 5bbac20..28daf42 100644 --- a/web/pw-visualizer/src/webgl/msdf_text.ts +++ b/web/pw-visualizer/src/webgl/msdf_text.ts @@ -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 { 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; -} - -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); -}