Git Product home page Git Product logo

vg-renderer's Introduction

vg-renderer

A vector graphics renderer for bgfx, based on ideas from NanoVG and ImDrawList (Dear ImGUI)

Includes some small changes to FontStash. Optionally uses libtess2 for concave polygon decomposition.

Path and Stroker classes

Paths are tesselated using the Path struct (src/vg/path.cpp, .h). You can use vg::pathXXX() functions to convert your SVG commands to a polyline for uses outside this renderer.

Strokes and fills are generated using the Stroker struct (src/vg/stroker.cpp, .h). You can use vg::strokerXXX() functions to generate strokes and fills for your polylines for uses outside this renderer.

Compared to NanoVG/FontStash

  1. Generates fewer draw calls by batching multiple paths together (if they share the same state)
  2. Separate shader programs for gradients and image patterns to reduce uniform usage (NanoVG's bgfx backend uses a single program for all cases)
  3. Concave polygons are decomposed on the CPU.
  4. Command lists with support for tesselation caching.
  5. Clip in/out with the stencil buffer
  6. User-specified indexed triangle list rendering (i.e. for complex gradients and sprite atlases).
  7. Fills with image patterns can be colored.
  8. FontStash: glyph hashing uses BKDR (seems to give better distribution of glyphs in the LUT; fewer collisions when searching for cached glyphs)
  9. FontStash: optional (compile-time flag) caching of glyph indices and kerning info for ASCII chars in order to avoid repeated calls to stbtt functions.

What's not supported compared to NanoVG

  1. Miter limit (i.e miter joins never convert to bevel joins)
  2. Polygon holes (they can be emulated using clip in/out regions)
  3. Variable text line height
  4. Skew transformation matrix

Images

DLS

DLS

SVG (using simple-svg)

Tiger

Demo

Demo

Custom gradients (indexed triangle lists w/ per-vertex colors)

Gradients

vg-renderer's People

Contributors

jdryg avatar

Watchers

 avatar  avatar

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.