Introduction Last updated: 2023-03-21

WebXR for WebGL is a plugin for Unity game engine that helps you build AR Experiences and run them in web browsers. You can easily create AR experiences or even AR game that interact realistically with objects and environments.

Github Code Example:

You can embed your code snippets using Github gists

Key Features

With WebXR for WebGL plugin, the following AR Experiences are available to you:

Supported Devices

Currently, only the Chrome browser on Android devices is fully supported. Some features may not work on iOS devices or other browsers. You can find more details in the features descriptions sections (Targets Recognition, Targets Capture, Face Recognition, Surface Recognition, AR Geolocation ).

Dependencies

Plugin is based on MindAR and Three.js

Also for local debug server and dot mind compiler NodeJS required

Getting Started

To use the WebXR for WebGL plugin, you will need to download the latest release package from Github or Unity Asset Store and import it to the empty Unity project.

Note

The WebXR for WebGL plugin has been developed with Unity 2021.3.13f1 using the URP (Universal Render Pipeline). However, URP is not necessary. In addition, some features of URP (such as Post-Processing and HDR) are not supported in the plugin.

Preparations

After installing the plugin (from the Asset store or as a package), "Qualium-Systems" and "WebGLTemplates" folders will appear in the Assets folder. Then in top left menu press WebXR Plugin -> Unpack utils

It will create "WebXRPlugin" folder in the root of your project.

Dot Mind Compiler

In case if you will create Targets Recognition application you should prepare Dot Mind Compiler

  • Make sure NodeJS is installed.
  • Go to root directory of your project. Then go to WebXRPlugin/Compiler
  • Double click on Compile.sh bash script.
  • After compilation new files will be created in the folder.
  • Depends on your system you need DotMindCompiler-win.exe for Windows, DotMindCompiler-linux for Linux or DotMindCompiler-macos for macOS.

Local debug

In case if you want to create local https server for debugging you can compile it.

  • Make sure NodeJS is installed.
  • Go to root directory of your project. Then go to WebXRPlugin/local_debug
  • Double click on Compile.sh bash script.
  • After compilation new files will be created in the folder.
  • Depends on your system you need app-win.exe for Windows, app-linux for Linux or app-macos for macOS. After you make the build, copy and paste the file you need into the root of the build folder.
  • Run the file that you pasted into the build folder and open the address from the opened console window in the browser on your phone.

Next Steps

Now you can select the feature you want to implement.

Target Recognition

Target Tracking allows AR apps to detect, track, and augment 2D images. The Multiple Target functionality enables the tracking of more than one image at a time.

Device Support

This function works both on Android (Chrome browser) and iOS devices.

Scene Setup

  • In Hierarchy press 'Righ mouse button (RMB)', select 'WebXR Plugin' from the drop-down list, then select the 'Targets Tracking' option from the next drop-down list.
  • The 'TargetsController' game object has been created. As you can see, there are some errors in the console, but at this stage we ignore them.
  • In Hierarchy press 'Righ mouse button (RMB)', select 'WebXR Plugin' from the drop-down list, then select 'Misc' from the next drop-down, after that select the 'Target' option from the next drop-down list.
  • Set the created target as the child of the 'AR-Renderer-Scene' game object. After that, select the 'TargetController' game object. In Inspector, you can see 'Target Track Controller (Script)' attached to it.
  • Drag and drop the created target into the 'Targets' field of the 'Target Track Controller (Script)' component in Inspector. Now the 'Targets' field contains two targets.
  • Navigate to the'Assets/Compiler/Targets' folder and put your target image into this folder.
  • Now expand the created target in Hierarchy and select the 'WebXR Plugin-Target-Preview' game object. In Inspector, you can see 'Target Preview (Script)' attached to it.
  • Drag and drop your target image into the 'Image' field of the 'Target Preview (Script)' component. Your target image should appear in Scene view. You can use your target image in Scene view as real-world size reference.
  • You can disable the default target in Hierarchy for now.
  • In Hierarchy expand the created target and select the 'Displayer' game object. Set whatever you want to display as the child of this game object. In my case, it will be a default sphere.
  • Enable the default target in Hierarchy if you disabled it earlier.
  • Save your scene. Now open the 'File' menu tab, select 'Build Settings...' from drop-down list, and add your scene to build.
  • Now that the scene is ready we can proceed to the Targets Setup section.

Target Setup

  • Run Dot Mind Compiler and follow to the address from the console window.
  • As you can see, this page is empty. Now we will fix it. Go back to Unity and in Hierarchy select 'TargetController'. In Inspector, press the 'Generate' button of the 'Target Track Controller (Script)' component. If everything is correct, the log message will appear in console. A new scheme has thus been created and saved to the 'Assets/Compiler/Schemas' folder
  • Now go back to your browser and press the 'Refresh data' button. Now you can see all targets on all of your scenes.
  • On this page you can check if everything is okay. If so, press the 'Compile .mind file' button. The process will run and you will see the progress under the button.
  • When the compilation is finished, you will see 'Done!' message. The targets_<<scene index>>.mind file has been created and saved into your 'Assets/Targets' folder.
  • Compiler's page and console window can be closed.
  • Now that targets are ready, we can proceed to the Build section.

Build

  • Open the 'File' menu tab and select the 'Build Settings...' option from the drop-down list.
  • Now switch the build platform to WebGL.
  • Go to 'Player Settings...' and navigate to the 'Resolution and Presentation' tab. Select the 'WebXR Plugin' WebGL Template.
  • If necessary you can set the 'Base href' property. (The base URL to be used throughout the document for relative URLs. Absolute and relative URLs are allowed). Leave it empty for now.
  • Navigate to the 'Other Settings' tab.
  • Uncheck 'Auto Graphic API'.
  • Set 'Lightmap Encoding' to 'Normal Quality'.
  • Navigate to the 'Publishing Settings' tab.
  • Set 'Compression Format' to 'Disabled'.
  • Close settings window.
  • Open the 'File' menu tab, select 'Build Settings...' from the drop-down list, in the opened window press the 'Build' button. Select a folder and save your build.
  • Now we can proceed to the Local Debug section.

Target Capture

Target tracking allows AR applications to detect, track, and augment 2D images captured by a user (e.g. credit card, sticker, etc.).

Device Support

This function works both on Android (Chrome browser) and iOS devices.

Scene Setup

  • In Hierarchy press 'Righ mouse button (RMB)', from the drop-down list select 'WebXR Plugin', then select the 'Custom Target Tracking' option from the next drop-down list.
  • In Hierarchy expand 'CustomTargetController', then expand 'Target_1' and select the 'Displayer' game object. Set whatever you what to display as the child of this game object. In my case, it will be a cube.
  • You can use the "checker" texture in the Scene view as the real-world size reference.
  • Save your scene. After that open the 'File' menu tab, select 'Build Settings...' from the drop-down list, and add your scene to the build.
  • Now we can proceed to the UI Setup section.

UI Setup

  • In the Hierarchy press 'Righ mouse button (RMB)', select 'UI' from the drop-down list, then select 'Button' from the next drop-down list.
  • Select the created button and in the Inspector find the 'On click ()' field of the 'Button' component.
  • Press the '+' sign. An option will be created.
  • Drag and drop the 'CustomTargetController' game object from Hierarchy into the 'Object' field of the created option. Select 'CustomTargetTrackController', athen select 'Capture Target ()' from next drop-down list.
  • Now we can proceed to the Build section.

Build

  • Open the 'File' menu tab and select the 'Build Settings...' option from the drop-down list.
  • Now switch the build platform to WebGL.
  • Go to 'Player Settings...' and navigate to the 'Resolution and Presentation' tab. Select the 'WebXR Plugin' WebGL Template.
  • If necessary you can set the 'Base href' property. (The base URL to be used throughout the document for relative URLs. Absolute and relative URLs are allowed). Leave it empty for now.
  • Navigate to the 'Other Settings' tab.
  • Uncheck 'Auto Graphic API'.
  • Set 'Lightmap Encoding' to 'Normal Quality'.
  • Navigate to the 'Publishing Settings' tab.
  • Set 'Compression Format' to 'Disabled'.
  • Close settings window.
  • Open the 'File' menu tab, select 'Build Settings...' from the drop-down list, in the opened window press the 'Build' button. Select a folder and save your build.
  • Now we can proceed to the Local Debug section.

Face Recognition

AR Face Recognition allows you to render digital 3D content over human faces and recognize their facial expressions to use in the blendshapes system to animate 3D models.

Device Support

This function works both on Android (Chrome browser) and iOS devices.

Scene Setup

  • In Hierarchy, press 'Righ mouse button (RMB)', select 'WebXR Plugin' from the drop-down list, then select the 'Custom Target Tracking' option from the next drop-down list.
  • In Hierarchy expand 'FaceController', after that expand 'AR-Renderer-Scene'. Set whatever you what to display as child of this game object. In my case I will use the default facemesh model.
  • You can use facemesh in Scene view as real-world size reference.
  • Now we can proceed to Build section to test our build, or proceed to Blendshapes section to learn more about the blendshapes system.

Blendshapes

  • In Hierarchy, press 'Righ mouse button (RMB)', select 'WebXR Plugin' from the drop-down list, then select 'Misc' from the next drop-down list, after that select the 'BlendShapesSystem' option from the last drop-down list.
  • In Hierarchy, select 'FaceController'. Drag and drop created 'BlendShapeSystem' into the 'AR Blend Shape Controller' field and enable the 'Use Blend Shapes' option in Inspector.
  • Done. Now you need to create a script that will contain all the settings for this model. You can use the prepared script 'Demo Face Tracking' located in the 'Assests/WebXR Plugin/Scripts' folder. You will find the settings for it on the demo scene 'FaceTrackingBlendShapesExample'.

    • Note

    Note that in the sample scene all blendshapes that can be processed are set up. If you don't like the performance of a particular blendshape, you can try to change the points used there, or the multiplier. But if you are satisfied with the configuration, you can copy all the settings into your script or use the demo script.

  • For more detailed information check 'Blendshapes_Readme' file located in 'Assets/WebXR Plugin/Docs' folder.
  • Now we can proceed to the Build section.

Build

  • Open the 'File' menu tab and select the 'Build Settings...' option from the drop-down list.
  • Now switch the build platform to WebGL.
  • Go to 'Player Settings...' and navigate to the 'Resolution and Presentation' tab. Select the 'WebXR Plugin' WebGL Template.
  • If necessary you can set the 'Base href' property. (The base URL to be used throughout the document for relative URLs. Absolute and relative URLs are allowed). Leave it empty for now.
  • Navigate to the 'Other Settings' tab.
  • Uncheck 'Auto Graphic API'.
  • Set 'Lightmap Encoding' to 'Normal Quality'.
  • Navigate to the 'Publishing Settings' tab.
  • Set 'Compression Format' to 'Disabled'.
  • Close settings window.
  • Open the 'File' menu tab, select 'Build Settings...' from the drop-down list, in the opened window press the 'Build' button. Select a folder and save your build.
  • Now we can proceed to the Local Debug section.

Surface Recognition

The surface recognition technology allows you to recognize surfaces and place 3D objects on them. It also allows you to use your device as a controller to move around the Unity scene.

Device Support

Unfortunately, iOS does not have full support for WebXR technology, so it may not work on iOS devices. Stay tuned for future updates.

Scene Setup

  • In Hierarchy, press 'Righ mouse button (RMB)', select 'WebXR Plugin' from the drop-down list, then select the 'Markers Tracking' option from the next drop-down list.
  • To test surface recognition, we have to do some preparations. Navigate to 'Assets/WebXR Plugin/Scripts'. Now select the 'MarkerController' game object and drag and drop the 'ObjectSpawner' script from the 'Assets/WebXR Plugin/Scripts' folder into the Inspector window.

    • Note

    This controller uses the user's device to move the camera around the Unity scene. If you want to use this option instead of surface recognition, replace the HitPoint game object with an empty game object (Don't forget to set it into the 'Hit Point' field of the 'MarkerController' game object's, the 'MarkerTrackController (Script)' component). To test it, place some game objects on the scene. In my case, these will be several primitives. After that, you can proceed to the Build section.

  • Create a prefab and drag and drop it into the 'Prefab' field of the 'Object Spawner (Script)' component. In my case, it will be the default cube.
  • Now we can proceed to the UI Setup section.

UI Setup

  • In Hierarchy, press 'Righ mouse button (RMB)', select 'UI' from the drop-down list, then select 'Button' from the next drop-down list.
  • Select the created button and in Inspector find the 'On click ()' field of the 'Button' component.
  • Press the '+' sign, and an option will be created.
  • Drag and drop the 'MarkerController' game object from Hierarchy into the 'Object' field of the created option. Select 'ObjectSpawner', and then select 'Spawn Object ()' from the drop-down list.
  • Now we can proceed to the Build section.

Build

  • Open the 'File' menu tab and select the 'Build Settings...' option from the drop-down list.
  • Now switch the build platform to WebGL.
  • Go to 'Player Settings...' and navigate to the 'Resolution and Presentation' tab. Select the 'WebXR Plugin' WebGL Template.
  • If necessary you can set the 'Base href' property. (The base URL to be used throughout the document for relative URLs. Absolute and relative URLs are allowed). Leave it empty for now.
  • Navigate to the 'Other Settings' tab.
  • Uncheck 'Auto Graphic API'.
  • Set 'Lightmap Encoding' to 'Normal Quality'.
  • Navigate to the 'Publishing Settings' tab.
  • Set 'Compression Format' to 'Disabled'.
  • Close settings window.
  • Open the 'File' menu tab, select 'Build Settings...' from the drop-down list, in the opened window press the 'Build' button. Select a folder and save your build.
  • Now we can proceed to the Local Debug section.

AR Geolocation

AR Geolocation allows developers to create games based on geolocation tracking or attach interactive digital content to geo-based markers.

Device Support

Unfortunately, iOS does not have full support for WebXR technology, so it may not work on iOS devices. Stay tuned for future updates.

Scene Setup

  • In Hierarchy, press 'Righ mouse button (RMB)', select 'WebXR Plugin' from the drop-down list, then select the 'Geolocation Tracking' option from the next drop-down list.
  • It's time to add locations. In Hierarchy, press 'Righ mouse button (RMB)', select 'WebXR Plugin' from the drop-down list, then select 'Misc' from the next drop-down list, at last select the 'Location' and 'Arrow' options from the next drop-down list.
  • In Hierarchy, expand 'GeolocationController' and set the created 'GeolocationLocation' game object as the child of the 'Locations' game object.
  • Expand the 'ND' game object and set the created 'GeolocationArrow' game object as the child of the 'Arrows' game object.
  • Drag and drop created 'GeolocationLocation' into the 'Location' field of the created 'GeolocationArrow' game object, the 'Arrow (Script)' component.
  • Select the created location and set 'name', 'latitude', 'longitude'. If you want to use altitude, set altitude and 'Use Altitude' boolean to 'true').
  • Also, you can set whatever you want to display as the child of the created location. In this case, the game object will appear at your location coordinates.
  • Select 'LocationManager' and drag and drop the created location into the 'Locations' field and the created arrow into the 'Arrows' field in Inspector.
  • Now we can proceed to the Build section.

Build

  • Open the 'File' menu tab and select the 'Build Settings...' option from the drop-down list.
  • Now switch the build platform to WebGL.
  • Go to 'Player Settings...' and navigate to the 'Resolution and Presentation' tab. Select the 'WebXR Plugin' WebGL Template.
  • If necessary you can set the 'Base href' property. (The base URL to be used throughout the document for relative URLs. Absolute and relative URLs are allowed). Leave it empty for now.
  • Navigate to the 'Other Settings' tab.
  • Uncheck 'Auto Graphic API'.
  • Set 'Lightmap Encoding' to 'Normal Quality'.
  • Navigate to the 'Publishing Settings' tab.
  • Set 'Compression Format' to 'Disabled'.
  • Close settings window.
  • Open the 'File' menu tab, select 'Build Settings...' from the drop-down list, in the opened window press the 'Build' button. Select a folder and save your build.
  • Now we can proceed to the Local Debug section.