Logitech MX Ink improvements (#5756)

* Allow stylus visualization when in AR mode (i.e. Meta Quest passthrough / mixed reality).

* Update Painter showcase example to support brush stroke size variation based on button/tip pressure applied.

* Avoid directly modifying brush' data.size, use a sizeFactor variable instead.

Author: FilipeLopesPires

examples/showcase/painter/components/brush.js

@@ -2,7 +2,8 @@
 AFRAME.registerComponent('brush', {
   schema: {
     color: {type: 'color', default: '#ef2d5e'},
-    size: {default: 0.01, min: 0.001, max: 0.3},
+    size: {default: 0.01, min: 0.001, max: 1.0},
+    pressureMultiplier: {default: 5.0, min: 0.01, max: 10.0},
     enabled: {default: true},
     hand: {default: 'left'}
   },
@@ -15,6 +16,7 @@ AFRAME.registerComponent('brush', {
     this.stroke = null;
     this.buttonsDown = 0;
     this.touches = 0;
+    this.sizeFactor = 1.0;
 
     this.onTouchStarted = this.onTouchStarted.bind(this);
     el.addEventListener('tiptouchstart', this.onTouchStarted);
@@ -26,6 +28,9 @@ AFRAME.registerComponent('brush', {
     this.onButtonUp = this.onButtonUp.bind(this);
     el.addEventListener('buttonup', this.onButtonUp);
 
+    this.onButtonChanged = this.onButtonChanged.bind(this);
+    el.addEventListener('buttonchanged', this.onButtonChanged);
+
     this.onControllerConnected = this.onControllerConnected.bind(this);
     el.addEventListener('controllerconnected', this.onControllerConnected);
 
@@ -68,6 +73,16 @@ AFRAME.registerComponent('brush', {
     this.painting = false;
   },
 
+  onButtonChanged: function (evt) {
+    if (!this.data.enabled) { return; }
+    if (!this.painting) { return; }
+    if (evt.detail.state.value === 1) {
+      this.sizeFactor = 1.0;
+    } else {
+      this.sizeFactor = evt.detail.state.value * this.data.pressureMultiplier;
+    }
+  },
+
   tick: (function () {
     var position = new THREE.Vector3();
     var rotation = new THREE.Quaternion();
@@ -84,12 +99,13 @@ AFRAME.registerComponent('brush', {
       }
       this.el.object3D.matrixWorld.decompose(position, rotation, scale);
       var pointerPosition = this.getPointerPosition(position, rotation);
+      this.stroke.setSize(this.data.size * this.sizeFactor);
       this.stroke.addPoint(position, rotation, pointerPosition);
     };
   })(),
 
   startNewStroke: function () {
-    this.stroke = this.system.addNewStroke(this.color, this.data.size);
+    this.stroke = this.system.addNewStroke(this.color, this.data.size * this.sizeFactor);
   },
 
   getPointerPosition: (function () {

examples/showcase/painter/stroke-geometry.js

@@ -94,6 +94,15 @@ StrokeGeometry.prototype = {
     this.currentGeometry.attributes.normal.setXYZ(this.indices.normal++, x, y, z);
   },
 
+  setSize: (function () {
+    return function (size) {
+      if (this.size === size) {
+        return;
+      }
+      this.size = size;
+    };
+  })(),
+
   addPoint: (function () {
     var direction = new THREE.Vector3();
     var vertexA = new THREE.Vector3();

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

@@ -120,7 +120,7 @@ export var Component = registerComponent('logitech-mx-ink-controls', {
     var controllerObject3D = this.controllerObject3D;
     if (!this.data.model) { return; }
     if (controllerObject3D) {
-      controllerObject3D.visible = this.el.sceneEl.is('vr-mode');
+      controllerObject3D.visible = this.el.sceneEl.is('vr-mode') || this.el.sceneEl.is('ar-mode');
       this.el.setObject3D('mesh', controllerObject3D);
       return;
     }
@@ -163,7 +163,7 @@ export var Component = registerComponent('logitech-mx-ink-controls', {
     });
 
     this.controllerObject3D = this.el.getObject3D('mesh');
-    this.controllerObject3D.visible = this.el.sceneEl.is('vr-mode');
+    this.controllerObject3D.visible = this.el.sceneEl.is('vr-mode') || this.el.sceneEl.is('ar-mode');
   },
 
   onAxisMoved: function (evt) {