Round offset. Set up for new numbers rendering (rasterize all numbers 1-MAX to rows, use these rows as textures).

import_worker.js

@@ -1,7 +1,7 @@
 let traces = {};
 let config = {};
 let raster_tile = {'x': 0, 'y': 0};
-let numbers_rasterized = 0;
+let max_stage_cycles = 0;
 
 onmessage = (e) => {
     const msg = e.data;
@@ -12,6 +12,7 @@ onmessage = (e) => {
         const text = msg.text;
         if (parse(text)) {
             traces['0'].geo = generate('0');
+            delete traces['0'].raw;
             postMessage({'type': 'trace', 'data': traces['0']});
         }
     }
@@ -64,7 +65,12 @@ function parse(text) {
                     if (!assert_arglen(line_parts, 1, 'C')) return false;
 
                     const cycles = Number(line_parts[1]);
-                    c += cycles;
+                    
+                    if (c === -1) {
+                        c = 0;
+                    } else {
+                        c += cycles;
+                    }
 
                     break;
                 }
@@ -262,7 +268,7 @@ function get_color(stage_name) {
     return colors[stage_name];
 }
 
-function rasterize_and_pack(text, cycles) {
+function rasterize_and_pack(text) {
     // TODO: handle texture is full or stuff don't fit (unlikely)
 
     const key = text;
@@ -285,28 +291,6 @@ function rasterize_and_pack(text, cycles) {
 
     rasterized[key] = [u, v];
 
-    if (cycles > 1) {
-        for (let i = numbers_rasterized + 1; i <= cycles; ++i) {
-            const u = raster_tile.x * config.w / config.raster_texture_size;
-            const v = raster_tile.y * config.h / config.raster_texture_size;
-
-            postMessage({'type': 'rasterize', 'data': { 'text': i, 'at': {'x': raster_tile.x, 'y': raster_tile.y}}});
-
-            raster_tile.x += 1;
-
-            if (raster_tile.x === config.raster_texture_size / config.w) {
-                raster_tile.x = 0;
-                raster_tile.y += 1;
-            }
-
-            rasterized[i] = [u, v];
-        }
-
-        if (cycles > numbers_rasterized) {
-            numbers_rasterized = cycles;
-        }
-    }
-
     return [u, v];
 }
 
@@ -324,6 +308,10 @@ function pack_instruction(instruction, positions, sizes, colors, uvs, starts, y)
             stage_cycles = instruction.retcyc - stage.c;
         }
 
+        if (stage_cycles > max_stage_cycles) {
+            max_stage_cycles = stage_cycles;
+        }
+
         let [r, g, b] = get_color(stage.name);
         let a = 255;
 
@@ -331,7 +319,7 @@ function pack_instruction(instruction, positions, sizes, colors, uvs, starts, y)
             a = 80;
         }
 
-        const [u, v] = rasterize_and_pack(stage.name, stage_cycles);
+        const [u, v] = rasterize_and_pack(stage.name);
 
         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)); 
@@ -380,8 +368,12 @@ function generate(trace_id) {
         ++y;
     }
 
+    postMessage({'type': 'rasterize_numbers', 'up_to': max_stage_cycles});
+
     starts.push(positions.length);
 
+    console.log(`Total geometry: ${Math.round(result.count * config.bytes_per_quad / 1024 / 1024)}MB`);
+
     if (config.show_texture) {
         result.pos = new Float32Array([0, 0]);
         result.size = new Float32Array([config.raster_texture_size, config.raster_texture_size]);

input.js

@@ -126,6 +126,9 @@ function upload_file(file) {
             } else if (msg.type === 'rasterize') {
                 const data = msg.data;
                 queue_rasterize(data.text, data.at);
+            } else if (msg.type === 'rasterize_numbers') {
+                const value = msg.up_to;
+                rasterize_row(value);
             } else if (msg.type === 'progress_parse') {
                 console.log(`Parsing: ${msg.data}%`);
             } else if (msg.type === 'progress_generate') {

rasterizer.js

@@ -3,6 +3,8 @@ let raster_queue = [];
 
 function init_rasterizer() {
     c2d = document.querySelector('#offscreen').getContext('2d'); 
+    c2d.canvas.width = config.w;
+    c2d.canvas.height = config.h;
     c2d.font = '16px ibm8x16';
     //c2d.font = '14px monospace';
     c2d.textAlign = 'center';
@@ -16,6 +18,10 @@ function rasterize(text) {
     //c2d.fillRect(0, 0, 32, 32);
 }
 
+function rasterize_row(value) {
+    // from 1 to value
+}
+
 function queue_rasterize(text, at) {
     raster_queue.push({'text': text, 'at': at});
 }

render.js

@@ -4,9 +4,9 @@ let textures = {};
 let timers = {};
 let config = {
     bytes_per_quad: 28,
-    w: 32,
-    h: 32,
-    padding: 2,
+    w: 40,
+    h: 20,
+    padding: 1,
 
     predefined_colors: {
         'Np': [75, 62, 143],
@@ -192,7 +192,7 @@ function draw(ts, animation) {
         }
 
         gl.uniform2f(program.locations['u_res'], canvas.width, canvas.height);
-        gl.uniform2f(program.locations['u_translation'], offset.x, offset.y);
+        gl.uniform2f(program.locations['u_translation'], Math.round(offset.x), Math.round(offset.y));
         gl.uniform1f(program.locations['u_scale'], zoom);
         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']);
@@ -200,16 +200,17 @@ function draw(ts, animation) {
         gl.uniform1f(program.locations['u_fade'], fade);
         gl.uniform1i(program.locations['u_solid'], 1);
         gl.uniform1i(program.locations['u_single'], 0);
+        gl.uniform1i(program.locations['u_extra'], 0);
 
         gl.enableVertexAttribArray(program.locations['a_pos']);
         gl.enableVertexAttribArray(program.locations['a_size']);
         gl.enableVertexAttribArray(program.locations['a_color']);
         gl.enableVertexAttribArray(program.locations['a_uv']);
 
-        gl.vertexAttribPointer(program.locations['a_pos'],   2, gl.FLOAT,         false,   2 * 4, 0);
+        gl.vertexAttribPointer(program.locations['a_pos'],    2, gl.FLOAT,         false,   2 * 4, 0);
         gl.vertexAttribPointer(program.locations['a_size'],   2, gl.FLOAT,         false,   2 * 4, clipped.pos.byteLength);
-        gl.vertexAttribPointer(program.locations['a_color'], 4, gl.UNSIGNED_BYTE, true,    4 * 1, clipped.pos.byteLength + clipped.size.byteLength);
-        gl.vertexAttribPointer(program.locations['a_uv'], 2, gl.FLOAT, false, 2 * 4, clipped.pos.byteLength + clipped.size.byteLength + clipped.color.byteLength);
+        gl.vertexAttribPointer(program.locations['a_color'],  4, gl.UNSIGNED_BYTE, true,    4 * 1, clipped.pos.byteLength + clipped.size.byteLength);
+        gl.vertexAttribPointer(program.locations['a_uv'],     2, gl.FLOAT, false, 2 * 4, clipped.pos.byteLength + clipped.size.byteLength + clipped.color.byteLength);
 
         gl.vertexAttribDivisor(program.locations['a_pos'], 1);
         gl.vertexAttribDivisor(program.locations['a_size'], 1);
@@ -219,9 +220,19 @@ function draw(ts, animation) {
         gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, clipped.count); 
 
         if (fade > 0) {
+            // Stage names
             gl.bindTexture(gl.TEXTURE_2D, textures['raster']);
             gl.uniform1i(program.locations['u_solid'], 0);
             gl.uniform1i(program.locations['u_single'], 1);
+            gl.uniform1i(program.locations['u_extra'], 0);
+            gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, clipped.count); 
+
+            // Cycle counts
+            gl.bindTexture(gl.TEXTURE_2D, textures['raster']);
+            gl.uniform1i(program.locations['u_solid'], 0);
+            gl.uniform1i(program.locations['u_single'], 0);
+            gl.uniform1i(program.locations['u_extra'], 1);
+            // TODO: we need a set of alternative uvs here?
             gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, clipped.count); 
         }
 
@@ -324,6 +335,7 @@ function init_webgl() {
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, config.raster_texture_size, config.raster_texture_size, 0, gl.RGBA, gl.UNSIGNED_BYTE, zeroes); // fill the whole texture once with zeroes to kill a warning about a partial upload
 
+ 
     gl.bindTexture(gl.TEXTURE_2D, textures['numbers']);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);