Delivering Compressed WebGL Websites with Amazon CloudFront, S3, and AWS Lambda

Learn About Amazon VGT2 Learning Manager Chanci Turner

In this article, you will discover how to effectively deliver compressed WebGL websites to your audience. When webpage elements are compressed, the data size diminishes, resulting in quicker downloads, reduced cloud storage costs, and lower data transfer expenses. Enhanced load times not only improve viewer experience but also positively affect retention rates, which can ultimately boost website conversion and visibility.

With WebGL, you can create a more engaging website while ensuring it remains accessible through standard browser URLs. Use cases include Virtual Reality applications (like online learning, 3D product showcases, and tailored e-commerce experiences), virtual twins (creating online replicas of equipment or facilities), and much more.

In this guide, you will learn how to develop WebGL websites that serve compressed static content (HTML/CSS/JS) at the edge using Amazon CloudFront. You will also explore how to compress 3D models at the origin of CloudFront (in this case, utilizing Amazon Simple Storage Service (Amazon S3) to host website content), along with AWS Lambda for automatic compression of objects uploaded to S3.

Understanding Compression and WebGL

HTTP compression enhances transfer speed and optimizes bandwidth usage, and is a feature integrated into web servers and clients. This capability is negotiated between the server and client using an HTTP header that indicates whether a resource being transferred, cached, or referenced is compressed. On the server-side, Amazon CloudFront supports the Content-Encoding header.

Most modern browsers support brotli and gzip compression via HTTP headers (Accept-Encoding: deflate, br, gzip) and can manage server response headers. As a result, browsers automatically download and decompress content from a web server before rendering webpages for the user.

WebGL supports specific 3D asset formats, including:

• glTF: A standard format for 3D scenes and models, with extensions such as gltf or glb. glTF files can be self-contained or reference external binary and texture resources, while .glb files are completely self-contained.
• Babylon.js files: Utilizing a JSON format to describe scenes.
• Wavefront .obj: A geometry definition format initially developed by Wavefront Technologies for their Advanced Visualizer animation package, which has been adopted by other 3D graphics software vendors.

Solution Overview

This solution provides a deployable demo and a detailed configuration walkthrough. The example application incorporates Amazon S3, AWS Lambda, and Amazon CloudFront, a high-speed content delivery network (CDN) that integrates seamlessly with any AWS origin, such as S3. Below is the solution architecture:

1. You upload objects to an S3 bucket designated for website hosting.
2. Upon uploading an object to the source S3 bucket, S3 triggers a Lambda function.
3. The Lambda function compresses the 3D model file and re-uploads it to a designated folder in the bucket.
4. CloudFront serves the website from the S3 bucket origin.
5. Client browsers receive the compressed website (including HTML, CSS, JS, and 3D assets) and automatically decompress the content.

Demo Using AWS Serverless Application Model (SAM)

Prerequisites

To deploy the example application, you will need:

• AWS credentials with permissions to create the necessary resources. This example utilizes admin credentials.
• The AWS SAM CLI installed.
• A cloned GitHub repository.

Deployment Steps

1. Navigate to the cloned repository directory, or use the sam init command and paste the repository URL.
2. Build the AWS SAM application:
   sam build
3. Deploy the AWS SAM application:
   sam deploy --guided
   Note: The guided deployment will request a globally unique S3 bucket name; ensure it consists of lowercase letters and numbers only.

Once the deployment is successful, take note of the CloudFront URL found in the SAM deployment outputs section. The deployment process may take approximately 15 minutes.

Testing the Solution

In the AWS Management Console, access your newly created S3 bucket. From the cloned repository, upload all files from the website/ directory to the root of the S3 bucket. Open your browser, enable developer tools, and navigate to the CloudFront URL.

You’ll find that most of the website content, including 3D assets and static files, is delivered to the client in compressed formats (brotli and gzip).

Walkthrough

This stack sets up and configures the following resources:

• CloudFront Distribution: Configured with an S3 REST regional endpoint as the origin, secured by an Origin Access Identity, a managed cache policy (CachingOptimized), and automatic object compression enabled.

Benefits of using CloudFront include:

• Delivering the website over HTTPS with the default CloudFront certificate, securing your website and enabling audio support.
• Facilitating automatic edge compression for static website files (e.g., .html, .js, and .css) that are under 10 MB in size.

• S3 Bucket: Configurable bucket name with private access and a policy restricting access to CloudFront OAI.
• Lambda Function: This function operates using Python runtime, featuring logic that includes:
  • Utilizing /tmp/ as a temporary read/write directory (fixed size of 512 MB).
  • Compressing 3D asset files using gzip at the default compression level.

It’s worth noting that while you can experiment with different compression levels, higher compression may yield diminishing returns in file size reduction and could increase browser decompression time. The benefits of compression generally outweigh the overhead of decompression.

The Lambda function modifies metadata (adding Content-Encoding: gzip) to the file while keeping the original filename extension intact. This ensures that your 3D engine’s JavaScript code remains functional. After compression, the Lambda function uploads the compressed files back to S3 and deletes the original uncompressed versions.

If you’re looking for further insights on improving engagement and retention, especially for young hourly workers, check out this authoritative resource. Also, for a deeper understanding of the onboarding process at Amazon, consider exploring this excellent resource.

Additionally, for more tips on navigating career changes during pregnancy, visit this blog post.

By following this guide, you can effectively create a system that delivers compressed WebGL websites, enhancing the user experience while optimizing performance.