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(){
 varposition=newTHREE.Vector3();
 varrotation=newTHREE.Quaternion();
@@ -84,12 +99,13 @@ AFRAME.registerComponent('brush',{
 }
 this.el.object3D.matrixWorld.decompose(position,rotation,scale);
 varpointerPosition=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(){
+returnfunction(size){
+if(this.size===size){
+return;
+}
+this.size=size;
+};
+})(),
+
 addPoint: (function(){
 vardirection=newTHREE.Vector3();
 varvertexA=newTHREE.Vector3();

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

@@ -120,7 +120,7 @@ export var Component = registerComponent('logitech-mx-ink-controls',{
 varcontrollerObject3D=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){