Skip to content

Commit 80d3a35

Browse files
shaoboyangreggman
shaoboyan
authored and
greggman
committedNov 21, 2017
Add UI for Aquarium VR Mode
Add UI for aquarium vr mode. It has features below : 1. Show fps in front of users. User could see current fps in HMD. This feature could be turn off by user in VR menu. 2. VR Menu. It is a mirror of control panel of aquarium. User could call out menu by press any key on keyboard or click any button on their VR controller or gamepad. The menu is a mirror of control panel without "Advanced" label in aquarium. When menu present, user could control cursor(point in front of user view) by their head. When a label is selected, it will close to user. User stares at a label for 1.5 seconds means click and corresponding operation will be adopted.
1 parent 31ce2b0 commit 80d3a35

25 files changed

+1002
-4
lines changed
 

‎aquarium-vr/aquarium-vr.html

+3
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,9 @@
111111
<script type="text/javascript" src="../khronos/webgl-debug.js"></script>
112112
<script type="text/javascript" src="../tdl/base.js"></script>
113113
<script type="text/javascript" src="../aquarium/aquarium-common.js"></script>
114+
<script type="text/javascript" src="utils/vr_text_renderer.js"></script>
115+
<script type="text/javascript" src="utils/gamepad.js"></script>
116+
<script type="text/javascript" src="utils/ui.js"></script>
114117
<script type="text/javascript" src="aquarium-vr.js"></script>
115118
</head>
116119
<body>

‎aquarium-vr/aquarium-vr.js

+54-4
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ var g_requestId;
3636
var g_numFish = [1, 100, 500, 1000, 5000, 10000, 15000, 20000, 25000, 30000];
3737
var g_frameData;
3838
var g_vrDisplay;
39+
var g_vrUi;
3940

4041
//g_debug = true;
4142
//g_drawOnce = true;
@@ -908,7 +909,6 @@ function initialize() {
908909
setupBubbles(particleSystem);
909910
var bubbleTimer = 0;
910911
var bubbleIndex = 0;
911-
912912
var lightRay = setupLightRay();
913913

914914
var then = 0.0;
@@ -1244,15 +1244,21 @@ function initialize() {
12441244
var height = Math.abs(top - bottom);
12451245
var xOff = width * g.net.offset[0] * g.net.offsetMult;
12461246
var yOff = height * g.net.offset[1] * g.net.offsetMult;
1247+
var uiMatrix = new Float32Array(16);
12471248
if (g_vrDisplay && g_vrDisplay.isPresenting && pose.position) {
1248-
// Using head-neck model in VR mode due to unclear distance measurement(vr return position using meters),
1249+
// Using head-neck model in VR mode because of unclear distance measurement(vr return position using meters),
12491250
// user could see around but couldn't move around.
12501251
eyePosition[0] = g.globals.eyeRadius;
12511252
eyePosition[1] = g.globals.eyeHeight;
12521253
eyePosition[2] = g.globals.eyeRadius;
12531254

12541255
fast.matrix4.copy(projection, projectionMatrix);
12551256
calculateViewMatrix(viewInverse, pose.orientation, eyePosition);
1257+
1258+
// Hard coded FPS translation vector and pin the whole UI in front of the user in VR mode. This hard coded position
1259+
// vector used only once here.
1260+
calculateViewMatrix(uiMatrix, pose.orientation, [0, 0, 10]);
1261+
g_vrUi.render(projection, fast.matrix4.inverse(uiMatrix, uiMatrix), [pose.orientation]);
12561262
} else {
12571263
fast.matrix4.frustum(
12581264
projection,
@@ -1276,7 +1282,10 @@ function initialize() {
12761282
target,
12771283
up);
12781284
}
1279-
1285+
var uiMatrix = new Float32Array(16);
1286+
//calculateViewMatrix(uiMatrix, pose.orientation, [0, 0, 10]);
1287+
//g_ui.render(projection, fast.matrix4.inverse(uiMatrix, fast.matrix4.translation(uiMatrix, [0, 0, 6])));
1288+
//var uiMatrix = new Float32Array(16);
12801289
if (g.net.slave) {
12811290
// compute X fov from y fov
12821291
var fovy = math.degToRad(g.globals.fieldOfView * g.net.fovFudge);
@@ -1289,6 +1298,7 @@ function initialize() {
12891298
fast.matrix4.inverse(view, viewInverse);
12901299
fast.matrix4.mul(viewProjection, view, projection);
12911300
fast.matrix4.inverse(viewProjectionInverse, viewProjection);
1301+
//g_ui.render(projection, fast.matrix4.inverse(uiMatrix, fast.matrix4.translation(uiMatrix, [0, 0, 16])));
12921302

12931303
fast.matrix4.copy(skyView, view);
12941304
skyView[12] = 0;
@@ -1700,7 +1710,6 @@ function initialize() {
17001710

17011711
g_fpsTimer.update(elapsedTime);
17021712
fpsElem.innerHTML = g_fpsTimer.averageFPS;
1703-
17041713
gl.colorMask(true, true, true, true);
17051714
gl.clearColor(0,0.8,1,0);
17061715
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
@@ -1711,6 +1720,44 @@ function initialize() {
17111720
}
17121721
g_vrDisplay.getFrameData(g_frameData);
17131722
if (g_vrDisplay.isPresenting) {
1723+
1724+
/* VR UI is enabled in VR Mode. VR UI has two mode, menu mode is the mirror of control panel of
1725+
* aquarium and non-menu mode may presents fps(could be turn off) in front of user. These two
1726+
* mode is controlled by isMenuMode flag and this flag is set by any keyboard event or gamepad
1727+
* button click.
1728+
*/
1729+
1730+
// Set fps and prepare rendering it.
1731+
g_vrUi.setFps(g_fpsTimer.averageFPS);
1732+
1733+
// Query gamepad button clicked event.
1734+
g_vrUi.queryGamepadStatus();
1735+
1736+
if (g_vrUi.isMenuMode) {
1737+
1738+
// When VR UI in menu mode, UI need a cursor to help user do select operation. Currently, cursor uses
1739+
// head-neck model which means a point in front of user and user could move the point by rotating their head(with HMD).
1740+
// A click event will be triggered when user stare at a label 2 seconds.
1741+
// TODO : add gamepad support to control cursor and trigger select event with VR controllers.
1742+
1743+
// Jquery selector description.
1744+
var selectorDescription;
1745+
1746+
// VR UI return whether there is an option been selected in VR mode.
1747+
var clickedLabel = g_vrUi.queryClickedLabel([0, 0, 0], g_frameData.pose.orientation);
1748+
if (clickedLabel != null) {
1749+
if (clickedLabel.isAdvancedSettings) {
1750+
selectorDescription = "#optionsContainer > div:contains(" + clickedLabel.name + ")";
1751+
$(selectorDescription).click();
1752+
} else if (clickedLabel.name == "options") {
1753+
$("#options").click();
1754+
} else {
1755+
selectorDescription = "#setSetting" + clickedLabel.name;
1756+
$(selectorDescription).click();
1757+
}
1758+
}
1759+
}
1760+
17141761
gl.viewport(0, 0, canvas.width * 0.5, canvas.height);
17151762
render(elapsedTime, g_frameData.leftProjectionMatrix, g_frameData.pose);
17161763

@@ -2038,11 +2085,14 @@ var VR = (function() {
20382085
if (g_vrDisplay.capabilities.canPresent) {
20392086
vrButton = addButton("Enter VR", "E", getCurrentUrl() + "/vr_assets/button.png", onRequestPresent);
20402087
}
2088+
g_vrUi = new Ui(gl, g_numFish);
2089+
g_vrUi.load("./vr_assets/ui/config.js");
20412090

20422091
window.addEventListener('vrdisplaypresentchange', onPresentChange, false);
20432092
window.addEventListener('vrdisplayactivate', onRequestPresent, false);
20442093
window.addEventListener('vrdisplaydeactivate', onExitPresent, false);
20452094
window.addEventListener('resize', function() {onResize();}, false);
2095+
window.addEventListener('keydown', function() { g_vrUi.isMenuMode = !g_vrUi.isMenuMode; }, false);
20462096
} else {
20472097
console.log("WebVR supported, but no VRDisplays found.")
20482098
}

‎aquarium-vr/utils/gamepad.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
var gamepads = (function() {
2+
'use strict';
3+
4+
var gamepadAPI = function() {
5+
this.controllers = [];
6+
this.position = [];
7+
this.clicked = false;
8+
this.pressed = false;
9+
}
10+
11+
function getGamepads() {
12+
if (navigator.getGamepads) {
13+
return navigator.getGamepads();
14+
}
15+
return;
16+
}
17+
18+
gamepadAPI.prototype.update = function() {
19+
this.clicked = false;
20+
var gamepads = getGamepads();
21+
if (gamepads) {
22+
for (var id in gamepads) {
23+
if (gamepads[id] && gamepads[id].buttons) {
24+
for (var index in gamepads[id].buttons) {
25+
if (gamepads[id].buttons[index].pressed) {
26+
this.pressed = true;
27+
return;
28+
}
29+
}
30+
if (this.pressed) {
31+
this.clicked = true;
32+
this.pressed = false;
33+
console.log("clicked");
34+
}
35+
}
36+
}
37+
}
38+
}
39+
40+
return gamepadAPI;
41+
})();

0 commit comments

Comments
 (0)