Fast rendering

[drom]

Timing diagram ( part of #5 ) can be constructed in vector form, but then need to be rendered into pixel accurate form to be useful.

Possible options:

• SVG
• Canvas
• WebGL

Maps or 2D gaming rendering engines can be a good source of inspiration

[drom]

from: @DrSensor #1

For fast rendering, how about using different implementation depend on the density of the data?
For example, use SVG when there are fewer lines to be rendered and switch to WebGL if there is a huge amount of lines.

[drom]

My current ideas about Fast rendering:

1. divide all diagram into rectangular tiles
2. first, render the tiles included into viewfinder [ Viewfinder #11 ]
3. then render the tiles around for faster scroll/zoom [ Zoomable & Scrollable #2 ]
4. keep the LRU cache of pre-rendered tiles

Tile rendering:

1. create a set of useful building blocks (skin) SVG -> raster
2. compose bigger blocks by hierarchical rectangle copy process.
3. render tiles from the hierarchy of building blocks.

[drom]

Sources of inspiration:

• https://github.com/pixijs/pixi.js
• https://leafletjs.com
• https://github.com/mapbox/mapbox-gl-js

Rendering in Web workers:

• https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
• https://hacks.mozilla.org/2016/01/webgl-off-the-main-thread/