diff options
Diffstat (limited to 'web/pw-visualizer/src/index.ts')
-rw-r--r-- | web/pw-visualizer/src/index.ts | 37 |
1 files changed, 28 insertions, 9 deletions
diff --git a/web/pw-visualizer/src/index.ts b/web/pw-visualizer/src/index.ts index 4231707..97bdb3d 100644 --- a/web/pw-visualizer/src/index.ts +++ b/web/pw-visualizer/src/index.ts @@ -25,6 +25,7 @@ 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"; function to_bbox(box: number[]): BBox { @@ -84,7 +85,7 @@ export function init() { ms_per_frame = parseInt(ELEMENTS["speed"].value); - GL = CANVAS.getContext("webgl"); + GL = CANVAS.getContext("webgl", { antialias: true }); GL.clearColor(0, 0, 0, 1); GL.clear(GL.COLOR_BUFFER_BIT); @@ -124,9 +125,12 @@ export class GameInstance { image_shader: Shader; masked_image_shader: Shader; + msdf_shader: Shader; + text_factory: LabelFactory; - planet_labels: Label[]; - ship_labels: Label[]; + msdf_text_factory: MsdfLabelFactory; + planet_labels: MsdfLabel[]; + ship_labels: MsdfLabel[]; ship_ibo: IndexBuffer; ship_vao: VertexArray; @@ -153,6 +157,7 @@ export class GameInstance { planets_textures: Texture[], ship_texture: Texture, font_texture: Texture, + robotoMsdfTexture: Texture, shaders: Dictionary<ShaderFactory> ) { this.game = game; @@ -168,7 +173,9 @@ 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 = []; @@ -278,11 +285,11 @@ export class GameInstance { 1, 0, -planets[i * 3], - -planets[i * 3 + 1] - 1.2, + -planets[i * 3 + 1] - 1.171875, 1, ]); - const label = this.text_factory.build(GL, transform); + const label = this.msdf_text_factory.build(GL, transform); this.planet_labels.push(label); this.renderer.addRenderable(label.getRenderable(), LAYERS.planet_label); } @@ -330,7 +337,7 @@ export class GameInstance { this.planet_labels[i].setText( GL, - "*" + planet_ships[i], + "" + planet_ships[i], Align.Middle, Align.Begin ); @@ -375,7 +382,7 @@ export class GameInstance { const renderable = new DefaultRenderable(ib, vao, this.masked_image_shader, [this.ship_texture], {}); this.renderer.addRenderable(renderable, LAYERS.ship); - const label = this.text_factory.build(GL); + const label = this.msdf_text_factory.build(GL); this.ship_labels.push(label); this.renderer.addRenderable(label.getRenderable(), LAYERS.ship_label); @@ -451,10 +458,11 @@ export class GameInstance { this.shader, this.image_shader, this.masked_image_shader, + this.msdf_shader, ]; - // If not playing, still reder with different viewbox, so people can still pan etc. + // If not playing, still render with different viewbox, so that panning is still possible if (!this.playing) { this.last_time = time; @@ -595,6 +603,7 @@ export async function set_instance(source: string): Promise<GameInstance> { loadImage(assets.fontPng), loadImage(assets.shipPng), loadImage(assets.earthPng), + loadImage(assets.robotoMsdfPng), ]; const shader_promies = [ @@ -630,7 +639,14 @@ export async function set_instance(source: string): Promise<GameInstance> { assets.simpleVertexShader, ), ])(), - + (async () => + <[string, ShaderFactory]>[ + "msdf", + await ShaderFactory.create_factory( + assets.msdfFragmentShader, + assets.simpleVertexShader, + ), + ])(), ]; let shaders_array: [string, ShaderFactory][]; [texture_images, shaders_array] = await Promise.all([ @@ -646,12 +662,15 @@ export async function set_instance(source: string): Promise<GameInstance> { 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"); + game_instance = new GameInstance( Game.new(source), [earthTexture], shipTexture, fontTexture, + robotoMsdfTexture, shaders ); |