Simran's Blogs

How to Configure and Deploy an Basic App made from Unity on Web XR platform

Simran Lohchab's photo
Simran Lohchab
·

15 min read

To Configure and Deploy a Basic App made using Unity we must first make a basic app then we need to follow the given basic steps.

Configuring and deploying a basic app made in Unity involves several steps, including building the app, optimizing it for your target platform, and distributing it. Here's a general guide to help you get started:

To deploy a Unity app with AR features on the web, you can use Unity's WebGL platform in combination with AR Foundation and AR.js. Here's a step-by-step guide to help you deploy your Unity AR app on the web:

Step 1: Prepare Your Unity Project

i) Open your Unity project.

ii) Ensure that you have implemented AR features using AR Foundation and tested them in the Unity Editor.

Step 2: Enable the WebGL Platform

i) Go to "File" > "Build Settings."

ii) Select the WebGL platform and click "Switch Platform."

Step 3: Configure Player Settings for WebGL

i) Go to "Edit" > "Project Settings" > "Player."

ii) In the Player Settings window, configure settings such as resolution, quality, and icon.

iii) Under the "Resolution and Presentation" section, set the "Default Screen Width" and "Default Screen Height" to match your desired resolution.

Step 4: Build Your Project

i) In the "Build Settings" window, click the "Build" button.

ii) Choose a location to save the build files.

Step 5: About your build files

Your WebGL build consists of an index.html file, as well as other folders, files and assets that the game will need to run. The index.html file is a loader file; it functions as a launcher for your game. However, without the other files in their correct locations it won’t work properly, as it is dependent on them to run your build. If you need to move the build files to a different location, make sure to move everything together — we recommend zipping the files to do this.

Sharing your WebGL build with others

The best way to share your WebGL build with others is by hosting it online. However, you can give a zipped folder of your WebGL build to others directly.

Step 6: Publish your WebGL build on Unity Play

To publish your WebGL build on Unity Play: 1. Make sure that you have installed the WebGL publisher package and checked for updates.

2. In the Unity Editor, go to the main menu and select Publish > WebGL Project.

3. In the WebGL Publish window, select Get Started.

4. Find the build that you created in the list and select Publish.

Note:

  • If you created your build in a previous Unity Editor session, you will not see your build listed. In that case, select Locate Existing Build and navigate to the folder containing your build.

  • You can create a WebGL build from this point in the process and publish it directly, but you will not be able to configure the Scene order or project settings if you do so.

5. Unity Editor will then publish your build to Unity Play; this could take some time, depending on the size and complexity of your project.

A progress tracker is displayed in the Publish window whilst Unity Editor is publishing the build on Unity Play

6. Partway through the uploading process, the Unity Play page for your build will open in edit mode in your default browser window. You’ll be able to:

  • Name your build

  • Add a short description

  • Provide a thumbnail image — we recommend taking one in the Unity Editor, from Play Mode

  • Tag the assets and tutorials you used to make your real-time experience

An example view of an uploaded build in Unity Play, with its page in edit mode

Make sure to save your changes when you’re done! 7. Copy the URL directly from your navigation bar or use the Share button to share your real-time experience with others.

The published page for the WebGL build, with personal information redacted and the Share button highlighted with a callout

Step 7: Publishing your build in other places online

There are other places you might want to upload your real-time experience as a creator.

Game hosting platforms

If a platform can host user-submitted HTML5 games, it should be able to host your WebGL build. These platforms will have their guidance to help you with the process. One popular option for creators at the moment includes:

Personal sites and portfolios

You can also upload your build to a personal website or portfolio. Many website platforms (such as Squarespace and Wix) have options to host WebGL content integrated into their platform tools.

#Hosting of an AR App made on Unity

Step 5: AR.js Integration

  1. Download AR.js:

  • Click on the "Code" button and select "Download ZIP."

  • Save the downloaded ZIP file to a location on your computer.

  1. Extract AR.js Archive:

    • Navigate to the location where you saved the downloaded ZIP file.

    • Right-click on the ZIP file and select "Extract All" (or a similar option) to extract its contents.

    • Choose a destination folder where you want to extract the AR.js files.

AR.js is a JavaScript library that provides the necessary functionality for creating AR experiences on the web. To integrate AR.js into your Unity AR app, you need to download its scripts and assets from the official GitHub repository. Once you've downloaded and extracted the AR.js files, you need to include them in your Unity project's WebGL build.

Step 6: Include AR.js in Your Project

  1. Open Unity Project's WebGL Build Folder:

    • Open your Unity project.

    • Navigate to the WebGL build folder that you created earlier. This is typically located in your project's root directory and named "Build."

  2. Locate the TemplateData Folder:

    • Inside the WebGL build folder, you'll find a subfolder named "Build" or "WebGLBuild" (the exact name may vary).

    • Open the "Build" folder to access its contents.

  3. Copy AR.js Files:

    • Open the "TemplateData" folder within the "Build" folder. This folder contains assets and resources for the WebGL build.

    • From the extracted AR.js folder (the one you extracted in Step 5), locate the following subfolders and files: "aframe," "data," and "js."

    • Copy these subfolders and files from the extracted AR.js folder.

  4. Paste AR.js Files into TemplateData:

    • Return to the "TemplateData" folder in your Unity project's WebGL build.

    • Paste the "aframe," "data," and "js" subfolders into the "TemplateData" folder.

    • The AR.js scripts and assets are now included in your Unity AR app's WebGL build.

Here you're specifically copying the "aframe," "data," and "js" folders from the extracted AR.js folder and pasting them into the "TemplateData" folder within your Unity project's WebGL build. This ensures that the AR.js scripts and assets are available and accessible when your AR app is deployed on the web.

By including AR.js in your project, you enable features like marker tracking and augmented reality capabilities for your Unity AR app when accessed through a web browser.

Step 7: Create an HTML File

In this step, you will create an HTML file that serves as the entry point for your Unity AR app when accessed through a web browser. This HTML file will include the necessary scripts to enable AR.js and Unity's WebGL content.

Here's how to perform this step:

  1. Open WebGL Build Folder:

    • Navigate to the folder where you previously built your Unity WebGL project. This folder contains all the files needed for your web deployment.

  2. Create a New HTML File:

    • Right-click within the WebGL build folder to create a new file.

    • Rename the new file to something like "index.html" or any other name you prefer. This will be the main HTML file for your AR app.

  3. Open the HTML File with a Text Editor:

    • Right-click on the newly created HTML file and choose a text editor (such as Notepad on Windows or TextEdit on macOS) to open the file for editing.

  4. Add HTML Structure:

    • Inside the HTML file, start by adding the basic HTML structure:

        htmlCopy code<!DOCTYPE html>
  <html>
  <head>
      <meta charset="UTF-8">
      <title>Your Unity AR App</title>
  </head>
  <body>
  </body>
  </html>

  5. Include AR.js and A-Frame Scripts:

    • Within the <body> section of the HTML file, including the necessary script tags to load AR.js and A-Frame. This is essential for creating the AR experience.

    • These script tags will reference the AR.js and A-Frame JavaScript files that you included in your WebGL build in previous steps.

  6. Set Up AR Scene:

    • Inside the <body> section, create an A-Frame scene using the <a-scene> element.

    • Add an <a-marker> element within the scene to define the marker for AR tracking. You can use one of the built-in presets, such as "hiro."

    • Inside the <a-marker>, add an <a-entity> element with the attribute unity-webgl="targetName: YourSceneName". Replace "YourSceneName" with the actual name of the Unity scene you want to load in the AR experience.

  7. Camera Configuration:

    • Add an <a-camera-static> element within the <a-scene> to set up the camera for the AR experience.

  8. Save the HTML File:

    • After making the necessary changes, save the HTML file.

Step 8: Upload to Web Server

i) Upload the contents of the WebGL build folder (including the HTML file and AR.js files) to a web server or hosting platform.

Uploading to a Web Server:

A web server is a computer system that stores and serves website files over the internet. You can use your web server or rent one from a web hosting provider. Here's how to upload your WebGL build contents to a web server:

  1. Choose a Web Hosting Provider:

i) Visit the websites of popular web hosting providers like

Bluehost(bluehost.com),

HostGator (hostgator.com),

SiteGround (siteground.com), and others.

ii) Sign up for a hosting plan that suits your needs and budget.

  1. Access Your Hosting Account: Once you've signed up for a hosting plan, you'll receive account credentials (username and password) and access to a control panel (often cPanel). Log in to your hosting account.

  2. File Manager: In your hosting control panel, locate the "File Manager" or "File Manager" section. This tool allows you to manage files on your web server.

  3. Create a Directory: Inside the File Manager, create a new directory (folder) where you want to host your AR app. This directory will contain all the files from your WebGL build.

  4. Upload Files: Open the newly created directory and use the "Upload" or "Upload Files" option to upload the contents of your WebGL build folder. This includes the HTML file, AR.js files, and the entire build data folder.

  5. Verify Upload: Ensure that all the files and folders from your WebGL build are present in the directory on the web server.

  6. Domain Configuration: If you have a domain name (e.g., yourdomain.com), you need to configure the domain to point to the directory where your AR app is hosted. You can usually do this from the domain management section of your hosting control panel.

  7. Access Your AR App: After the domain configuration is complete, you can access your AR app by entering your domain name in a web browser (e.g., yourdomain.com).

Testing Locally:

Before uploading to a web server, you can also test your AR app locally on your computer to ensure it works correctly:

  1. Copy the entire contents of your WebGL build folder to a directory on your local computer.

  2. Open the HTML file (e.g., index.html) in a web browser to test the AR experience locally.

  3. Grant camera permissions if prompted.

Testing locally allows you to identify any potential issues before uploading to a web server.

Web Hosting Considerations:

When selecting a web hosting provider or plan, consider the following factors:

  • Storage Space: Ensure the hosting plan provides sufficient storage space for your AR app and other website files.

  • Bandwidth: Check if the hosting plan offers enough bandwidth to handle user traffic and AR content streaming.

  • Performance: Look for hosting options that offer good performance and speed.

  • SSL Certificate: Consider using an SSL certificate to enable HTTPS, which is important for secure data transmission and better search engine rankings.

  • Support: Choose a hosting provider with reliable customer support in case you encounter any issues.

Free Web Hosting Platforms:

there are free web hosting options available that you can use to host your Unity AR app and make it accessible on the web. These free hosting providers often offer limited resources and may have some restrictions, but they can be a good starting point for small projects or testing purposes. Here are a few popular free web hosting options:

  1. GitHub Pages: GitHub Pages allows you to host static websites, including your Unity WebGL build. You can create a repository for your project, upload your build files, and GitHub will automatically serve your website. It's great for open-source projects and personal websites.

    GitHub Pages: Website: pages.github.com

    GitHub Pages Documentation: docs.github.com/en/pages

  2. Netlify: Netlify offers free hosting for static websites with features like continuous deployment and custom domains. You can connect your GitHub repository to Netlify for seamless deployment.

    Netlify: Website: netlify.com

    Netlify Documentation: docs.netlify.com

  3. Vercel: Similar to Netlify, Vercel provides free hosting for static websites with easy deployment through GitHub or other Git providers.

    Vercel: Website: vercel.com

    Vercel Documentation: vercel.com/docs

  4. Surge: Surge is a simple command-line tool that lets you publish your HTML, CSS, and JavaScript files to the web. It's easy to use and doesn't require complex configuration.

    Surge: Website: surge.sh

    Surge Documentation: surge.sh/help

  5. InfinityFree: InfinityFree provides free hosting with unlimited disk space and bandwidth. It supports PHP and MySQL, which could be useful if your AR app requires server-side processing.

    InfinityFree: Website: infinityfree.net

    InfinityFree Knowledge Base: support.infinityfree.ne

  6. 000WebHost: This is a free web hosting service that offers PHP, MySQL, and cPanel. It's suitable for hosting small websites and applications.

    000WebHost: Website: 000webhost.com

    000WebHost Knowledge Base: 000webhost.com/website

  7. Neocities: Neocities offers free hosting for simple websites and has a user-friendly interface.

    Neocities: Website: neocities.org

    Neocities Documentation: neocities.org/support

Remember that while these free hosting options can be convenient, they may come with limitations such as storage space, bandwidth, and performance. Additionally, free hosting might not be suitable for high-traffic or resource-intensive applications. If your Unity AR app gains popularity or requires more resources, you might consider upgrading to a paid hosting plan or exploring other hosting solutions.

When using free hosting, be sure to read and understand the terms of service, as well as any restrictions or limitations that apply to your hosting account. Always keep backups of your files, as some free hosting providers might have data retention policies or unexpected downtimes.

Step 9: Access Your AR Web App

  1. Open a Web Browser:

    • Launch your preferred web browser on your computer or mobile device.

  2. Navigate to the URL:

    • In the address bar of the web browser, enter the URL where you uploaded your HTML file. For example, if you uploaded your HTML file to a domain named "yourdomain.com," you would enter something like: http://yourdomain.com/index.html.

  3. Loading and Initial Prompt:

    • Press "Enter" or hit the "Go" button to navigate to the URL.

    • The browser will start loading the HTML file and the associated AR.js scripts.

    • Depending on the performance of your web server and the complexity of your AR app, it might take a moment to load.

  4. Camera Permissions Prompt:

    • Once the AR web app loads, you will likely see a prompt requesting permission to access your device's camera.

    • The prompt will typically appear near the top of the browser window and may include a message like "This website wants to access your camera" or similar wording.

    • Click or tap on the permission prompt to grant access to the camera.

  5. Camera Access Confirmation:

    • After granting camera permissions, the AR experience should start using your device's camera to display the augmented reality content.

    • You might see an overlay on the screen that combines the real-world view captured by the camera with the virtual AR objects rendered by your Unity AR app.

  6. Interacting with the AR Experience:

    • Depending on how you designed your Unity AR app, you can interact with the AR objects by moving your device around to explore the virtual content within the real environment.

  7. Navigation and Controls:

    • You can navigate within the AR experience using the device's movement and orientation.

    • Some AR apps might include on-screen controls or gestures to interact with virtual objects.

    • Use touch, taps, swipes, or other gestures as instructed by your AR app to explore and interact with the augmented reality content.

  8. Enjoy the AR Experience:

    • Explore the AR scene, interact with virtual objects, and immerse yourself in the augmented reality environment.

It's important to note that the process of accessing and interacting with your AR web app may vary slightly depending on the web browser and device you are using. Some browsers might have slightly different UI elements or behaviors for granting camera permissions.

Step 10: Testing and Debugging

  1. Device and Browser Testing:

    • Test your AR web app on various devices, including smartphones, tablets, laptops, and desktop computers, to ensure compatibility across different screen sizes and orientations.

    • Use different web browsers such as Chrome, Firefox, Safari, and Edge to verify that your AR experience works consistently.

  2. Camera and AR Object Interaction:

    • Test the AR app's camera tracking and interaction with virtual objects to ensure they respond accurately to device movements and gestures.

    • Verify that AR markers or images are recognized and trigger the appropriate AR content.

  3. Performance and Responsiveness:

    • Evaluate the performance of your AR experience by checking for smooth rendering, minimal latency, and responsive interactions.

    • Pay attention to any delays or glitches that may affect the user experience.

  4. Debugging with Browser Developer Tools:

    • Use browser developer tools to inspect elements, view console logs, and debug JavaScript errors that may occur during runtime.

    • Access the browser's developer console to diagnose and fix any issues that arise.

Step 11: WebGL Limitations

  1. Performance Differences:

    • WebGL-based AR experiences may not achieve the same level of performance as native applications, especially for complex scenes with high-resolution textures and detailed 3D models.

    • Keep the scene complexity in check to ensure optimal performance across a range of devices.

  2. Compatibility Challenges:

    • Compatibility can vary across different browsers and devices. Some browsers might offer better support for WebGL and AR.js than others.

    • It's important to thoroughly test your AR app on multiple platforms to identify and address any compatibility issues.

  3. Device and Browser Limitations:

    • Not all devices and browsers support WebGL or AR.js. Some older devices or browsers may experience limitations or may not be able to run the AR experience at all.

  4. Resource Usage:

    • WebGL content, including AR experiences, consumes system resources such as memory and CPU power. Be mindful of the resources your AR app requires, as it may affect the overall performance of the user's device.

  5. Network Dependencies:

    • WebGL-based AR apps require a stable internet connection to load the necessary assets, including 3D models and textures. Users with slow or unreliable internet connections might experience delays or incomplete loading.

  6. Security Considerations:

    • WebGL content runs within the context of a web browser, which means there are security considerations to keep in mind. Always use secure connections (HTTPS) to ensure data privacy and prevent potential security vulnerabilities.