Designer rendering research/prototyping

[luxaritas]

Due to the complexity of interoperation between canvas and DOM, we want to explore the viability of an SVG-based 2D RNA visualization. In particular, there are concerns around the performance of animations with large numbers of bases.

NB: We probably still have to deal with Canvas for RNA3D, which means we probably still need to think through how interop needs to work.

[luxaritas]

After doing some research, it looks like SVG starts to break down around 1000 elements, which is quite low in our case. I'll probably want to start looking at other options for WebGL/DOM integration as it seems like we may not have much of a choice

[luxaritas]

Ultimately this isn't an issue specific to RNA2D - it affects RNA3D as well, and really doesn't have much to do about the performance of RNA2D itself at this point (since we've determined SVG won't cut it) but more generally handling interlaced HTML/WebGL content.

I started looking into this, and found a few resources:

• https://webglfundamentals.org/webgl/lessons/webgl-multiple-views.html#drawing-multiple-canvases
• https://github.com/greggman/virtual-webgl
• https://www.khronos.org/webgl/public-mailing-list/public_webgl/1503/msg00095.php

Eventually I stumbled across https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas#synchronous_display_of_frames_produced_by_an_offscreencanvas - this shows a pattern of using OffscreenCanvas.transferToImageBitmap and a canvas with a bitmaprenderer context, which is supposed to allow for transferring image data without a readback from the GPU to CPU. Now Safari doesn't support OffscreenCanvas, but createImageBitmap can create an ImageBitmap directly from a regular WebGL canvas, which should have the same benefits.

I used a modified version of the PixiJS Bunny Mark application to test this out, and with 10k bunnies, splitting the image across 16 canvas elements:

• Chrome stays at 60fps
• Webkit drops from 60 to ~40
• Firefox drops from ~55 to ~10 :disappointed:

Turns out, Firefox incurs readbacks when generating ImageBitmaps. There's an open bug for createImageBitmap and one for OffscreenCanvas.transferToImageBitmap.

[luxaritas]

I'm throwing this under designer-hud since at this point I'm considering this largely in terms of its impact with the windowing system

[luxaritas]

Investigating virtual-webgl gave me the idea that maybe passing the webgl canvas to a Context2D's drawImage would work instead, but same problem exists there, with a related open bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1163426