GVG: The next generation of vector graphics

An implementation of the GVG image file format specification, for use with the Löve2D framework.

GVG Specification: https://github.com/Labrium/GVG/

NOTE: This implementation is in the alpha development stage right now, so expect breaking changes. Documentation will be available soon.

Dependencies

• 30log
• uuid
• dkjson

Usage

local GVG = require("GVG")

local world
local player

function love.load()
	-- initialize GVG
	GVG.init("baseF.glsl", "baseV.glsl")
	GVG.loadShapesFromDirectory("Shapes")
	GVG.loadHullsFromDirectory("Hulls")

	world = GVG.Group()

	player = GVG.Shape("circle") -- "circle" shape type is made available from "/Shapes/circle.glsl"
	player.uniforms.radius = {10}

	world:add(player)
end

function love.update(dt)
	-- do whatever
	player.x = player.x + 1
	player.y = player.y + 1
end

function love.draw()
	world:draw()
end

Supported Shapes

• Arc
• Circle
• Dot grid
• Equilateral triangle
• Grid
• Hexagon
• Line
• N-gon
• N-Star
• Pentagon
• Rectangle
• Strip
• Trapezoid
• Triangle
• Quadratic bezier
• Quadratic bezier segment
• Box
• Cross
• Cut disc
• Edge
• Egg
• Ellipse
• Heart
• Hexagram
• Horseshoe
• Hyperbola
• Isosceles triangle
• Moon
• Octagon
• Oriented box
• Parabola
• Parabolic segment
• Parallelogram
• Pie
• Polygon
• Quadratic circle
• Rhombus
• Rounded box
• Rounded cross
• Rounded X
• Star
• Star 5
• Uneven capsule
• Vesica

Features

• Mathematically perfect rasterization on the GPU
• Modular shape type system
• Modular bounding box function system
• Comments
  • Single line
  • Multi-line
• Unit specification
  • Pixels
  • Percent (maybe???)
  • Metric
  • Imperial/Customary
• Automatic filled/outline modes
• Analytical antialiasing
  • None
  • Normal
  • Configurable Subpixel (not just standard rgb lcd layout)
• Groups
• Shape combining functions
  • Union
  • Subtract
  • Intersect
  • Exclude
• Level of Detail (based on the computed area of the bounding polygon)
• Font rendering
  • Font file support
    • FaceType.js JSON format
    • TrueType (.ttf) through Lua port of FaceType.js (maybe???)
    • All formats supported by FreeType 2 (included in Löve2D) through FFI (maybe???)
    • Custom shape-based font format (maybe???)
  • Rendering modes
    • Bitmap
    • Bitmap SDF
    • Compound Analytical SDF
• Shape batching/instancing (of the same shape type)
• Element referencing for reusing shapes/groups or scripting
  • In-file referencing
  • Cross-file referencing
• SVG backward compatibility
• Embedded or referenced raster image support
• Gradients
  • Linear
  • Radial
  • Conic
  • Shape
• Effects
  • Drop/inset shadows/glow
  • Blur
  • Textured shapes (using raster images)
• Animation support
  • Shape morphing
  • Transitions

TODO

• Allow multiple parents per element
• Allow DPI scaled units
• Migrate bounding functions to vertex shader bounding meshes
  • Migrate SDF function coordinates from absolute screen-space to SDF centered, pixel-per-pixel (instead of 0 to 1) texture coordinates to facilitate batching
• Add support for group closure syntax
• Fix id reference name table
  • Figure out how to handle conflicting ids (such as from different files or the same file imported multiple times)
    • solution: add " 2", " 3", etc., or allow an id prefix parameter.
• Separate base shader into base and SDF evaluation line to allow multiple different SDFs to be evaluated in the same shader to allow combining operations
• Figure out what (if included) the image resolution parameter in the header will do
• Figure out what to do about unit conversion
• Figure out syntax for combining shapes
  • Figure out syntax for combining groups of shapes
    • solution: don't.
• Figure out the best way to manage external files

Unrealistic Goals

• Non-uniform scaling
• CPU rasterization backend
• File conversion
  • From
    • PDF
    • SVG
  • To
    • PDF
    • SVG
• Function graphing
  • 1D
  • 2D
• Scrollable sections
• Responsive layout (for text and shapes)
• Dynamic text
• Procedural shapes and/or raster images
• Custom shaders
• Embedded hyperlinks
• Embedded HTML and/or Markdown
• Embedded interactivity (scripting) and/or embedded UI elements
  • Dark mode support
  • HTTP support (!?!?)
• Lighting and materials (!?!?)
• Postprocessing (!?!?)
• Physics (!?!?)
• 3D (!?!?)
  • As a 2D texture
  • Containing 3D models

 

Projects Using GVG-Lua

• Hoog.io

 

License

GVG-Lua © 2023 by Labrium is licensed under Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International.

Shape type SDF functions (in Shapes directory) are licensed under:

The MIT License

Copyright © 2020-2023 Inigo Quilez

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.