Hi everyone!
I wanted to share a project we’ve been deeply working on called Cyberland. It is a fully dynamic, 100% interactable 3D ecosystem built entirely on top of Three.js.
Our primary engineering goal was brutal: achieve production-grade, AAA-like visual fidelity running flawlessly at locked high frame rates directly in mobile browsers (Safari/Chrome Mobile). To ensure broad accessibility, we heavily stress-tested the engine on hardware ranging from a base iPhone 11 (acting as our mid-tier performance baseline) up to an iPhone 13 Pro (for high-refresh-rate verification), achieving smooth, stable performance without a single browser crash or memory leak.
Here is a technical breakdown of how we structured our graphics pipeline, asset optimization, and post-processing to make this happen.
1. The Asset Pipeline & Scene Complexity
Instead of rendering a single static monolithic model, our environment is fully composable. A complete scene consists of:
-
1 Base Land Plot: Uses a full set of high-fidelity 2K PBR material maps (BaseColor, Roughness, Metalness, Normal, and Emission).
-
Up to 49 Individual 3D MODs: High-poly modular assets equipped with 1K PBR maps that users can dynamically mount, unmount, or rearrange on the fly.
-
The Budget: At full load, the engine simultaneously renders 50 distinct GLB assets, totaling ~3 Million trianglesin a single active scene, paired with animated canvas-based UI layers.
2. Custom Tuning Stack & Post-Processing
Standard mobile WebGL pipelines often wash out deep metallic and dark materials into flat, grey plastic, while turning emissive neon channels into dead, opaque paint. To combat this, we bypassed default material limitations with a custom tuning stack built over Three.js:
-
Layer-Based Selective Bloom Isolation: Instead of relying on a performance-heavy glow threshold filter over the entire scene canvas, we isolate asset emission onto a dedicated render layer (
mesh.layers.enable(1)). During the bloom pass, the engine completely bypasses global lighting and environment maps for these nodes. This ensures that dark metallic textures and heavy surfaces remain deep, clean, and un-blurred, while the neon lines and crystals breathe at full intensity. -
Dynamic Pulse Animation: Integrated inside the
useFrameloop, we animate the emissive channels dynamically:material.emissiveIntensity = baseIntensity * (1.0 + Math.sin(state.clock.elapsedTime * 0.8) * 0.15). This creates a living, breathing neon atmosphere with a strictly controlled 15% amplitude wave, iterating only through cached emissive materials to avoid heavy runtime scene traversal. -
Mobile-Optimized Post-Processing: To avoid breaking the mobile memory budget, we avoided heavy standard pass chains and integrated a streamlined post-processing layout including a Custom Selective Bloom Pass, targeted Sharpening filters to counteract mobile canvas scaling blur, and highly calibrated Tone-Mapping alignment for deep blacks.
-
Procedural Void Clouds: The backdrop features animated, 6-octave purple void clouds. We spent weeks calibrating and optimizing the math to ensure it looks deeply volumetric while maintaining an extremely low processing footprint.
3. Extreme Memory Management & Instanced Hot-Swapping
Managing memory leaks on mobile Safari when dealing with dozens of un-instanced GLB files is a nightmare. Our engine handles rapid asset hot-swapping natively. Users can instantly switch between multiple fully equipped lands (each carrying 30–40 high-poly mods) seamlessly. The architecture aggressively manages garbage collection, geometry disposal, and texture unbinding, ensuring zero browser crashes or reloads during rapid scene transformations.
4. Under the Hood: Reactive State Engine (Web3 Integration)
To give these 3D graphics real-world utility, the entire backend is deployed natively as smart contract canisters on the Internet Computer Protocol (ICP) blockchain.
Each 3D mod carries a mathematical weight (baseBP). The exact millisecond an asset is mounted or unmounted in the 3D viewport:
-
The custom engine pushes the state change to the blockchain.
-
The smart canister instantly calculates complex staking and LiteDAO voting metrics on the fly.
-
If an asset was listed on the integrated decentralized marketplace, an automated on-chain auto-delisting triggers instantly.
-
The 3D environment reacts and re-renders the updated state within milliseconds.
By avoiding central oracles, we achieved a true zero-gas, sub-second reactive 3D ecosystem where graphics and blockchain states form a single loop.
Video Demonstrations & Comparisons:
-
Engine Visuals vs Standard Viewers (Example 1): https://x.com/cyberland_icp/status/2073425640045314339?s=46
-
(These videos demonstrate how a heavily loaded Cyberland scene maintains high mobile FPS and rich visual depth compared to bare lands in standard viewers like PlayCanvas and gltf.report, where dark metals look lifeless).
-
Rapid Asset Hot-Swapping: https://x.com/cyberland_icp/status/2062630474544238852?s=46
-
(Showing instant data fetching, assets loading, and scene compilation without a single frame drop or memory crash).
Links & Resources:
-
Live Platform (Free Open Beta): https://cyberland-zmu.caffeine.xyz/ (Feel free to launch it directly from your smartphone browser to test the live performance).
-
Official X (Twitter) Account: https://x.com/cyberland_icp?s=11 (We post more technical updates and engine videos here).
-
Backend & Architecture Deep-Dive: https://forum.dfinity.org/t/cyberland-a-fully-operational-3d-ecosystem-composable-nft-metaverse/68175 (For those curious about how the underlying smart contract canister state loop works).
We would love to hear your feedback, especially regarding mobile WebGL memory optimization hacks and advanced PBR tuning tricks under heavy scene loads!
