{"id":9640,"date":"2026-08-11T14:47:08","date_gmt":"2026-08-11T11:47:08","guid":{"rendered":"https:\/\/fourthedesign.gr\/en\/?p=9640"},"modified":"2026-08-13T16:26:07","modified_gmt":"2026-08-13T13:26:07","slug":"webar-underwater-game-ocean-recovery-ar","status":"publish","type":"post","link":"https:\/\/fourthedesign.gr\/en\/webar-underwater-game-ocean-recovery-ar\/","title":{"rendered":"WebAR Underwater Game: Ocean Recovery AR Prototype"},"content":{"rendered":"

\"WebAR<\/a><\/p>\n

What happens when WebAR, augmented reality, interactive illustration and environmental storytelling<\/strong> come together directly inside a mobile browser?<\/p>\n

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

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.<\/p>\n

Want to try it immediately?<\/strong><\/p>\n


\nLAUNCH OCEAN RECOVERY AR
\n<\/a><\/p>\n

Open the experience on your smartphone:<\/strong>
\nfourthedesign.gr\/summer\/index.html<\/a><\/p>\n

From a 2D Fish to an Augmented Reality Marine Habitat<\/h2>\n

The first stage of the experience focuses on creation.<\/p>\n

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.<\/p>\n

The user can select colours and customize the fish before moving into the augmented reality stage.<\/p>\n

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.<\/p>\n

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.<\/p>\n

This type of interaction is part of the wider field of VR and AR application development<\/a><\/u><\/strong> that we continue to explore at Fourthedesign.<\/p>\n

Placing Aquatic Elements in the Real Environment<\/h2>\n

After creating a fish, the user enters the AR staging environment.<\/p>\n

On compatible Android devices, the WebAR underwater game<\/strong> 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.<\/p>\n

Fish and underwater objects can then be distributed around the environment individually.<\/p>\n

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.<\/p>\n

The user can continue adding objects until the real environment gradually becomes populated with a digital marine habitat.<\/p>\n

Placed elements can also be selected again, repositioned and resized, making the experience more than a simple AR viewer.<\/p>\n

The goal is to let the user compose the environment themselves<\/strong>.<\/p>\n

Creating a Cross-Platform Mobile WebAR Experience<\/h2>\n

One of the most interesting parts of developing the prototype has been exploring the differences between mobile browsers and devices.<\/p>\n

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.<\/p>\n

Android and iOS, however, do not expose exactly the same browser-based AR capabilities.<\/p>\n

For Android devices with appropriate WebXR support, the prototype can take advantage of spatial tracking and real-world placement.<\/p>\n

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.<\/p>\n

Developing around these differences is part of the experimentation behind the prototype.<\/p>\n

It is also why mobile and web development<\/a><\/u><\/strong> is becoming increasingly connected with immersive technologies. The browser itself can become the platform through which an interactive 3D or AR experience is delivered.<\/p>\n

From Marine Habitat to Ocean Recovery Game<\/h2>\n

Creating the underwater habitat is only the first half of the experience.<\/p>\n

Once the environment has been populated, the user can select Start Recovery Mission<\/strong>.<\/p>\n

The experience then changes from creative AR staging into an interactive underwater game.<\/p>\n

A small illustrated submarine becomes the player’s vehicle while different types of marine debris begin appearing throughout the environment.<\/p>\n

These include objects such as:<\/p>\n