Cyberland

OnChain Composable 3D Ecosystem

Comment

Inspiration

Most “3D metaverse” products are either a static JPEG with traits or a heavy desktop scene that dies in a phone browser. I wanted the opposite: a land you can actually touch on mobile — mount and unmount real 3D objects, see the layout change live, and open someone else’s land in the same fidelity.

The spark was simple. If a land is composable, the 3D scene should be the interface, not a screenshot glued onto a dashboard. That is what Cyberland is built around.

What it does

Cyberland is a live, mobile-first 3D land builder and explorer.

Each land is a composable plot with 49 mountable high-poly 3D MODs on one of seven biomes. You install, remove, and rearrange mods. A 7×7 inspector shows every slot. A public viewer opens any public land in full 3D, exactly as the owner sees it. A Leaflet map jumps to that plot. From one listing card you can open the inspector, the 3D scene, or the map.

A maxed scene is the land plus up to 49 mods — about 50 PBR GLBs and ~3 million triangles — running in a mobile browser with custom post-processing. No app install. Open it here: https://cyberland-zmu.caffeine.xyz/

How we built it

The frontend is a custom Three.js / WebGL2 pipeline (React Three Fiber) tuned for mid-tier phones, including Mobile Safari. Lands use 2K PBR maps; each MOD is its own 1K PBR GLB. We run selective bloom on an isolated layer, a light emissive pulse, sharpening, tone mapping, and a 6-octave procedural backdrop — without a full heavy post stack that blows mobile VRAM.

State is live: mount/unmount updates the scene and the land’s composition in the same beat. Public Land required two independent WebGL canvases in one mobile page (owner view + guest view). Marketplace cards wire three renderers together: DOM inspector, R3F canvas, Leaflet map.

3D assets were generated and then heavily retopologized for mobile. The product was iterated as a mobile-first UI: biome colors drive frames, glows, bars, and buttons so the 2D chrome matches the 3D scene.

Challenges we ran into

Mobile Safari is the hard mode. Fifty un-instanced GLBs, full PBR, and post-processing will crash a phone if dispose/unbind is sloppy. Rapid biome and loadout swaps had to rebuild the scene without leaking textures or killing the WebGL context.

Two canvases on one page made that worse. We also had to keep layouts dynamic (49 unique slots, no honest LOD) while staying stable on an iPhone 11-class baseline.

The design constraint was as hard as the engine: this is a short session hub, not a three-hour MMO. Every tap had to land in 3D, inspector, or map — not in another settings screen.

Accomplishments that we're proud of

  • A production-looking PBR scene at ~3M triangles in a phone browser, without install.
  • 49-slot composable lands where every MOD is a real 3D object, not a sticker.
  • Public Land: guest sees the owner’s exact live layout.
  • Dual WebGL2 canvases stable on mobile.
  • One card → inspector + live 3D + map.
  • Living 2K snapshots captured from the actual WebGL scene, with a QR that opens the public 3D view.
  • Open public beta you can run on a phone today.

Technical write-ups: Three.js thread and the live beta above.

What we learned

Triangle count is not the flex if the phone dies. The real work is memory discipline, layer-based bloom, and refusing to recreate the GL context.

We also learned that composability only clicks when people can see it: empty 0/49 vs loaded 40/49 has to be obvious in three seconds. That pushed us to Public Land, the snapshot/QR card, and synchronized inspectors.

AI tools helped produce assets and iterate UI fast. They did not replace architecture. Keeping 50 high-poly models alive on Safari is still a human pipeline problem: budgets, dispose order, and what you are willing to drop.

Built With

Share this project:

Updates

Submission history