GithubHelp home page GithubHelp logo

joaobaptmg / pathrenderinglab Goto Github PK

View Code? Open in Web Editor NEW
97.0 9.0 4.0 5 MB

Repository for research on complete SVG rendering

License: Other

C# 99.13% HLSL 0.87%
svg vector-graphics monogame csharp dotnet

pathrenderinglab's Introduction

PathRenderingLab

Welcome to my laboratory on vector graphics!

What is this repository?

This repository aims to do research on vector graphics rendering and to (possibly) build a content pipeline extension library for MonoGame, in order to viabilize the use and construction of vector SVG files in video games. Vector graphics has the advantage of being infinitely scalable, meaning it will seem crisp and sharp on any resolution, from the smallest ones to the largest ones.

The idea is to preprocess the path data, transforming it into graphics primitives, and sending them to the GPU alongside the required fragment shader in order to let it do the heavy lifting to correctly render the curves and straight lines. For that, three primitive types are used, which I call triangles, curve triangles and double curve triangles.

  • The triangles are simple primitives which only store the position of the vertices, used to render the completely filled portions of the curve. Because of that, since they store only positional data, they can be cached and indexed, reducing their footprint on memory.
  • The curve triangles are also equipped with carefully-crafted curve coordinates that correspond to special lines on the projective space (more info on Loop--Blinn). Those primitives, when equipped with the appropriate fragment shader, will render the Bézier curves as implicit curves on the projective space.
  • The double curve triangles are similar to the curve triangles, but they carry curve coordinates for two curves instead of one. They are required on some edge cases that would be extremely difficult or impossible to properly subdivide and triangulate (like common endpoint curves with the same tangent).

The core of this project is to convert the path representation according to the SVG Specification on Paths into the adequate primitives to send to the GPU. This part is almost entirely done. The next part is parse the SVG file to gather the paths and be able to correctly render an entire SVG file -- thus making it available to be drawn on MonoGame projects. The project is still a work in progress, and I do not consider it reaching even into alpha.

How do I run the current project?

Before, you needed a specially-crafted path specification file to run an example. However, this new commit adds the possibility to specify simple SVG files. Unfortunately, the SVG support is not complete yet, but it already suport solid colors, linear and radial gradients. Support for shadow DOM and clipping and the rest might be coming soon.

Screenshots

img0 img1 img2 img3 img4 img5 img6 img7 img8 img9 img10 img11 img12 img13 img14 img15 img16 img17 img18 img19 img20 img21 img22 img23 img24 img25 img26 img27 img28 img29 img30 img31 img32 img33

How can I help?

You want to help? You are absolutely welcome! You can signal issues using the Issues panel or fork my repository and then make my pull request.

License

The entirety of this project (without the Bitlush.AvlTree folder) is under the MIT license, copyright 2018--2019 João Baptista de Paula e Silva.

With the exception of some SVG files on the example folder (namely, sonic.svg, tails.svg and knuckles.svg, which I guess configure fair use for the sake of testing this project), all the other SVG files are free to use and in public domain.

References

  1. Resolution Independent Curve Rendering using Programmable Graphics Hardware

pathrenderinglab's People

Contributors

joaobaptmg 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

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

pathrenderinglab's Issues

Would a Xenko integration be easier?

From what I've heard, the Xenko graphics API is pretty much the same as MonoGame , but it has a full-featured editor, an absolute great shader language and you could make SVG a new asset type that can be imported, managed and previewed by game developers in Game Studio.

I've made an example of a xenko root render feature that integrates properly into a scene and could be used.

What about Kokojima's method?

Hello @JoaoBaptMG.

I don't hesitate to subscribe as the Lab's fanclub :)

I love your works! 👍 🥇

What about Kokojima's method
"Resolution Indendent Rendering of Deformable Vector Objects using Graphics Hardware"

They use Stencil+ Loop-Blinn, But they said it is more simpler than only Loop-Blinn.

p118-kokojima.pdf

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.