(function (global, factory) { if (typeof define === "function" && define.amd) { define(["exports"], factory); } else if (typeof exports !== "undefined") { factory(exports); } else { var mod = { exports: {} }; factory(mod.exports); global.motionControllersModule = mod.exports; } })(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) { "use strict"; Object.defineProperty(_exports, "__esModule", { value: true }); _exports.MotionController = _exports.Constants = void 0; _exports.fetchProfile = fetchProfile; _exports.fetchProfilesList = fetchProfilesList; function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; } function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } } function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; } /** * @webxr-input-profiles/motion-controllers 1.0.0 https://github.com/immersive-web/webxr-input-profiles */ var Constants = { Handedness: Object.freeze({ NONE: 'none', LEFT: 'left', RIGHT: 'right' }), ComponentState: Object.freeze({ DEFAULT: 'default', TOUCHED: 'touched', PRESSED: 'pressed' }), ComponentProperty: Object.freeze({ BUTTON: 'button', X_AXIS: 'xAxis', Y_AXIS: 'yAxis', STATE: 'state' }), ComponentType: Object.freeze({ TRIGGER: 'trigger', SQUEEZE: 'squeeze', TOUCHPAD: 'touchpad', THUMBSTICK: 'thumbstick', BUTTON: 'button' }), ButtonTouchThreshold: 0.05, AxisTouchThreshold: 0.1, VisualResponseProperty: Object.freeze({ TRANSFORM: 'transform', VISIBILITY: 'visibility' }) }; /** * @description Static helper function to fetch a JSON file and turn it into a JS object * @param {string} path - Path to JSON file to be fetched */ _exports.Constants = Constants; function fetchJsonFile(_x) { return _fetchJsonFile.apply(this, arguments); } function _fetchJsonFile() { _fetchJsonFile = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(path) { var response; return regeneratorRuntime.wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { case 0: _context.next = 2; return fetch(path); case 2: response = _context.sent; if (response.ok) { _context.next = 7; break; } throw new Error(response.statusText); case 7: return _context.abrupt("return", response.json()); case 8: case "end": return _context.stop(); } } }, _callee); })); return _fetchJsonFile.apply(this, arguments); } function fetchProfilesList(_x2) { return _fetchProfilesList.apply(this, arguments); } function _fetchProfilesList() { _fetchProfilesList = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(basePath) { var profileListFileName, profilesList; return regeneratorRuntime.wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { case 0: if (basePath) { _context2.next = 2; break; } throw new Error('No basePath supplied'); case 2: profileListFileName = 'profilesList.json'; _context2.next = 5; return fetchJsonFile("".concat(basePath, "/").concat(profileListFileName)); case 5: profilesList = _context2.sent; return _context2.abrupt("return", profilesList); case 7: case "end": return _context2.stop(); } } }, _callee2); })); return _fetchProfilesList.apply(this, arguments); } function fetchProfile(_x3, _x4) { return _fetchProfile.apply(this, arguments); } /** @constant {Object} */ function _fetchProfile() { _fetchProfile = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(xrInputSource, basePath) { var defaultProfile, getAssetPath, supportedProfilesList, match, supportedProfile, profile, assetPath, layout, _args3 = arguments; return regeneratorRuntime.wrap(function _callee3$(_context3) { while (1) { switch (_context3.prev = _context3.next) { case 0: defaultProfile = _args3.length > 2 && _args3[2] !== undefined ? _args3[2] : null; getAssetPath = _args3.length > 3 && _args3[3] !== undefined ? _args3[3] : true; if (xrInputSource) { _context3.next = 4; break; } throw new Error('No xrInputSource supplied'); case 4: if (basePath) { _context3.next = 6; break; } throw new Error('No basePath supplied'); case 6: _context3.next = 8; return fetchProfilesList(basePath); case 8: supportedProfilesList = _context3.sent; xrInputSource.profiles.some(function (profileId) { var supportedProfile = supportedProfilesList[profileId]; if (supportedProfile) { match = { profileId: profileId, profilePath: "".concat(basePath, "/").concat(supportedProfile.path), deprecated: !!supportedProfile.deprecated }; } return !!match; }); if (match) { _context3.next = 17; break; } if (defaultProfile) { _context3.next = 13; break; } throw new Error('No matching profile name found'); case 13: supportedProfile = supportedProfilesList[defaultProfile]; if (supportedProfile) { _context3.next = 16; break; } throw new Error("No matching profile name found and default profile \"".concat(defaultProfile, "\" missing.")); case 16: match = { profileId: defaultProfile, profilePath: "".concat(basePath, "/").concat(supportedProfile.path), deprecated: !!supportedProfile.deprecated }; case 17: _context3.next = 19; return fetchJsonFile(match.profilePath); case 19: profile = _context3.sent; if (!getAssetPath) { _context3.next = 25; break; } if (xrInputSource.handedness === 'any') { layout = profile.layouts[Object.keys(profile.layouts)[0]]; } else { layout = profile.layouts[xrInputSource.handedness]; } if (layout) { _context3.next = 24; break; } throw new Error("No matching handedness, ".concat(xrInputSource.handedness, ", in profile ").concat(match.profileId)); case 24: if (layout.assetPath) { assetPath = match.profilePath.replace('profile.json', layout.assetPath); } case 25: return _context3.abrupt("return", { profile: profile, assetPath: assetPath }); case 26: case "end": return _context3.stop(); } } }, _callee3); })); return _fetchProfile.apply(this, arguments); } var defaultComponentValues = { xAxis: 0, yAxis: 0, button: 0, state: Constants.ComponentState.DEFAULT }; /** * @description Converts an X, Y coordinate from the range -1 to 1 (as reported by the Gamepad * API) to the range 0 to 1 (for interpolation). Also caps the X, Y values to be bounded within * a circle. This ensures that thumbsticks are not animated outside the bounds of their physical * range of motion and touchpads do not report touch locations off their physical bounds. * @param {number} x The original x coordinate in the range -1 to 1 * @param {number} y The original y coordinate in the range -1 to 1 */ function normalizeAxes() { var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; var xAxis = x; var yAxis = y; // Determine if the point is outside the bounds of the circle // and, if so, place it on the edge of the circle var hypotenuse = Math.sqrt(x * x + y * y); if (hypotenuse > 1) { var theta = Math.atan2(y, x); xAxis = Math.cos(theta); yAxis = Math.sin(theta); } // Scale and move the circle so values are in the interpolation range. The circle's origin moves // from (0, 0) to (0.5, 0.5). The circle's radius scales from 1 to be 0.5. var result = { normalizedXAxis: xAxis * 0.5 + 0.5, normalizedYAxis: yAxis * 0.5 + 0.5 }; return result; } /** * Contains the description of how the 3D model should visually respond to a specific user input. * This is accomplished by initializing the object with the name of a node in the 3D model and * property that need to be modified in response to user input, the name of the nodes representing * the allowable range of motion, and the name of the input which triggers the change. In response * to the named input changing, this object computes the appropriate weighting to use for * interpolating between the range of motion nodes. */ var VisualResponse = /*#__PURE__*/function () { function VisualResponse(visualResponseDescription) { _classCallCheck(this, VisualResponse); this.componentProperty = visualResponseDescription.componentProperty; this.states = visualResponseDescription.states; this.valueNodeName = visualResponseDescription.valueNodeName; this.valueNodeProperty = visualResponseDescription.valueNodeProperty; if (this.valueNodeProperty === Constants.VisualResponseProperty.TRANSFORM) { this.minNodeName = visualResponseDescription.minNodeName; this.maxNodeName = visualResponseDescription.maxNodeName; } // Initializes the response's current value based on default data this.value = 0; this.updateFromComponent(defaultComponentValues); } /** * Computes the visual response's interpolation weight based on component state * @param {Object} componentValues - The component from which to update * @param {number} xAxis - The reported X axis value of the component * @param {number} yAxis - The reported Y axis value of the component * @param {number} button - The reported value of the component's button * @param {string} state - The component's active state */ _createClass(VisualResponse, [{ key: "updateFromComponent", value: function updateFromComponent(_ref) { var xAxis = _ref.xAxis, yAxis = _ref.yAxis, button = _ref.button, state = _ref.state; var _normalizeAxes = normalizeAxes(xAxis, yAxis), normalizedXAxis = _normalizeAxes.normalizedXAxis, normalizedYAxis = _normalizeAxes.normalizedYAxis; switch (this.componentProperty) { case Constants.ComponentProperty.X_AXIS: this.value = this.states.includes(state) ? normalizedXAxis : 0.5; break; case Constants.ComponentProperty.Y_AXIS: this.value = this.states.includes(state) ? normalizedYAxis : 0.5; break; case Constants.ComponentProperty.BUTTON: this.value = this.states.includes(state) ? button : 0; break; case Constants.ComponentProperty.STATE: if (this.valueNodeProperty === Constants.VisualResponseProperty.VISIBILITY) { this.value = this.states.includes(state); } else { this.value = this.states.includes(state) ? 1.0 : 0.0; } break; default: throw new Error("Unexpected visualResponse componentProperty ".concat(this.componentProperty)); } } }]); return VisualResponse; }(); var Component = /*#__PURE__*/function () { /** * @param {Object} componentId - Id of the component * @param {Object} componentDescription - Description of the component to be created */ function Component(componentId, componentDescription) { var _this = this; _classCallCheck(this, Component); if (!componentId || !componentDescription || !componentDescription.visualResponses || !componentDescription.gamepadIndices || Object.keys(componentDescription.gamepadIndices).length === 0) { throw new Error('Invalid arguments supplied'); } this.id = componentId; this.type = componentDescription.type; this.rootNodeName = componentDescription.rootNodeName; this.touchPointNodeName = componentDescription.touchPointNodeName; // Build all the visual responses for this component this.visualResponses = {}; Object.keys(componentDescription.visualResponses).forEach(function (responseName) { var visualResponse = new VisualResponse(componentDescription.visualResponses[responseName]); _this.visualResponses[responseName] = visualResponse; }); // Set default values this.gamepadIndices = Object.assign({}, componentDescription.gamepadIndices); this.values = { state: Constants.ComponentState.DEFAULT, button: this.gamepadIndices.button !== undefined ? 0 : undefined, xAxis: this.gamepadIndices.xAxis !== undefined ? 0 : undefined, yAxis: this.gamepadIndices.yAxis !== undefined ? 0 : undefined }; } _createClass(Component, [{ key: "data", get: function get() { var data = _objectSpread({ id: this.id }, this.values); return data; } /** * @description Poll for updated data based on current gamepad state * @param {Object} gamepad - The gamepad object from which the component data should be polled */ }, { key: "updateFromGamepad", value: function updateFromGamepad(gamepad) { var _this2 = this; // Set the state to default before processing other data sources this.values.state = Constants.ComponentState.DEFAULT; // Get and normalize button if (this.gamepadIndices.button !== undefined && gamepad.buttons.length > this.gamepadIndices.button) { var gamepadButton = gamepad.buttons[this.gamepadIndices.button]; this.values.button = gamepadButton.value; this.values.button = this.values.button < 0 ? 0 : this.values.button; this.values.button = this.values.button > 1 ? 1 : this.values.button; // Set the state based on the button if (gamepadButton.pressed || this.values.button === 1) { this.values.state = Constants.ComponentState.PRESSED; } else if (gamepadButton.touched || this.values.button > Constants.ButtonTouchThreshold) { this.values.state = Constants.ComponentState.TOUCHED; } } // Get and normalize x axis value if (this.gamepadIndices.xAxis !== undefined && gamepad.axes.length > this.gamepadIndices.xAxis) { this.values.xAxis = gamepad.axes[this.gamepadIndices.xAxis]; this.values.xAxis = this.values.xAxis < -1 ? -1 : this.values.xAxis; this.values.xAxis = this.values.xAxis > 1 ? 1 : this.values.xAxis; // If the state is still default, check if the xAxis makes it touched if (this.values.state === Constants.ComponentState.DEFAULT && Math.abs(this.values.xAxis) > Constants.AxisTouchThreshold) { this.values.state = Constants.ComponentState.TOUCHED; } } // Get and normalize Y axis value if (this.gamepadIndices.yAxis !== undefined && gamepad.axes.length > this.gamepadIndices.yAxis) { this.values.yAxis = gamepad.axes[this.gamepadIndices.yAxis]; this.values.yAxis = this.values.yAxis < -1 ? -1 : this.values.yAxis; this.values.yAxis = this.values.yAxis > 1 ? 1 : this.values.yAxis; // If the state is still default, check if the yAxis makes it touched if (this.values.state === Constants.ComponentState.DEFAULT && Math.abs(this.values.yAxis) > Constants.AxisTouchThreshold) { this.values.state = Constants.ComponentState.TOUCHED; } } // Update the visual response weights based on the current component data Object.values(this.visualResponses).forEach(function (visualResponse) { visualResponse.updateFromComponent(_this2.values); }); } }]); return Component; }(); /** * @description Builds a motion controller with components and visual responses based on the * supplied profile description. Data is polled from the xrInputSource's gamepad. * @author Nell Waliczek / https://github.com/NellWaliczek */ var MotionController = /*#__PURE__*/function () { /** * @param {Object} xrInputSource - The XRInputSource to build the MotionController around * @param {Object} profile - The best matched profile description for the supplied xrInputSource * @param {Object} assetUrl */ function MotionController(xrInputSource, profile, assetUrl) { var _this3 = this; _classCallCheck(this, MotionController); if (!xrInputSource) { throw new Error('No xrInputSource supplied'); } if (!profile) { throw new Error('No profile supplied'); } this.xrInputSource = xrInputSource; this.assetUrl = assetUrl; this.id = profile.profileId; // Build child components as described in the profile description this.layoutDescription = profile.layouts[xrInputSource.handedness]; this.components = {}; Object.keys(this.layoutDescription.components).forEach(function (componentId) { var componentDescription = _this3.layoutDescription.components[componentId]; _this3.components[componentId] = new Component(componentId, componentDescription); }); // Initialize components based on current gamepad state this.updateFromGamepad(); } _createClass(MotionController, [{ key: "gripSpace", get: function get() { return this.xrInputSource.gripSpace; } }, { key: "targetRaySpace", get: function get() { return this.xrInputSource.targetRaySpace; } /** * @description Returns a subset of component data for simplified debugging */ }, { key: "data", get: function get() { var data = []; Object.values(this.components).forEach(function (component) { data.push(component.data); }); return data; } /** * @description Poll for updated data based on current gamepad state */ }, { key: "updateFromGamepad", value: function updateFromGamepad() { var _this4 = this; Object.values(this.components).forEach(function (component) { component.updateFromGamepad(_this4.xrInputSource.gamepad); }); } }]); return MotionController; }(); _exports.MotionController = MotionController; });