This project enables cross-platform development using Angular for the UI, C++ with Vulkan for high-performance rendering, and platform-specific integrations using Electron for desktop (Windows) and NativeScript for Android.
-
Angular UI Layer:
- Provides the UI across both platforms using Angular. Interacts with the C++ renderer through platform-specific communication layers (IPC in Electron, JNI in NativeScript).
-
C++ Renderer Layer (Vulkan):
- Core renderer handling Vulkan-based 3D rendering, scene management, and model updates. Shared code across both desktop and mobile platforms.
-
Platform-Specific Integration Layer:
- Electron (Desktop): Uses Node.js Addons and IPC to communicate with the C++ renderer.
- NativeScript (Mobile): Uses JNI for communication between Angular and C++ renderer on Android.
-
Communication Layer:
- Manages real-time data exchange between Angular and C++ (e.g., control parameters, renderer updates).
project-root/
├── angular-app/ # Angular application
│ ├── src/
│ ├── dist/ # Production build output
├── cpp-renderer/ # C++ Renderer and Vulkan code
│ ├── Renderer.h
│ ├── Renderer.cpp
│ ├── main_binding.cpp # Electron Node.js binding
│ ├── RendererJNI.cpp # JNI binding for NativeScript on Android
│ └── CMakeLists.txt # C++ build file
├── electron-app/ # Electron-specific files for desktop
│ ├── main.js # Electron main process
│ ├── preload.js # Preload script
│ ├── package.json # Electron configuration
│ └── build/Release/addon.node # Compiled Node.js addon
├── nativescript-app/ # NativeScript-specific files for Android
│ ├── app/
│ │ ├── src/main/java/com/yourapp/Renderer.java # Java file for JNI interface
│ │ └── renderer-service.ts # NativeScript service for JNI
├── README.md # Project documentation
└── Angular-C++-Vulkan-Tutorial.md # Tutorial
-
Navigate to
angular-app/and install dependencies:cd angular-app npm install -
Serve the Angular app (for development):
ng serve
-
Navigate to
cpp-renderer/. -
Compile C++ files for your platform using CMake:
mkdir build && cd build cmake .. make
-
Go to
electron-app/and install dependencies:cd electron-app npm install -
Start Electron with Angular:
npm start
-
Go to
nativescript-app/and install dependencies:cd nativescript-app tns install -
Compile and run on Android:
tns run android
- Electron: Handles desktop-specific functionality via Node.js Addons and IPC. Launches Angular and manages communication with the C++ layer.
- NativeScript: Provides a JavaScript bridge to interact with native Android features and C++ rendering logic using JNI.
This setup ensures that UI, rendering, and platform-specific code remain modular, making it easy to develop and maintain across desktop and mobile platforms.