Demo video · 2023
Croquet Microverse tour A tour of Microverse: a shared 3D world - here being explored by just two users - with synchronised cards, a live data feed, a demonstration of inter-world portals, and a replicated physics simulation.
0:00 A shared world Two users are exploring the same Microverse world. We see them first in the showroom, each moving their own avatar: the White Rabbit and the Mad Hatter. 0:16 Presentation mode A user can start presentation mode, which gathers all other users in the session to follow the presenter through the world. Even though everyone will then see the same active scene, no screen sharing is involved: each user's tab computes its own copy of the world, and the same events are being replicated to all of them, so what they see stays naturally synchronised. 0:45 Cards, and a bouncing logo Every object in Microverse is a kind of card (the idea came from HyperCard), extended with behaviours written in JavaScript. Moving a card, or interacting with active features of a card, happens identically for every user. 1:12 A PDF viewer Moving through the document - by scrolling, or by clicking to jump between pages - is synchronised. The viewer can be picked up and moved like any other card. 1:37 A small stack of cards A base card reads a live Bitcoin price from a vendor feed, and publishes the value. Two cards sit on top of it and listen: a bar graph, which knows nothing about Bitcoin and simply draws the values it hears, and the Bitcoin logo, which turns green when the price goes up and red when it goes down. 2:06 A portal to another world A portal opens onto a completely different world, at a different URL. Portals are cards too, so they can be grabbed, spun and moved. 2:37 Multiplane portals Portals are implemented using holes in stacked iframes, much as Disney's multiplane camera built up scenes for Snow White. The only information passed between the layers is the transforms needed to render them from the right viewpoint. 3:01 Walking through Just like any use of iframes in a web page, their URLs and contents are independent. When a user moves from one world to another, an overseeing script in the browser tab informs the first iframe's world that the given user has left, and the second iframe's world that the user has entered. 3:54 Physics with replicated randomness A physics simulation runs identically in every tab. Each new cube's random shape and colour come from a replicated random-number generator; no part of this needs to be shared through the network. The only bandwidth needed is for the time ticks that tell every user view to keep advancing the simulation. This video is a shortened cut of a tour created by David A Smith.
Microverse was primarily built by Vanessa Freudenberg and Yoshiki Ohshima; my involvement included fine-tuning the portal mechanics and the spatial audio, and building some apps.
Browse the source
Part of the Croquet startup adventure · ← Croquet Greenlight · Croquet Mythos →
← More things I've built