AnnaVitali / ARCollaborativeApplication-Babylon.js-Croquet.io

Repository objective is to create a collaborative AR experience thanks to the use of WebXR, enabling multiple user to see and interact with holograms visible in the same point in space thanks to the usage of a marker.

ARCollaborativeApplication-Babylon.js-Croquet.io

This repository contains some examples of applications made using Babylon.js and Croquet.io.

In detail the examples realized have as objective to create a collaborative AR experience thanks to the use of WebXR, enabling multiple user to see and interact with holograms visible in the same point in space thanks to the usage of a marker.

WebXR Image Tracking

This example shows how it is possible to create a collaborative application that allows users to see a hologram at the same point of space thanks to the use of a target and the API provided by WebXR that is accessed through Babylon.js.

You can find the example inside the directory WebXRImageTracking.

To test the example this image target was used:

Known issue

When a new user joins in an already started session, for which manipulations have already been carried out on the hologram, will start not synchronized, but will see the application in its initial state.

Zappar Image Tracking

This example shows how it is possible to create a collaborative application that allows users to see a hologram at the same point of space thanks to the use of a target and the API provided by Zappar used with Babylon.js.

You can find the example inside the directory ZapparImageTracking.

Compared to the previous example in this case you have the advantage that if a user enters a session already started finds the state of the application as it is currently and continues to see the hologram from its point of view. In this case, moreover, the positioning of the hologram is more precise and the coordinates of it are expressed according to the target, see the code for more details.

To test the example this image target was used:

How to run the examples

Since WebXR only works on secure sites (https) or localhost, in order to launch the application with a specific IP address, you must associate a certificate to the web page. To do this you can use openssl and execute the following commands in the application directory:

openssl genrsa -out private_key.pem

openssl req -new -key private_key.pem -out csr.pem

openssl x509 -req -days 9999 -in csr.pem -signkey private_key.pem -out cert.pem

Once you have created the certificate you can launch the application by running the following commands:

npm install

node app.js