What happens when WebAR, augmented reality, interactive illustration and environmental storytelling come together directly inside a mobile browser?

At Fourthedesign, we have been experimenting with exactly this idea through our latest prototype: Ocean Recovery AR, a WebAR underwater game that transforms the user’s surroundings into an interactive marine environment.

The concept begins with something simple: choose a fish, customize its colours and bring it into augmented reality. From there, the experience develops into something much more interactive. Users can build their own marine habitat, populate it with fish and underwater elements, and then launch a submarine-based ocean recovery mission.

Want to try it immediately?

LAUNCH OCEAN RECOVERY AR

Open the experience on your smartphone:
fourthedesign.gr/summer/index.html

From a 2D Fish to an Augmented Reality Marine Habitat

The first stage of the experience focuses on creation.

Users can choose from a collection of illustrated fish, each with its own distinctive shape and pattern. Instead of using generic photorealistic marine animals, the prototype uses a deliberately illustrated visual style that gives the experience its own identity.

The user can select colours and customize the fish before moving into the augmented reality stage.

There are also underwater habitat elements such as marine vegetation, coral-inspired objects, rocks and shells. These elements can be combined with the fish to gradually construct a personal underwater environment.

This approach connects a familiar 2D interaction with a spatial experience. A fish that begins as an illustration on a mobile screen can become an object positioned inside the user’s physical environment moments later.

This type of interaction is part of the wider field of VR and AR application development that we continue to explore at Fourthedesign.

Placing Aquatic Elements in the Real Environment

After creating a fish, the user enters the AR staging environment.

On compatible Android devices, the WebAR underwater game can use WebXR-based spatial tracking to identify valid positions in the real environment. The user moves the smartphone around the space, scans the surroundings and uses a visual placement indicator to determine where an aquatic element can be positioned.

Fish and underwater objects can then be distributed around the environment individually.

A fish might be positioned several metres away, while sea vegetation or a shell can be positioned much closer to the floor. Because the elements exist within a spatial scene, perspective changes naturally according to their distance from the viewer.

The user can continue adding objects until the real environment gradually becomes populated with a digital marine habitat.

Placed elements can also be selected again, repositioned and resized, making the experience more than a simple AR viewer.

The goal is to let the user compose the environment themselves.

Creating a Cross-Platform Mobile WebAR Experience

One of the most interesting parts of developing the prototype has been exploring the differences between mobile browsers and devices.

Web-based augmented reality is attractive because the experience does not necessarily require users to download and install a dedicated application. A visitor can follow a link or scan a QR code and access an interactive experience directly through a compatible mobile browser.

Android and iOS, however, do not expose exactly the same browser-based AR capabilities.

For Android devices with appropriate WebXR support, the prototype can take advantage of spatial tracking and real-world placement.

For iPhone and iPad devices, the prototype uses an alternative browser-based approach combining camera access, device orientation and a calibrated floor system. This allows the experience to maintain a similar interaction concept even though the underlying browser capabilities are different.

Developing around these differences is part of the experimentation behind the prototype.

It is also why mobile and web development is becoming increasingly connected with immersive technologies. The browser itself can become the platform through which an interactive 3D or AR experience is delivered.

From Marine Habitat to Ocean Recovery Game

Creating the underwater habitat is only the first half of the experience.

Once the environment has been populated, the user can select Start Recovery Mission.

The experience then changes from creative AR staging into an interactive underwater game.

A small illustrated submarine becomes the player’s vehicle while different types of marine debris begin appearing throughout the environment.

These include objects such as:

• Plastic bottles
• Plastic bags
• Bottle caps
• Flip-flops
• Plastic containers
• Beach balls
• Other floating waste

The player controls the submarine and launches recovery projectiles towards the debris.

Successful hits remove pollution from the environment and contribute to the mission score.

The gameplay is intentionally accessible, but it introduces another important layer to the prototype. The environment that the user has just spent time creating suddenly becomes something they need to protect.

This combination of interactive systems, scoring and environmental objectives connects the project with our wider work in game design and development.

Remove the Waste, Protect the Fish

The fish do not disappear when the cleanup mission begins.

They continue moving around the digital environment while debris appears around them.

This means the player needs to identify the difference between marine life and pollution before launching a recovery projectile.

Removing garbage increases the score, while hitting a fish creates a penalty.

The mechanic is simple, but the idea behind it is important:

Clean the environment without damaging the ecosystem you are trying to protect.

Animated bubbles, underwater ambience, sound effects, moving fish, submarine controls and impact effects help transform the original AR scene into a lightweight spatial game.

The experience therefore moves through several different forms of interaction:

Create → Place → Explore → Play → Protect.

Why Develop a WebAR Underwater Game?

One of the main reasons for creating Ocean Recovery AR was to explore how much interactive functionality can now be delivered through the mobile web.

Traditionally, an experience combining augmented reality, animated content, interaction, sound, gameplay and spatial placement would often be developed as a native mobile application.

That approach can provide powerful functionality, but it also introduces an additional barrier between the user and the experience.

The user may need to find an application, download it, install it, open it and complete an onboarding process before interacting with the content.

WebAR offers another possibility:

Scan a QR code → Open a webpage → Allow camera access → Start interacting.

We have already explored this type of browser-based interaction in projects such as the Green Cola WebAR experience, where augmented reality content can be accessed directly through a mobile browser.

Ocean Recovery AR takes that experimentation further by combining browser-based AR with customization, spatial placement and game mechanics.

Where Could This Type of WebAR Experience Be Used?

Although Ocean Recovery AR is currently a prototype, the underlying interaction model can extend far beyond an underwater game.

Museums and cultural institutions could allow visitors to create or position digital objects inside exhibitions.

Environmental organisations could develop interactive campaigns around marine pollution, biodiversity, recycling and climate awareness.

Events and exhibitions could use QR codes to launch temporary interactive experiences without asking every visitor to install an application.

Education could combine spatial visualization with quizzes, challenges and interactive game mechanics.

Tourism could connect real locations with digital characters, historical information or interactive storytelling.

Brands could transform packaging, displays or physical environments into interactive digital touchpoints.

These applications are part of a broader move towards immersive digital experiences where the audience is no longer simply watching content but actively participating in it.

WebAR as an Interactive Storytelling Platform

For us, the most interesting part of the WebAR underwater game is not simply the technology.

It is the sequence of interactions.

First, the user creates a fish.

Then they bring it into their own surroundings.

They add more fish and environmental elements and watch a small marine ecosystem gradually form around them.

Only after creating that environment does the game introduce pollution.

The player is then asked to protect something that they have already participated in building.

That transition from creation to responsibility gives the environmental message more context than simply displaying a warning about plastic pollution.

Interactive technology can turn information into participation.

A Prototype for Exploring the Future of Browser-Based AR

Ocean Recovery AR is deliberately described as a prototype.

It gives our team a practical environment for experimenting with technologies and ideas including:

• WebAR and WebXR
• Mobile augmented reality
• Cross-platform AR interaction
• Spatial placement
• Interactive 2D assets in 3D space
• Browser-based game mechanics
• Mobile camera interaction
• Touch controls
• Audio and environmental effects
• AR photo creation
• Gamification
• Environmental storytelling

Experiments like this help us understand not only what browser-based immersive technology can already do, but also where its current limitations remain.

For organisations considering AR, VR, WebAR or real-time interactive applications, you can also explore our complete VR & AR portfolio and services or review our VR, AR and real-time development FAQs.

Try Ocean Recovery AR

The best way to understand the Fish WebAR Prototype is to experience it directly.

Open the link below on a compatible smartphone, create your fish, build your marine environment and launch the recovery mission.

TRY OCEAN RECOVERY AR

Fish WebAR Prototype
https://fourthedesign.gr/summer/index.html

At Fourthedesign, we continue to explore how augmented reality, virtual reality, real-time 3D, game technology and the web can create new forms of interaction.

Sometimes an immersive experience does not need to begin with an app download.

It can begin with something much simpler:

A link. A camera. And a physical space waiting to become interactive.

If you are exploring a WebAR, augmented reality, immersive installation or interactive game concept, contact Fourthedesign to discuss your project.