What
This is a template C++ project using the GLFW library to create a Graphical User Interface control for both Windows and Linux. It uses CMake as the build system.
The GLFW library is based on OpenGL, OpenGL ES, and Vulkan. It provides an API for creating windows, handling input, and managing events.
For more information, see the official GLFW website.
The Library Skia Skia is a 2D graphics library used for rendering. It provides APIs for drawing text, shapes, images, and more. It is the core graphics engine behind Chrome, Flutter, and Firefox (Canvas). website
1. GLFW vs Skia, Roles and Usage
- GLFW is used for creating windows, managing OpenGL or Vulkan contexts, and handling input events (keyboard, mouse, etc.).
- Skia is used for high-level 2D drawing, including text, images, shapes, and anti-aliased graphics.
- They serve complementary roles with minimal overlap: GLFW provides the platform and context; Skia does the drawing.
- In this project, GLFW handles windowing and input, while Skia handles all drawing operations.
Be-aware⚠️
Both GLFW and Skia support OpenGL or Vulkan, but they must be configured to use the same graphics API.For OpenGL, Skia uses classes like
GrGLInterface
,GrBackendRenderTarget
, andGrDirectContext
.
For Vulkan, Skia usesGrVkBackendContext
and Vulkan-specific setup.Skia’s API is mostly consistent across backends, so much of your drawing code stays the same, only the backend setup differs.
Decision
The sample is this project assume you use OpenGL because it’s simpler, mature, cross-platform, and well-supported by Skia and GLFW.
Converting
Converting from OpenGL to Vulkan in this project is doable with some effort; it mainly involves changing the graphics backend initialization and context management (GLFW). Skia’s drawing code remains unchanged.
MacOS
Supporting macOS is more challenging because Apple chose to not support Vulkan and instead reinvent the wheel with their own Metal API, making things harder for drawing cross-platform developers.
2. The Template Project Architecture
This template provides a project structure for building a GUI control sample application using the GLFW and Skia libraries. It supports both Windows and Linux (Debian 12) operating systems. On Windows, the project uses the NMake toolchain from Visual Studio 2022 Community Edition. On Debian, it uses the GNU Make, tool provided by GNU Compiler Collection (GCC) via WSL.
The folder structure (some folders and files are not include because they are Github specific files(layout ect.) :
📁 Project
├──📂.vscode ➜ VSC Tasks & Launchers
├──📂_README ➜ Documentation
│ └──🧾 README.md ➜ The readme instruction file (this file)
├──📂cmake ➜ Specialized, customizable, CMake files for Windows and Linux
│ ├──📦CMakeLists_Init-env.bat➜ Path to env variables for MS VC compiler(vcvars64.bat)
│ ├──📦CMakeLists_start.sh.in ➜ Creates startup app logic in Linux builds
│ ├──📦linux.cmake ➜ The file to customize for Linux builds
│ ├──📦linux_utilities.cmake ➜ Linux utilities to display hard/software info.
│ └──📦windows.cmake ➜ The file to customize for Windows builds
├──📂dependencies/win ➜ Dependent libraries needed for the source like GLFW & Skia
│ ├──📂win ➜ Windows location for specialized libs
│ │ └──📂Your Lib ➜ Add libraries you need here
│ └──📂linux ➜ Linux location for specialized libs
│ └──📂Your Lib ➜ Add libraries you need here
├──📂src ➜ GLFW and Skia sample source
├──⚡build.ps1 ➜ Windows script to invoke the build
├──⚡build.sh ➜ Linux script to invoke the build
├──📦CMakeLists.txt ➜ Main CMake file
├──📦CMakePresets.json ➜ Used to load the project in Visual Studio 2022
The GLFW library is used to create a canvas and to provide events and input.
The Skia library is used for building core GUI components. Skia requires:
📚 Python 3
📚 Git
📚 Depot Tools
3. Future instructions
Build Environment Setup instructions can be found here:
Note:
Both( Linux and Windows) use the same project source folder to build (Linux is build from the WSL Windos mount)
Project build instruction instructions for building the app with the VSC or Visual Studio or via the consol can be found here