Documentation

Learn how to get started

or Go to API Docs

Introduction

Communication & Social Platform

Simbol is the communication and social platform for the Immersive Web. Quickly create a multiuser experience for your 3D site, allowing people to communicate using the extensible Simbol tools.

It focuses on a great experience for everyone, always keeping accessibility, security and privacy at the forefront. This is possible by building on top of decentralized technologies such as Dat, IPFS and Ethereum.

Universal Single Identity

Simbol brings forward the concept of a Virtual Persona, your unique and global identity for everything, both in the digital and the physical world. Only you can own and manage it and choose what to share with each site.

By building on top of uPort, people and organizations can own an easy to use private and secure identity that will work perfectly with the rest of the environment.

Social Virtual Universe

We're helping to bring the power of an extra dimension to the Web. It allows unseen possibilities to how we learn and express ourselves.

Easily create a social WebXR site that can be linked to other Simbol sites, allowing people to move from one to the other seamlessly. It works perfectly in virtual reality (VR). It also provides a basic common locomotion, interaction and physics system.

Quick Setup

Getting started adding Simbol to your site is very easy. First, install it:

npm install --save simbol

Then import it into your project:

import {Simbol} from 'simbol';

Create a Simbol instance with the scene information:

const simbol = new Simbol({ hand: 'left', scene: { canvas: document.querySelector('canvas'), sceneToLoad: 'path/to/my/scene.gltf' } });

Instantiate the Simbol instance:

simbol.init();

Here is a full list of all configuration options

Running a multiVP server

You need to run a WebSockets server and CoTurn for this to work. We're working on a sample project using Docker to make this really easy.

With your server set up, you can now feed that information into Simbol via the configuration object:

const simbol = new Simbol({ scene: { canvas: document.querySelector('canvas'), sceneToLoad: 'path/to/my/scene.gltf' }, virtualPersona: { multiVP: { socketURL: 'wss://yourdomiain/ws', socketPort: '80', config: { iceServers: [ {urls:'stun:stun.l.google.com:19302'}, {urls:'stun:stun1.l.google.com:19302'}, // Google offers some free STUN servers {urls:'stun:yourdomain:3478'}, { urls: 'turn:yourdomain:3478', username: 'test', credential: 'mysecretpassword' } ] } } } }); simbol.init();

User Guide

The first time you visit a Simbol site you can either decide ignore the log in and visit it anonymously, or use the uPort app to scan the log in QR code

Once logged in, your avatar loads and you can start moving around the virtual world and interact with it

Locomotion

For desktop, there is smooth locomotion and teleportation. You can move your avatar around using the WASD keys. For teleportation, use mouse clicks.

For mobile, there is smooth locomotion. If you tap once and rotate, you will look around the virtual world. If you tap twice and rotate, you will move in the direction you are rotating.

In VR, there is teleportation. To activate it, press the corresponding trigger button of your headset's controller.

All teleportation implementations work as follows:

  • Click once to activate teleportation
  • You will see a hit cylinder in either green or red depending on whether you can teleport there or not
  • Once you've picked where you would like to teleport, hold the position for 0.5 seconds and the teleportation will occur
  • While you move the hit cylinder, teleportation will not occur
Interactions

For selection, there's a reticle. With a 3DOF controller (in VR) or 0DOF controller (desktop and mobile), the reticle is tied to your head position. With a 6DOF controller (in VR), the reticle is tied to your preferred hand's controller.

Creating a Virtual Persona

With Simbol, you can have your own identity (or multiple) to move around all Simbol sites. This is not necessary to use Simbol, if you don't sign in to a Simbol site, you'll be able to use the default Anonymous avatar

If you wish to use your own identity, head over to Identity to create and manage your Virtual Persona. This must be done at least once before visiting Simbol sites with your identity

The process is always the same whether it's your first time or not:

  1. Check that you have the uPort app installed
  2. Press the sign in button and scan the QR code with the uPort app
  3. You can then choose a displayname which will be shown to other users only if you decide to once that's implemented
  4. Choose your height so we can position the avatar accordingly
  5. Add the URL that points to the GLTF/GLB file for your avatar
  6. Click 'Save Virtual Persona' which will trigger the mobile app asking you to confirm the new configuration
Avatar Spec

When creating your avatar, there are a few guidelines to follow to make sure it works seamlessly with all Simbol sites

  • The head object MUST be called VirtualPersonaHead
  • The bone for each hand MUST be called VirtualPersonaHandRight and VirtualPersonaHandLeft respectively
  • Simbol can handle several hand gestures. To support them, each hand must have an animation corresponding to each pose. The names of the animations are the following (e.g. "HandLeftOpen" or "HandRightThumb"):
    • `Hand${'Left' or 'Right}Open`
    • `Hand${'Left' or 'Right}Fist`
    • `Hand${'Left' or 'Right}Okay`
    • `Hand${'Left' or 'Right}Point`
    • `Hand${'Left' or 'Right}Thumb`
    • `Hand${'Left' or 'Right}ThumbPoint`

The animations mentioned above correspond to the following 6 gestures that Simbol currently supports:

API Docs