AR project built by WebGL show a black sreen.

I am a new developer of unity.

My purpose is to make a AR project published by WebGL.

My development environment is Macbook M1 Pro.

To make that, I create a new project with 3D template.

And, add a AR Session Origin, AR Session, AR Default Plane to hierarchy like a below picture.

8471681--1125827--upload_2022-9-28_16-39-55.png

AR Session Origin. contains these component like this.

8471681--1125839--upload_2022-9-28_16-42-30.png

And, the building setting is like this.

And Player Setting is like this. I just disable Auto Graphics API for WebGL 2.0.

After build, I use react-webgl-unity library to publish a web page.

With build files named build.data.unityweb, build.framework.js.unityweb, build.loader.js, build.wasm.unityweb, I configed App instance like this.

import { useRef } from "react";
import { Unity, useUnityContext } from "react-unity-webgl";

function UnityTest() {
  const {
    unityProvider,
    isLoaded,
    loadingProgression,
  } = useUnityContext({
    codeUrl: '/build/build.wasm.unityweb',
    dataUrl: '/build/build.data.unityweb',
    frameworkUrl: '/build/build.framework.js.unityweb',
    loaderUrl: '/build/build.loader.js',
    webglContextAttributes: {
      preserveDrawingBuffer: true,
    },
  });

  const loadingPercentage = Math.round(loadingProgression * 100);
  const canvasRef = useRef<HTMLCanvasElement>(null);

  return (
    <div className="container">
      {isLoaded === false && (
        <div className="loading-overlay">
          <p>Loading... ({loadingPercentage}%)</p>
        </div>
      )}
      <Unity
        className="unity"
        unityProvider={unityProvider}
        style={{ border: "1px solid red", height: 400, width: 500 }}
        devicePixelRatio={window.devicePixelRatio}
        ref={canvasRef}
      />
    </div>
  );
}

export { UnityTest };

With npm start command, the web page is published correctly. But, the unity dom is appeared black screen…

And the error message in console is this.

01a8c287-e29d-4dad-abdf-b57c2999a28c:3 No active UnityEngine.XR.ARSubsystems.XRSessionSubsystem is available. Please ensure that a valid loader configuration exists in the XR project settings.

_JS_Log_Dump @ 01a8c287-e29d-4dad-abdf-b57c2999a28c:3
01a8c287-e29d-4dad-abdf-b57c2999a28c:3 No active UnityEngine.XR.ARSubsystems.XRPlaneSubsystem is available. Please ensure that a valid loader configuration exists in the XR project settings.

_JS_Log_Dump @ 01a8c287-e29d-4dad-abdf-b57c2999a28c:3
01a8c287-e29d-4dad-abdf-b57c2999a28c:3 No active UnityEngine.XR.ARSubsystems.XRCameraSubsystem is available. Please ensure that a valid loader configuration exists in the XR project settings.

_JS_Log_Dump @ 01a8c287-e29d-4dad-abdf-b57c2999a28c:3
01a8c287-e29d-4dad-abdf-b57c2999a28c:3 No active UnityEngine.XR.XRInputSubsystem is available. Please ensure that a valid loader configuration exists in the XR project settings.

What should I do to watch a AR camera in web browser(chrome)??

8471681--1125839--upload_2022-9-28_16-42-30.png

1 Like

Unity does not support WebXR/WebAR sadly

We can’t recommend any, but there are third-party WebXR exporters available for Unity projects that you might want to try.

OMG… thats a bad news…

In that case, can WebXR be compatible to all kinds of browser? For example, android chrome, ios chrome, safari and so on…

Go with the Zappar Universal AR unity tools - they are fairly good. They only allow a 10mb zipped project on the free tier but it’s enough for mucking about with. Works on all devices which is good.

Here I collect Unity Assets that allow to run AR in WebGL.

Current list of Assets:

  • [Universal AR (UAR) SDK by Zappar Limited
  • [Augmented Reality WebGL — Image Tracking WebAR]
  • [Imagine WebAR - World Tracker - WebGL - Plane Detection]