Improve entity and controller model visibility handling when there are controller switches. e.g Logitech MX Ink pen to Touch controllers

Author: dmarcos

examples/showcase/painter/components/brush.js

@@ -36,6 +36,7 @@ AFRAME.registerComponent('brush', {
   onControllerConnected: function (evt) {
     this.hand = evt.target.getAttribute(evt.detail.name).hand;
     this.controllerName = evt.detail.name;
+    this.controllerJustConnected = true;
   },
 
   onTouchStarted: function (evt) {
@@ -74,6 +75,13 @@ AFRAME.registerComponent('brush', {
 
     return function tick (time, delta) {
       if (!this.painting || !this.stroke) { return; }
+      // Skips first frame when a controller have just connected.
+      // It prevents using the last position of the previous controller as part of the stroke.
+      // This can happen when there's a controller switch. e.g From pen to touch controller or viceversa
+      if (this.controllerJustConnected) {
+        this.controllerJustConnected = false;
+        return;
+      }
       this.el.object3D.matrixWorld.decompose(position, rotation, scale);
       var pointerPosition = this.getPointerPosition(position, rotation);
       this.stroke.addPoint(position, rotation, pointerPosition);

examples/showcase/painter/index.html

@@ -21,12 +21,10 @@
       <a-entity environment hide-on-enter-ar></a-entity>
       <a-entity
         id="right-hand"
-        hand-tracking-controls="hand: right"
         brush="hand: right">
       </a-entity>
       <a-entity
         id="left-hand"
-        hand-tracking-controls="hand: left"
         brush="hand: left">
       </a-entity>
     </a-scene>

src/components/hand-tracking-controls.js

@@ -202,6 +202,9 @@ module.exports.Component = registerComponent('hand-tracking-controls', {
   })(),
 
   updateHandModel: function () {
+    this.wristObject3D.visible = true;
+    this.el.object3D.visible = true;
+
     if (this.data.modelStyle === 'dots') {
       this.updateHandDotsModel();
     }

src/components/logitech-mx-ink-controls.js

@@ -102,6 +102,8 @@ module.exports.Component = registerComponent('logitech-mx-ink-controls', {
 
   checkIfControllerPresent: function () {
     var data = this.data;
+    var controllerObject3D = this.controllerObject3D;
+    if (controllerObject3D) { controllerObject3D.visible = false; }
     checkControllerPresentAndSetup(this, GAMEPAD_ID, {
       hand: this.data.hand,
       iterateControllerProfiles: true
@@ -111,19 +113,25 @@ module.exports.Component = registerComponent('logitech-mx-ink-controls', {
   injectTrackedControls: function () {
     var el = this.el;
     var data = this.data;
+    var id = GAMEPAD_ID;
     el.setAttribute('tracked-controls', {
+      id: id,
       hand: data.hand,
-      idPrefix: GAMEPAD_ID,
+      handTrackingEnabled: false,
+      iterateControllerProfiles: true,
       orientationOffset: data.orientationOffset,
       space: 'gripSpace'
     });
     this.loadModel();
   },
 
   loadModel: function () {
+    var controllerObject3D = this.controllerObject3D;
     if (!this.data.model) { return; }
-    if (this.controllerObject3D) {
-      this.controllerObject3D.visible = this.el.sceneEl.is('vr-mode');
+    if (controllerObject3D) {
+      controllerObject3D.visible = this.el.sceneEl.is('vr-mode');
+      this.el.setObject3D('mesh', controllerObject3D);
+      return;
     }
     this.el.setAttribute('gltf-model', LOGITECH_MX_INK_MODEL_GLB_BASE_URL + 'logitech-mx-ink.glb');
   },
@@ -137,7 +145,6 @@ module.exports.Component = registerComponent('logitech-mx-ink-controls', {
   },
 
   onControllersUpdate: function () {
-    // Note that due to gamepadconnected event propagation issues, we don't rely on events.
     this.checkIfControllerPresent();
   },
 
@@ -165,10 +172,7 @@ module.exports.Component = registerComponent('logitech-mx-ink-controls', {
     });
 
     this.controllerObject3D = this.el.getObject3D('mesh');
-
-    if (this.el.sceneEl.is('ar-mode')) {
-      this.controllerObject3D.visible = false;
-    }
+    this.controllerObject3D.visible = this.el.sceneEl.is('vr-mode');
   },
 
   onAxisMoved: function (evt) {

src/components/oculus-touch-controls.js

@@ -144,7 +144,6 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
     this.onThumbstickMoved = this.onThumbstickMoved.bind(this);
     this.onModelLoaded = this.onModelLoaded.bind(this);
     this.onControllersUpdate = this.onControllersUpdate.bind(this);
-    this.onControllerDisconnected = this.onControllerDisconnected.bind(this);
     this.checkIfControllerPresent = this.checkIfControllerPresent.bind(this);
     this.onAxisMoved = this.onAxisMoved.bind(this);
   },
@@ -188,6 +187,8 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
   },
 
   checkIfControllerPresent: function () {
+    var controllerObject3D = this.controllerObject3D;
+    if (controllerObject3D) { controllerObject3D.visible = false; }
     checkControllerPresentAndSetup(this, GAMEPAD_ID_PREFIX, {
       hand: this.data.hand,
       iterateControllerProfiles: true
@@ -208,10 +209,11 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
     var data = this.data;
     var controllerId;
     if (!data.model) { return; }
+
     // If model has been already loaded
     if (this.controllerObject3D) {
-      this.el.setObject3D('mesh', this.controllerObject3D);
       this.controllerObject3D.visible = true;
+      this.el.setObject3D('mesh', this.controllerObject3D);
       return;
     }
 
@@ -252,21 +254,13 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
 
   addControllersUpdateListener: function () {
     this.el.sceneEl.addEventListener('controllersupdated', this.onControllersUpdate, false);
-    this.el.addEventListener('controllerdisconnected', this.onControllerDisconnected);
   },
 
   removeControllersUpdateListener: function () {
     this.el.sceneEl.removeEventListener('controllersupdated', this.onControllersUpdate, false);
-    this.el.removeEventListener('controllerdisconnected', this.onControllerDisconnected);
-  },
-
-  onControllerDisconnected: function () {
-    if (!this.controllerObject3D) { return; }
-    this.controllerObject3D.visible = false;
   },
 
   onControllersUpdate: function () {
-    // Note that due to gamepadconnected event propagation issues, we don't rely on events.
     this.checkIfControllerPresent();
   },
 

src/components/tracked-controls-webxr.js

@@ -13,6 +13,7 @@ var EVENTS = {
 module.exports.Component = registerComponent('tracked-controls-webxr', {
   schema: {
     id: {type: 'string', default: ''},
+    autoHide: {default: true},
     hand: {type: 'string', default: ''},
     handTrackingEnabled: {default: false},
     index: {type: 'int', default: -1},
@@ -21,12 +22,13 @@ module.exports.Component = registerComponent('tracked-controls-webxr', {
   },
 
   init: function () {
-    this.updateController = this.updateController.bind(this);
     this.buttonEventDetails = {};
     this.buttonStates = this.el.components['tracked-controls'].buttonStates = {};
     this.axis = this.el.components['tracked-controls'].axis = [0, 0, 0];
     this.changedAxes = [];
     this.axisMoveEventDetail = {axis: this.axis, changed: this.changedAxes};
+
+    this.updateController = this.updateController.bind(this);
   },
 
   update: function () {
@@ -67,13 +69,13 @@ module.exports.Component = registerComponent('tracked-controls-webxr', {
     );
     // Legacy handle to the controller for old components.
     this.el.components['tracked-controls'].controller = this.controller;
-    if (this.data.autoHide) { this.el.object3D.visible = !!this.controller; }
   },
 
   tick: function () {
     var sceneEl = this.el.sceneEl;
     var controller = this.controller;
     var frame = sceneEl.frame;
+    if (this.data.autoHide) { this.el.object3D.visible = !!controller; }
     if (!controller || !sceneEl.frame || !this.system.referenceSpace) { return; }
     if (!controller.hand) {
       this.pose = frame.getPose(controller[this.data.space], this.system.referenceSpace);

src/components/tracked-controls.js

@@ -27,15 +27,13 @@ module.exports.Component = registerComponent('tracked-controls', {
   update: function () {
     var data = this.data;
     var el = this.el;
-    if (el.sceneEl.hasWebXR) {
-      el.setAttribute('tracked-controls-webxr', {
-        id: data.id,
-        hand: data.hand,
-        index: data.controller,
-        iterateControllerProfiles: data.iterateControllerProfiles,
-        handTrackingEnabled: data.handTrackingEnabled,
-        space: data.space
-      });
-    }
+    el.setAttribute('tracked-controls-webxr', {
+      id: data.id,
+      hand: data.hand,
+      index: data.controller,
+      iterateControllerProfiles: data.iterateControllerProfiles,
+      handTrackingEnabled: data.handTrackingEnabled,
+      space: data.space
+    });
   }
 });