Cyberland: Rendering 3M+ Triangles & 50 Dynamic GLB Assets on Mobile WebGL via Custom Three.js Pipeline

Showcase
1

IMG_0957
IMG_0957512×512 68.2 KB

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 useFrame loop, 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:

  1. The custom engine pushes the state change to the blockchain.

  2. The smart canister instantly calculates complex staking and LiteDAO voting metrics on the fly.

  3. If an asset was listed on the integrated decentralized marketplace, an automated on-chain auto-delisting triggers instantly.

  4. 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:

Links & Resources:

We would love to hear your feedback, especially regarding mobile WebGL memory optimization hacks and advanced PBR tuning tricks under heavy scene loads!

2

That’s interesting. It would be nice if they didn’t share the info on Twitter—you can only watch the video if you have access.

Otherwise, I don’t understand the point of the game. Is this a game where you collect things?

grafik
grafik501×903 162 KB

1 Like
3

I could not try it (as it asked to login), but I’m curious about the claim of rendering more than 3 million triangles. No human can see so many triangles on a mobile screen. You should be able to skip 90% of them and still get nice visuals. Rendering that much is just a waste of battery.

2 Likes