GithubHelp home page GithubHelp logo

audulus / vger-rs Goto Github PK

View Code? Open in Web Editor NEW
247.0 3.0 20.0 362 KB

2D GPU renderer for dynamic UIs

License: MIT License

Rust 81.90% WGSL 18.10%
rust gpu wgpu nanovg vger vector-graphics 2d-graphics-library

vger-rs's Introduction

vger-rs

build status dependency status

vger is a vector graphics renderer which renders a limited set of primitives, but does so almost entirely on the GPU. Port of VGER to Rust. Used in rui.

Status

  • ✅ Quadratic bezier strokes
  • ✅ Round Rectangles
  • ✅ Circles
  • ✅ Line segments (need square ends for Audulus)
  • ✅ Arcs
  • ✅ Text (Audulus only uses one font, but could add support for more if anyone is interested)
  • ✅ Multi-line text
  • ✅ Path Fills.
  • ✅ Scissoring
  • ❌ Images

Why?

I was previously using nanovg for Audulus, which was consuming too much CPU for the immediate-mode UI. nanovg is certainly more full featured, but for Audulus, vger maintains 120fps while nanovg falls to 30fps on my 120Hz iPad because of CPU-side path tessellation, and other overhead. vger renders analytically without tessellation, leaning heavily on the fragment shader.

How it works

vger draws one or more quads for each primitive and computes the actual primitive shape in the fragment function with an SDF. For path fills, vger splits paths into horizontal slabs (see path.rs) to reduce the number of tests in the fragment function.

The bezier path fill case is somewhat original. To avoid having to solve quadratic equations (which has numerical issues), the fragment function uses a sort-of reverse Loop-Blinn. To determine if a point is inside or outside, vger tests against the lines formed between the endpoints of each bezier curve, flipping inside/outside for each intersection with a +x ray from the point. Then vger tests the point against the area between the bezier segment and the line, flipping inside/outside again if inside. This avoids the pre-computation of Loop-Blinn, and the AA issues of Kokojima.

References

Text Rendering Hates You

Adventures in Text Rendering

Vector Graphics on GPU

GPU UIs at 120 FPS

vger-rs's People

Contributors

dzhou121 avatar farshed avatar maaku avatar rsaccon avatar waywardmonkeys avatar wtholliday avatar zoxc avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

vger-rs's Issues

How does this compare to other vector graphics rendering libraries performance wise?

TLDR

If I may ask, I'm currently using Google's Skia library for vector graphics rendering VIA the skia-safe crate, but I'd love to use a more 'rusty' solution. Do you have any idea how this would compare to Google's Skia library performance wise? As well as other popular rust crates?

Overview

I happen to be in the market for a fast 2D vector graphics rendering library (for my subscript project). Specially for the canvas renderer shown in the image:

Canvas Preview

All I care about are paths with lines, bezier curves, and fill/stroke support. And I'm kinda interested in rui so I though I'd maybe consider this library...

Edges of shapes are not rendered well

Black rectangle expected to be invisible:

    let black = vger.color_paint(Color{r: 0.0, g: 0.0, b: 0.0, a: 1.0});
    vger.fill_rect(euclid::rect(100.0, 100.0, 100.0, 100.0), 10.0, black);

image
(5x)

Two rectangles expected to be seamless:

    let cyan = vger.color_paint(Color::CYAN);
    vger.fill_rect(euclid::rect(100.0, 100.0, 100.0, 100.0), 0.0, cyan);
    vger.fill_rect(euclid::rect(200.0, 100.0, 100.0, 100.0), 0.0, cyan);

image
(5x)

I guess these artifacts are caused by anti-aliasing.

Feature request: opacity groups

Hey! I'm looking to use vger in a project of mine but it doesn't support opacity groups (aka layered transparency). What would it take to add opacity groups to vger? I'd be willing to help implement it. :)

text is blurry

The tests now write the glyph atlas to a png.

Here's a glyph in the atlas:

image

here's that glyph rendered:

image

Feature request: 3D projection

I'd like to use vger in 3D (and eventually VR) for anti-aliased, GPU-accelerated Bezier rendering. All of the drawing operations would be projected onto a flat 2D plane observed through a 3D perspective camera. Is this possible to implement in vger, and if so, how can I help out?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.