biocore / biocore/empress

Draw all nodes in the tree using gl.TRIANGLES instead of gl.LINES?

Open
#332 2 comments 0 reactions 0 assignees View on GitHub
feature request question
Dominant language
JavaScript
Stars
56
Forks
32
PR merge metrics
No merged PRs in 30d

Description

I read through [this article](https://mattdesl.svbtle.com/drawing-lines-is-hard) and thought that this might be a useful option to add in. A few reasons that stick out:

- Users may want to increase the overall line thickness for the tree (not just for colored nodes)
- This could be particularly important for people with vision impairments
- Users may want to be able to "zoom in" on parts of the tree and see the lines / points increase in size. Lines / points [aren't impacted by zooming](https://gamedev.stackexchange.com/questions/96930/opengl-why-points-size-stay-the-same-while-zooming-unzooming) (as far as I can tell), so zooming in can be a bit confusing.
- Although I could also see "lines look the same at any zoom level" as being an upside to the current way of doing things...
- Plain lines can apparently be inconsistently rendered across different browsers (I don't think this has been a problem, but as more people start using Empress it could be)
- This looks closer to what other tree visualizers, e.g. iTOL / ggtree, do by default (so it makes Empress look less different; I guess this could be an upside or a downside depending on how you look at it)

In terms of the code, I think this'd just involve treating each line analogously to how "thick lines" are currently treated. I'm not sure if this will be a performance problem, but if so we could probably make this a configurable option.

I set up a quick and dirty prototype in [this branch](https://github.com/fedarko/empress/tree/triangles-all-the-way-down), where all nodes are treated as thick lines and all points are drawn as squares using two triangles -- it doesn't look that bad, although nodes overlapping is a problem since the line width used here is 5:
![thicklines](https://user-images.githubusercontent.com/4177727/90304430-85274900-de6c-11ea-86f0-907d2c9d5fb8.gif)

The line thickness would need to be adjusted based on the dimensions of the tree (...so, the same problem as #276). On the other side of things, using too small of a thickness results in an invisible-looking tree when the user is zoomed out:
![invisitree](https://user-images.githubusercontent.com/4177727/90304382-fdd9d580-de6b-11ea-8806-e219a1d00911.png)

... although using a default color of black, rather than gray, helps a bit:
![black_invisitree](https://user-images.githubusercontent.com/4177727/90304415-51e4ba00-de6c-11ea-975c-48441876ef0b.png)

Anyway, not a big deal -- but something that we may want to consider.

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the linked `triangles-all-the-way-down` prototype branch and comparing it with the current thick-line rendering approach. Determine how configurable thickness, zoom behavior, node overlap, performance, and browser rendering should be handled; done means an agreed implementation scope and validated rendering behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
computer-graphics
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.