Giter VIP home page Giter VIP logo

annavitali / arcollaborativeapplication-babylon.js-croquet.io Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 1.0 82.42 MB

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.

License: MIT License

JavaScript 94.65% CSS 0.34% HTML 5.01%
babylonjs collaborative croquet webxr zappar

arcollaborativeapplication-babylon.js-croquet.io's Introduction

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.

Alt Text

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.

Alt Text

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.

Alt Text

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.