Cyberland: On-Chain Composable 3D Ecosystem & Composable NFT Metaverse

Developers Showcase
54

Update: We didn’t stop there — how breaking “standard” WebGL rules actually saved our mobile stability

Quick follow-up for anyone following this thread. We kept pushing, ran dozens of stress tests, and managed to achieve rock-solid stability across mobile Safari.

The biggest lesson from this sprint: Strictly following textbook WebGL lifecycle guidelines kept leading us into dead ends and breaking things that worked. Standard .dispose() workflows weren’t accounting for how aggressively WebKit handles VRAM. Real stability only came when we bypassed standard practices and engineered custom, “unconventional” lifecycle hacks specifically tailored to iOS WebKit memory behavior.

Final Loadout Summary:

  • Geometry: Up to 3M+ triangles (no LODs)

  • Assets: Up to 50+ dynamic GLBs loaded simultaneously

  • Rendering: Dual live WebGL contexts, 6 custom shaders, full PBR, post-processing/bloom, and live on-chain state sync

By stepping away from standard WebGL patterns and building custom frame-budgeting, context pausing, and micro-delay teardowns, we cleared the memory ceiling without sacrificing a single polygon or shader pass.

If anyone in the community is currently fighting dual-context WebGL in mobile Safari, struggling with WebKit’s Jetsam limits, or wants to know how we bypassed standard disposal pipelines to keep 3M tris stable on mobile — drop a reply or reach out! Happy to share the exact architectural hacks that made it work.

55

It looks amazing you’ve got some nice visuals and runs fairly well on chrome and safari.

It’s unclear when someone logs in what they are supposed to do. I know the guide is there, but even after skimming that it’s not obvious what to do next.

Maybe hide options from new users or have some tutorial (dont call it a tutorial) just show the user with some flashy animation or something what you want them to do.

56

Totally agree with you! We were so deep in the hardcore technical implementation that first-time user experience definitely became an afterthought.

Now that the performance and architecture are locked in, making this complex ecosystem feel effortless and intuitive for anyone logging in is our top priority. The non-preachy visual guide idea is gold. Thanks for the solid critique! :rocket:

57

Composable on-chain NFTs in 3D — one reusable modal, 50 WebGL objects per land, in mobile browsers

We shipped a single mod-viewer modal across Cyberland on ICP — and it’s now everywhere. Click any mod photo and the same modal opens: full 3D model, rarity tier, drop difficulty, ID, PWR weight, description, and links to the project’s Twitter and website.

One component, 8+ entry points. The same modal is wired into Collection, the modifier inventory, the land card (install/remove), the mod marketplace, and all 5 inspectors — two leaderboards, marketplace, Public Lands, and the map. The 7×7 inspector is the highlight: 49 slots, each strictly by its own ID, click any cell and the modal opens in place.

Two render modes. Each LAND is a composable NFT (ERC-998-style) with 49 modifier slots — 1 land + 49 mods = 50 distinct 3D objects. On the land they render small, in context. In the modal they render full-size, in full detail. Every mod is anchored to a real ICP ecosystem project with real on-chain weight (PWR/baseBP) that boosts the land’s staking power.

The 3D layer. This is our third WebGL context. Unlike the land scenes, we cut Bloom post-processing and the 6-octave drifting cloud background to soften the load — and it all runs in mobile browsers.

Why this matters for NFTs. Most metaverses are still 2D or drop 2–5 voxel objects (rocks, trees). Most NFTs are just title sketches. We made composability real in 3D: 50 objects per land, each backed by a real project and real power weight — not a pretty picture, not meaningless 3D.

This is just the base. Behind it: on-chain RNG, on-chain crafting, our on-chain leaflet map, Public Lands (view anyone’s land in 3D), an atomic marketplace with full 3D, dynamic staking, and a Lite DAO.

Try it live — the new 3D mod viewer is in the Collection tab. More videos on our Twitter.

Site: https://cyberland-zmu.caffeine.xyz/

Twitter: https://x.com/cyberland_icp?s=11

58

We shipped two more entry points — our 7×7 Land Inspector is now across 7 different locations in Cyberland $ICP :magnifying_glass_tilted_left:

The two newest additions focus on quick inspection of your own lands:

•Land Card (Main View): Tap the new magnifying glass :magnifying_glass_tilted_left: right next to the MODS counter to instantly launch the 49-slot grid.

•Profile Menu :bust_in_silhouette:: Tap any land row in “My Lands” for seamless access.

Every single mod sits strictly in its designated ID slot. Tap any cell in the 7×7 grid to open our full 3D viewer — packed with real-time on-chain data, rarity tiers, drop rates, PWR weights, project details, and direct social links.

7 entry points. 49 slots ICP ecosystem projects per land. Full 3D composability in your mobile browser. :chains::high_voltage:

https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/b/ebf7690585814a0582690f0c0c61cd45ee790daf.jpeg

59

Cyberland: An NFT card rendered by a live 3D scene, not Photoshop

We’re building an on-chain composable 3D ecosystem on ICP, where every land is a composable NFT: 49 slots for modifiers, 7 biomes, all state living on-chain. And we hit a question nobody in crypto really solved: how do you make an NFT card that honestly reflects the live state of an object, instead of a static image baked into JSON?

Our answer — render the card straight from inside the live WebGL scene, at the moment you hit the shutter. Not a screenshot, not a preview, not a pre-rendered asset. An honest 2K render of the frame, assembled from the real on-chain state: land name, land ID, live mod count, power, owner. Everything pulls automatically — no hand-typed metadata, no fake rarity.

Why it was hard

  • Honest 2K, no shortcuts. The card renders at full resolution, not a downscaled preview. That means the whole scene renders as-is, with all its graphics.
  • A packed land is the worst case. Lands are already full PBR at 2K, mods are high-poly at 1K. On a fully packed land that’s up to 50 full high-poly GLB models and up to 3M triangles in the scene at once.
  • On top of that — post-processing, 6-octave drifting clouds in the background, constant UI load and continuous blockchain queries.
  • And all of it in the browser, on mobile, where the memory budget is tight. Mobile browsers are especially sensitive to peak allocations — that was its own challenge to solve.

What we got

  • The card is a passport to the land: name, ID, PWR, mods, owner, date — all live, all on-chain, all current at the moment of capture.
  • The card adapts to the biome — color scheme, UI, even the QR code shift to that land’s palette.
  • The QR leads straight into the 3D viewer of that land — on your phone, in your browser, with all the graphics. Not a marketplace page, not a placeholder animation — the actual live land with every mod on it.
  • You pick your angle, camera, light — and the card is minted exactly as you see it. What you see is what you get.

Try it yourself — everything is live and working: https://cyberland-zmu.caffeine.xyz/

Videos and deep dives on our Twitter: https://x.com/cyberland_icp

NFT Card Example

60

Try it yourself: Open the NFT card example photo right in your browser (or download it), then long-press the QR code on the image to open the link.

You’ll dive straight into the live, on-chain 3D state of this LAND with all 40/49 MOD slots active — and you’ll immediately see what we’ve built. :rocket:

:link: Direct link: https://cyberland-zmu.caffeine.xyz/land-viewer?landId=27&biome=ISLAND_ARCHIPELAGO

61

My phone is too slow for this unfortunately :disappointed_face: it looks really nice though

62

Thanks for the feedback! We optimized it pretty heavily — tested it on iPhone 11 where it runs smoothly, and on iPhone 13 it holds rock-solid 60 FPS. Glad you like the look! :rocket:

63

The only rules that really matter, savvy?

What man can do, and what a man can’t do.

You clearly can make WebGL bend the knee, mate.

Drink up, me 'earties, yo ho!

64

Haha, cheers mate! :clinking_beer_mugs: Appreciate the epic quote — we keep pushing WebGL to its absolute limit!

66

Git rollback to the rescue! :sweat_smile: Good luck with the launch tonight, hope the servers hold up!

By the way, while you’re recovering those lines of code, check out the Collection section in our app. Take a look at MODS ID 37 and ID 40 — you might recognize some very familiar mascots fully rendered and mounted in 3D there. :wink: