Skip to content

Home

Jump to bottom
Keru Wang edited this page Oct 20, 2021 · 7 revisions

We will slowly add coding instructions for future developers. The entry javascript file is immersive-pre.js.

Network

We are using server-based WebSocket design for synchronization and p2p design for audio transmission.

WebSocket Design

  1. WebSocket client is implemented in websocket-client.js. function connect is designed for WebSocket connection setup, which includes the websocket address and event handler. Especially for onmessage handler, we used EventBus for further process.
  2. Each event has its own handler in event.js. Currently, we have initialize, join, leave, avatar, and webrtc implemented.

TODO

  1. Implemente object in event.js.

WebRTC

The core functionality is mostly written in voip-webrtc.js. We used the official document and this article for reference.

TODO

  1. Record audio stream through webrtc API.
  2. Replay with local audio files.

Rendering

The rendering loop is located at onXRFrame().

How to design the scene

window.scene is created in the beginning. All the objects to be rendered behave as child nodes of the root node (scene). We can load models here if we want our objects to become part of the scene.

How to render the scene

The entry point of the scene renderer is located at window.scene.drawXRFrame(frame, pose);.

How to create a demo with renderList items

To create your own demo, go to the scenes folder, create your own demo javaScript from the demo template, and add your demo content in the this.display. You can find an example of a rotating textured cube in the template. You can find the current texture images and add your own under texture folder. For more functions and shapes you can use, please see renderList.js. You can also change the background environment of your demo by adding a GLTF model to the GLTF folder and set the this.background to the relative path of your .gltf in your demo script.

After you are done with your demo, go to mainScene.js and import your demo. Create a button for your demo by adding its name to window.demoNames. This will create a variable called demoYourDemoNameState. You can then use this to start/stop displaying your demo by calling the loadScene(demoName) and the stopScene(demoName) functions.

Clone this wiki locally