How We Built Asterion Outpost—and What It Teaches Us About Digital Engagement
Asterion Outpost is a playable survival experience that runs in a web browser. It combines a clear survival loop with experimental ray-traced reflections for powerful graphics hardware, dynamic lighting, and Firebase-powered multiplayer PvE co-op. Players can fly using a jetpack, toggle first- and third-person views, adjust graphics on the fly, take on boss battles, and play through an original soundscape of music and effects. It began as a technical experiment: could we turn a normal website visit into a small world with a clear objective, responsive controls, and enough depth to reward curiosity? The result is a full game inside the website—and a useful lesson in how businesses can create attention that is active, memorable, and measurable.
What is Asterion Outpost?
The player arrives as Operator Seven, responsible for protecting an energy core on a floating alien island. They mine Aster Crystals, use those resources to build walls and automated turrets, and defend the outpost from increasingly dangerous Shardling waves—alone or with a co-op squad. The loop is simple to understand: harvest, fortify, survive, improve.
That simplicity was deliberate. A web experience does not have the luxury of a long installation, a thirty-minute tutorial, or a committed audience. It needs to establish context quickly, make the next action obvious, and reward the first interaction. Asterion is designed around that constraint.
It is a Web Wizards research and showcase project, not a client campaign. Its purpose is to test what a browser can support and to turn an abstract service—interactive 3D development—into something a visitor can experience directly.
The technology behind the outpost
Next.js and ReactThe page, loading state, menus, HUD, pause screen, settings, and restart flow are composed as React components. The game engine is loaded only in the browser because it depends on WebGL, window events, audio, and pointer controls.
Three.js and WebGLThree.js handles the scene, camera, lighting, geometry, materials, raycasting, animation, and rendering. A post-processing pipeline adds controlled bloom to the energy core, crystals, weapons, and other emissive elements, alongside an optional experimental screen-space ray-tracing pass for dynamic reflections. On NVIDIA RTX-class hardware and other capable GPUs, players can choose the higher-fidelity option; it remains optional to protect performance across devices.
Dynamic lightingThe energy core, crystals, weapons, enemy fire, and combat effects light the scene as the encounter changes. Extra dynamic lights and post-processing are quality settings, so the atmosphere can scale from mobile-friendly play to a more cinematic desktop experience.
Procedural world buildingThe island starts as a deterministic height field shaped by layered noise. Terrain, craters, ridges, surface colours, cracks, grain, panels, and glow maps are generated in code, giving the world a consistent identity without relying on one large scene file.
Gameplay systemsSeparate systems manage player physics, weapons, mining, construction, repair, enemy types, wave difficulty, spawn points, turrets, particles, audio, and the heads-up display. Shared configuration keeps balancing values in one place.
Responsive inputDesktop players get mouse look, pointer lock, keyboard movement, first- and third-person cameras, and direct weapon controls. Touch devices receive an on-screen joystick and dedicated action, jump, tool, and mode controls. A fuel-managed jetpack gives both solo and co-op operators another way to traverse the outpost.
Firebase-powered PvE co-opUp to eight operators can host or join a code-based session to defend the outpost together. Firebase Authentication and Firestore provide anonymous identity and WebRTC signalling; once connected, the host-authoritative game state travels directly over WebRTC data channels rather than through the database.
Boss battles, music, and sound effectsEscalating waves culminate in miniboss encounters with their own combat feedback and HUD. Music shifts with the action, while sound effects give mining, movement, weapons, building, enemy impacts, and the jetpack weight and clarity.
Performance controlsRepeated terrain and scenery use instanced rendering, the device pixel ratio is capped, draw distance can be adjusted, distant objects are culled, and graphics, audio, resources, and event listeners are disposed when a session ends.
How it was made
We started with the interaction loop, not the scenery. Mining gives the player a reason to explore. Crystals turn exploration into a resource decision. Walls and turrets make that decision visible in the world. Enemy waves then test what the player built. Each system creates a reason for the next one to exist.
We gave the experience one visual and strategic centre. The cyan energy core is a landmark, a light source, the object the player must defend, and the clearest indicator of failure. That alignment reduces explanation: the important thing looks important.
We built the world from reusable primitives. Voxel terrain, instanced scenery, generated textures, modular outpost parts, and reusable enemy archetypes let the scene grow without making every new detail a new asset pipeline. It also makes tuning the experience faster because world generation and gameplay rules remain code-driven.
We added feedback at every useful moment. A mined crystal changes the resource count. A turret rises as the player holds the build control. Hits produce tracers, particles, sound, and health changes. The sky and atmosphere shift when a wave begins. These responses are not decoration; they tell the player that the system noticed their action.
We made visual fidelity a player choice. Dynamic lighting is part of the world’s feedback system, while the experimental screen-space ray-tracing pass adds reflections for capable graphics hardware, including NVIDIA RTX-class systems. The setting is optional: a dramatic effect is only useful if the game remains responsive.
We made survival cooperative. Players can share a code and defend the same core in PvE co-op. Firebase supplies the anonymous sign-in and WebRTC signalling layer; the live game session uses peer-to-peer data channels so the co-op loop can stay responsive.
We built a full game rather than a short-lived 3D scene. Movement, jetpack flight, first- and third-person views, live graphics controls, combat, boss encounters, progression, music, sound effects, and PvE co-op all run from the website. That depth is intentional: it lets visitors experience the kind of interaction a browser can carry when the concept calls for more than an animation.
We treated restart and cleanup as part of the product. A browser experience may be opened, paused, restarted, embedded, or left midway through a session. The engine therefore owns its state per session and explicitly removes listeners and disposes rendering and audio resources when it is torn down.
The engagement loop businesses can reuse
- Give the visitor a clear role. Asterion says, in effect, “you are the operator; protect this core.” A business experience might instead ask a visitor to configure a product, explore a space, diagnose a need, or practise a task.
- Make the first action safe and obvious. Visitors should be able to drag, tap, choose, or move something immediately without reading a manual or creating an account.
- Respond visibly. A changed colour, updated price, completed step, opened room, or useful recommendation confirms that the visitor's choice mattered.
- Create meaningful progress. Each action should reveal information, narrow a choice, build something, or move the visitor towards an outcome—not merely trigger an animation.
- Offer a natural next step. Once the visitor has explored enough, the experience can lead to a saved design, quotation, booking, product page, sales conversation, or shareable result.
Why active engagement can be more useful than another page view
A conventional page tells a visitor what a business offers. An interactive experience can let the visitor test, arrange, compare, or practise it. That shift from viewing to doing can help in three practical ways.
It makes an unfamiliar offer easier to understand. A product explorer can reveal features in context. A spatial tour can show how a venue feels. A guided simulator can explain a process more clearly than several paragraphs of copy.
It creates memory through participation. Visitors may forget a claim, but they are more likely to remember the choice they made and the result they produced. The interaction becomes a concrete brand moment rather than background content.
It can reveal intent before an enquiry. In a commercial build, the useful signals are not limited to page views. With consent-aware analytics, a business can measure which products people explored, which options they compared, how far they progressed, where they stopped, and which paths led to a booking or quotation request.
Where the same technology can help
Retail and product salesLet customers rotate a product, inspect features, switch colours, assemble a configuration, and carry their choices into an enquiry or checkout.
Property and hospitalityTurn a floor plan, room, venue, or destination into a guided spatial preview with useful hotspots and direct paths to viewing or booking.
Training and onboardingLet staff or customers rehearse decisions in a low-risk scenario, receive immediate feedback, and repeat the parts they have not yet understood.
Events and exhibitionsA browser experience opened from a QR code can extend a booth, launch, or installation beyond the physical venue without asking visitors to download an app.
Complex B2B servicesAn interactive workflow, digital twin, or scenario tool can make an invisible operational benefit tangible before a sales call.
Brand campaignsA focused challenge, story, or collaborative experience can give a campaign a participatory centre and a result people can share.
Measure behaviour, not just spectacle
The business case should be defined before the 3D work begins. For an Asterion-style experience, a measurement plan could distinguish between the start rate, active interaction time, meaningful actions completed, progression depth, return sessions, shares, and the final conversion action. Those signals say much more than raw time on page by itself.
The same plan should watch performance and friction: loading abandonment, control errors, device type, frame-rate problems, and the point at which visitors leave. If people admire the opening screen but never interact, the experience is not yet doing its job.
Measurement also creates a practical improvement loop. Instructions can be shortened, the first interaction moved earlier, heavy assets reduced, and calls to action placed where real visitors are ready for them.
Interactive does not automatically mean engaging. A heavy scene with no purpose can make a website slower and harder to use. The right question is not “can we add 3D?” It is “what should a visitor understand or do that a normal page cannot communicate as well?”
What a business-ready version needs
A commercial experience should load progressively, work on the devices the audience actually uses, provide accessible instructions and alternatives, respect reduced-motion preferences, and preserve the core journey when full 3D is unavailable. It should also have a content and measurement plan, not just a launch date.
Asterion Outpost is intentionally deeper than most marketing experiences need to be. The reusable lesson is smaller: give people a clear goal, a meaningful choice, immediate feedback, and a reason to continue. When those pieces support a real customer decision, interactive technology becomes more than a visual effect. It becomes part of how the business explains, qualifies, and sells.
Have an idea people should be able to experience, not just read?
Tell us what customers need to understand, choose, or practise. We can shape it into a focused browser experience and define how to measure whether it earns attention and moves the business forward.