Skip to content

Commit 2879a1a

Browse files
Elchi3Elchi3
authored
Document XRJointPose & XRJointSpace (mdn#8770)
1 parent df0a0a3 commit 2879a1a

File tree

8 files changed

+329
-2
lines changed

8 files changed

+329
-2
lines changed

‎files/en-us/web/api/webxr_device_api/index.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ The equipment may also include an accelerometer, barometer, or other sensors whi
6262
- {{DOMxRef("XRReferenceSpace")}}
6363
- {{DOMxRef("XRBoundedReferenceSpace")}}
6464
- {{domxref("XRReferenceSpaceEvent")}}
65+
- {{domxref("XRJointSpace")}}
6566

6667
### Views
6768

@@ -75,6 +76,7 @@ The equipment may also include an accelerometer, barometer, or other sensors whi
7576
### Pose
7677

7778
- {{DOMxRef("XRPose")}}
79+
- {{DOMxRef("XRJointPose")}}
7880
- {{DOMxRef("XRViewerPose")}}
7981

8082
### Input

‎files/en-us/web/api/xrframe/getjointpose/index.md

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
---
2+
title: XRFrame.getJointPose()
3+
slug: Web/API/XRFrame/getJointPose
4+
tags:
5+
- API
6+
- AR
7+
- Augmented Reality
8+
- Interface
9+
- Method
10+
- Reference
11+
- VR
12+
- Virtual Reality
13+
- WebXR
14+
- WebXR Device API
15+
- XRFrame
16+
- getJointPose
17+
browser-compat: api.XRFrame.getJointPose
18+
---
19+
{{APIRef("WebXR Device API")}}
20+
21+
The **`getJointPose()`** method of the {{domxref("XRFrame")}} interface returns an {{domxref("XRJointPose")}} object providing the pose of a hand joint (see {{domxref("XRHand")}}) relative to a given base space.
22+
23+
## Syntax
24+
25+
```js
26+
getJointPose(joint, baseSpace)
27+
```
28+
29+
### Parameters
30+
31+
- `joint`
32+
- : An {{domxref("XRJointSpace")}} specifying the hand joint space for which to obtain an {{domxref("XRJointPose")}} describing the item's position and orientation.
33+
- `baseSpace`
34+
- : An {{domxref("XRSpace")}} to use as the base or origin for the relative position and orientation.
35+
36+
### Return value
37+
38+
An {{domxref("XRJointPose")}} object specifying the position and orientation of the hand joint, relative to
39+
the {{domxref("XRSpace")}} indicated by `baseSpace`.
40+
41+
42+
## Examples
43+
44+
### Using `getJointPose()`
45+
46+
Call `getJointPose()` with an {{domxref("XRJointSpace")}} and an {{domxref("XRReferenceSpace")}} to get an {{domxref("XRJointPose")}} object.
47+
48+
```js
49+
navigator.xr.requestSession({optionalFeatures: ["hand-tracking"]}).then(
50+
// ...
51+
);
52+
53+
function renderFrame(session, frame) {
54+
// ...
55+
56+
for (inputSource of session.inputSources) {
57+
if (inputSource.hand) {
58+
let indexFingerTipJoint = inputSource.hand.get("index-finger-tip");
59+
frame.getJointPose(indexFingerTipJoint, referenceSpace); // XRJointPose
60+
}
61+
}
62+
}
63+
```
64+
65+
## Specifications
66+
67+
{{Specifications}}
68+
69+
## Browser compatibility
70+
71+
{{Compat}}
72+
73+
## See also
74+
75+
- {{domxref("XRHand")}}
76+
- {{domxref("XRJointSpace")}}
77+
- {{domxref("XRSpace")}}

‎files/en-us/web/api/xrframe/index.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,11 @@ In addition to providing a reference to the {{domxref("XRSession")}} for which t
3838
- {{domxref("XRFrame.getDepthInformation()", "getDepthInformation()")}}
3939
- : Returns an {{domxref("XRCPUDepthInformation")}} object containing CPU depth information for the frame.
4040
- {{domxref("XRFrame.getHitTestResults()", "getHitTestResults()")}}
41-
- : Returns an array of {{domxref("XRHitResult")}} objects containing hit test results for a given {{domxref("XRHitTestSource")}}.
41+
- : Returns an array of {{domxref("XRHitTestResult")}} objects containing hit test results for a given {{domxref("XRHitTestSource")}}.
4242
- {{domxref("XRFrame.getHitTestResultsForTransientInput()", "getHitTestResultsForTransientInput()")}}
4343
- : Returns an array of {{domxref("XRTransientInputHitTestResult")}} objects containing hit test results for a given {{domxref("XRTransientInputHitTestSource")}}.
44+
- {{domxref("XRFrame.getJointPose()", "getJointPose()")}}
45+
- : Returns an {{domxref("XRJointPose")}} object providing the pose of a hand joint (see {{domxref("XRHand")}}) relative to a given base space.
4446
- {{domxref("XRFrame.getLightEstimate()", "getLightEstimate()")}}
4547
- : Returns an {{domxref("XRLightEstimate")}} object containing estimated lighting values for an {{domxref("XRLightProbe")}}.
4648
- {{DOMxRef("XRFrame.getPose", "getPose()")}}

‎files/en-us/web/api/xrjointpose/index.md

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
---
2+
title: XRJointPose
3+
slug: Web/API/XRJointPose
4+
tags:
5+
- API
6+
- Interface
7+
- Reference
8+
- WebXR
9+
- XR
10+
- AR
11+
- VR
12+
browser-compat: api.XRJointPose
13+
---
14+
{{APIRef("WebXR Device API")}}
15+
16+
The **`XRJointPose`** interface is an {{domxref("XRPose")}} with additional information about the size of the skeleton joint it represents.
17+
18+
## Properties
19+
20+
- {{domxref("XRJointPose.radius")}} {{readonlyInline}}
21+
- : The radius (distance from skin) for a joint.
22+
23+
## Examples
24+
25+
### Using `XRJointPose` objects
26+
27+
Call {{domxref("XRFrame.getJointPose()")}} with an {{domxref("XRJointSpace")}} and an {{domxref("XRReferenceSpace")}} to get an `XRJointPose` object.
28+
29+
```js
30+
navigator.xr.requestSession({optionalFeatures: ["hand-tracking"]}).then(
31+
// ...
32+
);
33+
34+
function renderFrame(session, frame) {
35+
// ...
36+
37+
for (inputSource of session.inputSources) {
38+
if (inputSource.hand) {
39+
let indexFingerTipJoint = inputSource.hand.get("index-finger-tip");
40+
frame.getJointPose(indexFingerTipJoint, referenceSpace); // XRJointPose
41+
}
42+
}
43+
}
44+
```
45+
46+
## Specifications
47+
48+
{{Specifications}}
49+
50+
## Browser compatibility
51+
52+
{{Compat}}
53+
54+
## See also
55+
56+
- {{domxref("XRHand")}}
57+
- {{domxref("XRReferenceSpace")}}
58+
- {{domxref("XRJointSpace")}}
59+
- {{domxref("XRFrame.getJointPose()")}}

‎files/en-us/web/api/xrjointpose/radius/index.md

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
---
2+
title: XRJointPose.radius
3+
slug: Web/API/XRJointPose/radius
4+
tags:
5+
- API
6+
- Controller
7+
- Hand
8+
- Input
9+
- Property
10+
- Read-only
11+
- Reference
12+
- VR
13+
- WebXR
14+
- WebXR API
15+
- WebXR Device API
16+
- XR
17+
- XRJointPose
18+
19+
browser-compat: api.XRJointPose.radius
20+
---
21+
{{APIRef("WebXR Device API")}}
22+
23+
The read-only **`radius`** property of the {{domxref("XRJointPose")}} interface indicates the radius (distance from skin) for a joint.
24+
25+
## Value
26+
27+
A number indicating the radius in meters.
28+
29+
## Examples
30+
31+
### Getting the `radius` for a hand joint
32+
33+
Call {{domxref("XRFrame.getJointPose()")}} with an {{domxref("XRJointSpace")}} and an {{domxref("XRReferenceSpace")}} to get an `XRJointPose` object which provides the radius property.
34+
35+
```js
36+
navigator.xr.requestSession({optionalFeatures: ["hand-tracking"]}).then(
37+
// ...
38+
);
39+
40+
function renderFrame(session, frame) {
41+
// ...
42+
43+
for (inputSource of session.inputSources) {
44+
if (inputSource.hand) {
45+
let indexFingerTipJoint = inputSource.hand.get("index-finger-tip");
46+
let radius = frame.getJointPose(indexFingerTipJoint, referenceSpace).radius;
47+
}
48+
}
49+
}
50+
```
51+
## Specifications
52+
53+
{{Specifications}}
54+
55+
## Browser compatibility
56+
57+
{{Compat}}
58+
59+
## See also
60+
61+
- {{domxref("XRHand")}}
62+
- {{domxref("XRReferenceSpace")}}
63+
- {{domxref("XRJointSpace")}}
64+
- {{domxref("XRFrame.getJointPose()")}}

‎files/en-us/web/api/xrjointspace/index.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
title: XRJointSpace
3+
slug: Web/API/XRJointSpace
4+
tags:
5+
- API
6+
- Interface
7+
- Reference
8+
- WebXR
9+
- XR
10+
- AR
11+
- VR
12+
browser-compat: api.XRJointSpace
13+
---
14+
{{APIRef("WebXR Device API")}}
15+
16+
The **`XRJointSpace`** interface is an {{domxref("XRSpace")}} and represents the position and orientation of an {{domxref("XRHand")}} joint.
17+
18+
## Properties
19+
20+
- {{domxref("XRJointSpace.jointName")}} {{readonlyInline}}
21+
- : The name of the joint that is tracked. See {{domxref("XRHand")}} for possible hand joint names.
22+
23+
## Examples
24+
25+
### Using `XRJointSpace` objects
26+
27+
You can use an `XRJointSpace` object and an {{domxref("XRReferenceSpace")}} to get an {{domxref("XRJointPose")}} by calling {{domxref("XRFrame.getJointPose()")}}.
28+
29+
```js
30+
navigator.xr.requestSession({optionalFeatures: ["hand-tracking"]}).then(
31+
// ...
32+
);
33+
34+
function renderFrame(session, frame) {
35+
// ...
36+
37+
for (inputSource of session.inputSources) {
38+
if (inputSource.hand) {
39+
let indexFingerTipJoint = inputSource.hand.get("index-finger-tip"); // XRJointSpace
40+
indexFingerTipJoint.jointName; // "index-finger-tip"
41+
frame.getJointPose(indexFingerTipJoint, referenceSpace); // XRJointPose
42+
}
43+
}
44+
}
45+
```
46+
47+
## Specifications
48+
49+
{{Specifications}}
50+
51+
## Browser compatibility
52+
53+
{{Compat}}
54+
55+
## See also
56+
57+
- {{domxref("XRHand")}}
58+
- {{domxref("XRReferenceSpace")}}
59+
- {{domxref("XRJointPose")}}
60+
- {{domxref("XRFrame.getJointPose()")}}

‎files/en-us/web/api/xrjointspace/jointname/index.md

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
title: XRJointSpace.jointName
3+
slug: Web/API/XRJointSpace/jointName
4+
tags:
5+
- API
6+
- Controller
7+
- Hand
8+
- Input
9+
- Property
10+
- Read-only
11+
- Reference
12+
- VR
13+
- WebXR
14+
- WebXR API
15+
- WebXR Device API
16+
- XR
17+
- XRJointSpace
18+
19+
browser-compat: api.XRJointSpace.jointName
20+
---
21+
{{APIRef("WebXR Device API")}}
22+
23+
The read-only **`jointName`** property of the {{domxref("XRJointSpace")}} interface contains the name of the the joint it tracks.
24+
25+
## Value
26+
27+
A string indicating the name of the joint. See the list of hand joints on the {{domxref("XRHand")}} page.
28+
29+
## Examples
30+
31+
### Getting the `jointName`
32+
33+
Given a `XRJointSpace`, the `jointName` property will contain the hand joint name.
34+
35+
```js
36+
navigator.xr.requestSession({optionalFeatures: ["hand-tracking"]}).then(
37+
// ...
38+
);
39+
40+
function renderFrame(session, frame) {
41+
// ...
42+
43+
for (inputSource of session.inputSources) {
44+
if (inputSource.hand) {
45+
let indexFingerTipJoint = inputSource.hand.get("index-finger-tip"); // XRJointSpace
46+
indexFingerTipJoint.jointName; // "index-finger-tip"
47+
}
48+
}
49+
}
50+
```
51+
## Specifications
52+
53+
{{Specifications}}
54+
55+
## Browser compatibility
56+
57+
{{Compat}}
58+
59+
## See also
60+
61+
- {{domxref("XRHand")}}

‎files/en-us/web/api/xrspace/index.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ The **`XRSpace`** interface of the [WebXR Device API](/en-US/docs/Web/API/WebXR_
2121

2222
Numeric values such as pose positions are thus coordinates in the corresponding `XRSpace`, relative to that space's origin.
2323

24-
> **Note:** The `XRSpace` interface is never used directly; instead, all spaces are created using one of the interfaces based on `XRSpace`. At this time, those are {{domxref("XRReferenceSpace")}} and {{domxref("XRBoundedReferenceSpace")}}.
24+
> **Note:** The `XRSpace` interface is never used directly; instead, all spaces are created using one of the interfaces based on `XRSpace`. At this time, those are {{domxref("XRReferenceSpace")}}, {{domxref("XRBoundedReferenceSpace")}}, and {{domxref("XRJointSpace")}}.
2525
2626
## Interfaces based on XRSpace
2727

@@ -31,6 +31,8 @@ Below is a list of interfaces based on the `XRSpace` interface.
3131
- : Represents a reference space which may move within a region of space whose borders are defined by an array of points laid out in clockwise order along the floor to define the passable region of the space. The origin of an `XRBoundedReferenceSpace` is always at floor level, with its X and Z coordinates typically defaulting to a location near the room's center.
3232
- {{domxref("XRReferenceSpace")}}
3333
- : Represents a reference space which is typically expected to remain static for the duration of the {{domxref("XRSession")}}. While objects may move within the space, the space itself remains fixed in place. There are exceptions to this static nature; most commonly, an `XRReferenceSpace` may move in order to adjust based on reconfiguration of the user's headset or other motion-sensitive device.
34+
- {{domxref("XRJointSpace")}}
35+
- : Represents the space of an {{domxref("XRHand")}} joint.
3436

3537
## Properties
3638

0 commit comments

Comments
 (0)