aboutsummaryrefslogtreecommitdiff
path: root/web/pw-visualizer/src/index.ts
diff options
context:
space:
mode:
Diffstat (limited to 'web/pw-visualizer/src/index.ts')
-rw-r--r--web/pw-visualizer/src/index.ts37
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
);