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

Add web3d overlay for UI surface

Browse source
This commit is contained in:
David Rowe 2018-08-20 10:58:01 +12:00
parent 2c389af751
commit 94041291d5
2 changed files with 70 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
scripts/system/html/tabletRezzer.html Normal file
View file

@ -0,0 +1,21 @@
<!--
tabletRezzer.html
Created by David Rowe on 20 Aug 2018.
Copyright 2018 High Fidelity, Inc.
Distributed under the Apache License, Version 2.0.
See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
Hello world!
</body>
</html>

66
scripts/system/tabletRezzer.js
View file

@ -16,28 +16,39 @@
Script.include("./libraries/utils.js"); Script.include("./libraries/utils.js");
var // Overlay var // Base overlay
proxyOverlay = null, proxyOverlay = null,
TABLET_PROXY_MODEL = Script.resolvePath("./assets/models/tinyTablet.fbx"), PROXY_MODEL = Script.resolvePath("./assets/models/tinyTablet.fbx"),
TABLET_PROXY_DIMENSIONS = { x: 0.0637, y: 0.0965, z: 0.0046 }, // Proportional to tablet proper. PROXY_DIMENSIONS = { x: 0.0637, y: 0.0965, z: 0.0046 }, // Proportional to tablet proper.
TABLET_PROXY_POSITION_LEFT_HAND = { PROXY_POSITION_LEFT_HAND = {
x: 0, x: 0,
y: 0.07, // Distance from joint. y: 0.07, // Distance from joint.
z: 0.07 // Distance above palm. z: 0.07 // Distance above palm.
}, },
TABLET_PROXY_POSITION_RIGHT_HAND = { PROXY_POSITION_RIGHT_HAND = {
x: 0, x: 0,
y: 0.07, // Distance from joint. y: 0.07, // Distance from joint.
z: 0.07 // Distance above palm. z: 0.07 // Distance above palm.
}, },
/* /*
// Aligned cross-palm. // Aligned cross-palm.
TABLET_PROXY_ROTATION_LEFT_HAND = Quat.fromVec3Degrees({ x: 0, y: 180, z: 90 }), PROXY_ROTATION_LEFT_HAND = Quat.fromVec3Degrees({ x: 0, y: 180, z: 90 }),
TABLET_PROXY_ROTATION_RIGHT_HAND = Quat.fromVec3Degrees({ x: 0, y: 180, z: -90 }), PROXY_ROTATION_RIGHT_HAND = Quat.fromVec3Degrees({ x: 0, y: 180, z: -90 }),
*/ */
// Aligned with palm. // Aligned with palm.
TABLET_PROXY_ROTATION_LEFT_HAND = Quat.fromVec3Degrees({ x: 0, y: 180, z: 0 }), PROXY_ROTATION_LEFT_HAND = Quat.fromVec3Degrees({ x: 0, y: 180, z: 0 }),
TABLET_PROXY_ROTATION_RIGHT_HAND = Quat.fromVec3Degrees({ x: 0, y: 180, z: 0 }), PROXY_ROTATION_RIGHT_HAND = Quat.fromVec3Degrees({ x: 0, y: 180, z: 0 }),
// UI overlay.
proxyUIOverlay = null,
PROXY_UI_HTML = Script.resolvePath("./html/tabletRezzer.html"),
PROXY_UI_DIMENSIONS = { x: 0.0577, y: 0.0905 },
PROXY_UI_WIDTH_PIXELS = 150,
METERS_TO_INCHES = 39.3701,
PROXY_UI_DPI = PROXY_UI_WIDTH_PIXELS / (PROXY_UI_DIMENSIONS.x * METERS_TO_INCHES),
PROXY_UI_OFFSET = 0.001, // Above model surface.
PROXY_UI_LOCAL_POSITION = { x: 0, y: 0, z: -(PROXY_DIMENSIONS.z / 2 + PROXY_UI_OFFSET) },
PROXY_UI_LOCAL_ROTATION = Quat.fromVec3Degrees({ x: 0, y: 180, z: 0 }),
// State machine // State machine
PROXY_HIDDEN = 0, PROXY_HIDDEN = 0,
@ -149,7 +160,9 @@
function enterProxyHidden() { function enterProxyHidden() {
if (proxyOverlay) { if (proxyOverlay) {
Overlays.deleteOverlay(proxyUIOverlay);
Overlays.deleteOverlay(proxyOverlay); Overlays.deleteOverlay(proxyOverlay);
proxyUIOverlay = null;
proxyOverlay = null; proxyOverlay = null;
} }
} }
@ -170,18 +183,30 @@
function enterProxyVisible(hand) { function enterProxyVisible(hand) {
proxyHand = hand; proxyHand = hand;
proxyOverlay = Overlays.addOverlay("model", { proxyOverlay = Overlays.addOverlay("model", {
url: TABLET_PROXY_MODEL, url: PROXY_MODEL,
parentID: MyAvatar.SELF_ID, parentID: MyAvatar.SELF_ID,
parentJointIndex: handJointIndex(proxyHand), parentJointIndex: handJointIndex(proxyHand),
localPosition: Vec3.multiply(avatarScale, localPosition: Vec3.multiply(avatarScale,
proxyHand === LEFT_HAND ? TABLET_PROXY_POSITION_LEFT_HAND : TABLET_PROXY_POSITION_RIGHT_HAND), proxyHand === LEFT_HAND ? PROXY_POSITION_LEFT_HAND : PROXY_POSITION_RIGHT_HAND),
localRotation: proxyHand === LEFT_HAND ? TABLET_PROXY_ROTATION_LEFT_HAND : TABLET_PROXY_ROTATION_RIGHT_HAND, localRotation: proxyHand === LEFT_HAND ? PROXY_ROTATION_LEFT_HAND : PROXY_ROTATION_RIGHT_HAND,
dimensions: Vec3.multiply(avatarScale, TABLET_PROXY_DIMENSIONS), dimensions: Vec3.multiply(avatarScale, PROXY_DIMENSIONS),
solid: true, solid: true,
grabbable: true, grabbable: true,
displayInFront: true, displayInFront: true,
visible: true visible: true
}); });
proxyUIOverlay = Overlays.addOverlay("web3d", {
url: PROXY_UI_HTML,
parentID: proxyOverlay,
localPosition: PROXY_UI_LOCAL_POSITION,
localRotation: PROXY_UI_LOCAL_ROTATION,
dimensions: PROXY_UI_DIMENSIONS,
dpi: PROXY_UI_DPI,
alpha: 1.0,
grabbable: false,
displayInFront: true,
visible: true
});
} }
function updateProxyVisible() { function updateProxyVisible() {
@ -201,14 +226,19 @@
var tabletScaleFactor = avatarScale * (1 + scaleFactor * (proxyTargetWidth - proxyInitialWidth) / proxyInitialWidth); var tabletScaleFactor = avatarScale * (1 + scaleFactor * (proxyTargetWidth - proxyInitialWidth) / proxyInitialWidth);
if (scaleFactor < 1) { if (scaleFactor < 1) {
Overlays.editOverlay(proxyOverlay, { Overlays.editOverlay(proxyOverlay, {
dimensions: Vec3.multiply(tabletScaleFactor, TABLET_PROXY_DIMENSIONS), dimensions: Vec3.multiply(tabletScaleFactor, PROXY_DIMENSIONS),
localPosition: localPosition:
Vec3.sum(proxyGrabHandleLocalPosition, Vec3.sum(proxyGrabHandleLocalPosition,
Vec3.multiplyQbyV(proxyGrabLocalRotation, Vec3.multiplyQbyV(proxyGrabLocalRotation,
Vec3.multiply(-tabletScaleFactor, Vec3.multiply(-tabletScaleFactor,
Vec3.multiplyVbyV(PROXY_GRAB_HANDLES[proxyGrabHand], TABLET_PROXY_DIMENSIONS))) Vec3.multiplyVbyV(PROXY_GRAB_HANDLES[proxyGrabHand], PROXY_DIMENSIONS)))
) )
}); });
Overlays.editOverlay(proxyUIOverlay, {
dimensions: Vec3.multiply(tabletScaleFactor, PROXY_UI_DIMENSIONS),
localPosition: Vec3.multiply(tabletScaleFactor, PROXY_UI_LOCAL_POSITION),
dpi: PROXY_UI_DPI / tabletScaleFactor
});
proxyExpandTimer = Script.setTimeout(expandProxy, PROXY_EXPAND_TIMEOUT); proxyExpandTimer = Script.setTimeout(expandProxy, PROXY_EXPAND_TIMEOUT);
return; return;
} }
@ -223,10 +253,10 @@
proxyGrabLocalRotation = properties.localRotation; proxyGrabLocalRotation = properties.localRotation;
proxyGrabHandleLocalPosition = Vec3.sum(properties.localPosition, proxyGrabHandleLocalPosition = Vec3.sum(properties.localPosition,
Vec3.multiplyQbyV(proxyGrabLocalRotation, Vec3.multiplyQbyV(proxyGrabLocalRotation,
Vec3.multiplyVbyV(PROXY_GRAB_HANDLES[proxyGrabHand], TABLET_PROXY_DIMENSIONS))); Vec3.multiplyVbyV(PROXY_GRAB_HANDLES[proxyGrabHand], PROXY_DIMENSIONS)));
// Start expanding. // Start expanding.
proxyInitialWidth = TABLET_PROXY_DIMENSIONS.x; proxyInitialWidth = PROXY_DIMENSIONS.x;
proxyTargetWidth = getTabletWidthFromSettings(); proxyTargetWidth = getTabletWidthFromSettings();
proxyExpandStart = Date.now(); proxyExpandStart = Date.now();
proxyExpandTimer = Script.setTimeout(expandProxy, PROXY_EXPAND_TIMEOUT); proxyExpandTimer = Script.setTimeout(expandProxy, PROXY_EXPAND_TIMEOUT);
@ -249,6 +279,8 @@
function enterTabletOpen() { function enterTabletOpen() {
var proxyOverlayProperties = Overlays.getProperties(proxyOverlay, ["position", "orientation"]); var proxyOverlayProperties = Overlays.getProperties(proxyOverlay, ["position", "orientation"]);
Overlays.deleteOverlay(proxyUIOverlay);
proxyUIOverlay = null;
Overlays.deleteOverlay(proxyOverlay); Overlays.deleteOverlay(proxyOverlay);
proxyOverlay = null; proxyOverlay = null;