korlibs / korlibs/korge

GPU-based antialiased vector rendering

Open
#550 4 comments 0 reactions 0 assignees View on GitHub
enhancement
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.