THREE.SimpleDatGui - A Pure WebGL User Interface for THREE.js

BY MARKUS SPRUNCK

For simple WebGL applications based on THREE.js the Google's Chrome Experiment DAT.GUI is a good choice to render a minimal user interface, but there is no simple and reliable way to render DAT.GUI inside the WebGL scene. Oculus Rift Applications need to render the user interface inside the scene to display for both eyes and they need two mouse cursors.

At the moment I know no support of a simple GUI in THREE.js. This was my motivation to develop a simple GUI based on THREE.js, which should be as good as reasonable API compatible with DAT.GUI and has the same Look & Feel. The following article describes THREE.SimpleDatGui the result of these experiments. THREE.SimpleDatGui in standard WebGL and/or in Oculus Rift WebGL applications.

https://www.chromeexperiments.com/experiment/oculus-rift-gui

Expected Results

The First Demo of THREE.SimpleDatGui shows the use in an Oculus Rift WebGL Application

The THREE.SimpleDatGui can be used as simple graphical user interface which is rendered within the THREE.js scene so that it can be displayed in Oculus Rift mode for both eyes. For this also a mouse pointer has to be rendered for both eyes and the standard mouse pointer of the browser has to be hidden.

Just open http://webgl-examples.appspot.com/simple-webgl-gui-oculus-rift/THREE.SimpleDatGuiOculusRiftDemo.html and you should see something like this (adjust the resolution of your browser 50-67%):

To get the sensor data a Oculus Rift Sensor Connector is needed. The Oculus Rift Sensor Connector provides sensor data at http://localhost:8444 and the access from THREE.OculusRiftControls.js happens with JSONP. The performance of this integration is not as fast as some other implementations based on web sockets, but is works without additional browser plug-in.

Execute the following five steps to run with Oculus Rift Sensor Data

Get the project:

Fork project on GitHub (https://github.com/MarkusSprunck/oculus-rift-sensor-connector.git) and/or download the zip (https://github.com/MarkusSprunck/oculus-rift-sensor-connector).

Connect your Oculus Rift DK2 to your computer:

Use the Oculus Configuration Utility to set the Rift Display Mode to Extended Desktop to the HMD.

Start ./target/OculusRiftSensorConnector.jar:

You may use OculusRiftSensorConnector.cmd on Windows. The compiled version expects Java 8 runtime, but it should work also with elder Java versions (maybe you have to change some lines).

Open ./client/THREE.SimpleDatGuiOculusRiftDemo.html:

Chrome Options for Local Development - The Google Chrome browser will not load local file by default due to security reason. When you fork the project and open from file system, start with the command line option --allow-file-access-from-files to load the textures. See also http://www.chrome-allow-file-access-from-file.com/

Activate Connection to Oculus Rift:

Oculus Control is not active by default, because most visitors will not have the Oculus Rift hardware connected when opening. In this case you may use the standard trackbar control to move the scene. To connect to Oculus Rift, just open folder Advanced Options and check Oculus Control Active.

The Second Demo shows THREE.SimpleDatGui in a Standard WebGL Application

It demonstrates the rendering of the GUI inside the scene. This example also work properly on mobile devices (iOS). Just open the following link with Chrome or Firefox: http://webgl-examples.appspot.com/simple-webgl-gui/THREE.SimpleDatGuiDemo.html and you should see something like this:

When you render the GUI inside the scene parts of the scene may be rendered before the user interface.

Use the trackball of your mouse to zoom in the demo applications and the right mouse button to rotate the scene.

Implementation

All the rendering is done in WebGL with THREE.js and without any other additional 3rd party library. The needed includes in your THREE.js application will be:

  • THREE.SimpleDatGui.js and

  • Helvetiker_regular.typeface.js - is part of THREE.js distribution, under the path ".\examples\fonts\"

When SimpleDatGui is used in Oculus Rift applications more components are necessary:

  • THREE.OculusRiftMouse - renders two mouse cursors (the mouse icons are in the folder '.\textures\')

  • THREE.OculusRiftControls - optional to get sensor data from Oculus Rift

Tested Configurations

THREE.SimpleDatGuiOculusRiftDemo.html has been tested with the following browsers on Windows 7 with Oculus Rift:

  • Chrome 43 (~60 FPS)

  • Firefox 38 (~60 FPS)

  • Internet Explorer 11 (~30 FPS, definitely to slow for Oculus Rift mode, but good enough for non Oculus Rift)

THREE.SimpleDatGui has been tested additionally on iOS 8.3 with iPad 2 with the following configurations:

  • Safari (~50 FPS)

  • Chrome (~50 FPS)

Features

Implemented Controls

  • Button - executes a callback function

  • Text-Input - edit a string

  • Value-Input - edit numbers & slider support

  • CheckBox - change a boolean value

  • ComboBox - select a single value from an array of values

Missing Features

  • ColorPicker control

  • Save & restore of values

  • Copy & paste support in text and value controls

  • Slider accepts mouse drag (not only mouse click) [implemented in version 11]

Credits

Equirectangular Pictures

The tree scenes in this demo are licensed under the Creative Commons Attribution-Share Alike 2.0 Generic license. Many thanks to the author Alexandre Duret-Lutz (https://www.flickr.com/people/24183489@N00) from Paris, France for sharing them.

Libraries