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.
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:
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.
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:
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.