Ultra-Lightweight C++20 Stack Template: Google Filament 3D + LabSound WebAudio + Lua 5.4 + NanoVG GUI
LabTemplate is a high-performance, modular C++20 framework template designed for building interactive 3D web applications, digital audio workstations (DAWs), synthesizers, 3D games, and cross-platform GUI applications.
It combines WebGPU/WebGL acceleration via Google Filament's Physically Based Rendering (PBR) engine, LabSound's native WebAudio node graph, dynamic Lua 5.4 scripting, and a dual-rendering 2D/3D GUI system — compiling down into a tiny ~90 KB gzipped WebAssembly bundle (vs. Flutter's 10 MB+ web builds).
LabTemplate features a flexible GUI framework designed to make porting Flutter-like applications simple while keeping binary footprints ultra-lightweight.
- Decoupled Logic & Render Views: Widget state (
value,min,max,isPressed,isHovered, spring physics, callbacks) is isolated in pure C++ state machines (UI::Widget2D,UI::Widget3D). - Shared Controllers: The exact same control logic drives both flat 2D screen overlays and physical 3D objects in a scene.
- 100% Code Reuse for LCDs & Consoles: Standard 2D vector widget trees (NanoVG / 2D Canvas) render offscreen into framebuffers and map directly onto 3D display meshes (e.g., synth screens, monitors, consoles).
- UV Raycast Input Mapping: Raycasts against 3D display meshes translate 3D hit coordinates
(u, v)into 2D pixel coordinates(x, y), routing pointer events seamlessly into the 2D widget hierarchy.
- Tactile 3D Mesh Widgets: Physical 3D buttons, knobs, faders, and piano keys feature PBR specular materials, Z-depth depression physics, and spatial raycasting.
- 3D Rendering Engine: Google Filament (C++) — Orthographic & perspective 3D cameras, PBR materials, WebGPU / WebGL2 acceleration, dynamic lighting, and spatial entity hierarchy.
- Native Audio Graph: LabSound (C++) — High-performance native C++ WebAudio graph (
AudioContext, synth oscillators, envelopes, biquad filters, convolver reverbs, sample nodes). - Dynamic Scripting: Lua 5.4 + Sol2 — Real-time event handling, scriptable patch definitions, live parameter tuning, macro controls, and hot-swappable app logic.
- 2D Vector HUD & Text: NanoVG — Ultra-lightweight canvas vector rendering pipeline for fonts, LCD displays, oscilloscopes, and HUD UI overlays (~50 KB footprint).
- Dual 2D/3D GUI Toolkit: Modular 2D vector overlays + 3D spatial mesh controls (UI2D.hpp, UI3D.hpp) with RTT display screen mapping.
- AOT Transpiler Utility: Dual-mode Ahead-Of-Time (AOT) Lua-to-C++ transpilation pattern (
src/examples/LuaTranspiler.hpp) for zero-overhead C++ machine code dispatch.
labtemplate/
├── CMakeLists.txt # Cross-platform CMake build rules (Desktop & Emscripten WASM)
├── vcpkg.json # Native C++ dependency definitions (Filament, LabSound, Lua, sol2)
├── build.ps1 # Automated WebAssembly compilation & local HTTP server launcher
├── build.sh # Linux / macOS Bash build script
├── shell_minimal.html # Emscripten HTML shell template
├── index.html # Web app container & Three.js ES module importmap
├── style.css # Modern CSS design system
├── app.js # EatSFXR 3D Generator Buttons + 2D Graphical Console app
├── wasm_loader.js # JavaScript <-> WebAssembly C++ bridge layer
├── src/
│ ├── main.cpp # App entry point (Desktop main & WASM 60 FPS loop)
│ ├── core/ # Engine Framework Core
│ │ ├── Engine.hpp/cpp # Central stack coordinator
│ │ ├── AudioEngine.hpp/cpp # LabSound WebAudio manager
│ │ ├── GfxEngine.hpp/cpp # Filament 3D & WebGL2 viewport engine
│ │ ├── ScriptEngine.hpp/cpp# Lua 5.4 + Sol2 scripting engine
│ │ ├── UI3D.hpp/cpp # 3D Spatial UI raycasting & widgets
│ │ └── UI2D.hpp/cpp # NanoVG 2D vector HUD overlay
│ ├── examples/ # Example Application Components
│ │ ├── SynthSampler.hpp/cpp# 3D Synth / Sampler demo component
│ │ └── LuaTranspiler.hpp # AOT Lua-to-C++ transpiler pattern
│ └── thirdparty/ # 3rd party includes (NanoVG)
│ ├── nanovg.h
│ └── nanovg.c
└── scripts/
├── core/
│ └── init.lua # Lua environment initialization
└── examples/
├── synth_logic.lua # Scriptable sound bank assignments & triggers
└── eatsfxr_logic.lua # Procedural retro SFXR sound generator
Ensure you have Emscripten SDK (emsdk) and CMake installed, then run:
.\build.ps1This script automatically:
- Configures the
emcctoolchain. - Compiles
build_wasm/labtemplate.wasm,labtemplate.js, andlabtemplate.html. - Measures raw and gzipped bundle sizes.
- Starts a local HTTP server on
http://localhost:8080. - Opens
http://localhost:8080/index.htmlin your default browser.
chmod +x build.sh
./build.shmkdir build_native && cd build_native
cmake .. -DCMAKE_TOOLCHAIN_FILE=[path-to-vcpkg]/scripts/buildsystems/vcpkg.cmake -DCMAKE_BUILD_TYPE=Release
cmake --build . -jLabTemplate exposes clean host tables to Lua scripts for bidirectional communication:
-- Trigger audio synth node
LabAudioHost.triggerSFXRSound("square", 0.35, 0.0, 0.5, 0.0, 0.1, 0.2, 1.0)
-- Animate 3D pad entity in Filament scene
LabGraphicsHost.animatePadEntity(padIndex, 1.0)// In C++ ScriptEngine:
scriptEngine->onPadTriggered(padIndex, velocity);
scriptEngine->onPitchChanged(semitones);
scriptEngine->onBankChanged("A");| Build Artifact | Raw Size | Gzipped Size |
|---|---|---|
labtemplate.wasm |
140.9 KB |
54.1 KB |
labtemplate.js |
84.6 KB |
23.5 KB |
app.js |
35.3 KB |
9.8 KB |
style.css |
5.1 KB |
1.4 KB |
wasm_loader.js |
2.1 KB |
0.7 KB |
| Total Web App Bundle | 270.8 KB |
90.9 KB |
Loads in under 50ms on modern browsers with instant WebAudio latency and 60 FPS WebGPU/WebGL acceleration.
Licensed under the MIT License. Feel free to use this template for commercial or open-source projects.