Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-08-09 08:21:24 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Position and angle 3D notifications in lower part of view

Browse source
This commit is contained in:
David Rowe 2015-01-21 21:34:34 -08:00
parent 00de7062cc
commit ef7ea0eaa6
1 changed files with 35 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
examples/notifications.js
View file

@ -89,8 +89,11 @@ var myAlpha = [];
var arrays = []; var arrays = [];
var isOnHMD = false, var isOnHMD = false,
ENABLE_VR_MODE = "Enable VR Mode", ENABLE_VR_MODE = "Enable VR Mode",
NOTIFICATIONS_3D_DISTANCE = 0.6, // Distance from avatar position. NOTIFICATIONS_3D_DIRECTION = 0.0, // Degrees from avatar orientation.
NOTIFICATIONS_3D_ELEVATION = 0.0, // Height of top middle of top notification relative to avatar eyes. NOTIFICATIONS_3D_DISTANCE = 0.6, // Horizontal distance from avatar position.
NOTIFICATIONS_3D_ELEVATION = -0.8, // Height of top middle of top notification relative to avatar eyes.
NOTIFICATIONS_3D_YAW = 0.0, // Degrees relative to notifications direction.
NOTIFICATIONS_3D_PITCH = -60.0, // Degrees from vertical.
NOTIFICATION_3D_SCALE = 0.002, // Multiplier that converts 2D overlay dimensions to 3D overlay dimensions. NOTIFICATION_3D_SCALE = 0.002, // Multiplier that converts 2D overlay dimensions to 3D overlay dimensions.
NOTIFICATION_3D_BUTTON_WIDTH = 40 * NOTIFICATION_3D_SCALE, // Need a little more room for button in 3D. NOTIFICATION_3D_BUTTON_WIDTH = 40 * NOTIFICATION_3D_SCALE, // Need a little more room for button in 3D.
overlay3DDetails = []; overlay3DDetails = [];
@ -149,19 +152,33 @@ function fadeOut(noticeOut, buttonOut, arraysOut) {
} }
function calculate3DOverlayPositions(noticeWidth, noticeHeight, y) { function calculate3DOverlayPositions(noticeWidth, noticeHeight, y) {
// Calculates overlay positions and orientations in avatar coordinates.
var noticeY, var noticeY,
originOffset,
notificationOrientation,
notificationPosition, notificationPosition,
buttonPosition; buttonPosition;
noticeY = NOTIFICATIONS_3D_ELEVATION - y * NOTIFICATION_3D_SCALE - noticeHeight / 2; // Notification plane positions
notificationPosition = { x: 0, y: noticeY, z: -NOTIFICATIONS_3D_DISTANCE }; noticeY = -y * NOTIFICATION_3D_SCALE - noticeHeight / 2;
buttonPosition = { notificationPosition = { x: 0, y: noticeY, z: 0 };
x: (noticeWidth - NOTIFICATION_3D_BUTTON_WIDTH) / 2, buttonPosition = { x: (noticeWidth - NOTIFICATION_3D_BUTTON_WIDTH) / 2, y: noticeY, z: 0.001 };
y: noticeY,
z: -NOTIFICATIONS_3D_DISTANCE + 0.001 // Rotate plane
}; notificationOrientation = Quat.fromPitchYawRollDegrees(NOTIFICATIONS_3D_PITCH,
NOTIFICATIONS_3D_DIRECTION + NOTIFICATIONS_3D_YAW, 0);
notificationPosition = Vec3.multiplyQbyV(notificationOrientation, notificationPosition);
buttonPosition = Vec3.multiplyQbyV(notificationOrientation, buttonPosition);
// Translate plane
originOffset = Vec3.multiplyQbyV(Quat.fromPitchYawRollDegrees(0, NOTIFICATIONS_3D_DIRECTION, 0),
{ x: 0, y: 0, z: -NOTIFICATIONS_3D_DISTANCE });
originOffset.y += NOTIFICATIONS_3D_ELEVATION;
notificationPosition = Vec3.sum(originOffset, notificationPosition);
buttonPosition = Vec3.sum(originOffset, buttonPosition);
return { return {
notificationOrientation: notificationOrientation,
notificationPosition: notificationPosition, notificationPosition: notificationPosition,
buttonPosition: buttonPosition buttonPosition: buttonPosition
}; };
@ -173,15 +190,11 @@ function calculate3DOverlayPositions(noticeWidth, noticeHeight, y) {
function notify(notice, button, height) { function notify(notice, button, height) {
var noticeWidth, var noticeWidth,
noticeHeight, noticeHeight,
notificationPosition,
buttonPosition,
positions, positions,
position3D,
rotation3D,
last; last;
if (isOnHMD) { if (isOnHMD) {
// Calculate 3D values using 2D overlay properties. // Calculate 3D values from 2D overlay properties.
noticeWidth = notice.width * NOTIFICATION_3D_SCALE + NOTIFICATION_3D_BUTTON_WIDTH; noticeWidth = notice.width * NOTIFICATION_3D_SCALE + NOTIFICATION_3D_BUTTON_WIDTH;
noticeHeight = notice.height * NOTIFICATION_3D_SCALE; noticeHeight = notice.height * NOTIFICATION_3D_SCALE;
@ -199,26 +212,13 @@ function notify(notice, button, height) {
button.isFacingAvatar = false; button.isFacingAvatar = false;
positions = calculate3DOverlayPositions(noticeWidth, noticeHeight, notice.y); positions = calculate3DOverlayPositions(noticeWidth, noticeHeight, notice.y);
notificationPosition = positions.notificationPosition;
buttonPosition = positions.buttonPosition;
rotation3D = MyAvatar.orientation;
position3D = Vec3.multiplyQbyV(rotation3D, notificationPosition);
position3D = Vec3.sum(MyAvatar.getDefaultEyePosition(), position3D);
notice.position = position3D;
notice.rotation = rotation3D;
position3D = Vec3.multiplyQbyV(rotation3D, buttonPosition);
position3D = Vec3.sum(MyAvatar.getDefaultEyePosition(), position3D);
button.position = position3D;
button.rotation = rotation3D;
notifications.push((Overlays.addOverlay("text3d", notice))); notifications.push((Overlays.addOverlay("text3d", notice)));
buttons.push((Overlays.addOverlay("billboard", button))); buttons.push((Overlays.addOverlay("billboard", button)));
overlay3DDetails.push({ overlay3DDetails.push({
notificationPosition: notificationPosition, notificationOrientation: positions.notificationOrientation,
buttonPosition: buttonPosition, notificationPosition: positions.notificationPosition,
buttonPosition: positions.buttonPosition,
width: noticeWidth, width: noticeWidth,
height: noticeHeight height: noticeHeight
}); });
@ -350,6 +350,7 @@ function update() {
defaultEyePosition, defaultEyePosition,
avatarOrientation, avatarOrientation,
notificationPosition, notificationPosition,
notificationOrientation,
buttonPosition, buttonPosition,
positions, positions,
i, i,
@ -375,6 +376,7 @@ function update() {
Overlays.editOverlay(buttons[i], { x: buttonLocationX, y: locationY + 12.0 }); Overlays.editOverlay(buttons[i], { x: buttonLocationX, y: locationY + 12.0 });
if (isOnHMD) { if (isOnHMD) {
positions = calculate3DOverlayPositions(overlay3DDetails[i].width, overlay3DDetails[i].height, locationY); positions = calculate3DOverlayPositions(overlay3DDetails[i].width, overlay3DDetails[i].height, locationY);
overlay3DDetails[i].notificationOrientation = positions.notificationOrientation;
overlay3DDetails[i].notificationPosition = positions.notificationPosition; overlay3DDetails[i].notificationPosition = positions.notificationPosition;
overlay3DDetails[i].buttonPosition = positions.buttonPosition; overlay3DDetails[i].buttonPosition = positions.buttonPosition;
} }
@ -405,10 +407,11 @@ function update() {
for (i = 0; i < notifications.length; i += 1) { for (i = 0; i < notifications.length; i += 1) {
notificationPosition = Vec3.sum(defaultEyePosition, notificationPosition = Vec3.sum(defaultEyePosition,
Vec3.multiplyQbyV(avatarOrientation, overlay3DDetails[i].notificationPosition)); Vec3.multiplyQbyV(avatarOrientation, overlay3DDetails[i].notificationPosition));
notificationOrientation = Quat.multiply(avatarOrientation, overlay3DDetails[i].notificationOrientation);
buttonPosition = Vec3.sum(defaultEyePosition, buttonPosition = Vec3.sum(defaultEyePosition,
Vec3.multiplyQbyV(avatarOrientation, overlay3DDetails[i].buttonPosition)); Vec3.multiplyQbyV(avatarOrientation, overlay3DDetails[i].buttonPosition));
Overlays.editOverlay(notifications[i], { position: notificationPosition, rotation: avatarOrientation }); Overlays.editOverlay(notifications[i], { position: notificationPosition, rotation: notificationOrientation });
Overlays.editOverlay(buttons[i], { position: buttonPosition, rotation: avatarOrientation }); Overlays.editOverlay(buttons[i], { position: buttonPosition, rotation: notificationOrientation });
} }
} }
} }