Skip to content

Commit e0f961f

Browse files
evanmcarlsonevanmcarlson
authored
Update documentation (#8)
* Update documentation * Update documentation * Update documentation * Update documentation * Update documentation
1 parent 829c614 commit e0f961f

47 files changed

Lines changed: 1702 additions & 625 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docs/api/studio/changelog.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ The all-new Studio Runtime 2.0 comes with a rebuilt physics engine. Some physics
5151
- We added a new `type` property (required) to `ecs.Collider` to allow for determining if and how physics simulation should apply to the object. Previously, a mass value above 0 determined if a collider was Dynamic or not (0 mass = Static), and Kinematic colliders were not supported.
5252
- Allowed values: `ColliderType.Static`, `ColliderType.Kinematic`, `ColliderType.Dynamic`
5353
- Kinematic colliders are not affected by physics forces, but can have motion and can affect other dynamic bodies through collisions
54-
- See [Collider API documentation](https://www.8thwall.com/docs/api/studio/ecs/collider/) for details and use cases
54+
- See [Collider API documentation](/docs/api/studio/ecs/collider/) for details and use cases
5555

5656
### Fixes and Enhancements
5757
- Enabled stricter typescript checking on by default at build time to improve error reporting

‎docs/api/studio/events/xr/face.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ This event is emitted by Face Effects when a face is first found.
7171
| transform | [`TransformObject`](#TransformObject) | Transform information of the located face. |
7272
| vertices | `[{x, y, z}]` | Position of face points, relative to transform. |
7373
| normals | `[{x, y, z}]` | Normal direction of vertices, relative to transform. |
74-
| attachmentPoints | `{ name, position: {x,y,z} }` | See [`XR8.FaceController.AttachmentPoints`](https://www.8thwall.com/docs/api/engine/facecontroller/attachmentpoints/) for list of available attachment points. `position` is relative to the transform. |
74+
| attachmentPoints | `{ name, position: {x,y,z} }` | See [`XR8.FaceController.AttachmentPoints`](/docs/api/engine/facecontroller/attachmentpoints/) for list of available attachment points. `position` is relative to the transform. |
7575
| uvsInCameraFrame | `[{u, v}]` | The list of uv positions in the camera frame corresponding to the returned vertex points. |
7676

7777
#### Example
@@ -93,7 +93,7 @@ This event is emitted by Face Effects when faces are subsequently found.
9393
| transform | [`TransformObject`](#TransformObject) | Transform information of the located face. |
9494
| vertices | `[{x, y, z}]` | Position of face points, relative to transform. |
9595
| normals | `[{x, y, z}]` | Normal direction of vertices, relative to transform. |
96-
| attachmentPoints | `{ name, position: {x,y,z} }` | See [`XR8.FaceController.AttachmentPoints`](https://www.8thwall.com/docs/api/engine/facecontroller/attachmentpoints/) for list of available attachment points. `position` is relative to the transform. |
96+
| attachmentPoints | `{ name, position: {x,y,z} }` | See [`XR8.FaceController.AttachmentPoints`](/docs/api/engine/facecontroller/attachmentpoints/) for list of available attachment points. `position` is relative to the transform. |
9797
| uvsInCameraFrame | `[{u, v}]` | The list of uv positions in the camera frame corresponding to the returned vertex points. |
9898

9999
#### Example

‎docs/engine/engine.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
---
2-
sidebar_label: Introduction
2+
sidebar_label: Engine Introduction
33
---
44

55
# 8th Wall Engine
66

7+
:::info
8+
If you are developing an 8th Wall project with [Studio](/docs/studio), the 8th Wall Engine is included in all projects by default and does not require additional setup.
9+
:::
10+
711
The 8th Wall AR Engine is a complete implementation of 8th Wall's Simultaneous Localization and Mapping (SLAM) engine, hyper-optimized for real-time WebAR on browsers. AR features include World Tracking, Image Targets, Face Effects, and Sky Segmentation.
812

913
The engine is built-in to Studio projects, and is also easily integrated into modern 3D JavaScript frameworks such as [A-Frame](<https://aframe.io/>), [three.js](<https://threejs.org/>), [PlayCanvas](<https://www.playcanvas.com>), and [Babylon.js](<https://www.babylonjs.com/>).

‎docs/engine/guides/advanced-analytics.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ experience. These events will be particular to your WebAR project, but some exam
6464
* etc…
6565

6666
In this example, we’ll create a Tag (with Trigger) and add it to the
67-
["AFrame: Place Ground"](https://www.8thwall.com/8thwall/placeground-aframe) sample project that
67+
["AFrame: Place Ground"](https://github.com/8thwall/aframe-world-effects-example) example that
6868
fires each time a 3D model is spawned.
6969

7070
#### Create Custom Event Trigger {#create-custom-event-trigger}
@@ -95,7 +95,7 @@ In your 8th Wall project, add the following line of javascript to fire this trig
9595

9696
`window.dataLayer.push({event: 'placeModel'})`
9797

98-
##### Example - based on <https://www.8thwall.com/8thwall/placeground-aframe/master/tap-place.js> {#example---based-on-httpswww8thwallcom8thwallplaceground-aframemastertap-placejs}
98+
##### Example - based on <https://github.com/8thwall/aframe-world-effects-example/blob/main/src/tap-place.js>
9999

100100
```javascript
101101
export const tapPlaceComponent = {

‎docs/engine/guides/coaching-overlay.md‎

Lines changed: 4 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,9 @@ customizable by developers, enabling you to focus your time on building your Web
1515

1616
### Use Absolute Scale Coaching Overlay in Your Project: {#use-absolute-scale-coaching-overlay-in-your-project}
1717

18-
1. Open your Project
19-
2. Add the following tag to `head.html`
18+
1. Clone a project that contains the coaching overlay. The coaching overlay is included as a part of the `external` folder.
2019

21-
```jsx
22-
<meta name="8thwall:package" content="@8thwall.coaching-overlay">
23-
```
24-
25-
Note: For Self-Hosted projects, you would add the following `<script>` tag to your page instead:
26-
27-
```jsx
28-
<script src='https://cdn.8thwall.com/web/coaching-overlay/coaching-overlay.js'></script>
29-
```
30-
31-
3. Optionally, customize the parameters of your `coaching-overlay` component as defined below. For
20+
2. Optionally, customize the parameters of the `coaching-overlay` component as defined below. For
3221
Non-AFrame projects, please refer to the
3322
[CoachingOverlay.configure()](/docs/api/engine/coachingoverlay/configure) documentation.
3423

@@ -138,20 +127,9 @@ enabling you to focus your time on building your WebAR experience.
138127

139128
### Use Sky Effects Coaching Overlay in Your Project {#use-sky-effects-coaching-overlay-in-your-project}
140129

141-
1. Open your Project
142-
2. Add the following tag to `head.html`
143-
144-
```jsx
145-
<meta name="8thwall:package" content="@8thwall.coaching-overlay">
146-
```
147-
148-
Note: For Self-Hosted projects, you would add the following `<script>` tag to your page instead:
149-
150-
```jsx
151-
<script src='https://cdn.8thwall.com/web/coaching-overlay/coaching-overlay.js'></script>
152-
```
130+
1. Clone a project that contains the coaching overlay. The coaching overlay is included as a part of the `external` folder.
153131

154-
3. Optionally, customize the parameters of your `sky-coaching-overlay` component as defined below.
132+
2. Optionally, customize the parameters of the `sky-coaching-overlay` component as defined below.
155133
For Non-AFrame projects, please refer to the SkyCoachingOverlay.configure() documentation.
156134

157135
### A-Frame component parameters (all optional) {#sky-coaching-overlay-parameters}

‎docs/engine/guides/iframe.md‎

Lines changed: 4 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
id: ios-8th-wall-web-inside-an-iframe
2+
id: iframe
33
sidebar_position: 7
44
---
55

@@ -14,124 +14,6 @@ the following [feature-policy directives](https://developer.mozilla.org/en-US/do
1414
<iframe allow="camera;gyroscope;accelerometer;magnetometer;xr-spatial-tracking;microphone;"></iframe>
1515
```
1616

17-
NOTE: microphone is optional.
18-
19-
## LEGACY METHOD: Supporting iOS versions prior to iOS 15 {#legacy-method-supporting-ios-versions-prior-to-ios-15}
20-
21-
The following is **ONLY** required for supporting Inline AR in iOS versions prior to iOS 15. Given
22-
the high adoption of iOS 15+, we **NO LONGER** recommend using this approach.
23-
24-
See the latest iOS adoption stats from Apple: <https://developer.apple.com/support/app-store/>
25-
26-
In addition to including the allow parameter with the correct
27-
[feature-policy directives](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Permissions-Policy#directives)
28-
in your iframe as explained above, to support World Tracking projects on iOS versions prior to iOS
29-
15, you must also include additional javascript on both the OUTER and INNER AR pages as explained
30-
below.
31-
32-
In these versions, Safari blocks deviceorientation and devicemotion event access from cross-origin
33-
iframes. To counter this, you must include two scripts in your project to ensure cross-compatibility
34-
with iOS when deploying World Tracking projects.
35-
36-
This is **not required for Face Effects or Image Target projects** (with `disableWorldTracking` set
37-
to `true`).
38-
39-
When implemented correctly, this process enables the OUTER website to send motion events down to the
40-
INNER AR website, a requirement for World Tracking.
41-
42-
#### For the OUTER website {#for-the-outer-website}
43-
44-
**iframe.js** must be included in the **HEAD** of the **OUTER** page via this script tag:
45-
46-
```html
47-
<script src="//cdn.8thwall.com/web/iframe/iframe.js"></script>
48-
```
49-
50-
When starting AR, register the XRIFrame by iframe ID:
51-
52-
```js
53-
window.XRIFrame.registerXRIFrame(IFRAME_ID)
54-
```
55-
56-
When stoppping AR, deregister the XRIFrame:
57-
58-
```js
59-
window.XRIFrame.deregisterXRIFrame()
60-
```
61-
62-
#### For the INNER website {#for-the-inner-website}
63-
64-
**iframe-inner.js** must be included in the **HEAD** of your **INNER AR** website with this script tag:
65-
66-
```html
67-
<script src="//cdn.8thwall.com/web/iframe/iframe-inner.js"></script>
68-
```
69-
70-
By allowing the inner and outer windows to communicate, deviceorientation/devicemotion data can be shared.
71-
72-
See sample project at <https://www.8thwall.com/8thwall/inline-ar>
73-
74-
#### Examples {#examples}
75-
76-
##### Outer Page {#outer-page}
77-
78-
```jsx
79-
// Send deviceorientation/devicemotion to the INNER iframe
80-
<script src="//cdn.8thwall.com/web/iframe/iframe.js"></script>
81-
82-
...
83-
const IFRAME_ID = 'my-iframe' // Iframe containing AR content.
84-
const onLoad = () => {
85-
window.XRIFrame.registerXRIFrame(IFRAME_ID)
86-
}
87-
// Add event listenters and callbacks for the body DOM.
88-
window.addEventListener('load', onLoad, false)
89-
90-
...
91-
92-
<body>
93-
<iframe
94-
id="my-iframe"
95-
style="border: 0; width: 100%; height: 100%"
96-
allow="camera;microphone;gyroscope;accelerometer;"
97-
src="https://www.other-domain.com/my-web-ar/">
98-
</iframe>
99-
</body>
100-
```
101-
102-
##### Inner Page: AFrame projects {#inner-page-aframe-projects}
103-
104-
```html
105-
<head>
106-
<!-- Recieve deviceorientation/devicemotion from the OUTER window -->
107-
<script src="//cdn.8thwall.com/web/iframe/iframe-inner.js"></script>
108-
</head>
109-
110-
...
111-
112-
<body>
113-
<!-- For A-FRAME -->
114-
<!-- NOTE: The iframe-inner script must load after A-FRAME, and iframe-inner component must appear
115-
before xrweb. -->
116-
<a-scene iframe-inner xrweb>
117-
...
118-
</a-scene>
119-
```
120-
121-
##### Inner Page: Non-AFrame projects {#inner-page-non-aframe-projects}
122-
123-
```html
124-
<head>
125-
<!-- Recieve deviceorientation/devicemotion from the OUTER window -->
126-
<script src="//cdn.8thwall.com/web/iframe/iframe-inner.js"></script>
127-
</head>
128-
129-
...
130-
131-
<!-- For non-AFrame projects, add iframeInnerPipelineModule to the custom pipeline module section,
132-
typically located in "onxrloaded" like so: -->
133-
XR8.addCameraPipelineModules([
134-
// Custom pipeline modules
135-
iframeInnerPipelineModule,
136-
])
137-
```
17+
:::note
18+
All permissions are required for AR **except for microphone**.
19+
:::

‎docs/engine/guides/landing-page.md‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -30,19 +30,8 @@ time on building your WebAR experience.
3030

3131
## Use Landing Pages in Your Project {#use-landing-pages-in-your-project}
3232

33-
1. Open your Project
34-
2. Add the following tag to `head.html`
35-
36-
`<meta name="8thwall:package" content="@8thwall.landing-page">`
37-
38-
Note: For Self-Hosted projects, you would add the following `<script>` tag to your page instead:
39-
40-
`<script src='https://cdn.8thwall.com/web/landing-page/landing-page.js'></script>`
41-
42-
3. **Remove** `xrextras-almost-there` from your A-Frame project, or
43-
`XRExtras.AlmostThere.pipelineModule()` from your Non-AFrame project. (Landing Pages include
44-
almost-there logic in addition to the updates to the QR code page.)
45-
4. Optionally, customize the parameters of your `landing-page` component as defined below. For
33+
1. Clone a project that contains the landing page script. The landing page script is included as a part of the `external` folder.
34+
2. Optionally, customize the parameters of the `landing-page` component as defined below. For
4635
Non-AFrame projects, please refer to the [LandingPage.configure()](/docs/api/engine/landingpage/configure)
4736
documentation.
4837

0 commit comments

Comments
 (0)