Display web application output with Oculus rift

I have a web application that creates a 3D scene using WebGL. I am wondering if it is possible to show this scene using Oculus rift? How difficult is it?

+5
source share
4 answers

There are two main components for rendering in Rift, head tracking and distortion.

Distortion is usually done using the Oculus SDK using OpenGL or Direct3D, but it can be implemented in Javascript. Here you can see an example here . This page uses a pre-baked set of vertices from distortions extracted from the Oculus SDK, suitable for use with the DK1 model.

Tracking the head is much more difficult because it requires access to equipment or the runtime associated with the equipment. Mozilla is working on a set of APIs to access head tracking and possibly retrieve distortion parameters, but it looks far from stable.

Three.js has examples that want to support the experimental VR apis, as well as examples that use something called ouclus-rest.

It basically boils down to the following: if you want to make VR with Javascript, you will either have to turn your own decision around, or try to get into a moving target, or get patience.

+1
source

Instead of using third-party software to access tracking data, I would recommend basing your implementation on the experimental WebVR APIs that are available in custom builds of Firefox and Chrome .

Assuming WebVR and VR in general get enough grip, this is probably the safest bet.

+3
source

Overview

As long as I understand that this is an old question, and there is a lot more information about it now, I will send an answer anyway, since the previously published answers are not updated.

I created a basic plunker that illustrates what you need to do to get the three.js, webvr, and oculus commands working. Note. I couldn’t fully work in full screen mode under the plunger, but if you run the plunk with oculus Rift (OR) in mozilla nightly build you should see that head rotation works. You can get the full VR experience if you run it outside the plunker.

I think another good reference app is RiftSketch . This is what I first used to learn how to get OR to work in a browser (this is actually an application written by the original poster of this question).

Here are the relevant fragments of webvr that will differ from the standard three.js application:

this.controls = new THREE.VRControls(this.camera); this.effect = new THREE.VREffect(this.renderer); this.effect.setSize(this.width, this.height); this.vrManager = new WebVRManager(this.renderer, this.effect); 

and in the render function:

 this.controls.update(); this.renderer.render(this.scene, this.camera); if (this.vrManager.isVRMode()) { this.effect.render(this.scene, this.camera); } else { this.renderer.render(this.scene, this.camera); } 

Required Modules

Another thing you need to do is provide the following four libraries (in addition to three.js):

  • VRControls.js
  • VREffect.js
  • webvr-manager.js
  • webvr- polyfill.js

VRControls.js and VREffect.js are available from the three.js library under the examples / js / controls and examples / js / effects sections respectively.

Update: I recommend that you get all the libraries from the webvr-templateplate github , since the three.js doesn't seem to have the latest versions.

The other two can be obtained by webvr-template github.

You can directly access the webvr API as described here , but I think it’s much easier to use the support libraries.

Final words

You basically do not need to deal with the Oculus Rift SDK. The only people who need to directly access the SDK API are Unity engine developers and Mozilla API developers.

WebVR creates a common API that attempts to provide a standardized interface for all HMD devices, such as Cardboard, OR and (possibly in the future) Samsung, HTC Vive, leap motion, etc. If you decide to use VRControls and VREffects, you have an additional layer API to make it even easier. This is basically just a bunch of template. After all, I don’t understand that you really understand what really happens behind the scenes. You basically just install it once and never touch it again.

Once you have OR support, then development for your application is pretty much like any other three.js application.

+3
source

How difficult it will be is based on your experience. However, I found a library for connecting Rift to the network (assuming you are headed) that might be of some help: Oculus Bridge

From the site: “The goal of this project is to provide a flexible, easy way to access tracking data and display the configuration for Oculus Rift for use with webGL or any other browser-based content.”

+1
source

Source: https://habr.com/ru/post/1208291/


All Articles