{"id":25003836,"url":"https://github.com/ruiwentang/skity","last_synced_at":"2025-04-13T09:36:53.476Z","repository":{"id":38840057,"uuid":"355773597","full_name":"RuiwenTang/Skity","owner":"RuiwenTang","description":"A light weight 2D Vector Graphic renderer library writing in c++ for OpenGL3.3+ / OpenGLES3.0+ / Vulkan 1.1+/ WebGL2 with WASM","archived":false,"fork":false,"pushed_at":"2023-10-19T02:05:33.000Z","size":20232,"stargazers_count":224,"open_issues_count":3,"forks_count":28,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-03-17T12:08:37.817Z","etag":null,"topics":["2d-canvas","2d-graphics","canvas2d","drawing-library","gpu","graphics","graphics-library","opengl","rendering","rendering-2d-graphics","skia","vector-graphics","vulkan","webgl2"],"latest_commit_sha":null,"homepage":"https://ruiwentang.github.io/Skity/","language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RuiwenTang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2021-04-08T05:24:39.000Z","updated_at":"2025-03-12T09:49:23.000Z","dependencies_parsed_at":"2023-02-01T05:00:46.922Z","dependency_job_id":null,"html_url":"https://github.com/RuiwenTang/Skity","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RuiwenTang%2FSkity","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RuiwenTang%2FSkity/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RuiwenTang%2FSkity/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RuiwenTang%2FSkity/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RuiwenTang","download_url":"https://codeload.github.com/RuiwenTang/Skity/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245761295,"owners_count":20667895,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["2d-canvas","2d-graphics","canvas2d","drawing-library","gpu","graphics","graphics-library","opengl","rendering","rendering-2d-graphics","skia","vector-graphics","vulkan","webgl2"],"created_at":"2025-02-04T22:40:12.967Z","updated_at":"2025-03-27T01:09:43.583Z","avatar_url":"https://github.com/RuiwenTang.png","language":"C++","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Skity\n\n`Skity` is an open-source 2D graphics library written in `c++` using [OpenGL](https://www.opengl.org) and [Vulkan (Experimental)](https://www.vulkan.org/) as backend.\nIts **API** follows the same pattern as [Skia](https://skia.org/) and implements the rendering by myself. \u003cbr/\u003e\n\n![MacOS|build](https://github.com/RuiwenTang/Skity/actions/workflows/macos.yml/badge.svg)\n![Windows|build](https://github.com/RuiwenTang/Skity/actions/workflows/windows.yml/badge.svg)\n![Android|build](https://github.com/RuiwenTang/Skity/actions/workflows/android.yml/badge.svg)\n[![CodeFactor](https://www.codefactor.io/repository/github/ruiwentang/skity/badge)](https://www.codefactor.io/repository/github/ruiwentang/skity)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n## Screen Shots\n\n| [Just like nanovg](./example/frame_example.cc)       | [SVG render](./example/svg_example.cc)          | [Basic Example](./example/example.cc)             | [Android Porting](https://github.com/RuiwenTang/Skity-Android)                                                                   |\n| ---------------------------------------------------- | ----------------------------------------------- | ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |\n| \u003cimg src=\"./resources/nanovg_demo.png\" width=\"200\" \u003e | \u003cimg src=\"./resources/tiger.png\" width=\"150\" /\u003e | \u003cimg src=\"./resources/skia_demo.png\" width=\"180\"\u003e | \u003cimg src=\"https://github.com/RuiwenTang/Skity-Android/blob/main/screen_shots/gl_frame_example_android.png?raw=true\" width=\"200\"\u003e |\n\n| [Blur filter example](./example/filter_example.cc)       | [NanoGUI Porting](https://github.com/RuiwenTang/nanogui) |\n| -------------------------------------------------------- | -------------------------------------------------------- |\n| \u003cimg src=\"./resources/filter_example.png\" width=\"180\" /\u003e | \u003cimg src=\"./resources/nanogui_demo.gif\" width=\"200\" /\u003e   |\n\n## Quick Start\n\n### Build and Install\n\n#### Option A: Build from source\n\n##### Requirements\n\n- CMake\n- [Freetype](https://www.freetype.org/): If not present, font rendering will not working\n- [GLFW](https://www.glfw.org/): for build test and example\n- optional\n  - [libpng](http://www.libpng.org/pub/png/libpng.html): for png file decode\n  - [libjpeg-turbo](https://www.libjpeg-turbo.org/): for jpg file decode\n  - on windows ,need to set environment value: `JPEG_PREFIX=path to libjpeg installed directory`\n\n```shell\n# fetch sources from github\ngit clone --recursive https://github.com/RuiwenTang/Skity.git\ncd Skity\n# Create build directory\nmkdir build\ncd build\ncmake ..\n\n# If build source in M1 Mac please append -DPNG_ARM_NEON=on in cmake argument list to prevent libpng compile error\n# cmake ../ -DPNG_ARM_NEON=ON\n\nmake\nmake install\n```\n\n#### Option B: Using [`vcpkg`](https://github.com/microsoft/vcpkg)\n\nThe port config is located in [vcpkg-skity](https://github.com/RuiwenTang/vcpkg-skity).\n\n##### Using [manifest mode](https://github.com/microsoft/vcpkg/blob/master/docs/users/manifests.md)\n\nAdd the following registry info to vcpkg-configuration.json as a git [registry](https://github.com/microsoft/vcpkg/blob/master/docs/users/registries.md):\n\n```\n{\n  \"default-registry\": {\n      \"kind\": \"git\",\n      \"repository\": \"https://github.com/microsoft/vcpkg.git\",\n      \"baseline\": \"82e03905f54fc49d11346e5148e3860747604d86\"\n  },\n  \"registries\": [\n    {\n      \"kind\": \"git\",\n      \"repository\": \"https://github.com/RuiwenTang/vcpkg-skity.git\",\n      \"baseline\": \"8223a29413aaa1869e6d106d341eaf90ddf7ca47\",\n      \"packages\": [ \"skity\" ]\n    }\n  ]\n}\n```\n\nAnd then add `skity` to vcpkg.json as a dependency:\n\n```\n{\n  \"name\": \"my-application\",\n  \"version-string\": \"0.1.0\",\n  \"dependencies\": [\n    \"skity\"\n  ]\n}\n```\n\n##### Using overlay-ports\n\nClone [vcpkg-skity repo](https://github.com/RuiwenTang/vcpkg-skity) and pass a [port-overlay](https://github.com/microsoft/vcpkg/blob/master/docs/specifications/ports-overlay.md) to vcpkg:\n\n```\nvcpkg install skity --overlay-ports=/path/to/vcpkg-skity/ports/skity\n```\n\n#### Linking in CMake\n\nIn CMakeLists.txt, find and link skity:\n\n```\nfind_package(skity CONFIG REQUIRED)\ntarget_link_library(main skity::skity)\n```\n\n### Initialization\n\nThe code below shows how to create a `skity::Canvas` instance using [GLFW](https://www.glfw.org/) with OpenGL backend. The full code can look at [gl_app.cc](./example/gl/gl_app.cc)\n\n```c++\nGLFWwindow* window = glfwCreateWindow(800, 600, \"Demo\", nullptr, nullptr);\n\nint32_t pp_width, pp_height;\nglfwGetFramebufferSize(window_, \u0026pp_width, \u0026pp_height);\n\nfloat density = (float)(pp_width * pp_width + pp_height * pp_height) /\n                  (float)(800 * 800 + 600 * 600);\n\nskity::GPUContext ctx{skity::GPUBackendType::kOpenGL, (void*) glfwGetProcAddress};\n\nauto canvas = skity::Canvas::MakeHardwareAccelationCanvas(800, 600, density, \u0026ctx);\n```\n\n### Drawing Path\n\n```c++\n// paint controls the color and style when geometry is rendered\nskity::Paint paint;\npaint.setStyle(skity::Paint::kFill_Style);\npaint.setColor(skity::ColorSetRGB(0x42, 0x85, 0xF4));\n\n// create path\nskity::Path path;\npath.moveTo(199, 34);\npath.lineTo(253, 143);\npath.lineTo(374, 160);\npath.lineTo(287, 244);\npath.lineTo(307, 365);\npath.lineTo(199, 309);\npath.lineTo(97, 365);\npath.lineTo(112, 245);\npath.lineTo(26, 161);\npath.lineTo(146, 143);\npath.close();\n\ncanvas-\u003edrawPath(path, paint);\n```\n\nThe code generates the following result:\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/RuiwenTang/Skity/blob/gh-pages/images/fill_star.png?raw=true\" width=\"300\" /\u003e\n\u003c/p\u003e\n\n### Blur Effect\n\nBy using [`MaskFilter`](./include/skity/effect/mask_filter.hpp), can make some **Post-processing** effect, currently only support [Blur](https://en.wikipedia.org/wiki/Blur) effect.\n\n```c++\npaint.setMaskFilter(\n      skity::MaskFilter::MakeBlur(skity::BlurStyle::kNormal, 10.f));\n\ncanvas-\u003edrawPath(path /* previouse created star path */, paint);\n\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./resources/blur_star.png\"  width=\"300\"/\u003e\n\u003c/p\u003e\n\n## Build\n\n### Third party dependencies\n\n- [glad](https://glad.dav1d.de/)\n  Uesd in example for OpenGL context creation\n- [glm](https://github.com/g-truc/glm.git)\n  Used in this library for all geometric mathematical claculations\n- [gtest](https://github.com/google/googletest.git)\n  Used in test for some unit test only used when build for debug\n- [pugixml](https://github.com/zeux/pugixml.git)\n  Used in this library for xml parse when drawing svg image.\n- [spdlog](https://github.com/gabime/spdlog.git)\n  Used in this library for logging. (Optional can trun off by setting `ENABLE_LOG=OFF`)\n- [VulkanMemoryAllocator](https://github.com/GPUOpen-LibrariesAndSDKs/VulkanMemoryAllocator.git)\n  Used when enable `VULKAN_BACKEND` for internal memory management\n\n### CMake options\n\n| CMake Option         | Default Value | Description                                                                                                                                                                            |\n| -------------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **ENABLE_LOG**       | ON            | Enable logging. If turn off the [spdlog](https://github.com/gabime/spdlog.git) is no longer needed.                                                                                    |\n| **VULKAN_BACKEND**   | OFF           | Enable [Vulkan](https://www.vulkan.org/) backend. If turn on, the [VulkanMemoryAllocator](https://github.com/GPUOpen-LibrariesAndSDKs/VulkanMemoryAllocator.git) dependence is needed. |\n| **OPENGL_BACKEND**   | ON            | Enable [OpenGL](https://www.opengl.org) backend                                                                                                                                        |\n| **BUILD_SVG_MODULE** | ON            | Build SVG module. If turn off the [pugixml](https://github.com/zeux/pugixml.git) is no longer needed.                                                                                  |\n| **BUILD_EXAMPLE**    | ON            | Build [example code](./example/). Need [GLFW](https://www.glfw.org/) .                                                                                                                 |\n| **BUILD_TEST**       | ON            | Build [test code](./test)                                                                                                                                                              |\n\n## Current status:\n\n- Fill (stencil, even-odd supported)\n\n- Stroke (done)\n\n- Clip (stencil)\n\n- Font (basic drawing api)\n\n  - draw simple text, no glyph cache, no text layout\n\n- Line caps and joins (done)\n\n- PathEffect dash\n\n  - implement a simple discrete path effect\n  - implement a path measure algorithm and dash path effect\n\n- Image (in progress)\n\n  - Cocec interface\n  - png image decode (need install [libpng](http://www.libpng.org/pub/png/libpng.html))\n  - jpg image decode (need install [libjpeg-turbo](https://www.libjpeg-turbo.org/))\n\n- SVG (done)\n\n  - basic svg tag parser\n    - `\u003csvg\u003e` `\u003cg\u003e` `\u003cpath\u003e` `\u003ccircle\u003e` `\u003crect\u003e`\n\n- Maskfilter (done with Blur effect filter)\n  - Gaussian Blur with inner and outer effect\n    - OpenGL backend\n      - Using FBO and off screen rendering to do blur calculation\n    - Vulkan backend\n      - Use compute shader to do blur calculation\n\n## Reference\n\n- [GPU-accelerated Path Rendering](./resources/gpupathrender.pdf)\n- [Resolution Independent Curve Rendering using Programmable Graphics Hardware](./resources/p1000-loop.pdf)\n\n## TODO\n\n- [x] Vulkan backend support (Experimental done)\n\n- [x] Support mask filters like [SkMaskFilter](https://api.skia.org/classSkMaskFilter.html)\n\n- [x] Use [Geometry Shader]() if possible to optimize GPU raster\n\n- [ ] CPU backend support (planning)\n\n- [ ] Support [lottie](https://airbnb.design/lottie/) anmiation.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruiwentang%2Fskity","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fruiwentang%2Fskity","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruiwentang%2Fskity/lists"}