GPU-based antialiased vector rendering
- Dominant language
- Kotlin
- Stars
- 3k
- Forks
- 148
- Avg merge
- 13h 44m
- Merged PRs (30d)
- 1
Description
For rendering huge scaled vectors, we might want to implement gpu-based vector rendering:
https://github.com/memononen/nanovg
For text, there are some tricks (either distances, or passing bezier curves to the shaders [this would require not supporting it in webgl1]):
https://github.com/azsn/gllabel
* [x] Even-odd winding shape rendering
* [x] Color fills
* [x] Bitmap fills
* [x] Linear gradient fills
* [x] Radial gradient fills
* [x] Sweep gradient fills
* [x] Clipping/masks
* [x] Proper bounds for gpu shapes view
* [ ] Non-zero winding shape rendering
* [x] Strokes
* [x] Antialiasing, either MSAA on render buffers or extra stencil tricks like nanovg that should give better performance
* [ ] Stroke filling doesn't have the right transform (specially noticeable on AA border of fills)
* [x] Convert cubic beziers into quadratic ones
* [ ] Curve rendering at the shader level (less points, and more accurate, requires approximating cubic into quadratic)
* [ ] TODO: we have to shrink shapes a bit to draw the AA stroke. We can know the shrink direction by checking each joint if going in one direction or another falls inside the polygon with existing functionality. This should work with both even-odd and non-zero winding modes
* [ ] TODO: cache stroke points too (already done for fills)
* [ ] TODO: detect convex shapes to draw them without stencil. Special care for ([](https://imgur.com/gallery/85Dg5JY)self-intersecting loop - pseudo-convex polygon) - https://math.stackexchange.com/questions/1743995/determine-whether-a-polygon-is-convex-based-on-its-vertices
* [ ] TODO: since this requires a lot of batch calls, let's implement AG queues with incremental states and multithreaded rendering: https://github.com/korlibs/korge/issues/465 https://github.com/korlibs/korge-next/issues/516
* [ ] TODO: Antialiased clipping (maybe we can use an intermediate render buffer and composite it)
* [ ] TODO: orthogonal vertical/horizontal strokes shouldn't have antialiasing
* [ ] Composite modes
* [ ] Verify it is functionality-complete to cover all HTML canvas features: https://simon.html5.org/dump/html5-canvas-cheat-sheet.html
Contributor guide
No contributing guide indexed for this repository
Research direction
The issue names no files, tests, or code entry points; start by reviewing the existing GPU vector-rendering implementation and the linked NanoVG and glLabel references. Done means addressing the unchecked rendering items, including non-zero winding, curve rendering, clipping, compositing, and HTML canvas feature coverage.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- kotlin
- Domain
- computer-graphics
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100