Draw all nodes in the tree using gl.TRIANGLES instead of gl.LINES?
- 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:

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:

... although using a default color of black, rather than gray, helps a bit:

Anyway, not a big deal -- but something that we may want to consider.
Contributor 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