⚙️ Getting Started with NoesisGUI C++ SDK
The aim of this tutorial is to get you started with the NoesisGUI C++ SDK and its directory structure. You will learn to build, configure and begin using the SDK to create high-performance native applications.
If you already have the SDK compiling and want to jump straight into code, check out our Tutorials & Next Steps at the bottom of this page.
Although Noesis Studio is now our primary authoring editor, we still offer the XamlPlayer (located in the root directory of the SDK). It remains a highly useful standalone tool for quickly rendering XAMLs and analyzing performance.
Note
In the root directory you can also find 'SDKBrowser', an application that will give you a quick overview of the SDK
Building Samples
All provided samples in the SDK, including the Application Framework, come with full source. There is a solution for each platform inside the 'NoesisSDK/Build/' directory for building all the examples. For example, the Visual Studio 2019 solution for 64-bits can be found at 'NoesisSDK/Build/NoesisGUI-win-x86_64-vs2019.sln'.
Each sample also contains a Noesis Studio project inside its 'Data' folder. For example, the Noesis Studio project for the Menu3D sample is located at 'NoesisSDK/Src/Packages/Samples/Menu3D/Data/Menu3D.noesis'.
Note
Some samples register custom extensions. To properly view these in Studio, you must open the Studio project by launching the compiled sample executable with the '--project' command-line switch, rather than using the standalone Noesis Studio.
When using the '--project' command line, the sample is opened inside Studio instead of running standalone.
For example, the CustomRender sample must be launched with '--project <path_to_CustomRender.noesis>'.
Three configurations are available for each project:
- Debug: with asserts, logging, instrumentation and inspector enabled.
- Profile: fully optimized, minimal logging, instrumentation and inspector enabled.
- Release: fully optimized, LTO in many platforms.
Building Windows / UWP
Visual Studio 2019+ is needed. Just open the solution (.sln) and build the desired configuration.
Building macOS / iOS
XCode 16.4+ is needed. Just open the workspace (.xcworkspace) and build the desired configuration.
Building Linux
Make sure to install GL and X11 headers:
> sudo apt-get install mesa-common-dev libx11-dev
With all prerequisites satisfied, just build the generated makefile (.mk) for the desired configuration.
> make -f NoesisGUI-linux-x86_64.mk CONFIG=Release
Building WebGL
- GNU Make 4.2.1+ is needed.
- Emscripten 4.0.10+
Make sure 'emcc', 'em++' and 'emar' are available from the command prompt and just build the makefile (.mk) for the desired configuration.
> make -f NoesisGUI-wasm.mk CONFIG=Release
Building Android
- GNU Make 4.2.1+ is needed
- JDK 22+
- Android NDK r28.1+ has been tested with the following package versions:
Path Version Description Location build-tools;36.0.0 36.0.0 Android SDK Build-Tools 36 build-tools\36.0.0 ndk;28.1.13356709 28.1.13356709 NDK (Side by side) 28.1.13356709 ndk\28.1.13356709 platform-tools 35.0.2 Android SDK Platform-Tools platform-tools platforms;android-36 2 Android SDK Platform 36 platforms\android-36
- The following environment variables must be set:
- ANDROID_NDK must point to NDK (eg: C:\Android\SDK\ndk\28.1.13356709)
- ANDROID_PLATFORM must point to SDK platforms (eg: C:\Android\SDK\platforms\android-36)
- JAVA_HOME must point to Java installation path (eg: C:\Program Files\Java\jdk-22)
- The following binaries must be available in the PATH environment variable:
- ndk prebuilt toolchains: clang, clang++, llvm-strip, llvm-objcopy
- java compiler: javac
- build-tools: d8, aapt, zipalign, apksigner
- platform-tools: adb
With all prerequisites satisfied, just build the generated makefile (.mk) for the desired configuration.
> make -f NoesisGUI-android-arm.mk CONFIG=Release
Building Noesis Studio
Inside the provided solution alongside all the SDK samples, you will find a project named StudioTool. This is a practical sample application that fully integrates Noesis Studio. It serves as a reference implementation, demonstrating exactly how you can embed and achieve the same Noesis Studio integration within your own application or custom engine.
For a comprehensive guide on embedding into your architecture, please refer to our dedicated documentation:
Running Samples
Binaries are generated in 'NoesisSDK/Bin/'. There is one sub-folder for each supported platform. For example, the Menu3D sample for Windows 64-bits will be generated at 'NoesisSDK/Bin/windows_x86_64/Samples.Menu3D.exe'.
All our samples are built using the Application Framework and support common functionality like:
- The following command line switches:
- --render [D3D11|GL|Metal|...]: overrides the default renderer.
- --vsync [0|1]: disables vertical synchronization.
- --samples N: enables multisample anti-aliasing (MSAA), by default it is off.
- --ppaa [0|1]: enables cheap antialiasing (enabled by default).
- --linear: for switching to linear rendering, by default rendering happens in gamma space.
- --lcd [0|1]: enables subpixel rendering compatible with LCD displays.
- --log_binding: to increase the verbosity of logging when using data binding.
- --emulate_touch: enables emulation of touch input from mouse events.
- --root dir_path: to read resources from the specified filesystem path (for hot-reloading).
- --project project_path: to load the specified .noesis project file.
- The following shortcut keys:
- CTRL + T: display the debug toolbar.
- CTRL + W: toggles wireframe mode when rendering triangles.
- CTRL + B: each batch submitted to the GPU is given a unique solid color.
- CTRL + O: display pixel overdraw using blending layers. Different colors are used for each type of triangle: green for normal, red for opacities and blue for clipping masks.
- CTRL + P: per-primitive antialiasing extrudes the contours of the geometry and smooths them. Useful when GPU multisampling is not enabled.
- CTRL + F: display a performance stats panel.
- F10: takes a RenderDoc capture.
Tutorials & Next Steps
Once you get familiar with our samples, you are ready to start creating your own applications.
Alongside exploring our XAML Framework Tutorials to learn how to design, bind, and style your UI, we highly recommend following this structured path to master the native C++ architecture:
- 🏛️ C++ Architecture Guide, to learn about the NoesisGUI C++ architecture.
- 🧩 Integration guide, to discover how to integrate NoesisGUI into your own application.
- 🏗️ Application Framework
- 🛠️ Integrating Noesis Studio
- ▶️ First steps with XamlPlayer
VSCode Extension
We also provide a Visual Studio Code Extension, which provides a rich editing experience for the XAML documents, using the NoesisGUI language server. For more information on the language server, see our Language Server tutorial