29 comments

[ 3.0 ms ] story [ 55.7 ms ] thread
I've been working on this problem on and off for over 10 years.

AMA ;-)

Have you compared performance of your solution to rive?
So what part of the SVG-spec does this implement? Does it support text? Gradients? Filters like blur and dropshadow?
How would you break down the problem with rendering 2D to someone who has no rendering background? Is there a single large issue or is it a complex multi-issue endeavour?
Computer graphics is not my field, so forgive my ignorance, but could you explain the pros and cons of your "traditional graphics pipeline" approach and more "modern" approaches (I'm guessing that means doing most of the work in shaders)? At the moment, and looking towards the future, do you think hardware (mobile and mainstream desktop) will continue to support your approach just as well, or are shader-based approaches (I guess using multi-channel SDFs) likely to gain the upper hand at some point?
What magic makes the zooming work?
You mentioned winding numbers in a couple of places

Wouldn't it make sense to do a "first pass" and eliminate paths that intersect themselves? (by splitting them into 2+ paths)

I never understood why these are supported in the SVG spec.

It seems like a pathological case. Once self-intersecting paths are eliminated the problem gets simpler.. no?

Or would a CPU pass be cheating?

Why did you release it only for personal use? Any chance for an OSI-approved license?
This project made me happy. You mentioned Flash as an inspiration. Have you looked at how Ruffle is handling vector art?

From what I recall they are converting it to triangles. Your solution (curves in the shaders?) seems both cheaper and more accurate, so I'm wondering if they could use it!

Ruffle is cool. From pixel inspecting the demo, it looks like they are using triangle fans with stencil & cover + MSAA, which was how I started!
Nice work! I’d love to hear about your goals with this project, do you want to get it into PDF or browser engines, or anything like that?

Mark Kilgard surveyed some path rendering engines with a few curves that most have trouble with. It’d be fun to see how Rasterizer stacks up, and perhaps a nice bragging point if you dominate the competition. https://arxiv.org/pdf/2007.12254

Having used the quadratic solver code that you found on ShaderToy (sqBezier), you might be able to shave some cycles by doing a constant-folding pass on the code. It can be simplified from the state it’s in. Also the constant in there 1.73205 is just sqrt(3), and IMO it’s nicer to see the sqrt(3) than the constant, and it won’t slow anything down, the compiler will compute the constant for you. Also, it might be nice to additionally link to the original source of that code on pouet.

Are there any culling optimizations for unseen elements when layering SVG images? Looks like this isn’t an optimization that comes out-of-the-box with OpenVG and all the major web browsers needed to add this, so wondering what your solution is doing.
I'm always interested in new 2D vector rendering algorithms, so if you make a blog post explaining your approach, with enough detail, I'd be happy to read it!
Thanks for the feedback. I will work on one.
Great to see you're still going Nigel! Is this library the latest iteration of your original VectorGL project?
Hi Steve. Yes, it is! 10+ years in the making.
Congratulations!

Can you say how the it's similar and how it's different to superficially similar sounding work?

(1) https://github.com/linebender/vello , dual Apache/MIT, by Raph Levien et al

(2) https://sluglibrary.com/ , proprietary, by Eric Lengyel (Terathon)

Slug is primarily designed for text rendering.

Vello is general purpose, like Rasterizer, but is based on GPU compute. Rasterizer uses the 'traditional' GPU pipeline. Performance numbers for both look very competitive, although Vello seems to have issues with GPU lock up at certain zoom scales. Rasterizer has been heavily tested with huge scenes at any scale.

I am still endlessly fascinated by how modern GPUs can handle stuff like UE5, raytraced lumin (whatever) but still struggle to do 2D rendering. I mean I get it logically, but it just feels so disconnected.

Always neat to see this kind of stuff however. Very cool.

This looks juicy! :)

@mindbrix does it blend colors in linear space/are colors linearized internally?

Nice work,

without having looked at your particular shader code, I can only imagine the horrors and countless of hours that went into writing and debugging the shader code...

Which OpenGL and GLSL versions are you targeting?

I've been thinking about possibly prototyping integrating an SVG renderer into my game engine that would rasterize the textures from .svg files on content load. Would offer some benefits of improved packing and better scaling and resolution independence. Using an GPU based solution would offer the benefit of being able to skip the whole "rasterize on CPU then upload" dance but just rasterize directly into a texture render target in some FBO and then use the texture later on. That being said CPU based solution is definitely easier and more bullet proof ;-)

Interesting, how does this comparento the Rive renderer?
Rive renderer can quickly have problems rendering a animated page or even a paragraph of text.
Nice :)

If this was to cone to Linux what would you recommend, OpenGL, Vulkan or something else ?

Maybe its me and I am more than okay but I went into a whole license rabbit hole trying to figure out the license that it uses

It uses this "personal use zlib license" And So earlier it was actually licensed under the zlib license which I think of as in something similar to the MIT license (I think, I am not a lawyer)

My issue with this is that the personal use zlib license to me feels like its made up by the author, and that you need to contact the author for a commerical license?

At this point, he should've just used something like a dual license with AGPL + commerical license.

Honestly, I get it, I also wish that there was some osi compliant that made open source make sense as a developer as open source is a really weak chain in this economy and I get it, but such licenses basically make your project only source available.

I have nothing wrong with that and honestly just wanted this to be discussed here. I had a blast looking at all the licenses in wikipedia or opensource.com website. Artistic license seems really cool if you want relicense or something. I am looking more into it. I genuinely wish if something like sspl could've been considered open source as it doesn't impact 90% of users and only something like aws/big tech.

I recall many years ago nvidia released an openGL extension for rasterizing vectors/svg type stuff. A bit of googling found this from 2011:

https://developer.download.nvidia.com/assets/gamedev/files/N...

and this:

https://developer.nvidia.com/nv-path-rendering-videos

The faq points 30 & 31 say it use multisampling (up to 32 samples per pixel) for AA, and the winding at each sample is calculated analytically from the curve.

From other searching, it seems no other vendor supports that extension.

I find that caching of renders brings orders of magnitude higher performance when using the native iOS / macOS canvas, however I get the feeling that there is really a limit to the direct drawing performance possible with a canvas API. I haven’t tried this yet so I’d be happy to be surprised.
Wow, that is an amazing piece of work, more so because it is so small. You should probably be more explicit about commercial licensing so companies that want to use it know where and how to contact you.
Sorry to be blunt, that C/C++ code is crustyyy. Just to start with run this through an decently complete clang-tidy profile and fix all errors and warnings. That should become part of your build. The longer you hold out on that the harder it will be. Your code has no provisions to handle fuzzed/corrupted content. Maybe a better idea would be to switch this entire code base over to Rust.

Consider modern C++ practices as outlined here: https://github.com/cpp-best-practices/cppbestpractices/blob/...