AWS Spatial Computing Blog

Empower Your WebXR App Using AWS Serverless Architecture

Four ducks with virtual reality headsets are standing next to each other in a dark room.

© Chand – stock.adobe.com

What is WebXR?

WebXR stands as a cutting-edge web standard designed to enable immersive virtual reality (VR) and augmented reality (AR) experiences directly within web browsers. This technology empowers developers to create and share interactive 3D environments online, offering users innovative and engaging ways to interact with digital content.

Recent Developments in WebXR

The WebXR landscape today, predominantly known for its gaming applications, has recently seen the introduction of several remarkable titles. Notable among these are “Wol” by Niantic, an innovative Generative-AI (Gen-AI) powered mixed reality experience; “Escape Artist” by Paradowski, offering an awe-inspiring escape room adventure; and “Elysian” by EliXR Games, an action-packed multiplayer wave shooter. These titles have been well-received by the gaming community and have garnered multiple nominations at the Polys WebXR Awards.

WebXR Platform Overview

WebXR experiences function as standard websites accessible through browsers and inherently support cross-platform compatibility. Similar to conventional websites, they require no installation, and updates are seamlessly delivered by updating web content, ensuring users always access the latest version.

Among the platforms supporting WebXR, the Meta Quest Browser stands out for its extensive support of WebXR features. The Meta Quest Browser team is committed to driving traffic to high-quality Web-XR content, providing a wealth of developer resources, and promoting advancements in API standards. As an example, they pioneered mixed reality APIs that facilitate interaction with the physical environment through advanced features like plan and mesh detection, semantic labeling, and depth sensing.

WebXR Developer Resources

The Meta Quest Browser team has made significant contributions to developer resources, notably with the launch of the Immersive Web Emulator browser extension in February 2023. This tool simulates WebXR devices, allowing for the desktop testing of WebXR applications without the need of physical headsets. This extension has become an integral tool to over 6,000 WebXR developers.

The Reality Accelerator Toolkit (RATK) stands as another invaluable resource, designed to bridge the gap between low-level WebXR Device APIs and the more accessible APIs of the popular Three.js 3D library. RATK seamlessly integrates physical world elements into the Three.js scene graph, enhancing mixed reality development.

Furthermore, the team is developing sample WebXR apps to demonstrate advanced API support and help developers in kickstarting their WebXR projects. One such app, Meta’s “Flap Frenzy,” has been utilized by Amazon Web Services (AWS) to create a sample application for incorporating AWS services into WebXR development.

Overview of AWS Serverless Architecture

The sample WebXR and AWS application introduced in this blog focuses on using AWS’s serverless architecture. AWS serverless architecture refers to services that allow you to build and run applications without having to manage the underlying servers or infrastructure. Here are some key ideas behind AWS serverless architecture:

  • No server management: With serverless, AWS handles server provisioning, capacity planning, patching, etc. automatically.
  • Pay per use: You are charged based on consumption, such as compute time, storage used, and number of API transactions.
  • Auto-scaling: The services scale up and down automatically based on demand. This makes the applications highly scalable.
  • Faster development: Serverless enables developers to focus on writing code rather than worrying about infrastructure. Developers can rapidly prototype solutions and bring ideas to market faster.
  • Event-driven: Many serverless architectures execute code in response to triggers or events like HTTP requests, database changes, queue messages, etc. This enables building highly event-driven applications.

The serverless model brings agility, innovation, and operational efficiency to applications. This article showcases the following AWS services:

Using AWS with WebXR

Meta’s “Flap Frenzy” application is a single player game where the objective is for the player to physically flap their wings to fly through a series of rings. The player gets one point per ring that they successfully fly through. The game ends when the player misses a ring.

An animated GIF of Flap Frenzy. The player is flapping their wings while traversing a cartoon-like terrain.

Animated GIF from AWS enhanced Flap Frenzy.

The team created a version of “Flap Frenzy” with features that showcase the power of using serverless architecture. The application is open source and can be cloned from this GitHub repository.

The features enabled by AWS serverless architecture include:

  • A leaderboard that shows the player’s high score, the world record, and the player’s world rank.
  • An asset management system that loads game assets at runtime instead of being embedded in the application.
  • A user authorization and authentication system that provides sign-up and sign-in capabilities.
  • Web hosting to deliver the application to the client.

The following architecture diagram shows the AWS services used and how they are integrated in the backend infrastructure. Each of these services will be discussed later.

AWS architecture diagram showing the connection between AWS services.

AWS architecture diagram for Flap Frenzy.

Leaderboard

The leaderboard shows the player’s current and record score in addition to the world record and the player’s world rank.

A leaderboard showing the player's high score and the world record.

Leaderboard showing player and world scores in app.

The leaderboard was implemented with a combination of:

  • DynamoDB for storing player score data. The database consists of a single table storing a player ID, player score, and a Global Secondary Index partition key for sorting by score.
    An Amazon DynamoDB table showing three items that include a player ID, score, and a status field.

    Leaderboard DynamoDB table.

    A screenshot of the DynamoDB table's global secondary index consisting of a partition key (status) and sort key (score).

    Leaderboard global secondary index.

  • Lambda functions to read and write to DynamoDB and compute player rank. API Gateway provides secure access to the backend Lambda functions by way of a GET and POST route. You can send an HTTP request to a specific endpoint URL that matches configured path in the API Gateway for accessing a desired backend service.

    A screenshot of the leaderboard API Gateway GET and POST routes.

    Leaderboard API routes.

Asset Management

An asset management system was created to retrieve game assets at runtime instead of loading them with the application files. This separation of game assets from application code allows downloading of game assets when they are needed, reducing initial load times.

An image of the game assets used in Flap Frenzy including the environment model, the player wing model, the leaderboard background image, and the sky box image.

Flap Frenzy game assets.

This system was implemented with a combination of:

  • Amazon S3 for object storage. Game assets are downloaded by a pre-signed URL.

    A screenshot of the contents of the game assets S3 bucket.

    Assets stored as objects in Amazon S3.

  • A Lambda function to generate a pre-signed URL for the WebXR application to download the assets. API Gateway to provide secure access to this backend Lambda function by way of a GET route.

    A screenshot of the API Gateway asset management GET route.

    Asset management API route.

Authentication & Authorization

Authentication confirms that users are who they say they are, and Authorization gives those users permission to access resources. For authentication, the team used an Amazon Cognito user pool and an identity pool to manage users. Amazon Cognito user pool is a user directory that supports user authentication for the application. The identity pool maps a user to a set of permissions authorizing interactions with AWS services. Looking in the source code, Auth.js is where auth is handled. An Auth library from the Amplify SDK is used to simplify the code needed to manage the authentication flow for user sign-in and user sign-up. Here is the documentation which goes into Amplify auth in more detail.

A screenshot of the user sign up and sign in user interface.

Amplify sign-up and sign-in user interface.

For user authentication, the team used a JWT token generated from Amazon Cognito, while Amplify’s Auth library is handling the auth handshake/flow and interacting with Amazon Cognito on behalf of the app to generate this token. This token is used in the Authorization header when calling the API Gateway endpoint, which is protected by an Amazon Cognito User Pool Authorizer.

A screenshot of the Amazon Cognito user pool authorizer used by API Gateway.

Amazon Cognito User Pool Authorizer used by API Gateway.

Web Hosting

The combination of Amazon S3 and CloudFront is used to securely host and deliver the WebXR application to users. The static application files are stored in an Amazon S3 bucket, and CloudFront is configured to use this Amazon S3 bucket as an origin. By default, CloudFront assigns a default domain name, “cloudfront.net”, for the created distribution and enables HTTPS using its default SSL/TLS certificate – e.g., https://d2j9xcnw2ehu81.cloudfront.net. You can extend this configuration with a custom domain name using Amazon Route 53 or provide advanced security protection with AWS Web Application Firewall (WAF), however, these capabilities are not demonstrated in the example.

Conclusion

The power of WebXR combined with AWS serverless architecture not only enhances the distribution and scaling capabilities for developers but also significantly accelerates developer workflows. By eliminating the need to manage infrastructure, developers can dedicate their efforts to what they do best: building innovative applications. This seamless integration allows for easy deployment, enabling developers to gather early feedback and iterate quickly. Moreover, the serverless model naturally adapts to the application’s demand, ensuring that scaling is both effortless and efficient as user engagement grows.

Our team encourages you to experiment with WebXR and AWS serverless architecture to bring your immersive application ideas to reality. Browse, clone, or fork the code samples for Flap Frenzy and AWS-enhanced Flap Frenzy. This AWS sample offers a holistic view of the end-to-end application experience, emphasizing the streamlined development process serverless architecture provides.