networked: ability to track hands

Author: avdynut

src/XRSharp.CommunityToolkit.Networked/NetworkedScene.cs

@@ -20,6 +20,7 @@ public class NetworkedScene : RootComponent
         new() { Type = ResourceType.Script, Source =  $"{ResourcesPath}/socket.io.slim.js" },
         new() { Type = ResourceType.Script, Source =  $"{ResourcesPath}/easyrtc.js" },
         new() { Type = ResourceType.Script, Source =  $"{ResourcesPath}/networked-aframe.min.js" },
+        new() { Type = ResourceType.Script, Source =  $"{ResourcesPath}/networked-hand-tracking.js" },
     };
 
     /// <summary>
@@ -64,6 +65,13 @@ public class NetworkedScene : RootComponent
     /// </summary>
     public bool Debug { get; set; } = false;
 
+    /// <summary>
+    /// Whether user hands should be visible to others.
+    /// Currently only dots model is supported.
+    /// Default is <see langword="false"/>.
+    /// </summary>
+    public bool HandTrackingEnabled { get; set; }
+
     public bool IsConnected => IsInitialized && Interop.ExecuteJavaScriptGetResult<bool>("NAF.connection.isConnected();");
 
     /// <summary>
@@ -156,6 +164,29 @@ protected override void Init()
             }
         }
 
+        if (HandTrackingEnabled)
+        {
+            Interop.ExecuteJavaScriptVoid(@$"
+var assets = {Root.JsElement}.querySelector('a-assets');
+const handJointTemplate = document.createElement('template');
+handJointTemplate.setAttribute('id', 'hand-joint-template');
+
+const jointSphere = document.createElement('a-sphere');
+jointSphere.setAttribute('radius', 0.01);
+
+handJointTemplate.content.appendChild(jointSphere);
+assets.appendChild(handJointTemplate);
+
+const handElements = document.querySelectorAll('[hand-tracking-controls]');
+
+for (var i = 0; i < handElements.length; i++) {{
+  var hand = handElements[i];
+  hand.setAttribute('hand-tracking-controls', 'modelStyle: dots');
+  hand.setAttribute('networked-hand-tracking', '');
+}}
+");
+        }
+
         if (Audio)
         {
             UpdateMicState();

src/XRSharp.CommunityToolkit.Networked/Resources/networked-hand-tracking.js

@@ -0,0 +1,35 @@
+AFRAME.registerComponent('networked-hand-tracking', {
+    dependencies: ['hand-tracking-controls'],
+
+    schema: {
+        options: { default: 'template:#hand-joint-template; attachTemplateToLocal:false' }
+    },
+
+    init: function () {
+        var el = this.el;
+        this.trackingControls = el.components['hand-tracking-controls'];
+        this.trackingControls.initDotsModel = this.initDotsModel();
+
+        this.onExitVR = AFRAME.utils.bind(this.onExitVR, this);
+        el.sceneEl.addEventListener('exit-vr', this.onExitVR);
+    },
+
+    initDotsModel: function () {
+        this.trackingControls.initDotsModel();
+
+        var jointEls = this.trackingControls.jointEls;
+
+        for (var i = 0; i < jointEls.length; i++) {
+            jointEls[i].setAttribute('networked', this.data.options);
+        }
+    },
+
+    onExitVR: function () {
+        var jointEls = this.trackingControls.jointEls;
+        this.trackingControls.jointEls = [];
+
+        for (var i = 0; i < jointEls.length; i++) {
+            jointEls[i].removeAttribute('networked');
+        }
+    },
+});

src/XRSharp.CommunityToolkit.Networked/XRSharp.CommunityToolkit.Networked.csproj

@@ -22,6 +22,7 @@
   <ItemGroup>
     <EmbeddedResource Include="Resources\easyrtc.js" />
     <EmbeddedResource Include="Resources\networked-aframe.min.js" />
+    <EmbeddedResource Include="Resources\networked-hand-tracking.js" />
     <EmbeddedResource Include="Resources\socket.io.slim.js" />
   </ItemGroup>
 

src/XRSharp.CommunityToolkit/XRSharp.CommunityToolkit/Examples/Networked/Networked.xaml

@@ -9,10 +9,16 @@
             <xr:BasicEnvironment BackgroundColor="LightBlue"/>
         </xr:Root3D.Environment>
         <xr:Root3D.Components>
-            <n:NetworkedScene Debug="True" Audio="True" Adapter="easyrtc" ServerURL="http://localhost:8080/">
+            <n:NetworkedScene Adapter="easyrtc"
+                              Audio="True"
+                              Debug="True"
+                              HandTrackingEnabled="True"
+                              ServerURL="http://localhost:8080/">
                 <n:NetworkedScene.Avatar>
                     <xr:Canvas3D>
-                        <xr:Box SizeX="0.5" SizeY="0.7" SizeZ="0.5"/>
+                        <xr:Box SizeX="0.5"
+                                SizeY="0.7"
+                                SizeZ="0.5"/>
                     </xr:Canvas3D>
                 </n:NetworkedScene.Avatar>
             </n:NetworkedScene>