Use position instead of offsetting in shader, fix ugly font rendering at 100% scale

2 months ago · 07612b6162
7 changed files with 42 additions and 31 deletions
--- a/geometry.js
+++ b/geometry.js
@ -28,7 +28,10 @@ function rasterize_and_pack(text, cycles) {
				@@ -28,7 +28,10 @@ function rasterize_and_pack(text, cycles) {
        return rasterized[key];
    }

-    const tiles_needed = cycles - 1 + 1; // stage name + count from one
+    let cycles_total_padding = (cycles - 1) * config.padding;
+    let bonus_cells = Math.ceil(cycles_total_padding / config.w);
+
+    const tiles_needed = cycles - 1 + 1 + bonus_cells; // stage name + count cycles from one
    if (tiles_needed > config.raster_texture_size / config.w - raster_tile.x) {
        raster_tile.x = 0;
        raster_tile.y += 1;
@ -42,20 +45,12 @@ function rasterize_and_pack(text, cycles) {
				@@ -42,20 +45,12 @@ function rasterize_and_pack(text, cycles) {
    gl.texSubImage2D(gl.TEXTURE_2D, 0, 
        raster_tile.x * config.w, raster_tile.y * config.h, 
        config.w, config.h, 
-        gl.RGBA, gl.UNSIGNED_BYTE, c2d.canvas
+        gl.RGBA, gl.UNSIGNED_BYTE, 
+        c2d.canvas
    );
-    raster_tile.x += 1;

-    for (let i = 1; i <= cycles; ++i) {
-        rasterize(i);    
-        gl.bindTexture(gl.TEXTURE_2D, textures['raster']);
-        gl.texSubImage2D(gl.TEXTURE_2D, 0, 
-            raster_tile.x * config.w, raster_tile.y * config.h, 
-            config.w, config.h, 
-            gl.RGBA, gl.UNSIGNED_BYTE, c2d.canvas
-        );
-        raster_tile.x += 1;
-    }
+    raster_tile.x += 1;
+    raster_tile.x += cycles + bonus_cells;

    if (raster_tile.x === config.raster_texture_size / config.w) {
        raster_tile.x = 0;
@ -101,18 +96,20 @@ function generate(trace_id) {
				@@ -101,18 +96,20 @@ function generate(trace_id) {
            }

            let [r, g, b] = get_color(stage.name);
+            let a = 255;

            if (!instruction.retired) {
                r = Math.max(50, r - 50);
                g = Math.max(50, g - 50);
                b = Math.max(50, b - 50);
+                a = 100;
            }

            const [u, v] = rasterize_and_pack(stage.name, stage_cycles);

-            sizes.push(stage_cycles * config.w, 1 * config.h);
-            positions.push(config.w * stage.c, config.h * y); 
-            colors.push(r, g, b, 255);
+            sizes.push(stage_cycles * config.w + (stage_cycles - 1) * config.padding, 1 * config.h);
+            positions.push(config.w * stage.c + config.padding * (stage.c - 1), config.h * y + config.padding * (y - 1)); 
+            colors.push(r, g, b, a);
            uvs.push(u, v);

            result.count++;
--- a/ibm_vga8.woff2
+++ b/ibm_vga8.woff2
--- a/index.html
+++ b/index.html
@ -21,7 +21,7 @@
				@@ -21,7 +21,7 @@
 <body>
    <div class="main">
        <canvas id="c"></canvas>
-        <canvas id="offscreen" width="128" height="128"></canvas>
+        <canvas id="offscreen" width="32" height="32"></canvas>
    </div>
 </body>
 </html>
--- a/index.js
+++ b/index.js
@ -3,7 +3,12 @@ document.addEventListener('DOMContentLoaded', main);
				@@ -3,7 +3,12 @@ document.addEventListener('DOMContentLoaded', main);
 let traces = {};

 function main() {
-    init_webgl();
-    init_rasterizer();
-    init_listeners();
+    const font = new FontFace('ibm8x16', 'url(ibm_vga8.woff2)');
+    document.fonts.add(font);
+    font.load();
+    document.fonts.ready.then(() => {
+        init_webgl();
+        init_rasterizer();
+        init_listeners();
+    });
 }
--- a/input.js
+++ b/input.js
@ -73,8 +73,8 @@ function jump_to_first_instruction()  {
				@@ -73,8 +73,8 @@ function jump_to_first_instruction()  {
        const trace = traces[Object.keys(traces)[0]].raw;
        if (Object.keys(trace).length > 0) {
            const first_instruction = trace[Object.keys(trace)[0]];
-            offset.x = -first_instruction.cycle * config.w;
-            offset.y = 0 * config.h;
+            offset.x = -first_instruction.cycle * config.w + config.padding * 2;
+            offset.y = config.padding * 2;
            zoom_target = 1;
            zoom = 1;
            schedule_draw();
--- a/rasterizer.js
+++ b/rasterizer.js
@ -4,12 +4,15 @@ let c2d = null;
				@@ -4,12 +4,15 @@ let c2d = null;

 function init_rasterizer() {
    c2d = document.querySelector('#offscreen').getContext('2d'); 
-    c2d.font = '14px monospace';
-    c2d.fillStyle = 'white';
+    c2d.font = '16px ibm8x16';
+    //c2d.font = '14px monospace';
+    c2d.textAlign = 'center';
+    c2d.textBaseline = 'middle';
+    c2d.fillStyle = '#eeeeee';
 }

 function rasterize(text) {
    c2d.clearRect(0, 0, c2d.canvas.width, c2d.canvas.height); 
-    c2d.fillText(text, 0, 14);
+    c2d.fillText(text, config.w / 2, config.h / 2);
    //c2d.fillRect(0, 0, 32, 32);
 }
--- a/render.js
+++ b/render.js
@ -6,6 +6,7 @@ let config = {
				@@ -6,6 +6,7 @@ let config = {
    bytes_per_quad: 28,
    w: 32,
    h: 32,
+    padding: 2,

    predefined_colors: {
        'Np': [75, 62, 143],
@ -69,29 +70,30 @@ const tquad_vs_src = `#version 300 es
				@@ -69,29 +70,30 @@ const tquad_vs_src = `#version 300 es
        }

        vec2 cycles = a_size / u_tile;
+        vec2 tt = u_textile / u_tile;

        if (vertex_index == 0) {
            // "top left" aka "p1"
-            corner = a_pos + inset;
+            corner = a_pos;
            uv = a_uv;
        } else if (vertex_index == 1 || vertex_index == 5) {
            // "top right" aka "p2"
-            corner = a_pos + vec2(a_size.x, 0) + vec2(-inset.x, inset.y);
+            corner = a_pos + vec2(a_size.x, 0);
            uv = a_uv + vec2(u_textile.x * cycles.x, 0);
        } else if (vertex_index == 2 || vertex_index == 4) {
            // "bottom left" aka "p3"
-            corner = a_pos + vec2(0, a_size.y) + vec2(inset.x, -inset.y);
+            corner = a_pos + vec2(0, a_size.y);
            uv = a_uv + vec2(0, u_textile.y * cycles.y);
        } else {
            // "bottom right" aka "p4"
-            corner = a_pos + a_size - inset;
+            corner = a_pos + a_size;
            uv = a_uv + u_textile * cycles;
        }
      
        vec2 screen02 = (corner.xy * vec2(u_scale) + u_translation) / u_res * 2.0;
        screen02.y = 2.0 - screen02.y;
        v_color = a_color;
-        v_uv = uv - u_textile * vec2(0.2);
+        v_uv = uv;

        gl_Position = vec4(screen02 - 1.0, 1.0, 1.0);
    }
@ -104,12 +106,14 @@ const tquad_fs_src = `#version 300 es
				@@ -104,12 +106,14 @@ const tquad_fs_src = `#version 300 es
    in vec2 v_uv;

    uniform sampler2D u_texture;
+    uniform float u_fade;
     
    layout(location = 0) out vec4 FragColor;

    void main() {
        vec4 text = texture(u_texture, v_uv);
-        FragColor = vec4(text.rgb * text.a + v_color.rgb * (1.0 - text.a), 1.0);
+        text.a = min(min(text.a, v_color.a), u_fade);
+        FragColor = vec4(text.rgb * text.a + v_color.rgb, 1.0);
    }
 `;

@ -147,6 +151,7 @@ function draw(ts, animation) {
				@@ -147,6 +151,7 @@ function draw(ts, animation) {

    if (quads.count > 0) {
        const program = programs['quad'];
+        const fade = Math.max(0, Math.min(1.25 * zoom - 0.25, 1));

        gl.useProgram(program.program);
        gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_packed']);
@ -162,6 +167,7 @@ function draw(ts, animation) {
				@@ -162,6 +167,7 @@ function draw(ts, animation) {
        gl.uniform2f(program.locations['u_textile'], config.w / config.raster_texture_size, config.h / config.raster_texture_size);
        gl.uniform1i(program.locations['u_texture'], textures['raster']);
        gl.uniform2f(program.locations['u_tile'], config.w, config.h);
+        gl.uniform1f(program.locations['u_fade'], fade);

        gl.enableVertexAttribArray(program.locations['a_pos']);
        gl.enableVertexAttribArray(program.locations['a_size']);