diff --git a/package-lock.json b/package-lock.json
index 35c52ccb91e8c416cf7897d217d553390281fda4..0bbad51e844badf4f715528348442ed89792212a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -550,10 +550,6 @@
"resolved": "https://registry.yarnpkg.com/aframe-billboard-component/-/aframe-billboard-component-1.0.0.tgz",
"integrity": "sha1-EM4kgnKe73OGxYRNZZF1gaYtOtw="
},
- "aframe-input-mapping-component": {
- "version": "github:mozillareality/aframe-input-mapping-component#03932457c5318db243e811d2767fe0c5a8c7e9e0",
- "from": "github:mozillareality/aframe-input-mapping-component#hubs/master"
- },
"aframe-inspector": {
"version": "0.8.3",
"resolved": "https://registry.npmjs.org/aframe-inspector/-/aframe-inspector-0.8.3.tgz",
diff --git a/package.json b/package.json
index bee3e1b3d3c7b14a9d5f939f369ade4f0b49c437..d9e3d59c08ecdbf2adc92df5046aa149331bae1f 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,6 @@
"@fortawesome/react-fontawesome": "^0.1.0",
"aframe": "github:mozillareality/aframe#bugfix/oculus-go-controller-reconnect-pre-e0c8ff7",
"aframe-billboard-component": "^1.0.0",
- "aframe-input-mapping-component": "github:mozillareality/aframe-input-mapping-component#hubs/master",
"aframe-inspector": "^0.8.3",
"aframe-motion-capture-components": "github:mozillareality/aframe-motion-capture-components#1ca616fa67b627e447b23b35a09da175d8387668",
"aframe-physics-extras": "github:mozillareality/aframe-physics-extras#bugfix/physics-collider-world",
diff --git a/src/activators/pressedmove.js b/src/activators/pressedmove.js
deleted file mode 100644
index fb7d7470723246b687049eafeb83d51e84f0e8bd..0000000000000000000000000000000000000000
--- a/src/activators/pressedmove.js
+++ /dev/null
@@ -1,35 +0,0 @@
-function PressedMove(el, button, onActivate) {
- this.down = button + "down";
- this.up = button + "up";
- this.pressed = false;
- this.onActivate = onActivate;
- this.el = el;
- this.onButtonDown = this.onButtonDown.bind(this);
- this.onButtonUp = this.onButtonUp.bind(this);
- this.onAxisMove = this.onAxisMove.bind(this);
- el.addEventListener(this.down, this.onButtonDown);
- el.addEventListener(this.up, this.onButtonUp);
- el.addEventListener("axismove", this.onAxisMove);
-}
-
-PressedMove.prototype = {
- onAxisMove: function(event) {
- if (this.pressed) {
- this.onActivate(event);
- }
- },
- onButtonDown: function() {
- this.pressed = true;
- },
- onButtonUp: function() {
- this.pressed = false;
- },
-
- removeListeners: function() {
- this.el.addEventListener(this.down, this.onButtonDown);
- this.el.addEventListener(this.up, this.onButtonUp);
- this.el.addEventListener("axismove", this.onAxisMove);
- }
-};
-
-export { PressedMove };
diff --git a/src/activators/reversey.js b/src/activators/reversey.js
deleted file mode 100644
index d3f3967f2da72d954b9a47d81bfaa0f1782f95f2..0000000000000000000000000000000000000000
--- a/src/activators/reversey.js
+++ /dev/null
@@ -1,20 +0,0 @@
-function ReverseY(el, button, onActivate) {
- this.el = el;
- this.emitReverseY = this.emitReverseY.bind(this);
- this.onActivate = onActivate;
- this.button = button;
- this.removeListeners = this.removeListeners.bind(this);
- el.addEventListener(button, this.emitReverseY);
-}
-
-ReverseY.prototype = {
- emitReverseY: function(event) {
- event.detail.axis[1] *= -1;
- this.onActivate(event);
- },
- removeListeners: function() {
- this.el.removeEventListener(this.button, this.emitReverseY);
- }
-};
-
-export { ReverseY };
diff --git a/src/activators/shortpress.js b/src/activators/shortpress.js
deleted file mode 100644
index fd9b8da0a212dc6acfba55509072d9c46c079305..0000000000000000000000000000000000000000
--- a/src/activators/shortpress.js
+++ /dev/null
@@ -1,34 +0,0 @@
-function ShortPress(el, button, onActivate) {
- this.lastTime = 0;
- this.timeOut = 500;
- this.eventNameDown = button + "down";
- this.eventNameUp = button + "up";
-
- this.el = el;
- this.onActivate = onActivate;
-
- this.onButtonDown = this.onButtonDown.bind(this);
- this.onButtonUp = this.onButtonUp.bind(this);
-
- el.addEventListener(this.eventNameDown, this.onButtonDown);
- el.addEventListener(this.eventNameUp, this.onButtonUp);
-}
-
-ShortPress.prototype = {
- onButtonDown(event) {
- this.pressTimer = window.setTimeout(() => {
- this.onActivate(event);
- }, this.timeOut);
- },
-
- onButtonUp() {
- clearTimeout(this.pressTimer);
- },
-
- removeListeners() {
- this.el.removeEventListener(this.eventNameDown, this.onButtonDown);
- this.el.removeEventListener(this.eventNameUp, this.onButtonUp);
- }
-};
-
-AFRAME.registerInputActivator("shortpress", ShortPress);
diff --git a/src/assets/stylesheets/hub-create.scss b/src/assets/stylesheets/hub-create.scss
index bc9145df6e1246e5a34e60f29efc7fffe7297414..2af9cb72e0c16e35f58b5df5ffd16faadd90dca0 100644
--- a/src/assets/stylesheets/hub-create.scss
+++ b/src/assets/stylesheets/hub-create.scss
@@ -51,12 +51,12 @@
border-radius: 0px 0px 14px 14px;
&::selection {
- background-color: #2F80ED;
+ background-color: $bright-blue;
color: white;
}
&::-moz-selection {
- background-color: #2F80ED;
+ background-color: $bright-blue;
color: white;
}
diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss
index 66595775efe1e43c7a835987940ff288eee63ef1..46029a3b32be5675fd1448ceb65ca9375e6ddd66 100644
--- a/src/assets/stylesheets/index.scss
+++ b/src/assets/stylesheets/index.scss
@@ -172,7 +172,7 @@ body {
:local(.create) {
padding: 2.1em;
- padding-bottom: 3.5vw;
+ padding-bottom: 2vw;
position: relative;
@media (max-width: 768px) {
@@ -189,6 +189,17 @@ body {
@extend %action-button;
}
}
+
+ :local(.spoke-button) {
+ display: flex;
+ justify-content: center;
+
+ a {
+ margin-top: 16px;
+ @extend %action-button;
+ background: $spoke-action-color;
+ }
+ }
}
:local(.footer-content) {
diff --git a/src/assets/stylesheets/presence-log.scss b/src/assets/stylesheets/presence-log.scss
index 2738cb3583eee8fe193d652232af609773a983a5..bed6d5cd50cae9b07dd406009c01917ac48477d8 100644
--- a/src/assets/stylesheets/presence-log.scss
+++ b/src/assets/stylesheets/presence-log.scss
@@ -34,6 +34,25 @@
@media (max-width: 1000px) {
max-width: 75%;
}
+
+ &:local(.media) {
+ display: flex;
+ align-items: center;
+ min-height: 35px;
+
+ :local(.mediaBody) {
+ display: flex;
+ flex-direction: column;
+ }
+
+ img {
+ height: 35px;
+ margin-right: 8px;
+ border: 2px solid rgba(255,255,255,0.15);
+ display: block;
+ border-radius: 5px;
+ }
+ }
}
:local(.expired) {
diff --git a/src/assets/stylesheets/shared.scss b/src/assets/stylesheets/shared.scss
index bf9830857c8538c41de1863fffcbe3a8d3326402..d44b6b31916977101aea39ee8824cee35e388559 100644
--- a/src/assets/stylesheets/shared.scss
+++ b/src/assets/stylesheets/shared.scss
@@ -10,10 +10,12 @@ $light-grey: lightgrey;
$dark-grey: rgba(128, 128, 128, 1.0);
$darker-grey: rgba(64, 64, 64, 1.0);
$darkest-grey: rgba(32, 32, 32, 1.0);
+$bright-blue: #2F80ED;
$action-color: #FF3464;
$action-color-light: #FF74A4;
$action-color-transparent: rgba(255, 52, 100, 0.9);
$hud-panel-background: rgba(79, 79, 79, 0.45);
+$spoke-action-color: $bright-blue;
%unselectable {
-moz-user-select: none;
diff --git a/src/assets/stylesheets/spoke.scss b/src/assets/stylesheets/spoke.scss
index 68f850879027e250f7bcce75a16a88692cf4a6e3..0219502e7a00014e7cbb07530ca3a78e06353b73 100644
--- a/src/assets/stylesheets/spoke.scss
+++ b/src/assets/stylesheets/spoke.scss
@@ -1,7 +1,6 @@
@import 'shared';
@import 'loader';
-$spoke-action-color: #2F80ED;
$breakpoint: 1280px;
$mobile-breakpoint-width: 450px;
diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json
index 127a793f23e2f0ce374697a57b9bc757c6c31e2f..819a5a04649cf73d1cc12f9d8b64f6cd1b5ababd 100644
--- a/src/assets/translations.data.json
+++ b/src/assets/translations.data.json
@@ -69,6 +69,7 @@
"home.create_name.validation_warning": "Invalid name, limited to 4 to 64 characters and limited symbols.",
"home.join_us": "Join the Conversation",
"home.join_room": "Join Room",
+ "home.create_with_spoke": "Create a Scene",
"home.report_issue": "Report Issues",
"home.source_link": "Source",
"home.spoke_link": "Spoke",
diff --git a/src/behaviours/joystick-dpad4.js b/src/behaviours/joystick-dpad4.js
deleted file mode 100644
index 0eae7e1d194dfb6f207da53a7499caaf8e483c02..0000000000000000000000000000000000000000
--- a/src/behaviours/joystick-dpad4.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { angleTo4Direction } from "../utils/dpad";
-
-// @TODO specify 4 or 8 direction
-function joystick_dpad4(el, outputPrefix) {
- this.angleToDirection = angleTo4Direction;
- this.outputPrefix = outputPrefix;
- this.centerRadius = 0.6;
- this.previous = "none";
- this.hapticIntensity = "low";
- this.emitDPad4 = this.emitDPad4.bind(this);
- this.el = el;
-}
-
-joystick_dpad4.prototype = {
- addEventListeners: function() {
- this.el.addEventListener("axismove", this.emitDPad4);
- },
- removeEventListeners: function() {
- this.el.removeEventListener("axismove", this.emitDPad4);
- },
- emitDPad4: function(event) {
- const x = event.detail.axis[0];
- const y = event.detail.axis[1];
- const inCenter = Math.abs(x) < this.centerRadius && Math.abs(y) < this.centerRadius;
- const current = inCenter ? "center" : this.angleToDirection(Math.atan2(x, -y));
- if (current !== this.previous) {
- this.previous = current;
- event.target.emit(`${this.outputPrefix}_dpad4_${current}`);
- event.target.emit("haptic_pulse", { intensity: this.hapticIntensity });
- }
- }
-};
-
-export default joystick_dpad4;
diff --git a/src/behaviours/msft-mr-axis-with-deadzone.js b/src/behaviours/msft-mr-axis-with-deadzone.js
deleted file mode 100644
index c2b86fe8b5a0b645572a6bf27a2dfceb0449187b..0000000000000000000000000000000000000000
--- a/src/behaviours/msft-mr-axis-with-deadzone.js
+++ /dev/null
@@ -1,26 +0,0 @@
-function msft_mr_axis_with_deadzone(el, outputPrefix) {
- this.el = el;
- this.outputPrefix = outputPrefix;
- this.deadzone = 0.1;
- this.emitAxisMoveWithDeadzone = this.emitAxisMoveWithDeadzone.bind(this);
-}
-
-msft_mr_axis_with_deadzone.prototype = {
- addEventListeners: function() {
- this.el.addEventListener("axismove", this.emitAxisMoveWithDeadzone);
- },
- removeEventListeners: function() {
- this.el.removeEventListener("axismove", this.emitAxisMoveWithDeadzone);
- },
- emitAxisMoveWithDeadzone: function(event) {
- const axis = event.detail.axis;
- if (Math.abs(axis[0]) < this.deadzone && Math.abs(axis[1]) < this.deadzone) {
- return;
- }
- // Reverse y
- axis[1] = -axis[1];
- this.el.emit("axisMoveWithDeadzone", event.detail);
- }
-};
-
-export default msft_mr_axis_with_deadzone;
diff --git a/src/behaviours/trackpad-dpad4.js b/src/behaviours/trackpad-dpad4.js
deleted file mode 100644
index f15908d34d5854d60ae158af7026007745293dfb..0000000000000000000000000000000000000000
--- a/src/behaviours/trackpad-dpad4.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import { angleTo4Direction } from "../utils/dpad";
-
-function trackpad_dpad4(el, outputPrefix) {
- this.outputPrefix = outputPrefix;
- this.lastDirection = "";
- this.previous = "";
- this.pressed = false;
- this.emitDPad4 = this.emitDPad4.bind(this);
- this.press = this.press.bind(this);
- this.unpress = this.unpress.bind(this);
- this.hapticIntensity = "low";
- this.centerRadius = 0.6;
- this.el = el;
-}
-
-trackpad_dpad4.prototype = {
- addEventListeners: function() {
- this.el.addEventListener("axismove", this.emitDPad4);
- this.el.addEventListener("trackpaddown", this.press);
- this.el.addEventListener("trackpadup", this.unpress);
- },
- removeEventListeners: function() {
- this.el.removeEventListener("axismove", this.emitDPad4);
- this.el.removeEventListener("trackpaddown", this.press);
- this.el.removeEventListener("trackpadup", this.unpress);
- },
- press: function() {
- this.pressed = true;
- },
- unpress: function() {
- this.pressed = false;
- },
- emitDPad4: function(event) {
- const x = event.detail.axis[0];
- const y = event.detail.axis[1];
- const inCenter = Math.abs(x) < this.centerRadius && Math.abs(y) < this.centerRadius;
- const direction = inCenter ? "center" : angleTo4Direction(Math.atan2(x, -y));
- const pressed = this.pressed ? "pressed_" : "";
- const current = `${pressed + direction}`; // e.g. "pressed_north"
-
- // Real axismove events are not perfectly [0,0]...
- // This is a touchend event.
- if (x === 0 && y === 0) {
- event.target.emit(`${this.outputPrefix}_dpad4_${this.previous}_up`);
- this.previous = ""; // Clear this because the user has lifted their finger.
- return;
- }
-
- if (current === this.previous) {
- return;
- }
-
- if (this.previous !== "") {
- event.target.emit(`${this.outputPrefix}_dpad4_${this.previous}_up`);
- }
-
- event.target.emit(`${this.outputPrefix}_dpad4_${current}_down`);
- this.previous = current;
- }
-};
-
-export default trackpad_dpad4;
diff --git a/src/behaviours/trackpad-scrolling.js b/src/behaviours/trackpad-scrolling.js
deleted file mode 100644
index 8cb5baf9502b697141b434499525b5c40e63e555..0000000000000000000000000000000000000000
--- a/src/behaviours/trackpad-scrolling.js
+++ /dev/null
@@ -1,56 +0,0 @@
-function trackpad_scrolling(el) {
- this.el = el;
- this.start = "trackpadtouchstart";
- this.move = "axismove";
- this.end = "trackpadtouchend";
- this.isScrolling = false;
- this.x = -10;
- this.y = -10;
- this.axis = [0, 0];
- this.emittedEventDetail = { detail: { axis: this.axis } };
-
- this.onStart = this.onStart.bind(this);
- this.onMove = this.onMove.bind(this);
- this.onEnd = this.onEnd.bind(this);
-}
-
-trackpad_scrolling.prototype = {
- addEventListeners: function() {
- this.el.addEventListener(this.start, this.onStart);
- this.el.addEventListener(this.move, this.onMove);
- this.el.addEventListener(this.end, this.onEnd);
- },
- removeEventListeners: function() {
- this.el.removeEventListener(this.start, this.onStart);
- this.el.removeEventListener(this.move, this.onMove);
- this.el.removeEventListener(this.end, this.onEnd);
- },
- onStart: function() {
- this.isScrolling = true;
- },
- onMove: function(e) {
- if (!this.isScrolling) return;
- const x = e.detail.axis[0];
- const y = e.detail.axis[1];
- if (this.x === -10) {
- this.x = x;
- this.y = y;
- return;
- }
-
- const scrollSpeed = 8;
- this.axis[0] = (x - this.x) * scrollSpeed;
- this.axis[1] = (y - this.y) * scrollSpeed;
- this.emittedEventDetail.axis = this.axis;
- e.target.emit("scroll", this.emittedEventDetail);
- this.x = x;
- this.y = y;
- },
- onEnd: function() {
- this.isScrolling = false;
- this.x = -10;
- this.y = -10;
- }
-};
-
-export default trackpad_scrolling;
diff --git a/src/components/action-to-event.js b/src/components/action-to-event.js
new file mode 100644
index 0000000000000000000000000000000000000000..ee6f397445fea8d556f268ca81ea978f366df6d0
--- /dev/null
+++ b/src/components/action-to-event.js
@@ -0,0 +1,15 @@
+AFRAME.registerComponent("action-to-event", {
+ multiple: true,
+
+ schema: {
+ path: { type: "string" },
+ event: { type: "string" }
+ },
+
+ tick() {
+ const userinput = AFRAME.scenes[0].systems.userinput;
+ if (userinput.readFrameValueAtPath(this.data.path)) {
+ this.el.emit(this.data.event);
+ }
+ }
+});
diff --git a/src/components/camera-tool.js b/src/components/camera-tool.js
index cc6bbefb233cecc6d28980fd2d1630c5d1730952..eacfaf8f443a0131cef4cd189f0a05e5c9a58a20 100644
--- a/src/components/camera-tool.js
+++ b/src/components/camera-tool.js
@@ -1,10 +1,23 @@
import { addMedia } from "../utils/media-utils";
import { ObjectTypes } from "../object-types";
+import { paths } from "../systems/userinput/paths";
import cameraModelSrc from "../assets/camera_tool.glb";
const cameraModelPromise = new Promise(resolve => new THREE.GLTFLoader().load(cameraModelSrc, resolve));
+const pathsMap = {
+ "player-right-controller": {
+ takeSnapshot: paths.actions.rightHand.takeSnapshot
+ },
+ "player-left-controller": {
+ takeSnapshot: paths.actions.leftHand.takeSnapshot
+ },
+ cursor: {
+ takeSnapshot: paths.actions.cursor.takeSnapshot
+ }
+};
+
const snapCanvas = document.createElement("canvas");
async function pixelsToPNG(pixels, width, height) {
snapCanvas.width = width;
@@ -93,6 +106,16 @@ AFRAME.registerComponent("camera-tool", {
}
},
+ tick() {
+ const grabber = this.el.components.grabbable.grabbers[0];
+ if (grabber && !!pathsMap[grabber.id]) {
+ const paths = pathsMap[grabber.id];
+ if (AFRAME.scenes[0].systems.userinput.readFrameValueAtPath(paths.takeSnapshot)) {
+ this.takeSnapshotNextTick = true;
+ }
+ }
+ },
+
tock: (function() {
const tempScale = new THREE.Vector3();
return function tock() {
@@ -133,6 +156,13 @@ AFRAME.registerComponent("camera-tool", {
renderer.readRenderTargetPixels(this.renderTarget, 0, 0, width, height, this.snapPixels);
pixelsToPNG(this.snapPixels, width, height).then(file => {
const { entity, orientation } = addMedia(file, "#interactable-media", undefined, true);
+ entity.addEventListener(
+ "media_resolved",
+ () => {
+ this.el.emit("photo_taken", entity.components["media-loader"].data.src);
+ },
+ { once: true }
+ );
orientation.then(() => {
entity.object3D.position.copy(this.el.object3D.position).add(new THREE.Vector3(0, -0.5, 0));
entity.object3D.rotation.copy(this.el.object3D.rotation);
diff --git a/src/components/character-controller.js b/src/components/character-controller.js
index b0dd84323e3d6eb7027df2d938fbb66a37705789..910123ba8bb2f5e54e64037ac478a1ac2e57e577 100644
--- a/src/components/character-controller.js
+++ b/src/components/character-controller.js
@@ -1,3 +1,4 @@
+import { paths } from "../systems/userinput/paths";
const CLAMP_VELOCITY = 0.01;
const MAX_DELTA = 0.2;
const EPS = 10e-6;
@@ -104,6 +105,7 @@ AFRAME.registerComponent("character-controller", {
const startScale = new THREE.Vector3();
return function(t, dt) {
+ if (!this.el.sceneEl.is("entered")) return;
const deltaSeconds = dt / 1000;
const root = this.el.object3D;
const pivot = this.data.pivot.object3D;
@@ -116,6 +118,22 @@ AFRAME.registerComponent("character-controller", {
// Other aframe components like teleport-controls set position/rotation/scale, not the matrix, so we need to make sure to compose them back into the matrix
root.updateMatrix();
+ const userinput = AFRAME.scenes[0].systems.userinput;
+ if (userinput.readFrameValueAtPath(paths.actions.snapRotateLeft)) {
+ this.snapRotateLeft();
+ }
+ if (userinput.readFrameValueAtPath(paths.actions.snapRotateRight)) {
+ this.snapRotateRight();
+ }
+ const acc = userinput.readFrameValueAtPath(paths.actions.characterAcceleration);
+ if (acc) {
+ this.accelerationInput.set(
+ this.accelerationInput.x + acc[0],
+ this.accelerationInput.y + 0,
+ this.accelerationInput.z + acc[1]
+ );
+ }
+
pivotPos.copy(pivot.position);
pivotPos.applyMatrix4(root.matrix);
trans.setPosition(pivotPos);
@@ -125,7 +143,14 @@ AFRAME.registerComponent("character-controller", {
pivotRotationMatrix.makeRotationAxis(rotationAxis, pivot.rotation.y);
pivotRotationInvMatrix.makeRotationAxis(rotationAxis, -pivot.rotation.y);
this.updateVelocity(deltaSeconds);
- move.makeTranslation(this.velocity.x * distance, this.velocity.y * distance, this.velocity.z * distance);
+ this.accelerationInput.set(0, 0, 0);
+
+ const boost = userinput.readFrameValueAtPath(paths.actions.boost) ? 2 : 1;
+ move.makeTranslation(
+ this.velocity.x * distance * boost,
+ this.velocity.y * distance * boost,
+ this.velocity.z * distance * boost
+ );
yawMatrix.makeRotationAxis(rotationAxis, rotationDelta);
// Translate to middle of playspace (player rig)
diff --git a/src/components/cursor-controller.js b/src/components/cursor-controller.js
index 421b084c309710e9442dd3f44019fdcb0cad94d5..c5113dba822b23944026cff06b41497deecf55f0 100644
--- a/src/components/cursor-controller.js
+++ b/src/components/cursor-controller.js
@@ -1,8 +1,4 @@
-const TARGET_TYPE_NONE = 1;
-const TARGET_TYPE_INTERACTABLE = 2;
-const TARGET_TYPE_UI = 4;
-const TARGET_TYPE_INTERACTABLE_OR_UI = TARGET_TYPE_INTERACTABLE | TARGET_TYPE_UI;
-
+import { paths } from "../systems/userinput/paths";
/**
* Manages targeting and physical cursor location. Has the following responsibilities:
*
@@ -21,28 +17,26 @@ AFRAME.registerComponent("cursor-controller", {
cursorColorHovered: { default: "#2F80ED" },
cursorColorUnhovered: { default: "#FFFFFF" },
rayObject: { type: "selector" },
- drawLine: { default: false },
objects: { default: "" }
},
init: function() {
this.enabled = true;
- this.currentTargetType = TARGET_TYPE_NONE;
- this.currentDistance = this.data.far;
- this.currentDistanceMod = 0;
- this.mousePos = new THREE.Vector2();
- this.wasCursorHovered = false;
- this.data.cursor.setAttribute("material", { color: this.data.cursorColorUnhovered });
- this._handleCursorLoaded = this._handleCursorLoaded.bind(this);
- this.data.cursor.addEventListener("loaded", this._handleCursorLoaded);
+ this.data.cursor.addEventListener(
+ "loaded",
+ () => {
+ this.data.cursor.object3DMap.mesh.renderOrder = window.APP.RENDER_ORDER.CURSOR;
+ },
+ { once: true }
+ );
// raycaster state
+ this.setDirty = this.setDirty.bind(this);
this.targets = [];
- this.intersection = null;
this.raycaster = new THREE.Raycaster();
- this.setDirty = this.setDirty.bind(this);
this.dirty = true;
+ this.distance = this.data.far;
},
update: function() {
@@ -89,161 +83,68 @@ AFRAME.registerComponent("cursor-controller", {
}
},
- performRaycast: (function() {
- const rayObjectRotation = new THREE.Quaternion();
+ tick: (() => {
const rawIntersections = [];
- return function performRaycast(targets) {
- if (this.data.rayObject) {
- const rayObject = this.data.rayObject.object3D;
- rayObject.updateMatrixWorld();
- rayObjectRotation.setFromRotationMatrix(rayObject.matrixWorld);
- this.raycaster.ray.origin.setFromMatrixPosition(rayObject.matrixWorld);
- this.raycaster.ray.direction.set(0, 0, -1).applyQuaternion(rayObjectRotation);
- } else {
- this.raycaster.setFromCamera(this.mousePos, this.data.camera.components.camera.camera); // camera
+ const cameraPos = new THREE.Vector3();
+ return function() {
+ if (this.dirty) {
+ // app aware devices cares about this.targets so we must update it even if cursor is not enabled
+ this.populateEntities(this.data.objects, this.targets);
+ this.dirty = false;
}
- const prevIntersection = this.intersection;
- rawIntersections.length = 0;
- this.raycaster.intersectObjects(targets, true, rawIntersections);
- this.intersection = rawIntersections.find(x => x.object.el);
- this.emitIntersectionEvents(prevIntersection, this.intersection);
- };
- })(),
-
- enable: function() {
- this.enabled = true;
- },
- disable: function() {
- this.enabled = false;
- this.setCursorVisibility(false);
- },
+ const userinput = AFRAME.scenes[0].systems.userinput;
+ const cursorPose = userinput.readFrameValueAtPath(paths.actions.cursor.pose);
+ const rightHandPose = userinput.readFrameValueAtPath(paths.actions.rightHand.pose);
- tick: (() => {
- const cameraPos = new THREE.Vector3();
+ this.data.cursor.object3D.visible = this.enabled && !!cursorPose;
+ this.el.setAttribute("line", "visible", this.enabled && !!rightHandPose);
- return function() {
- if (!this.enabled) {
+ if (!this.enabled || !cursorPose) {
return;
}
- if (this.dirty) {
- this.populateEntities(this.data.objects, this.targets);
- this.dirty = false;
+ let intersection;
+ const isGrabbing = this.data.cursor.components["super-hands"].state.has("grab-start");
+ if (!isGrabbing) {
+ rawIntersections.length = 0;
+ this.raycaster.ray.origin = cursorPose.position;
+ this.raycaster.ray.direction = cursorPose.direction;
+ this.raycaster.intersectObjects(this.targets, true, rawIntersections);
+ intersection = rawIntersections.find(x => x.object.el);
+ this.emitIntersectionEvents(this.prevIntersection, intersection);
+ this.prevIntersection = intersection;
+ this.distance = intersection ? intersection.distance : this.data.far;
}
- this.performRaycast(this.targets);
-
- if (this.isInteracting()) {
- const distance = Math.min(
- this.data.far,
- Math.max(this.data.near, this.currentDistance - this.currentDistanceMod)
- );
- this.data.cursor.object3D.position.copy(this.raycaster.ray.origin);
- this.data.cursor.object3D.position.addScaledVector(this.raycaster.ray.direction, distance);
- } else {
- this.currentDistanceMod = 0;
- this.updateDistanceAndTargetType();
-
- const isTarget = this._isTargetOfType(TARGET_TYPE_INTERACTABLE_OR_UI);
- if (isTarget && !this.wasCursorHovered) {
- this.wasCursorHovered = true;
- this.data.cursor.setAttribute("material", { color: this.data.cursorColorHovered });
- } else if (!isTarget && this.wasCursorHovered) {
- this.wasCursorHovered = false;
- this.data.cursor.setAttribute("material", { color: this.data.cursorColorUnhovered });
- }
- }
+ const { cursor, near, far, camera, cursorColorHovered, cursorColorUnhovered } = this.data;
- if (this.data.drawLine) {
+ const cursorModDelta = userinput.readFrameValueAtPath(paths.actions.cursor.modDelta);
+ if (isGrabbing && cursorModDelta) {
+ this.distance = THREE.Math.clamp(this.distance - cursorModDelta, near, far);
+ }
+ cursor.object3D.position.copy(cursorPose.position).addScaledVector(cursorPose.direction, this.distance);
+ // The cursor will always be oriented towards the player about its Y axis, so objects held by the cursor will rotate towards the player.
+ camera.object3D.getWorldPosition(cameraPos);
+ cameraPos.y = cursor.object3D.position.y;
+ cursor.object3D.lookAt(cameraPos);
+
+ this.data.cursor.setAttribute(
+ "material",
+ "color",
+ intersection || isGrabbing ? cursorColorHovered : cursorColorUnhovered
+ );
+ if (this.el.components.line.data.visible) {
this.el.setAttribute("line", {
- start: this.raycaster.ray.origin.clone(),
- end: this.data.cursor.object3D.position.clone()
+ start: cursorPose.position.clone(),
+ end: cursor.object3D.position.clone()
});
}
-
- // The cursor will always be oriented towards the player about its Y axis, so objects held by the cursor will rotate towards the player.
- this.data.camera.object3D.getWorldPosition(cameraPos);
- cameraPos.y = this.data.cursor.object3D.position.y;
- this.data.cursor.object3D.lookAt(cameraPos);
};
})(),
- updateDistanceAndTargetType: function() {
- const intersection = this.intersection;
- if (intersection && intersection.distance <= this.data.far) {
- this.data.cursor.object3D.position.copy(intersection.point);
- this.currentDistance = intersection.distance;
- } else {
- this.currentDistance = this.data.far;
- this.data.cursor.object3D.position.copy(this.raycaster.ray.origin);
- this.data.cursor.object3D.position.addScaledVector(this.raycaster.ray.direction, this.currentDistance);
- }
-
- if (!intersection) {
- this.currentTargetType = TARGET_TYPE_NONE;
- } else if (intersection.object.el.matches(".interactable, .interactable *")) {
- this.currentTargetType = TARGET_TYPE_INTERACTABLE;
- } else if (intersection.object.el.matches(".ui, .ui *")) {
- this.currentTargetType = TARGET_TYPE_UI;
- }
- },
-
- _isTargetOfType: function(mask) {
- return (this.currentTargetType & mask) === this.currentTargetType;
- },
-
- setCursorVisibility: function(visible) {
- this.data.cursor.setAttribute("visible", visible);
- this.el.setAttribute("line", { visible: visible && this.data.drawLine });
- },
-
- forceCursorUpdate: function() {
- this.performRaycast(this.targets);
- this.updateDistanceAndTargetType();
- this.data.cursor.components["static-body"].syncToPhysics();
- },
-
- isInteracting: function() {
- return this.data.cursor.components["super-hands"].state.has("grab-start");
- },
-
- startInteraction: function() {
- if (this._isTargetOfType(TARGET_TYPE_INTERACTABLE_OR_UI)) {
- this.data.cursor.emit("cursor-grab", {});
- return true;
- }
- return false;
- },
-
- endInteraction: function() {
- this.data.cursor.emit("cursor-release", {});
- },
-
- moveCursor: function(x, y) {
- this.mousePos.set(x, y);
- },
-
- changeDistanceMod: function(delta) {
- const { near, far } = this.data;
- const targetDistanceMod = this.currentDistanceMod + delta;
- const moddedDistance = this.currentDistance - targetDistanceMod;
- if (moddedDistance > far || moddedDistance < near) {
- return false;
- }
-
- this.currentDistanceMod = targetDistanceMod;
- return true;
- },
-
- _handleCursorLoaded: function() {
- this.data.cursor.object3DMap.mesh.renderOrder = window.APP.RENDER_ORDER.CURSOR;
- this.data.cursor.removeEventListener("loaded", this._handleCursorLoaded);
- },
-
remove: function() {
- this.emitIntersectionEvents(this.intersection, null);
- this.intersection = null;
- this.data.cursor.removeEventListener("loaded", this._handleCursorLoaded);
+ this.emitIntersectionEvents(this.prevIntersection, null);
+ delete this.prevIntersection;
}
});
diff --git a/src/components/gltf-model-plus.js b/src/components/gltf-model-plus.js
index 912490b97e552d7c4aff1b6b69c519c29a66869d..b4d25bb3989aea9619a3ebc2d4f6b3bc8e5de9cf 100644
--- a/src/components/gltf-model-plus.js
+++ b/src/components/gltf-model-plus.js
@@ -1,5 +1,6 @@
import nextTick from "../utils/next-tick";
import SketchfabZipWorker from "../workers/sketchfab-zip.worker.js";
+import MobileStandardMaterial from "../materials/MobileStandardMaterial";
import cubeMapPosX from "../assets/images/cubemap/posx.jpg";
import cubeMapNegX from "../assets/images/cubemap/negx.jpg";
import cubeMapPosY from "../assets/images/cubemap/posy.jpg";
@@ -255,8 +256,12 @@ async function loadGLTF(src, contentType, preferredTechnique, onProgress) {
gltf.scene.traverse(object => {
if (object.material && object.material.type === "MeshStandardMaterial") {
- object.material.envMap = envMap;
- object.material.needsUpdate = true;
+ if (preferredTechnique === "KHR_materials_unlit") {
+ object.material = MobileStandardMaterial.fromStandardMaterial(object.material);
+ } else {
+ object.material.envMap = envMap;
+ object.material.needsUpdate = true;
+ }
}
});
diff --git a/src/components/grabbable-toggle.js b/src/components/grabbable-toggle.js
deleted file mode 100644
index 5a11d5698d5ba53cbafeab63286bf142b1699bfb..0000000000000000000000000000000000000000
--- a/src/components/grabbable-toggle.js
+++ /dev/null
@@ -1,185 +0,0 @@
-/* global AFRAME, THREE */
-const inherit = AFRAME.utils.extendDeep;
-const physicsCore = require("super-hands/reaction_components/prototypes/physics-grab-proto.js");
-const buttonsCore = require("super-hands/reaction_components/prototypes/buttons-proto.js");
-// new object with all core modules
-const base = inherit({}, physicsCore, buttonsCore);
-AFRAME.registerComponent(
- "grabbable-toggle",
- inherit(base, {
- schema: {
- maxGrabbers: { type: "int", default: NaN },
- invert: { default: false },
- suppressY: { default: false },
- primaryReleaseEvents: { default: ["primary_hand_release"] },
- secondaryReleaseEvents: { default: ["secondary_hand_release"] }
- },
- init: function() {
- this.GRABBED_STATE = "grabbed";
- this.GRAB_EVENT = "grab-start";
- this.UNGRAB_EVENT = "grab-end";
- this.grabbed = false;
- this.grabbers = [];
- this.constraints = new Map();
- this.deltaPositionIsValid = false;
- this.grabDistance = undefined;
- this.grabDirection = { x: 0, y: 0, z: -1 };
- this.grabOffset = { x: 0, y: 0, z: 0 };
- // persistent object speeds up repeat setAttribute calls
- this.destPosition = { x: 0, y: 0, z: 0 };
- this.deltaPosition = new THREE.Vector3();
- this.targetPosition = new THREE.Vector3();
- this.physicsInit();
-
- this.el.addEventListener(this.GRAB_EVENT, e => this.start(e));
- this.el.addEventListener(this.UNGRAB_EVENT, e => this.end(e));
- this.el.addEventListener("mouseout", e => this.lostGrabber(e));
-
- this.toggle = false;
- this.lastGrabber = null;
- },
- update: function() {
- this.physicsUpdate();
- this.xFactor = this.data.invert ? -1 : 1;
- this.zFactor = this.data.invert ? -1 : 1;
- this.yFactor = (this.data.invert ? -1 : 1) * !this.data.suppressY;
- },
- tick: (function() {
- const q = new THREE.Quaternion();
- const v = new THREE.Vector3();
-
- return function() {
- let entityPosition;
- if (this.grabber) {
- // reflect on z-axis to point in same direction as the laser
- this.targetPosition.copy(this.grabDirection);
- this.targetPosition
- .applyQuaternion(this.grabber.object3D.getWorldQuaternion(q))
- .setLength(this.grabDistance)
- .add(this.grabber.object3D.getWorldPosition(v))
- .add(this.grabOffset);
- if (this.deltaPositionIsValid) {
- // relative position changes work better with nested entities
- this.deltaPosition.sub(this.targetPosition);
- entityPosition = this.el.getAttribute("position");
- this.destPosition.x = entityPosition.x - this.deltaPosition.x * this.xFactor;
- this.destPosition.y = entityPosition.y - this.deltaPosition.y * this.yFactor;
- this.destPosition.z = entityPosition.z - this.deltaPosition.z * this.zFactor;
- this.el.setAttribute("position", this.destPosition);
- } else {
- this.deltaPositionIsValid = true;
- }
- this.deltaPosition.copy(this.targetPosition);
- }
- };
- })(),
- remove: function() {
- this.el.removeEventListener(this.GRAB_EVENT, this.start);
- this.el.removeEventListener(this.UNGRAB_EVENT, this.end);
- this.physicsRemove();
- },
- start: function(evt) {
- if (evt.defaultPrevented || !this.startButtonOk(evt)) {
- return;
- }
- // room for more grabbers?
- let grabAvailable = !Number.isFinite(this.data.maxGrabbers) || this.grabbers.length < this.data.maxGrabbers;
- if (Number.isFinite(this.data.maxGrabbers) && !grabAvailable && this.grabbed) {
- this.grabbers[0].components["super-hands"].onGrabEndButton();
- grabAvailable = true;
- }
- if (this.grabbers.indexOf(evt.detail.hand) === -1 && grabAvailable) {
- if (!evt.detail.hand.object3D) {
- console.warn("grabbable entities must have an object3D");
- return;
- }
- this.grabbers.push(evt.detail.hand);
- // initiate physics if available, otherwise manual
- if (!this.physicsStart(evt) && !this.grabber) {
- this.grabber = evt.detail.hand;
- this.resetGrabber();
- }
- // notify super-hands that the gesture was accepted
- if (evt.preventDefault) {
- evt.preventDefault();
- }
- this.grabbed = true;
- this.el.addState(this.GRABBED_STATE);
- }
- },
- end: function(evt) {
- const handIndex = this.grabbers.indexOf(evt.detail.hand);
- if (evt.defaultPrevented || !this.endButtonOk(evt)) {
- return;
- }
-
- const type = evt.detail && evt.detail.buttonEvent ? evt.detail.buttonEvent.type : null;
-
- if (this.toggle && this.lastGrabber !== this.grabbers[0]) {
- this.toggle = false;
- this.lastGrabber = null;
- }
-
- if (handIndex !== -1) {
- this.grabber = this.grabbers[0];
- }
-
- if ((this.isPrimaryRelease(type) && !this.toggle) || this.isSecondaryRelease(type)) {
- this.toggle = true;
- this.lastGrabber = this.grabbers[0];
- return;
- } else if (this.toggle && this.isPrimaryRelease(type)) {
- this.toggle = false;
- this.lastGrabber = null;
- }
-
- if (handIndex !== -1) {
- this.grabbers.splice(handIndex, 1);
- this.grabber = this.grabbers[0];
- }
-
- this.physicsEnd(evt);
- if (!this.resetGrabber()) {
- this.grabbed = false;
- this.el.removeState(this.GRABBED_STATE);
- }
- if (evt.preventDefault) {
- evt.preventDefault();
- }
- },
- resetGrabber: (() => {
- const objPos = new THREE.Vector3();
- const grabPos = new THREE.Vector3();
- return function() {
- if (!this.grabber) {
- return false;
- }
- const raycaster = this.grabber.getAttribute("raycaster");
- this.deltaPositionIsValid = false;
- this.grabDistance = this.el.object3D
- .getWorldPosition(objPos)
- .distanceTo(this.grabber.object3D.getWorldPosition(grabPos));
- if (raycaster) {
- this.grabDirection = raycaster.direction;
- this.grabOffset = raycaster.origin;
- }
- return true;
- };
- })(),
- lostGrabber: function(evt) {
- const i = this.grabbers.indexOf(evt.relatedTarget);
- // if a queued, non-physics grabber leaves the collision zone, forget it
- if (i !== -1 && evt.relatedTarget !== this.grabber && !this.physicsIsConstrained(evt.relatedTarget)) {
- this.grabbers.splice(i, 1);
- }
- },
-
- isPrimaryRelease(type) {
- return this.data.primaryReleaseEvents.indexOf(type) !== -1;
- },
-
- isSecondaryRelease(type) {
- return this.data.secondaryReleaseEvents.indexOf(type) !== -1;
- }
- })
-);
diff --git a/src/components/hand-controls2.js b/src/components/hand-controls2.js
index 961790fead81073fcf066ad907079c2497461cd8..534f796c45c304097768d5e486cac12db4d76664 100644
--- a/src/components/hand-controls2.js
+++ b/src/components/hand-controls2.js
@@ -1,3 +1,5 @@
+import { paths } from "../systems/userinput/paths";
+
const POSES = {
open: "open",
point: "point",
@@ -10,6 +12,8 @@ const POSES = {
mrpDown: "mrpDown"
};
+// TODO: If the hands or controllers are mispositioned, then rightHand.controllerPose and rightHand.pose
+// should be bound differently.
export const CONTROLLER_OFFSETS = {
default: new THREE.Matrix4(),
"oculus-touch-controls": new THREE.Matrix4().makeTranslation(0, -0.015, 0.04),
@@ -29,86 +33,32 @@ export const CONTROLLER_OFFSETS = {
};
/**
- * Converts events from various 6DoF and 3DoF controllers into hand-pose events.
+ * Emits events indicating that avatar hands should be posed differently.
* @namespace user-input
* @component hand-controls2
*/
AFRAME.registerComponent("hand-controls2", {
schema: { default: "left" },
- init() {
- const el = this.el;
+ getControllerOffset() {
+ if (CONTROLLER_OFFSETS[this.connectedController] === undefined) {
+ return CONTROLLER_OFFSETS.default;
+ }
+ return CONTROLLER_OFFSETS[this.connectedController];
+ },
+ init() {
this.pose = POSES.open;
+ this.el.setAttribute("visible", false);
- this.fingersDown = {
- thumb: false,
- index: false,
- middle: false,
- ring: false,
- pinky: false
- };
-
- this.onMiddleRingPinkyDown = this.updatePose.bind(this, {
- middle: true,
- ring: true,
- pinky: true
- });
-
- this.onMiddleRingPinkyUp = this.updatePose.bind(this, {
- middle: false,
- ring: false,
- pinky: false
- });
-
- this.onIndexDown = this.updatePose.bind(this, {
- index: true
- });
-
- this.onIndexUp = this.updatePose.bind(this, {
- index: false
- });
-
- this.onThumbDown = this.updatePose.bind(this, {
- thumb: true
- });
-
- this.onThumbUp = this.updatePose.bind(this, {
- thumb: false
- });
+ this.connectedController = null;
this.onControllerConnected = this.onControllerConnected.bind(this);
this.onControllerDisconnected = this.onControllerDisconnected.bind(this);
-
- this.connectedController = null;
-
- el.addEventListener("controllerconnected", this.onControllerConnected);
- el.addEventListener("controllerdisconnected", this.onControllerDisconnected);
-
- el.setAttribute("visible", false);
- },
-
- play() {
- const el = this.el;
- el.addEventListener("middle_ring_pinky_down", this.onMiddleRingPinkyDown);
- el.addEventListener("middle_ring_pinky_up", this.onMiddleRingPinkyUp);
- el.addEventListener("thumb_down", this.onThumbDown);
- el.addEventListener("thumb_up", this.onThumbUp);
- el.addEventListener("index_down", this.onIndexDown);
- el.addEventListener("index_up", this.onIndexUp);
- },
-
- pause() {
- const el = this.el;
- el.removeEventListener("middle_ring_pinky_down", this.onMiddleRingPinkyDown);
- el.removeEventListener("middle_ring_pinky_up", this.onMiddleRingPinkyUp);
- el.removeEventListener("thumb_down", this.onThumbDown);
- el.removeEventListener("thumb_up", this.onThumbUp);
- el.removeEventListener("index_down", this.onIndexDown);
- el.removeEventListener("index_up", this.onIndexUp);
+ this.el.addEventListener("controllerconnected", this.onControllerConnected);
+ this.el.addEventListener("controllerdisconnected", this.onControllerDisconnected);
},
- // Attach the platform specific tracked controllers.
update(prevData) {
const el = this.el;
const hand = this.data;
@@ -129,49 +79,45 @@ AFRAME.registerComponent("hand-controls2", {
}
},
- remove() {
- const el = this.el;
- el.removeEventListener("controllerconnected", this.onControllerConnected);
- el.removeEventListener("controllerdisconnected", this.onControllerDisconnected);
- },
-
- updatePose(nextFingersDown) {
- Object.assign(this.fingersDown, nextFingersDown);
- const pose = this.determinePose();
-
- if (pose !== this.pose) {
- const previous = this.pose;
- this.pose = pose;
- this.el.emit("hand-pose", { previous: previous, current: this.pose });
- }
- },
-
- determinePose() {
- const { thumb, index, middle, ring, pinky } = this.fingersDown;
-
- if (!thumb && !index && !middle && !ring && !pinky) {
+ poseForFingers(thumb, index, middleRingPinky) {
+ if (!thumb && !index && !middleRingPinky) {
return POSES.open;
- } else if (thumb && index && middle && ring && pinky) {
+ } else if (thumb && index && middleRingPinky) {
return POSES.fist;
- } else if (!thumb && index && middle && ring && pinky) {
+ } else if (!thumb && index && middleRingPinky) {
return POSES.thumbUp;
- } else if (!thumb && !index && middle && ring && pinky) {
+ } else if (!thumb && !index && middleRingPinky) {
return POSES.mrpDown;
- } else if (!thumb && index && !middle && !ring && !pinky) {
+ } else if (!thumb && index && !middleRingPinky) {
return POSES.indexDown;
- } else if (thumb && !index && !middle && !ring && !pinky) {
+ } else if (thumb && !index && !middleRingPinky) {
return POSES.thumbDown;
- } else if (thumb && index && !middle && !ring && !pinky) {
+ } else if (thumb && index && !middleRingPinky) {
return POSES.pinch;
- } else if (thumb && !index && middle && ring && pinky) {
+ } else if (thumb && !index && middleRingPinky) {
return POSES.point;
}
- console.warn("Did not find matching pose for ", this.fingersDown);
-
+ console.warn(`Did not find matching pose for thumb ${thumb}, index ${index}, middleRingPinky ${middleRingPinky}`);
return POSES.open;
},
+ tick() {
+ const hand = this.data;
+ const userinput = AFRAME.scenes[0].systems.userinput;
+ const subpath = hand === "left" ? paths.actions.leftHand : paths.actions.rightHand;
+ const hasPose = userinput.readFrameValueAtPath(subpath.pose);
+ const thumb = userinput.readFrameValueAtPath(subpath.thumb);
+ const index = userinput.readFrameValueAtPath(subpath.index);
+ const middleRingPinky = userinput.readFrameValueAtPath(subpath.middleRingPinky);
+ const pose = this.poseForFingers(thumb, index, middleRingPinky);
+ if (pose !== this.pose) {
+ this.el.emit("hand-pose", { previous: this.pose, current: pose });
+ this.pose = pose;
+ }
+ this.el.setAttribute("visible", hasPose);
+ },
+
// Show controller when connected
onControllerConnected(e) {
this.connectedController = e.detail.name;
@@ -182,13 +128,5 @@ AFRAME.registerComponent("hand-controls2", {
onControllerDisconnected() {
this.connectedController = null;
this.el.setAttribute("visible", false);
- },
-
- getControllerOffset() {
- if (CONTROLLER_OFFSETS[this.connectedController] === undefined) {
- return CONTROLLER_OFFSETS.default;
- }
-
- return CONTROLLER_OFFSETS[this.connectedController];
}
});
diff --git a/src/components/icon-button.js b/src/components/icon-button.js
index 0f0e21a1dfc0205d4c4f4d4fc957a0af08e645dd..b00a1cb1802e09281376c95674fb2146a1355825 100644
--- a/src/components/icon-button.js
+++ b/src/components/icon-button.js
@@ -39,15 +39,15 @@ AFRAME.registerComponent("icon-button", {
play() {
this.updateButtonState();
- this.el.addEventListener("mouseover", this.onHover);
- this.el.addEventListener("mouseout", this.onHoverOut);
- this.el.addEventListener("click", this.onClick);
+ this.el.addEventListener("hover-start", this.onHover);
+ this.el.addEventListener("hover-end", this.onHoverOut);
+ this.el.addEventListener("grab-start", this.onClick);
},
pause() {
- this.el.removeEventListener("mouseover", this.onHover);
- this.el.removeEventListener("mouseout", this.onHoverOut);
- this.el.removeEventListener("click", this.onClick);
+ this.el.removeEventListener("hover-start", this.onHover);
+ this.el.removeEventListener("hover-end", this.onHoverOut);
+ this.el.removeEventListener("grab-start", this.onClick);
},
update() {
diff --git a/src/components/in-world-hud.js b/src/components/in-world-hud.js
index aa0d8f83f1bf2e57a6a884b16c154b41d22a0bb2..293344113b055ef5b6ff603b3b6050e8d6089280 100644
--- a/src/components/in-world-hud.js
+++ b/src/components/in-world-hud.js
@@ -11,7 +11,7 @@ AFRAME.registerComponent("in-world-hud", {
init() {
this.mic = this.el.querySelector(".mic");
this.freeze = this.el.querySelector(".freeze");
- this.pen = this.el.querySelector(".pen");
+ this.pen = this.el.querySelector(".penhud");
this.cameraBtn = this.el.querySelector(".cameraBtn");
this.background = this.el.querySelector(".bg");
const renderOrder = window.APP.RENDER_ORDER;
@@ -54,19 +54,19 @@ AFRAME.registerComponent("in-world-hud", {
this.el.sceneEl.addEventListener("stateadded", this.onStateChange);
this.el.sceneEl.addEventListener("stateremoved", this.onStateChange);
- this.mic.addEventListener("click", this.onMicClick);
- this.freeze.addEventListener("click", this.onFreezeClick);
+ this.mic.addEventListener("mousedown", this.onMicClick);
+ this.freeze.addEventListener("mousedown", this.onFreezeClick);
this.pen.addEventListener("mousedown", this.onPenClick);
- this.cameraBtn.addEventListener("click", this.onCameraClick);
+ this.cameraBtn.addEventListener("mousedown", this.onCameraClick);
},
pause() {
this.el.sceneEl.removeEventListener("stateadded", this.onStateChange);
this.el.sceneEl.removeEventListener("stateremoved", this.onStateChange);
- this.mic.removeEventListener("click", this.onMicClick);
- this.freeze.removeEventListener("click", this.onFreezeClick);
+ this.mic.removeEventListener("mousedown", this.onMicClick);
+ this.freeze.removeEventListener("mousedown", this.onFreezeClick);
this.pen.removeEventListener("mousedown", this.onPenClick);
- this.cameraBtn.removeEventListener("click", this.onCameraClick);
+ this.cameraBtn.removeEventListener("mousedown", this.onCameraClick);
}
});
diff --git a/src/components/input-configurator.js b/src/components/input-configurator.js
deleted file mode 100644
index 356213fbf319e5037bcb21166aa11e794ccc5f94..0000000000000000000000000000000000000000
--- a/src/components/input-configurator.js
+++ /dev/null
@@ -1,171 +0,0 @@
-import TouchEventsHandler from "../utils/touch-events-handler.js";
-import MouseEventsHandler from "../utils/mouse-events-handler.js";
-import GearVRMouseEventsHandler from "../utils/gearvr-mouse-events-handler.js";
-import ActionEventHandler from "../utils/action-event-handler.js";
-
-AFRAME.registerComponent("input-configurator", {
- schema: {
- cursorController: { type: "selector" },
- gazeTeleporter: { type: "selector" },
- camera: { type: "selector" },
- playerRig: { type: "selector" },
- leftController: { type: "selector" },
- rightController: { type: "selector" },
- leftControllerRayObject: { type: "string" },
- rightControllerRayObject: { type: "string" },
- gazeCursorRayObject: { type: "string" }
- },
-
- init() {
- this.inVR = this.el.sceneEl.is("vr-mode");
- this.isMobile = AFRAME.utils.device.isMobile();
- this.eventHandlers = [];
- this.controllerQueue = [];
- this.cursor = this.data.cursorController.components["cursor-controller"];
- this.gazeTeleporter = this.data.gazeTeleporter.components["teleport-controls"];
- this.cameraController = this.data.camera.components["pitch-yaw-rotator"];
- this.playerRig = this.data.playerRig;
- this.handedness = "right";
-
- this.onEnterVR = this.onEnterVR.bind(this);
- this.onExitVR = this.onExitVR.bind(this);
- this.handleControllerConnected = this.handleControllerConnected.bind(this);
- this.handleControllerDisconnected = this.handleControllerDisconnected.bind(this);
-
- this.configureInput();
- },
-
- play() {
- this.el.sceneEl.addEventListener("controllerconnected", this.handleControllerConnected);
- this.el.sceneEl.addEventListener("controllerdisconnected", this.handleControllerDisconnected);
- this.el.sceneEl.addEventListener("enter-vr", this.onEnterVR);
- this.el.sceneEl.addEventListener("exit-vr", this.onExitVR);
- },
-
- pause() {
- this.el.sceneEl.removeEventListener("controllerconnected", this.handleControllerConnected);
- this.el.sceneEl.removeEventListener("controllerdisconnected", this.handleControllerDisconnected);
- this.el.sceneEl.removeEventListener("enter-vr", this.onEnterVR);
- this.el.sceneEl.removeEventListener("exit-vr", this.onExitVR);
- },
-
- onEnterVR() {
- this.inVR = true;
- this.tearDown();
- this.configureInput();
- this.updateController();
- },
-
- onExitVR() {
- this.inVR = false;
- this.tearDown();
- this.configureInput();
- this.updateController();
- },
-
- tearDown() {
- this.eventHandlers.forEach(h => h.tearDown());
- this.eventHandlers = [];
- this.actionEventHandler = null;
- if (this.lookOnMobile) {
- this.lookOnMobile.el.removeAttribute("look-on-mobile");
- this.lookOnMobile = null;
- }
- this.cursorRequiresManagement = false;
- },
-
- addLookOnMobile() {
- const onAdded = e => {
- if (e.detail.name !== "look-on-mobile") return;
- this.lookOnMobile = this.el.sceneEl.components["look-on-mobile"];
- };
- this.el.sceneEl.addEventListener("componentinitialized", onAdded);
- // This adds look-on-mobile to the scene
- this.el.sceneEl.setAttribute("look-on-mobile", "camera", this.data.camera);
- },
-
- configureInput() {
- this.actionEventHandler = new ActionEventHandler(this.el.sceneEl, this.cursor);
- this.eventHandlers.push(this.actionEventHandler);
-
- if (this.inVR) {
- this.cameraController.pause();
- this.cursorRequiresManagement = true;
- this.cursor.el.setAttribute("cursor-controller", "near", 0);
- if (this.isMobile) {
- this.eventHandlers.push(new GearVRMouseEventsHandler(this.cursor, this.gazeTeleporter));
- } else {
- this.eventHandlers.push(new MouseEventsHandler(this.cursor, this.cameraController));
- }
- } else {
- this.cameraController.play();
- if (this.isMobile) {
- this.cursor.setCursorVisibility(false);
- this.eventHandlers.push(new TouchEventsHandler(this.cursor, this.cameraController, this.cursor.el));
- this.addLookOnMobile();
- } else {
- this.eventHandlers.push(new MouseEventsHandler(this.cursor, this.cameraController));
- this.cursor.el.setAttribute("cursor-controller", "near", 0.3);
- }
- }
- },
-
- tick() {
- if (this.cursorRequiresManagement && this.controller) {
- this.actionEventHandler.manageCursorEnabled();
- }
- },
-
- handleControllerConnected: function(e) {
- const data = {
- controller: e.target,
- handedness: e.detail.component.data.hand
- };
-
- if (data.handedness === this.handedness) {
- this.controllerQueue.unshift(data);
- } else {
- this.controllerQueue.push(data);
- }
-
- this.updateController();
- },
-
- handleControllerDisconnected: function(e) {
- for (let i = 0; i < this.controllerQueue.length; i++) {
- if (e.target === this.controllerQueue[i].controller) {
- this.controllerQueue.splice(i, 1);
- this.updateController();
- return;
- }
- }
- },
-
- updateController: function() {
- this.cursor.setCursorVisibility(true);
- const controllerData = this.controllerQueue.length ? this.controllerQueue[0] : null;
-
- if (controllerData) {
- this.controller = controllerData.controller;
- this.actionEventHandler.setHandThatAlsoDrivesCursor(this.controller);
- } else {
- this.controller = null;
- this.actionEventHandler.setHandThatAlsoDrivesCursor(null);
- }
-
- let rayObject;
- let drawLine;
- if (controllerData && this.inVR) {
- rayObject =
- controllerData.handedness === "left" ? this.data.leftControllerRayObject : this.data.rightControllerRayObject;
- drawLine = true;
- } else if (this.inVR) {
- rayObject = this.data.gazeCursorRayObject;
- drawLine = false;
- } else {
- rayObject = null;
- drawLine = false;
- }
- this.cursor.el.setAttribute("cursor-controller", { rayObject, drawLine });
- }
-});
diff --git a/src/components/pinch-to-move.js b/src/components/pinch-to-move.js
index 79e51f0dab313dc36facf3a37ac2a326053ac0e7..28dc43cb5d2584532bf549fc3b08aaf01c1ce953 100644
--- a/src/components/pinch-to-move.js
+++ b/src/components/pinch-to-move.js
@@ -1,36 +1,18 @@
+import { paths } from "../systems/userinput/paths";
+
AFRAME.registerComponent("pinch-to-move", {
schema: {
speed: { default: 0.25 }
},
init() {
- this.onPinch = this.onPinch.bind(this);
this.axis = [0, 0];
- this.pinch = 0;
- this.prevPinch = 0;
- this.needsMove = false;
- },
- play() {
- this.el.addEventListener("pinch", this.onPinch);
- },
- pause() {
- this.el.removeEventListener("pinch", this.onPinch);
},
tick() {
- if (this.needsMove) {
- const diff = this.pinch - this.prevPinch;
- this.axis[1] = diff * this.data.speed;
+ const userinput = AFRAME.scenes[0].systems.userinput;
+ const pinch = userinput.readFrameValueAtPath(paths.device.touchscreen.pinchDelta);
+ if (pinch) {
+ this.axis[1] = pinch * this.data.speed;
this.el.emit("move", { axis: this.axis });
- this.prevPinch = this.pinch;
- }
- this.needsMove = false;
- },
- onPinch(e) {
- const { isNewPinch, distance } = e.detail;
- if (isNewPinch) {
- this.prevPinch = distance;
- return;
}
- this.pinch = distance;
- this.needsMove = true;
}
});
diff --git a/src/components/pitch-yaw-rotator.js b/src/components/pitch-yaw-rotator.js
index bb7eb4c56d2ec9a21fb58d72deda5be1402c35a3..297bf4f81b5105ca229a5d34bdf527b2389725bb 100644
--- a/src/components/pitch-yaw-rotator.js
+++ b/src/components/pitch-yaw-rotator.js
@@ -1,3 +1,5 @@
+import { paths } from "../systems/userinput/paths";
+
const degToRad = THREE.Math.degToRad;
const radToDeg = THREE.Math.radToDeg;
@@ -10,6 +12,13 @@ AFRAME.registerComponent("pitch-yaw-rotator", {
init() {
this.pitch = 0;
this.yaw = 0;
+ this.onRotateX = this.onRotateX.bind(this);
+ this.el.sceneEl.addEventListener("rotateX", this.onRotateX);
+ this.pendingXRotation = 0;
+ },
+
+ onRotateX(e) {
+ this.pendingXRotation += e.detail.value;
},
look(deltaPitch, deltaYaw) {
@@ -26,7 +35,19 @@ AFRAME.registerComponent("pitch-yaw-rotator", {
},
tick() {
- this.el.object3D.rotation.set(degToRad(this.pitch), degToRad(this.yaw), 0);
- this.el.object3D.rotation.order = "YXZ";
+ const userinput = AFRAME.scenes[0].systems.userinput;
+ const cameraDelta = userinput.readFrameValueAtPath(paths.actions.cameraDelta);
+ let lookX = this.pendingXRotation;
+ let lookY = 0;
+ if (cameraDelta) {
+ lookY += cameraDelta[0];
+ lookX += cameraDelta[1];
+ }
+ if (lookX !== 0 || lookY !== 0) {
+ this.look(lookX, lookY);
+ this.el.object3D.rotation.set(degToRad(this.pitch), degToRad(this.yaw), 0);
+ this.el.object3D.rotation.order = "YXZ";
+ }
+ this.pendingXRotation = 0;
}
});
diff --git a/src/components/super-networked-interactable.js b/src/components/super-networked-interactable.js
index d2e04e23911cb499c1ce2c9eb7a1a62ab1ae2e53..4c96f2452f9945c0b9bf29be259c487b8d665c3d 100644
--- a/src/components/super-networked-interactable.js
+++ b/src/components/super-networked-interactable.js
@@ -1,3 +1,17 @@
+import { paths } from "../systems/userinput/paths";
+
+const pathsMap = {
+ "player-right-controller": {
+ scaleGrabbedGrabbable: paths.actions.rightHand.scaleGrabbedGrabbable
+ },
+ "player-left-controller": {
+ scaleGrabbedGrabbable: paths.actions.leftHand.scaleGrabbedGrabbable
+ },
+ cursor: {
+ scaleGrabbedGrabbable: paths.actions.cursor.scaleGrabbedGrabbable
+ }
+};
+
/**
* Manages ownership and haptics on an interatable
* @namespace network
@@ -28,14 +42,12 @@ AFRAME.registerComponent("super-networked-interactable", {
}
});
- this._stateAdded = this._stateAdded.bind(this);
this._onGrabStart = this._onGrabStart.bind(this);
this._onGrabEnd = this._onGrabEnd.bind(this);
this._onOwnershipLost = this._onOwnershipLost.bind(this);
this.el.addEventListener("grab-start", this._onGrabStart);
this.el.addEventListener("grab-end", this._onGrabEnd);
this.el.addEventListener("ownership-lost", this._onOwnershipLost);
- this.el.addEventListener("stateadded", this._stateAdded);
this.system.addComponent(this);
},
@@ -44,7 +56,6 @@ AFRAME.registerComponent("super-networked-interactable", {
this.el.removeEventListener("grab-start", this._onGrabStart);
this.el.removeEventListener("grab-end", this._onGrabEnd);
this.el.removeEventListener("ownership-lost", this._onOwnershipLost);
- this.el.removeEventListener("stateadded", this._stateAdded);
this.system.removeComponent(this);
},
@@ -75,23 +86,18 @@ AFRAME.registerComponent("super-networked-interactable", {
},
_changeScale: function(delta) {
- if (this.el.is("grabbed") && this.el.components.hasOwnProperty("stretchable")) {
+ if (delta && this.el.is("grabbed") && this.el.components.hasOwnProperty("stretchable")) {
this.currentScale.addScalar(delta).clampScalar(this.data.minScale, this.data.maxScale);
this.el.setAttribute("scale", this.currentScale);
this.el.components["stretchable"].stretchBody(this.el, this.currentScale);
}
},
- _stateAdded(evt) {
- switch (evt.detail) {
- case "scaleUp":
- this._changeScale(-this.data.scrollScaleDelta);
- break;
- case "scaleDown":
- this._changeScale(this.data.scrollScaleDelta);
- break;
- default:
- break;
- }
+ tick: function() {
+ const grabber = this.el.components.grabbable.grabbers[0];
+ if (!(grabber && pathsMap[grabber.id])) return;
+
+ const userinput = AFRAME.scenes[0].systems.userinput;
+ this._changeScale(userinput.readFrameValueAtPath(pathsMap[grabber.id].scaleGrabbedGrabbable));
}
});
diff --git a/src/components/super-spawner.js b/src/components/super-spawner.js
index 77e18f67a737f5bf5fdfddf30b41e624d65ef1a4..a786639e1b828e34d1daf36bedd10e500d275ed1 100644
--- a/src/components/super-spawner.js
+++ b/src/components/super-spawner.js
@@ -1,3 +1,4 @@
+import { paths } from "../systems/userinput/paths";
import { addMedia } from "../utils/media-utils";
import { waitForEvent } from "../utils/async-utils";
import { ObjectContentOrigins } from "../object-types";
@@ -114,7 +115,10 @@ AFRAME.registerComponent("super-spawner", {
},
async onSpawnEvent() {
- const controllerCount = this.el.sceneEl.components["input-configurator"].controllerQueue.length;
+ const userinput = AFRAME.scenes[0].systems.userinput;
+ const leftPose = userinput.readFrameValueAtPath(paths.actions.leftHand.pose);
+ const rightPose = userinput.readFrameValueAtPath(paths.actions.rightHand.pose);
+ const controllerCount = leftPose && rightPose ? 2 : leftPose || rightPose ? 1 : 0;
const using6DOF = controllerCount > 1 && this.el.sceneEl.is("vr-mode");
const hand = using6DOF ? this.data.superHand : this.data.cursorSuperHand;
@@ -165,8 +169,6 @@ AFRAME.registerComponent("super-spawner", {
);
entity.object3D.scale.copy(this.data.useCustomSpawnScale ? this.data.spawnScale : this.el.object3D.scale);
- this.activateCooldown();
-
await waitForEvent("body-loaded", entity);
// If we are still holding the spawner with the hand that grabbed to create this entity, release the spawner and grab the entity
@@ -179,6 +181,8 @@ AFRAME.registerComponent("super-spawner", {
hand.emit(this.data.grabEvents[i], { targetEntity: entity });
}
}
+
+ this.activateCooldown();
},
onGrabEnd(e) {
diff --git a/src/components/tools/pen.js b/src/components/tools/pen.js
index 855c94e0a1d11f5905dd20f55acdda27ebad227d..dd52ca4ab14030ddf064a9d5ae9f0ef9a7d4456a 100644
--- a/src/components/tools/pen.js
+++ b/src/components/tools/pen.js
@@ -1,3 +1,28 @@
+import { paths } from "../../systems/userinput/paths";
+
+const pathsMap = {
+ "player-right-controller": {
+ startDrawing: paths.actions.rightHand.startDrawing,
+ stopDrawing: paths.actions.rightHand.stopDrawing,
+ penNextColor: paths.actions.rightHand.penNextColor,
+ penPrevColor: paths.actions.rightHand.penPrevColor,
+ scalePenTip: paths.actions.rightHand.scalePenTip
+ },
+ "player-left-controller": {
+ startDrawing: paths.actions.leftHand.startDrawing,
+ stopDrawing: paths.actions.leftHand.stopDrawing,
+ penNextColor: paths.actions.leftHand.penNextColor,
+ penPrevColor: paths.actions.leftHand.penPrevColor,
+ scalePenTip: paths.actions.leftHand.scalePenTip
+ },
+ cursor: {
+ startDrawing: paths.actions.cursor.startDrawing,
+ stopDrawing: paths.actions.cursor.stopDrawing,
+ penNextColor: paths.actions.cursor.penNextColor,
+ penPrevColor: paths.actions.cursor.penPrevColor,
+ scalePenTip: paths.actions.cursor.scalePenTip
+ }
+};
/**
* Pen tool
* A tool that allows drawing on networked-drawing components.
@@ -41,9 +66,6 @@ AFRAME.registerComponent("pen", {
},
init() {
- this._stateAdded = this._stateAdded.bind(this);
- this._stateRemoved = this._stateRemoved.bind(this);
-
this.timeSinceLastDraw = 0;
this.lastPosition = new THREE.Vector3();
@@ -65,14 +87,6 @@ AFRAME.registerComponent("pen", {
play() {
this.drawingManager = document.querySelector(this.data.drawingManager).components["drawing-manager"];
this.drawingManager.createDrawing();
-
- this.el.parentNode.addEventListener("stateadded", this._stateAdded);
- this.el.parentNode.addEventListener("stateremoved", this._stateRemoved);
- },
-
- pause() {
- this.el.parentNode.removeEventListener("stateadded", this._stateAdded);
- this.el.parentNode.removeEventListener("stateremoved", this._stateRemoved);
},
update(prevData) {
@@ -85,6 +99,28 @@ AFRAME.registerComponent("pen", {
},
tick(t, dt) {
+ const grabber = this.el.parentNode.components.grabbable.grabbers[0];
+ const userinput = AFRAME.scenes[0].systems.userinput;
+ if (grabber && pathsMap[grabber.id]) {
+ const paths = pathsMap[grabber.id];
+ if (userinput.readFrameValueAtPath(paths.startDrawing)) {
+ this._startDraw();
+ }
+ if (userinput.readFrameValueAtPath(paths.stopDrawing)) {
+ this._endDraw();
+ }
+ const penScaleMod = userinput.readFrameValueAtPath(paths.scalePenTip);
+ if (penScaleMod) {
+ this._changeRadius(penScaleMod);
+ }
+ if (userinput.readFrameValueAtPath(paths.penNextColor)) {
+ this._changeColor(1);
+ }
+ if (userinput.readFrameValueAtPath(paths.penPrevColor)) {
+ this._changeColor(-1);
+ }
+ }
+
this.el.object3D.getWorldPosition(this.worldPosition);
if (!almostEquals(0.005, this.worldPosition, this.lastPosition)) {
@@ -104,6 +140,10 @@ AFRAME.registerComponent("pen", {
this.timeSinceLastDraw = time % this.data.drawFrequency;
}
+
+ if (this.currentDrawing && !grabber) {
+ this._endDraw();
+ }
},
//helper function to get normal of direction of drawing cross direction to camera
@@ -145,44 +185,5 @@ AFRAME.registerComponent("pen", {
_changeRadius(mod) {
this.data.radius = Math.max(this.data.minRadius, Math.min(this.data.radius + mod, this.data.maxRadius));
this.el.setAttribute("radius", this.data.radius);
- },
-
- _stateAdded(evt) {
- switch (evt.detail) {
- case "activated":
- this._startDraw();
- break;
- case "colorNext":
- this._changeColor(1);
- break;
- case "colorPrev":
- this._changeColor(-1);
- break;
- case "radiusUp":
- this._changeRadius(this.data.minRadius);
- break;
- case "radiusDown":
- this._changeRadius(-this.data.minRadius);
- break;
- case "grabbed":
- this.grabbed = true;
- break;
- default:
- break;
- }
- },
-
- _stateRemoved(evt) {
- switch (evt.detail) {
- case "activated":
- this._endDraw();
- break;
- case "grabbed":
- this.grabbed = false;
- this._endDraw();
- break;
- default:
- break;
- }
}
});
diff --git a/src/components/virtual-gamepad-controls.js b/src/components/virtual-gamepad-controls.js
index 309b2210bfa34be8daed0df28d91d31b8770ca38..f4790dd2b0c02cf9e1565c9d8426c6af359c4c71 100644
--- a/src/components/virtual-gamepad-controls.js
+++ b/src/components/virtual-gamepad-controls.js
@@ -94,7 +94,7 @@ AFRAME.registerComponent("virtual-gamepad-controls", {
onMoveJoystickChanged(event, joystick) {
const angle = joystick.angle.radian;
const force = joystick.force < 1 ? joystick.force : 1;
- const moveStrength = 0.85;
+ const moveStrength = 1.85;
const x = Math.cos(angle) * force * moveStrength;
const z = Math.sin(angle) * force * moveStrength;
this.moving = true;
diff --git a/src/hub.html b/src/hub.html
index 4884abca46af25a088c333af4fab7ad673731ec9..99232684d4d2da80d13a3e953ffad076f3eeb748 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -30,18 +30,8 @@
freeze-controller="toggleEvent: action_freeze"
personal-space-bubble="debug: false;"
vr-mode-ui="enabled: false"
- pinch-to-move
stats-plus="false"
- input-configurator="
- gazeCursorRayObject: #player-camera;
- cursorController: #cursor-controller;
- gazeTeleporter: #gaze-teleport;
- camera: #player-camera;
- playerRig: #player-rig;
- leftController: #player-left-controller;
- leftControllerRayObject: #player-left-controller;
- rightController: #player-right-controller;
- rightControllerRayObject: #player-right-controller;"
+ action-to-event__mute="path: /actions/muteMic; event: action_mute;"
>
<a-assets>
@@ -159,8 +149,6 @@
position-at-box-shape-border="target:.delete-button"
destroy-at-extreme-distances
rotation
- activatable__increase-scale="buttonStartEvents: scroll_right; buttonEndEvents: horizontal_scroll_release; activatedState: scaleUp;"
- activatable__decrease-scale="buttonStartEvents: scroll_left; buttonEndEvents: horizontal_scroll_release; activatedState: scaleDown;"
>
<!-- HACK: rotation component above is required for its side effect of setting YXZ order -->
<a-entity class="delete-button" visible-while-frozen>
@@ -172,18 +160,12 @@
<template id="pen-interactable">
<a-entity
- class="interactable toggle"
+ class="pen interactable"
super-networked-interactable="counter: #pen-counter;"
body="type: dynamic; shape: none; mass: 1;"
- grabbable-toggle="maxGrabbers: 1;"
+ grabbable="maxGrabbers: 1"
sticky-object="autoLockOnRelease: true; autoLockOnLoad: true;"
hoverable
- activatable__draw-hand="buttonStartEvents: secondary_hand_grab; buttonEndEvents: secondary_hand_release;"
- activatable__draw-cursor="buttonStartEvents: secondary-cursor-grab; buttonEndEvents: secondary-cursor-release;"
- activatable__color-next="buttonStartEvents: next_color, scroll_right; buttonEndEvents: thumb_up, secondary_hand_release, horizontal_scroll_release; activatedState: colorNext;"
- activatable__color-prev="buttonStartEvents: previous_color, scroll_left; buttonEndEvents: thumb_up, secondary_hand_release, horizontal_scroll_release; activatedState: colorPrev;"
- activatable__increase-radius="buttonStartEvents: increase_radius, scroll_up; buttonEndEvents: thumb_up, secondary_hand_release, vertical_scroll_release; activatedState: radiusUp;"
- activatable__decrease-radius="buttonStartEvents: decrease_radius, scroll_down; buttonEndEvents: thumb_up, secondary_hand_release, vertical_scroll_release; activatedState: radiusDown;"
scale="0.5 0.5 0.5"
>
<a-sphere
@@ -205,11 +187,10 @@
<template id="interactable-camera">
<a-entity
- class="interactable toggle"
- grabbable-toggle="maxGrabbers: 1;"
+ class="interactable icamera"
+ grabbable
hoverable
- activatable__snap-hand="buttonStartEvents: secondary_hand_grab; buttonEndEvents: secondary_hand_release;"
- activatable__snap-cursor="buttonStartEvents: secondary-cursor-grab; buttonEndEvents: secondary-cursor-release;"
+ stretchable
camera-tool
body="type: dynamic; shape: none; mass: 1;"
shape="shape: box; halfExtents: 0.22 0.145 0.1; offset: 0 0.02 0"
@@ -217,6 +198,7 @@
super-networked-interactable="counter: #camera-counter;"
position-at-box-shape-border="target:.delete-button"
rotation
+ auto-scale-cannon-physics-body
>
<a-entity class="delete-button" visible-while-frozen>
<a-entity mixin="rounded-text-button" remove-networked-object-button position="0 0 0"> </a-entity>
@@ -319,6 +301,8 @@
dragDropEndButtons: cursor-release, primary_hand_release, secondary_hand_release;
activateStartButtons: secondary-cursor-grab, secondary_hand_grab, next_color, previous_color, increase_radius, decrease_radius, scroll_up, scroll_down, scroll_left, scroll_right;
activateEndButtons: secondary-cursor-release, secondary_hand_release, vertical_scroll_release, horizontal_scroll_release, thumb_up;"
+ action-to-event__grab="path: /actions/cursorGrab; event: cursor-grab"
+ action-to-event__drop="path: /actions/cursorDrop; event: cursor-release"
></a-sphere>
<!-- Player Rig -->
@@ -341,10 +325,10 @@
<a-rounded height="0.08" width="0.5" color="#000000" position="-0.20 0.125 0" radius="0.040" opacity="0.35" class="hud bg"></a-rounded>
<a-entity id="hud-hub-entry-link" text=" value:; width:1.1; align:center;" position="0.05 0.165 0"></a-entity>
<a-rounded height="0.13" width="0.59" color="#000000" position="-0.24 -0.065 0" radius="0.065" opacity="0.35" class="hud bg"></a-rounded>
- <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Mute Mic; activeTooltipText: Unmute Mic; image: #mute-off; hoverImage: #mute-off-hover; activeImage: #mute-on; activeHoverImage: #mute-on-hover" scale="0.1 0.1 0.1" position="-0.17 0 0.001" class="ui hud mic" material="alphaTest:0.1;"></a-image>
- <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Pause; activeTooltipText: Resume; image: #freeze-off; hoverImage: #freeze-off-hover; activeImage: #freeze-on; activeHoverImage: #freeze-on-hover" scale="0.2 0.2 0.2" position="0 0 0.005" class="ui hud freeze"></a-image>
- <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Pen; activeTooltipText: Pen; image: #spawn-pen; hoverImage: #spawn-pen-hover; activeImage: #spawn-pen; activeHoverImage: #spawn-pen-hover" scale="0.1 0.1 0.1" position="0.17 0 0.001" class="ui hud pen" material="alphaTest:0.1;"></a-image>
- <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Camera; activeTooltipText: Camera; image: #spawn-camera; hoverImage: #spawn-camera-hover; activeImage: #spawn-camera; activeHoverImage: #spawn-camera-hover" scale="0.1 0.1 0.1" position="0.28 0 0.001" class="ui hud cameraBtn" material="alphaTest:0.1;"></a-image>
+ <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Mute Mic; activeTooltipText: Unmute Mic; image: #mute-off; hoverImage: #mute-off-hover; activeImage: #mute-on; activeHoverImage: #mute-on-hover" scale="0.1 0.1 0.1" position="-0.17 0 0.001" class="ui hud mic" material="alphaTest:0.1;" hoverable></a-image>
+ <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Pause; activeTooltipText: Resume; image: #freeze-off; hoverImage: #freeze-off-hover; activeImage: #freeze-on; activeHoverImage: #freeze-on-hover" scale="0.2 0.2 0.2" position="0 0 0.005" class="ui hud freeze" hoverable></a-image>
+ <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Pen; activeTooltipText: Pen; image: #spawn-pen; hoverImage: #spawn-pen-hover; activeImage: #spawn-pen; activeHoverImage: #spawn-pen-hover" scale="0.1 0.1 0.1" position="0.17 0 0.001" class="ui hud penhud" material="alphaTest:0.1;" hoverable></a-image>
+ <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Camera; activeTooltipText: Camera; image: #spawn-camera; hoverImage: #spawn-camera-hover; activeImage: #spawn-camera; activeHoverImage: #spawn-camera-hover" scale="0.1 0.1 0.1" position="0.28 0 0.001" class="ui hud cameraBtn" material="alphaTest:0.1;" hoverable></a-image>
<a-rounded visible="false" id="hud-tooltip" height="0.08" width="0.3" color="#000000" position="-0.15 -0.2 0" rotation="-20 0 0" radius="0.025" opacity="0.35" class="hud bg">
<a-entity text="value: Mute Mic; align:center;" position="0.15 0.04 0.001" ></a-entity>
</a-rounded>
@@ -367,10 +351,12 @@
button: gaze-teleport_;
collisionEntities: [nav-mesh];
drawIncrementally: true;
- incrementalDrawMs: 600;
+ incrementalDrawMs: 300;
hitOpacity: 0.3;
missOpacity: 0.1;
curveShootingSpeed: 12;"
+ action-to-event__start-teleport="path: /actions/startTeleport; event: gaze-teleport_down"
+ action-to-event__stop-teleport="path: /actions/stopTeleport; event: gaze-teleport_up"
></a-entity>
</a-entity>
@@ -382,10 +368,10 @@
teleport-controls="
cameraRig: #player-rig;
teleportOrigin: #player-camera;
- button: cursor-teleport_;
+ button: left-teleport_;
collisionEntities: [nav-mesh];
drawIncrementally: true;
- incrementalDrawMs: 600;
+ incrementalDrawMs: 300;
hitOpacity: 0.3;
missOpacity: 0.1;
curveShootingSpeed: 12;"
@@ -393,6 +379,10 @@
body="type: static; shape: none;"
mixin="controller-super-hands"
controls-shape-offset
+ action-to-event__a="path: /actions/leftHandStartTeleport; event: left-teleport_down;"
+ action-to-event__b="path: /actions/leftHandStopTeleport; event: left-teleport_up;"
+ action-to-event__c="path: /actions/leftHandGrab; event: primary_hand_grab;"
+ action-to-event__d="path: /actions/leftHandDrop; event: primary_hand_release;"
>
</a-entity>
@@ -404,18 +394,21 @@
teleport-controls="
cameraRig: #player-rig;
teleportOrigin: #player-camera;
- button: cursor-teleport_;
+ button: right-teleport_;
collisionEntities: [nav-mesh];
drawIncrementally: true;
- incrementalDrawMs: 600;
+ incrementalDrawMs: 300;
hitOpacity: 0.3;
missOpacity: 0.1;
curveShootingSpeed: 12;"
haptic-feedback
- event-repeater="events: haptic_pulse; eventSource: #cursor"
body="type: static; shape: none;"
mixin="controller-super-hands"
controls-shape-offset
+ action-to-event__a="path: /actions/rightHandStartTeleport; event: right-teleport_down;"
+ action-to-event__b="path: /actions/rightHandStopTeleport; event: right-teleport_up;"
+ action-to-event__c="path: /actions/rightHandGrab; event: primary_hand_grab;"
+ action-to-event__d="path: /actions/rightHandDrop; event: primary_hand_release;"
>
</a-entity>
@@ -462,12 +455,13 @@
</a-entity>
<a-entity
- super-spawner="
- template: #pen-interactable;
- src: https://asset-bundles-prod.reticulum.io/interactables/DrawingPen/DrawingPen-34fb4aee27.gltf;
- spawnEvent: spawn_pen;
- superHand: #player-right-controller;
- cursorSuperHand: #cursor;"
+ action-to-event="path: /actions/spawnPen; event: spawn_pen"
+ super-spawner="
+ template: #pen-interactable;
+ src: https://asset-bundles-prod.reticulum.io/interactables/DrawingPen/DrawingPen-34fb4aee27.gltf;
+ spawnEvent: spawn_pen;
+ superHand: #player-right-controller;
+ cursorSuperHand: #cursor;"
></a-entity>
</a-scene>
diff --git a/src/hub.js b/src/hub.js
index 78efa464c17babe257339f2c39a18c1b99d5c873..4c1f5ca4186d920c339e1703ec7bfcd1069cdd1a 100644
--- a/src/hub.js
+++ b/src/hub.js
@@ -11,7 +11,6 @@ import "three/examples/js/loaders/GLTFLoader";
import "networked-aframe/src/index";
import "naf-janus-adapter";
import "aframe-teleport-controls";
-import "aframe-input-mapping-component";
import "aframe-billboard-component";
import "aframe-rounded";
import "webrtc-adapter";
@@ -22,17 +21,8 @@ import { getReticulumFetchUrl } from "./utils/phoenix-utils";
import nextTick from "./utils/next-tick";
import { addAnimationComponents } from "./utils/animation";
-
-import trackpad_dpad4 from "./behaviours/trackpad-dpad4";
-import trackpad_scrolling from "./behaviours/trackpad-scrolling";
-import joystick_dpad4 from "./behaviours/joystick-dpad4";
-import msft_mr_axis_with_deadzone from "./behaviours/msft-mr-axis-with-deadzone";
-import { PressedMove } from "./activators/pressedmove";
-import { ReverseY } from "./activators/reversey";
import { Presence } from "phoenix";
-import "./activators/shortpress";
-
import "./components/scene-components";
import "./components/wasd-to-analog2d"; //Might be a behaviour or activator in the future
import "./components/mute-mic";
@@ -61,9 +51,7 @@ import "./components/networked-avatar";
import "./components/avatar-replay";
import "./components/media-views";
import "./components/pinch-to-move";
-import "./components/look-on-mobile";
import "./components/pitch-yaw-rotator";
-import "./components/input-configurator";
import "./components/auto-scale-cannon-physics-body";
import "./components/position-at-box-shape-border";
import "./components/remove-networked-object-button";
@@ -71,6 +59,7 @@ import "./components/destroy-at-extreme-distances";
import "./components/gamma-factor";
import "./components/visible-to-owner";
import "./components/camera-tool";
+import "./components/action-to-event";
import ReactDOM from "react-dom";
import React from "react";
@@ -87,6 +76,7 @@ import "./systems/nav";
import "./systems/personal-space-bubble";
import "./systems/app-mode";
import "./systems/exit-on-blur";
+import "./systems/userinput/userinput";
import "./gltf-component-mappings";
@@ -112,7 +102,6 @@ import "./components/super-networked-interactable";
import "./components/networked-counter";
import "./components/event-repeater";
import "./components/controls-shape-offset";
-import "./components/grabbable-toggle";
import "./components/cardboard-controls";
@@ -126,7 +115,6 @@ import "./components/tools/networked-drawing";
import "./components/tools/drawing-manager";
import registerNetworkSchemas from "./network-schemas";
-import { config as inputConfig } from "./input-mappings";
import registerTelemetry from "./telemetry";
import { getAvailableVREntryTypes } from "./utils/vr-caps-detect.js";
@@ -144,14 +132,6 @@ if (!isBotMode && !isTelemetryDisabled) {
disableiOSZoom();
-AFRAME.registerInputBehaviour("trackpad_dpad4", trackpad_dpad4);
-AFRAME.registerInputBehaviour("trackpad_scrolling", trackpad_scrolling);
-AFRAME.registerInputBehaviour("joystick_dpad4", joystick_dpad4);
-AFRAME.registerInputBehaviour("msft_mr_axis_with_deadzone", msft_mr_axis_with_deadzone);
-AFRAME.registerInputActivator("pressedmove", PressedMove);
-AFRAME.registerInputActivator("reverseY", ReverseY);
-AFRAME.registerInputMappings(inputConfig, true);
-
const concurrentLoadDetector = new ConcurrentLoadDetector();
concurrentLoadDetector.start();
@@ -495,11 +475,11 @@ document.addEventListener("DOMContentLoaded", async () => {
NAF.connection.adapter.onData(data);
});
- hubPhxChannel.on("message", data => {
- const userInfo = hubPhxPresence.state[data.session_id];
+ hubPhxChannel.on("message", ({ session_id, type, body }) => {
+ const userInfo = hubPhxPresence.state[session_id];
if (!userInfo) return;
- addToPresenceLog({ type: "message", name: userInfo.metas[0].profile.displayName, body: data.body });
+ addToPresenceLog({ name: userInfo.metas[0].profile.displayName, type, body });
});
// Reticulum global channel
diff --git a/src/input-mappings.js b/src/input-mappings.js
deleted file mode 100644
index 6b1b4e955b95acfd13c469804c2f1478fd1435a1..0000000000000000000000000000000000000000
--- a/src/input-mappings.js
+++ /dev/null
@@ -1,173 +0,0 @@
-const inGameActions = {
- // Define action sets here.
- // An action set separates "driving" controls from "menu" controls.
- // Only one action set is active at a time.
- default: {
- move: { label: "Move" },
- snap_rotate_left: { label: "Snap Rotate Left" },
- snap_rotate_right: { label: "Snap Rotate Right" },
- action_mute: { label: "Mute" },
- action_teleport_down: { label: "Teleport Aim" },
- action_teleport_up: { label: "Teleport" },
- action_share_screen: { label: "Share Screen" }
- },
- hud: {
- action_ui_select_down: { label: "Select UI item" },
- action_ui_select_up: { label: "Select UI item" }
- }
-};
-
-const config = {
- behaviours: {
- default: {
- "oculus-touch-controls": {
- joystick: "joystick_dpad4"
- },
- "vive-controls": {
- trackpad: "trackpad_dpad4",
- trackpad_scrolling: "trackpad_scrolling"
- },
- "windows-motion-controls": {
- joystick: "joystick_dpad4",
- axisMoveWithDeadzone: "msft_mr_axis_with_deadzone"
- },
- "daydream-controls": {
- trackpad: "trackpad_dpad4",
- axisMoveWithDeadzone: "msft_mr_axis_with_deadzone"
- },
- "gearvr-controls": {
- trackpad: "trackpad_dpad4",
- trackpad_scrolling: "trackpad_scrolling"
- },
- "oculus-go-controls": {
- trackpad: "trackpad_dpad4",
- trackpad_scrolling: "trackpad_scrolling"
- }
- }
- },
- mappings: {
- default: {
- "vive-controls": {
- "trackpad.pressedmove": { left: "move" },
- trackpad_dpad4_pressed_west_down: { right: "snap_rotate_left" },
- trackpad_dpad4_pressed_east_down: { right: "snap_rotate_right" },
- trackpad_dpad4_pressed_center_down: { right: "action_primary_down" },
- trackpad_dpad4_pressed_north_down: { right: "action_primary_down" },
- trackpad_dpad4_pressed_south_down: { right: "action_primary_down" },
- trackpadup: { left: "action_primary_up", right: "action_primary_up" },
- menudown: "thumb_down",
- menuup: "thumb_up",
- gripdown: ["primary_action_grab", "middle_ring_pinky_down"],
- gripup: ["primary_action_release", "middle_ring_pinky_up"],
- trackpadtouchstart: "thumb_down",
- trackpadtouchend: "thumb_up",
- triggerdown: ["secondary_action_grab", "index_down"],
- triggerup: ["secondary_action_release", "index_up"],
- scroll: { left: "scroll_move", right: "scroll_move" }
- },
- "oculus-touch-controls": {
- joystick_dpad4_west: { right: "snap_rotate_left" },
- joystick_dpad4_east: { right: "snap_rotate_right" },
- gripdown: ["primary_action_grab", "middle_ring_pinky_down"],
- gripup: ["primary_action_release", "middle_ring_pinky_up"],
- abuttontouchstart: ["thumb_down", "increase_radius"],
- abuttontouchend: "thumb_up",
- bbuttontouchstart: ["thumb_down", "decrease_radius"],
- bbuttontouchend: "thumb_up",
- xbuttontouchstart: ["thumb_down", "increase_radius"],
- xbuttontouchend: "thumb_up",
- ybuttontouchstart: ["thumb_down", "decrease_radius"],
- ybuttontouchend: "thumb_up",
- surfacetouchstart: ["thumb_down", "next_color"],
- surfacetouchend: "thumb_up",
- thumbsticktouchstart: "thumb_down",
- thumbsticktouchend: "thumb_up",
- triggerdown: ["secondary_action_grab", "index_down"],
- triggerup: ["secondary_action_release", "index_up"],
- "axismove.reverseY": { left: "move", right: "scroll_move" },
- abuttondown: "action_primary_down",
- abuttonup: "action_primary_up"
- },
- "windows-motion-controls": {
- joystick_dpad4_west: {
- right: "snap_rotate_left"
- },
- joystick_dpad4_east: {
- right: "snap_rotate_right"
- },
- "trackpad.pressedmove": { left: "move" },
- joystick_dpad4_pressed_west_down: { right: "snap_rotate_left" },
- joystick_dpad4_pressed_east_down: { right: "snap_rotate_right" },
- trackpaddown: { right: "action_primary_down" },
- trackpadup: { left: "action_primary_up", right: "action_primary_up" },
- menudown: "thumb_down",
- menuup: "thumb_up",
- gripdown: ["primary_action_grab", "middle_ring_pinky_down"],
- gripup: ["primary_action_release", "middle_ring_pinky_up"],
- trackpadtouchstart: "thumb_down",
- trackpadtouchend: "thumb_up",
- triggerdown: ["secondary_action_grab", "index_down"],
- triggerup: ["secondary_action_release", "index_up"],
- axisMoveWithDeadzone: { left: "move", right: "scroll_move" }
- },
- "daydream-controls": {
- trackpad_dpad4_pressed_west_down: "snap_rotate_left",
- trackpad_dpad4_pressed_east_down: "snap_rotate_right",
- trackpad_dpad4_pressed_center_down: ["action_primary_down"],
- trackpad_dpad4_pressed_north_down: ["action_primary_down"],
- trackpad_dpad4_pressed_south_down: ["action_primary_down"],
- trackpadup: ["action_primary_up"],
- axisMoveWithDeadzone: "scroll_move"
- },
- "gearvr-controls": {
- trackpad_dpad4_pressed_west_down: "snap_rotate_left",
- trackpad_dpad4_pressed_east_down: "snap_rotate_right",
- trackpad_dpad4_pressed_center_down: ["action_primary_down"],
- trackpad_dpad4_pressed_north_down: ["action_primary_down"],
- trackpad_dpad4_pressed_south_down: ["action_primary_down"],
- trackpadup: ["action_primary_up"],
- triggerdown: ["action_secondary_down"],
- triggerup: ["action_secondary_up"],
- scroll: "scroll_move"
- },
- "oculus-go-controls": {
- trackpad_dpad4_pressed_west_down: "snap_rotate_left",
- trackpad_dpad4_pressed_east_down: "snap_rotate_right",
- trackpad_dpad4_pressed_center_down: ["action_primary_down"],
- trackpad_dpad4_pressed_north_down: ["action_primary_down"],
- trackpad_dpad4_pressed_south_down: ["action_primary_down"],
- trackpadup: ["action_primary_up"],
- triggerdown: ["action_secondary_down"],
- triggerup: ["action_secondary_up"],
- scroll: "scroll_move"
- },
- keyboard: {
- m_press: "action_mute",
- q_press: "snap_rotate_left",
- e_press: "snap_rotate_right",
- b_press: "action_share_screen",
-
- // We can't create a keyboard behaviour with AFIM yet,
- // so these will get captured by wasd-to-analog2d
- w_down: "w_down",
- w_up: "w_up",
- a_down: "a_down",
- a_up: "a_up",
- s_down: "s_down",
- s_up: "s_up",
- d_down: "d_down",
- d_up: "d_up",
- arrowup_down: "w_down",
- arrowup_up: "w_up",
- arrowleft_down: "a_down",
- arrowleft_up: "a_up",
- arrowdown_down: "s_down",
- arrowdown_up: "s_up",
- arrowright_down: "d_down",
- arrowright_up: "d_up"
- }
- }
- }
-};
-
-export { inGameActions, config };
diff --git a/src/materials/MobileStandardMaterial.js b/src/materials/MobileStandardMaterial.js
new file mode 100644
index 0000000000000000000000000000000000000000..aa9e10de101be73807c0259e1eb75f222e4d974d
--- /dev/null
+++ b/src/materials/MobileStandardMaterial.js
@@ -0,0 +1,110 @@
+const VERTEX_SHADER = `
+#include <common>
+#include <uv_pars_vertex>
+#include <uv2_pars_vertex>
+#include <color_pars_vertex>
+#include <fog_pars_vertex>
+#include <morphtarget_pars_vertex>
+#include <skinning_pars_vertex>
+#include <logdepthbuf_pars_vertex>
+#include <clipping_planes_pars_vertex>
+
+void main() {
+ #include <uv_vertex>
+ #include <uv2_vertex>
+ #include <color_vertex>
+ #include <skinbase_vertex>
+
+ #include <begin_vertex>
+ #include <morphtarget_vertex>
+ #include <skinning_vertex>
+ #include <project_vertex>
+ #include <logdepthbuf_vertex>
+
+ #include <worldpos_vertex>
+ #include <clipping_planes_vertex>
+ #include <fog_vertex>
+}
+`;
+
+const FRAGMENT_SHADER = `
+uniform vec3 diffuse;
+uniform vec3 emissive;
+uniform float opacity;
+
+#include <common>
+#include <color_pars_fragment>
+#include <uv_pars_fragment>
+#include <uv2_pars_fragment>
+#include <map_pars_fragment>
+#include <aomap_pars_fragment>
+#include <emissivemap_pars_fragment>
+#include <fog_pars_fragment>
+#include <logdepthbuf_pars_fragment>
+#include <clipping_planes_pars_fragment>
+
+void main() {
+ #include <clipping_planes_fragment>
+
+ vec4 diffuseColor = vec4(diffuse, opacity);
+ ReflectedLight reflectedLight = ReflectedLight(vec3(0.0), vec3(0.0), vec3(0.0), vec3(0.0));
+ vec3 totalEmissiveRadiance = emissive;
+
+ #include <logdepthbuf_fragment>
+ #include <map_fragment>
+ #include <color_fragment>
+ #include <alphatest_fragment>
+ #include <emissivemap_fragment>
+
+ reflectedLight.indirectDiffuse += vec3(1.0);
+
+ #include <aomap_fragment>
+
+ reflectedLight.indirectDiffuse *= diffuseColor.rgb;
+
+ vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + reflectedLight.directSpecular + reflectedLight.indirectSpecular + totalEmissiveRadiance;
+
+ gl_FragColor = vec4(outgoingLight, diffuseColor.a);
+
+ #include <premultiplied_alpha_fragment>
+ #include <tonemapping_fragment>
+ #include <encodings_fragment>
+ #include <fog_fragment>
+}
+`;
+
+export default class MobileStandardMaterial extends THREE.ShaderMaterial {
+ static fromStandardMaterial(material) {
+ const parameters = {
+ vertexShader: VERTEX_SHADER,
+ fragmentShader: FRAGMENT_SHADER,
+ uniforms: {
+ uvTransform: { value: new THREE.Matrix3() },
+ diffuse: { value: material.color },
+ opacity: { value: material.opacity },
+ map: { value: material.map },
+ aoMapIntensity: { value: material.aoMapIntensity },
+ aoMap: { value: material.aoMap },
+ emissive: { value: material.emissive },
+ emissiveMap: { value: material.emissiveMap }
+ },
+ fog: true,
+ lights: false,
+ opacity: material.opacity,
+ transparent: material.transparent,
+ skinning: material.skinning,
+ morphTargets: material.morphTargets
+ };
+
+ const mobileMaterial = new MobileStandardMaterial(parameters);
+
+ mobileMaterial.color = material.color;
+ mobileMaterial.map = material.map;
+ mobileMaterial.aoMap = material.aoMap;
+ mobileMaterial.aoMapIntensity = material.aoMapIntensity;
+ mobileMaterial.emissive = material.emissive;
+ mobileMaterial.emissiveMap = material.emissiveMap;
+
+ return mobileMaterial;
+ }
+}
diff --git a/src/react-components/home-root.js b/src/react-components/home-root.js
index f631263a14237f615238e8548fcc4f3ecd093616..c95a342fc2d4ac12755a48321a3bcb97848aa4bb 100644
--- a/src/react-components/home-root.js
+++ b/src/react-components/home-root.js
@@ -175,18 +175,15 @@ class HomeRoot extends Component {
<div className={styles.headerContent}>
<div className={styles.titleAndNav}>
<div className={styles.links}>
- <a
- href="https://blog.mozvr.com/introducing-hubs-a-new-way-to-get-together-online/"
- rel="noreferrer noopener"
- >
- <FormattedMessage id="home.about_link" />
- </a>
<a href="https://github.com/mozilla/hubs" rel="noreferrer noopener">
<FormattedMessage id="home.source_link" />
</a>
<a href="https://discord.gg/XzrGUY8" rel="noreferrer noopener">
<FormattedMessage id="home.community_link" />
</a>
+ <a href="/spoke" rel="noreferrer noopener">
+ Spoke
+ </a>
</div>
</div>
</div>
@@ -221,10 +218,17 @@ class HomeRoot extends Component {
/>
</div>
{this.state.environments.length > 1 && (
- <div className={styles.joinButton}>
- <a href="/link">
- <FormattedMessage id="home.join_room" />
- </a>
+ <div>
+ <div className={styles.joinButton}>
+ <a href="/link">
+ <FormattedMessage id="home.join_room" />
+ </a>
+ </div>
+ <div className={styles.spokeButton}>
+ <a href="/spoke">
+ <FormattedMessage id="home.create_with_spoke" />
+ </a>
+ </div>
</div>
)}
</div>
diff --git a/src/react-components/presence-log.js b/src/react-components/presence-log.js
index bf9a7b86cb2324546eba0d75c3c152d0b01db4c5..d46550957f1eb7918b9310263ada1a2f64537dfb 100644
--- a/src/react-components/presence-log.js
+++ b/src/react-components/presence-log.js
@@ -42,13 +42,34 @@ export default class PresenceLog extends Component {
<b>{e.oldName}</b> <FormattedMessage id="presence.name_change" /> <b>{e.newName}</b>.
</div>
);
- case "message":
+ case "chat":
return (
<div key={e.key} className={classNames(entryClasses)}>
<b>{e.name}</b>:{" "}
<Linkify properties={{ target: "_blank", rel: "noopener referrer" }}>{toEmojis(e.body)}</Linkify>
</div>
);
+ case "spawn": {
+ const { src } = e.body;
+ return (
+ <div key={e.key} className={classNames(entryClasses, styles.media)}>
+ <a href={src} target="_blank" rel="noopener noreferrer">
+ <img src={src} />
+ </a>
+ <div className={styles.mediaBody}>
+ <span>
+ <b>{e.name}</b>:
+ </span>
+ <span>
+ {"took a "}
+ <a href={src} target="_blank" rel="noopener noreferrer">
+ photo
+ </a>
+ </span>
+ </div>
+ </div>
+ );
+ }
}
};
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 57de5be3fc179e75074af0e2f98d84c88b93fb89..2da340733544e0890efb11c62b223ae005f7ff14 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -179,7 +179,7 @@ class UIRoot extends Component {
};
spawnPen = () => {
- this.props.scene.emit("spawn_pen");
+ this.props.scene.emit("penButtonPressed");
};
onSubscribeChanged = async () => {
diff --git a/src/scene-entry-manager.js b/src/scene-entry-manager.js
index b39159838952cb60917d471b4d31ce65f0569c3b..6974195ca86bd67bd6f60d2c75f67e9593d7f744 100644
--- a/src/scene-entry-manager.js
+++ b/src/scene-entry-manager.js
@@ -1,6 +1,5 @@
import qsTruthy from "./utils/qs_truthy";
import screenfull from "screenfull";
-import { inGameActions } from "./input-mappings";
import nextTick from "./utils/next-tick";
const playerHeight = 1.6;
@@ -29,7 +28,7 @@ export default class SceneEntryManager {
init = () => {
this.whenSceneLoaded(() => {
- this.cursorController.components["cursor-controller"].disable();
+ this.cursorController.components["cursor-controller"].enabled = false;
});
};
@@ -56,8 +55,6 @@ export default class SceneEntryManager {
document.body.addEventListener("touchend", requestFullscreen);
}
- AFRAME.registerInputActions(inGameActions, "default");
-
if (isMobile || qsTruthy("mobile")) {
this.playerRig.setAttribute("virtual-gamepad-controls", {});
}
@@ -84,9 +81,7 @@ export default class SceneEntryManager {
this.scene.classList.remove("hand-cursor");
this.scene.classList.add("no-cursor");
- const cursor = this.cursorController.components["cursor-controller"];
- cursor.enable();
- cursor.setCursorVisibility(true);
+ this.cursorController.components["cursor-controller"].enabled = true;
this._entered = true;
// Delay sending entry event telemetry until VR display is presenting.
@@ -99,6 +94,8 @@ export default class SceneEntryManager {
this.store.update({ activity: { lastEnteredAt: new Date().toISOString() } });
});
})();
+
+ this.scene.addState("entered");
};
whenSceneLoaded = callback => {
@@ -260,6 +257,11 @@ export default class SceneEntryManager {
});
this.scene.appendChild(entity);
});
+
+ this.scene.addEventListener("photo_taken", e => {
+ console.log(e);
+ this.hubChannel.sendMessage({ src: e.detail }, "spawn");
+ });
};
_spawnAvatar = () => {
diff --git a/src/systems/userinput/bindings/daydream-user.js b/src/systems/userinput/bindings/daydream-user.js
new file mode 100644
index 0000000000000000000000000000000000000000..e2cb60984febd107b84de14d50bfe13147af2094
--- /dev/null
+++ b/src/systems/userinput/bindings/daydream-user.js
@@ -0,0 +1,265 @@
+import { paths } from "../paths";
+import { sets } from "../sets";
+import { xforms } from "./xforms";
+
+// vars
+const v = s => `/vars/daydream/${s}`;
+const touchpad = v("touchpad");
+const touchpadPressed = v("touchpadPressed");
+const touchpadReleased = v("touchpadReleased");
+const dpadNorth = v("dpad/north");
+const dpadSouth = v("dpad/south");
+const dpadEast = v("dpad/east");
+const dpadWest = v("dpad/west");
+const dpadCenter = v("dpad/center");
+const vec2zero = "/vars/vec2zero";
+const brushSizeDelta = v("brushSizeDelta");
+const cursorModDelta = v("cursorModDelta");
+const dpadSouthDrop = v("dpad/southDrop");
+const dpadCenterDrop = v("dpad/centerDrop");
+
+// roots
+const dpadEastRoot = "daydreamDpadEast";
+const dpadWestRoot = "daydreamDpadWest";
+const dpadCenterRoot = "daydreamDpadCenter";
+const touchpadFallingRoot = "daydreamTouchpadFalling";
+const cursorModDeltaRoot = "daydreamCursorModDeltaRoot";
+
+const grabBinding = [
+ {
+ src: { value: dpadCenter, bool: touchpadPressed },
+ dest: { value: paths.actions.cursor.grab },
+ xform: xforms.copyIfTrue,
+ root: dpadCenterRoot,
+ priority: 200
+ }
+];
+
+const dropOnCenterOrSouth = [
+ {
+ src: { value: dpadCenter, bool: touchpadPressed },
+ dest: { value: dpadCenterDrop },
+ xform: xforms.copyIfTrue
+ },
+ {
+ src: { value: dpadSouth, bool: touchpadPressed },
+ dest: { value: dpadSouthDrop },
+ xform: xforms.copyIfTrue
+ },
+ {
+ src: [dpadCenterDrop, dpadSouthDrop],
+ dest: { value: paths.actions.cursor.drop },
+ xform: xforms.any
+ }
+];
+
+export const daydreamUserBindings = {
+ [sets.global]: [
+ {
+ src: {
+ x: paths.device.daydream.axis("touchpadX"),
+ y: paths.device.daydream.axis("touchpadY")
+ },
+ dest: { value: touchpad },
+ xform: xforms.compose_vec2
+ },
+ {
+ src: {
+ value: paths.device.daydream.button("touchpad").pressed
+ },
+ dest: { value: touchpadPressed },
+ xform: xforms.rising
+ },
+ {
+ src: {
+ value: paths.device.daydream.button("touchpad").pressed
+ },
+ dest: { value: touchpadReleased },
+ xform: xforms.falling
+ },
+ {
+ src: {
+ value: touchpad
+ },
+ dest: {
+ north: dpadNorth,
+ south: dpadSouth,
+ east: dpadEast,
+ west: dpadWest,
+ center: dpadCenter
+ },
+ xform: xforms.vec2dpad(0.5)
+ },
+ {
+ src: {
+ value: dpadEast,
+ bool: touchpadPressed
+ },
+ dest: {
+ value: paths.actions.snapRotateRight
+ },
+ xform: xforms.copyIfTrue,
+ root: dpadEastRoot,
+ priority: 100
+ },
+ {
+ src: {
+ value: dpadWest,
+ bool: touchpadPressed
+ },
+ dest: {
+ value: paths.actions.snapRotateLeft
+ },
+ xform: xforms.copyIfTrue,
+ root: dpadWestRoot,
+ priority: 100
+ },
+ {
+ src: {
+ value: dpadCenter,
+ bool: touchpadPressed
+ },
+ dest: { value: paths.actions.rightHand.startTeleport },
+ xform: xforms.copyIfTrue,
+ root: dpadCenterRoot,
+ priority: 100
+ },
+ {
+ dest: { value: vec2zero },
+ xform: xforms.always([0, -0.2])
+ },
+ {
+ src: { value: paths.device.daydream.pose },
+ dest: { value: paths.actions.cursor.pose },
+ xform: xforms.copy
+ },
+ {
+ src: { value: paths.device.daydream.pose },
+ dest: { value: paths.actions.rightHand.pose },
+ xform: xforms.copy
+ }
+ ],
+
+ [sets.cursorHoveringOnInteractable]: grabBinding,
+ [sets.cursorHoveringOnUI]: grabBinding,
+
+ [sets.cursorHoldingInteractable]: [
+ {
+ src: { value: paths.device.daydream.button("touchpad").pressed },
+ dest: { value: paths.actions.cursor.drop },
+ xform: xforms.falling,
+ root: touchpadFallingRoot,
+ priority: 100
+ },
+ {
+ src: {
+ value: paths.device.daydream.axis("touchpadY"),
+ touching: paths.device.daydream.button("touchpad").touched
+ },
+ dest: { value: cursorModDelta },
+ xform: xforms.touch_axis_scroll()
+ },
+ {
+ src: { value: cursorModDelta },
+ dest: { value: paths.actions.cursor.modDelta },
+ xform: xforms.copy,
+ root: cursorModDeltaRoot,
+ priority: 100
+ }
+ ],
+
+ [sets.rightHandTeleporting]: [
+ {
+ src: { value: paths.device.daydream.button("touchpad").pressed },
+ dest: { value: paths.actions.rightHand.stopTeleport },
+ xform: xforms.falling,
+ root: touchpadFallingRoot,
+ priority: 100
+ }
+ ],
+
+ [sets.cursorHoldingPen]: [
+ {
+ src: { value: dpadNorth, bool: touchpadPressed },
+ dest: { value: paths.actions.cursor.startDrawing },
+ xform: xforms.copyIfTrue,
+ root: dpadCenterRoot,
+ priority: 300
+ },
+ {
+ src: { value: touchpadReleased },
+ dest: { value: paths.actions.cursor.stopDrawing },
+ xform: xforms.copy,
+ root: touchpadFallingRoot,
+ priority: 300
+ },
+ {
+ src: {
+ value: paths.device.daydream.axis("touchpadX"),
+ touching: paths.device.daydream.button("touchpad").touched
+ },
+ dest: { value: brushSizeDelta },
+ xform: xforms.touch_axis_scroll(-0.1)
+ },
+ {
+ src: {
+ value: brushSizeDelta,
+ bool: paths.device.daydream.button("touchpad").pressed
+ },
+ dest: { value: paths.actions.cursor.scalePenTip },
+ xform: xforms.copyIfFalse
+ },
+ {
+ src: { value: dpadEast, bool: touchpadPressed },
+ dest: {
+ value: paths.actions.cursor.penPrevColor
+ },
+ xform: xforms.copyIfTrue,
+ root: dpadEastRoot,
+ priority: 200
+ },
+ {
+ src: { value: dpadWest, bool: touchpadPressed },
+ dest: {
+ value: paths.actions.cursor.penNextColor
+ },
+ xform: xforms.copyIfTrue,
+ root: dpadWestRoot,
+ priority: 200
+ },
+ {
+ src: {
+ value: cursorModDelta,
+ bool: paths.device.daydream.button("touchpad").pressed
+ },
+ dest: { value: paths.actions.cursor.modDelta },
+ xform: xforms.copyIfFalse,
+ root: cursorModDeltaRoot,
+ priority: 200
+ },
+ ...dropOnCenterOrSouth
+ ],
+
+ [sets.cursorHoldingCamera]: [
+ // Don't drop on touchpad release
+ {
+ src: {
+ value: paths.device.daydream.button("touchpad").pressed
+ },
+ xform: xforms.noop,
+ root: touchpadFallingRoot,
+ priority: 300
+ },
+ {
+ src: {
+ value: dpadNorth,
+ bool: touchpadPressed
+ },
+ dest: { value: paths.actions.cursor.takeSnapshot },
+ xform: xforms.copyIfTrue,
+ root: dpadCenterRoot,
+ priority: 300
+ },
+ ...dropOnCenterOrSouth
+ ]
+};
diff --git a/src/systems/userinput/bindings/generic-gamepad.js b/src/systems/userinput/bindings/generic-gamepad.js
new file mode 100644
index 0000000000000000000000000000000000000000..a62acaae658dbf852bd1d121b87cc67b79a26f78
--- /dev/null
+++ b/src/systems/userinput/bindings/generic-gamepad.js
@@ -0,0 +1 @@
+export const gamepadBindings = {};
diff --git a/src/systems/userinput/bindings/keyboard-debugging.js b/src/systems/userinput/bindings/keyboard-debugging.js
new file mode 100644
index 0000000000000000000000000000000000000000..d1142ee335e348c2f8ba2db71e763cd616528b35
--- /dev/null
+++ b/src/systems/userinput/bindings/keyboard-debugging.js
@@ -0,0 +1,17 @@
+import { paths } from "../paths";
+import { sets } from "../sets";
+import { xforms } from "./xforms";
+
+export const keyboardDebuggingBindings = {
+ [sets.global]: [
+ {
+ src: {
+ value: paths.device.keyboard.key("l")
+ },
+ dest: {
+ value: paths.actions.logDebugFrame
+ },
+ xform: xforms.rising
+ }
+ ]
+};
diff --git a/src/systems/userinput/bindings/keyboard-mouse-user.js b/src/systems/userinput/bindings/keyboard-mouse-user.js
new file mode 100644
index 0000000000000000000000000000000000000000..1f067d4447effc86541b93d26fb32ffaba5e471b
--- /dev/null
+++ b/src/systems/userinput/bindings/keyboard-mouse-user.js
@@ -0,0 +1,271 @@
+import { paths } from "../paths";
+import { sets } from "../sets";
+import { xforms } from "./xforms";
+
+const wasd_vec2 = "/var/mouse-and-keyboard/wasd_vec2";
+const dropWithRMB = "/vars/mouse-and-keyboard/drop_with_RMB";
+const dropWithEsc = "/vars/mouse-and-keyboard/drop_with_esc";
+
+const dropWithRMBorEscBindings = [
+ {
+ src: { value: paths.device.mouse.buttonRight },
+ dest: { value: dropWithRMB },
+ xform: xforms.falling
+ },
+ {
+ src: { value: paths.device.keyboard.key("Escape") },
+ dest: { value: dropWithEsc },
+ xform: xforms.falling
+ },
+ {
+ src: [dropWithRMB, dropWithEsc],
+ dest: { value: paths.actions.cursor.drop },
+ xform: xforms.any
+ }
+];
+
+export const keyboardMouseUserBindings = {
+ [sets.global]: [
+ {
+ src: {
+ value: paths.device.keyboard.key("b")
+ },
+ dest: {
+ value: paths.actions.toggleScreenShare
+ },
+ xform: xforms.rising
+ },
+ {
+ src: {
+ w: paths.device.keyboard.key("w"),
+ a: paths.device.keyboard.key("a"),
+ s: paths.device.keyboard.key("s"),
+ d: paths.device.keyboard.key("d")
+ },
+ dest: { vec2: wasd_vec2 },
+ xform: xforms.wasd_to_vec2
+ },
+ {
+ src: { value: wasd_vec2 },
+ dest: { value: paths.actions.characterAcceleration },
+ xform: xforms.copy
+ },
+ {
+ src: { value: paths.device.keyboard.key("shift") },
+ dest: { value: paths.actions.boost },
+ xform: xforms.copy
+ },
+ {
+ src: { value: paths.device.keyboard.key("q") },
+ dest: { value: paths.actions.snapRotateLeft },
+ xform: xforms.rising,
+ root: "q",
+ priority: 100
+ },
+ {
+ src: { value: paths.device.keyboard.key("e") },
+ dest: { value: paths.actions.snapRotateRight },
+ xform: xforms.rising,
+ root: "e",
+ priority: 100
+ },
+ {
+ src: { value: paths.device.hud.penButton },
+ dest: { value: paths.actions.spawnPen },
+ xform: xforms.rising
+ },
+ {
+ src: { value: paths.device.smartMouse.cursorPose },
+ dest: { value: paths.actions.cursor.pose },
+ xform: xforms.copy
+ },
+ {
+ src: { value: paths.device.smartMouse.cameraDelta },
+ dest: { x: "/var/smartMouseCamDeltaX", y: "/var/smartMouseCamDeltaY" },
+ xform: xforms.split_vec2
+ },
+ {
+ src: { value: "/var/smartMouseCamDeltaX" },
+ dest: { value: "/var/smartMouseCamDeltaXScaled" },
+ xform: xforms.scale(-0.06)
+ },
+ {
+ src: { value: "/var/smartMouseCamDeltaY" },
+ dest: { value: "/var/smartMouseCamDeltaYScaled" },
+ xform: xforms.scale(-0.1)
+ },
+ {
+ src: { x: "/var/smartMouseCamDeltaXScaled", y: "/var/smartMouseCamDeltaYScaled" },
+ dest: { value: paths.actions.cameraDelta },
+ xform: xforms.compose_vec2
+ },
+ {
+ src: {
+ value: paths.device.keyboard.key("m")
+ },
+ dest: {
+ value: paths.actions.muteMic
+ },
+ xform: xforms.rising
+ },
+ {
+ src: {
+ value: paths.device.keyboard.key("l")
+ },
+ dest: {
+ value: paths.actions.logDebugFrame
+ },
+ xform: xforms.rising
+ }
+ ],
+
+ [sets.cursorHoldingPen]: [
+ {
+ src: {
+ bool: paths.device.keyboard.key("shift"),
+ value: paths.device.keyboard.key("q")
+ },
+ dest: { value: "/var/shift+q" },
+ xform: xforms.copyIfTrue
+ },
+ {
+ src: { value: "/var/shift+q" },
+ dest: { value: paths.actions.cursor.penPrevColor },
+ xform: xforms.rising
+ },
+ {
+ src: {
+ bool: paths.device.keyboard.key("shift"),
+ value: paths.device.keyboard.key("e")
+ },
+ dest: { value: "/var/shift+e" },
+ xform: xforms.copyIfTrue
+ },
+ {
+ src: { value: "/var/shift+e" },
+ dest: { value: paths.actions.cursor.penNextColor },
+ xform: xforms.rising
+ },
+ {
+ src: {
+ bool: paths.device.keyboard.key("shift"),
+ value: paths.device.keyboard.key("q")
+ },
+ dest: { value: "/var/notshift+q" },
+ xform: xforms.copyIfFalse
+ },
+ {
+ src: { value: "/var/notshift+q" },
+ dest: { value: paths.actions.snapRotateLeft },
+ xform: xforms.rising,
+ root: "q",
+ priority: 200
+ },
+ {
+ src: {
+ bool: paths.device.keyboard.key("shift"),
+ value: paths.device.keyboard.key("e")
+ },
+ dest: { value: "/var/notshift+e" },
+ xform: xforms.copyIfFalse
+ },
+ {
+ src: { value: "/var/notshift+e" },
+ dest: { value: paths.actions.snapRotateRight },
+ xform: xforms.rising,
+ root: "e",
+ priority: 200
+ },
+ {
+ src: { value: paths.device.mouse.buttonLeft },
+ dest: { value: paths.actions.cursor.startDrawing },
+ xform: xforms.rising,
+ priority: 200
+ },
+ {
+ src: { value: paths.device.mouse.buttonLeft },
+ dest: { value: paths.actions.cursor.stopDrawing },
+ xform: xforms.falling,
+ priority: 200,
+ root: "lmb"
+ },
+ {
+ src: {
+ bool: paths.device.keyboard.key("shift"),
+ value: paths.device.mouse.wheel
+ },
+ dest: { value: "/var/cursorScalePenTipWheel" },
+ xform: xforms.copyIfTrue,
+ priority: 200,
+ root: "wheel"
+ },
+ {
+ src: { value: "/var/cursorScalePenTipWheel" },
+ dest: { value: paths.actions.cursor.scalePenTip },
+ xform: xforms.scale(0.12)
+ },
+ ...dropWithRMBorEscBindings
+ ],
+
+ [sets.cursorHoldingCamera]: [
+ {
+ src: { value: paths.device.mouse.buttonLeft },
+ dest: { value: paths.actions.cursor.takeSnapshot },
+ xform: xforms.rising
+ },
+ {
+ src: { value: paths.device.mouse.buttonLeft },
+ xform: xforms.noop,
+ priority: 200,
+ root: "lmb"
+ },
+ ...dropWithRMBorEscBindings
+ ],
+
+ [sets.cursorHoldingInteractable]: [
+ {
+ src: {
+ value: paths.device.mouse.wheel
+ },
+ dest: {
+ value: paths.actions.cursor.modDelta
+ },
+ xform: xforms.copy,
+ root: "wheel",
+ priority: 100
+ },
+ {
+ src: {
+ bool: paths.device.keyboard.key("shift"),
+ value: paths.device.mouse.wheel
+ },
+ dest: { value: paths.actions.cursor.modDelta },
+ xform: xforms.copyIfFalse
+ },
+ {
+ src: {
+ bool: paths.device.keyboard.key("shift"),
+ value: paths.device.mouse.wheel
+ },
+ dest: { value: paths.actions.cursor.scaleGrabbedGrabbable },
+ xform: xforms.copyIfTrue,
+ priority: 150,
+ root: "wheel"
+ },
+ {
+ src: { value: paths.device.mouse.buttonLeft },
+ dest: { value: paths.actions.cursor.drop },
+ xform: xforms.falling,
+ priority: 100,
+ root: "lmb"
+ }
+ ],
+
+ [sets.cursorHoveringOnInteractable]: [
+ {
+ src: { value: paths.device.mouse.buttonLeft },
+ dest: { value: paths.actions.cursor.grab },
+ xform: xforms.rising
+ }
+ ]
+};
diff --git a/src/systems/userinput/bindings/oculus-go-user.js b/src/systems/userinput/bindings/oculus-go-user.js
new file mode 100644
index 0000000000000000000000000000000000000000..c0ec9199ae094c67cf8f16c41900fc9391d872d7
--- /dev/null
+++ b/src/systems/userinput/bindings/oculus-go-user.js
@@ -0,0 +1,244 @@
+import { paths } from "../paths";
+import { sets } from "../sets";
+import { xforms } from "./xforms";
+
+const touchpad = "/vars/oculusgo/touchpad";
+const touchpadPressed = "/vars/oculusgo/touchpadPressed";
+const dpadNorth = "/vars/oculusgo/dpad/north";
+const dpadSouth = "/vars/oculusgo/dpad/south";
+const dpadEast = "/vars/oculusgo/dpad/east";
+const dpadWest = "/vars/oculusgo/dpad/west";
+const dpadCenter = "/vars/oculusgo/dpad/center";
+
+const triggerRisingRoot = "oculusGoTriggerRising";
+const triggerFallingRoot = "oculusGoTriggerFalling";
+const dpadEastRoot = "oculusGoDpadEast";
+const dpadWestRoot = "oculusGoDpadWest";
+
+const grabBinding = {
+ src: {
+ value: paths.device.oculusgo.button("trigger").pressed
+ },
+ dest: { value: paths.actions.cursor.grab },
+ xform: xforms.rising,
+ root: triggerRisingRoot,
+ priority: 200
+};
+
+export const oculusGoUserBindings = {
+ [sets.global]: [
+ {
+ src: {
+ x: paths.device.oculusgo.axis("touchpadX"),
+ y: paths.device.oculusgo.axis("touchpadY")
+ },
+ dest: { value: touchpad },
+ xform: xforms.compose_vec2
+ },
+ {
+ src: {
+ value: paths.device.oculusgo.button("touchpad").pressed
+ },
+ dest: { value: touchpadPressed },
+ xform: xforms.rising
+ },
+ {
+ src: {
+ value: touchpad
+ },
+ dest: {
+ north: dpadNorth,
+ south: dpadSouth,
+ east: dpadEast,
+ west: dpadWest,
+ center: dpadCenter
+ },
+ xform: xforms.vec2dpad(0.8)
+ },
+ {
+ src: {
+ value: dpadEast,
+ bool: touchpadPressed
+ },
+ dest: {
+ value: paths.actions.snapRotateRight
+ },
+ xform: xforms.copyIfTrue,
+ root: dpadEastRoot,
+ priority: 100
+ },
+ {
+ src: {
+ value: dpadWest,
+ bool: touchpadPressed
+ },
+ dest: {
+ value: paths.actions.snapRotateLeft
+ },
+ xform: xforms.copyIfTrue,
+ root: dpadWestRoot,
+ priority: 100
+ },
+
+ {
+ src: {
+ value: paths.device.oculusgo.button("trigger").pressed
+ },
+ dest: { value: paths.actions.rightHand.startTeleport },
+ xform: xforms.rising,
+ root: triggerRisingRoot,
+ priority: 100
+ },
+
+ {
+ src: { value: paths.device.oculusgo.pose },
+ dest: { value: paths.actions.cursor.pose },
+ xform: xforms.copy
+ },
+ {
+ src: { value: paths.device.oculusgo.pose },
+ dest: { value: paths.actions.rightHand.pose },
+ xform: xforms.copy
+ },
+
+ {
+ src: { value: paths.device.oculusgo.button("touchpad").touched },
+ dest: { value: paths.actions.rightHand.thumb },
+ xform: xforms.copy
+ },
+ {
+ src: { value: paths.device.oculusgo.button("trigger").pressed },
+ dest: { value: paths.actions.rightHand.index },
+ xform: xforms.copy
+ },
+ {
+ src: { value: paths.device.oculusgo.button("trigger").pressed },
+ dest: { value: paths.actions.rightHand.middleRingPinky },
+ xform: xforms.copy
+ }
+ ],
+
+ [sets.cursorHoveringOnInteractable]: [grabBinding],
+ [sets.cursorHoveringOnUI]: [grabBinding],
+
+ [sets.cursorHoldingInteractable]: [
+ {
+ src: {
+ value: paths.device.oculusgo.button("trigger").pressed
+ },
+ dest: { value: paths.actions.cursor.drop },
+ xform: xforms.falling,
+ root: triggerFallingRoot,
+ priority: 200
+ },
+ {
+ src: {
+ value: paths.device.oculusgo.axis("touchpadY"),
+ touching: paths.device.oculusgo.button("touchpad").touched
+ },
+ dest: { value: paths.actions.cursor.modDelta },
+ xform: xforms.touch_axis_scroll()
+ }
+ ],
+
+ [sets.rightHandTeleporting]: [
+ {
+ src: {
+ value: paths.device.oculusgo.button("trigger").pressed
+ },
+ dest: { value: paths.actions.rightHand.stopTeleport },
+ xform: xforms.falling,
+ root: triggerFallingRoot,
+ priority: 100
+ }
+ ],
+
+ [sets.cursorHoldingPen]: [
+ {
+ src: {
+ value: paths.device.oculusgo.button("trigger").pressed
+ },
+ dest: { value: paths.actions.cursor.startDrawing },
+ xform: xforms.rising,
+ root: triggerRisingRoot,
+ priority: 300
+ },
+ {
+ src: {
+ value: paths.device.oculusgo.button("trigger").pressed
+ },
+ dest: { value: paths.actions.cursor.stopDrawing },
+ xform: xforms.falling,
+ root: triggerFallingRoot,
+ priority: 300
+ },
+ {
+ src: {
+ value: paths.device.oculusgo.axis("touchpadX"),
+ touching: paths.device.oculusgo.button("touchpad").touched
+ },
+ dest: { value: paths.actions.cursor.scalePenTip },
+ xform: xforms.touch_axis_scroll(-0.1)
+ },
+ {
+ src: {
+ value: dpadCenter,
+ bool: touchpadPressed
+ },
+ dest: { value: paths.actions.cursor.drop },
+ xform: xforms.copyIfTrue
+ },
+ {
+ src: {
+ value: dpadEast,
+ bool: touchpadPressed
+ },
+ dest: {
+ value: paths.actions.cursor.penPrevColor
+ },
+ xform: xforms.copyIfTrue,
+ root: dpadEastRoot,
+ priority: 200
+ },
+ {
+ src: {
+ value: dpadWest,
+ bool: touchpadPressed
+ },
+ dest: {
+ value: paths.actions.cursor.penNextColor
+ },
+ xform: xforms.copyIfTrue,
+ root: dpadWestRoot,
+ priority: 200
+ }
+ ],
+
+ [sets.cursorHoldingCamera]: [
+ {
+ src: {
+ value: paths.device.oculusgo.button("trigger").pressed
+ },
+ dest: { value: paths.actions.cursor.takeSnapshot },
+ xform: xforms.rising,
+ root: triggerRisingRoot,
+ priority: 300
+ },
+ {
+ src: {
+ value: paths.device.oculusgo.button("trigger").pressed
+ },
+ xform: xforms.noop,
+ root: triggerFallingRoot,
+ priority: 300
+ },
+ {
+ src: {
+ value: dpadCenter,
+ bool: touchpadPressed
+ },
+ dest: { value: paths.actions.cursor.drop },
+ xform: xforms.copyIfTrue
+ }
+ ]
+};
diff --git a/src/systems/userinput/bindings/oculus-touch-user.js b/src/systems/userinput/bindings/oculus-touch-user.js
new file mode 100644
index 0000000000000000000000000000000000000000..d386016c27497b4c3faeae1fcc3d413f3a0476fd
--- /dev/null
+++ b/src/systems/userinput/bindings/oculus-touch-user.js
@@ -0,0 +1,642 @@
+import { paths } from "../paths";
+import { sets } from "../sets";
+import { xforms } from "./xforms";
+
+const name = "/touch/var/";
+
+const leftButton = paths.device.leftOculusTouch.button;
+const leftAxis = paths.device.leftOculusTouch.axis;
+const leftPose = paths.device.leftOculusTouch.pose;
+const rightButton = paths.device.rightOculusTouch.button;
+const rightAxis = paths.device.rightOculusTouch.axis;
+const rightPose = paths.device.rightOculusTouch.pose;
+
+const scaledLeftJoyX = `${name}left/scaledJoyX`;
+const scaledLeftJoyY = `${name}left/scaledJoyY`;
+const rightGripFalling = "${name}right/GripFalling";
+const rightTriggerFalling = `${name}right/TriggerFalling`;
+const cursorDrop2 = `${name}right/cursorDrop2`;
+const cursorDrop1 = `${name}right/cursorDrop1`;
+const rightHandDrop2 = `${name}right/rightHandDrop2`;
+const rightHandDrop1 = `${name}right/rightHandDrop1`;
+const rightGripRising = `${name}right/GripRising`;
+const rightTriggerRising = `${name}right/TriggerRising`;
+const rightGripRisingGrab = `${name}right/grip/RisingGrab`;
+const rightTriggerRisingGrab = `${name}right/trigger/RisingGrab`;
+const leftGripRisingGrab = `${name}left/grip/RisingGrab`;
+const leftTriggerRisingGrab = `${name}left/trigger/RisingGrab`;
+const leftGripFalling = `${name}left/GripFalling`;
+const leftGripRising = `${name}left/GripRising`;
+const leftTriggerRising = `${name}left/TriggerRising`;
+const leftTriggerFalling = `${name}left/TriggerFalling`;
+const rightDpadNorth = `${name}rightDpad/north`;
+const rightDpadSouth = `${name}rightDpad/south`;
+const rightDpadEast = `${name}rightDpad/east`;
+const rightDpadWest = `${name}rightDpad/west`;
+const rightDpadCenter = `${name}rightDpad/center`;
+const rightJoy = `${name}right/joy`;
+const rightJoyY = `${name}right/joyY`;
+const rightJoyYCursorMod = `${name}right/joyYCursorMod`;
+const leftDpadNorth = `${name}leftDpad/north`;
+const leftDpadSouth = `${name}leftDpad/south`;
+const leftDpadEast = `${name}leftDpad/east`;
+const leftDpadWest = `${name}leftDpad/west`;
+const leftDpadCenter = `${name}leftDpad/center`;
+const leftJoy = `${name}left/joy`;
+const leftJoyY = `${name}left/joyY`;
+const leftJoyYCursorMod = `${name}left/joyYCursorMod`;
+const oculusTouchCharacterAcceleration = `${name}characterAcceleration`;
+const keyboardCharacterAcceleration = "/var/keyboard/characterAcceleration";
+const keyboardBoost = "/var/keyboard-oculus/boost";
+const rightBoost = "/var/right-oculus/boost";
+const leftBoost = "/var/left-oculus/boost";
+const rightTouchSnapRight = `${name}/right/snap-right`;
+const rightTouchSnapLeft = `${name}/right/snap-left`;
+const keyboardSnapRight = `${name}/keyboard/snap-right`;
+const keyboardSnapLeft = `${name}/keyboard/snap-left`;
+
+export const oculusTouchUserBindings = {
+ [sets.global]: [
+ {
+ src: {
+ value: leftButton("grip").pressed
+ },
+ dest: {
+ value: paths.actions.leftHand.middleRingPinky
+ },
+ xform: xforms.copy
+ },
+ {
+ src: [leftButton("x").touched, leftButton("y").touched, leftButton("thumbStick").touched],
+ dest: {
+ value: paths.actions.leftHand.thumb
+ },
+ xform: xforms.any
+ },
+ {
+ src: { value: leftButton("trigger").pressed },
+ dest: {
+ value: paths.actions.leftHand.index
+ },
+ xform: xforms.copy
+ },
+ {
+ src: {
+ value: rightButton("grip").pressed
+ },
+ dest: {
+ value: paths.actions.rightHand.middleRingPinky
+ },
+ xform: xforms.copy
+ },
+ {
+ src: [rightButton("x").touched, rightButton("y").touched, rightButton("thumbStick").touched],
+ dest: {
+ value: paths.actions.rightHand.thumb
+ },
+ xform: xforms.any
+ },
+ {
+ src: { value: rightButton("trigger").pressed },
+ dest: {
+ value: paths.actions.rightHand.index
+ },
+ xform: xforms.copy
+ },
+ {
+ src: {
+ value: paths.device.keyboard.key("b")
+ },
+ dest: {
+ value: paths.actions.toggleScreenShare
+ },
+ xform: xforms.rising
+ },
+ {
+ src: {
+ x: leftAxis("joyX"),
+ y: leftAxis("joyY")
+ },
+ dest: {
+ value: leftJoy
+ },
+ xform: xforms.compose_vec2
+ },
+ {
+ src: {
+ value: leftJoy
+ },
+ dest: {
+ north: leftDpadNorth,
+ south: leftDpadSouth,
+ east: leftDpadEast,
+ west: leftDpadWest,
+ center: leftDpadCenter
+ },
+ xform: xforms.vec2dpad(0.2, false, true)
+ },
+ {
+ src: {
+ x: rightAxis("joyX"),
+ y: rightAxis("joyY")
+ },
+ dest: {
+ value: rightJoy
+ },
+ xform: xforms.compose_vec2
+ },
+ {
+ src: {
+ value: rightJoy
+ },
+ dest: {
+ north: rightDpadNorth,
+ south: rightDpadSouth,
+ east: rightDpadEast,
+ west: rightDpadWest,
+ center: rightDpadCenter
+ },
+ xform: xforms.vec2dpad(0.2, false, true)
+ },
+ {
+ src: {
+ value: rightDpadEast
+ },
+ dest: {
+ value: rightTouchSnapRight
+ },
+ xform: xforms.rising,
+ root: rightDpadEast,
+ priority: 100
+ },
+ {
+ src: { value: paths.device.keyboard.key("e") },
+ dest: { value: keyboardSnapRight },
+ xform: xforms.rising
+ },
+ {
+ src: [rightTouchSnapRight, keyboardSnapRight],
+ dest: { value: paths.actions.snapRotateRight },
+ xform: xforms.any
+ },
+ {
+ src: {
+ value: rightDpadWest
+ },
+ dest: {
+ value: rightTouchSnapLeft
+ },
+ xform: xforms.rising,
+ root: rightDpadWest,
+ priority: 100
+ },
+ {
+ src: { value: paths.device.keyboard.key("q") },
+ dest: { value: keyboardSnapLeft },
+ xform: xforms.rising
+ },
+ {
+ src: [rightTouchSnapLeft, keyboardSnapLeft],
+ dest: { value: paths.actions.snapRotateLeft },
+ xform: xforms.any
+ },
+ {
+ src: {
+ value: leftAxis("joyX")
+ },
+ dest: {
+ value: scaledLeftJoyX
+ },
+ xform: xforms.scale(1.5) // horizontal character speed modifier
+ },
+ {
+ src: {
+ value: leftAxis("joyY")
+ },
+ dest: { value: scaledLeftJoyY },
+ xform: xforms.scale(-1.5) // vertical character speed modifier
+ },
+ {
+ src: {
+ x: scaledLeftJoyX,
+ y: scaledLeftJoyY
+ },
+ dest: { value: oculusTouchCharacterAcceleration },
+ xform: xforms.compose_vec2
+ },
+ {
+ src: {
+ w: paths.device.keyboard.key("w"),
+ a: paths.device.keyboard.key("a"),
+ s: paths.device.keyboard.key("s"),
+ d: paths.device.keyboard.key("d")
+ },
+ dest: { vec2: keyboardCharacterAcceleration },
+ xform: xforms.wasd_to_vec2
+ },
+ {
+ src: {
+ first: oculusTouchCharacterAcceleration,
+ second: keyboardCharacterAcceleration
+ },
+ dest: {
+ value: paths.actions.characterAcceleration
+ },
+ xform: xforms.add_vec2
+ },
+ {
+ src: { value: paths.device.keyboard.key("shift") },
+ dest: { value: keyboardBoost },
+ xform: xforms.copy
+ },
+ {
+ src: {
+ value: leftButton("x").pressed
+ },
+ dest: {
+ value: leftBoost
+ },
+ xform: xforms.copy
+ },
+ {
+ src: {
+ value: rightButton("a").pressed
+ },
+ dest: {
+ value: rightBoost
+ },
+ xform: xforms.copy
+ },
+ {
+ src: [keyboardBoost, leftBoost, rightBoost],
+ dest: { value: paths.actions.boost },
+ xform: xforms.any
+ },
+ {
+ src: { value: rightPose },
+ dest: { value: paths.actions.cursor.pose },
+ xform: xforms.copy
+ },
+ {
+ src: { value: rightPose },
+ dest: { value: paths.actions.rightHand.pose },
+ xform: xforms.copy
+ },
+ {
+ src: { value: leftPose },
+ dest: { value: paths.actions.leftHand.pose },
+ xform: xforms.copy
+ },
+ {
+ src: { value: rightButton("trigger").pressed },
+ dest: { value: paths.actions.rightHand.stopTeleport },
+ xform: xforms.falling,
+ root: rightTriggerFalling,
+ priority: 100
+ },
+ {
+ src: { value: leftButton("trigger").pressed },
+ dest: { value: paths.actions.leftHand.stopTeleport },
+ xform: xforms.falling,
+ root: leftTriggerFalling,
+ priority: 100
+ }
+ ],
+
+ [sets.leftHandHoveringOnNothing]: [
+ {
+ src: { value: leftButton("trigger").pressed },
+ dest: { value: paths.actions.leftHand.startTeleport },
+ xform: xforms.rising,
+ root: leftTriggerRising,
+ priority: 100
+ }
+ ],
+
+ [sets.cursorHoveringOnUI]: [
+ {
+ src: { value: rightButton("trigger").pressed },
+ dest: { value: paths.actions.cursor.grab },
+ xform: xforms.rising,
+ root: rightTriggerRising,
+ priority: 100
+ }
+ ],
+
+ [sets.cursorHoveringOnNothing]: [
+ {
+ src: { value: rightButton("trigger").pressed },
+ dest: { value: paths.actions.rightHand.startTeleport },
+ xform: xforms.rising,
+ root: rightTriggerRising,
+ priority: 100
+ }
+ ],
+
+ [sets.leftHandHoveringOnInteractable]: [
+ {
+ src: { value: leftButton("grip").pressed },
+ dest: { value: leftGripRisingGrab },
+ xform: xforms.rising,
+ root: leftGripRising,
+ priority: 200
+ },
+ {
+ src: { value: leftButton("trigger").pressed },
+ dest: { value: leftTriggerRisingGrab },
+ xform: xforms.rising,
+ root: leftTriggerRising,
+ priority: 200
+ },
+ {
+ src: [leftGripRisingGrab, leftTriggerRisingGrab],
+ dest: { value: paths.actions.leftHand.grab },
+ xform: xforms.any
+ }
+ ],
+
+ [sets.leftHandHoldingInteractable]: [
+ {
+ src: { value: leftButton("grip").pressed },
+ dest: { value: paths.actions.leftHand.drop },
+ xform: xforms.falling,
+ root: leftGripFalling,
+ priority: 200
+ }
+ ],
+
+ [sets.leftHandHoveringOnPen]: [],
+ [sets.leftHandHoldingPen]: [
+ {
+ src: { value: leftButton("trigger").pressed },
+ dest: { value: paths.actions.leftHand.startDrawing },
+ xform: xforms.rising
+ },
+ {
+ src: { value: leftButton("trigger").pressed },
+ dest: { value: paths.actions.leftHand.stopDrawing },
+ xform: xforms.falling
+ },
+ {
+ src: {
+ value: leftDpadEast
+ },
+ dest: {
+ value: paths.actions.leftHand.penNextColor
+ },
+ xform: xforms.rising,
+ root: leftDpadEast,
+ priority: 200
+ },
+ {
+ src: {
+ value: leftDpadWest
+ },
+ dest: {
+ value: paths.actions.leftHand.penPrevColor
+ },
+ xform: xforms.rising,
+ root: leftDpadWest,
+ priority: 200
+ },
+ {
+ src: {
+ bool: leftButton("grip").pressed,
+ value: leftAxis("joyY")
+ },
+ dest: { value: leftJoyY },
+ xform: xforms.copyIfTrue
+ },
+ {
+ src: { value: leftJoyY },
+ dest: { value: paths.actions.leftHand.scalePenTip },
+ xform: xforms.scale(-0.01)
+ },
+ {
+ src: {
+ boo: leftButton("grip").pressed,
+ value: leftAxis("joyY")
+ },
+ dest: { value: leftJoyYCursorMod },
+ xform: xforms.copyIfFalse,
+ root: leftJoyY,
+ priority: 100
+ }
+ ],
+
+ [sets.cursorHoveringOnInteractable]: [
+ {
+ src: { value: rightButton("grip").pressed },
+ dest: { value: rightGripRisingGrab },
+ xform: xforms.rising,
+ root: rightGripRising,
+ priority: 200
+ },
+ {
+ src: { value: rightButton("trigger").pressed },
+ dest: { value: rightTriggerRisingGrab },
+ xform: xforms.rising,
+ root: rightTriggerRising,
+ priority: 200
+ },
+ {
+ src: [rightGripRisingGrab, rightTriggerRisingGrab],
+ dest: { value: paths.actions.cursor.grab },
+ xform: xforms.any
+ }
+ ],
+
+ [sets.cursorHoldingInteractable]: [
+ {
+ src: { value: rightAxis("joyY") },
+ dest: { value: paths.actions.cursor.modDelta },
+ xform: xforms.scale(0.1)
+ },
+ {
+ src: { value: rightButton("grip").pressed },
+ dest: { value: cursorDrop1 },
+ xform: xforms.falling,
+ root: rightGripFalling,
+ priority: 200
+ },
+ {
+ src: { value: rightButton("trigger").pressed },
+ dest: {
+ value: cursorDrop2
+ },
+ xform: xforms.falling,
+ root: rightTriggerFalling,
+ priority: 200
+ },
+ {
+ src: [cursorDrop1, cursorDrop2],
+ dest: { value: paths.actions.cursor.drop },
+ xform: xforms.any
+ }
+ ],
+
+ [sets.cursorHoveringOnPen]: [],
+
+ [sets.cursorHoldingPen]: [
+ {
+ src: { value: rightButton("trigger").pressed },
+ dest: { value: paths.actions.cursor.startDrawing },
+ xform: xforms.rising
+ },
+ {
+ src: { value: rightButton("trigger").pressed },
+ dest: { value: paths.actions.cursor.stopDrawing },
+ xform: xforms.falling,
+ root: rightTriggerFalling,
+ priority: 300
+ }
+ ],
+
+ [sets.rightHandHoveringOnInteractable]: [
+ {
+ src: { value: rightButton("grip").pressed },
+ dest: { value: rightGripRisingGrab },
+ xform: xforms.rising,
+ root: rightGripRising,
+ priority: 200
+ },
+ {
+ src: { value: rightButton("trigger").pressed },
+ dest: { value: rightTriggerRisingGrab },
+ xform: xforms.rising,
+ root: rightTriggerRising,
+ priority: 200
+ },
+ {
+ src: [rightGripRisingGrab, rightTriggerRisingGrab],
+ dest: { value: paths.actions.rightHand.grab },
+ xform: xforms.any
+ }
+ ],
+
+ [sets.rightHandHoldingInteractable]: [
+ {
+ src: { value: rightButton("grip").pressed },
+ dest: { value: rightHandDrop1 },
+ xform: xforms.falling,
+ root: rightGripFalling,
+ priority: 200
+ },
+ {
+ src: { value: rightButton("trigger").pressed },
+ dest: {
+ value: rightHandDrop2
+ },
+ xform: xforms.falling,
+ root: rightTriggerFalling,
+ priority: 200
+ },
+ {
+ src: [rightHandDrop1, rightHandDrop2],
+ dest: { value: paths.actions.rightHand.drop },
+ xform: xforms.any
+ }
+ ],
+ [sets.rightHandHoveringOnPen]: [],
+ [sets.rightHandHoldingPen]: [
+ {
+ src: { value: rightButton("trigger").pressed },
+ dest: { value: paths.actions.rightHand.startDrawing },
+ xform: xforms.rising
+ },
+ {
+ src: { value: rightButton("trigger").pressed },
+ dest: { value: paths.actions.rightHand.stopDrawing },
+ xform: xforms.falling,
+ root: rightTriggerFalling,
+ priority: 300
+ },
+ {
+ src: {
+ value: rightDpadEast
+ },
+ dest: {
+ value: paths.actions.rightHand.penNextColor
+ },
+ xform: xforms.rising,
+ root: rightDpadEast,
+ priority: 200
+ },
+ {
+ src: {
+ value: rightDpadWest
+ },
+ dest: {
+ value: paths.actions.rightHand.penPrevColor
+ },
+ xform: xforms.rising,
+ root: rightDpadWest,
+ priority: 200
+ },
+ {
+ src: {
+ bool: rightButton("grip").pressed,
+ value: rightAxis("joyY")
+ },
+ dest: { value: rightJoyY },
+ xform: xforms.copyIfTrue
+ },
+ {
+ src: { value: rightJoyY },
+ dest: { value: paths.actions.rightHand.scalePenTip },
+ xform: xforms.scale(-0.01)
+ },
+ {
+ src: {
+ boo: rightButton("grip").pressed,
+ value: rightAxis("joyY")
+ },
+ dest: { value: rightJoyYCursorMod },
+ xform: xforms.copyIfFalse,
+ root: rightJoyY,
+ priority: 100
+ }
+ ],
+
+ [sets.cursorHoveringOnCamera]: [],
+ [sets.rightHandHoveringOnCamera]: [],
+ [sets.leftHandHoveringOnCamera]: [],
+
+ [sets.rightHandHoldingCamera]: [
+ {
+ src: { value: rightButton("trigger").pressed },
+ dest: { value: paths.actions.rightHand.takeSnapshot },
+ xform: xforms.rising
+ },
+ {
+ src: { value: rightButton("trigger").pressed },
+ dest: { value: paths.noop },
+ xform: xforms.falling,
+ root: rightTriggerFalling,
+ priority: 400
+ }
+ ],
+ [sets.leftHandHoldingCamera]: [
+ {
+ src: { value: leftButton("trigger").pressed },
+ dest: { value: paths.actions.leftHand.takeSnapshot },
+ xform: xforms.rising
+ }
+ ],
+ [sets.cursorHoldingCamera]: [
+ {
+ src: { value: rightButton("trigger").pressed },
+ dest: { value: paths.actions.cursor.takeSnapshot },
+ xform: xforms.rising
+ },
+ {
+ src: { value: rightButton("trigger").pressed },
+ dest: { value: paths.noop },
+ xform: xforms.falling,
+ root: rightTriggerFalling,
+ priority: 400
+ }
+ ],
+
+ [sets.rightHandHoveringOnNothing]: []
+};
diff --git a/src/systems/userinput/bindings/touchscreen-user.js b/src/systems/userinput/bindings/touchscreen-user.js
new file mode 100644
index 0000000000000000000000000000000000000000..41503259f5452dda91467b00127c7f400b8a77d2
--- /dev/null
+++ b/src/systems/userinput/bindings/touchscreen-user.js
@@ -0,0 +1,132 @@
+import { paths } from "../paths";
+import { sets } from "../sets";
+import { xforms } from "./xforms";
+
+const zero = "/vars/touchscreen/zero";
+const forward = "/vars/touchscreen/pinchDeltaForward";
+const touchCamDelta = "vars/touchscreen/touchCameraDelta";
+const touchCamDeltaX = "vars/touchscreen/touchCameraDelta/x";
+const touchCamDeltaY = "vars/touchscreen/touchCameraDelta/y";
+const touchCamDeltaXScaled = "vars/touchscreen/touchCameraDelta/x/scaled";
+const touchCamDeltaYScaled = "vars/touchscreen/touchCameraDelta/y/scaled";
+const gyroCamDelta = "vars/gyro/gyroCameraDelta";
+const gyroCamDeltaXScaled = "vars/gyro/gyroCameraDelta/x/scaled";
+const gyroCamDeltaYScaled = "vars/gyro/gyroCameraDelta/y/scaled";
+
+export const touchscreenUserBindings = {
+ [sets.global]: [
+ {
+ src: { value: paths.device.touchscreen.pinch.delta },
+ dest: { value: forward },
+ xform: xforms.scale(0.25)
+ },
+ {
+ dest: { value: zero },
+ xform: xforms.always(0)
+ },
+ {
+ src: { x: zero, y: forward },
+ dest: { value: paths.actions.characterAcceleration },
+ xform: xforms.compose_vec2
+ },
+ {
+ src: { value: paths.device.touchscreen.cursorPose },
+ dest: { value: paths.actions.cursor.pose },
+ xform: xforms.copy
+ },
+ {
+ src: { value: paths.device.touchscreen.touchCameraDelta },
+ dest: { x: touchCamDeltaX, y: touchCamDeltaY },
+ xform: xforms.split_vec2
+ },
+ {
+ src: { value: touchCamDeltaX },
+ dest: { value: touchCamDeltaXScaled },
+ xform: xforms.scale(0.18)
+ },
+ {
+ src: { value: touchCamDeltaY },
+ dest: { value: touchCamDeltaYScaled },
+ xform: xforms.scale(0.35)
+ },
+ {
+ src: { x: touchCamDeltaXScaled, y: touchCamDeltaYScaled },
+ dest: { value: touchCamDelta },
+ xform: xforms.compose_vec2
+ },
+ {
+ src: { value: paths.device.gyro.averageDeltaX },
+ dest: { value: gyroCamDeltaXScaled },
+ xform: xforms.scale(1.0)
+ },
+ {
+ src: { value: paths.device.gyro.averageDeltaY },
+ dest: { value: gyroCamDeltaYScaled },
+ xform: xforms.scale(1.0)
+ },
+ {
+ src: { x: gyroCamDeltaYScaled, y: gyroCamDeltaXScaled },
+ dest: { value: gyroCamDelta },
+ xform: xforms.compose_vec2
+ },
+ {
+ src: {
+ first: touchCamDelta,
+ second: gyroCamDelta
+ },
+ dest: { value: paths.actions.cameraDelta },
+ xform: xforms.add_vec2
+ },
+ {
+ src: { value: paths.device.touchscreen.isTouchingGrabbable },
+ dest: { value: paths.actions.cursor.grab },
+ xform: xforms.copy,
+ root: "touchscreen.isTouchingGrabbable",
+ priority: 100
+ },
+ {
+ src: { value: paths.device.hud.penButton },
+ dest: { value: paths.actions.spawnPen },
+ xform: xforms.rising,
+ root: "hud.penButton",
+ priority: 100
+ }
+ ],
+ [sets.cursorHoldingInteractable]: [
+ {
+ src: { value: paths.device.touchscreen.isTouchingGrabbable },
+ dest: { value: paths.actions.cursor.drop },
+ xform: xforms.falling,
+ root: "touchscreen.cursorDrop",
+ priority: 100
+ }
+ ],
+
+ [sets.cursorHoveringOnPen]: [],
+ [sets.cursorHoldingPen]: [
+ {
+ src: { value: paths.device.touchscreen.isTouchingGrabbable },
+ dest: { value: paths.noop },
+ xform: xforms.noop,
+ root: "touchscreen.cursorDrop",
+ priority: 200
+ },
+ {
+ src: { value: paths.device.touchscreen.isTouchingGrabbable },
+ dest: { value: paths.actions.cursor.startDrawing },
+ xform: xforms.risingWithFrameDelay(5)
+ },
+ {
+ src: { value: paths.device.touchscreen.isTouchingGrabbable },
+ dest: { value: paths.actions.cursor.stopDrawing },
+ xform: xforms.falling
+ },
+ {
+ src: { value: paths.device.hud.penButton },
+ dest: { value: paths.actions.cursor.drop },
+ xform: xforms.rising,
+ root: "hud.penButton",
+ priority: 200
+ }
+ ]
+};
diff --git a/src/systems/userinput/bindings/vive-user.js b/src/systems/userinput/bindings/vive-user.js
new file mode 100644
index 0000000000000000000000000000000000000000..0e20233c7ff606ee29914e0d5293173404302491
--- /dev/null
+++ b/src/systems/userinput/bindings/vive-user.js
@@ -0,0 +1,783 @@
+import { paths } from "../paths";
+import { sets } from "../sets";
+import { xforms } from "./xforms";
+
+const v = name => {
+ return `/vive-user/vive-var/${name}`;
+};
+
+const lButton = paths.device.vive.left.button;
+const lAxis = paths.device.vive.left.axis;
+const lPose = paths.device.vive.left.pose;
+const lJoy = v("left/joy");
+const lJoyScaled = v("left/joy/scaled");
+const lJoyXScaled = v("left/joyX/scaled");
+const lJoyYScaled = v("left/joyY/scaled");
+const lDpadNorth = v("left/dpad/north");
+const lDpadSouth = v("left/dpad/south");
+const lDpadEast = v("left/dpad/east");
+const lDpadWest = v("left/dpad/west");
+const lDpadCenter = v("left/dpad/center");
+const lTriggerFalling = v("left/trigger/falling");
+const lTriggerFallingStopDrawing = v("left/trigger/falling/stopDrawing");
+const lGripFallingStopDrawing = v("left/grip/falling/stopDrawing");
+const lTriggerRising = v("left/trigger/rising");
+const lTriggerRisingGrab = v("right/trigger/rising/grab");
+const lGripRisingGrab = v("right/grab/rising/grab");
+const lTouchpadRising = v("left/touchpad/rising");
+const lCharacterAcceleration = v("left/characterAcceleration");
+const lGripFalling = v("left/grip/falling");
+const lGripRising = v("left/grip/rising");
+const leftBoost = v("left/boost");
+const lTriggerStartTeleport = v("left/trigger/startTeleport");
+const lDpadCenterStartTeleport = v("left/dpadCenter/startTeleport");
+const lTriggerStopTeleport = v("left/trigger/stopTeleport");
+const lTouchpadStopTeleport = v("left/touchpad/stopTeleport");
+
+const rButton = paths.device.vive.right.button;
+const rAxis = paths.device.vive.right.axis;
+const rPose = paths.device.vive.right.pose;
+const rJoy = v("right/joy");
+const rDpadNorth = v("right/dpad/north");
+const rDpadSouth = v("right/dpad/south");
+const rDpadEast = v("right/dpad/east");
+const rDpadWest = v("right/dpad/west");
+const rDpadCenter = v("right/dpad/center");
+const rTriggerFalling = v("right/trigger/falling");
+const rTriggerRising = v("right/trigger/rising");
+const rTouchpadRising = v("right/touchpad/rising");
+const rightBoost = v("right/boost");
+const rGripRising = v("right/grip/rising");
+const rTriggerRisingGrab = v("right/trigger/rising/grab");
+const rGripRisingGrab = v("right/grab/rising/grab");
+const rGripFalling = v("right/grip/rising");
+const cursorDrop1 = v("right/cursorDrop1");
+const cursorDrop2 = v("right/cursorDrop2");
+const rHandDrop1 = v("right/drop1");
+const rHandDrop2 = v("right/drop2");
+const rTriggerStartTeleport = v("right/trigger/startTeleport");
+const rDpadCenterStartTeleport = v("right/dpadCenter/startTeleport");
+const rTriggerStopTeleport = v("right/trigger/stopTeleport");
+const rTouchpadStopTeleport = v("right/touchpad/stopTeleport");
+
+const rSnapRight = v("right/snap-right");
+const rSnapLeft = v("right/snap-left");
+
+const k = name => {
+ return `/vive-user/keyboard-var/${name}`;
+};
+const keyboardSnapRight = k("snap-right");
+const keyboardSnapLeft = k("snap-left");
+const keyboardCharacterAcceleration = k("characterAcceleration");
+const keyboardBoost = k("boost");
+
+const teleportLeft = [
+ {
+ src: { value: lButton("trigger").pressed },
+ dest: { value: lTriggerStartTeleport },
+ xform: xforms.rising,
+ root: lTriggerRising,
+ priority: 100
+ },
+ {
+ src: {
+ bool: lTouchpadRising,
+ value: lDpadCenter
+ },
+ dest: { value: lDpadCenterStartTeleport },
+ xform: xforms.copyIfTrue
+ },
+ {
+ src: [lTriggerStartTeleport, lDpadCenterStartTeleport],
+ dest: { value: paths.actions.leftHand.startTeleport },
+ xform: xforms.any
+ }
+];
+const teleportRight = [
+ {
+ src: { value: rButton("trigger").pressed },
+ dest: { value: rTriggerStartTeleport },
+ xform: xforms.rising,
+ root: rTriggerRising,
+ priority: 100
+ },
+ {
+ src: {
+ bool: rTouchpadRising,
+ value: rDpadCenter
+ },
+ dest: { value: rDpadCenterStartTeleport },
+ xform: xforms.copyIfTrue
+ },
+ {
+ src: [rTriggerStartTeleport, rDpadCenterStartTeleport],
+ dest: { value: paths.actions.rightHand.startTeleport },
+ xform: xforms.any
+ }
+];
+
+export const viveUserBindings = {
+ [sets.global]: [
+ {
+ src: {
+ value: lButton("grip").touched
+ },
+ dest: {
+ value: paths.actions.leftHand.middleRingPinky
+ },
+ xform: xforms.copy
+ },
+ {
+ src: [lButton("touchpad").touched, lButton("top").touched],
+ dest: {
+ value: paths.actions.leftHand.thumb
+ },
+ xform: xforms.any
+ },
+ {
+ src: { value: lButton("trigger").pressed },
+ dest: {
+ value: paths.actions.leftHand.index
+ },
+ xform: xforms.copy
+ },
+ {
+ src: {
+ value: rButton("grip").touched
+ },
+ dest: {
+ value: paths.actions.rightHand.middleRingPinky
+ },
+ xform: xforms.copy
+ },
+ {
+ src: [rButton("touchpad").touched, rButton("top").touched],
+ dest: {
+ value: paths.actions.rightHand.thumb
+ },
+ xform: xforms.any
+ },
+ {
+ src: { value: rButton("trigger").pressed },
+ dest: {
+ value: paths.actions.rightHand.index
+ },
+ xform: xforms.copy
+ },
+ {
+ src: {
+ value: paths.device.keyboard.key("b")
+ },
+ dest: {
+ value: paths.actions.toggleScreenShare
+ },
+ xform: xforms.rising
+ },
+ {
+ src: {
+ x: lAxis("joyX"),
+ y: lAxis("joyY")
+ },
+ dest: {
+ value: lJoy
+ },
+ xform: xforms.compose_vec2
+ },
+ {
+ src: {
+ value: lJoy
+ },
+ dest: {
+ north: lDpadNorth,
+ south: lDpadSouth,
+ east: lDpadEast,
+ west: lDpadWest,
+ center: lDpadCenter
+ },
+ xform: xforms.vec2dpad(0.35)
+ },
+ {
+ src: {
+ value: lButton("touchpad").pressed
+ },
+ dest: {
+ value: lTouchpadRising
+ },
+ xform: xforms.rising
+ },
+ {
+ src: {
+ x: rAxis("joyX"),
+ y: rAxis("joyY")
+ },
+ dest: {
+ value: rJoy
+ },
+ xform: xforms.compose_vec2
+ },
+ {
+ src: {
+ value: rJoy
+ },
+ dest: {
+ north: rDpadNorth,
+ south: rDpadSouth,
+ east: rDpadEast,
+ west: rDpadWest,
+ center: rDpadCenter
+ },
+ xform: xforms.vec2dpad(0.35)
+ },
+ {
+ src: {
+ value: rButton("touchpad").pressed
+ },
+ dest: {
+ value: rTouchpadRising
+ },
+ xform: xforms.rising
+ },
+ {
+ src: {
+ bool: rTouchpadRising,
+ value: rDpadEast
+ },
+ dest: {
+ value: rSnapRight
+ },
+ xform: xforms.copyIfTrue,
+ root: rDpadEast,
+ priority: 100
+ },
+ {
+ src: { value: paths.device.keyboard.key("e") },
+ dest: { value: keyboardSnapRight },
+ xform: xforms.rising
+ },
+ {
+ src: [rSnapRight, keyboardSnapRight],
+ dest: { value: paths.actions.snapRotateRight },
+ xform: xforms.any
+ },
+ {
+ src: {
+ bool: rTouchpadRising,
+ value: rDpadWest
+ },
+ dest: {
+ value: rSnapLeft
+ },
+ xform: xforms.copyIfTrue,
+ root: rDpadWest,
+ priority: 100
+ },
+ {
+ src: { value: paths.device.keyboard.key("q") },
+ dest: { value: keyboardSnapLeft },
+ xform: xforms.rising
+ },
+ {
+ src: [rSnapLeft, keyboardSnapLeft],
+ dest: { value: paths.actions.snapRotateLeft },
+ xform: xforms.any
+ },
+
+ {
+ src: {
+ value: lAxis("joyX")
+ },
+ dest: {
+ value: lJoyXScaled
+ },
+ xform: xforms.scale(1.5) // horizontal character speed modifier
+ },
+ {
+ src: {
+ value: lAxis("joyY")
+ },
+ dest: { value: lJoyYScaled },
+ xform: xforms.scale(1.5) // vertical character speed modifier
+ },
+ {
+ src: {
+ x: lJoyXScaled,
+ y: lJoyYScaled
+ },
+ dest: { value: lJoyScaled },
+ xform: xforms.compose_vec2
+ },
+ {
+ src: {
+ bool: lButton("touchpad").pressed,
+ value: lJoyScaled
+ },
+ dest: { value: lCharacterAcceleration },
+ xform: xforms.copyIfTrue
+ },
+ {
+ src: {
+ w: paths.device.keyboard.key("w"),
+ a: paths.device.keyboard.key("a"),
+ s: paths.device.keyboard.key("s"),
+ d: paths.device.keyboard.key("d")
+ },
+ dest: { vec2: keyboardCharacterAcceleration },
+ xform: xforms.wasd_to_vec2
+ },
+ {
+ src: {
+ first: lCharacterAcceleration,
+ second: keyboardCharacterAcceleration
+ },
+ dest: {
+ value: paths.actions.characterAcceleration
+ },
+ xform: xforms.add_vec2
+ },
+ {
+ src: { value: paths.device.keyboard.key("shift") },
+ dest: { value: keyboardBoost },
+ xform: xforms.copy
+ },
+ {
+ src: {
+ value: lButton("top").pressed
+ },
+ dest: {
+ value: leftBoost
+ },
+ xform: xforms.copy
+ },
+ {
+ src: {
+ value: rButton("top").pressed
+ },
+ dest: {
+ value: rightBoost
+ },
+ xform: xforms.copy
+ },
+ {
+ src: [keyboardBoost, leftBoost, rightBoost],
+ dest: { value: paths.actions.boost },
+ xform: xforms.any
+ },
+ {
+ src: { value: rPose },
+ dest: { value: paths.actions.cursor.pose },
+ xform: xforms.copy
+ },
+ {
+ src: { value: rPose },
+ dest: { value: paths.actions.rightHand.pose },
+ xform: xforms.copy
+ },
+ {
+ src: { value: lPose },
+ dest: { value: paths.actions.leftHand.pose },
+ xform: xforms.copy
+ }
+ ],
+ [sets.rightHandTeleporting]: [
+ {
+ src: { value: rButton("trigger").pressed },
+ dest: { value: rTriggerStopTeleport },
+ xform: xforms.falling,
+ root: rTriggerFalling,
+ priority: 100
+ },
+ {
+ src: { value: rButton("touchpad").pressed },
+ dest: { value: rTouchpadStopTeleport },
+ xform: xforms.falling
+ },
+ {
+ src: [rTriggerStopTeleport, rTouchpadStopTeleport],
+ dest: { value: paths.actions.rightHand.stopTeleport },
+ xform: xforms.any
+ }
+ ],
+ [sets.leftHandHoveringOnNothing]: [...teleportLeft],
+
+ [sets.leftHandTeleporting]: [
+ {
+ src: { value: lButton("trigger").pressed },
+ dest: { value: lTriggerStopTeleport },
+ xform: xforms.falling,
+ root: lTriggerFalling,
+ priority: 100
+ },
+ {
+ src: { value: lButton("touchpad").pressed },
+ dest: { value: lTouchpadStopTeleport },
+ xform: xforms.falling
+ },
+ {
+ src: [lTriggerStopTeleport, lTouchpadStopTeleport],
+ dest: { value: paths.actions.leftHand.stopTeleport },
+ xform: xforms.any
+ }
+ ],
+
+ [sets.rightHandHoveringOnNothing]: [...teleportRight],
+
+ [sets.cursorHoveringOnNothing]: [],
+
+ [sets.cursorHoveringOnUI]: [
+ {
+ src: { value: rButton("trigger").pressed },
+ dest: { value: paths.actions.cursor.grab },
+ xform: xforms.rising,
+ root: rTriggerRising,
+ priority: 100
+ }
+ ],
+
+ [sets.leftHandHoveringOnInteractable]: [
+ {
+ src: { value: lButton("grip").pressed },
+ dest: { value: lGripRisingGrab },
+ xform: xforms.rising,
+ root: lGripRising,
+ priority: 200
+ },
+ {
+ src: { value: lButton("trigger").pressed },
+ dest: { value: lTriggerRisingGrab },
+ xform: xforms.rising,
+ root: lTriggerRising,
+ priority: 200
+ },
+ {
+ src: [lGripRisingGrab, lTriggerRisingGrab],
+ dest: { value: paths.actions.leftHand.grab },
+ xform: xforms.any
+ }
+ ],
+
+ [sets.leftHandHoldingInteractable]: [
+ {
+ src: { value: lButton("grip").pressed },
+ dest: { value: paths.actions.leftHand.drop },
+ xform: xforms.falling,
+ root: lGripFalling,
+ priority: 200
+ }
+ ],
+
+ [sets.leftHandHoveringOnPen]: [],
+ [sets.leftHandHoldingPen]: [
+ {
+ src: {
+ bool: lTouchpadRising,
+ value: lDpadCenter
+ },
+ dest: { value: paths.actions.leftHand.startTeleport },
+ xform: xforms.copyIfTrue
+ },
+ {
+ src: { value: lButton("trigger").pressed },
+ dest: { value: paths.actions.leftHand.startDrawing },
+ xform: xforms.rising
+ },
+ {
+ src: { value: lButton("trigger").pressed },
+ dest: { value: lTriggerFallingStopDrawing },
+ xform: xforms.falling
+ },
+ {
+ src: { value: lButton("grip").pressed },
+ dest: { value: lGripFallingStopDrawing },
+ xform: xforms.falling
+ },
+ {
+ src: [lTriggerFallingStopDrawing, lGripFallingStopDrawing],
+ dest: { value: paths.actions.leftHand.stopDrawing },
+ xform: xforms.any
+ },
+ {
+ src: {
+ bool: lTouchpadRising,
+ value: lDpadNorth
+ },
+ dest: {
+ value: paths.actions.leftHand.penNextColor
+ },
+ xform: xforms.copyIfTrue,
+ root: lDpadNorth,
+ priority: 200
+ },
+ {
+ src: {
+ bool: lTouchpadRising,
+ value: lDpadSouth
+ },
+ dest: {
+ value: paths.actions.leftHand.penPrevColor
+ },
+ xform: xforms.copyIfTrue,
+ root: lDpadSouth,
+ priority: 200
+ },
+ {
+ src: {
+ value: lAxis("joyX"),
+ touching: lButton("touchpad").touched
+ },
+ dest: { value: paths.actions.leftHand.scalePenTip },
+ xform: xforms.touch_axis_scroll(0.1)
+ }
+ ],
+
+ [sets.cursorHoveringOnInteractable]: [
+ {
+ src: { value: rButton("grip").pressed },
+ dest: { value: rGripRisingGrab },
+ xform: xforms.rising,
+ root: rGripRising,
+ priority: 200
+ },
+ {
+ src: { value: rButton("trigger").pressed },
+ dest: { value: rTriggerRisingGrab },
+ xform: xforms.rising,
+ root: rTriggerRising,
+ priority: 200
+ },
+ {
+ src: [rGripRisingGrab, rTriggerRisingGrab],
+ dest: { value: paths.actions.cursor.grab },
+ xform: xforms.any
+ }
+ ],
+
+ [sets.cursorHoldingInteractable]: [
+ {
+ src: {
+ value: rAxis("joyY"),
+ touching: rButton("touchpad").touched
+ },
+ dest: { value: paths.actions.cursor.modDelta },
+ xform: xforms.touch_axis_scroll(-1)
+ },
+ {
+ src: { value: rButton("grip").pressed },
+ dest: { value: cursorDrop1 },
+ xform: xforms.falling,
+ root: rGripFalling,
+ priority: 200
+ },
+ {
+ src: { value: rButton("trigger").pressed },
+ dest: {
+ value: cursorDrop2
+ },
+ xform: xforms.falling,
+ root: rTriggerFalling,
+ priority: 200
+ },
+ {
+ src: [cursorDrop1, cursorDrop2],
+ dest: { value: paths.actions.cursor.drop },
+ xform: xforms.any
+ }
+ ],
+
+ [sets.cursorHoveringOnPen]: [],
+
+ [sets.cursorHoldingPen]: [
+ {
+ src: {
+ bool: rTouchpadRising,
+ value: rDpadCenter
+ },
+ dest: { value: paths.actions.rightHand.startTeleport },
+ xform: xforms.copyIfTrue
+ },
+ {
+ src: { value: rButton("trigger").pressed },
+ dest: { value: paths.actions.cursor.startDrawing },
+ xform: xforms.rising
+ },
+ {
+ src: { value: rButton("trigger").pressed },
+ dest: { value: paths.actions.cursor.stopDrawing },
+ xform: xforms.falling,
+ root: rTriggerFalling,
+ priority: 300
+ },
+ {
+ src: {
+ value: rAxis("joyX"),
+ touching: rButton("touchpad").touched
+ },
+ dest: { value: paths.actions.cursor.scalePenTip },
+ xform: xforms.touch_axis_scroll(0.1)
+ },
+ {
+ src: {
+ bool: rTouchpadRising,
+ value: rDpadNorth
+ },
+ dest: {
+ value: paths.actions.cursor.penNextColor
+ },
+ xform: xforms.copyIfTrue,
+ root: rDpadNorth,
+ priority: 200
+ },
+ {
+ src: {
+ bool: rTouchpadRising,
+ value: rDpadSouth
+ },
+ dest: {
+ value: paths.actions.cursor.penPrevColor
+ },
+ xform: xforms.copyIfTrue,
+ root: rDpadSouth,
+ priority: 200
+ }
+ ],
+
+ [sets.rightHandHoveringOnInteractable]: [
+ {
+ src: { value: rButton("grip").pressed },
+ dest: { value: rGripRisingGrab },
+ xform: xforms.rising,
+ root: rGripRising,
+ priority: 200
+ },
+ {
+ src: { value: rButton("trigger").pressed },
+ dest: { value: rTriggerRisingGrab },
+ xform: xforms.rising,
+ root: rTriggerRising,
+ priority: 200
+ },
+ {
+ src: [rGripRisingGrab, rTriggerRisingGrab],
+ dest: { value: paths.actions.rightHand.grab },
+ xform: xforms.any
+ }
+ ],
+
+ [sets.rightHandHoldingInteractable]: [
+ {
+ src: { value: rButton("grip").pressed },
+ dest: { value: rHandDrop1 },
+ xform: xforms.falling,
+ root: rGripFalling,
+ priority: 200
+ },
+ {
+ src: { value: rButton("trigger").pressed },
+ dest: {
+ value: rHandDrop2
+ },
+ xform: xforms.falling,
+ root: rTriggerFalling,
+ priority: 200
+ },
+ {
+ src: [rHandDrop1, rHandDrop2],
+ dest: { value: paths.actions.rightHand.drop },
+ xform: xforms.any
+ }
+ ],
+ [sets.rightHandHoveringOnPen]: [],
+ [sets.rightHandHoldingPen]: [
+ {
+ src: {
+ bool: rTouchpadRising,
+ value: rDpadCenter
+ },
+ dest: { value: paths.actions.rightHand.startTeleport },
+ xform: xforms.copyIfTrue
+ },
+ {
+ src: { value: rButton("trigger").pressed },
+ dest: { value: paths.actions.rightHand.startDrawing },
+ xform: xforms.rising
+ },
+ {
+ src: { value: rButton("trigger").pressed },
+ dest: { value: paths.actions.rightHand.stopDrawing },
+ xform: xforms.falling,
+ root: rTriggerFalling,
+ priority: 300
+ },
+ {
+ src: {
+ bool: rTouchpadRising,
+ value: rDpadNorth
+ },
+ dest: {
+ value: paths.actions.rightHand.penNextColor
+ },
+ xform: xforms.copyIfTrue,
+ root: rDpadNorth,
+ priority: 200
+ },
+ {
+ src: {
+ bool: rTouchpadRising,
+ value: rDpadSouth
+ },
+ dest: {
+ value: paths.actions.rightHand.penPrevColor
+ },
+ xform: xforms.copyIfTrue,
+ root: rDpadSouth,
+ priority: 200
+ },
+ {
+ src: {
+ value: rAxis("joyX"),
+ touching: rButton("touchpad").touched
+ },
+ dest: { value: paths.actions.rightHand.scalePenTip },
+ xform: xforms.touch_axis_scroll(0.1)
+ }
+ ],
+
+ [sets.cursorHoveringOnCamera]: [],
+ [sets.rightHandHoveringOnCamera]: [],
+ [sets.leftHandHoveringOnCamera]: [],
+
+ [sets.rightHandHoldingCamera]: [
+ {
+ src: { value: rButton("trigger").pressed },
+ dest: { value: paths.actions.rightHand.takeSnapshot },
+ xform: xforms.rising
+ },
+ {
+ src: { value: rButton("trigger").pressed },
+ dest: { value: paths.noop },
+ xform: xforms.falling,
+ root: rTriggerFalling,
+ priority: 400
+ }
+ ],
+ [sets.leftHandHoldingCamera]: [
+ {
+ src: { value: lButton("trigger").pressed },
+ dest: { value: paths.actions.leftHand.takeSnapshot },
+ xform: xforms.rising
+ }
+ ],
+ [sets.cursorHoldingCamera]: [
+ {
+ src: { value: rButton("trigger").pressed },
+ dest: { value: paths.actions.cursor.takeSnapshot },
+ xform: xforms.rising
+ },
+ {
+ src: { value: rButton("trigger").pressed },
+ dest: { value: paths.noop },
+ xform: xforms.falling,
+ root: rTriggerFalling,
+ priority: 400
+ }
+ ]
+};
diff --git a/src/systems/userinput/bindings/xbox-controller-user.js b/src/systems/userinput/bindings/xbox-controller-user.js
new file mode 100644
index 0000000000000000000000000000000000000000..b9d230a799ca5515615abc24318ac9507e779b6d
--- /dev/null
+++ b/src/systems/userinput/bindings/xbox-controller-user.js
@@ -0,0 +1,190 @@
+import { paths } from "../paths";
+import { sets } from "../sets";
+import { xforms } from "./xforms";
+
+const xboxUnscaledCursorScalePenTip = "foobarbazbotbooch";
+
+const button = paths.device.xbox.button;
+const axis = paths.device.xbox.axis;
+const rightTriggerFalling = "/vars/xbox/rightTriggerFalling";
+
+export const xboxControllerUserBindings = {
+ [sets.cursorHoldingInteractable]: [
+ {
+ src: { value: button("rightTrigger").pressed },
+ dest: { value: paths.actions.cursor.drop },
+ xform: xforms.falling,
+ root: rightTriggerFalling,
+ priority: 100
+ },
+ {
+ src: {
+ bool: button("leftTrigger").pressed,
+ value: axis("leftJoystickVertical")
+ },
+ dest: { value: "/vars/xbox/cursorModDelta" },
+ xform: xforms.copyIfTrue
+ },
+ {
+ src: {
+ value: "/vars/xbox/cursorModDelta"
+ },
+ dest: { value: paths.actions.cursor.modDelta },
+ xform: xforms.copy
+ },
+ {
+ src: {
+ bool: button("leftTrigger").pressed,
+ value: axis("leftJoystickVertical")
+ },
+ dest: { value: "/var/xbox/leftJoystickVertical" },
+ xform: xforms.copyIfFalse,
+ root: "xbox/leftJoystick",
+ priority: 200
+ }
+ ],
+ [sets.cursorHoldingPen]: [
+ {
+ src: { value: button("rightTrigger").pressed },
+ dest: { value: paths.actions.cursor.startDrawing },
+ xform: xforms.rising,
+ root: "xboxRightTriggerRising",
+ priority: 200
+ },
+ {
+ src: { value: button("rightTrigger").pressed },
+ dest: { value: paths.actions.cursor.stopDrawing },
+ xform: xforms.falling,
+ root: rightTriggerFalling,
+ priority: 200
+ },
+ {
+ src: { value: button("b").pressed },
+ dest: { value: paths.actions.cursor.drop },
+ xform: xforms.rising
+ },
+ {
+ src: { value: button("y").pressed },
+ dest: { value: paths.noop },
+ xform: xforms.noop,
+ root: "xbox/y",
+ priority: 200
+ },
+ {
+ src: { value: button("a").pressed },
+ dest: { value: paths.actions.cursor.penNextColor },
+ xform: xforms.rising
+ },
+ {
+ src: { value: button("x").pressed },
+ dest: { value: paths.actions.cursor.penPrevColor },
+ xform: xforms.rising
+ },
+ {
+ src: {
+ bool: button("leftTrigger").pressed,
+ value: axis("rightJoystickVertical")
+ },
+ dest: { value: xboxUnscaledCursorScalePenTip },
+ xform: xforms.copyIfTrue
+ },
+ {
+ dest: {
+ value: paths.actions.cursorScalePenTip
+ },
+ src: { value: xboxUnscaledCursorScalePenTip },
+ xform: xforms.scale(0.01)
+ }
+ ],
+ [sets.global]: [
+ {
+ src: {
+ value: axis("rightJoystickHorizontal")
+ },
+ dest: { value: "/var/xbox/scaledRightJoystickHorizontal" },
+ xform: xforms.scale(-1.5) // horizontal look speed modifier
+ },
+ {
+ src: {
+ value: axis("rightJoystickVertical")
+ },
+ dest: { value: "/var/xbox/scaledRightJoystickVertical" },
+ xform: xforms.scale(-1.25) // vertical look speed modifier
+ },
+ {
+ src: {
+ x: "/var/xbox/scaledRightJoystickHorizontal",
+ y: "/var/xbox/scaledRightJoystickVertical"
+ },
+ dest: { value: paths.actions.cameraDelta },
+ xform: xforms.compose_vec2
+ },
+ {
+ src: {
+ value: axis("leftJoystickHorizontal")
+ },
+ dest: { value: "/var/xbox/scaledLeftJoystickHorizontal" },
+ xform: xforms.scale(1.5) // horizontal move speed modifier
+ },
+ {
+ src: { value: axis("leftJoystickVertical") },
+ dest: { value: "/var/xbox/leftJoystickVertical" },
+ xform: xforms.copy,
+ root: "xbox/leftJoystick",
+ priority: 100
+ },
+ {
+ src: { value: "/var/xbox/leftJoystickVertical" },
+ dest: { value: "/var/xbox/scaledLeftJoystickVertical" },
+ xform: xforms.scale(-1.25) // vertical move speed modifier
+ },
+ {
+ src: {
+ x: "/var/xbox/scaledLeftJoystickHorizontal",
+ y: "/var/xbox/scaledLeftJoystickVertical"
+ },
+ dest: { value: paths.actions.characterAcceleration },
+ xform: xforms.compose_vec2
+ },
+ {
+ src: { value: button("leftTrigger").pressed },
+ dest: { value: paths.actions.boost },
+ xform: xforms.copy
+ },
+ {
+ src: { value: button("leftBumper").pressed },
+ dest: { value: paths.actions.snapRotateLeft },
+ xform: xforms.rising
+ },
+ {
+ src: { value: button("rightBumper").pressed },
+ dest: { value: paths.actions.snapRotateRight },
+ xform: xforms.rising
+ },
+ {
+ dest: { value: "var/vec2/zero" },
+ xform: xforms.vec2Zero
+ },
+ {
+ src: { value: "var/vec2/zero" },
+ dest: { value: paths.actions.cursor.pose },
+ xform: xforms.poseFromCameraProjection()
+ },
+ {
+ src: { value: button("y").pressed },
+ dest: { value: paths.actions.spawnPen },
+ xform: xforms.rising,
+ root: "xbox/y",
+ priority: 100
+ }
+ ],
+ [sets.cursorHoveringOnInteractable]: [
+ {
+ src: { value: button("rightTrigger").pressed },
+ dest: { value: paths.actions.cursor.grab },
+ xform: xforms.rising,
+ root: "xboxRightTriggerRising",
+ priority: 100
+ }
+ ]
+};
diff --git a/src/systems/userinput/bindings/xforms.js b/src/systems/userinput/bindings/xforms.js
new file mode 100644
index 0000000000000000000000000000000000000000..444134675a842316f0f5b52f55ed8ff30083ca15
--- /dev/null
+++ b/src/systems/userinput/bindings/xforms.js
@@ -0,0 +1,125 @@
+import { Pose } from "../pose";
+import { angleTo4Direction } from "../../../utils/dpad";
+
+const zeroVec2 = [0, 0];
+export const xforms = {
+ noop: function() {},
+ copy: function(frame, src, dest) {
+ frame[dest.value] = frame[src.value];
+ },
+ scale: function(scalar) {
+ return function scale(frame, src, dest) {
+ if (frame[src.value] !== undefined) {
+ frame[dest.value] = frame[src.value] * scalar;
+ }
+ };
+ },
+ split_vec2: function(frame, src, dest) {
+ if (frame[src.value] !== undefined) {
+ frame[dest.x] = frame[src.value][0];
+ frame[dest.y] = frame[src.value][1];
+ }
+ },
+ compose_vec2: function(frame, src, dest) {
+ if (frame[src.x] !== undefined && frame[src.y] !== undefined) {
+ frame[dest.value] = [frame[src.x], frame[src.y]];
+ }
+ },
+ negate: function(frame, src, dest) {
+ frame[dest.value] = -frame[src.value];
+ },
+ copyIfFalse: function(frame, src, dest) {
+ frame[dest.value] = frame[src.bool] ? undefined : frame[src.value];
+ },
+ copyIfTrue: function(frame, src, dest) {
+ frame[dest.value] = frame[src.bool] ? frame[src.value] : undefined;
+ },
+ zeroIfDefined: function(frame, src, dest) {
+ frame[dest.value] = frame[src.bool] !== undefined ? 0 : frame[src.value];
+ },
+ true: function(frame, src, dest) {
+ frame[dest.value] = true;
+ },
+ rising: function rising(frame, src, dest, prevState) {
+ frame[dest.value] = frame[src.value] && prevState === false;
+ return !!frame[src.value];
+ },
+ risingWithFrameDelay: function(n) {
+ return function risingWithFrameDelay(frame, src, dest, state = { values: new Array(n) }) {
+ frame[dest.value] = state.values.shift();
+ state.values.push(frame[src.value] && !state.prev);
+ state.prev = frame[src.value];
+ return state;
+ };
+ },
+ falling: function falling(frame, src, dest, prevState) {
+ frame[dest.value] = !frame[src.value] && prevState;
+ return !!frame[src.value];
+ },
+ vec2Zero: function(frame, _, dest) {
+ frame[dest.value] = zeroVec2;
+ },
+ poseFromCameraProjection: function() {
+ let camera;
+ const pose = new Pose();
+ return function poseFromCameraProjection(frame, src, dest) {
+ if (!camera) {
+ camera = document.querySelector("#player-camera").components.camera.camera;
+ }
+ frame[dest.value] = pose.fromCameraProjection(camera, frame[src.value][0], frame[src.value][1]);
+ };
+ },
+ vec2dpad: function(deadzoneRadius, invertX = false, invertY = false) {
+ const deadzoneRadiusSquared = deadzoneRadius * deadzoneRadius;
+ return function vec2dpad(frame, src, dest) {
+ if (!frame[src.value]) return;
+ const [x, y] = frame[src.value];
+ const inCenter = x * x + y * y < deadzoneRadiusSquared;
+ const direction = inCenter ? "center" : angleTo4Direction(Math.atan2(invertX ? -x : x, invertY ? -y : y));
+ frame[dest[direction]] = true;
+ };
+ },
+ always: function(constValue) {
+ return function always(frame, _, dest) {
+ frame[dest.value] = constValue;
+ };
+ },
+ wasd_to_vec2: function(frame, { w, a, s, d }, { vec2 }) {
+ let x = 0;
+ let y = 0;
+ if (frame[a]) x -= 1;
+ if (frame[d]) x += 1;
+ if (frame[w]) y += 1;
+ if (frame[s]) y -= 1;
+ frame[vec2] = [x, y];
+ },
+ add_vec2: function(frame, src, dest) {
+ const first = frame[src.first];
+ const second = frame[src.second];
+ if (first && second) {
+ frame[dest.value] = [first[0] + second[0], first[1] + second[1]];
+ } else if (second) {
+ frame[dest.value] = second;
+ } else if (first) {
+ frame[dest.value] = first;
+ }
+ },
+ any: function(frame, src, dest) {
+ for (const path in src) {
+ if (frame[src[path]]) {
+ frame[dest.value] = true;
+ return;
+ }
+ }
+ frame[dest.value] = false;
+ },
+ touch_axis_scroll(scale = 1) {
+ return function(frame, src, dest, state = { value: 0, touching: false }) {
+ frame[dest.value] =
+ !state.touching || !frame[src.touching] ? 0 : scale * (frame[src.value] + 1 - (state.value + 1));
+ state.value = frame[src.value];
+ state.touching = frame[src.touching];
+ return state;
+ };
+ }
+};
diff --git a/src/systems/userinput/devices/app-aware-mouse.js b/src/systems/userinput/devices/app-aware-mouse.js
new file mode 100644
index 0000000000000000000000000000000000000000..4afd124e7006b86869309aaa3626a756b7f20292
--- /dev/null
+++ b/src/systems/userinput/devices/app-aware-mouse.js
@@ -0,0 +1,61 @@
+import { paths } from "../paths";
+import { Pose } from "../pose";
+
+const calculateCursorPose = function(camera, coords) {
+ const cursorPose = new Pose();
+ const origin = new THREE.Vector3();
+ const direction = new THREE.Vector3();
+ origin.setFromMatrixPosition(camera.matrixWorld);
+ direction
+ .set(coords[0], coords[1], 0.5)
+ .unproject(camera)
+ .sub(origin)
+ .normalize();
+ cursorPose.fromOriginAndDirection(origin, direction);
+ return cursorPose;
+};
+
+export class AppAwareMouseDevice {
+ constructor() {
+ this.prevButtonLeft = false;
+ this.clickedOnAnything = false;
+ }
+
+ write(frame) {
+ if (!this.cursorController) {
+ this.cursorController = document.querySelector("[cursor-controller]").components["cursor-controller"];
+ }
+
+ if (!this.camera) {
+ this.camera = document.querySelector("#player-camera").components.camera.camera;
+ }
+
+ const coords = frame[paths.device.mouse.coords];
+ const isCursorGrabbing = this.cursorController.data.cursor.components["super-hands"].state.has("grab-start");
+ if (isCursorGrabbing) {
+ frame[paths.device.smartMouse.cursorPose] = calculateCursorPose(this.camera, coords);
+ return;
+ }
+
+ const buttonLeft = frame[paths.device.mouse.buttonLeft];
+ if (buttonLeft && !this.prevButtonLeft) {
+ const rawIntersections = [];
+ this.cursorController.raycaster.intersectObjects(this.cursorController.targets, true, rawIntersections);
+ const intersection = rawIntersections.find(x => x.object.el);
+ this.clickedOnAnything =
+ intersection &&
+ intersection.object.el.matches(".pen, .pen *, .video, .video *, .interactable, .interactable *");
+ }
+ this.prevButtonLeft = buttonLeft;
+
+ if (!buttonLeft) {
+ this.clickedOnAnything = false;
+ }
+
+ if (!this.clickedOnAnything && buttonLeft) {
+ frame[paths.device.smartMouse.cameraDelta] = frame[paths.device.mouse.movementXY];
+ } else {
+ frame[paths.device.smartMouse.cursorPose] = calculateCursorPose(this.camera, coords);
+ }
+ }
+}
diff --git a/src/systems/userinput/devices/app-aware-touchscreen.js b/src/systems/userinput/devices/app-aware-touchscreen.js
new file mode 100644
index 0000000000000000000000000000000000000000..3183ea6c053ab26d225f68eddd820b0a4be44b0c
--- /dev/null
+++ b/src/systems/userinput/devices/app-aware-touchscreen.js
@@ -0,0 +1,244 @@
+import { paths } from "../paths";
+import { Pose } from "../pose";
+import { touchIsAssigned, jobIsAssigned, assign, unassign, findByJob, findByTouch } from "./touchscreen/assignments";
+
+const MOVE_CURSOR_JOB = "MOVE CURSOR";
+const MOVE_CAMERA_JOB = "MOVE CAMERA";
+const FIRST_PINCHER_JOB = "FIRST PINCHER";
+const SECOND_PINCHER_JOB = "SECOND PINCHER";
+
+function distance(x1, y1, x2, y2) {
+ const dx = x1 - x2;
+ const dy = y1 - y2;
+ return Math.sqrt(dx * dx + dy * dy);
+}
+
+function shouldMoveCursor(touch, raycaster) {
+ const cursorController = document.querySelector("[cursor-controller]").components["cursor-controller"];
+ const isCursorGrabbing = cursorController.data.cursor.components["super-hands"].state.has("grab-start");
+ if (isCursorGrabbing) {
+ return true;
+ }
+ const rawIntersections = [];
+ raycaster.setFromCamera(
+ {
+ x: (touch.clientX / window.innerWidth) * 2 - 1,
+ y: -(touch.clientY / window.innerHeight) * 2 + 1
+ },
+ document.querySelector("#player-camera").components.camera.camera
+ );
+ raycaster.intersectObjects(cursorController.targets, true, rawIntersections);
+ const intersection = rawIntersections.find(x => x.object.el);
+ return intersection && intersection.object.el.matches(".interactable, .interactable *");
+}
+
+export class AppAwareTouchscreenDevice {
+ constructor() {
+ this.raycaster = new THREE.Raycaster(new THREE.Vector3(), new THREE.Vector3(), 0, 3);
+ this.assignments = [];
+ this.pinch = { initialDistance: 0, currentDistance: 0, delta: 0 };
+ this.events = [];
+ ["touchstart", "touchend", "touchmove", "touchcancel"].map(x =>
+ document.querySelector("canvas").addEventListener(x, this.events.push.bind(this.events))
+ );
+ }
+
+ end(touch) {
+ if (!touchIsAssigned(touch, this.assignments)) {
+ console.warn("touch does not have a job", touch);
+ return;
+ }
+
+ const assignment = findByTouch(touch, this.assignments);
+ switch (assignment.job) {
+ case MOVE_CURSOR_JOB:
+ case MOVE_CAMERA_JOB:
+ unassign(assignment.touch, assignment.job, this.assignments);
+ break;
+ case FIRST_PINCHER_JOB:
+ unassign(assignment.touch, assignment.job, this.assignments);
+ this.pinch = { initialDistance: 0, currentDistance: 0, delta: 0 };
+
+ if (jobIsAssigned(SECOND_PINCHER_JOB, this.assignments)) {
+ const second = findByJob(SECOND_PINCHER_JOB, this.assignments);
+ unassign(second.touch, second.job, this.assignments);
+ if (jobIsAssigned(MOVE_CAMERA_JOB, this.assignments)) {
+ // reassign secondPincher to firstPincher
+ const first = assign(second.touch, FIRST_PINCHER_JOB, this.assignments);
+ first.clientX = second.clientX;
+ first.clientY = second.clientY;
+ } else {
+ // reassign secondPincher to moveCamera
+ const cameraMover = assign(second.touch, MOVE_CAMERA_JOB, this.assignments);
+ cameraMover.clientX = second.clientX;
+ cameraMover.clientY = second.clientY;
+ cameraMover.delta = [0, 0];
+ }
+ }
+ break;
+ case SECOND_PINCHER_JOB:
+ unassign(assignment.touch, assignment.job, this.assignments);
+ this.pinch = { initialDistance: 0, currentDistance: 0, delta: 0 };
+ if (jobIsAssigned(FIRST_PINCHER_JOB, this.assignments) && !jobIsAssigned(MOVE_CAMERA_JOB, this.assignments)) {
+ //reassign firstPincher to moveCamera
+ const first = findByJob(FIRST_PINCHER_JOB, this.assignments);
+ unassign(first.touch, first.job, this.assignments);
+ const cameraMover = assign(first.touch, MOVE_CAMERA_JOB, this.assignments);
+ cameraMover.clientX = first.clientX;
+ cameraMover.clientY = first.clientY;
+ cameraMover.delta = [0, 0];
+ }
+ break;
+ }
+ }
+
+ move(touch) {
+ if (!touchIsAssigned(touch, this.assignments)) {
+ if (!touch.target.classList[0] || !touch.target.classList[0].startsWith("virtual-gamepad-controls")) {
+ console.warn("touch does not have job", touch);
+ }
+ return;
+ }
+
+ const assignment = findByTouch(touch, this.assignments);
+ switch (assignment.job) {
+ case MOVE_CURSOR_JOB:
+ assignment.cursorPose.fromCameraProjection(
+ document.querySelector("#player-camera").components.camera.camera,
+ (touch.clientX / window.innerWidth) * 2 - 1,
+ -(touch.clientY / window.innerHeight) * 2 + 1
+ );
+ break;
+ case MOVE_CAMERA_JOB:
+ assignment.delta[0] += touch.clientX - assignment.clientX;
+ assignment.delta[1] += touch.clientY - assignment.clientY;
+ assignment.clientX = touch.clientX;
+ assignment.clientY = touch.clientY;
+ break;
+ case FIRST_PINCHER_JOB:
+ case SECOND_PINCHER_JOB:
+ assignment.clientX = touch.clientX;
+ assignment.clientY = touch.clientY;
+ if (jobIsAssigned(FIRST_PINCHER_JOB, this.assignments) && jobIsAssigned(SECOND_PINCHER_JOB, this.assignments)) {
+ const first = findByJob(FIRST_PINCHER_JOB, this.assignments);
+ const second = findByJob(SECOND_PINCHER_JOB, this.assignments);
+ const currentDistance = distance(first.clientX, first.clientY, second.clientX, second.clientY);
+ this.pinch.delta += currentDistance - this.pinch.currentDistance;
+ this.pinch.currentDistance = currentDistance;
+ }
+ break;
+ }
+ }
+
+ start(touch) {
+ if (touchIsAssigned(touch, this.assignments)) {
+ console.error("touch already has a job");
+ return;
+ }
+
+ if (!jobIsAssigned(MOVE_CURSOR_JOB, this.assignments) && shouldMoveCursor(touch, this.raycaster)) {
+ const assignment = assign(touch, MOVE_CURSOR_JOB, this.assignments);
+ assignment.cursorPose = new Pose().fromCameraProjection(
+ document.querySelector("#player-camera").components.camera.camera,
+ (touch.clientX / window.innerWidth) * 2 - 1,
+ -(touch.clientY / window.innerHeight) * 2 + 1
+ );
+ assignment.isFirstFrame = true;
+ return;
+ }
+
+ if (!jobIsAssigned(MOVE_CAMERA_JOB, this.assignments)) {
+ const assignment = assign(touch, MOVE_CAMERA_JOB, this.assignments);
+ assignment.clientX = touch.clientX;
+ assignment.clientY = touch.clientY;
+ assignment.delta = [0, 0];
+ return;
+ }
+
+ if (!jobIsAssigned(SECOND_PINCHER_JOB, this.assignments)) {
+ let first;
+ if (jobIsAssigned(FIRST_PINCHER_JOB, this.assignments)) {
+ first = findByJob(FIRST_PINCHER_JOB, this.assignments);
+ } else {
+ const cameraMover = findByJob(MOVE_CAMERA_JOB, this.assignments);
+ unassign(cameraMover.touch, cameraMover.job, this.assignments);
+
+ first = assign(cameraMover.touch, FIRST_PINCHER_JOB, this.assignments);
+ first.clientX = cameraMover.clientX;
+ first.clientY = cameraMover.clientY;
+ }
+
+ const second = assign(touch, SECOND_PINCHER_JOB, this.assignments);
+ second.clientX = touch.clientX;
+ second.clientY = touch.clientY;
+
+ const initialDistance = distance(first.clientX, first.clientY, second.clientX, second.clientY);
+ this.pinch = {
+ initialDistance,
+ currentDistance: initialDistance,
+ delta: 0
+ };
+ return;
+ }
+
+ console.warn("no job suitable for touch", touch);
+ }
+
+ process(event) {
+ switch (event.type) {
+ case "touchstart":
+ for (const touch of event.changedTouches) {
+ this.start(touch);
+ }
+ break;
+ case "touchmove":
+ for (const touch of event.touches) {
+ this.move(touch);
+ }
+ break;
+ case "touchend":
+ case "touchcancel":
+ for (const touch of event.changedTouches) {
+ this.end(touch);
+ }
+ break;
+ }
+ }
+
+ write(frame) {
+ if (this.pinch) {
+ this.pinch.delta = 0;
+ }
+ const cameraMover =
+ jobIsAssigned(MOVE_CAMERA_JOB, this.assignments) && findByJob(MOVE_CAMERA_JOB, this.assignments);
+ if (cameraMover) {
+ cameraMover.delta[0] = 0;
+ cameraMover.delta[1] = 0;
+ }
+
+ this.events.forEach(event => {
+ this.process(event, frame);
+ });
+ while (this.events.length) {
+ this.events.pop();
+ }
+
+ const path = paths.device.touchscreen;
+ if (jobIsAssigned(MOVE_CURSOR_JOB, this.assignments)) {
+ const assignment = findByJob(MOVE_CURSOR_JOB, this.assignments);
+ frame[path.cursorPose] = assignment.cursorPose;
+ // If you touch a grabbable, we want to wait 1 frame before admitting it to anyone else, because we
+ // want to hover on the first frame and grab on the next.
+ frame[path.isTouchingGrabbable] = !assignment.isFirstFrame;
+ assignment.isFirstFrame = false;
+ }
+
+ if (jobIsAssigned(MOVE_CAMERA_JOB, this.assignments)) {
+ frame[path.touchCameraDelta] = findByJob(MOVE_CAMERA_JOB, this.assignments).delta;
+ }
+
+ frame[path.pinch.delta] = this.pinch.delta;
+ frame[path.pinch.initialDistance] = this.pinch.initialDistance;
+ frame[path.pinch.currentDistance] = this.pinch.currentDistance;
+ }
+}
diff --git a/src/systems/userinput/devices/daydream-controller.js b/src/systems/userinput/devices/daydream-controller.js
new file mode 100644
index 0000000000000000000000000000000000000000..2b08ce300c0a49ef4f18585cd24a8cae40ea8f99
--- /dev/null
+++ b/src/systems/userinput/devices/daydream-controller.js
@@ -0,0 +1,50 @@
+import { paths } from "../paths";
+import { Pose } from "../pose";
+
+export class DaydreamControllerDevice {
+ constructor(gamepad) {
+ this.gamepad = gamepad;
+ this.buttonMap = [{ name: "touchpad", buttonId: 0 }];
+ this.axisMap = [{ name: "touchpadX", axisId: 0 }, { name: "touchpadY", axisId: 1 }];
+
+ this.rayObjectRotation = new THREE.Quaternion();
+ this.selector = `#player-${gamepad.hand}-controller`;
+ this.pose = new Pose();
+ }
+
+ write(frame) {
+ if (this.gamepad.connected) {
+ this.gamepad.buttons.forEach((button, i) => {
+ const buttonPath = paths.device.gamepad(this.gamepad.index).button(i);
+ frame[buttonPath.pressed] = !!button.pressed;
+ frame[buttonPath.touched] = !!button.touched;
+ frame[buttonPath.value] = button.value;
+ });
+ this.gamepad.axes.forEach((axis, i) => {
+ frame[paths.device.gamepad(this.gamepad.index).axis(i)] = axis;
+ });
+
+ this.buttonMap.forEach(button => {
+ const outpath = paths.device.daydream.button(button.name);
+ frame[outpath.pressed] = !!frame[paths.device.gamepad(this.gamepad.index).button(button.buttonId).pressed];
+ frame[outpath.touched] = !!frame[paths.device.gamepad(this.gamepad.index).button(button.buttonId).touched];
+ frame[outpath.value] = frame[paths.device.gamepad(this.gamepad.index).button(button.buttonId).value];
+ });
+ this.axisMap.forEach(axis => {
+ frame[paths.device.daydream.axis(axis.name)] =
+ frame[paths.device.gamepad(this.gamepad.index).axis(axis.axisId)];
+ });
+
+ // TODO ideally we should just be getting pose from the gamepad
+ if (!this.rayObject) {
+ this.rayObject = document.querySelector(this.selector).object3D;
+ }
+ this.rayObject.updateMatrixWorld();
+ this.rayObjectRotation.setFromRotationMatrix(this.rayObject.matrixWorld);
+ this.pose.position.setFromMatrixPosition(this.rayObject.matrixWorld);
+ this.pose.direction.set(0, 0, -1).applyQuaternion(this.rayObjectRotation);
+ this.pose.fromOriginAndDirection(this.pose.position, this.pose.direction);
+ frame[paths.device.daydream.pose] = this.pose;
+ }
+ }
+}
diff --git a/src/systems/userinput/devices/gamepad.js b/src/systems/userinput/devices/gamepad.js
new file mode 100644
index 0000000000000000000000000000000000000000..5acc7aa8218a6fce33fcbdf091a8a7502d6b09b4
--- /dev/null
+++ b/src/systems/userinput/devices/gamepad.js
@@ -0,0 +1,21 @@
+import { paths } from "../paths";
+
+export class GamepadDevice {
+ constructor(gamepad) {
+ this.gamepad = gamepad;
+ }
+
+ write(frame) {
+ if (this.gamepad.connected) {
+ this.gamepad.buttons.forEach((button, i) => {
+ const buttonPath = paths.device.gamepad(this.gamepad.index).button(i);
+ frame[buttonPath.pressed] = !!button.pressed;
+ frame[buttonPath.touched] = !!button.touched;
+ frame[buttonPath.value] = button.value;
+ });
+ this.gamepad.axes.forEach((axis, i) => {
+ frame[paths.device.gamepad(this.gamepad.index).axis(i)] = axis;
+ });
+ }
+ }
+}
diff --git a/src/components/look-on-mobile.js b/src/systems/userinput/devices/gyro.js
similarity index 63%
rename from src/components/look-on-mobile.js
rename to src/systems/userinput/devices/gyro.js
index 7cde5ba136933c7d658693f00e3a3ea3a3316307..9e36ad5c6628d0fe53c35968d1fcb645a6ccd34e 100644
--- a/src/components/look-on-mobile.js
+++ b/src/systems/userinput/devices/gyro.js
@@ -1,3 +1,5 @@
+import { paths } from "../paths";
+
const TWOPI = Math.PI * 2;
class CircularBuffer {
@@ -40,45 +42,20 @@ const average = a => {
return sum / a.length;
};
-AFRAME.registerComponent("look-on-mobile", {
- schema: {
- horizontalLookSpeedRatio: { default: 1.0 }, // motion applied to camera / motion of polyfill object
- verticalLookSpeedRatio: { default: 1.0 }, // motion applied to camera / motion of polyfill object
- camera: { type: "selector" }
- },
-
- init() {
+export class GyroDevice {
+ constructor() {
this.hmdEuler = new THREE.Euler();
this.hmdQuaternion = new THREE.Quaternion();
this.prevX = this.hmdEuler.x;
this.prevY = this.hmdEuler.y;
- this.pendingLookX = 0;
- this.onRotateX = this.onRotateX.bind(this);
this.dXBuffer = new CircularBuffer(6);
this.dYBuffer = new CircularBuffer(6);
this.vrDisplay = window.webvrpolyfill.getPolyfillDisplays()[0];
this.frameData = new window.webvrpolyfill.constructor.VRFrameData();
- },
-
- play() {
- this.el.addEventListener("rotateX", this.onRotateX);
- },
-
- pause() {
- this.el.removeEventListener("rotateX", this.onRotateX);
- },
-
- update() {
- this.cameraController = this.data.camera.components["pitch-yaw-rotator"];
- },
-
- onRotateX(e) {
- this.pendingLookX = e.detail.value;
- },
+ }
- tick() {
+ write(frame) {
const hmdEuler = this.hmdEuler;
- const { horizontalLookSpeedRatio, verticalLookSpeedRatio } = this.data;
this.vrDisplay.getFrameData(this.frameData);
if (this.frameData.pose.orientation !== null) {
this.hmdQuaternion.fromArray(this.frameData.pose.orientation);
@@ -91,13 +68,12 @@ AFRAME.registerComponent("look-on-mobile", {
this.dXBuffer.push(Math.abs(dX) < 0.001 ? 0 : dX);
this.dYBuffer.push(Math.abs(dY) < 0.001 ? 0 : dY);
- const deltaYaw = average(this.dYBuffer.items) * horizontalLookSpeedRatio;
- const deltaPitch = average(this.dXBuffer.items) * verticalLookSpeedRatio + this.pendingLookX;
-
- this.cameraController.look(deltaPitch, deltaYaw);
+ this.averageDeltaX = average(this.dXBuffer.items);
+ this.averageDeltaY = average(this.dYBuffer.items);
this.prevX = hmdEuler.x;
this.prevY = hmdEuler.y;
- this.pendingLookX = 0;
+ frame[paths.device.gyro.averageDeltaX] = this.averageDeltaX;
+ frame[paths.device.gyro.averageDeltaY] = this.averageDeltaY;
}
-});
+}
diff --git a/src/systems/userinput/devices/hud.js b/src/systems/userinput/devices/hud.js
new file mode 100644
index 0000000000000000000000000000000000000000..9981b01128d67ca090fcccd2b8ab13339368cfb0
--- /dev/null
+++ b/src/systems/userinput/devices/hud.js
@@ -0,0 +1,15 @@
+import { paths } from "../paths";
+
+export class HudDevice {
+ constructor() {
+ this.events = [];
+ document.querySelector("a-scene").addEventListener("penButtonPressed", this.events.push.bind(this.events));
+ }
+
+ write(frame) {
+ frame[paths.device.hud.penButton] = this.events.length !== 0;
+ while (this.events.length) {
+ this.events.pop();
+ }
+ }
+}
diff --git a/src/systems/userinput/devices/keyboard.js b/src/systems/userinput/devices/keyboard.js
new file mode 100644
index 0000000000000000000000000000000000000000..572e78596eb677e96e04a70c49f09465e4f0efc8
--- /dev/null
+++ b/src/systems/userinput/devices/keyboard.js
@@ -0,0 +1,23 @@
+import { paths } from "../paths";
+export class KeyboardDevice {
+ constructor() {
+ this.keys = {};
+ this.events = [];
+
+ ["keydown", "keyup", "blur", "mouseout"].map(x => document.addEventListener(x, this.events.push.bind(this.events)));
+ }
+
+ write(frame) {
+ this.events.forEach(event => {
+ if (event.type === "blur" || event.type === "mouseout") {
+ this.keys = {};
+ return;
+ }
+ this.keys[paths.device.keyboard.key(event.key)] = event.type === "keydown";
+ });
+ while (this.events.length) {
+ this.events.pop();
+ }
+ Object.assign(frame, this.keys);
+ }
+}
diff --git a/src/systems/userinput/devices/mouse.js b/src/systems/userinput/devices/mouse.js
new file mode 100644
index 0000000000000000000000000000000000000000..0ab7a3ac2aea0ce0ec44ad55fb5804348443bcae
--- /dev/null
+++ b/src/systems/userinput/devices/mouse.js
@@ -0,0 +1,77 @@
+import { paths } from "../paths";
+
+// TODO: Where do these values (500, 10, 2) come from?
+const modeMod = {
+ [WheelEvent.DOM_DELTA_PIXEL]: 500,
+ [WheelEvent.DOM_DELTA_LINE]: 10,
+ [WheelEvent.DOM_DELTA_PAGE]: 2
+};
+
+export class MouseDevice {
+ constructor() {
+ this.events = [];
+ this.coords = [0, 0]; // normalized screenspace coordinates in [(-1, 1), (-1, 1)]
+ this.movementXY = [0, 0]; // deltas
+ this.buttonLeft = false;
+ this.buttonRight = false;
+ this.wheel = 0; // delta
+
+ const queueEvent = this.events.push.bind(this.events);
+ const canvas = document.querySelector("canvas");
+ ["mousedown", "mouseup", "mousemove", "wheel"].map(x => canvas.addEventListener(x, queueEvent));
+ ["mouseout", "blur"].map(x => document.addEventListener(x, queueEvent));
+ }
+
+ process(event) {
+ if (event.type === "wheel") {
+ this.wheel += event.deltaY / modeMod[event.deltaMode];
+ return;
+ }
+ if (event.type === "mouseout" || event.type === "blur") {
+ this.coords[0] = 0;
+ this.coords[1] = 0;
+ this.movementXY[0] = 0;
+ this.movementXY[1] = 0;
+ this.buttonLeft = false;
+ this.buttonRight = false;
+ this.wheel = 0;
+ }
+ const left = event.button === 0;
+ const right = event.button === 2;
+ this.coords[0] = (event.clientX / window.innerWidth) * 2 - 1;
+ this.coords[1] = -(event.clientY / window.innerHeight) * 2 + 1;
+ this.movementXY[0] += event.movementX;
+ this.movementXY[1] += event.movementY;
+ if (event.type === "mousedown" && left) {
+ this.buttonLeft = true;
+ } else if (event.type === "mousedown" && right) {
+ this.buttonRight = true;
+ } else if (event.type === "mouseup" && left) {
+ this.buttonLeft = false;
+ } else if (event.type === "mouseup" && right) {
+ this.buttonRight = false;
+ }
+ }
+
+ write(frame) {
+ this.movementXY = [0, 0]; // deltas
+ this.wheel = 0; // delta
+ this.events.forEach(event => {
+ this.process(event, frame);
+ });
+
+ while (this.events.length) {
+ this.events.pop();
+ }
+
+ frame[paths.device.mouse.coords] = this.coords;
+ frame[paths.device.mouse.movementXY] = this.movementXY;
+ frame[paths.device.mouse.buttonLeft] = this.buttonLeft;
+ frame[paths.device.mouse.buttonRight] = this.buttonRight;
+ frame[paths.device.mouse.wheel] = this.wheel;
+ }
+}
+
+window.oncontextmenu = e => {
+ e.preventDefault();
+};
diff --git a/src/systems/userinput/devices/oculus-go-controller.js b/src/systems/userinput/devices/oculus-go-controller.js
new file mode 100644
index 0000000000000000000000000000000000000000..8112800cf01b8f9d775fbb1c222c6f521794dde0
--- /dev/null
+++ b/src/systems/userinput/devices/oculus-go-controller.js
@@ -0,0 +1,50 @@
+import { paths } from "../paths";
+import { Pose } from "../pose";
+
+export class OculusGoControllerDevice {
+ constructor(gamepad) {
+ this.gamepad = gamepad;
+ this.buttonMap = [{ name: "touchpad", buttonId: 0 }, { name: "trigger", buttonId: 1 }];
+ this.axisMap = [{ name: "touchpadX", axisId: 0 }, { name: "touchpadY", axisId: 1 }];
+
+ this.rayObjectRotation = new THREE.Quaternion();
+ this.selector = `#player-${gamepad.hand}-controller`;
+ this.pose = new Pose();
+ }
+
+ write(frame) {
+ if (this.gamepad.connected) {
+ this.gamepad.buttons.forEach((button, i) => {
+ const buttonPath = paths.device.gamepad(this.gamepad.index).button(i);
+ frame[buttonPath.pressed] = !!button.pressed;
+ frame[buttonPath.touched] = !!button.touched;
+ frame[buttonPath.value] = button.value;
+ });
+ this.gamepad.axes.forEach((axis, i) => {
+ frame[paths.device.gamepad(this.gamepad.index).axis(i)] = axis;
+ });
+
+ this.buttonMap.forEach(button => {
+ const outpath = paths.device.oculusgo.button(button.name);
+ frame[outpath.pressed] = !!frame[paths.device.gamepad(this.gamepad.index).button(button.buttonId).pressed];
+ frame[outpath.touched] = !!frame[paths.device.gamepad(this.gamepad.index).button(button.buttonId).touched];
+ frame[outpath.value] = frame[paths.device.gamepad(this.gamepad.index).button(button.buttonId).value];
+ });
+ this.axisMap.forEach(axis => {
+ frame[paths.device.oculusgo.axis(axis.name)] =
+ frame[paths.device.gamepad(this.gamepad.index).axis(axis.axisId)];
+ });
+
+ // TODO ideally we should just be getting pose from the gamepad
+ if (!this.rayObject) {
+ this.rayObject = document.querySelector(this.selector).object3D;
+ }
+ this.rayObject.updateMatrixWorld();
+ this.rayObjectRotation.setFromRotationMatrix(this.rayObject.matrixWorld);
+ this.pose.position.setFromMatrixPosition(this.rayObject.matrixWorld);
+ this.pose.direction.set(0, 0, -1).applyQuaternion(this.rayObjectRotation);
+ this.pose.fromOriginAndDirection(this.pose.position, this.pose.direction);
+ frame[paths.device.oculusgo.pose] = this.pose;
+ }
+ }
+}
diff --git a/src/systems/userinput/devices/oculus-touch-controller.js b/src/systems/userinput/devices/oculus-touch-controller.js
new file mode 100644
index 0000000000000000000000000000000000000000..75658748c22e7aadef2832867ceefd1871758a93
--- /dev/null
+++ b/src/systems/userinput/devices/oculus-touch-controller.js
@@ -0,0 +1,75 @@
+import { paths } from "../paths";
+import { Pose } from "../pose";
+
+export const leftOculusTouchButtonMap = [
+ { name: "thumbStick", buttonId: 0 },
+ { name: "trigger", buttonId: 1 },
+ { name: "grip", buttonId: 2 },
+ { name: "x", buttonId: 3 },
+ { name: "y", buttonId: 4 }
+];
+export const rightOculusTouchButtonMap = [
+ { name: "thumbStick", buttonId: 0 },
+ { name: "trigger", buttonId: 1 },
+ { name: "grip", buttonId: 2 },
+ { name: "a", buttonId: 3 },
+ { name: "b", buttonId: 4 }
+];
+
+export class OculusTouchControllerDevice {
+ constructor(gamepad) {
+ this.rayObjectRotation = new THREE.Quaternion();
+
+ // wake the gamepad api up. otherwise it does not report touch controllers.
+ // in chrome it still won't unless you enter vr.
+ navigator.getVRDisplays();
+
+ const buttonMaps = {
+ left: leftOculusTouchButtonMap,
+ right: rightOculusTouchButtonMap
+ };
+
+ const devicePaths = {
+ left: paths.device.leftOculusTouch,
+ right: paths.device.rightOculusTouch
+ };
+
+ this.gamepad = gamepad;
+ this.pose = new Pose();
+ this.buttonMap = buttonMaps[gamepad.hand];
+ this.axisMap = [{ name: "joyX", axisId: 0 }, { name: "joyY", axisId: 1 }];
+ this.path = devicePaths[gamepad.hand];
+ this.selector = `#player-${gamepad.hand}-controller`;
+ }
+ write(frame) {
+ if (!this.gamepad.connected) return;
+
+ this.gamepad.buttons.forEach((button, i) => {
+ const buttonPath = paths.device.gamepad(this.gamepad.index).button(i);
+ frame[buttonPath.pressed] = !!button.pressed;
+ frame[buttonPath.touched] = !!button.touched;
+ frame[buttonPath.value] = button.value;
+ });
+ this.gamepad.axes.forEach((axis, i) => {
+ frame[paths.device.gamepad(this.gamepad.index).axis(i)] = axis;
+ });
+
+ this.buttonMap.forEach(button => {
+ const outpath = this.path.button(button.name);
+ frame[outpath.pressed] = !!frame[paths.device.gamepad(this.gamepad.index).button(button.buttonId).pressed];
+ frame[outpath.touched] = !!frame[paths.device.gamepad(this.gamepad.index).button(button.buttonId).touched];
+ frame[outpath.value] = frame[paths.device.gamepad(this.gamepad.index).button(button.buttonId).value];
+ });
+ this.axisMap.forEach(axis => {
+ frame[this.path.axis(axis.name)] = frame[paths.device.gamepad(this.gamepad.index).axis(axis.axisId)];
+ });
+
+ const rayObject = document.querySelector(this.selector).object3D;
+ rayObject.updateMatrixWorld();
+ this.rayObjectRotation.setFromRotationMatrix(rayObject.matrixWorld);
+ this.pose.position.setFromMatrixPosition(rayObject.matrixWorld);
+ this.pose.direction.set(0, 0, -1).applyQuaternion(this.rayObjectRotation);
+ this.pose.fromOriginAndDirection(this.pose.position, this.pose.direction);
+ frame[this.path.pose] = this.pose;
+ }
+}
diff --git a/src/systems/userinput/devices/touchscreen/assignments.js b/src/systems/userinput/devices/touchscreen/assignments.js
new file mode 100644
index 0000000000000000000000000000000000000000..8fa17f18365cf0db594e25bf3bdd8489008d34f8
--- /dev/null
+++ b/src/systems/userinput/devices/touchscreen/assignments.js
@@ -0,0 +1,44 @@
+export function touchIsAssigned(touch, assignments) {
+ return (
+ assignments.find(assignment => {
+ return assignment.touch.identifier === touch.identifier;
+ }) !== undefined
+ );
+}
+
+export function jobIsAssigned(job, assignments) {
+ return (
+ assignments.find(assignment => {
+ return assignment.job === job;
+ }) !== undefined
+ );
+}
+
+export function assign(touch, job, assignments) {
+ if (touchIsAssigned(touch, assignments) || jobIsAssigned(job, assignments)) {
+ console.error("cannot reassign touches or jobs. unassign first");
+ return undefined;
+ }
+ const assignment = { job, touch };
+ assignments.push(assignment);
+ return assignment;
+}
+
+export function unassign(touch, job, assignments) {
+ function match(assignment) {
+ return assignment.touch.identifier === touch.identifier && assignment.job === job;
+ }
+ assignments.splice(assignments.findIndex(match), 1);
+}
+
+export function findByJob(job, assignments) {
+ return assignments.find(assignment => {
+ return assignment.job === job;
+ });
+}
+
+export function findByTouch(touch, assignments) {
+ return assignments.find(assignment => {
+ return assignment.touch.identifier === touch.identifier;
+ });
+}
diff --git a/src/systems/userinput/devices/vive-controller.js b/src/systems/userinput/devices/vive-controller.js
new file mode 100644
index 0000000000000000000000000000000000000000..4430c29aa5fd70aceaa3695f867e68a714488b90
--- /dev/null
+++ b/src/systems/userinput/devices/vive-controller.js
@@ -0,0 +1,74 @@
+import { paths } from "../paths";
+import { Pose } from "../pose";
+
+export class ViveControllerDevice {
+ constructor(gamepad) {
+ this.rayObjectRotation = new THREE.Quaternion();
+
+ // wake the gamepad api up. otherwise it does not report touch controllers.
+ // in chrome it still won't unless you enter vr.
+ navigator.getVRDisplays();
+
+ this.buttonMap = [
+ { name: "touchpad", buttonId: 0 },
+ { name: "trigger", buttonId: 1 },
+ { name: "grip", buttonId: 2 },
+ { name: "top", buttonId: 3 }
+ ];
+
+ this.gamepad = gamepad;
+ this.pose = new Pose();
+ this.axisMap = [{ name: "joyX", axisId: 0 }, { name: "joyY", axisId: 1 }];
+ this.path = paths.device.vive[gamepad.hand || "right"];
+ if (!gamepad.hand) {
+ console.warn("gamepad detected without hand specified");
+ } else {
+ this.selector = `[super-hands]#player-${gamepad.hand}-controller`;
+ }
+ }
+ write(frame) {
+ if (!this.gamepad.connected) return;
+
+ this.gamepad.buttons.forEach((button, i) => {
+ const buttonPath = paths.device.gamepad(this.gamepad.index).button(i);
+ frame[buttonPath.pressed] = !!button.pressed;
+ frame[buttonPath.touched] = !!button.touched;
+ frame[buttonPath.value] = button.value;
+ });
+ this.gamepad.axes.forEach((axis, i) => {
+ frame[paths.device.gamepad(this.gamepad.index).axis(i)] = axis;
+ });
+
+ this.buttonMap.forEach(button => {
+ const outpath = this.path.button(button.name);
+ frame[outpath.pressed] = !!frame[paths.device.gamepad(this.gamepad.index).button(button.buttonId).pressed];
+ frame[outpath.touched] = !!frame[paths.device.gamepad(this.gamepad.index).button(button.buttonId).touched];
+ frame[outpath.value] = frame[paths.device.gamepad(this.gamepad.index).button(button.buttonId).value];
+ });
+ this.axisMap.forEach(axis => {
+ frame[this.path.axis(axis.name)] = frame[paths.device.gamepad(this.gamepad.index).axis(axis.axisId)];
+ });
+
+ if (!this.selector) {
+ if (this.gamepad.hand) {
+ this.path = paths.device.vive[this.gamepad.hand];
+ this.selector = `[super-hands]#player-${this.gamepad.hand}-controller`;
+ console.warn("gamepad hand eventually specified");
+ } else {
+ return;
+ }
+ }
+ const el = document.querySelector(this.selector);
+ if (el.components["tracked-controls"].controller !== this.gamepad) {
+ el.components["tracked-controls"].controller = this.gamepad;
+ el.setAttribute("tracked-controls", "controller", this.gamepad.index);
+ }
+ const rayObject = el.object3D;
+ rayObject.updateMatrixWorld();
+ this.rayObjectRotation.setFromRotationMatrix(rayObject.matrixWorld);
+ this.pose.position.setFromMatrixPosition(rayObject.matrixWorld);
+ this.pose.direction.set(0, 0, -1).applyQuaternion(this.rayObjectRotation);
+ this.pose.fromOriginAndDirection(this.pose.position, this.pose.direction);
+ frame[this.path.pose] = this.pose;
+ }
+}
diff --git a/src/systems/userinput/devices/xbox-controller.js b/src/systems/userinput/devices/xbox-controller.js
new file mode 100644
index 0000000000000000000000000000000000000000..82de323a8f434cf7b782fcbf15966e9e66d353fe
--- /dev/null
+++ b/src/systems/userinput/devices/xbox-controller.js
@@ -0,0 +1,55 @@
+import { paths } from "../paths";
+
+export class XboxControllerDevice {
+ constructor(gamepad) {
+ this.gamepad = gamepad;
+ this.buttonMap = [
+ { name: "a", buttonId: 0 },
+ { name: "b", buttonId: 1 },
+ { name: "x", buttonId: 2 },
+ { name: "y", buttonId: 3 },
+ { name: "leftBumper", buttonId: 4 },
+ { name: "rightBumper", buttonId: 5 },
+ { name: "leftTrigger", buttonId: 6 },
+ { name: "rightTrigger", buttonId: 7 },
+ { name: "back", buttonId: 8 },
+ { name: "start", buttonId: 9 },
+ { name: "leftJoystick", buttonId: 10 },
+ { name: "rightJoystick", buttonId: 11 },
+ { name: "dpadUp", buttonId: 12 },
+ { name: "dpadDown", buttonId: 13 },
+ { name: "dpadLeft", buttonId: 14 },
+ { name: "dpadRight", buttonId: 15 }
+ ];
+ this.axisMap = [
+ { name: "leftJoystickHorizontal", axisId: 0 },
+ { name: "leftJoystickVertical", axisId: 1 },
+ { name: "rightJoystickHorizontal", axisId: 2 },
+ { name: "rightJoystickVertical", axisId: 3 }
+ ];
+ }
+
+ write(frame) {
+ if (this.gamepad.connected) {
+ this.gamepad.buttons.forEach((button, i) => {
+ const buttonPath = paths.device.gamepad(this.gamepad.index).button(i);
+ frame[buttonPath.pressed] = !!button.pressed;
+ frame[buttonPath.touched] = !!button.touched;
+ frame[buttonPath.value] = button.value;
+ });
+ this.gamepad.axes.forEach((axis, i) => {
+ frame[paths.device.gamepad(this.gamepad.index).axis(i)] = axis;
+ });
+
+ this.buttonMap.forEach(button => {
+ const outpath = paths.device.xbox.button(button.name);
+ frame[outpath.pressed] = !!frame[paths.device.gamepad(this.gamepad.index).button(button.buttonId).pressed];
+ frame[outpath.touched] = !!frame[paths.device.gamepad(this.gamepad.index).button(button.buttonId).touched];
+ frame[outpath.value] = frame[paths.device.gamepad(this.gamepad.index).button(button.buttonId).value];
+ });
+ this.axisMap.forEach(axis => {
+ frame[paths.device.xbox.axis(axis.name)] = frame[paths.device.gamepad(this.gamepad.index).axis(axis.axisId)];
+ });
+ }
+ }
+}
diff --git a/src/systems/userinput/paths.js b/src/systems/userinput/paths.js
new file mode 100644
index 0000000000000000000000000000000000000000..d9f74a9ac6e437ead10d2e57237275c2de44aa44
--- /dev/null
+++ b/src/systems/userinput/paths.js
@@ -0,0 +1,188 @@
+export const paths = {};
+paths.noop = "/noop";
+paths.actions = {};
+paths.actions.log = "/actions/log";
+paths.actions.toggleScreenShare = "/actions/toggleScreenShare";
+paths.actions.snapRotateLeft = "/actions/snapRotateLeft";
+paths.actions.snapRotateRight = "/actions/snapRotateRight";
+paths.actions.logDebugFrame = "/actions/logDebugFrame";
+paths.actions.cameraDelta = "/actions/cameraDelta";
+paths.actions.characterAcceleration = "/actions/characterAcceleration";
+paths.actions.boost = "/actions/boost";
+paths.actions.startGazeTeleport = "/actions/startTeleport";
+paths.actions.stopGazeTeleport = "/actions/stopTeleport";
+paths.actions.spawnPen = "/actions/spawnPen";
+paths.actions.muteMic = "/actions/muteMic";
+paths.actions.cursor = {};
+paths.actions.cursor.pose = "/actions/cursorPose";
+paths.actions.cursor.grab = "/actions/cursorGrab";
+paths.actions.cursor.drop = "/actions/cursorDrop";
+paths.actions.cursor.modDelta = "/actions/cursorModDelta";
+paths.actions.cursor.startDrawing = "/actions/cursorStartDrawing";
+paths.actions.cursor.stopDrawing = "/actions/cursorStopDrawing";
+paths.actions.cursor.penNextColor = "/actions/cursorPenNextColor";
+paths.actions.cursor.penPrevColor = "/actions/cursorPenPrevColor";
+paths.actions.cursor.scalePenTip = "/actions/cursorScalePenTip";
+paths.actions.cursor.scaleGrabbedGrabbable = "/actions/cursorScaleGrabbedGrabbable";
+paths.actions.cursor.takeSnapshot = "/actions/cursorTakeSnapshot";
+paths.actions.rightHand = {};
+paths.actions.rightHand.pose = "/actions/rightHandPose";
+paths.actions.rightHand.grab = "/actions/rightHandGrab";
+paths.actions.rightHand.drop = "/actions/rightHandDrop";
+paths.actions.rightHand.modDelta = "/actions/rightHandModDelta";
+paths.actions.rightHand.startDrawing = "/actions/rightHandStartDrawing";
+paths.actions.rightHand.stopDrawing = "/actions/rightHandStopDrawing";
+paths.actions.rightHand.penNextColor = "/actions/rightHandPenNextColor";
+paths.actions.rightHand.penPrevColor = "/actions/rightHandPenPrevColor";
+paths.actions.rightHand.scalePenTip = "/actions/rightHandScalePenTip";
+paths.actions.rightHand.startTeleport = "/actions/rightHandStartTeleport";
+paths.actions.rightHand.stopTeleport = "/actions/rightHandStopTeleport";
+paths.actions.rightHand.takeSnapshot = "/actions/rightHandTakeSnapshot";
+paths.actions.rightHand.thumb = "/actions/rightHand/thumbDown";
+paths.actions.rightHand.index = "/actions/rightHand/indexDown";
+paths.actions.rightHand.middleRingPinky = "/actions/rightHand/middleRingPinkyDown";
+paths.actions.leftHand = {};
+paths.actions.leftHand.pose = "/actions/leftHandPose";
+paths.actions.leftHand.grab = "/actions/leftHandGrab";
+paths.actions.leftHand.drop = "/actions/leftHandDrop";
+paths.actions.leftHand.modDelta = "/actions/leftHandModDelta";
+paths.actions.leftHand.startDrawing = "/actions/leftHandStartDrawing";
+paths.actions.leftHand.stopDrawing = "/actions/leftHandStopDrawing";
+paths.actions.leftHand.penNextColor = "/actions/leftHandPenNextColor";
+paths.actions.leftHand.penPrevColor = "/actions/leftHandPenPrevColor";
+paths.actions.leftHand.scalePenTip = "/actions/leftHandScalePenTip";
+paths.actions.leftHand.startTeleport = "/actions/leftHandStartTeleport";
+paths.actions.leftHand.stopTeleport = "/actions/leftHandStopTeleport";
+paths.actions.leftHand.takeSnapshot = "/actions/leftHandTakeSnapshot";
+paths.actions.leftHand.thumb = "/actions/leftHand/thumbDown";
+paths.actions.leftHand.index = "/actions/leftHand/indexDown";
+paths.actions.leftHand.middleRingPinky = "/actions/leftHand/middleRingPinkyDown";
+
+paths.device = {};
+paths.device.mouse = {};
+paths.device.mouse.coords = "/device/mouse/coords";
+paths.device.mouse.movementXY = "/device/mouse/movementXY";
+paths.device.mouse.buttonLeft = "/device/mouse/buttonLeft";
+paths.device.mouse.buttonRight = "/device/mouse/buttonRight";
+paths.device.mouse.wheel = "/device/mouse/wheel";
+paths.device.smartMouse = {};
+paths.device.smartMouse.cursorPose = "/device/smartMouse/cursorPose";
+paths.device.smartMouse.cameraDelta = "/device/smartMouse/cameraDelta";
+paths.device.touchscreen = {};
+paths.device.touchscreen.cursorPose = "/device/touchscreen/cursorPose";
+paths.device.touchscreen.touchCameraDelta = "/device/touchscreen/touchCameraDelta";
+paths.device.touchscreen.gyroCameraDelta = "/device/touchscreen/gyroCameraDelta";
+paths.device.touchscreen.cameraDelta = "/device/touchscreen/cameraDelta";
+paths.device.touchscreen.pinch = {};
+paths.device.touchscreen.pinch.delta = "/device/touchscreen/pinch/delta";
+paths.device.touchscreen.pinch.initialDistance = "/device/touchscreen/pinch/initialDistance";
+paths.device.touchscreen.pinch.currentDistance = "/device/touchscreen/pinch/currentDistance";
+paths.device.touchscreen.isTouchingGrabbable = "/device/touchscreen/isTouchingGrabbable";
+paths.device.gyro = {};
+paths.device.gyro.averageDeltaX = "/device/gyro/averageDeltaX";
+paths.device.gyro.averageDeltaY = "/device/gyro/averageDeltaY";
+paths.device.hud = {};
+paths.device.hud.penButton = "/device/hud/penButton";
+
+paths.device.keyboard = {
+ key: key => {
+ return `/device/keyboard/${key.toLowerCase()}`;
+ }
+};
+
+paths.device.gamepad = gamepadIndex => ({
+ button: buttonIndex => ({
+ pressed: `/device/gamepad/${gamepadIndex}/button/${buttonIndex}/pressed`,
+ touched: `/device/gamepad/${gamepadIndex}/button/${buttonIndex}/touched`,
+ value: `/device/gamepad/${gamepadIndex}/button/${buttonIndex}/value`
+ }),
+ axis: axisIndex => `/device/gamepad/${gamepadIndex}/axis/${axisIndex}`
+});
+
+const xbox = "/device/xbox/";
+paths.device.xbox = {
+ button: buttonName => ({
+ pressed: `${xbox}button/${buttonName}/pressed`,
+ touched: `${xbox}button/${buttonName}/touched`,
+ value: `${xbox}button/${buttonName}/value`
+ }),
+ axis: axisName => {
+ return `${xbox}axis/${axisName}`;
+ }
+};
+
+const oculusgo = "/device/oculusgo/";
+paths.device.oculusgo = {
+ button: buttonName => ({
+ pressed: `${oculusgo}button/${buttonName}/pressed`,
+ touched: `${oculusgo}button/${buttonName}/touched`,
+ value: `${oculusgo}button/${buttonName}/value`
+ }),
+ axis: axisName => {
+ return `${oculusgo}axis/${axisName}`;
+ },
+ pose: `${oculusgo}pose`
+};
+
+const daydream = "/device/daydream/";
+paths.device.daydream = {
+ button: buttonName => ({
+ pressed: `${daydream}button/${buttonName}/pressed`,
+ touched: `${daydream}button/${buttonName}/touched`,
+ value: `${daydream}button/${buttonName}/value`
+ }),
+ axis: axisName => {
+ return `${daydream}axis/${axisName}`;
+ },
+ pose: `${daydream}pose`
+};
+
+const rightOculusTouch = "/device/rightOculusTouch/";
+paths.device.rightOculusTouch = {
+ button: buttonName => ({
+ pressed: `${rightOculusTouch}button/${buttonName}/pressed`,
+ touched: `${rightOculusTouch}button/${buttonName}/touched`,
+ value: `${rightOculusTouch}button/${buttonName}/value`
+ }),
+ axis: axisName => {
+ return `${rightOculusTouch}axis/${axisName}`;
+ },
+ pose: `${rightOculusTouch}pose`
+};
+
+const leftOculusTouch = "/device/leftOculusTouch/";
+paths.device.leftOculusTouch = {
+ button: buttonName => ({
+ pressed: `${leftOculusTouch}button/${buttonName}/pressed`,
+ touched: `${leftOculusTouch}button/${buttonName}/touched`,
+ value: `${leftOculusTouch}button/${buttonName}/value`
+ }),
+ axis: axisName => {
+ return `${leftOculusTouch}axis/${axisName}`;
+ },
+ pose: `${leftOculusTouch}pose`
+};
+
+paths.device.vive = {};
+paths.device.vive.left = {
+ button: buttonName => ({
+ pressed: `/device/vive/left/button/${buttonName}/pressed`,
+ touched: `/device/vive/left/button/${buttonName}/touched`,
+ value: `/device/vive/left/button/${buttonName}/value`
+ }),
+ axis: axisName => {
+ return `/device/vive/left/axis/${axisName}`;
+ },
+ pose: `/device/vive/left/pose`
+};
+paths.device.vive.right = {
+ button: buttonName => ({
+ pressed: `/device/vive/right/button/${buttonName}/pressed`,
+ touched: `/device/vive/right/button/${buttonName}/touched`,
+ value: `/device/vive/right/button/${buttonName}/value`
+ }),
+ axis: axisName => {
+ return `/device/vive/right/axis/${axisName}`;
+ },
+ pose: `/device/vive/right/pose`
+};
diff --git a/src/systems/userinput/pose.js b/src/systems/userinput/pose.js
new file mode 100644
index 0000000000000000000000000000000000000000..3a75b14203adc7c6acc23a7c3efca8c1001eaa58
--- /dev/null
+++ b/src/systems/userinput/pose.js
@@ -0,0 +1,24 @@
+const forward = new THREE.Vector3(0, 0, -1);
+export function Pose() {
+ return {
+ position: new THREE.Vector3(),
+ direction: new THREE.Vector3(),
+ orientation: new THREE.Quaternion(),
+ fromOriginAndDirection: function(origin, direction) {
+ this.position = origin;
+ this.direction = direction;
+ this.orientation = this.orientation.setFromUnitVectors(forward, direction);
+ return this;
+ },
+ fromCameraProjection: function(camera, normalizedX, normalizedY) {
+ this.position.setFromMatrixPosition(camera.matrixWorld);
+ this.direction
+ .set(normalizedX, normalizedY, 0.5)
+ .unproject(camera)
+ .sub(this.position)
+ .normalize();
+ this.fromOriginAndDirection(this.position, this.direction);
+ return this;
+ }
+ };
+}
diff --git a/src/systems/userinput/resolve-action-sets.js b/src/systems/userinput/resolve-action-sets.js
new file mode 100644
index 0000000000000000000000000000000000000000..d1375f1b02df1c6f3d56463824a13600383fea6b
--- /dev/null
+++ b/src/systems/userinput/resolve-action-sets.js
@@ -0,0 +1,165 @@
+import { sets } from "./sets";
+
+export function updateActionSetsBasedOnSuperhands() {
+ const rightHandState = document.querySelector("#player-right-controller").components["super-hands"].state;
+ const leftHandState = document.querySelector("#player-left-controller").components["super-hands"].state;
+ const cursorHand = document.querySelector("#cursor").components["super-hands"].state;
+ const leftTeleporter = document.querySelector("#player-left-controller").components["teleport-controls"];
+ const rightTeleporter = document.querySelector("#player-right-controller").components["teleport-controls"];
+ const cursorController = document.querySelector("#cursor-controller").components["cursor-controller"];
+
+ const leftHandHoveringOnInteractable =
+ !leftTeleporter.active &&
+ leftHandState.has("hover-start") &&
+ leftHandState.get("hover-start").matches(".interactable, .interactable *");
+ const leftHandHoveringOnPen =
+ !leftTeleporter.active &&
+ leftHandState.has("hover-start") &&
+ leftHandState.get("hover-start").matches(".pen, .pen *");
+ const leftHandHoveringOnCamera =
+ !leftTeleporter.active &&
+ leftHandState.has("hover-start") &&
+ leftHandState.get("hover-start").matches(".icamera, .icamera *");
+ const leftHandHoldingInteractable =
+ !leftTeleporter.active &&
+ leftHandState.has("grab-start") &&
+ leftHandState.get("grab-start").matches(".interactable, .interactable *");
+ const leftHandHoldingPen =
+ !leftTeleporter.active &&
+ leftHandState.has("grab-start") &&
+ leftHandState.get("grab-start").matches(".pen, .pen *");
+ const leftHandHoldingCamera =
+ !leftTeleporter.active &&
+ leftHandState.has("grab-start") &&
+ leftHandState.get("grab-start").matches(".icamera, .icamera *");
+ const leftHandHovering = !leftTeleporter.active && leftHandState.has("hover-start");
+ const leftHandHoveringOnNothing = !leftHandHovering && !leftHandState.has("grab-start");
+ const leftHandTeleporting = leftTeleporter.active;
+
+ const cursorGrabbing = cursorHand.has("grab-start");
+
+ const rightHandTeleporting = rightTeleporter.active;
+ const rightHandHovering = !rightHandTeleporting && !cursorGrabbing && rightHandState.has("hover-start");
+ const rightHandGrabbing = !rightHandTeleporting && !cursorGrabbing && rightHandState.has("grab-start");
+
+ const rightHandHoveringOnInteractable =
+ !rightHandTeleporting &&
+ !cursorGrabbing &&
+ rightHandState.has("hover-start") &&
+ rightHandState.get("hover-start").matches(".interactable, .interactable *");
+ const rightHandHoveringOnPen =
+ !rightHandTeleporting &&
+ !cursorGrabbing &&
+ rightHandState.has("hover-start") &&
+ rightHandState.get("hover-start").matches(".pen, .pen *");
+ const rightHandHoveringOnCamera =
+ !rightTeleporter.active &&
+ !cursorGrabbing &&
+ rightHandState.has("hover-start") &&
+ rightHandState.get("hover-start").matches(".icamera, .icamera *");
+ const rightHandHoldingInteractable =
+ !rightHandTeleporting &&
+ !cursorGrabbing &&
+ rightHandState.has("grab-start") &&
+ rightHandState.get("grab-start").matches(".interactable, .interactable *");
+ const rightHandHoldingPen =
+ !rightHandTeleporting &&
+ !cursorGrabbing &&
+ rightHandState.has("grab-start") &&
+ rightHandState.get("grab-start").matches(".pen, .pen *");
+ const rightHandHoldingCamera =
+ !rightTeleporter.active &&
+ !cursorGrabbing &&
+ rightHandState.has("grab-start") &&
+ rightHandState.get("grab-start").matches(".icamera, .icamera *");
+
+ const rightHandHoveringOnNothing =
+ !rightHandTeleporting &&
+ !rightHandHovering &&
+ !cursorHand.has("hover-start") &&
+ !cursorGrabbing &&
+ !rightHandState.has("grab-start");
+
+ // Cursor
+ cursorController.enabled = !(rightHandTeleporting || rightHandHovering || rightHandGrabbing);
+
+ const cursorHoveringOnInteractable =
+ cursorController.enabled &&
+ !rightHandTeleporting &&
+ !rightHandHovering &&
+ !rightHandGrabbing &&
+ cursorHand.has("hover-start") &&
+ cursorHand.get("hover-start").matches(".interactable, .interactable *");
+ const cursorHoveringOnCamera =
+ cursorController.enabled &&
+ !rightTeleporter.active &&
+ !rightHandHovering &&
+ !rightHandGrabbing &&
+ (cursorHand.has("hover-start") && cursorHand.get("hover-start").matches(".icamera, .icamera *"));
+ const cursorHoveringOnUI =
+ cursorController.enabled &&
+ !rightHandTeleporting &&
+ !rightHandHovering &&
+ !rightHandGrabbing &&
+ (cursorHand.has("hover-start") && cursorHand.get("hover-start").matches(".ui, .ui *"));
+ const cursorHoveringOnPen =
+ cursorController.enabled &&
+ !rightHandTeleporting &&
+ !rightHandHovering &&
+ !rightHandGrabbing &&
+ cursorHand.has("hover-start") &&
+ cursorHand.get("hover-start").matches(".pen, .pen *");
+ const cursorHoldingInteractable =
+ cursorController.enabled &&
+ !rightHandTeleporting &&
+ cursorHand.has("grab-start") &&
+ cursorHand.get("grab-start").matches(".interactable, .interactable *");
+ const cursorHoldingPen =
+ cursorController.enabled &&
+ !rightHandTeleporting &&
+ cursorHand.has("grab-start") &&
+ cursorHand.get("grab-start").matches(".pen, .pen *");
+
+ const cursorHoldingCamera =
+ cursorController.enabled &&
+ !rightTeleporter.active &&
+ cursorHand.has("grab-start") &&
+ cursorHand.get("grab-start").matches(".icamera, .icamera *");
+
+ const cursorHoveringOnNothing =
+ cursorController.enabled &&
+ !rightHandTeleporting &&
+ !rightHandHovering &&
+ !rightHandGrabbing &&
+ !cursorHand.has("hover-start") &&
+ !cursorHand.has("grab-start") &&
+ !cursorHoveringOnUI;
+
+ const userinput = AFRAME.scenes[0].systems.userinput;
+ userinput.toggleActive(sets.leftHandHoveringOnInteractable, leftHandHoveringOnInteractable);
+ userinput.toggleActive(sets.leftHandHoveringOnPen, leftHandHoveringOnPen);
+ userinput.toggleActive(sets.leftHandHoveringOnCamera, leftHandHoveringOnCamera);
+ userinput.toggleActive(sets.leftHandHoveringOnNothing, leftHandHoveringOnNothing);
+ userinput.toggleActive(sets.leftHandHoldingPen, leftHandHoldingPen);
+ userinput.toggleActive(sets.leftHandHoldingInteractable, leftHandHoldingInteractable);
+ userinput.toggleActive(sets.leftHandHoldingCamera, leftHandHoldingCamera);
+ userinput.toggleActive(sets.leftHandTeleporting, leftHandTeleporting);
+
+ userinput.toggleActive(sets.rightHandHoveringOnInteractable, rightHandHoveringOnInteractable);
+ userinput.toggleActive(sets.rightHandHoveringOnPen, rightHandHoveringOnPen);
+ userinput.toggleActive(sets.rightHandHoveringOnNothing, rightHandHoveringOnNothing);
+ userinput.toggleActive(sets.rightHandHoveringOnCamera, rightHandHoveringOnCamera);
+ userinput.toggleActive(sets.rightHandHoldingPen, rightHandHoldingPen);
+ userinput.toggleActive(sets.rightHandHoldingInteractable, rightHandHoldingInteractable);
+ userinput.toggleActive(sets.rightHandTeleporting, rightHandTeleporting);
+ userinput.toggleActive(sets.rightHandHoldingCamera, rightHandHoldingCamera);
+
+ userinput.toggleActive(sets.cursorHoveringOnPen, cursorHoveringOnPen);
+ userinput.toggleActive(sets.cursorHoveringOnCamera, cursorHoveringOnCamera);
+ userinput.toggleActive(sets.cursorHoveringOnInteractable, cursorHoveringOnInteractable);
+ userinput.toggleActive(sets.cursorHoveringOnUI, cursorHoveringOnUI);
+ userinput.toggleActive(sets.cursorHoveringOnNothing, cursorHoveringOnNothing);
+ userinput.toggleActive(sets.cursorHoldingPen, cursorHoldingPen);
+ userinput.toggleActive(sets.cursorHoldingCamera, cursorHoldingCamera);
+ userinput.toggleActive(sets.cursorHoldingInteractable, cursorHoldingInteractable);
+}
diff --git a/src/systems/userinput/sets.js b/src/systems/userinput/sets.js
new file mode 100644
index 0000000000000000000000000000000000000000..c764b47cfaddd0a0ea635bfff267031a033ee1c5
--- /dev/null
+++ b/src/systems/userinput/sets.js
@@ -0,0 +1,26 @@
+export const sets = {};
+sets.global = "global";
+sets.cursorHoveringOnPen = "cursorHoveringOnPen";
+sets.cursorHoveringOnCamera = "cursorHoveringOnCamera";
+sets.cursorHoveringOnInteractable = "cursorHoveringOnInteractable";
+sets.cursorHoveringOnUI = "cursorHoveringOnUI";
+sets.cursorHoveringOnNothing = "cursorHoveringOnNothing";
+sets.cursorHoldingPen = "cursorHoldingPen";
+sets.cursorHoldingCamera = "cursorHoldingCamera";
+sets.cursorHoldingInteractable = "cursorHoldingInteractable";
+sets.rightHandTeleporting = "rightHandTeleporting";
+sets.rightHandHoveringOnPen = "rightHandHoveringOnPen";
+sets.rightHandHoveringOnCamera = "rightHandHoveringOnCamera";
+sets.rightHandHoveringOnInteractable = "rightHandHoveringOnInteractable";
+sets.rightHandHoveringOnNothing = "rightHandHoveringOnNothing";
+sets.rightHandHoldingPen = "rightHandHoldingPen";
+sets.rightHandHoldingCamera = "rightHandHoldingCamera";
+sets.rightHandHoldingInteractable = "rightHandHoldingInteractable";
+sets.leftHandTeleporting = "leftHandTeleporting";
+sets.leftHandHoveringOnPen = "leftHandHoveringOnPen";
+sets.leftHandHoveringOnCamera = "leftHandHoveringOnCamera";
+sets.leftHandHoveringOnInteractable = "leftHandHoveringOnInteractable";
+sets.leftHandHoldingPen = "leftHandHoldingPen";
+sets.leftHandHoldingCamera = "leftHandHoldingCamera";
+sets.leftHandHoldingInteractable = "leftHandHoldingInteractable";
+sets.leftHandHoveringOnNothing = "leftHandHoveringOnNothing";
diff --git a/src/systems/userinput/userinput.js b/src/systems/userinput/userinput.js
new file mode 100644
index 0000000000000000000000000000000000000000..2ffbdca79db0e2d07d464f32ea320fc8cb31c329
--- /dev/null
+++ b/src/systems/userinput/userinput.js
@@ -0,0 +1,186 @@
+import { paths } from "./paths";
+import { sets } from "./sets";
+
+import { MouseDevice } from "./devices/mouse";
+import { KeyboardDevice } from "./devices/keyboard";
+import { HudDevice } from "./devices/hud";
+import { XboxControllerDevice } from "./devices/xbox-controller";
+import { OculusGoControllerDevice } from "./devices/oculus-go-controller";
+import { OculusTouchControllerDevice } from "./devices/oculus-touch-controller";
+import { DaydreamControllerDevice } from "./devices/daydream-controller";
+import { ViveControllerDevice } from "./devices/vive-controller";
+
+import { AppAwareMouseDevice } from "./devices/app-aware-mouse";
+import { AppAwareTouchscreenDevice } from "./devices/app-aware-touchscreen";
+
+import { keyboardMouseUserBindings } from "./bindings/keyboard-mouse-user";
+import { touchscreenUserBindings } from "./bindings/touchscreen-user";
+import { keyboardDebuggingBindings } from "./bindings/keyboard-debugging";
+import { oculusGoUserBindings } from "./bindings/oculus-go-user";
+import { oculusTouchUserBindings } from "./bindings/oculus-touch-user";
+import { viveUserBindings } from "./bindings/vive-user";
+import { xboxControllerUserBindings } from "./bindings/xbox-controller-user";
+import { daydreamUserBindings } from "./bindings/daydream-user";
+
+import { updateActionSetsBasedOnSuperhands } from "./resolve-action-sets";
+import { GamepadDevice } from "./devices/gamepad";
+import { gamepadBindings } from "./bindings/generic-gamepad";
+
+const prioritizedBindings = new Map();
+function prioritizeBindings(registeredMappings, activeSets) {
+ const activeBindings = new Set();
+ prioritizedBindings.clear();
+ for (const mapping of registeredMappings) {
+ for (const setName in mapping) {
+ if (!activeSets.has(setName) || !mapping[setName]) continue;
+ for (const binding of mapping[setName]) {
+ const { root, priority } = binding;
+ if (!root || !priority) {
+ activeBindings.add(binding);
+ } else if (!prioritizedBindings.has(root)) {
+ activeBindings.add(binding);
+ prioritizedBindings.set(root, binding);
+ } else {
+ const prevPriority = prioritizedBindings.get(root).priority;
+ if (priority > prevPriority) {
+ activeBindings.delete(prioritizedBindings.get(root));
+ activeBindings.add(binding);
+ prioritizedBindings.set(root, binding);
+ } else if (prevPriority === priority) {
+ console.error("equal priorities on same root", binding, prioritizedBindings.get(root));
+ }
+ }
+ }
+ }
+ }
+ return activeBindings;
+}
+
+AFRAME.registerSystem("userinput", {
+ readFrameValueAtPath(path) {
+ return this.frame && this.frame[path];
+ },
+
+ toggleActive(set, value) {
+ this.pendingSetChanges.push({ set, value });
+ },
+
+ init() {
+ this.frame = {};
+
+ this.activeSets = new Set([sets.global]);
+ this.pendingSetChanges = [];
+ this.activeDevices = new Set([new MouseDevice(), new AppAwareMouseDevice(), new KeyboardDevice(), new HudDevice()]);
+
+ this.registeredMappings = new Set([keyboardDebuggingBindings]);
+ this.xformStates = new Map();
+
+ const appAwareTouchscreenDevice = new AppAwareTouchscreenDevice();
+ const updateBindingsForVRMode = () => {
+ const inVRMode = this.el.sceneEl.is("vr-mode");
+ if (AFRAME.utils.device.isMobile()) {
+ if (inVRMode) {
+ this.activeDevices.delete(appAwareTouchscreenDevice);
+ this.registeredMappings.delete(touchscreenUserBindings);
+ } else {
+ this.activeDevices.add(appAwareTouchscreenDevice);
+ this.registeredMappings.add(touchscreenUserBindings);
+ }
+ } else {
+ if (inVRMode) {
+ this.registeredMappings.delete(keyboardMouseUserBindings);
+ } else {
+ this.registeredMappings.add(keyboardMouseUserBindings);
+ }
+ }
+ };
+ this.el.sceneEl.addEventListener("enter-vr", updateBindingsForVRMode);
+ this.el.sceneEl.addEventListener("exit-vr", updateBindingsForVRMode);
+ updateBindingsForVRMode();
+
+ window.addEventListener(
+ "gamepadconnected",
+ e => {
+ let gamepadDevice;
+ for (let i = 0; i < this.activeDevices.length; i++) {
+ const activeDevice = this.activeDevices[i];
+ if (activeDevice.gamepad && activeDevice.gamepad === e.gamepad) {
+ console.warn("ignoring gamepad", e.gamepad);
+ return; // multiple connect events without a disconnect event
+ }
+ }
+ if (e.gamepad.id === "OpenVR Gamepad") {
+ gamepadDevice = new ViveControllerDevice(e.gamepad);
+ this.registeredMappings.add(viveUserBindings);
+ } else if (e.gamepad.id.startsWith("Oculus Touch")) {
+ gamepadDevice = new OculusTouchControllerDevice(e.gamepad);
+ this.registeredMappings.add(oculusTouchUserBindings);
+ } else if (e.gamepad.id === "Oculus Go Controller") {
+ gamepadDevice = new OculusGoControllerDevice(e.gamepad);
+ this.registeredMappings.add(oculusGoUserBindings);
+ } else if (e.gamepad.id === "Daydream Controller") {
+ gamepadDevice = new DaydreamControllerDevice(e.gamepad);
+ this.registeredMappings.add(daydreamUserBindings);
+ } else if (e.gamepad.id.includes("Xbox")) {
+ gamepadDevice = new XboxControllerDevice(e.gamepad);
+ this.registeredMappings.add(xboxControllerUserBindings);
+ } else {
+ gamepadDevice = new GamepadDevice(e.gamepad);
+ this.registeredMappings.add(gamepadBindings);
+ }
+ this.activeDevices.add(gamepadDevice);
+ },
+ false
+ );
+ window.addEventListener(
+ "gamepaddisconnected",
+ e => {
+ for (const device of this.activeDevices) {
+ if (device.gamepad === e.gamepad) {
+ this.activeDevices.delete(device);
+ return;
+ }
+ }
+ },
+ false
+ );
+ },
+
+ tick() {
+ updateActionSetsBasedOnSuperhands();
+
+ for (const { set, value } of this.pendingSetChanges) {
+ this.activeSets[value ? "add" : "delete"](set);
+ }
+ this.pendingSetChanges.length = 0;
+
+ this.frame = {};
+ for (const device of this.activeDevices) {
+ device.write(this.frame);
+ }
+
+ const activeBindings = prioritizeBindings(this.registeredMappings, this.activeSets);
+ for (const binding of activeBindings) {
+ const bindingExistedLastFrame = this.activeBindings && this.activeBindings.has(binding);
+ if (!bindingExistedLastFrame) {
+ this.xformStates.delete(binding);
+ }
+
+ const { src, dest, xform } = binding;
+ const newState = xform(this.frame, src, dest, this.xformStates.get(binding));
+ if (newState !== undefined) {
+ this.xformStates.set(binding, newState);
+ }
+ }
+
+ this.activeBindings = activeBindings;
+
+ if (this.frame[paths.actions.logDebugFrame] || this.frame[paths.actions.log]) {
+ console.log("frame", this.frame);
+ console.log("sets", this.activeSets);
+ console.log("bindings", this.activeBindings);
+ console.log("devices", this.activeDevices);
+ console.log("xformStates", this.xformStates);
+ }
+ }
+});
diff --git a/src/systems/userinput/userinput.md b/src/systems/userinput/userinput.md
new file mode 100644
index 0000000000000000000000000000000000000000..d3701d5c93dd34a4be3828108d29a7a5c094c2a0
--- /dev/null
+++ b/src/systems/userinput/userinput.md
@@ -0,0 +1,139 @@
+
+# Table of Contents
+
+1. [The userinput system](#org6030eab)
+ 1. [Overview](#org2da9acd)
+ 2. [Terms and Conventions](#org4721ce9)
+ 1. [path](#orgd62cc68)
+ 2. [action](#orgb8066a6)
+ 3. [frame](#org15eafde)
+ 4. [device](#orgea2f123)
+ 5. [binding](#org47c9c20)
+ 6. [xforms](#org876e7b0)
+ 7. [set](#orgbe4669b)
+ 8. [priority and root](#orgdd3c0c5)
+
+
+<a id="org6030eab"></a>
+
+# The userinput system
+
+The userinput system is a module that manages mappings from device state changes to app state changes.
+
+
+<a id="org2da9acd"></a>
+
+## Overview
+
+The userinput system happens to be an `aframe` `system`; its `tick` is called once a frame within the `aframe` `scene`'s `tick`. When the userinput system `tick` happens, it is responsible for creating a map called the frame. The keys of the frame are called "paths". The values stored in the frame can be any type, but are usually one of: bool, number, vec2, vec3, vec4, pose. On each tick, each connected `device` writes "raw" input values to known "device paths" within the frame. Configuration units called `bindings` are then applied to transform "raw" input values to app-specific "actions". The userinput system exposes the state of a given `action` in the current frame via `readFrameValueAtPath`. The `bindings` that are applied to transform input to "actions" must be `available`, `active`, and `prioritized`.
+
+1. A `binding` is made `available` when the userinput system detects a change to the user's device configuration that matches certain criteria. A touchscreen user only has `availableBindings` related to touchscreen input. A mouse-and-keyboard user only has `availableBindings` related to mouse-and-keyboard input. An oculus/vive user has `bindings` related to mouse, keyboard, and oculus/vive controllers.
+
+2. A `binding` is `active` if it is `available` and it belongs to an `action set` that is `active` this frame. The application is responsible for activating and deactivating `action sets` when appropriate. For example, when the user's avatar grabs a pen in its right hand, an action set called "rightHandHoldingPen" is activated. Though it depends on the way bindings have been configured, this will likely activate bindings responsible for writing to the following "actions": "rightHandStartDrawing", "rightHandStopDrawing", "rightHandPenNextColor", "rightHandPenPrevColor", "rightHandScalePenTip", "rightHandDrop".
+
+3. A `binding` is `prioritized` if, among all of the currently `available` and `active` bindings, it is defined with the highest "priority" value for the given "root". Within the oculus and vive bindings, for example, the binding that says "stop drawing from the pen in the right hand when the trigger is released" in the "rightHandHoldingPen" action set is defined with a higher priority than (and with the same root as) the binding that says "drop a grabbable from the avatar's right hand when the trigger is released" in the "rightHandHoldingInteractable" action set. Thus, you do not drop the pen in your right hand when the trigger is released, and we define a third binding for how to perform this action when the thing in your right hand happens to be a pen.
+
+
+<a id="org4721ce9"></a>
+
+## Terms and Conventions
+
+
+<a id="orgd62cc68"></a>
+
+### path
+
+A path is used as a key when writing or querying the state a user input frame. Paths happen to be strings for now. We conceptually separate "action" paths, which are used by app code to read user input from a frame, from "device" paths, which specify where device state is recorded. Bindings may also "vars" paths to store intermediate results of xforms.
+
+ paths.actions.rightHand.grab = "/actions/rightHandGrab";
+ paths.actions.rightHand.drop = "/actions/rightHandDrop";
+ paths.actions.rightHand.startDrawing = "/actions/rightHandStartDrawing";
+ paths.actions.rightHand.stopDrawing = "/actions/rightHandStopDrawing";
+
+ paths.device.mouse.coords = "/device/mouse/coords";
+ paths.device.mouse.movementXY = "/device/mouse/movementXY";
+ paths.device.mouse.buttonLeft = "/device/mouse/buttonLeft";
+ paths.device.mouse.buttonRight = "/device/mouse/buttonRight";
+ paths.device.keyboard = {
+ key: key => {
+ return ~/device/keyboard/${key.toLowerCase()}~;
+ }
+ };
+
+ const lJoyScaled = "/vars/oculustouch/left/joy/scaled";
+
+
+<a id="orgb8066a6"></a>
+
+### action
+
+A path used by app code when reading a user input frame.
+
+ const userinput = AFRAME.scenes[0].systems.userinput;
+ if (userinput.readFrameValueAtPath("/actions/rightHandGrab")) {
+ this.startInteraction();
+ }
+
+The value in the frame can be of any type, but we have tried to keep it to simple types like bool, number, vec2, vec3, and pose.
+
+ const userinput = AFRAME.scenes[0].systems.userinput;
+ const acceleration = userinput.readFrameValueAtPath("/actions/characterAcceleration");
+ this.updateVelocity( this.velocity, acceleration || zero );
+ this.move( this.velocity );
+
+
+<a id="org15eafde"></a>
+
+### frame
+
+A key-value store created each time the userinput system ticks. The userinput system writes a new frame by processing input from devices and transforming them by the set of `available`, `active`, and `prioritized` bindings.
+
+
+<a id="orgea2f123"></a>
+
+### device
+
+A device is almost always mapped one-to-one with a device as we think about it in the real world. In the case of mouse, touchscreen, and keyboard input, the browser emits events that are captured into a queue to be processed in order once each frame. An exception to handling device input through the userinput system is the case of interacting with browser API's that require a user-gesture, like the pointer lock API. In this case, the browser prevents us from engaging pointer lock except in a short-running event listener to a user-gesture.
+Most devices can write their input state to the frame without depending on any other app state. An exception are the "app aware" touchscreen and mouse devices, which decide whether a raycast sent out from the in-game camera through the projected touch/click point lands on an interactable object or not, and what should be done in the case that it does.
+
+
+<a id="org47c9c20"></a>
+
+### binding
+
+A binding is an association of the form:
+
+ {
+ src: { xform_key_a : path,
+ xform_key_b : path },
+ dest: { xform_key_1 : path,
+ xform_key_2 : path },
+ xform: some_function, // f(frame, src, dest, prevState) -> newState
+ root: key_to_resolve_binding_conflicts,
+ priority: numerical_priority_of_this_binding // higher priority overrides lower priority bindings
+ },
+
+Bindings are organized into sets, and written with active specific device combinations in mind.
+
+
+<a id="org876e7b0"></a>
+
+### xforms
+
+Each binding specifies a `xform` (transformation) function that reads values in the frame at the paths provided by `src` and writes to the values in the frame at the paths in `dest`. These would otherwise be pure functions but they happen to write to the frame and return mutated state so as to avoid creating more garbage each frame. (We have not yet done a performance pass, so making smarter choices about memory allocation and avoiding garbage has been postponed.)
+These ought to be treated as user-customizable, although we are likely the only ones to do this customization for some time.
+
+
+<a id="orgbe4669b"></a>
+
+### set
+
+Sets are app state that correspond to sets of capabilities we expect to activate and deactivate all at once on behalf of the user.
+
+
+<a id="orgdd3c0c5"></a>
+
+### priority and root
+
+When bindings can be written such that multiple actions could be triggered by the device input, we express our desire to apply one over another via the `binding` s `root` s and `priority` s. When active bindings share the same root, the userinput system only applies active bindings with highest priority values. This mechanism allows us to craft context-sensitive interaction mechanics on devices with limited input, like the oculus go remote.
+
diff --git a/src/utils/action-event-handler.js b/src/utils/action-event-handler.js
deleted file mode 100644
index 472dd813a75ce4bbd11036057550d51105b9be2b..0000000000000000000000000000000000000000
--- a/src/utils/action-event-handler.js
+++ /dev/null
@@ -1,259 +0,0 @@
-const VERTICAL_SCROLL_TIMEOUT = 150;
-const HORIZONTAL_SCROLL_TIMEOUT = 150;
-const SCROLL_THRESHOLD = 0.05;
-const SCROLL_MODIFIER = 0.1;
-
-export default class ActionEventHandler {
- constructor(scene, cursor) {
- this.scene = scene;
- this.cursor = cursor;
- this.cursorHand = this.cursor.data.cursor.components["super-hands"];
- this.isCursorInteracting = false;
- this.isTeleporting = false;
- this.handThatAlsoDrivesCursor = null;
- this.hovered = false;
-
- this.gotPrimaryDown = false;
-
- this.onPrimaryDown = this.onPrimaryDown.bind(this);
- this.onPrimaryUp = this.onPrimaryUp.bind(this);
- this.onSecondaryDown = this.onSecondaryDown.bind(this);
- this.onSecondaryUp = this.onSecondaryUp.bind(this);
- this.onPrimaryGrab = this.onPrimaryGrab.bind(this);
- this.onPrimaryRelease = this.onPrimaryRelease.bind(this);
- this.onSecondaryGrab = this.onSecondaryGrab.bind(this);
- this.onSecondaryRelease = this.onSecondaryRelease.bind(this);
- this.onCardboardButtonDown = this.onCardboardButtonDown.bind(this);
- this.onCardboardButtonUp = this.onCardboardButtonUp.bind(this);
- this.onScrollMove = this.onScrollMove.bind(this);
- this.addEventListeners();
-
- this.lastVerticalScrollTime = 0;
- this.lastHorizontalScrollTime = 0;
- }
-
- addEventListeners() {
- this.scene.addEventListener("action_primary_down", this.onPrimaryDown);
- this.scene.addEventListener("action_primary_up", this.onPrimaryUp);
- this.scene.addEventListener("action_secondary_down", this.onSecondaryDown);
- this.scene.addEventListener("action_secondary_up", this.onSecondaryUp);
- this.scene.addEventListener("primary_action_grab", this.onPrimaryGrab);
- this.scene.addEventListener("primary_action_release", this.onPrimaryRelease);
- this.scene.addEventListener("secondary_action_grab", this.onSecondaryGrab);
- this.scene.addEventListener("secondary_action_release", this.onSecondaryRelease);
- this.scene.addEventListener("scroll_move", this.onScrollMove);
- this.scene.addEventListener("cardboardbuttondown", this.onCardboardButtonDown); // TODO: These should be actions
- this.scene.addEventListener("cardboardbuttonup", this.onCardboardButtonUp);
- }
-
- tearDown() {
- this.scene.removeEventListener("action_primary_down", this.onPrimaryDown);
- this.scene.removeEventListener("action_primary_up", this.onPrimaryUp);
- this.scene.removeEventListener("action_secondary_down", this.onSecondaryDown);
- this.scene.removeEventListener("action_secondary_up", this.onSecondaryUp);
- this.scene.removeEventListener("primary_action_grab", this.onPrimaryGrab);
- this.scene.removeEventListener("primary_action_release", this.onPrimaryRelease);
- this.scene.removeEventListener("secondary_action_grab", this.onSecondaryGrab);
- this.scene.removeEventListener("secondary_action_release", this.onSecondaryRelease);
- this.scene.removeEventListener("scroll_move", this.onScrollMove);
- this.scene.removeEventListener("cardboardbuttondown", this.onCardboardButtonDown);
- this.scene.removeEventListener("cardboardbuttonup", this.onCardboardButtonUp);
- }
-
- onScrollMove(e) {
- let scrollY = e.detail.axis[1] * SCROLL_MODIFIER;
- scrollY = Math.abs(scrollY) > SCROLL_THRESHOLD ? scrollY : 0;
- const changed = this.cursor.changeDistanceMod(-scrollY); //TODO: don't negate this for certain controllers
-
- let scrollX = e.detail.axis[0] * SCROLL_MODIFIER;
- scrollX = Math.abs(scrollX) > SCROLL_THRESHOLD ? scrollX : 0;
-
- this.isCursorInteracting = this.cursor.isInteracting();
-
- if (
- Math.abs(scrollY) > 0 &&
- (this.lastVerticalScrollTime === 0 || this.lastVerticalScrollTime + VERTICAL_SCROLL_TIMEOUT < Date.now())
- ) {
- if (!changed && this.isCursorInteracting && this.isHandThatAlsoDrivesCursor(e.target)) {
- this.cursorHand.el.emit(scrollY < 0 ? "scroll_up" : "scroll_down");
- this.cursorHand.el.emit("vertical_scroll_release");
- } else {
- e.target.emit(scrollY < 0 ? "scroll_up" : "scroll_down");
- e.target.emit("vertical_scroll_release");
- }
- this.lastVerticalScrollTime = Date.now();
- }
-
- if (
- Math.abs(scrollX) > 0 &&
- (this.lastHorizontalScrollTime === 0 || this.lastHorizontalScrollTime + HORIZONTAL_SCROLL_TIMEOUT < Date.now())
- ) {
- if (this.isCursorInteracting && this.isHandThatAlsoDrivesCursor(e.target)) {
- this.cursorHand.el.emit(scrollX < 0 ? "scroll_left" : "scroll_right");
- this.cursorHand.el.emit("horizontal_scroll_release");
- } else {
- e.target.emit(scrollX < 0 ? "scroll_left" : "scroll_right");
- e.target.emit("horizontal_scroll_release");
- }
- this.lastHorizontalScrollTime = Date.now();
- }
- }
-
- setHandThatAlsoDrivesCursor(handThatAlsoDrivesCursor) {
- this.handThatAlsoDrivesCursor = handThatAlsoDrivesCursor;
- }
-
- isToggle(el) {
- return el && el.matches(".toggle, .toggle *");
- }
-
- isHandThatAlsoDrivesCursor(el) {
- return this.handThatAlsoDrivesCursor === el;
- }
-
- onGrab(e, event) {
- event = event || e.type;
- const superHand = e.target.components["super-hands"];
- const isCursorHand = this.isHandThatAlsoDrivesCursor(e.target);
- this.isCursorInteracting = this.cursor.isInteracting();
- if (isCursorHand && !this.isCursorInteracting) {
- if (superHand.state.has("hover-start") || superHand.state.get("grab-start")) {
- e.target.emit(event);
- } else {
- this.isCursorInteracting = this.cursor.startInteraction();
- }
- } else if (isCursorHand && this.isCursorInteracting) {
- this.cursorHand.el.emit(event);
- } else {
- e.target.emit(event);
- }
- }
-
- onRelease(e, event) {
- event = event || e.type;
- const isCursorHand = this.isHandThatAlsoDrivesCursor(e.target);
- if (this.isCursorInteracting && isCursorHand) {
- //need to check both grab-start and hover-start in the case that the spawner is being grabbed this frame
- if (this.isToggle(this.cursorHand.state.get("grab-start") || this.cursorHand.state.get("hover-start"))) {
- this.cursorHand.el.emit(event);
- this.isCursorInteracting = this.cursor.isInteracting();
- } else {
- this.isCursorInteracting = false;
- this.cursor.endInteraction();
- }
- } else {
- e.target.emit(event);
- }
- }
-
- onPrimaryGrab(e) {
- this.onGrab(e, "primary_hand_grab");
- }
-
- onPrimaryRelease(e) {
- this.onRelease(e, "primary_hand_release");
- }
-
- onSecondaryGrab(e) {
- this.onGrab(e, "secondary_hand_grab");
- }
-
- onSecondaryRelease(e) {
- this.onRelease(e, "secondary_hand_release");
- }
-
- onDown(e, event) {
- this.onGrab(e, event);
-
- if (
- this.isHandThatAlsoDrivesCursor(e.target) &&
- !this.isCursorInteracting &&
- !this.cursorHand.state.get("grab-start")
- ) {
- this.cursor.setCursorVisibility(false);
- const button = e.target.components["teleport-controls"].data.button;
- e.target.emit(button + "down");
- this.isTeleporting = true;
- }
- }
-
- onUp(e, event) {
- if (this.isTeleporting && this.isHandThatAlsoDrivesCursor(e.target)) {
- const superHand = e.target.components["super-hands"];
- this.cursor.setCursorVisibility(!superHand.state.has("hover-start"));
- const button = e.target.components["teleport-controls"].data.button;
- e.target.emit(button + "up");
- this.isTeleporting = false;
- } else {
- this.onRelease(e, event);
- }
- }
-
- onPrimaryDown(e) {
- if (!this.gotPrimaryDown) {
- this.onDown(e, "primary_hand_grab");
- this.gotPrimaryDown = true;
- }
- }
-
- onPrimaryUp(e) {
- if (this.gotPrimaryDown) {
- this.onUp(e, "primary_hand_release");
- } else if (this.isToggle(this.cursorHand.state.get("grab-start") || this.cursorHand.state.get("hover-start"))) {
- this.onUp(e, "secondary_hand_release");
- }
- this.gotPrimaryDown = false;
- }
-
- onSecondaryDown(e) {
- this.onDown(e, "secondary_hand_grab");
- }
-
- onSecondaryUp(e) {
- this.onUp(e, "secondary_hand_release");
- }
-
- onCardboardButtonDown(e) {
- this.isCursorInteracting = this.cursor.startInteraction();
- if (this.isCursorInteracting) {
- return;
- }
-
- this.cursor.setCursorVisibility(false);
-
- const gazeTeleport = e.target.querySelector("#gaze-teleport");
- const button = gazeTeleport.components["teleport-controls"].data.button;
- gazeTeleport.emit(button + "down");
- this.isTeleporting = true;
- }
-
- onCardboardButtonUp(e) {
- if (this.isCursorInteracting) {
- this.isCursorInteracting = false;
- this.cursor.endInteraction();
- return;
- }
-
- this.cursor.setCursorVisibility(true);
-
- const gazeTeleport = e.target.querySelector("#gaze-teleport");
- const button = gazeTeleport.components["teleport-controls"].data.button;
- gazeTeleport.emit(button + "up");
- this.isTeleporting = false;
- }
-
- manageCursorEnabled() {
- const handState = this.handThatAlsoDrivesCursor.components["super-hands"].state;
- const handHoveredThisFrame = !this.hovered && handState.has("hover-start") && !this.isCursorInteracting;
- const handStoppedHoveringThisFrame =
- this.hovered === true && !handState.has("hover-start") && !handState.has("grab-start");
- if (handHoveredThisFrame) {
- this.hovered = true;
- this.cursor.disable();
- } else if (handStoppedHoveringThisFrame) {
- this.hovered = false;
- this.cursor.enable();
- this.cursor.setCursorVisibility(!this.isTeleporting);
- }
- }
-}
diff --git a/src/utils/gearvr-mouse-events-handler.js b/src/utils/gearvr-mouse-events-handler.js
deleted file mode 100644
index e26495b96a53980f98c58c6351267927a7853fb4..0000000000000000000000000000000000000000
--- a/src/utils/gearvr-mouse-events-handler.js
+++ /dev/null
@@ -1,50 +0,0 @@
-export default class GearVRMouseEventsHandler {
- constructor(cursor, gazeTeleporter) {
- this.cursor = cursor;
- this.gazeTeleporter = gazeTeleporter;
- this.isMouseDownHandledByCursor = false;
- this.isMouseDownHandledByGazeTeleporter = false;
-
- this.onMouseDown = this.onMouseDown.bind(this);
- this.onMouseUp = this.onMouseUp.bind(this);
- this.addEventListeners();
- }
-
- addEventListeners() {
- document.addEventListener("mousedown", this.onMouseDown);
- document.addEventListener("mouseup", this.onMouseUp);
- }
-
- tearDown() {
- document.removeEventListener("mousedown", this.onMouseDown);
- document.removeEventListener("mouseup", this.onMouseUp);
- }
-
- onMouseDown() {
- this.isMouseDownHandledByCursor = this.cursor.startInteraction();
- if (this.isMouseDownHandledByCursor) {
- return;
- }
-
- this.cursor.setCursorVisibility(false);
-
- const button = this.gazeTeleporter.data.button;
- this.gazeTeleporter.el.emit(button + "down");
- this.isMouseDownHandledByGazeTeleporter = true;
- }
-
- onMouseUp() {
- if (this.isMouseDownHandledByCursor) {
- this.cursor.endInteraction();
- this.isMouseDownHandledByCursor = false;
- }
-
- this.cursor.setCursorVisibility(true);
-
- if (this.isMouseDownHandledByGazeTeleporter) {
- const button = this.gazeTeleporter.data.button;
- this.gazeTeleporter.el.emit(button + "up");
- this.isMouseDownHandledByGazeTeleporter = false;
- }
- }
-}
diff --git a/src/utils/hub-channel.js b/src/utils/hub-channel.js
index 76d6b891baebbe797b602719df99b1b7683b908a..63dcae408bb874d19c9b5dba47d4aa590cc0c56f 100644
--- a/src/utils/hub-channel.js
+++ b/src/utils/hub-channel.js
@@ -99,9 +99,9 @@ export default class HubChannel {
this.channel.push("unsubscribe", { subscription });
};
- sendMessage = body => {
- if (body === "") return;
- this.channel.push("message", { body });
+ sendMessage = (body, type = "chat") => {
+ if (!body) return;
+ this.channel.push("message", { body, type });
};
requestSupport = () => {
diff --git a/src/utils/mouse-events-handler.js b/src/utils/mouse-events-handler.js
deleted file mode 100644
index 510cb0cd25dd0ca792c294a73e544c60beb1b084..0000000000000000000000000000000000000000
--- a/src/utils/mouse-events-handler.js
+++ /dev/null
@@ -1,170 +0,0 @@
-// TODO: Make look speed adjustable by the user
-const HORIZONTAL_LOOK_SPEED = 0.1;
-const VERTICAL_LOOK_SPEED = 0.06;
-const VERTICAL_SCROLL_TIMEOUT = 50;
-const HORIZONTAL_SCROLL_TIMEOUT = 50;
-
-export default class MouseEventsHandler {
- constructor(cursor, cameraController) {
- this.cursor = cursor;
- const cursorController = this.cursor.el.getAttribute("cursor-controller");
- this.superHand = cursorController.cursor.components["super-hands"];
- this.cameraController = cameraController;
- this.isLeftButtonDown = false;
- this.isLeftButtonHandledByCursor = false;
- this.isPointerLocked = false;
-
- this.onMouseDown = this.onMouseDown.bind(this);
- this.onMouseMove = this.onMouseMove.bind(this);
- this.onMouseUp = this.onMouseUp.bind(this);
- this.onMouseWheel = this.onMouseWheel.bind(this);
-
- this.addEventListeners();
-
- this.lastVerticalScrollTime = 0;
- this.lastHorizontalScrollTime = 0;
- }
-
- tearDown() {
- document.removeEventListener("mousedown", this.onMouseDown);
- document.removeEventListener("mousemove", this.onMouseMove);
- document.removeEventListener("mouseup", this.onMouseUp);
- document.removeEventListener("wheel", this.onMouseWheel);
- document.removeEventListener("contextmenu", this.onContextMenu);
- }
-
- setInverseMouseLook(invert) {
- this.invertMouseLook = invert;
- }
-
- addEventListeners() {
- document.addEventListener("mousedown", this.onMouseDown);
- document.addEventListener("mousemove", this.onMouseMove);
- document.addEventListener("mouseup", this.onMouseUp);
- document.addEventListener("wheel", this.onMouseWheel);
- document.addEventListener("contextmenu", this.onContextMenu);
- }
-
- onContextMenu(e) {
- e.preventDefault();
- }
-
- onMouseDown(e) {
- switch (e.button) {
- case 0: //left button
- this.onLeftButtonDown();
- break;
- case 1: //middle/scroll button
- //TODO: rotation? scaling?
- break;
- case 2: //right button
- this.onRightButtonDown();
- break;
- }
- }
-
- onLeftButtonDown() {
- this.isLeftButtonDown = true;
- if (this.isToggle(this.superHand.state.get("grab-start"))) {
- this.superHand.el.emit("secondary-cursor-grab");
- }
- this.isLeftButtonHandledByCursor = this.cursor.startInteraction();
- }
-
- onRightButtonDown() {
- this.isLeftButtonHandledByCursor = this.cursor.isInteracting();
- if (!this.isLeftButtonHandledByCursor) {
- if (this.isPointerLocked) {
- document.exitPointerLock();
- this.isPointerLocked = false;
- } else {
- document.body.requestPointerLock();
- this.isPointerLocked = true;
- }
- }
- }
-
- onMouseWheel(e) {
- let changed = true;
- if (!e.altKey && !e.shiftKey) {
- changed = this.cursor.changeDistanceMod(this.getScrollMod(e.deltaY, e.deltaMode));
- }
-
- if (
- (!changed || e.shiftKey) &&
- (this.lastVerticalScrollTime === 0 || this.lastVerticalScrollTime + VERTICAL_SCROLL_TIMEOUT < Date.now())
- ) {
- this.superHand.el.emit(e.deltaY > 0 ? "scroll_up" : "scroll_down");
- this.superHand.el.emit("vertical_scroll_release");
- this.lastVerticalScrollTime = Date.now();
- }
-
- const delta = e.altKey ? e.deltaY : e.deltaX;
- if (
- Math.abs(delta) > 0 &&
- (this.lastHorizontalScrollTime === 0 || this.lastHorizontalScrollTime + HORIZONTAL_SCROLL_TIMEOUT < Date.now())
- ) {
- this.superHand.el.emit(delta < 0 ? "scroll_left" : "scroll_right");
- this.superHand.el.emit("horizontal_scroll_release");
- this.lastHorizontalScrollTime = Date.now();
- }
-
- if (e.altKey) e.preventDefault(); //prevent forward/back on firefox
- }
-
- getScrollMod(delta, deltaMode) {
- switch (deltaMode) {
- case WheelEvent.DOM_DELTA_PIXEL:
- return delta / 500;
- case WheelEvent.DOM_DELTA_LINE:
- return delta / 10;
- case WheelEvent.DOM_DELTA_PAGE:
- return delta / 2;
- }
- }
-
- onMouseMove(e) {
- const shouldLook =
- this.isPointerLocked ||
- (!this.superHand.state.get("grab-start") && this.isLeftButtonDown && !this.isLeftButtonHandledByCursor);
- if (shouldLook) {
- this.look(e);
- }
-
- this.cursor.moveCursor((e.clientX / window.innerWidth) * 2 - 1, -(e.clientY / window.innerHeight) * 2 + 1);
- }
-
- onMouseUp(e) {
- switch (e.button) {
- case 0: //left button
- if (this.isToggle(this.superHand.state.get("grab-start"))) {
- this.superHand.el.emit("secondary-cursor-release");
- } else {
- this.endInteraction();
- }
- this.isLeftButtonDown = false;
- break;
- case 1: //middle/scroll button
- break;
- case 2: //right button
- this.endInteraction();
- break;
- }
- }
-
- endInteraction() {
- this.cursor.endInteraction();
- this.isLeftButtonHandledByCursor = false;
- }
-
- isToggle(el) {
- return el && el.matches(".toggle, .toggle *");
- }
-
- look(e) {
- const sign = this.invertMouseLook ? 1 : -1;
- const deltaPitch = e.movementY * VERTICAL_LOOK_SPEED * sign;
- const deltaYaw = e.movementX * HORIZONTAL_LOOK_SPEED * sign;
- this.cameraController.look(deltaPitch, deltaYaw);
- }
-}
diff --git a/src/utils/touch-events-handler.js b/src/utils/touch-events-handler.js
deleted file mode 100644
index 0cc392886162fbdfd1a6f32364f6c98275a2c4ec..0000000000000000000000000000000000000000
--- a/src/utils/touch-events-handler.js
+++ /dev/null
@@ -1,169 +0,0 @@
-const VIRTUAL_JOYSTICK_HEIGHT = 0.8;
-const HORIZONTAL_LOOK_SPEED = 0.35;
-const VERTICAL_LOOK_SPEED = 0.18;
-
-export default class TouchEventsHandler {
- constructor(cursor, cameraController, pinchEmitter) {
- this.cursor = cursor;
- this.cameraController = cameraController;
- this.pinchEmitter = pinchEmitter;
- this.touches = [];
- this.touchReservedForCursor = null;
- this.touchesReservedForPinch = [];
- this.touchReservedForLookControls = null;
- this.needsPinch = false;
- this.pinchTouchId1 = -1;
- this.pinchTouchId2 = -1;
-
- this.handleTouchStart = this.handleTouchStart.bind(this);
- this.singleTouchStart = this.singleTouchStart.bind(this);
- this.handleTouchMove = this.handleTouchMove.bind(this);
- this.singleTouchMove = this.singleTouchMove.bind(this);
- this.handleTouchEnd = this.handleTouchEnd.bind(this);
- this.singleTouchEnd = this.singleTouchEnd.bind(this);
-
- this.addEventListeners();
- }
-
- addEventListeners() {
- document.addEventListener("touchstart", this.handleTouchStart);
- document.addEventListener("touchmove", this.handleTouchMove);
- document.addEventListener("touchend", this.handleTouchEnd);
- document.addEventListener("touchcancel", this.handleTouchEnd);
- }
-
- tearDown() {
- document.removeEventListener("touchstart", this.handleTouchStart);
- document.removeEventListener("touchmove", this.handleTouchMove);
- document.removeEventListener("touchend", this.handleTouchEnd);
- document.removeEventListener("touchcancel", this.handleTouchEnd);
- }
-
- handleTouchStart(e) {
- for (let i = 0; i < e.changedTouches.length; i++) {
- this.singleTouchStart(e.changedTouches[i]);
- }
- }
-
- singleTouchStart(touch) {
- if (touch.clientY / window.innerHeight >= VIRTUAL_JOYSTICK_HEIGHT) {
- return;
- }
- if (!this.touchReservedForCursor) {
- const targetX = (touch.clientX / window.innerWidth) * 2 - 1;
- const targetY = -(touch.clientY / window.innerHeight) * 2 + 1;
- this.cursor.moveCursor(targetX, targetY);
- this.cursor.forceCursorUpdate();
- if (this.cursor.startInteraction()) {
- this.touchReservedForCursor = touch;
- }
- }
- this.touches.push(touch);
- }
-
- handleTouchMove(e) {
- for (let i = 0; i < e.touches.length; i++) {
- this.singleTouchMove(e.touches[i]);
- }
- if (this.needsPinch) {
- this.pinch();
- this.needsPinch = false;
- }
- }
-
- singleTouchMove(touch) {
- if (this.touchReservedForCursor && touch.identifier === this.touchReservedForCursor.identifier) {
- const targetX = (touch.clientX / window.innerWidth) * 2 - 1;
- const targetY = -(touch.clientY / window.innerHeight) * 2 + 1;
- this.cursor.moveCursor(targetX, targetY);
- return;
- }
- if (touch.clientY / window.innerHeight >= VIRTUAL_JOYSTICK_HEIGHT) return;
- if (!this.touches.some(t => touch.identifier === t.identifier)) {
- return;
- }
-
- let pinchIndex = this.touchesReservedForPinch.findIndex(t => touch.identifier === t.identifier);
- if (pinchIndex !== -1) {
- this.touchesReservedForPinch[pinchIndex] = touch;
- } else if (this.touchesReservedForPinch.length < 2) {
- this.touchesReservedForPinch.push(touch);
- pinchIndex = this.touchesReservedForPinch.length - 1;
- }
- if (this.touchesReservedForPinch.length == 2 && pinchIndex !== -1) {
- if (this.touchReservedForLookControls && touch.identifier === this.touchReservedForLookControls.identifier) {
- this.touchReservedForLookControls = null;
- }
- this.needsPinch = true;
- return;
- }
-
- if (!this.touchReservedForLookControls) {
- this.touchReservedForLookControls = touch;
- }
- if (touch.identifier === this.touchReservedForLookControls.identifier) {
- if (!this.touchReservedForCursor) {
- this.cursor.moveCursor(
- (touch.clientX / window.innerWidth) * 2 - 1,
- -(touch.clientY / window.innerHeight) * 2 + 1
- );
- }
- this.look(this.touchReservedForLookControls, touch);
- this.touchReservedForLookControls = touch;
- return;
- }
- }
-
- pinch() {
- const t1 = this.touchesReservedForPinch[0];
- const t2 = this.touchesReservedForPinch[1];
- const isNewPinch = t1.identifier !== this.pinchTouchId1 || t2.identifier !== this.pinchTouchId2;
- const pinchDistance = TouchEventsHandler.distance(t1.clientX, t1.clientY, t2.clientX, t2.clientY);
- this.pinchEmitter.emit("pinch", { isNewPinch: isNewPinch, distance: pinchDistance });
- this.pinchTouchId1 = t1.identifier;
- this.pinchTouchId2 = t2.identifier;
- }
-
- look(prevTouch, touch) {
- const deltaPitch = (touch.clientY - prevTouch.clientY) * VERTICAL_LOOK_SPEED;
- const deltaYaw = (touch.clientX - prevTouch.clientX) * HORIZONTAL_LOOK_SPEED;
- this.cameraController.look(deltaPitch, deltaYaw);
- }
-
- handleTouchEnd(e) {
- for (let i = 0; i < e.changedTouches.length; i++) {
- this.singleTouchEnd(e.changedTouches[i]);
- }
- }
-
- singleTouchEnd(touch) {
- const touchIndex = this.touches.findIndex(t => touch.identifier === t.identifier);
- if (touchIndex === -1) {
- return;
- }
- this.touches.splice(touchIndex, 1);
-
- if (this.touchReservedForCursor && touch.identifier === this.touchReservedForCursor.identifier) {
- this.cursor.endInteraction(touch);
- this.touchReservedForCursor = null;
- return;
- }
-
- const pinchIndex = this.touchesReservedForPinch.findIndex(t => touch.identifier === t.identifier);
- if (pinchIndex !== -1) {
- this.touchesReservedForPinch.splice(pinchIndex, 1);
- this.pinchTouchId1 = -1;
- this.pinchTouchId2 = -1;
- }
-
- if (this.touchReservedForLookControls && touch.identifier === this.touchReservedForLookControls.identifier) {
- this.touchReservedForLookControls = null;
- }
- }
-
- static distance = (x1, y1, x2, y2) => {
- const x = x1 - x2;
- const y = y1 - y2;
- return Math.sqrt(x * x + y * y);
- };
-}