Skity is an open-source 2D graphics library written in c++ using OpenGL and Vulkan (Experimental) as backend. Its API follows the same pattern as Skia and implements the rendering by myself.

Just like nanovg	SVG render	Basic Example	Android Porting

Blur filter example	NanoGUI Porting

• CMake
• Freetype: If not present, font rendering will not working
• GLFW: for build test and example
• optional
  • libpng: for png file decode
  • libjpeg-turbo: for jpg file decode
  • on windows ,need to set environment value: JPEG_PREFIX=path to libjpeg installed directory

# fetch sources from github
git clone --recursive https://github.com/RuiwenTang/Skity.git
cd Skity
# Create build directory
mkdir build
cd build
cmake ..

# If build source in M1 Mac please append -DPNG_ARM_NEON=on in cmake argument list to prevent libpng compile error
# cmake ../ -DPNG_ARM_NEON=ON

make
make install

The port config is located in vcpkg-skity.

Add the following registry info to vcpkg-configuration.json as a git registry:

{
  "default-registry": {
      "kind": "git",
      "repository": "https://github.com/microsoft/vcpkg.git",
      "baseline": "82e03905f54fc49d11346e5148e3860747604d86"
  },
  "registries": [
    {
      "kind": "git",
      "repository": "https://github.com/RuiwenTang/vcpkg-skity.git",
      "baseline": "8223a29413aaa1869e6d106d341eaf90ddf7ca47",
      "packages": [ "skity" ]
    }
  ]
}

And then add skity to vcpkg.json as a dependency:

{
  "name": "my-application",
  "version-string": "0.1.0",
  "dependencies": [
    "skity"
  ]
}

Clone vcpkg-skity repo and pass a port-overlay to vcpkg:

vcpkg install skity --overlay-ports=/path/to/vcpkg-skity/ports/skity

In CMakeLists.txt, find and link skity:

find_package(skity CONFIG REQUIRED)
target_link_library(main skity::skity)

The code below shows how to create a skity::Canvas instance using GLFW with OpenGL backend. The full code can look at gl_app.cc

GLFWwindow* window = glfwCreateWindow(800, 600, "Demo", nullptr, nullptr);

int32_t pp_width, pp_height;
glfwGetFramebufferSize(window_, &pp_width, &pp_height);

float density = (float)(pp_width * pp_width + pp_height * pp_height) /
                  (float)(800 * 800 + 600 * 600);

skity::GPUContext ctx{skity::GPUBackendType::kOpenGL, (void*) glfwGetProcAddress};

auto canvas = skity::Canvas::MakeHardwareAccelationCanvas(800, 600, density, &ctx);

// paint controls the color and style when geometry is rendered
skity::Paint paint;
paint.setStyle(skity::Paint::kFill_Style);
paint.setColor(skity::ColorSetRGB(0x42, 0x85, 0xF4));

// create path
skity::Path path;
path.moveTo(199, 34);
path.lineTo(253, 143);
path.lineTo(374, 160);
path.lineTo(287, 244);
path.lineTo(307, 365);
path.lineTo(199, 309);
path.lineTo(97, 365);
path.lineTo(112, 245);
path.lineTo(26, 161);
path.lineTo(146, 143);
path.close();

canvas->drawPath(path, paint);

The code generates the following result:

By using MaskFilter, can make some Post-processing effect, currently only support Blur effect.

paint.setMaskFilter(
      skity::MaskFilter::MakeBlur(skity::BlurStyle::kNormal, 10.f));

canvas->drawPath(path /* previouse created star path */, paint);

• glad Uesd in example for OpenGL context creation
• glm Used in this library for all geometric mathematical claculations
• gtest Used in test for some unit test only used when build for debug
• pugixml Used in this library for xml parse when drawing svg image.
• spdlog Used in this library for logging. (Optional can trun off by setting ENABLE_LOG=OFF)
• VulkanMemoryAllocator Used when enable VULKAN_BACKEND for internal memory management

• Fill (stencil, even-odd supported)

• Stroke (done)

• Clip (stencil)

• Font (basic drawing api)

  • draw simple text, no glyph cache, no text layout

• Line caps and joins (done)

• PathEffect dash

  • implement a simple discrete path effect
  • implement a path measure algorithm and dash path effect

• Image (in progress)

  • Cocec interface
  • png image decode (need install libpng)
  • jpg image decode (need install libjpeg-turbo)

• SVG (done)

  • basic svg tag parser
    • <svg> <g> <path> <circle> <rect>

• Maskfilter (done with Blur effect filter)

  • Gaussian Blur with inner and outer effect
    • OpenGL backend
      • Using FBO and off screen rendering to do blur calculation
    • Vulkan backend
      • Use compute shader to do blur calculation

• GPU-accelerated Path Rendering
• Resolution Independent Curve Rendering using Programmable Graphics Hardware

• Vulkan backend support (Experimental done)

• Support mask filters like SkMaskFilter

• Use Geometry Shader if possible to optimize GPU raster

• CPU backend support (planning)

• Support lottie anmiation.