$ show protectwise/troika
Troika is a monorepo for a collection of JavaScript libraries focused on building interactive 3D/2D data visualizations and immersive WebXR experiences using Three.js. The core framework (troika-core) provides a declarative facade system with lifecycle hooks, scene descriptors, event handling, and transitions, enabling developers to describe complex scenes with simple property setters. Higher-level packages (troika-3d, troika-3d-ui, troika-xr) extend this with 3D objects, flexbox-based UI blocks, and XR controller/teleport support. Standalone utilities like troika-three-text and troika-three-utils offer high-quality SDF text rendering and generic shader derivation, while troika-worker-utils offloads heavy computation (e.g., font parsing, layout) to web workers. The repository also includes three-instanced-uniforms-mesh for per-instance uniforms, troika-animation for tweening, and a bespoke flex layout engine built on Yoga. Though primarily an application framework, several packages are reusable libraries for any Three.js project, and the examples showcase data-driven scenes (e.g., globe connections, city grids, animated curves). Architecture is modular (monorepo with Lerna) with peer dependencies on Three.js and optional React integration.
The LLM identified 5 files worth highlighting for reuse:
Allows extending any Three.js Material with custom shader code (vertex/fragment transforms, uniforms) while preserving all base material features like shadows, fog, and lighting. Uses string-based injection into shader chunks and manages uniform lifetimes. Reusable in any Three.js project needing custom shaders without rewriting the entire material.
Implements high-quality signed distance field (SDF) text rendering for Three.js. Features include dynamic font loading and parsing (TTF/OTF/WOFF), ligature/kerning support, bidirectional text, Unicode fallback via Noto fonts, and GPU-accelerated SDF generation with WebGL fallback. Can be extracted as a standalone Three.js text solution.
Provides `defineWorkerModule`, a function to run modular JavaScript code in web workers with automatic dependency injection and a main-thread fallback. Handles worker lifecycle, message passing, and serialization. Solves the common challenge of offloading heavy computation to workers without bundler or CSP issues.
Extends Three.js `InstancedMesh` to support per-instance uniform values, allowing each instance to have different shader parameters (e.g., color, scale) via custom attributes. Works with any material, standard or custom. Reusable for efficient rendering of many similar objects with per-instance variation.
A tweening system supporting both duration-based and spring-physics animations, with custom interpolators (numbers, colors, arrays) and built-in easing functions. Integrates with Troika's declarative facades but can be extracted as a lightweight standalone animation library.