Skip to content

Repository files navigation

LabTemplate 🚀

Ultra-Lightweight C++20 Stack Template: Google Filament 3D + LabSound WebAudio + Lua 5.4 + NanoVG GUI

C++20 WebAssembly Google Filament LabSound Lua 5.4 License: MIT

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).


🎨 Dual 2D / 3D GUI Architecture

LabTemplate features a flexible GUI framework designed to make porting Flutter-like applications simple while keeping binary footprints ultra-lightweight.

1. Unified Headless State Engine

  • 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.

2. Render-to-Texture (RTT) for 2D Screens in 3D Scenes

  • 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.

3. Physical 3D Spatial Controls

  • Tactile 3D Mesh Widgets: Physical 3D buttons, knobs, faders, and piano keys feature PBR specular materials, Z-depth depression physics, and spatial raycasting.

⚡ Tech Stack Highlights

  • 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.

📁 Repository Structure

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

🛠️ Quickstart Guide

1. WebAssembly Build (Windows PowerShell)

Ensure you have Emscripten SDK (emsdk) and CMake installed, then run:

.\build.ps1

This script automatically:

  1. Configures the emcc toolchain.
  2. Compiles build_wasm/labtemplate.wasm, labtemplate.js, and labtemplate.html.
  3. Measures raw and gzipped bundle sizes.
  4. Starts a local HTTP server on http://localhost:8080.
  5. Opens http://localhost:8080/index.html in your default browser.

2. WebAssembly Build (Linux / macOS Bash)

chmod +x build.sh
./build.sh

3. Native Desktop Build (C++20 via vcpkg)

mkdir build_native && cd build_native
cmake .. -DCMAKE_TOOLCHAIN_FILE=[path-to-vcpkg]/scripts/buildsystems/vcpkg.cmake -DCMAKE_BUILD_TYPE=Release
cmake --build . -j

🔌 C++ <-> Lua Binding API

LabTemplate exposes clean host tables to Lua scripts for bidirectional communication:

Lua calling C++ Audio & Graphics:

-- 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)

C++ invoking Lua Callbacks:

// In C++ ScriptEngine:
scriptEngine->onPadTriggered(padIndex, velocity);
scriptEngine->onPitchChanged(semitones);
scriptEngine->onBankChanged("A");

📊 Binary & Performance Benchmark

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.


📜 License

Licensed under the MIT License. Feel free to use this template for commercial or open-source projects.

About

Eater of highly mad scientific laboratories.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages