# About ShapesXR

ShapesXR is a design and prototyping tool for spatial apps and games. It allows designers to easily create in 3D without prior experience in game engines, import various types of assets (such as 3D models, Figma UI, or sound files), and create interactive prototypes without the need for any coding. 

ShapesXR is fully collaborative supporting real-time co-creation across virtual reality, mixed reality, and web, and has powerful team moderation features that make it a powerful communication tool to run immersive design reviews with internal or external stakeholders.

### About this Learn Page

On this Learn page, you will find plenty of useful information on how to get started with ShapesXR. We have added plenty of supporting GIFs and images to make it intuitive and visual. We also encourage you to check out the in-app video tutorial created by our master instructor Jeremy so that you can follow along while fully immersed.


# Pricing Limitations FAQ

1. **What is changing?** 
   1. We’re updating our pricing structure, including our free plan, to better align with the needs of our users while ensuring we can continue to grow and enhance ShapesXR.
2. **Why are you introducing new pricing options now?**
   1. As ShapesXR grows, we want to ensure we continue delivering the tools and features you rely on while investing in future improvements. These changes help us maintain the platform's quality, sustainability, and expand its capabilities, allowing us to provide even more value to professionals, teams, and businesses like yours.
3. **When will these changes take effect?**
   1. The new pricing plans go live on November 19, 2024.
4. **What’s changing with the free plan?**
   1. Starting November 19, free users will have access to 1 editable space. Additional spaces will automatically switch to view-only mode. You can still share and collaborate within this space, and you’ll have 14 days to choose which space to keep editable or upgrade to a paid plan for unlimited spaces and so much more.
5. **Why limit the free plan to 1 editable space?**
   1. This change ensures that we can continue to offer a high-quality free experience while supporting the sustainability of the platform.
6. **Will existing projects be affected?**
   1. No, your current projects will not be lost. All your existing spaces will remain accessible in view-only mode, so you can still view and share them. However, only one space will remain editable unless you upgrade to a paid plan for full editing access.
7. **Can I still collaborate with others on the free plan?**
   1. Absolutely, we won’t limit collaboration!
8. **Will there be any changes to existing paid plans?**
   1. No, users on existing paid plans will keep all their current benefits. 
9. **Is there a license available for indie or freelance creators?**
   1. Yes! Our Community License is available for our most dedicated creators, giving you access to some features of a paid plan for free, for an initial period of six months. This license is available through an application process and is aimed at users who are active in the ShapesXR community, share their work, and contribute feedback. If you’re interested, you can apply [here](https://docs.google.com/forms/d/e/1FAIpQLSfME9gLSuhBjDX9wx2qB3xwKwEn78lmQ-Cr6XAvt1qoD7w1Yg/viewform).

      We’re excited to continue supporting passionate creators like you—please don’t hesitate to reach out with any questions.

### New Plans:

1. **Starter Plan - FREE**
   1. 1 editable space, unlimited view spaces
   2. 10 scenes per space
   3. 20 MB imports, export, and Unity Plugin
   4. Collaboration
   5. All creation tools and library of assets<br>
2. **Business Plan** -  includes all Starter features and enhances collaboration with tools for seamless project management.&#x20;
   1. Presentation tools
   2. Roles and permissions
   3. Team projects
   4. Shared asset library
   5. Playable Figma prototypes in a headset
   6. Follow Mode for Web Editor (following the VR first view)<br>
3. **Enterprise Plan** - for larger organizations, includes all team features and offers advanced security features.&#x20;
   1. Single Sign On (SSO)
   2. SOC2 Type 2 Compliance
   3. Dedicated customer support, new user onboarding, and advanced training<br>
4. **Do you offer an Education Program?**
   1. Absolutely! Unlock the power of immersive design for students and educators with special pricing for academic institutions. Contact us for a custom quote.

### Support and Contact

**Who can I reach out to if I have more questions?**\
If you have any concerns or questions, please contact us at <support@shapesxr.com>. We’re here to help!

<br>


# Getting Started

{% content-ref url="/pages/a0WgSiIogRNyG9pPt0f2" %}
[Sign In](/getting-started/sign-in)
{% endcontent-ref %}

{% content-ref url="/pages/dTHW2VCbyKgDhcNDxEvU" %}
[Compatible VR Headsets and downloading](/getting-started/compatible-vr-headsets-and-downloading)
{% endcontent-ref %}

{% content-ref url="/pages/vQ0umDWavWgkg3JghqHc" %}
[Free or Paid](/getting-started/free-or-paid)
{% endcontent-ref %}

{% content-ref url="/pages/kqZzKUxNj0iBlKYcO16l" %}
[Performance limitations](/getting-started/performance-limitations)
{% endcontent-ref %}


# Sign In

### Sign In to the Dashboard

1. Go to <https://shapes.app/>.
2. Enter your email and continue.

<figure><img src="/files/ELyZNZy1o4B7vk5i0vEG" alt=""><figcaption></figcaption></figure>

3. Set your password and create an account.

<figure><img src="/files/44gxGqoxt8KzA9o3Nty2" alt=""><figcaption></figcaption></figure>

4. Verify your account - check your inbox for an email with the verification link and follow it to confirm your email.

<figure><img src="/files/hz83HfjkERvU0XrPFgTa" alt=""><figcaption></figcaption></figure>

5. Fill out a short survey to complete your account creation. Now you can work in the Dashboard!

### Pair the headset

1. Log in to the Dashboard.
2. Press the "Pair headset" button.

<figure><img src="/files/ydSAgrheQ1d5lSQUZNVe" alt=""><figcaption></figcaption></figure>

3. Open the ShapesXR app on your headset, and you'll see the window with the pairing code.

<figure><img src="/files/2R76ZUknAWGUhORdZJxJ" alt=""><figcaption></figcaption></figure>

4. Enter this pairing code into the Dashboard window.

<figure><img src="/files/V6WWTDHq2Sp7tt8dm3gA" alt=""><figcaption></figcaption></figure>


# Compatible VR Headsets and downloading

**ShapesXR works on:**

* [Meta Quest 2](https://www.meta.com/se/en/quest/products/quest-2/)
* [Meta Quest Pro](https://www.meta.com/se/en/quest/quest-pro/)
* [Meta Quest 3](https://www.meta.com/se/en/quest/quest-3/)
* [Pico 4](https://www.picoxr.com/global/products/pico4)
* [Pico 4 Ultra](https://www.picoxr.com/global/products/pico4-ultra)
* [Galaxy XR](https://www.samsung.com/us/xr/galaxy-xr/galaxy-xr/)

[Get ShapesXR on the Meta Quest Store](https://www.oculus.com/experiences/quest/3899112273551602/)

[Get ShapesXR on the Pico Store](https://www.picoxr.com/global/games/shapes-xr)

[Get ShapesXR on the Google Play](https://play.google.com/store/apps/details?id=com.Tvori.Shapes\&hl=en)


# Free or Paid

ShapesXR is FREE to download, offers a wide variety of tools and features, and is ideal for individuals who want to get started with spatial designs. You will have one space with the ability to edit, whether it is owned by you or shared with you. Once you reach this limit, you have a few options:

* delete your space.
* leave a space that was shared with you.
* reach out to us for a [paid plan](https://www.shapesxr.com/plans).

{% hint style="info" %}
If someone invites you to collaborate on their space and you have exceeded the limit, you can still view that space.
{% endhint %}

To harness ShapesXR's full potential, we recommend checking out the Business plan. This gives you access to unlimited spaces, more capabilities when importing and managing your assets and projects, and access by your team members. ShapesXR is enterprise-ready and compliant with the highest security standards. We are compliant with SOC 2, and all traffic and data are double-encrypted. Access to your valuable assets and projects is safely managed with an admin dashboard to set the team's role and permissions.

For more information make sure to check the [Plans page](https://www.shapesxr.com/pricing).


# Performance limitations

### **Multiplayer** <a href="#multiplayer" id="multiplayer"></a>

We recommend up to 8 people in the same space creating and communicating. There’s no hard limit on the maximum number of people in space, but you may see a drop in performance or have audio issues starting at about 12 people in space with you.

### **Space complexity** <a href="#space-complexity" id="space-complexity"></a>

It's up to you how complex your spaces are. We don't limit. The frame rate will go below 70 (and become unpleasant) if you have too many objects or the objects are too high-poly.

To ensure the performance is fine, we recommend having no more than 100 unique objects per scene, 300 unique objects per space, and up to 3000 objects total per space including duplicates.&#x20;

In our projects (from examples to prototypes), we aim to have no more than 300,000 polygons per scene. If, for instance, an imported object has 10,000 polygons, we keep no more than 30 of its copies in a scene. The same applies to strokes (something you can draw), the longest, most complex stroke (where it stops drawing automatically) will be around 10,000 polygons—so it’s better to have no more than 30 of them per scene.

### Importing files <a href="#import" id="import"></a>

Learn about import and its limitations [here](/import/limits-and-recommendations).


# Tutorial Series

Here you can find fully immersive tutorials with audio comments from Jeremy Casper - our resident instructor. Jeremy comes to ShapesXR with years of experience in the world of film production and graphic design. He is also a virtual reality artist, animator, and storyteller and leads weekly ShapesXR onboarding sessions for both new and experienced users.

You can also watch it in the Shapes App.

### Tutorial Series Intro

{% embed url="<https://youtu.be/YHPPU0Ga_Ek?feature=shared>" %}

### 1. Learn the Basics

{% embed url="<https://youtu.be/knFcjghqnow?feature=shared>" %}

### 2. Assets and procedural models

{% embed url="<https://youtu.be/Y_KKgrZtPtM?feature=shared>" %}

### 3. Building environments

{% embed url="<https://youtu.be/QUWSYTvJmvE?feature=shared>" %}

### 4. Storytelling with frames (Animation)

{% embed url="<https://youtu.be/seHCj_3spwo>" %}

### 5. Interactions and prototyping

{% embed url="<https://youtu.be/MxXnXrGlNzo?feature=shared>" %}

### 6. Attach to body

{% embed url="<https://youtu.be/d3NGABg6Jq0>" %}


# Basics

{% content-ref url="/pages/ZE7aXxWidNUblIIhcZvA" %}
[Lobby](/basics/lobby)
{% endcontent-ref %}

{% content-ref url="/pages/teQ27O0ohfuI8G2m0quO" %}
[Movement/Locomotion](/basics/movement-locomotion)
{% endcontent-ref %}

{% content-ref url="/pages/jikIeqMrh5zLtSW3g9TC" %}
[Frames (Former Scenes)](/basics/frames-former-scenes)
{% endcontent-ref %}

{% content-ref url="/pages/u4ApPt9WErbb6TNv11wv" %}
[Viewpoints](/basics/viewpoints)
{% endcontent-ref %}

{% content-ref url="/pages/DlB0qdtBuVSoCt2Nd4KP" %}
[Undo/Redo](/basics/undo-redo)
{% endcontent-ref %}

{% content-ref url="/pages/kbhbBDuByBxNx2eqTQZq" %}
[Environment](/basics/environment)
{% endcontent-ref %}

{% content-ref url="/pages/zS1mxLrOzL02jXYuhzzo" %}
[Settings](/basics/settings)
{% endcontent-ref %}

{% content-ref url="/pages/wA6iuV7i8Ix65QozqHzh" %}
[Space links](/basics/space-links)
{% endcontent-ref %}


# Lobby

In the Lobby, you can create, join & manage spaces and projects, change your name, and access samples and tutorials.

<figure><img src="/files/A0q8sq84sJk3yvKXnC0g" alt=""><figcaption></figcaption></figure>

### Your profile

Click on the arrow button next to your profile picture at the top left corner of the Lobby, and choose Profile to get to your profile. You can change your name here, check the email associated with the Shapes account, check your current plan, and meet the comparative table of plans to learn about Shapes features.

Also, you can click on the arrow button next to your profile picture to log out or quit the app.

### Spaces

**Recents**: All available spaces sorted by last viewed.

**My** **spaces**: All spaces you've created.

**Shared with me**: Spaces shared with you, if you ever entered an access code or followed a link and accepted a space invitation.

### How to create a space

Click on the "New space" button at the top right corner of the Lobby.

### How to join a space

Click on the "Join space" button at the top right corner of the Lobby and type the space code.

### How to return to the Lobby

While in a space, go to your hand menu and click on the Home button.

<figure><img src="/files/cUocTHg3O7xxy2f8XgI7" alt=""><figcaption></figcaption></figure>

### Actions with spaces

Click on the 3 dots button on the space card to open a space submenu with action available for this space:

* **Share**: get the space code and see the list of users who joined this space.
* **Rename**: change the space name.
* **Duplicate**: make a copy of this space.
* **Move to**: move the space to a project (more: [Project management](/dashboard/project-management))
* **Delete**: remove the space.

### Projects

On a [paid plan](https://www.shapesxr.com/plans) or a trial, you'll see the Project section - it contains all projects available for you. You can create spaces inside the projects or move existing spaces to them. More about projects - [here](/dashboard/project-management).

### Samples

This section contains examples of spaces made by the ShapesXR team.&#x20;

You can go to the sample, switch scenes, and try the [Play mode](/prototyping/interactivity-and-play-mode) if this sample is interactive.&#x20;

Create your editable space based on the sample - press the "Use this sample" button, and the sample's duplicate will be opened and ready to be edited.&#x20;

### Tutorials

In this section, you can find educational videos about working in Shapes. Click on the video and "Open in a space" button to learn by repeating actions directly in a space.


# Movement/Locomotion

### How to move

To move through the space press and hold the grip button on your non-dominant controller.

You can move one hand after the other - start with the non-dominant grip button and then hold the dominant grip button to continue moving.

<figure><img src="/files/Y5HWlyNOZB0E3K4IKBg8" alt=""><figcaption></figcaption></figure>

### How to rotate&#x20;

By holding both grip buttons you can rotate your view. Move the controllers in a circle while keeping the controllers opposite to each other.

<figure><img src="/files/onFAsS23JJaQ35g4n2Mh" alt=""><figcaption></figcaption></figure>

### How to scale

By holding both grip buttons you can scale your view relative to the scene. When you move the controllers closer together or farther apart, the scale of the scene will change relative to your viewpoint.

<figure><img src="/files/8by9oKeefd7ioxBapnFW" alt=""><figcaption></figcaption></figure>

## Teleportation

### **Turning on the Teleportation Tool**

To activate the Teleportation tool, tilt the stick up til the Teleportation tool is activated.&#x20;

Press the Trigger button on your controller to teleport to the destination you’re pointing at.&#x20;

<figure><img src="/files/LOgiVzXQ2pJOdrG4PPWg" alt=""><figcaption></figcaption></figure>

### **Teleportation to viewpoints**

You can point to any viewpoint to teleport to it.

<figure><img src="/files/nLbFPV3sQQsQx7ul14Gu" alt=""><figcaption></figcaption></figure>

### **Rotation**

You can rotate yourself by tilting the stick left or right.

<figure><img src="/files/726HwFAqi1LoYhM214lY" alt=""><figcaption></figcaption></figure>

### **Disable Teleportation Tool**

To disable the Teleportation tool, tilt the stick down.&#x20;

<figure><img src="/files/cFdpAGkDugrN0BM4nzsO" alt=""><figcaption></figcaption></figure>

<br>


# Frames (Former Scenes)

The Frames system can be used in a wide variety of ways. The different frames could represent variants of a design you would like to share, or even 3D frames of a storyboard illustrating an interaction, a customer journey, or a user flow.

**Open the Space menu -> Frames tab** to see the Frames list in your space. Select the frame in the list to get to it or **switch frames using the stick** in your non-dominant hand.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FNhuCzUPMSMbeR5qAk0Mk%2Fswitch%20frames.mp4?alt=media&token=10796f16-9ef6-44c2-ab08-e6457be709d3>" %}

To **duplicate the current frame,** click on the Plus button in the frames list or on the action bar on the Frame tab.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FdMzKODfWkHuUkXisXjuD%2Fduplicate%20frame.mp4?alt=media&token=0bcfaef3-18b5-4fe3-b228-24f51d8fe9ce>" %}

On the action panel, you also have the following **actions with frames**:

* Add an empty frame.
* Move the frame back and forth to rearrange the frames.
* Switch to/from [Background](#background-scene).
* Autoplay (for more info, go to [Animation](/animation)).
* Rename frame.
* Delete frame.

You also have the action panel on your non-dominant controller - **touch the stick** to make it appear.&#x20;

<figure><img src="/files/SqPW2eNrn4Z5mNDK2QWH" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
To **move objects between frames,** grab any object and switch the frame using the non-dominant hand stick.&#x20;
{% endhint %}

## Background scene

All objects in the Background scene are visible in all other frames. Making any changes to this special scene will propagate across all frames.

You can get this scene from any other frame, no matter what number it is.

To do it, click on the "Go to Background" button on the action panel on the Frames tab.

<figure><img src="/files/l3H3yK2tot8wLgSFnFYi" alt=""><figcaption></figcaption></figure>

You'll see a notification above the menu reminding you that you're on the Background scene. To switch from Background, you can use the same button on the action panel, or the "Return" button on the notification.

<figure><img src="/files/zMFN51z9Ndagwm4Vcl0t" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**To move objects to the Background scene,** use the [Object Inspector](/object-inspector): select an object (or objects), click on the 3 dots menu in the Inspector, and choose Move to Background.&#x20;

You can do the same **to move objects from the Background scene** to any other frame: while you're in the Background, choose the target frame with the non-dominant stick, select an object, click on the 3 dots menu in the Inspector, and choose Move to Foreground.&#x20;
{% endhint %}


# Viewpoints

**Viewpoints** let you review and present your projects and designs from a specific perspective.

Each space has one Viewpoint by default. When you enter a space for the first time, your position is aligned with this default Viewpoint.

<figure><img src="/files/FNNHjmpf5HHiZPD3nTQZ" alt="" width="563"><figcaption><p>This is what a viewpoint looks like in ShapesXR</p></figcaption></figure>

### Teleportation to Viewpoints

You can quickly jump to a Viewpoint’s position or switch between Viewpoints.

To teleport to a Viewpoint, select it in the **Viewpoints** list or on the **Viewpoint card**, then click the **Teleport button**. Selecting a different Viewpoint and teleporting to it allows you to switch between Viewpoints.

You can also use the **Teleport** **tool**: tilt the **dominant stick** forward, point at a Viewpoint, and press the **trigger**. When the Teleport tool is active, you can also choose a Viewpoint directly from the list.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FyXSUy0MvBfW8YO4Uq153%2Fteleport-ezgif.com-crop-video.mp4?alt=media&token=b81e591f-25b9-4a89-93bc-538860353101>" %}

### Using Viewpoints as a Camera

Viewpoints can be used as a virtual camera to frame and preview scenes exactly as you will see them. By placing and switching between viewpoints, you can quickly test composition, scale, and focus, making it easier to design and review spatial experiences from specific perspectives.

You can also **take screenshots** directly from those perspectives, making it easy to capture consistent visuals for reviews, documentation, or sharing progress with the team.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FUGfSBmBy10GFVuNXz1hw%2Fcamera-ezgif.com-crop-video.mp4?alt=media&token=184f40e9-5a8c-43ce-bfcd-ec6167150d66>" %}

### Adding Viewpoints

You can add more Viewpoints from the **Space menu** in the **Viewpoints** tab.\
A new Viewpoint is created at your current position.

You can also duplicate a Viewpoint the same way as other objects. Press the **non-dominant trigger** and pull out a new Viewpoint using the **dominant grip**, or grab the Viewpoint with the **grip** button and duplicate it using the **non-dominant trigger**.

To adjust a Viewpoint’s position, grab its head and move it to the desired location.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FVYsQJ6tl6n3KUW1dVGuM%2Fadding-ezgif.com-crop-video.mp4?alt=media&token=53d0f722-83b4-48df-884c-5cd0d12a7be2>" %}

### Other actions with Viewpoints

On the action panel in the Viewpoints tab, you also have the following options:

* **Move viewpoint back and forward** - you can change viewpoints places in the list.
* **Delete viewpoint** - remove selected viewpoint (please note, that you can't delete the last remaining viewpoint).
* **Capture screenshot** - allows you to take a photo from the selected viewpoint.
* **Set view** - set the selected viewpoint on your current position.

Click on the viewpoint's card in the list to get access to its menu:

* **Show space info in screenshot** - add space info to screenshots.
* **FOV** - allows you to adjust the field of view for your future screenshot. You can see it on the preview.
* **Take Screenshot** - take a photo, and it will appear in the Dashboard (My Files section -> Exported folder).

<figure><img src="/files/m3AHzmVzCMuzn8380iEf" alt=""><figcaption></figcaption></figure>

### How to Hide Viewpoints

You can hide Viewpoints. To do this, open the **Settings** menu, go to the **Viewpoints** section, and disable **Show Viewpoints in Space**.

{% hint style="info" %}
Viewpoints are always visible while the **Viewpoints** tab is open.
{% endhint %}

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FDIQyQkC4a0rwmLLdHn4S%2Fsettings-ezgif.com-crop-video.mp4?alt=media&token=ea160fe6-412e-4509-bdee-c580f3651279>" %}

### Viewpoints in Play Mode

In [**Play** **mode**](/prototyping/interactivity-and-play-mode), Viewpoints are hidden, but you can switch between them using the **dominant controller stick**.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FmBi1KUOdbztUy7zzNgkn%2Fplaymode-ezgif.com-crop-video.mp4?alt=media&token=790379d8-a991-41f3-b1c8-35bc1e8fafc8>" %}


# Undo/Redo

All actions in ShapesXR are auto-saved. The undo history is stored in a session.

Find the **Undo & Redo buttons on the non-dominant hand**.

<figure><img src="/files/j4KXcfKas3iz0VkzQ52f" alt=""><figcaption></figcaption></figure>

We don’t have a limit on the number of actions you can undo or redo.

In collaborative meetings, you can undo & redo only your actions, but everyone will see the changes.


# Environment

Go to the **Settings menu -> Environment tab** to adjust environment settings, including **light intensity, sun position, and shadows**. You can also choose and apply one of the built-in **skyboxes**.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FoWdbZ4aZjva92rzFfMAj%2Fenvironment-crop-video.mp4?alt=media&token=d90902e7-1436-4d62-9e90-e714485c1780>" %}

Turn off shadows by setting the shadow intensity slider to zero.

{% hint style="info" %}
If you want to cast shadows on a real object in your room, create a plane using a cube asset and apply a passthrough material to it.
{% endhint %}


# Settings

Go to the Settings menu to configure basic settings:

* **Show floor grid** - turn off the toggle to hide the floor grid.
* **Autoplay animations in edit mode** - turn off the toggle to disable animations in edit mode.&#x20;
* **Dominant hand** - choose which hand is dominant.
* **Performance mode** (Lower Quality) - turn on the toggle to improve performance.
* **Snapping settings** - you can choose the [snapping](/objects-manipulation/snapping) mode and snapping steps.
* **Show viewpoints in space** - disable the toggle to hide the [viewpoints](/basics/viewpoints).
* **Comfort mode** - enables tunnel vision during movement to help reduce motion sickness.
* **UI size** - adjust the hand menu size.
* **Units** - switch between meters and feet.

#### Prototyping section&#x20;

You can find here the settings for [Play mode](/prototyping/interactivity-and-play-mode):&#x20;

* **Input mode** - you can switch between controllers and hands in the Play mode.
* **Hover effect** - turn on/off the highlighting effect for objects with interactivity in the Play mode.
* **Effect strength** and **Duration** - you can set up the strength and duration of the hover effect for objects with interactivity.
* **Teleport to viewpoint** - turn it off if you don't want to be teleported to the viewpoint when the Play mode is activated.
* **Return to previous position** - turn it off if you don't want to be teleported to your previous position after the Play mode.

#### Holonotes section

* **Show holonotes in space** - turn it off if you want to hide [holonotes](/holonotes).
* **Teleport on play** - turn it off if you don't want to be teleported to the holonote's viewpoint during the playback.

#### Spatial anchor mode

Read more about it [here](/mixed-reality-and-passthrough/room-scale-mode-spatial-anchors).

#### **Sound distance**

You can set the maximum distance at which you can hear other users in the space. It is infinite by default, allowing you to hear every user in the space without any limitations.

While manipulating the slider, you will observe a sphere representing the sound propagation distance. You will be able to hear all users inside this sphere and won't be able to hear users outside of it.

<figure><img src="/files/qsKbMSxR5EtDe1g4Bsvh" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The sound setting is a shared setting for the space. Anyone with editor permission can control it, and it applies to everyone.
{% endhint %}


# Space links

In Shapes, you can create «portals» or links to other spaces. They allow you to be more flexible and hop between your various creations, designs stories, and ideas.

### How to create a space link

1. Open a space in which you want to place the space link.
2. Go to the Lobby and choose a space you want to link with. You can create a link to any space available in the Lobby.
3. Click on the 3 dots button on this space to open a submenu. Then click on the "Create a Space Link" button.
4. The space link will be added to your opened space. Now, you can use it by hovering over it and pressing the trigger button long to jump to this space.

<figure><img src="/files/TuYWGNPFom0sMANI1iwt" alt=""><figcaption></figcaption></figure>


# Objects Creation

{% content-ref url="/pages/yXuccaM4S3RsDOyHpVik" %}
[Tools and Toolbar](/objects-creation/tools-and-toolbar)
{% endcontent-ref %}

{% content-ref url="/pages/REzW0BauoXNSxKoUAMoU" %}
[Shape Tool](/objects-creation/shape-tool)
{% endcontent-ref %}

{% content-ref url="/pages/pX9iFJM5yvphrY90UTJy" %}
[Assets Library](/objects-creation/assets-library)
{% endcontent-ref %}

{% content-ref url="/pages/95pGdBHyPcS6I3jF3pNh" %}
[Draw tool](/objects-creation/draw-tool)
{% endcontent-ref %}

{% content-ref url="/pages/gfiD4EXr9RAZhqzcvvRg" %}
[Text Tool](/objects-creation/text-tool)
{% endcontent-ref %}

{% content-ref url="/pages/OM8j1NtpJmbqlIUtKRJm" %}
[Paint tool](/objects-creation/paint-tool)
{% endcontent-ref %}

{% content-ref url="/pages/AVUb9TURojVVIbs4zIph" %}
[Measure Tool](/objects-creation/measure-tool)
{% endcontent-ref %}


# Tools and Toolbar

There are various tools you can use in ShapesXR:

* [Text Tool](/objects-creation/text-tool)
* [Shape Tool](/objects-creation/shape-tool)
* [Draw Tool](/objects-creation/draw-tool)
* [Select Tool](/objects-manipulation/basic-manipulation)
* [Paint Tool](/objects-creation/paint-tool)
* [Measure Tool](/objects-creation/measure-tool)

To switch between them, **press the A/X button** on your dominant controller, choose one from the Toolbar, and release the button to activate the tool.

<figure><img src="/files/M1aSoWo79bkq2EF7KiBG" alt=""><figcaption></figcaption></figure>


# Shape Tool

Shape Tool allows the creation of different shapes with sharp and rounded corners and chamfers, bend modifier, etc.&#x20;

You can choose one of several presets to create the shape you need.

**To draw a shape:**

1. Press the A/X button on your dominant controller to open the Toolbar and select the Shape tool.
2. Choose a preset you need.
3. Press the trigger button and draw a figure of any size, then release the button.

<figure><img src="/files/fqNzDJLC5TnCJmPDcVlN" alt=""><figcaption></figcaption></figure>

You can also **pull a shape** from the list of presets by pointing to the preset you need, pressing the grip button, and pulling.

In addition to the preset, before creating a shape, you can **customize the color and material**. You can read more about it [here](/object-inspector/material-customization-in-object-inspector).

You can adjust this procedural object in the [Object Inspector](/object-inspector) - to open it, activate the Toolbar, choose the [Select tool](/objects-manipulation/basic-manipulation), hover over a shape, and press the trigger. The Object Inspector will open in the hand menu.

Available properties to experiment:&#x20;

* **Color and Material** (read more about these properties [here](/object-inspector/material-customization-in-object-inspector)).
* **Bend vector**: bending by Width and Height.
* **Size**: width, height, thickness.
* **Corner**: rounding corners and independently adjusting them.
* **Chamfer**: rounding vertical (by depth) edges.
* **Back Face**: on/off to generate back face. Useful for sky box and simple plane.

<figure><img src="/files/DD6bErib5jU6qRYCn4mC" alt=""><figcaption></figcaption></figure>


# Assets Library

To make the creation process faster, easier, and more intuitive, we have developed our own library of ready-made assets. For quick orientation, we collect them by themes and usage.&#x20;

To **open the Library**, go to the hand menu and click on the Assets icon -> Library tab.

<figure><img src="/files/7dzUYcIV9YdjPp0Gm5rl" alt=""><figcaption></figcaption></figure>

In the Library, you can find **ready-made models** that can be used in prototyping: architecture, characters, furniture, medicine, nature, etc; **3D Primitives** - various simple figures; **Procedural Primitives** - flexible assets to create a lot of shapes (more info about them and their properties here - [Shape Tool](/objects-creation/shape-tool)); UI Textures - ready-made samples of icons, lines, grids, etc.

The **My Files tab** contains your resources that can be added through the Dashboard. Read more about importing [here](/import).

### How to spawn objects from the Library

To use any of these assets, hover over the asset and grab it with the grip button, pull out to the space, then release the grip button.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FDPfTK7zJVeukDogMRZT8%2Fpull%20assets.mp4?alt=media&token=aa834ba7-6dd0-4f29-81a2-e896700ab9c8>" %}


# Draw tool

**To draw with a brush:**

1. Press the A/X button on your dominant controller to open the Toolbar and select the Draw tool.
2. Choose a brush preset you need.
3. Adjust the brush size by pulling the stick on your dominant hand to the right or left.&#x20;
4. Press the trigger button, draw something, and release the button.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FS47iaJBYoy9KgXtKRsqD%2Fdraw%20tool.mp4?alt=media&token=b76270bf-488a-421c-8f05-da884c65b2c0>" %}

In addition to the brush preset, before creating, you can **customize the color and material**. You can read more about these properties [here](/object-inspector/material-customization-in-object-inspector).

Select the brush object with the Select Tool and trigger button to open the [Object Inspector](/object-inspector) and change this brush's properties such as opacity, size, and position, color and material.


# Text Tool

Call the Toolbar (A/X button) and choose the Text Tool. In the opened menu you can set font size, alignment, font type, and color of the future text. You can change these options before or even while creating your text.

### **How to create text**

Create text in your space by holding the trigger button and marking a text area. After you release the trigger button, the keyboard will appear. Type your text on the keyboard and click on the Done button.&#x20;

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FaIVJMgyrv8AE0BoYtSf9%2Ftextcreation-crop-video.mp4?alt=media&token=c96e5fd4-f3cc-4e3c-9efb-ff2b356653a3>" %}

You can grab the keyboard by the special handle on the bottom using the trigger and move it to any convenient location in your scene.

To resize the Text box, activate the [Gizmo](/objects-manipulation/gizmo), then grab and drag the circle handles.

You can also add text on any surface. Bring the cursor to the surface, and when the circle appears, hold the trigger and mark a text area.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2F9PK7zBHS6nw4r4yLtGip%2Ftextonsurface-crop-video.mp4?alt=media&token=83b8b5dc-7054-4a83-ab36-bcaf64e097e0>" %}

### How to edit text

Select the text with the Select Tool and trigger button to open the [Object Inspector](/object-inspector) and change this text's properties, such as text type and size, alignment, position, color, and text itself.&#x20;

Click on the Text field so the keyboard appears and you can edit your text. Click on Done on the keyboard to apply changes.&#x20;

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FFQaVk19K6cbHY0ZbynwY%2Ftextediting-crop-video.mp4?alt=media&token=35962059-4bd4-43dd-81b1-b1f87643d989>" %}


# Paint tool

### Painting Objects in Your Scene

To start painting, open the **Toolbar** by pressing the A/X button, then select the **Paint Tool**. This tool allows you to customize objects with different **colors, opacities, and materials**.

### **How to Apply Color**

You can choose a color using:

* A **color palette**
* A **hex code**
* The **eyedropper** **tool** (to pick colors from existing objects)

To apply your selected color, simply hover over an object and press the trigger button.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FDcoQArt8lCcYpebAoibZ%2Fpainttool1.mp4?alt=media&token=2486b1de-58c7-4882-b57f-5b1351d6eb10>" %}

### **Adjusting Materials**

Open the [Object Inspector](/object-inspector), select the object, and navigate to the **Material tab**.

**Available Material Styles:**

* **PBR** – Reacts to light realistically.
* **Unlit** – Not affected by lighting.
* **Passthrough** – Creates a transparent, see-through effect.

**Blending Options:**

* **Opaque** – Solid, no transparency.
* **Alpha** **Blend** – Smooth transparency fade.
* **Alpha Cut** – Sharp-edged transparency.
* **Additive** – Increases brightness when blended.
* **Multiply** – Darkens and blends with the background.

You can also adjust **Metalness** and **Roughness** to fine-tune the material’s look.

### &#x20;**Using the Eyedropper Tool**

If you’d like to copy a color or material from another object, use the eyedropper tool:

1. Click the **eyedropper** icon to activate the picker.
2. Use **A/B** (X/Y for left-handed) on your dominant controller to set the mode:

* Pick Color Only
* Pick Material Only
* Pick Both

3. Click on the object with the desired color/material, and it will be applied immediately.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FKTWBydPX4vGeAIHikNnk%2Feyedropper2.mp4?alt=media&token=0703375b-8958-4275-a8e2-fd0029852474>" %}


# Measure Tool

The Measure Tool allows you to measure distances between objects or surfaces.&#x20;

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FYqYqOz4gseutnJqTslJm%2FMeasuring%20Tool%20Clip.mp4?alt=media&token=a25f285a-356c-47c9-85a4-1a33d0764029>" %}

#### How to create a measurement

You can create measurements in **Direct** or **Ray-based** mode.

1. **Open the Measure Tool**
   * Press the **A/X** button on your dominant controller to open the **Toolbar**.
   * Select the **Measure Tool**.
2. **Choose a Mode**
   * Select **Direct** (from the hand) or **Ray-based** (from a distance) mode in the menu.
   * You can also switch modes using the **stick** on your dominant controller.
3. **Create a Ruler**
   * **Option 1:** Press and hold the **trigger button** to draw a ruler of any size, then release to set it.
   * **Option 2:** Press the **trigger button** once to set the start point, then press it again to set the end point.

You can create rulers between objects, surfaces, or in empty space.

#### How to manage measurements

* All created rulers are listed in the Measure Tool menu.
* Point at a ruler in the list to highlight it in the scene — ShapesXR will display the connected measurement line.
* You can:
  * **Hide** the ruler on the current frame.
  * **Teleport** to the ruler.
  * **Delete** the ruler.

To hide all rulers at once, enable the **“Hide all rulers”** toggle in the menu.

#### Axis snap (perpendicular drawing)

You can press the **alt-trigger button** (the trigger button on your non-dominant controller) during the ruler creation to activate **axis snapping mode** - it snaps the endpoint to the nearest axis.

If you draw the ruler from an object, it activates **local axes**; otherwise, if you start drawing in empty space, it activates **world axes**.&#x20;

You can enable Axis Snap **by default** in the Measure Tool menu (toggle name: *\[insert toggle name here]*).

#### How to change a ruler's length

There are several ways to adjust the length of an existing ruler:

1. **Grab and Move**
   * Grab one of the ruler’s endpoints and move it to a new position.
2. **Edit via Label**
   * Select the **Measure Tool**.
   * Click on the ruler’s **label** to open the numpad and enter a new value.
   * Alternatively, point at the label and move the **stick** left or right to adjust the length.
3. **Edit via Menu**
   * Open the **Measure Tool menu**.
   * Find the ruler in the list, click on its **length field**, and change the value using the **numpad** (click on the field to call it) or **arrows**.

#### How to change measurement units&#x20;

You can switch between **meters** and **feet**:

* Open the **Measure Tool menu** or **Settings**, and choose your preferred unit.


# Objects Manipulation

{% content-ref url="/pages/Tfaof7MICDrEmM0qOd7i" %}
[Basic manipulation](/objects-manipulation/basic-manipulation)
{% endcontent-ref %}

{% content-ref url="/pages/m2qwXgWuZHEnYuF2E5FJ" %}
[Gizmo](/objects-manipulation/gizmo)
{% endcontent-ref %}

{% content-ref url="/pages/AhSoaHQ5S0vN6BaHB23A" %}
[Snapping](/objects-manipulation/snapping)
{% endcontent-ref %}

{% content-ref url="/pages/YqAo2idcrmn3EU1Adx3A" %}
[Grouping](/objects-manipulation/grouping)
{% endcontent-ref %}


# Basic manipulation

In ShapesXR, there are two interaction modes: **Direct and Ray**.

{% hint style="info" %}
There’s one simple rule: **use the trigger button to select objects and the grip button to grab them**.
{% endhint %}

### Direct mode

Move close to an object and press the trigger button to select it, or hold the grip button and pull to grab the object.

<figure><img src="/files/sh9ucrVnQPFf6ym57ruE" alt=""><figcaption></figcaption></figure>

You can easily select or grab small or flat objects using precise selection. Move close to the object until a dot pointer appears, then use the trigger button to select it or the grip button to grab it.

<figure><img src="/files/CZhJlbhieRv7v8Fr1KnZ" alt=""><figcaption></figcaption></figure>

Pull the controller stick to the right to increase the size of the selection sphere, allowing you to select or grab multiple objects at once.

<figure><img src="/files/rG9lSKDFhuiRJMr2x3Qr" alt=""><figcaption></figcaption></figure>

You can select multiple objects by holding the trigger button and touching them one by one, or by drawing a line across them.

<figure><img src="/files/PNVxTH2Px9nEmqwealGM" alt=""><figcaption></figcaption></figure>

Additionally, holding the non-dominant trigger button lets you add or remove objects from the selection one by one.

<figure><img src="/files/7EIdi6F5BOF3usWF6qMa" alt=""><figcaption></figcaption></figure>

### Switching between interaction modes

Pull the controller stick fully to the left to activate Ray interaction mode.

<figure><img src="/files/a64GRkHzPMP13f6TGNuD" alt=""><figcaption></figcaption></figure>

Or you can use your non-dominant controller to adjust the selection mode on the controller.

<figure><img src="/files/VXy2EEzYDyJW19z3At9c" alt=""><figcaption></figcaption></figure>

### Ray mode

Ray mode lets you select or grab objects from a distance.&#x20;

Hover over an object, then use the trigger button to select it or hold the grip button to grab it.

<figure><img src="/files/M9ZOUIaFDEhVN6oWd1Sg" alt=""><figcaption></figcaption></figure>

You can move objects closer or farther by pushing the stick forward or pulling it back.

Hold the trigger button and touch objects with the ray to select multiple objects.

While selecting, holding the non-dominant trigger button lets you add or remove objects from the selection one by one.

<figure><img src="/files/N6aABCFxnZC5ovC7PXDD" alt=""><figcaption></figcaption></figure>

### Deleting&#x20;

To delete an object, grab it in any interaction mode and throw it away.

<figure><img src="/files/6iQsZiQRTYAjLA042K0t" alt=""><figcaption></figcaption></figure>

You can also delete objects via the Object Inspector - read about it [here](/object-inspector).

<figure><img src="/files/KoomTvWE5Qg7ViiWGqUU" alt=""><figcaption></figcaption></figure>

### Duplication

While holding an object, press the trigger button to duplicate it.

To duplicate an object without moving the original, hover over it, press the non-dominant trigger button, and pull the duplicate using the grip button.

<figure><img src="/files/hFtp6C5wi785CIW3NPna" alt=""><figcaption></figcaption></figure>

You can duplicate and copy objects via the Object Inspector - read about it [here](/object-inspector).

### Scale

In any interaction mode, you can scale an object by shifting the stick to the right or the left.

<figure><img src="/files/BYEh5wgynrPFqdJxMQvR" alt=""><figcaption></figcaption></figure>

You can change object size and position via the Object Inspector - read about it [here](/object-inspector).&#x20;

Additionally, you can use [Gizmo](/objects-manipulation/gizmo) for this purpose.&#x20;


# Gizmo

The Gizmo lets you **move, rotate, and scale objects with precision**.

You can enable or disable the Gizmo by **pressing the B/Y button** on the controller when an object is selected, or via the Select Tool menu or the Object Inspector.

You can also choose the **coordinate system** for Gizmo operations: **Local or World**.

<figure><img src="/files/qn89IU34JucP9hDHW1AX" alt=""><figcaption></figcaption></figure>

You can interact with Gizmo handles either directly or with the ray. Simply hover over a handle and grab it using the grip button.

For easier adjustments, each handle can snap to snapping points or surfaces. You can enable snapping and set the step value in the Select Tool menu or in Settings. Read more about snapping [here](/objects-manipulation/snapping).

<figure><img src="/files/PCFbjFfSTtrkvIQNryps" alt=""><figcaption></figcaption></figure>


# Snapping

**Snapping** helps you position objects with precision by aligning them to the world grid or seamlessly attaching them to the surfaces of other objects. This makes layout creation faster, cleaner, and more accurate.

To enable snapping, press the **Grid** button while holding an object. You can also activate it from the **Select tool** menu or via **Settings**, where you can choose the snapping mode that best fits your workflow.

### **Snapping Modes**

There are three snapping modes available: **World**, **Object**, and **All (World + Object)**, giving you flexibility in how objects align within your scene.

For even greater precision, you can adjust the **grid size** to match the level of accuracy your layout requires.

Use **World Mode** to snap objects directly to the **world grid**, and **Object Mode** to snap an object to the surface or anchor points of another object. When you move an object close to another, available **snap points** appear, making it easy to align objects precisely.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FJEg7E90MQ429P4HM6Eiu%2Fsnapping.mp4?alt=media&token=e4be185f-0692-4c20-81ad-7d6cc7c344cd>" %}

### **How to Draw Straight Lines**

With **snapping enabled**, the **Draw tool** lets you create perfectly straight lines or precisely connect objects with lines, ensuring clean and accurate results.

### **Snapping to Surfaces**

Grab an object and move it close to the surface of another object or the floor until the **circular helper** appears. Press the **Magnet** button on your controller to snap the object to the surface. Press the button again to rotate the object while it remains snapped, then release the **trigger** to confirm the placement. You can snap an object to a surface at any time using the **Magnet** button, even when snapping is turned off.

<figure><img src="/files/SyLmukf7bHrNf0AHgMGQ" alt=""><figcaption></figcaption></figure>


# Grouping

**Grouping** allows you to combine multiple objects and interact with them as a single unit, making it easier to move, rotate, or scale complex setups.

To create a group, select the objects and press the **Group** button on your controller. To ungroup them, press the same button again.

You can also group objects using the [**Object Inspector**](/object-inspector): select the objects and click the **Group/Ungroup** button.

When objects are grouped, you can double-click any object inside the group to access and edit it without ungrouping. The selected object can be moved and modified in the Inspector while remaining part of the group.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2F4tCPmsO5LNUva8BrjAAp%2Fgrouping-crop-video.mp4?alt=media&token=81d4127c-639d-4ab7-b020-27b23a642ceb>" %}


# Object Inspector

The **Object Inspector** provides quick access to object settings, allowing you to edit objects after creation and manage their state in the space with greater precision.

To open the Object Inspector, select an object using the **Select** tool. When you hover over the Inspector, a line appears showing its connection to the selected object, making it easy to identify which object you’re editing.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2F5zeGCnmjA8596tBaSB4l%2Fobject%20inspector.mp4?alt=media&token=2a2f02a8-a616-4d4a-b9c8-51f98cfcc6fb>" %}

### Object tab

In the first tab, you have the action bar with **quick actions**:&#x20;

* Copy
* Paste (Properties, Materials, Transform, etc)
* Group/Ungroup (in case of multiple object selection)
* Lock/Unlock
* Cut
* Delete
* 3 dots menu for more ([Move to Background](https://learn.shapesxr.com/basics/frames-former-scenes#background-scene), [Export](/export-and-sharing/export-as-3d-model) the object, etc).

You can adjust these **properties** in the Inspector (their presence depends on the object type):

* [Gizmo](/objects-manipulation/gizmo) on/off.
* Visibility on/off (set the desired visibility percentage by adjusting the value, or click the Eye icon to hide the object in the current frame).
* [Color and Material](/object-inspector/material-customization-in-object-inspector).
* [Attach to body](/prototyping/attach-to-body) section.
* Transform section (size and position of the object).
* Bend, Size, Thickness, Corner, Chamfer, Back face, and Preset for Shapes.
* Text type, Font size, Horizontal alignment, and Text value for Text objects.
* Set view, Show space info in the screenshot, FOV, Take screenshot button, Teleport to the viewpoint for Viewpoints.
* Sync with Figma for [Figma files](/import/figma-integration).

### Prototype tab

You can add **interaction** to the selected object and view the list of existing interactivities that use this object as the trigger.

For more information about interactions, visit [Prototyping](/prototyping).


# Material Customization in Object Inspector

### How to Access and Edit Object Material Properties

1. Press the A/X button on your dominant controller to open the Toolbar and select the [Select tool](/objects-manipulation/basic-manipulation).
2. Hover over an object or a group of objects with the Select tool and press the trigger to select it.
3. In the hand menu, you'll see the Object Inspector open.

<figure><img src="/files/R5BprGnOrOaHEv2HlKzE" alt=""><figcaption><p>Material Section in the Object Inspector</p></figcaption></figure>

### Material Selection

The Material section lets you choose a material from the built-in library. It includes various predefined materials that simulate surfaces such as stone, bricks, and more.

**Click the material icon** to open the material library and choose the base material for the object.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FAgy1GlnOtGaXdDXbzela%2Fselectmaterial2-ezgif.com-crop-video.mp4?alt=media&token=66e9d4b5-0994-4897-84e1-5ab2726d0c4e>" %}

{% hint style="info" %}
The PBR Material Library is based on [Poly Haven](https://polyhaven.com/). All materials are completely free under the [CC0](https://polyhaven.com/license) license, which means you can use them for any purpose, including commercial projects, without any restrictions.&#x20;
{% endhint %}

#### Visibility Control

The Opacity percentage value controls the transparency of the material.

* Setting a lower opacity makes the material more transparent, while a higher opacity makes it more solid.
* This feature is useful for creating glass-like effects, semi-transparent surfaces, or adjusting material depth perception.

Adjust the transparency, defined as a percentage, by pulling the field with the trigger.&#x20;

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2F60oIZiHME0ZlEN3cVuSk%2Fselectvisablity-ezgif.com-crop-video.mp4?alt=media&token=f8004163-d518-4fb6-a9b7-d20c7f455ac0>" %}

#### Color and Texture Customization

You can adjust the color of the selected material using the color palette.&#x20;

**Click on Hex value** and type a hex code you need, or you can **click on the color preview** to open the color palette and select the color there.&#x20;

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FBvZVXSpy37duz0JRTxHK%2Fselectcolor-ezgif.com-crop-video.mp4?alt=media&token=b30a404f-1214-4925-964f-e34a1b80faf6>" %}

Next to the color selector, there is an icon that opens a **library of preset textures**. This allows you to apply predefined textures to enhance the visual appearance of the material.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FPtdvLbgwoDOKf1HguDZJ%2Fselecttexture-ezgif.com-crop-video.mp4?alt=media&token=b56d9b37-df33-4723-b574-e27ed4bcf9dc>" %}

### Advanced Material Settings

For more advanced customization, open the **Material Settings section**. There, you can further tweak additional textures and other visual properties.

<figure><img src="/files/khc2LPC0NlUt0TrsyxUs" alt=""><figcaption><p>Advanced Material Settings in the Inspector</p></figcaption></figure>

* **Style**: Defines the shading model of the material and how light interacts with the surface.\
  &#x20;  *PBR* – Reacts to light realistically.\
  &#x20;  *Unlit* – Not affected by lighting.\
  &#x20;  *Passthrough* – Creates a transparent, see-through effect.
* **Roughness**: Controls the surface smoothness. Higher values create a matte, diffuse look, while lower values make the surface glossier and more reflective. A texture can be assigned for varying roughness across the object.
* **Metalness**: Determines how metallic the surface appears. Higher values make it look more like metal, while lower values create a more plastic or matte look. A texture can be applied for detailed metal effects.

<figure><img src="/files/Qjc0LG05h8KkI1uiDJUL" alt="" width="563"><figcaption><p>Metalness and Roughness ratio in PBR</p></figcaption></figure>

* **Normal Map**: Adds surface details by simulating small bumps and dents without changing the geometry. A texture can be used to add fine details like scratches or grooves.
* **AO Map** (Ambient Occlusion): Enhances shading by simulating soft shadows in crevices and corners. Adding an AO texture can increase depth perception.
* **Emission**: Controls the self-illumination of the material. You can choose a color and set an emission texture to make the object appear as if it is glowing.
* **Blend Mode**: Defines how the material blends with the environment, such as Opaque for solid objects or Transparent for see-through materials.\
  &#x20;  *Opaque* – Solid, no transparency.\
  &#x20;  *Alpha Blend – Smooth transparency fade.*\
  &#x20;  *Alpha Cut* – Sharp-edged transparency.\
  &#x20;  *Additive* – Increases brightness when blended.\
  &#x20;  *Multiply* – Darkens and blends with the background.
* **Map channel:** Choose how metalness, roughness, and AO are mapped:
  * **Base:** separate textures (Metalness, Roughness, AO).
  * **ORM:** single packed texture (R=AO, G=Roughness, B=Metalness) - Packed GLTF/GLB Standard

{% hint style="info" %}
Read more here - [Base vs ORM for Imported models](https://learn.shapesxr.com/object-inspector/pages/gA1Rd48GZZQTmQTAU2Un#texture-layout-base-vs.-orm)
{% endhint %}

* **Effects**:
  * **Wireframe**: Displays the object as a wireframe, showing only the edges of its geometry.\
    &#x20;   *Value* (0–100) – Controls the visibility of the wireframe. 0 means off, 100 means fully visible.

    &#x20;   *Color* – Defines the wireframe color. Enabled only when the value is greater than 0.
  * **Fresnel:** Adds a glowing edge effect based on the camera angle, often used to create a soft rim light around the object.\
    &#x20;   *Value* (0–100) – Controls the strength of the Fresnel effect. Higher values make the glow more pronounced.

    &#x20;    *Color* – Sets the rim glow color. Enabled only when the value is greater than 0.&#x20;
* **Texture Transform**

  * *Scale (X, Y)*:&#x20;

  &#x20;       Changes the size of the texture on the object's surface.\
  &#x20;       1:1 keeps the original size.\
  &#x20;       Higher values repeat the texture; lower values stretch it.

  * *Offset (X, Y)*:

  &#x20;       Shifts the texture’s position along the surface.\
  &#x20;       Useful for fine-tuning how the texture aligns.

  * *Rotation*:

  &#x20;       Rotates the texture in degrees, around its center point.\
  &#x20;       0 = no rotation, positive values = clockwise rotation.


# Animation

Animate your prototype

{% content-ref url="/spaces/V5IFh3rk5kqfCwJPPYhE/pages/dpAYidkL3e1obTfvKHKA" %}
[Animation Basics](/animation/animation-basics)
{% endcontent-ref %}

This section outlines the core concepts of the animation system in ShapesXR — including frames, transitions, easing, autoplay, and editor behavior — with technical clarity and visual examples.

{% content-ref url="/spaces/V5IFh3rk5kqfCwJPPYhE/pages/hYKaHz06TNxdi0kSvx9E" %}
[User Guide & Tips](/animation/user-guide-and-tips)
{% endcontent-ref %}

This guide walks you through using the new animation feature in ShapesXR, which allows you to create smooth transitions (tweening) between different frames of your 3D scene. By defining multiple frames with objects in different positions or properties, you can let the system automatically animate the changes — moving objects, adjusting visibility or opacity, changing colors, and more — to bring your prototypes to life.


# Animation Basics

## Frames

Animations are based on differences between frames (former scenes). The system interpolates changes to objects such as position, color, opacity, and visibility.

&#x20;Objects persist across all frames, even if hidden in a particular one.

**Creating Frames:**

* ***Quick-Access Carousel:*** Use the **+** button to duplicate the current frame to the end of the list.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2Fqj1nEQJMedtysnRXWn2R%2Fquick%20access%20carousel.mp4?alt=media&token=65ef7511-7bc0-4a3b-85ac-1230302fbaeb>" %}

* ***Quick-Access Action Bar:*** Activate the action bar by touching the stick and use the **+** button to duplicate the current frame, or the **Create empty frame button** to add a new one.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FZpv46Yj4cV9TZBTLYM0h%2Faction%20bar.mp4?alt=media&token=e51254a7-a1f7-4c56-9e7a-effcd990730f>" %}

* ***Frames Tab:*** Navigate to **Menu > Space > Frames Tab**. Frames can be renamed, duplicated, deleted, and reordered from this panel, too.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FgrCKcRU8xSXQMz1jlDLu%2Fframes%20tab.mp4?alt=media&token=20e217a2-2da1-4d61-ae09-09ca7a1ceaa3>" %}

Frame switching is available through the carousel, the Frames list, or controller input. Object states are automatically preserved per frame.

## Transitions&#x20;

When you have at least two frames, ShapesXR can automatically animate (tween) the differences between one frame and the next or previous.&#x20;

Transitions apply to any property difference, not just movement. You can animate color, materials, and even object presence.

Go to **Space menu > Frames tab**. You can see the created frames here. If you point and **click between two frames**, the Transition menu will open. It allows you to set the animation between these two frames, and you can use the default transition or set a custom.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2Fg7GWfTDbVhxuQEj6eWRt%2Ftransition%20menu.mp4?alt=media&token=332709dd-ade9-4cea-95d0-1a32ff58baff>" %}

Enter Play mode to see the tween in action. When you advance from one frame to another (using the controller or other trigger), the system smoothly animates the changes: objects will move to their new positions, colors will shift, visibility will toggle, and so on, all over the specified duration.

### Transition Types (Easing Curves)

Transitions define how the changes between two frames are animated. ShapesXR provides several types of easing curves for transitions, which affect the timing and feel of the motion.

* **Instant:** No animation at all – the scene snaps to the next frame immediately (a hard cut).
* **Linear:** A straight, constant interpolation. The change happens at a steady, uniform rate from start to finish (no acceleration or deceleration).
* **Cubic:** A smooth cubic easing curve. This creates more natural motion, with acceleration or deceleration (depending on easing direction, e.g. ease-in or ease-out). It’s one of the commonly used easing types for pleasing animations.
* **Expo (Exponential):** An easing curve that starts or ends very gradually but changes speed dramatically. For example, an “ease-out expo” will start fast and then very slowly finish the last part of the animation
* **Circ (Circular):** A circular easing curve, which produces gentle, smooth motion that mimics the physics of objects moving in a circular path (slow start or finish with a natural feel).
* **Back:** An overshooting curve where the animation goes slightly beyond the target value and then “backs” into place. This creates a small rebound effect, adding a playful or dynamic overshoot to the motion.
* **Dissolve:** A crossfade transition. The outgoing frame fades out while the incoming frame fades in, instead of moving elements along a path. This is useful for smoothly transitioning when position movement isn’t desired, or for emphasizing a complete scene change.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2F8m5ar52YJdrPCWxg5luT%2Ftranstion%20types.mp4?alt=media&token=69033e89-90c1-40ba-ade4-7390bebe1c0d>" %}

### Easing Direction

For transition types that involve easing (Cubic, Expo, Circ, Back), you can specify an easing direction to control the acceleration pattern.

* **Ease In:** The animation starts slowly and then speeds up towards the end (the motion eases into the transition).
* **Ease Out:** The animation starts quickly and then slows down as it completes (the motion eases out of the transition).
* **Ease In-Out:** A combination of both – the animation starts slow, accelerates in the middle, and then decelerates at the end. This gives a smooth start and finish.

{% hint style="info" %}
Instant, Linear, and Dissolve transitions don’t use easing directions (since Instant has no motion, Linear is constant, and Dissolve is a uniform fade). In the UI, if those types are selected, the easing direction option will be disabled or not applicable.<br>
{% endhint %}

### **Duration**

The transition duration can be customized according to your preference. The default setting typically displays a duration, such as 300 ms or 0.3 s. Modifying this value enables you to achieve a slower or faster animation effect. For instance, setting the duration to 1000 ms (1 second) extends the transition, which can be effective for a dramatic effect, while a duration of 100 ms results in a swift transition.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FBnnoYOKdWhCnAsypBFGh%2Fduration.mp4?alt=media&token=49840a5b-6a29-470e-afee-4846bc5e60eb>" %}

After adjusting the type, easing, or duration, close the Transition Settings panel (click the X). The new settings are saved for that transition. You can immediately test the effect by going into Play mode and triggering the frame change again. The animation will now use your customized settings. If it’s still not perfect, you can tweak these settings further until you’re satisfied.

### Autoplay

Autoplay cycles through frames automatically, simulating a continuous playback loop.

* **Enable:** Toggle in the **Scenes toolbar**. Applies at the space level.
* **Behavior:** When active, entering Play mode triggers sequential animation through all frames. Upon reaching the last frame, playback restarts from the first.
* **When Disabled:** User must advance frames manually using the controller, UI carousel, or interactive triggers.

Autoplay respects all transition types, durations, and easing settings.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FQe6h6LAK0MPt1LWM675i%2Fautoplay.mp4?alt=media&token=0a1fcad8-0faa-4cc8-88fe-d964a4f14455>" %}

### Animation Toggle for Edit Mode

ShapesXR includes a toggle in the Settings Menu that controls whether transitions animate while switching frames in Edit mode.

* **Enabled:** Transitions will play in Edit mode when switching frames. Useful for adjusting animations without needing to enter Play mode.
* **Disabled:** Frame changes are immediate, with no animation. Ideal when speed is needed - for example, while building a layout or populating content.

Use this toggle to balance workflow speed and animation accuracy during editing.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FZAZQ5pJs0gcWmTYrcB3C%2Fautoplay%20settings.mp4?alt=media&token=6c2764db-5c55-4d58-b234-f7ba4d06413a>" %}


# User Guide & Tips

This guide helps you bring your designs to life using ShapesXR's animation system. With just a few frames and simple edits, you can create smooth, dynamic transitions without needing to code.

### Step 1: Create Frames

You need at least two frames to animate. How to add a new frame: read [here](/animation/animation-basics#frames).&#x20;

{% hint style="info" %}
Duplicate your frame when you want to preserve most content but animate just a few differences.
{% endhint %}

{% hint style="success" %}
Each frame you create is like a new state of your design. You can switch to any frame at any time to edit that state. Use the Frames list or flick the non-dominant hand’s stick left/right to navigate between frames quickly. For example, Frame 1 might be your “Home Screen” state, Frame 2 could be an “Options Menu” state, Frame 3 a “Settings Panel” state, etc. Once you have multiple frames set up, you’re ready to create animations between them.

As your project grows, keep your frames organized. Use clear names for each frame (e.g., “Intro Scene”, “Menu Opened”, “Menu Option 1 Selected”, etc.). This will help you manage transitions and interactive triggers without confusion.
{% endhint %}

### Step 2: Animate with Object Changes

With two or more frames prepared, ShapesXR can animate the transition from one frame to the next. The animation system will automatically interpolate changes in object properties between frames. Here’s how to set up and preview a simple animation step-by-step:

\
1\.  Design Frame 1 (Starting State): Begin by arranging your scene in the first frame. Place objects where you want them, and set any properties (position, rotation, scale, color, opacity, etc.) for this starting state.&#x20;

*Example: In Frame 1, you place a cube on the left side of your space and color it blue.*

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FDK3mWL7ANgKoyR7NABPR%2Fstep1.mp4?alt=media&token=61351690-012a-4407-9aba-16380a34962c>" %}

2. Design Frame 2 (Ending State): Now add a second frame, which will be the next state in your animation. When you create Frame 2, it may start as a duplicate of Frame 1’s content (if you used the duplicate function) or as a blank slate (if you added a new empty frame). Modify this frame to create the ending state of your animation. Move or transform objects and change their properties as needed.&#x20;

*Continuing the example: In Frame 2, you take that same cube and move it to the right side of the space, and perhaps change its color to red. You can also decide to add new objects in Frame 2 or remove objects that were in Frame 1 – the system will handle those appearances/disappearances in the transition.*

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FGGgtgXaOrqgoPtVb2rYm%2Fstep2.mp4?alt=media&token=b0afe74f-9cbf-4bda-b9e3-bfac20ee8eac>" %}

{% hint style="success" %}
&#x20;Want to fade an object in? Set its visibility to 0% in Frame 1 and 100% in Frame 2. Animate a pop-in? Set scale to 0 in Frame 1 and 1 in Frame 2.
{% endhint %}

### Step 3: Refine Transitions

Once you have two frames with differences between them, ShapesXR automatically generates an animation link. In the Frames menu, you’ll notice a line or connector between Frame 1 and Frame 2. This connector is usually labeled with a small time value like “0.3s”, indicating there is a 0.3-second transition animating the changes from Frame 1 to Frame 2. By default, ShapesXR might apply a standard easing (for example, a cubic ease-out) for this tween, giving you a basic smooth animation without any extra work.

You can see the available types of transitions and easing [here](/animation/animation-basics#transitions).

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FfKMd6nB59C5cD44c1oub%2Ftransitions.mp4?alt=media&token=4d61983b-5153-4065-992c-b2a154238520>" %}

{% hint style="success" %}
Combine **Back + InOut** + 500ms to create a fun bounce-in effect.\
Use **Dissolve** for clean state changes, like onboarding screens.
{% endhint %}

### Step 4: Preview and Iterate

Enter **Play mode** (controller stick press or toolbar button). Use the thumbstick to navigate frames and preview animations.

{% hint style="success" %}
Test with different transition settings to see what feels best. The same movement can feel snappy or soft depending on the easing.
{% endhint %}

*Continuing the example: In Play mode, advance to the next frame using your controller (for instance, flick the stick to the right to go from Frame 1 to Frame 2). You should see the cube move from the left side to the right side of your space smoothly over a fraction of a second. Its color will transition from blue to red during the move. Any other changes you made (such as objects appearing/disappearing or resizing) will also animate accordingly. This is the tweening in effect – the system is interpolating all the differences between the two frames over the duration of the transition. If you have Autoplay enabled (more on that later), the system would automatically play this transition without requiring you to flick the stick.*

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2F3JG4Hghik17AIRW7kugU%2Fplaymode.mp4?alt=media&token=c44fae43-e100-463b-8432-b0aa49f48469>" %}

{% hint style="success" %}
If the transition doesn’t look quite right or something isn’t as expected, exit Play mode to make adjustments.\
Test in Play Mode often! The way things animate in Play mode is sometimes hard to judge just by scrubbing through frames in edit mode. It’s a good habit to frequently jump into Play mode and experience the transitions as a user would from the viewpoints. This lets you catch if something feels too fast, too slow, or jarring, and then you can adjust accordingly (either by changing transition settings or altering the frame content).

Remember, you can always add more frames for additional steps in a sequence or remove frames if you want to simplify the animation.
{% endhint %}

### Step 5: Enable Autoplay

Autoplay is a feature that automatically plays through your frames in sequence, looping back to the beginning after the last frame, without requiring manual input for each transition. It’s useful for showcasing your prototype in a continuous loop (for instance, during a presentation or on a display).

With Autoplay on, as soon as you enter Play mode, the system will progress through Frame 1 to Frame 2 to Frame 3, and so on, using the defined transitions at each step. Upon reaching the final frame in the sequence, it will loop back to Frame 1 and continue. This looping will continue indefinitely until you stop it.

Perfect for:&#x20;

* Kiosks
* Showcases
* Background UI flows

{% hint style="success" %}
Combine Autoplay with Dissolve to create ambient loop sequences or dynamic backgrounds.
{% endhint %}

### Step 6: Add Interactive Transitions

You can use [interactive triggers](/prototyping) to navigate frames as well. For example, you might have an object with an “On click -> Go to frame” interaction. These triggered frame changes will utilize the transition you’ve set up for the interaction. It can differ from the transition set for the destination frame in the Frames tab. This is great for creating interactive menus or branching scenarios where the user’s choice leads to another frame with a nice, smooth transition.

Make your animation interactive by assigning frame jumps to objects:

1. Select an object and open the Interactivity tab.
2. Add a trigger (e.g., **On click**).
3. Assign the **Go to Frame** action, select the destination frame, and set transition parameters like type, easing, and duration.

ShapesXR will play the specified transition if the frame switching is triggered via the object clicking, otherwise, when switching frames manually or autoplay, the transition specified in the Frames tab will be played.

*Example: Create a button that slides in a menu by transitioning from the "Main" frame to the "Menu Open" frame.*

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FdLgDwZcdg4F4QUOfNITy%2Fbutton.mp4?alt=media&token=5e311f32-8533-4d1f-8f37-9f405d79a65d>" %}

{% hint style="success" %}
Combine with **Back easing** to give UI a lively, responsive motion.

Instant Transitions for Specific Cases: If you want certain frame changes to be immediate (maybe as a stylistic choice or for usability), set their transition type to Instant (for example, if you want instant frame switches for utility buttons (e.g., closing modal windows).&#x20;

A common use case: you might have a looping autoplay animation but want to give the user the option to jump abruptly to a specific frame — like a main menu — without having to watch the entire animation. By using an interactive trigger with “Go to frame” and setting the transition to Instant, you create a direct cut.
{% endhint %}

### Step 7: Animation Toggle in Edit Mode

In the **Settings**, there's a setting to **toggle animation playback in Edit mode**. This option controls whether transitions are animated when switching frames during editing.

* **When Enabled:** Transitions play when switching frames in Edit mode — useful for fine-tuning motion timing and effects.
* **When Disabled:** Frame switching becomes immediate — better for speed and efficiency when editing or adding content.

{% hint style="success" %}
Turn off the toggle when setting up or populating complex layouts.&#x20;

Turn it on when refining animations, so you can preview the motion without switching to Play mode.
{% endhint %}

### Bonus Effects and Tricks

* **Slide In from Side:** Move an object far offscreen in Frame 1, bring it into place in Frame 2.
* **Fade Between UI States:** Use **Dissolve** between frames where visibility/opacity differs.
* **Zoom In Effect:** Set the camera or container object to scale up between frames.
* **Scene Switch:** Fade everything out (set opacity 0) and fade in new content in the next frame.
* **Looping Element:** Combine a few frames with slight object adjustments, enable Autoplay.


# Collaboration

**ShapesXR** is a collaborative design tool built for remote XR teams, enabling seamless brainstorming and ideation in **Mixed Reality**. It supports rapid prototyping, instant sharing with teammates, and real-time co-editing, all within a shared immersive space.

ShapesXR brings teams together effortlessly:

* Create and collaborate with other users on any plan, [free or paid](/getting-started/free-or-paid), with flexible permission levels.
* Overcome distance barriers and work seamlessly with teammates from anywhere in the world.

### How to Join a Collaboration <a href="#how-to-join-a-collaboration" id="how-to-join-a-collaboration"></a>

To join a collaborative session, users must have access to the same **space**. All users within the same **project** automatically have access to every space in that project.

You can also share a space directly using a **space code** or **share link**, available in both the **Dashboard** and the **VR app**.

<div><figure><img src="/files/63R308r8jsx7sluXlRbw" alt="" width="476"><figcaption><p>Space code in the Web editor (the same in the VR app) </p></figcaption></figure> <figure><img src="/files/cTYaf4XmMa23KXJkDG29" alt="" width="563"><figcaption><p>Space code in the Dashboard</p></figcaption></figure></div>

Simply share the **space code** or **share link** with your teammates. They can enter it in their **Dashboard** or **VR app** to join you directly in the space.

For more details about sharing spaces, see the [**Sharing Spaces**](/export-and-sharing/sharing-spaces-via-app-web) section.

### Avatars and Appearance <a href="#avatars-and-appearance" id="avatars-and-appearance"></a>

During a collaborative session, you can see each participant’s **avatar** (if set in Oculus) or **headset**, along with a label showing their **name** and **current frame number**.

To support user comfort and safety, avatars are automatically hidden in certain situations:

* When users are very close to each other.
* When users are working at different scales.

You can click another user’s **frame label** to instantly **teleport to their frame**.

### Undo/Redo while Collaboration <a href="#undo-redo-in-a-collaborative-session" id="undo-redo-in-a-collaborative-session"></a>

During collaboration, you can only **Undo** and **Redo** actions that you personally performed.

### Audio Settings <a href="#audio-settings-for-a-collaborative-session" id="audio-settings-for-a-collaborative-session"></a>

By default, you can hear all users within a space during a collaborative session.

If you don’t want other users to hear you, you can **mute your microphone** using the **Mic** button in the main menu.

You can also adjust the **sound propagation distance** to hear only users who are nearby. For more details, see the [**Audio Settings**](https://learn.shapesxr.com/basics/settings#sound-distance) section.

### Limits and Recommendations <a href="#limits-and-recommendations" id="limits-and-recommendations"></a>

For optimal performance, a collaborative session should include no more than **15–20 users**.

To ensure a smooth and uninterrupted collaboration experience, we recommend using a **stable internet connection**.


# Mixed Reality & Passthrough

{% content-ref url="/pages/xOtIP87BS46T7dLFZcPC" %}
[MR mode (Passthrough mode)](/mixed-reality-and-passthrough/mr-mode-passthrough-mode)
{% endcontent-ref %}

{% content-ref url="/pages/YvMh35ntpPdFN0ISxeTs" %}
[Room-scale mode (Spatial Anchors)](/mixed-reality-and-passthrough/room-scale-mode-spatial-anchors)
{% endcontent-ref %}

{% content-ref url="/pages/hyblDNMC0WvrdkX7bR8a" %}
[Room-scale collaboration (Shared Anchors)](/mixed-reality-and-passthrough/room-scale-collaboration-shared-anchors)
{% endcontent-ref %}

{% content-ref url="/pages/uEUUTXTX5u5tGkgh5PZC" %}
[AR Headset Simulation](/mixed-reality-and-passthrough/ar-headset-simulation)
{% endcontent-ref %}


# MR mode (Passthrough mode)

To activate MR mode (Passthrough camera mode), click the MR button on your non-dominant controller - the Passthrough camera will be activated.

<figure><img src="/files/g7oYJ8po1FP404VOFLpT" alt=""><figcaption></figcaption></figure>


# Room-scale mode (Spatial Anchors)

Lock Your Mixed Reality Content to the Real World

**Room-Scale Mode with Spatial Anchors** lets you design and create spatial experiences that stay exactly where you place them — session after session. Walk into your room, and your virtual objects remain anchored to the same real-world spots every time you return.

#### **Why It’s Amazing**

**Persistent Mixed Reality** — Place content once, and it stays fixed to the physical world even across sessions.\
**Design With Confidence** — Build spatial layouts that feel natural because they stick where you put them.\
**Ready for Collaboration** — Anchored spaces make it easy for others to join you and see your designs in the [same real-world context](/mixed-reality-and-passthrough/room-scale-collaboration-shared-anchors).

### How to Activate Room-scale mode

Go to **Settings → Spatial Anchor Mode** and tap the blue button to launch the setup.

{% hint style="warning" %}
Allow the use of spatial data if requested.
{% endhint %}

If this is your first time, you’ll be guided to set up your physical space — this builds the baseline anchor for your room. Then click on **Enter Spatial Anchor mode** to activate it.&#x20;

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2Fm8myswnlQ4001VtfCVOg%2Fshared%20anchors%20setup.mp4?alt=media&token=01be6ac3-556d-42d2-a29e-bdc694953e79>" %}

### Aligning the virtual world with the physical world

Once activated, it’s time to sync the virtual world with the real one:

**Adjust Position & Rotation** by holding both grip buttons on your controllers to fine-tune where your content lives. \
**Set Floor Height** using the slider so everything sits at the right level.

When you’re happy with it, hit **Done** — your scene is now locked in place.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2F52X2XIXUucDQxf78QxkD%2Faligning%20the%20space.mp4?alt=media&token=0397a92a-4d15-4fff-84f6-6460cb1b945c>" %}

### Room mesh

We visualize the walls and objects of the physical space you've configured in your headset. You can hide and show Physical space mesh visualization using the "**Show physical space mesh**" toggle.

### Dollhouse mode

Scale down using the Grip buttons on both controllers for a *bird’s-eye view* of your room to move, resize, or tweak content faster and more comfortably. When you’re done, jump back to real scale with a tap on the **"Back to 1:1 scale" button**.

<figure><img src="/files/SYPzXV4B9s18sGDqMT3V" alt=""><figcaption></figcaption></figure>


# Room-scale collaboration (Shared Anchors)

Co-located collaboration using shared spatial anchors

Unlock a new dimension of teamwork in ShapesXR — **collaborate in mixed reality with people right beside you in the same physical space!** With **Room-Scale Collaboration**, everyone shares the same real-world anchors and sees the same spatial content in perfect sync.

#### **Why Room-Scale Collaboration Matters**

Whether you’re ideating, prototyping, or reviewing spatial designs, nothing beats the power of co-located collaboration. With this feature, your team can:

**Share a synchronized MR space instantly**\
Everyone in the same room gets a copy of the shared physical space, so your mixed reality content stays aligned and consistent for all participants.

**See real-world-correct positions**\
Avatars and objects stay true to real-world positions, making interactions feel natural and immersive.

**Edit together seamlessly**\
The person hosting the room can adjust spatial offsets, and everyone joining sees those updates in real time — keeping your session intuitive and collaborative.

### Setting up Room-scale Collaboration

{% hint style="warning" %}
**Important:** before using this feature, please enable "Enhanced spatial services" in Oculus Settings -> Privacy and Safety -> Device Permissions.
{% endhint %}

<figure><img src="/files/ng9Vd15cXpoVu4oeC6Tu" alt=""><figcaption></figcaption></figure>

#### **Start a Room-Scale Session:**

1. Enter **Room-Scale Mode** (first [set up your physical space](/mixed-reality-and-passthrough/room-scale-mode-spatial-anchors)).&#x20;
2. Switch on **“Share my physical space”** to broadcast your environment.&#x20;

Now your teammates in the same location can join and immediately see the shared mixed reality environment.

The user who shares the room can adjust the offset, and these changes are visible to everyone who joins.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2F3a3OhuOtTLzubfAVwEJ7%2Fspatial%20anchors.mp4?alt=media&token=08a5d8b4-4d28-4743-8ebd-573f8e0bd20c>" %}

#### **Join a Room-Scale Collaboration:**

* Be in the same physical space and join the same ShapesXR space as a starter.&#x20;
* When someone shares their space, tap **Enter** to join with synchronized avatars and content.

<figure><img src="/files/anVaxVaRtOTczPBZvNun" alt=""><figcaption></figcaption></figure>


# AR Headset Simulation

The AR Field of View (FOV) simulation feature lets you design experiences for different AR devices and instantly visualize how your design elements will appear in an augmented environment.

{% hint style="info" %}
Available for: [paid plans](https://www.shapesxr.com/plans)
{% endhint %}

<figure><img src="/files/keYkLACi9qOYwIfVnxoE" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/vjiZh7Hlkm1FiFEYbESp" alt=""><figcaption></figcaption></figure>

**Headset simulation** lets you preview the Content Layer with a restricted field of view, simulating how it appears on a headset.

### How to Use Headset Simulation

Open **Settings → AR Sim** tab and enable the toggle.

<figure><img src="/files/Oo3uiv91K9K5KQgeSJBc" alt=""><figcaption><p>Enabling AR Simulation mode</p></figcaption></figure>

You can set the field of view (FOV) using preset values based on released AR headset specifications (for example, XREAL One or Meta Orion), or set custom values.

<figure><img src="/files/z34HuHNfFDAOCE4RpQx7" alt=""><figcaption><p>Editing custom settings</p></figcaption></figure>

Additionally, you can enable **Additive Blending** to switch all objects in your space to an additive material, helping to simulate the visual limitations of AR headsets better.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FqwmmJAEzkVhMdOALGgQC%2Fcom.Tvori.Shapes-20260205-102120-0.mp4?alt=media&token=9150a9b3-9bbc-47af-ada0-cd3d288b8350>" %}


# Prototyping

{% content-ref url="/pages/FHwOQaPwK387m14cCHlc" %}
[Interactivity and Play mode](/prototyping/interactivity-and-play-mode)
{% endcontent-ref %}

{% content-ref url="/pages/PJE0p5mfrZJvVH7ro0o3" %}
[Gaze & Pinch interaction](/prototyping/gaze-and-pinch-interaction)
{% endcontent-ref %}

{% content-ref url="/pages/CSltb9QXQFsHkKdPLI4H" %}
[How to prototype with sounds](/prototyping/how-to-prototype-with-sounds)
{% endcontent-ref %}

{% content-ref url="/pages/D2fxGTUaoDwC56A0lhIZ" %}
[Attach to body](/prototyping/attach-to-body)
{% endcontent-ref %}


# Interactivity and Play mode

### How to add Interactivity

You can **add interactivity** from the Prototyping menu (Interactions tab) or from the [Object Inspector](/object-inspector) (Interactions tab). Click on the Add button and choose the needed trigger and action.

The list of **available triggers**:

* On Click.
* On Hover.
* On Touch.
* On Button.
* On Collision.
* Frame Enter.
* After Delay.

The list of **available actions**:

* Go to Frame.
* Go to Viewpoint.
* Play haptic.
* [Play sound](/prototyping/how-to-prototype-with-sounds).
* Look at.

After you choose the required interaction, select the object in your scene you want to assign that interactivity by clicking the Target button and selecting the object. Now, when you hover over this interactivity in the list, you'll see the line to the target object.&#x20;

### How to use Interactivity (Play mode)

To make the interactivity work, you need to **activate the Play mode**. You can do so **by pressing the non-dominant stick** or **by clicking on the button in the action bar**.

<figure><img src="/files/OYRiWqQeGweW1Gf53a8M" alt=""><figcaption></figcaption></figure>

In the Play mode, you can't edit your scene; you can switch frames and viewpoints using sticks on the controllers and interact with the objects via interactions.

To **exit the Play mode**, press the non-dominant stick again or click on the button above the controller.&#x20;

<figure><img src="/files/e0CVWkr2jVLRrHTXJAGs" alt=""><figcaption></figcaption></figure>

### How to change the input mode

You can interact with objects in the Play mode in two ways:

* Controllers raycast.
* [Eye gaze and hand pinch](/prototyping/gaze-and-pinch-interaction).

**To change the input mode,** go to the Settings menu -> Prototyping section, and choose the needed option from the Input mode list.

{% hint style="info" %}
In case you are using Gaze & Pinch mode, please make sure the Hand tracking and Eye tracking (only for Quest Pro) are enabled in the Oculus settings (Settings -> Movement Tracking -> Hand and Body Tracking).
{% endhint %}


# Gaze & Pinch interaction

### How to set up Gaze & Pinch

You can interact with the objects in Play mode using eye gaze selection and pinch gesture manipulation.

To **enable this mode** in ShapesXR, set the input mode as Hands in the **Settings menu -> Prototyping section**.

<figure><img src="/files/0X972DMVSLhTXLKSHbAR" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If you are using Gaze & Pinch mode, please make sure the Hand and Eye tracking are enabled in the Oculus settings (Settings -> Movement Tracking -> Eye tracking/Hand and body tracking).

The Eye tracking is only available for Quest Pro.
{% endhint %}

<figure><img src="/files/35S8PktsztKgfkxRcHKO" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/cWisaJ6QUim90FXgIfI4" alt=""><figcaption><p>Hand tracking in Oculus settings</p></figcaption></figure>

### How to use Gaze & Pinch in Play mode

While you are in Play mode, set your controllers down and wait for your virtual hands will appear. Now you can select the interactive objects using eye gaze and "click" on the objects using pinch gestures.&#x20;

When you look at the interactive object, the hover effect gets enabled and the object becomes highlighted.&#x20;

With Gaze & Pinch mode, you can interact with the objects that have On Click or On Hover interactivity.&#x20;

<figure><img src="/files/h7xp7m9fFarHoMdhNXzQ" alt=""><figcaption></figcaption></figure>


# How to prototype with sounds

### Uploading your sounds

Upload your sound file via the Dashboard (learn more about uploading files [here](/import/uploading-and-using-your-assets)).

{% hint style="warning" %}
Be mindful when using audio files longer than 5 minutes, as they may impact performance or processing time.
{% endhint %}

<figure><img src="/files/ufHWUrX3INHpRdATZ0lk" alt=""><figcaption></figcaption></figure>

### Prototyping with sounds

In ShapesXR, you can prototype with sounds using the Interactivity system. You can do it in both the app and [Web Editor](/web-editor).

1. Open the **Prototyping tab** in the menu.&#x20;
2. **Add a new interaction** and choose the trigger or condition you need for this interaction.
3. Choose **Play Sound** action.
4. Click on the Sound file button to **select the sound**.
5. In the opened window, you can see all the sound files you have uploaded into ShapesXR. Click on the Play icon in the center of the file preview to **play the sound**.&#x20;
6. To **select the sound**, click on it. A blue frame will appear around it. Then, **confirm your selection** with a blue button at the bottom.&#x20;
7. You can set the **volume**, select the sound **emitter** if you want it to **spatialize**, or **loop** the sound.&#x20;
8. By default, the sound will stop when you switch the scene in the Play mode. If you want the sound to continue playing through all scenes, turn the "**Stop on scene switch**" toggle off. Alternatively, you can create interactivity with sound in the [Background scene](https://learn.shapesxr.com/basics/scenes#background-scene).
9. **Save the interactivity** using the Checkmark button at the top of the window.

<figure><img src="/files/yA4HqCcSzXgidt24fXew" alt=""><figcaption></figcaption></figure>

To use this interactivity, go to the app and activate the Play Mode by pressing on the non-dominant stick. Then, activate this interactivity according to the chosen trigger - the sound starts to play. &#x20;


# Attach to body

You can attach objects to your body so they will follow you in the [Play mode](/prototyping/interactivity-and-play-mode).

Select an object and find the Attach to options in the [Object Inspector](/object-inspector):

You have the following **attachment options**:

* head
* body
* left hand
* right hand

You should also pick a viewpoint the object will be attached. In the Play mode, the object will follow you when you're in this viewpoint (learn more about viewpoints [here](/basics/viewpoints)).

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FX8sx1YJ7P162jHn7V8RB%2Fattach-crop-video.mp4?alt=media&token=fcce6f49-3a26-4793-982e-34238dc23e0f>" %}

You can attach any object(s) or group of them, including objects in the [Background](https://learn.shapesxr.com/basics/scenes#background-scene).&#x20;

You can adjust the position of objects relative to parts of the viewpoint by moving the viewpoint's head or hands/controllers.

To switch between hands and controllers, change the Input mode (more information about it [here](https://learn.shapesxr.com/interactivity#how-to-change-the-input-mode)).

{% embed url="<https://youtu.be/d3NGABg6Jq0>" %}


# Import

Here you will find all the necessary information about our import system. To start using your resources - models and pictures, as well as importing from Figma - read our guide and basic recommendations on formats, sizes and performance.

We have also collected all the useful tips and life hacks in the Tips section.

All frequently asked questions can also be read in the FAQ page.<br>

{% content-ref url="/spaces/V5IFh3rk5kqfCwJPPYhE/pages/2cWuBhHOu5NyC75EeTeB" %}
[Uploading and using your assets](/import/uploading-and-using-your-assets)
{% endcontent-ref %}

{% content-ref url="/spaces/V5IFh3rk5kqfCwJPPYhE/pages/VsGi8J7wUqaTN3DtcLpN" %}
[Limits and recommendations](/import/limits-and-recommendations)
{% endcontent-ref %}

{% content-ref url="/pages/xqNRqa85UEZYrJPxT5UO" %}
[Centering and adjusting of imported models](/import/centering-and-adjusting-of-imported-models)
{% endcontent-ref %}

{% content-ref url="/pages/cKPwXl5xqOz8G2yLD1Cc" %}
[Figma integration](/import/figma-integration)
{% endcontent-ref %}

{% content-ref url="/pages/4dq4WXWSgFswiBAtMnh4" %}
[File management (folders)](/import/file-management-folders)
{% endcontent-ref %}

{% content-ref url="/pages/XDo0yoff7rDS1osDlaFm" %}
[New LOD system](/import/new-lod-system)
{% endcontent-ref %}

{% content-ref url="/pages/gA1Rd48GZZQTmQTAU2Un" %}
[3D Models importing tips](/import/3d-models-importing-tips)
{% endcontent-ref %}

{% content-ref url="/pages/x6RyX9v0y28v9vM9GJCW" %}
[Images importing tips](/import/images-importing-tips)
{% endcontent-ref %}

{% content-ref url="/pages/LuVRPBRksUnoT7I6iiuo" %}
[YouTube integration](/import/youtube-integration)
{% endcontent-ref %}

{% content-ref url="/spaces/V5IFh3rk5kqfCwJPPYhE/pages/myVricE492BPZ5pEBlSm" %}
[Import FAQ](/import/import-faq)
{% endcontent-ref %}


# Uploading and using your assets

You can import the following types of files into ShapesXR:

* **PNG** and **JPG** for images.
* **OBJ**, **GLB**, **glTF (as ZIP),** and **STL** for 3D models.
* **MP3** and **WAV** for sounds.
* **MP4** for videos.
* [**Figma** **files**](/import/figma-integration).
* [**Figma prototypes**](https://learn.shapesxr.com/import/figma-integration#figma-playable-prototype).
* [**YouTube videos**](/import/youtube-integration).

## How to upload your files

1. Sign in with your Shapes account in the [Dashboard](https://shapes.app/spaces/recent).
2. Go to the [My Files](https://shapes.app/files) section.
3. Drag & drop your files or use the Import button to load needed files to the cloud storage.

<figure><img src="/files/VjsFELQl1R0ltK3eIohS" alt=""><figcaption><p>Drag &#x26; drop files into the Dashboard</p></figcaption></figure>

<figure><img src="/files/OzxsjvJ18xw4okMT5XCZ" alt=""><figcaption><p>Import button</p></figcaption></figure>

## Working with imported files in the Dashboard

Click on any file so the options will be shown - you can download, duplicate, rename, and remove your resources.

To completely delete any file or clean the storage, be sure that files are also deleted from the Trash.

#### File management (folders)

Create [folders](#file-management-folders) and manage your assets in the app and the Dashboard.&#x20;

## Working with imported files in VR

After you’ve successfully uploaded your files through the Dashboard, you can use them in VR - go to any space, open the Assets menu -> My Files, hover over an asset in the list, and grab it with the grip button to set it in the space.

#### Preview window

You can preview images, Figma files, and 3D models in VR. Click on the resource with the trigger button to open the preview window.

You can grab your asset from the preview and set it in the space.&#x20;

<figure><img src="/files/F6oKIUSLhI3MmJg4NgeW" alt=""><figcaption></figcaption></figure>

**3D Model preview**

For models, you can set the scale and spawn the model with this scale in the center of the space.

<figure><img src="/files/2E2E8q53kAz21sWgMtXQ" alt=""><figcaption></figcaption></figure>

**Image/Figma preview**

For images and [Figma files](/import/figma-integration), you can set transparency (modes are different for JPEG and PNG/Figma files because of the alpha-channel specifics), scale by distance (UI), and distance.\
\
The Figma file's preview has the Sync button that refreshes this Figma file.

<figure><img src="/files/l5juIynM99xr0C9eQvnc" alt=""><figcaption></figcaption></figure>

### Working with sounds&#x20;

Read more about using sound files in **Play sound interactivity** here - [How to prototype with sounds](/prototyping/how-to-prototype-with-sounds).

### Working with MP4 videos

Open **My Files** and drag the video file into your scene using the grip button.

To select the video, click the bar beneath it to open the Object Inspector. From there, you can start previewing the video, adjust the volume, and enable Autoplay and Loop settings, which apply in Play mode.

Click a video to play or pause it in both edit and Play mode.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FsdfSH9TcySKHO9FLBPpd%2Fmp4%20video%202.mp4?alt=media&token=30365cce-0ef7-4ee2-8e22-d43c0bed3231>" %}

#### **Limitations & Recommendations**

For optimal performance, use the following video format:

* **Codec:** H.264 (video) + AAC (audio)
* **Container:** MP4
* **Bitrate:** 2–5 Mbps for 1080p

If you experience performance issues, reduce the video resolution to 720p or 480p, especially when the video is not displayed in full screen.

#### Chroma key for MP4 videos

You can enable chroma keying for your videos by using a chroma color. Upload the video to ShapesXR, add it to your scene, then select it from the bottom bar. Turn on the **Chroma Keying** option and choose the same color as the video’s background.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FaQXAQddAGhHYg1qjO1v9%2Fchromakeymp4-crop.mp4?alt=media&token=e15e37b2-5213-491c-ad5d-57654b8ee999>" %}

## How to replace your files

You can replace an existing image or 3D model with a new file.

1. Open the **Dashboard** and go to **My Files**.
2. Select the file you want to replace.
3. Click **Replace**, then choose a new file with the same format as the original.
4. Once the upload is complete, all instances of the original file in your spaces will automatically update to the new version.


# Limits and recommendations

### 3D models

**Available formats:** OBJ, GLB, glTF (as ZIP), and STL

#### **Recommended Limits (for best results)**

* **Polygon count:**
  * ✅ Best: **under 500k**
  * ⚠️ Risk of artifacts: **500k – 6M**
  * ❌ Above 6M: heavy simplification likely
* **Submeshes:**
  * ✅ Recommended: **under 400**
  * 400+ submeshes will be **merged into a single mesh/material**
* **Texture resolution:** **2K–4K recommended**

{% hint style="warning" %}
Our application currently does not support animations, bones, or skins in 3D models
{% endhint %}

### Images

**Available formats:** PNG and JPG + Figma files

**Recommended image specifications:** &#x20;

&#x20;                             *Up to 1MB and 1024x1024px.*

**Hard**:  Up to 2048 px (images compress automatically).

### MP4 videos&#x20;

* **Codec:** H.264 (video) + AAC (audio)
* **Container:** MP4
* **Bitrate:** 2–5 Mbps for 1080p

If you experience performance issues, reduce the video resolution to **720p** or **480p**, especially when the video is not displayed in full screen.

### File size limits

50 MB per import file for the Starter plan (free).

200 MB per import file for[ Paid plans](https://www.shapesxr.com/plans).

### General performance recommendations

Be careful, standalone VR is very sensitive to the number of objects, sub-objects, and matrices - this can greatly affect performance.

[Recommend 200-300 objects/materials per scene (Draw calls) for Quest 2](https://developer.oculus.com/documentation/unity/unity-perf/#performance-targets). Note that ShapesXR interfaces, avatars, and other elements can take 50-100 draw calls.

If it is possible to merge individual geometries into one model and merge textures, this will help you save performance in your scenes.

{% hint style="info" %}
**To improve the performance of your VR space with imported models, we recommend optimizing your models.**

If your model has multiple textures and materials, we recommend combining the textures and materials into one texture and one material.

This helps solve many potential issues. Models with fewer materials work better in mobile graphics.

It is critical to make one texture and material for OBJ format. But for glTF or GLB formats, we also recommend minimizing the number of materials and textures.

* Bake Multiple Materials to One Texture Map - <https://www.youtube.com/watch?v=wG6ON8wZYLc>  Author: Ryan King Art
  {% endhint %}


# Centering and adjusting of imported models

When working with imported 3D models in ShapesXR, it's common for individual assets exported separately from a 3D editor to have mismatched positions, scales, or orientations. To ensure proper alignment of such models, especially if they need to fit together seamlessly (e.g., separate parts of a single object), the "Place in the Center" button in the Model Preview Popup is an essential tool.\
Key Features:

* **Align to Center**: Clicking "Place in the Center" moves the model to the center of the coordinate system. This helps standardize the model's position, making it easier to work with multiple assets that must align precisely. **Set the Scale factor > 0.1 to make this option available.**
* **Adjusting Scale**: If an imported model has incorrect dimensions, you can use the Scale option in this window to correct the size and ensure it matches other assets.
* **Orientation Correction**: For models that are rotated incorrectly, the Orientation controls let you adjust the rotation along the X, Y, or Z axes, allowing the model to be properly aligned.
* These tools ensure that your imported models are correctly positioned, scaled, and oriented, making creating cohesive and well-structured projects in ShapesXR easier.

<figure><img src="/files/2E2E8q53kAz21sWgMtXQ" alt=""><figcaption></figcaption></figure>


# Figma integration

There are two ways you can import your Figma files into ShapesXR - you can use the ShapesXR plugin in Figma or upload them manually.

{% hint style="warning" %}
**Figma import limitations**

Figma has updated its API rules and introduced stricter rate limits. As a result, importing files from Figma may be limited or temporarily unavailable.

These limitations depend on your Figma plan and permissions and are enforced by Figma.

Learn more:\
<https://developers.figma.com/docs/rest-api/rate-limits/><br>
{% endhint %}

## ShapesXR plugin in Figma&#x20;

{% hint style="info" %}
As a Free user, you have 20 exports via the plugin.

For [paid plans](https://www.shapesxr.com/plans), it's unlimited.
{% endhint %}

1. In the Figma app, open your project, go to the Plugins tab -> Manage plugins, type ShapesXR in the search field, select the plugin, and click on Run.
2. Log in to your ShapesXR account.
3. Paste the file link (you can find it in the Share menu of your Figma project) and click on Continue.

<div><figure><img src="/files/x0M4kfcRuumuWUTKpYuS" alt=""><figcaption></figcaption></figure> <figure><img src="/files/XxdqiXMFulGWbrEL5uQq" alt=""><figcaption></figcaption></figure></div>

4. If you are using Figma Integration for the first time, you need to add a Figma account token. Here is the video on how to find it in Figma:

{% embed url="<https://youtu.be/WiHyCvAzzBI?feature=shared>" %}

5. Select files in your project that you want to export into ShapesXR - they will be shown in the plugin.
6. The default folder for export is the My Files folder in the [Dashboard](https://shapes.app/files/), but you can pick another target folder. Click on the folder button to do it.

<figure><img src="/files/0PgbAX2Z9HkT563APOGY" alt="" width="375"><figcaption></figcaption></figure>

7. Click on the Export button and wait for the export to be complete. Now your files are available in ShapesXR - you can find them in the Dashboard and use them in the space.

<figure><img src="/files/fR47bqaYhSqQss7jPZrm" alt=""><figcaption></figcaption></figure>

8. You can easily update your files after you change them in Figma - click on the "Sync all" button to update all your files in the folder, or click on the update button next to a specific file.&#x20;

<figure><img src="/files/WhtrKuP2Kage8blYlqWa" alt=""><figcaption></figcaption></figure>

## How to upload Figma files manually

### How to add a Figma token

If you are using Figma Integration for the first time, you need to add a Figma account token.&#x20;

Copy the token in Figma, then go to the Dashboard -> Profile -> Integration tab -> Add Figma token to sync -> paste the token into the field and sync it.

In this [video](https://youtu.be/WiHyCvAzzBI?feature=shared), you can find step-by-step instructions on how to find the token in Figma.

{% hint style="info" %}
Sometimes the token needs to be refreshed, so if you're having trouble loading Figma files, revoke the token and sync it again.
{% endhint %}

### How to upload Figma files manually

Once you add a Figma token, you can upload Figma files using their links.&#x20;

1. Copy the link to the frame you want to import into Figma. There is a video tutorial on how to get the Figma link:

{% embed url="<https://youtu.be/7Yq85ofBdIU?feature=shared>" %}

2. Go to the Dashboard -> My Files, click on the Upload button, and choose Figma import. Paste the link in the field and press Import.&#x20;

<figure><img src="/files/mgeXXxOOQdG9vS5S4dIG" alt=""><figcaption></figcaption></figure>

### How to update Figma files

Click on the Figma file to select it. Additional options for Figma files will be available:

* Sync - allows you to update the file with the changes you've made in Figma.
* Edit link  - for changing the link to the file in Figma.
* Open in Figma - opens the file in Figma.

## Figma playable prototype

{% hint style="info" %}
Available for: [paid plans](https://www.shapesxr.com/plans)
{% endhint %}

You can upload your Figma prototype into ShapesXR and play and interact with it in VR.&#x20;

#### How to upload Figma playable prototypes

1. Copy the link to your prototype in Figma (Share -> Copy link).&#x20;

<figure><img src="/files/QQNeS1CGPUDWhfZpBk43" alt=""><figcaption></figcaption></figure>

2. Go to the Dashboard -> My Files, click on the Import button, and choose Figma Prototype. Paste the link in the field and press Import.&#x20;

<figure><img src="/files/xMibklnbJwfMcRQfXp1n" alt=""><figcaption></figcaption></figure>

### How to use a Figma playable prototype in VR

1. After you’ve successfully uploaded your Figma prototype through the Dashboard, you can **use it in VR** - go to any space, **open the Assets menu -> My Files**, hover over the prototype in the list, and **grab it with the grip button** to set it in the space.

<figure><img src="/files/XWN3yViy9JLKQcg4xmWc" alt=""><figcaption></figcaption></figure>

2. If the link to your prototype is private, a Figma login form will appear after it loads. Click on the input field to activate the keyboard and enter your login credentials.

<figure><img src="/files/uQ4QkRlz3uw63J2xuY0P" alt=""><figcaption></figcaption></figure>

3. The prototype will be loaded and started, so **you can interact with it by clicking the trigger button.**&#x20;

<figure><img src="/files/cwMEkNUL9ikgMz6S7WLL" alt=""><figcaption></figcaption></figure>

4. Click the prototype's bottom bar with the trigger to select it. In the Inspector, you can set the prototype's pixel density, reload it, or activate the Chroma key option.&#x20;

### Chroma key for Figma prototype

1. Add chroma color to your prototype in Figma.

<figure><img src="/files/Xq8Y9ZPEwhR6NbT0h3eb" alt=""><figcaption></figcaption></figure>

2. Upload the prototype into ShapesXR.
3. In the app, go to My files and grab the prototype into the space.
4. Select the prototype by clicking on the bottom bar and turn on the Chroma keying option. Then, choose the same color as the prototype's background.&#x20;

<figure><img src="/files/L6n8PcYoNGMXGPGbwruZ" alt=""><figcaption></figcaption></figure>


# File management (folders)

Create folders and manage your assets

{% hint style="info" %}
Available for: [paid plans](https://www.shapesxr.com/plans)
{% endhint %}

### Folder creation <a href="#folder-creation-1" id="folder-creation-1"></a>

To create a new folder, go to the [My files](https://shapes.app/files) tab in the Dashboard and press the "New Folder" button. Type the new folder's name and click on "Create".

<figure><img src="/files/fEas3dbqJNUcSnuDP8kc" alt=""><figcaption></figcaption></figure>

You can create a folder in the app - go to the Assets menu -> My files tab, click on the blue button at the bottom right corner, set the name for the folder, and confirm the creation.

<figure><img src="/files/VlwVUb01gc7cy68SvLy5" alt=""><figcaption></figcaption></figure>

You can create a subfolder inside any folder the same way.&#x20;

### Moving files into folders

You can upload files into folders or move them from other folders including the root folder - My files.

To upload a file into a folder go to this folder with a double click and press the "Upload" button or drag and drop the file.

To move a file from another folder, select the file, click on the "Move" button, choose the target folder, and click on "Move".

<figure><img src="/files/H5Oau6C1bRugaxmsm5Ul" alt=""><figcaption></figcaption></figure>

### Renaming, moving, and deleting folders <a href="#renaming-moving-and-deleting-folders" id="renaming-moving-and-deleting-folders"></a>

To rename a folder, hover over the folder, click on the 3 dots button, and choose "Rename". Type a new name and press "Rename".&#x20;

To move a folder, hover over the folder, click on the 3 dots button, and choose "Move". Select the target folder and click on "Move" - the folder with all files and folders inside it will be transferred into the target folder.

To delete a folder, hover over the folder, click on the 3 dots button, choose "Remove", and confirm this action. The folder will be removed, and all files inside it will be transferred to the Trash (empty the Trash if you want to delete them completely).&#x20;


# New LOD system

Automatic LOD System

ShapesXR introduces a new **automatic Level of Detail (LOD) system** that makes complex 3D models reliable and performant in VR.

Models are analyzed and **optimized automatically** during import, ensuring stable performance on VR headsets — with no manual setup required.

This allows you to work with high-complexity assets while preserving visual quality and predictable runtime behavior.

### Why this matters

VR environments have strict limits on geometry complexity and memory usage. Previously, complex models could fail to load, degrade performance, or behave inconsistently between the Web Editor and VR.

The new LOD system removes this friction by automatically preparing models for VR during import, making complex content safer, more predictable, and easier to use.

### What to expect when working with models

The LOD system automatically balances visual quality and performance depending on asset complexity:

* **Large and complex models**\
  ShapesXR supports models with hundreds of thousands or even millions of polygons. Extremely dense meshes may be simplified to maintain smooth and comfortable VR performance.
* **Automatic texture optimization**\
  High-resolution textures (for example, 8K) are automatically resized to VR-safe resolutions. This reduces memory usage and improves stability on standalone headsets.
* **Models with many parts**\
  Assets made of many separate objects may be reorganized or merged for performance reasons. Short pauses may occur while materials are processed.
* **Original vs optimized models**\
  For lighter assets, you can compare the original and optimized versions in the dashboard. For heavier models, the optimized version is used by default to ensure the best balance between quality and performance.
* **Processing time**\
  Most models are available quickly, but very complex assets may take longer to process. The model will appear automatically once optimization is complete.

### Improved Model Viewer in the Dashboard

We’ve significantly upgraded the **3D model viewer in the Dashboard** to make working with models clearer, faster, and more predictable.

The viewer now shows models closer to how they will look and behave in VR, helping you make better decisions before adding them to a space.

#### What’s new

* **Cleaner, higher-quality visuals**\
  Improved lighting and presentation make models easier to inspect and more pleasant to view.
* **Switching between model versions**\
  Easily toggle between the optimized and original model (when available) to understand the impact of optimization.
* **Optimized view = VR reference**\
  The optimized version reflects how the model will appear and perform in VR, reducing surprises when entering a space.
* **Clear model info at a glance**\
  See key details like polygon count, submeshes, materials, textures, and optimization status directly in the viewer.

### Enabling and disabling mandatory LODs

By default, ShapesXR automatically applies LOD optimization to ensure stable VR performance.\
However, for lighter models, you can control whether mandatory LODs are applied.

**To enable or disable mandatory LODs**:

1. Open the model **Viewer** in the Dashboard (double-click on the model).

<div align="center"><figure><img src="/files/LmmkJziDnd1CBKGaYADA" alt=""><figcaption></figcaption></figure></div>

2. Locate the **Mandatory LODs** option.

<div align="center"><figure><img src="/files/F5XFUWH9z0Y1bDSpm6U8" alt=""><figcaption></figcaption></figure></div>

3. Toggle the checkbox on or off:

* **Disabled** — the model will always use optimized LODs for stable VR performance.
* **Enabled** — the original (non-optimized) version of the model can be used, if supported.

{% hint style="warning" %}
**Note**: For heavy or highly complex models, mandatory LODs may be enforced automatically to ensure stability. In such cases, **the option may be unavailable**.
{% endhint %}

<figure><img src="/files/3zC3l3eahGklQHmL4ZZf" alt=""><figcaption></figcaption></figure>


# 3D Models importing tips

## OBJ format <a href="#obj-format" id="obj-format"></a>

**Uploading an OBJ file with textures:**

For textures to be included with models, it’s important to upload your OBJ file along with the MTL (file with a description of material settings and links to textures) and all of the associated images in one upload.\
\
To avoid problems with importing textures, before exporting a 3D model from your 3D editor, make sure that the used textures are in the same folder where you export the model. This should automatically create an MTL file with the correct texture description.

After that, it is worth checking the results before uploading. If you see issues with your import inside ShapesXR, recheck the results and try uploading again.

**Check your MTL file before uploading:**

If you upload an OBJ file with textures, you should check your MTL file: Open your MTL file using the Notepad app.&#x20;

<div align="left"><figure><img src="/files/i65PXbbfA0xcv9eFnRHK" alt=""><figcaption></figcaption></figure> <figure><img src="/files/GWEaNjSci0VZTcYD9U1B" alt=""><figcaption></figcaption></figure></div>

The line that starts with “map\_Kd” should contain only the name of the texture and not the path. If it has a path, remove it and save your MTL file before uploading.

<div><figure><img src="/files/7HpKY3DLrLSJPXCG21D5" alt=""><figcaption></figcaption></figure> <figure><img src="/files/G47Q2Cm8Wch2H8sWSRER" alt=""><figcaption></figcaption></figure></div>

If your model has multiple materials and textures, check each map\_Kd line in your MTL file.

## glTF and GLB format <a href="#gltf-and-glb-format" id="gltf-and-glb-format"></a>

A simpler and more flexible alternative to importing OBJ files is to use the glTF and GLB formats. The format is actively supported on the Web. For example, you can download any downloadable model from SketchFab in this format.

Allows you to import more complex models with many materials and textures, without the complexity of importing OBJs.

{% hint style="info" %}
Upload your glTF files as ZIP files
{% endhint %}

{% hint style="warning" %}
We do not support skinned meshes, light sources, 3D cameras, or animation for glTF/ GLB.
{% endhint %}

## Textures with transparency <a href="#textures-with-transparency" id="textures-with-transparency"></a>

**Apply materials to textures of models:**

You can also assign a material to model textures. If your model has textures with transparency, apply any material with 0.98 Alpha (or less if needed) to your model.

You can apply Unlit material with white color to get a bright texture image, that will not be affected by space lighting.

{% hint style="info" %}
**To improve the performance of your VR space with imported models, we recommend optimizing your models.**

If your model has multiple textures and materials, we recommend combining the textures and materials into one texture and one material.

This helps solve many potential issues. Models with fewer materials work better in mobile graphics.

It is critical to make one texture and material for OBJ format. But for glTF or GLB formats, we also recommend minimizing the number of materials and textures.

* Bake Multiple Materials to One Texture Map - <https://www.youtube.com/watch?v=wG6ON8wZYLc>  Author: Ryan King Art
  {% endhint %}

## Texture Layout: Base vs. ORM

ShapesXR supports two texture layout modes for PBR (Physically-Based Rendering) materials. This setting defines how Metalness, Roughness, and Ambient Occlusion (AO) are assigned.

**Base Mode (Separate Textures)**

Each channel is assigned individually:

* **Metalness** → Metalness slot
* **Roughness** → Roughness slot
* **AO** → AO Map slot

✅ Best for workflows with separate textures (e.g., Blender, Substance).\
✅ Provides maximum control.

**ORM Mode (Packed GLTF/GLB Standard)**

One combined texture is used:

* **Red channel** → AO
* **Green channel** → Roughness
* **Blue channel** → Metalness

✅ Best for glTF 2.0 exports (Blender, Sketchfab, etc.).\
✅ Fewer textures → faster loading, smaller files.

**Switching Layouts**

You can toggle between Base and ORM anytime in [Object Inspector -> Material Settings ](/object-inspector/material-customization-in-object-inspector)

{% hint style="info" %}
**How to use Blender for setting up these parameters?**

By default, Blender’s materials don’t have a direct input for Ambient Occlusion (AO), so you’ll need to prepare it for glTF export.

**Steps:**

1. Enable the Add-on
   * Go to Edit > Preferences > Add-ons.
   * Search for glTF 2.0 format and enable it.
   * Enable Shader Editor Add-ons.
2. Setup AO in Shader Graph
   * In the Shader Editor, add a glTF Material Output node.
   * Connect your AO texture node to the Occlusion input.
3. Export
   * When exporting to `.glb` or `.gltf`, Blender will pack AO correctly into the ORM texture (R=AO, G=Roughness, B=Metalness).

\
YouTube guide - <https://www.youtube.com/watch?v=xAo-YMOJDvA>
{% endhint %}


# Images importing tips

By default, images imported into spaces automatically adjust to the size of the user. This is typically okay for environmental elements. But it's not always useful when importing elements with precise measurements like menus and user interfaces.

{% hint style="info" %}
Tip: From the Preview window, toggle on UI Element in order to set a fixed pixel density for your images
{% endhint %}

The scale of imported images from Figma will be dependent on the pixel density and relative to the world size. This will allow designers to import all their building blocks at a consistent size.

You just need to choose how far away from the user you plan to place your interfaces. For this distance, the image size will be automatically calculated so that the texture pixel matches the screen pixel 1 to 1. This is optimal for getting the best possible image quality and clarity in VR.

To check the result, make sure that your size is 100% and that you are at the selected distance from your interfaces. If you are satisfied with the distance, but want to increase or decrease the size, we recommend re-exporting your textures at a larger or smaller size, to keep the correct Pixel Density.

We also recommend that you do not export all the interface elements at once, but first do a test with a couple of images at your ideal distance. Once you confirm that it looks good, export all the other elements from your graphics editor.


# YouTube integration

You can import YouTube videos into ShapesXR.

#### How to upload a YouTube video

* Sign in to your **ShapesXR** [**Dashboard**](https://shapes.app/) using your Shapes account.
* Go to the [**My Files**](https://shapes.app/files/) section.
* Click **Import → YouTube video**.
* Paste the YouTube link and click **Import**.

Once the video is imported, it will appear in your **My Files** list.

#### How to use a YouTube video in VR

1. Open **ShapesXR** in VR and enter any space.
2. Open the **Assets** **menu** → **My Files**.
3. Find your uploaded video, hover over it, and use the **grip button** to grab and place it in the space.
4. To adjust the video settings:
   * Click the bottom bar of the video with the **trigger** to select it.
   * In the **Inspector**, you can:
     * Choose the **pixel density**.
     * Toggle **AutoPlay** on or off.

{% hint style="info" %}
When AutoPlay is enabled, the video will automatically start from the beginning every time you enter [Play Mode](/prototyping/interactivity-and-play-mode).
{% endhint %}

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FuJsLu8NGsQUFiFGKfdgZ%2FYoutube.mp4?alt=media&token=6a3840c9-397b-4bbb-8170-6002ecc33e48>" %}


# Import FAQ

### What formats are available to use in Shapes? <a href="#why-did-my-obj-model-load-without-textures" id="why-did-my-obj-model-load-without-textures"></a>

* PNG and JPG for images.
* OBJ, GLB, glTF (as ZIP), and STL for 3D models.
* Figma files.
* MP3 and WAV for sounds.
* YouTube videos.

### Why did my OBJ model load without textures? <a href="#why-did-my-obj-model-load-without-textures" id="why-did-my-obj-model-load-without-textures"></a>

Make sure you load your OBL with MTL file and texture files in one upload.

Check your MTL file. Open your MTL file using the notepad app. The line that starts with “map\_Kd” should contain only the name of the texture, and not the path to it. If it has a path, remove it and save your MTL file before uploading.

<div><figure><img src="/files/KvP2mjDqJbKxXPZu0oyv" alt=""><figcaption></figcaption></figure> <figure><img src="/files/jspBSxoZkQOdrTYGpx3o" alt=""><figcaption></figcaption></figure></div>

### Why my OBJ model has bug geometry? <a href="#why-my-obj-model-has-bug-geometry" id="why-my-obj-model-has-bug-geometry"></a>

Your model has a lot of materials and sub meshes. You should split the model by materials (submesh) and upload the model in separate parts.

### Why my gLTF model is not recognized?

GLTF models should be uploaded as an zip archive, with all necessary files inside it (for example .gltf file + .png files with textures).

### I want to upload a model with a transparent texture. How to make the texture on the model transparent? <a href="#i-want-to-upload-a-model-with-a-transparent-texture.-how-to-make-the-texture-on-the-model-transparen" id="i-want-to-upload-a-model-with-a-transparent-texture.-how-to-make-the-texture-on-the-model-transparen"></a>

After importing your model into space, assign it a material with alpha lower than 0.98 using the Color tool.

### How do I optimize my models for VR? <a href="#how-do-i-optimize-my-models-for-vr" id="how-do-i-optimize-my-models-for-vr"></a>

If your model has multiple textures and materials, we recommend combining the textures and materials into one texture and one material. This helps solve many potential issues. Models with fewer materials work better in mobile graphics. It is critical to make one texture and material for OBJ format. But for glTF or GLB formats, we also recommend minimizing the number of materials and textures.

***

Join our [Discord server](https://discord.com/invite/3xET92YteE) to ask any questions regarding the import, bugs, and feature requests, and share your creativity with us. Or email us with any questions:

<Support@shapesxr.com> — get product or account support

<Sales@shapesxr.com> — contact a member of our sales team

<Hey@shapesxr.com> — any other questions


# Export & Sharing

{% content-ref url="/pages/bMGKpmq5EwDNZX3x7Fmn" %}
[Export as 3D model](/export-and-sharing/export-as-3d-model)
{% endcontent-ref %}

{% content-ref url="/pages/oPSwJyKtbWsqsSu9nGqk" %}
[Sharing spaces via app/web](/export-and-sharing/sharing-spaces-via-app-web)
{% endcontent-ref %}

{% content-ref url="/pages/SdDRmP9wAtzuCAzTimqO" %}
[How to embed spaces](/export-and-sharing/how-to-embed-spaces)
{% endcontent-ref %}

{% content-ref url="/pages/fNwLPPomUcnPMtd2NqcX" %}
[Unity Integration](/export-and-sharing/unity-integration)
{% endcontent-ref %}

{% content-ref url="/pages/5UygY7FbxFqnJ4ai8K4F" %}
[Taking photos](/export-and-sharing/taking-photos)
{% endcontent-ref %}

{% content-ref url="/pages/KhGu9WZ5NpwKszl0qHTF" %}
[How to import into Unreal Engine 5](/export-and-sharing/how-to-import-into-unreal-engine-5)
{% endcontent-ref %}


# Export as 3D model

You can export the entire frame or specific objects within the frame. Supported export formats:

* glTF
* USDZ

**How to export a whole frame:**

* go to the Collaboration menu -> Export tab, choose Current frame for Export mode, and click on the "Export to file" button.

<figure><img src="/files/n9AJPXX2quhWltiRGY1k" alt=""><figcaption></figcaption></figure>

**How to export individual objects:**

* select the object(s) with Select Tool - the [Object Inspector](/object-inspector) will be opened, click on the 3 dots button in the action bar, and choose Export.

<figure><img src="/files/crUY1jTbhfOkYh2Akzpn" alt=""><figcaption></figcaption></figure>

All exported files can be found in the **Exported folder in 'My Files'** in the [Dashboard](https://shapes.app/files), where you can also download them.


# Sharing spaces via app/web

You can easily share spaces with other users by providing them with the space code or the space link.

## Via app

How to get a Space Code:

* While in a space, access the Collaboration menu and then go to the Share tab.&#x20;

<figure><img src="/files/7r9X6beAjem2GtSbetEA" alt=""><figcaption></figcaption></figure>

* In the Lobby, open the Space menu and choose Share.

<figure><img src="/files/yi2f2gfhudiuKRlBWgRE" alt=""><figcaption></figcaption></figure>

Using a Space Code:

* In the Lobby, click on the “Join Space” button and enter the code.

<figure><img src="/files/zFZfSVnqlOD2Gyofae43" alt=""><figcaption></figcaption></figure>

## Via web

How to get a Space Code/Link:

* In the Dashboard, open a specific space and click on the Share button.&#x20;

<figure><img src="/files/3BBHFL4WhZ7UFklpOkCt" alt=""><figcaption></figcaption></figure>

* In the Dashboard within the list of spaces, select a space, open the menu, and click on Share.&#x20;

<figure><img src="/files/DKGAdKpDvekMcVcmFlPQ" alt=""><figcaption></figcaption></figure>

Using a Space Code:

* In the “Spaces” section of the Dashboard, click “Join Space” and enter the code. After adding a space through the Dashboard, you will also see this space in VR. In addition, you can open the space in VR by simply clicking on the “Open in VR” button in the Dashboard.

<figure><img src="/files/nY8lY3lcDL5Ppd84VPn7" alt=""><figcaption></figcaption></figure>


# How to embed spaces

You can embed space into the other platforms - it will be opened in view-only mode like when you [open spaces in a browser](/export-and-sharing/sharing-spaces-via-app-web#via-web).&#x20;

To embed a space, follow these steps:

1. Go to [the ShapesXR Dashboard](https://shapes.app/).
2. Open the space actions and click on the Share button.

<figure><img src="/files/kjvabkfkrA6fzyo1lZim" alt="" width="375"><figcaption></figcaption></figure>

3. Click on the Embed button.&#x20;

<figure><img src="/files/DVldSJHV45AToCgsPeeQ" alt="" width="337"><figcaption></figcaption></figure>

4. Now, you can:

* Copy the embed link.
* Define the starting Frame and Viewpoint.
* Set your preferred embed size or set it as responsive.

<figure><img src="/files/avyKQDpgyVBW8aSw1zj1" alt=""><figcaption></figcaption></figure>

5. Paste the link into the desired platform.

For example, you can embed your space into Notion in two ways:

* start writing "/embed", click on the Embed option, and paste the link.
* copy the space link in the Share menu, paste it into Notion, and choose "create embed".

<figure><img src="/files/9pzRBXtjDcg4zvmGP5lo" alt=""><figcaption><p>The first way to embed a space</p></figcaption></figure>

<figure><img src="/files/iHD3608pJbYBMn0wZQz5" alt=""><figcaption><p>The second way to embed a space using a space link</p></figcaption></figure>

<figure><img src="/files/unO4L0HresNR3A3MMdlU" alt=""><figcaption><p>This is how embedded space looks like in Notion</p></figcaption></figure>

Use the ShapesXR button to open this space on the Dashboard and the Share button to get a link to this space. This link is also accessible in the Share menu on the Dashboard and can be used as a visual link on social media.

{% hint style="info" %}
Embedding a space is a convenient way to showcase your space to individuals without ShapesXR accounts.
{% endhint %}


# Unity Integration

Install our Unity plugin to import ShapesXR spaces into the Unity editor. This allows you to enhance your spaces with interactive elements, model replacements, particle systems, and more. However, please note that exporting spaces back to ShapesXR is currently not supported.

### Installing the Unity Plugin

{% hint style="info" %}
Please note that we highly recommend using **Unity 6**, as it ensures a smoother experience without additional setup.&#x20;

If you've already installed an old version of the Unity plugin, please remove it and install it again by following the steps below.
{% endhint %}

{% hint style="danger" %}
The plugin may have compatibility or stability issues with Unity 6.4.\
If you encounter any issues, please contact our support team at <support@shapesxr.com> for assistance.
{% endhint %}

1. [Download the package](https://tvori-builds.s3.us-east-1.amazonaws.com/UnityPlugin/ShapesXRUnityIntegrationV1.31.zip)
2. Install Unity (go to the official[ Unity page](https://unity3d.com/get-unity/download) and install Unity Hub by clicking the Download button). *If you already have it installed, skip to the next step.*
3. Open the Unity Hub and click the “New Project” button.&#x20;

<figure><img src="/files/yDNFnWItNjU4gSFydDMO" alt=""><figcaption></figcaption></figure>

4. Choose the Editor Version (we recommend version 6), “Universal 3D” template, set the project name and location, and then click “Create project”.

<figure><img src="/files/sEfS9qnPGuvOrLjzdGiG" alt=""><figcaption></figcaption></figure>

5. Go to Edit -> Project Settings -> Package Manager and add the following dependencies:

<figure><img src="/files/RErmNVEbgQXywCYIsK3O" alt=""><figcaption></figcaption></figure>

**Alternatively**, you can open the **YOUR\_PROJECT/Packages** directory in the file manager, find the ***manifest.json*** file there, open it, add this block on top, before the “dependencies” line, and save changes:

```
"scopedRegistries": [
    {
      "name": "package.openupm.com",
      "url": "https://package.openupm.com",
      "scopes": [
        "com.neuecc.messagepack"
      ]
    }
  ],
```

Please note how it should look in the manifest.json file:

<figure><img src="/files/EZbdt6vQnyi92HoP9ZD8" alt=""><figcaption><p>How it should look in the manifest.json file</p></figcaption></figure>

6. Open the **YOUR\_PROJECT/Packages** directory in the file manager, and unpack the downloaded zip into it. Reopen the project after that.

<figure><img src="/files/Dkb1Ahp7Rt0SqADEOCxZ" alt=""><figcaption></figcaption></figure>

7. When you open your Unity project again, wait until the import process is complete and all scripts have finished compiling.\
   Once done, the **ShapesXR** tab will appear in the main menu — your plugin is now ready to use.

<figure><img src="/files/c5OUAxOaLvHBaNGcDfY7" alt="" width="563"><figcaption></figcaption></figure>

### Unity plugin usage

1. Go to the **ShapesXR** tab and select **Importer**.\
   The plugin window will open, and you can dock it anywhere you prefer — for example, next to the **Inspector** tab.

<figure><img src="/files/ZcnGA2KFBw0w3ItsSp0f" alt=""><figcaption></figcaption></figure>

2. In the **ShapesXR Importer** window, enter the code of the space you want to import (learn how to find the Space code [here](/export-and-sharing/sharing-spaces-via-app-web)) in the input field, then click **Import Space**.

<figure><img src="/files/FINWoKlhjRZ7hexRlRCe" alt=""><figcaption></figcaption></figure>

3. If prompted by Unity during the first space import, please import the **TMP Essentials** package.

<figure><img src="/files/deCoZ66PBI3pbe9rESdX" alt="" width="563"><figcaption></figcaption></figure>

4. After the space is imported, a new game object will appear in the scene, representing your space along with all its scenes and viewpoints.

<figure><img src="/files/FOMNOSkFSAwBemWxIFoi" alt=""><figcaption></figcaption></figure>

5. Select your space in the **Hierarchy**. In the **Inspector** tab, you’ll see the **Space Descriptor** script enabled.\
   This script lets you view the space code, quickly cycle through scenes using a slider, and reimport your space. You can safely remove this component if you don’t need these functions.

<figure><img src="/files/O7Gqr9wqfwFZyavDJ9t4" alt=""><figcaption></figcaption></figure>

### GLB/GLTF formats support

{% hint style="warning" %}
Please note that we don’t support multiple textures per material yet and your models must comply with import recommendations for best results.
{% endhint %}

You can import GLB/GLTF models from your space to Unity.

* To import them into Unity, you need to install a GLB/GLTF plugin. We recommend [glTFast](https://github.com/atteneder/glTFast) ([GitHub - atteneder/glTFast: Efficient glTF 3D import / export package for Unity](https://github.com/atteneder/glTFast))
* In case you’re using another plugin, you should add a name for the shader property for your main texture, since every plugin might generate and use different materials/shaders.

<figure><img src="/files/z6jIKGJG1dQzQyoCFF2G" alt=""><figcaption><p>Add a name for shader property for your main texture</p></figcaption></figure>

***

Join our [Discord server](https://discord.com/invite/3xET92YteE) to ask any questions regarding the Unity plugin and share your creativity with us. Or email us with any questions at <Support@shapesxr.com>.


# Taking photos

You can take photos directly within the app.&#x20;

<figure><img src="/files/15fdNxqII6cijyNC9xiv" alt=""><figcaption></figcaption></figure>

Open the Scenes menu, go to the Viewpoints tab, and click on the viewpoint with the trigger button to open the viewpoint preview. It allows you to see what your screenshot will look like. You can adjust the viewpoint or objects and see the changes in real time in the preview.&#x20;

Use the FOV slider to adjust the FOV for more precise photos. Activate the "Show space info in screenshot" toggle if you want to add space info to your screenshot.&#x20;

Click on the "Take screenshot" button to take a photo. It will appear in the Exported folder in your files in the [Dashboard](https://shapes.app/files/).&#x20;


# How to import into Unreal Engine 5

Here’s the revised step-by-step guide for importing a model from Shapes into Unreal Engine 5:

1. **USD Format for Scene Import**: The only format that allows importing a complex scene from Shapes into Unreal Engine is USD.
2. **Export from Shapes**:

* In Shapes (both in VR and Web Editor), select the current scene or the specific objects you want to export.
* Use the Export Current Scene or Export Selected Objects option to export them in USDz format. (more - [Export](/export-and-sharing/export-as-3d-model))

3. **Download the File**: After exporting, go to the Shapes Dashboard and download the exported file.
4. **Rename and Extract**:

* Rename the file from `.usdz` to `.zip` (for example, `file_name.usdz` → `file_name.zip`).
* Extract the contents of the archive. Inside the folder, you will find a `.usdc` file (the main scene file), along with resources such as textures.

5. **Install the USD Plugin in Unreal Engine**:

* Open Unreal Engine 5 and go to Edit > Plugins.
* Search for USD Importer and enable the plugin.
* Restart Unreal Engine for the plugin to activate.

6. **Import the `.usdc` File into Unreal**:

* In the Content Browser, click Import and select the `.usdc` file from the extracted folder.
* Review the import settings and click Import.

{% hint style="info" %}
Note that color discrepancies often result from Unreal Engine’s lighting settings. Try adjusting settings like Auto Exposure to match the display in Shapes more closely.
{% endhint %}

The import option described above will merge all models into one, which may not be desirable **if you want to edit each model separately** later. In this case, you can use an alternative option:

1. Use **File > Import into Level** to import the models.
2. In the import settings, under **Kinds to Collapse**, uncheck all checkboxes.
3. Click **Import** - this will import the **UDSc file** as separate Static Mesh assets in the **Asset Browser**, and an actor will be created in the scene using these assets like it was in Shapes.
4. To save the actor as a **Blueprint** (similar to a prefab in Unity or a component in Figma to reuse between scenes) if needed:

* Select the actor in the scene.
* In the **Details** panel, find the option **Convert this Actor to Reusable Blueprint Class**.
* Choose an option like **Harvest Components** to create a reusable Blueprint.


# Presentation

{% hint style="info" %}
Available for: [paid plans](https://www.shapesxr.com/plans)
{% endhint %}

<figure><img src="/files/RUeaGuPCP2OnzNyDA66e" alt=""><figcaption></figcaption></figure>

### Frame Sync

Frame Sync mode allows users to synchronize their frames, **ensuring everyone is on the same frame**. Everyone controls the navigation and can edit the frame.&#x20;

Go to the **Collaboration menu -> Present tab**, and click on **Start Frame Sync**.&#x20;

Every online user in the space will get a notification that Frame Sync has started.&#x20;

Everyone who joins this mode will be synchronized on the same frame. Anybody can change the frame, and the rest of the participants will magically follow.

### Presentation

Presentation mode allows the **Presenter to control the frame navigation**. The participants cannot edit the frame and navigate independently.&#x20;

#### As the Presenter

Go to the **Collaboration menu -> Present tab**. There are available options you can adjust before starting the Presentation:

* Mute everyone - all participants will be muted (they can unmute themselves).
* Show avatars - deactivate this toggle if you don't want to see participants' avatars.
* Audience position - you can choose the initial position for participants.&#x20;

Click on Start presentation to start it - the audience will be teleported to the selected position.&#x20;

Only the Presenter can stop the presentation. If the Presenter leaves the space, it stops automatically.

#### As a participant

Once the presentation starts, you will be moved to the initial position chosen by the Presenter, and your menu and navigation will be locked. You can mute/unmute yourself and go to the Lobby.


# Copy & Paste

{% hint style="info" %}
Copy & Paste between spaces is available for [paid plans](https://www.shapesxr.com/plans).

You can Copy & Paste within one space in the Free plan.
{% endhint %}

### How to Copy & Paste Objects

You can copy and paste any object in your space.

**To copy an object**: select an object, and click on the "Copy" button in the action bar to duplicate the object to the clipboard.&#x20;

**To paste this object**: choose the Select tool using the [Toolbar](/objects-creation/tools-and-toolbar), and in the opened menu, click on the "Paste" button - the object will appear in the current frame at the same coordinates as the original one.&#x20;

{% hint style="info" %}
If you paste the object into the same frame where you copied it, it will be pasted as a new object.&#x20;

If you paste the object into another frame, it will be pasted as a snapshot of the original object (it will be animated).&#x20;
{% endhint %}

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FxDJcdoCkN6s8AXZ6x58R%2Fcopy%20paste.mp4?alt=media&token=c50b7f50-29fa-4d58-b3eb-63bfc0985fcd>" %}

### How to Copy & Paste Object Properties

You can copy and paste all object properties, transform (all properties that are contained in the Transform section of the Object Inspector), and material properties separately.&#x20;

**To copy object properties**: select an object, and click on the **Copy** button.&#x20;

**To paste all properties:** select an object, click on the Paste button in the action bar, and choose **Paste all properties** to apply all properties from the copied object to the selected object.&#x20;

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FA7A7SNH7WfCjJ5lAAqUJ%2Fpaste%20all%20properties.mp4?alt=media&token=9c2f6b2f-7fed-4428-882a-d3c00a3d7e0c>" %}

**To paste all properties:** if the original object has interactions connected to it, you can paste only those interactions. Select an object, click on the Paste button in the action bar, and choose **Paste interactions** to create the same interactions for the selected object.&#x20;

**To paste transform:** select an object, click on the Paste button in the action bar, and choose **Paste transform** to apply transform properties from the copied object to the selected object.&#x20;

**To paste material:** select an object, click on the Paste button in the action bar, and choose **Paste material** to apply material properties from the copied object to the selected object.

**To paste shape parameters:** select an object, click on the Paste button in the action bar, and choose **Paste shape params** to apply shape properties from the copied object to the selected object (only works for objects created with the [Shape tool](/objects-creation/shape-tool)).

**To paste as a new object:** select an object, click on the Paste button in the action bar, and choose **Paste new Object** to create a new object with the same properties as the copied object has in the current frame.


# Holonotes

Holonotes allow you to leave comments by recording your voice and the full movements of your avatar to guide your audience's attention to what matters spatially.

### How to record a holonote

1. Go to the Collaboration menu -> Comment tab.
2. Click on the + button - the preview will appear before you.
3. Press the Start recording button in the menu or the Record button on the preview to begin recording. After that, a three-second countdown begins. Once the countdown is finished, you can start commenting and moving.
4. When you're done, press the Stop Recording button in the menu, the Record button on the preview, or the Stop button on the dominant controller (A/X button). A holonote icon will appear in the space.&#x20;

{% hint style="info" %}
You can move the holonote icon in the space by grabbing its bottom bar with the grip button.
{% endhint %}

<figure><img src="/files/EHifGpD1cNEDPuZ2n2GP" alt=""><figcaption></figcaption></figure>

### How to play a holonote

* **Hover over the holonote icon and click on it with the trigger button**. You will be teleported to the holonote viewpoint.&#x20;

{% hint style="info" %}
You can turn the teleportation off and hide holonotes icons in the Settings (Settings menu -> Holonotes section -> Teleport on Play, Show holonotes in space).
{% endhint %}

* Or you can go to the Collaboration menu -> Comment tab, and click on the play button on the holonote card. Click on the play button in the opened preview.&#x20;

<figure><img src="/files/IIfTYz55Fyb4maFD4Xpj" alt=""><figcaption></figcaption></figure>

### How to delete a holonote

Grab the holonote's bottom bar and throw it away as any other object. Or go to the Collaboration menu -> Comment tab, and press the Delete button on the holonote's card.&#x20;

<figure><img src="/files/jSh61q4wfUNpVq8kb2EA" alt=""><figcaption></figcaption></figure>

### How to rerecord a holonote

Go to the Collaboration menu -> Comment tab, and press the play button on the holonote card. Click on the Edit button in the opened preview. Then press the Re-record button and make a new record after the countdown.&#x20;

### How to rename a holonote

Go to the Collaboration menu -> Comment tab, and click on the play button on the holonote card. Click on the Edit button in the opened preview. Type the new holonote name into the text field and save the changes.


# Web Editor

The Web Editor lets you create and **edit spaces directly in your browser** — no VR headset required. It’s a fast and convenient way to iterate on your ideas, make quick adjustments, or collaborate without using a headset.

Designed to feel familiar, the Web Editor closely matches the ShapesXR VR app interface, so you can jump in immediately with no learning curve. While some VR-specific tools and settings are exclusive to the headset experience, the Web Editor gives you everything you need for efficient editing, content updates, and rapid prototyping.

<figure><img src="/files/v0soiShgC9ThtJgPCsmo" alt=""><figcaption></figcaption></figure>

#### **How to Start the Web Editor**

1. Go to the **Dashboard**.
2. **Create a new space** by clicking the **+New space** blue button available on any tab in the Spaces section. The new space will open in a new tab.

<figure><img src="/files/yXMq62XRzan3ELOcfEEX" alt=""><figcaption></figcaption></figure>

3. **Click on an existing space** so that the space page opens, and then click the blue **Open editor** button. The space will open in a new tab.

<figure><img src="/files/LojgwxS5KCqmQR8pxc3c" alt=""><figcaption></figcaption></figure>

#### Basic Actions and Controls

You can find a list of **available controls and hotkeys** for moving and performing basic actions in the Web Editor on this [page](/web-editor/controls-and-hotkeys).

Also, you can **teleport by selecting a viewpoint** from the Viewpoints tab.

#### How to Spawn Objects

**Imported Files**

Open the **Assets** **tab** in the left-side menu, click on **My Files**, select the required asset from imported files, and **click it to spawn the asset** at the center of the screen.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2Fbv6z5dfuFuglwpfXaCfH%2Fspawn%20an%20asset.mp4?alt=media&token=5700cd55-89c2-47a2-ae02-621824cf74d5>" %}

**Built-in Assets**

Use **the panel at the top** of the screen to add a primitive to your scene.

<figure><img src="/files/pwM91qU5UwaW0p5E4hMG" alt="" width="375"><figcaption></figcaption></figure>

Alternatively, open the **Assets** **tab** in the left-side menu, select the required asset from the built-in Library, and **click it to spawn the asset** at the center of the screen.

**Text**

Use **the panel at the top** of the screen to add text to your scene.

<figure><img src="/files/gUsxiVfjcy9wLSgTvKYC" alt="" width="375"><figcaption></figcaption></figure>

#### How to Edit Objects

When you select an object, the [Object Inspector](/object-inspector) opens in the right-side menu. It provides quick access to the **object’s settings**, allowing you to **edit properties** after creation and manage the object’s state in the space with greater precision.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FtGDP6GPVhjTB41joRN03%2Finspector.mp4?alt=media&token=3ce4e366-15dd-4b76-b3bb-d4d17906d2b9>" %}

When an object is selected, [Gizmo](/objects-manipulation/gizmo) handles also appear on it. You can **move and scale** the object using the Gizmo or by adjusting values in the **Transform** section of the Object Inspector.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FlvJDTPNYrdbx4br8E7r3%2Fgizmo.mp4?alt=media&token=5aeb1eca-9ff2-4181-8174-04cf007128d5>" %}

#### Manipulations with Frames

Go to the **Frames** **tab** in the left-side menu to manage frames in your space.

From the action panel at the bottom of the menu, you can duplicate frames, add empty frames, switch to the Background scene, and perform other actions.

**Right-click a frame** to rename, duplicate, or delete it.

#### Collaboration

Collaboration is supported in the web version of ShapesXR, making teamwork seamless across devices. You can collaborate in real time with other users working in VR or directly in the Web Editor — no headset required.

Web users can also take advantage of powerful features such as **Presentation** and **Scene Sync**, available based on their subscription plan.

Learn more about **Follow mode** on this [page](/web-editor/follow-mode), which enables Web Editor users to follow a VR user’s viewpoint for improved alignment and shared context.

{% hint style="warning" %}
Please note that voice chat is currently not available in the Web Editor.
{% endhint %}


# Controls and Hotkeys

**Orbit** = Hold Left Button + Mouse move&#x20;

**Pan** = Hold Right Button + Mouse move / Hold Middle button + Mouse move / Ctrl/Command + Right Mouse button

**Zoom to cursor** = Mouse wheel / Touchpad scroll / Ctrl + Right button + Mouse move

**Move forward/left/backward/right** = WASD

**Move up/down** = Q/E

**Add/remove the object to selection** = Shift + Click on an object

**Copy** = Ctrl/Cmd + C&#x20;

**Cut** = Ctrl/Cmd + X&#x20;

**Paste** = Ctrl/Cmd + V

**Duplicate** = Ctrl/Cmd + D

**Undo** = Ctrl/Cmd + Z

**Select All** = Ctrl/Cmd + A

**Lock/Unlock** = Ctrl/Cmd + L

**Lock All** = Ctrl/Cmd + Shift + L

**Unlock All** = Ctrl/Cmd + Shift + U

**Group/Ungroup objects** = Ctrl/Cmd + G

**Deselect All** = Esc

**Center the camera on selected** = C

**Focus on selected** = F

**Toggle Background** = B

**Switch frames** = Arrow keys&#x20;

**Delete selected objects** = Delete/Backspace


# Follow mode

{% hint style="info" %}
Available for: [paid plans](https://www.shapesxr.com/plans)
{% endhint %}

**As a Web editor user**, you can follow another user in VR and see what they see in real time.&#x20;

<figure><img src="/files/hkCRM73siy279Xnt4sUp" alt=""><figcaption></figcaption></figure>

To enable **Follow mode** in the Web Editor, open the **User List** at the top of the right-side menu. Select the online VR user you want to follow and click the **Follow** button next to their name.\
Once enabled, your view will sync with that user—you’ll see exactly what they see in VR. Follow mode keeps you aligned across frames, viewpoints, and even during **Play mode**. While following, camera movement and frame switching are controlled by the VR user and cannot be adjusted independently.

<figure><img src="/files/srZBKVq6LTe3QOzCAwaB" alt=""><figcaption></figcaption></figure>

To stop following the user, click the **Stop** button on the bottom notification.

<figure><img src="/files/GeRkH0G9xKDXGTzUeHPl" alt=""><figcaption></figcaption></figure>

As a VR user, you can invite online Web Editor users to follow your view. When web users are present in the space, click the **Follow Me** button in the hand menu to have them instantly follow you. Once enabled, web users will see exactly what you see in VR as you move through the experience.

<div><figure><img src="/files/GddtY0hKszKpRCdl5djd" alt=""><figcaption></figcaption></figure> <figure><img src="/files/8JtI3XdmSfAQzftyFoKS" alt=""><figcaption></figcaption></figure></div>


# Dashboard

The ShapesXR dashboard is your central workspace for managing spaces, files, and account settings. From here, you can access your work, organize projects, collaborate with others, and connect your account to the VR application.

### Navigation

<figure><img src="/files/7Xk71kOajLRuo2dTBJsP" alt=""><figcaption></figcaption></figure>

The left sidebar helps you quickly move between different sections of the dashboard:

* **Recents**\
  Displays recently opened spaces, including your own spaces and spaces shared with you.
* **My spaces**\
  Contains all spaces created by you.
* **Shared with me**\
  Shows spaces shared by other users. Available actions depend on the permissions you have.
* **Projects**\
  Lets you group spaces into projects for better organization and teamwork.
* **My files**\
  Stores your files, including both imported assets and exported content.

### Spaces List and Actions

Spaces are shown as cards with preview images and names.\
Clicking on a space **preview** opens the [space page](/dashboard/space-page), where you can view detailed information and start editing the space directly in the [**web editor**](/web-editor).

Each space also has a **context menu** (three-dot icon) that provides actions such as sharing, moving to a project, duplicating, renaming, or removing the space from Recents or a project.

Available actions may vary depending on your access level and plan.

### Organization status

The top-right area displays your **current organization**.\
Clicking on the organization name in the top-right corner opens **Organization Settings**, where you can [manage users and basic organization preferences](/dashboard/project-management).

More details for how to set up your organization/license you can find in our [Guide pages](/dashboard/guides).

### Profile Settings

The **profile icon** in the top-right corner opens your personal and account settings.

**Personal Info:** here you can manage your account settings and view key information:

* Edit your name and email
* See your **current plan**
* View your **User ID**
* Check the login method used for your account

**Integrations tab:** allows you to set up connections with external services.\
You can generate and manage an integration token for integrating ShapesXR with tools like Figma.

### Headset Pairing

To use ShapesXR in VR with this account, you need to pair your headset.\
Click **Pair headset** in the top-right corner to connect your VR headset and sync your spaces and projects with the VR app.

### Quick Actions

From the top-right corner, you can:

* **Join a space** using an invite
* **Create a new space** to start working immediately


# My files

The **My files** section is your personal file system in ShapesXR.\
Here you can manage all files related to your work — imported assets, exported content, and deleted files.

This section keeps your assets organized and makes them available both in the web dashboard and in VR.

<figure><img src="/files/4QJ60cHyMyWRXR8VT5ke" alt=""><figcaption></figcaption></figure>

### Importing Files

You can add files to ShapesXR in several ways:

* Using the **Import** button
* Drag and drop files directly into the browser
* Copy and paste files, such as images from other websites or tools

Imported files are immediately available for use in your spaces.

### Supported Content

You can import a wide range of content, including:

* **Images** (PNG, JPG)
* **3D models** (OBJ, GLB, glTF as ZIP, and STL)
* **Audio files** for use with interactivity (MP3 and WAV)
* **Figma objects and prototypes**
* **YouTube videos**
* **MP4**

### File Actions and Management

Files can be managed in two ways:

* Using the **three-dot menu** on a file
* By selecting one or multiple files

Available actions include:

* Replace
* Download
* Move
* Duplicate
* Rename
* Remove

This makes it easy to organize and update your assets as your project evolves.

### Exported Files

All exported content is stored in the **Exported** folder.\
Exports are created using a dedicated **Export** button inside the application or Web Editor and remain available for download and reuse.

### Trash and Storage Usage&#x20;

Deleted files are moved to the **Trash**.\
Files in Trash still take up storage space.

{% hint style="warning" %}
**Attention:**\
To fully free up storage and permanently remove files — including from the VR application — you must delete them from the Trash.
{% endhint %}


# Space page

The Space overview page is the main entry point for accessing, previewing, and sharing a Space.

<figure><img src="/files/Ai2x54UORWkuORdGWqe6" alt=""><figcaption></figcaption></figure>

### Quick actions

* Close Space
* Open in VR application
* Share
* More actions (Duplicate, Rename, Leave)

### Preview your Space

The preview area helps you quickly understand what the Space contains.

Clicking on the preview opens the **Web Viewer** — a lightweight tool for viewing the Space without editing. It is ideal for reviewing content, presenting ideas, or sharing a Space with others without giving edit access.

### Open in the Web Editor

From the overview page, you can continue working in the full[ Web editor.](/web-editor)

* The Web editor provides advanced creation tools and real-time collaboration.
* It’s designed for building and editing Spaces together with your team.

### Space details at a glance

The footer shows essential information about the Space:

* Author
* Your permission level
* Creation date
* Your last entry

### Share and collaborate

The **Share** dialog makes it easy to invite others:

* Share via link, embed, or Space code
* Control permissions for anyone with access
* Manage and revoke external users at any time


# Project Management

{% hint style="info" %}
Available for: [paid plans](https://www.shapesxr.com/plans)
{% endhint %}

Projects are useful when it comes to working within teams. They combine spaces, shared files, and members with different access to the project.

## Organization

Projects live within an **organization**. An organization can have multiple **admins** who can invite other organization members, including other admins, manage projects, their files, and members.

If you're an organization admin, in the Dashboard click on your organization's name and go to the **Organization settings** to manage participants.&#x20;

<figure><img src="/files/rLjUI8zLiJOtQQdptG69" alt=""><figcaption></figcaption></figure>

**To add a new member** press the "Invite" button, type the email of this person that is associated with their ShapesXR account, and choose their role and the project(s) you want to invite them to.&#x20;

<figure><img src="/files/1oVdCegkFp7g8qkVtHa6" alt=""><figcaption></figcaption></figure>

Opposite each member, there is a 3 dots button to call up a menu with the following options:

* **Set/Revoke Admin role**.
* **Project permissions** - you can see the role this user takes in the project and change it.
* **Unseat** - if the user has an editor role in any project, it means they take a seat (license); you can release the seat by clicking this button.
* **Remove user** - delete this user from the organization.

<figure><img src="/files/K428mN41HlNGdrwR73w0" alt=""><figcaption></figcaption></figure>

In the Preferences tab, you can change the **organization name**.&#x20;

## Projects

Think of a project as a directory with shared spaces and files. Any project member can see and open project spaces with access defined by their role. Members with an Editor role can also add and change spaces in the project.

A user can have access to multiple projects and have different roles in those projects.

Only organization admins can create and delete projects. Admins and editors can rename projects.

#### **To create a new project, an organization admin should:**

1. Go to the Projects tab in the Dashboard.
2. Press the "+ New project" button.
3. Type a name for the new project and press "Create".

<figure><img src="/files/0xRnu9zcvzz1gYR2YhGe" alt=""><figcaption></figcaption></figure>

#### **To rename a project, an organization admin/project editor should:**

1. Go to the project's page.
2. Click on the 3 dots button and choose "Rename".&#x20;
3. Type a new name for the project and press "Rename".

<figure><img src="/files/MR0AhHlcYk907cD7P3A0" alt=""><figcaption></figcaption></figure>

#### **To delete a project, an organization admin should:**

1. Go to the project's page.
2. Click on the 3 dots button, choose "Delete project", and confirm the deletion.&#x20;

<figure><img src="/files/K64ATASa9kH3RvETxbT4" alt=""><figcaption></figcaption></figure>

## **Members** <a href="#members" id="members"></a>

Each project has a list of members with different roles.

If you are a project member with an Editor role or an organization admin, you can **invite new members** to a project.

1. Ask your colleagues to go to the Dashboard and associate their emails with their accounts. They will be prompted to add an email when they sign in to the Dashboard for the first time.
2. Go to the "Members" tab in a project, press "Invite" and enter an email associated with the user's account. Choose the role for this person and send the invitation. The person will receive an email at this address with further instructions.

You can change the role for each member or remove them from the project.

<figure><img src="/files/eCHvy8KNRLsIV4CKk4zC" alt=""><figcaption></figcaption></figure>

## **Roles & Permissions** <a href="#roles" id="roles"></a>

There are 3 roles in any project: **viewer, commenter, and editor.**

* Viewers can only view spaces.
* Commenters can only comment in spaces.&#x20;
* Editors can change anything in any space within the project. Editors can also invite and remove members, and change their roles.

## **Seats (L**icenses) <a href="#seats-licenses" id="seats-licenses"></a>

A seat gives the ability to edit spaces within projects. Seats are tied to Editor roles. As soon as a member becomes an editor in a project, a seat is attached to their account.

If the Editor role lifts from that person, then the seat gets unassigned from the user as well.

## Shared files

In Shapes, you can share files within your team. You can share any type of file available in Shapes - png, jpg, obj, glb, glTF (as zip), mp3, wav, and Figma files. Each project in your organization includes a tab called "Shared files", enabling you to utilize common files inside the spaces of that project.

The Shared Files tab is **restricted to project admins and editors**, who have the ability to add and remove files.

<figure><img src="/files/LNT0O0Eum4sgQ2n0J4cL" alt=""><figcaption></figcaption></figure>

There are two methods to **share files**:

* **Upload** directly to the folder using drag-and-drop or the Upload button.
* **Move files** from your personal files (My files tab).&#x20;

To move a file from your personal files to the Shared files, navigate to the My Files tab, select the desired file, click the Move button, and choose the project to which you want the file to be assigned.

Furthermore, you can transfer files from a shared folder to your personal files (My files) if those files were uploaded by you.

In the app, the Shared Files tab is available in spaces that belong to a project - go to the project space, Assets menu -> Shared files tab to reach the shared assets for this project.

Shared files can be organized using [folders](/import/file-management-folders). Additionally, each project features a Trash bin where removed assets are initially stored. These assets remain visible within spaces until the Trash bin is emptied.

For more information on file size limitations or available formats, please refer to <https://learn.shapesxr.com/import>.

The **storage for shared files** varies depending on the plan: 5 GB per project for the Business plan and 10 GB per project for the Enterprise plan.


# Guides

{% content-ref url="/pages/Le4GK2fBFqXbq7Q3dMad" %}
[Business license activation](/dashboard/guides/business-license-activation)
{% endcontent-ref %}

{% content-ref url="/pages/pgA4xoYbNxzf5s6ZxNBo" %}
[Education license activation](/dashboard/guides/education-license-activation)
{% endcontent-ref %}

{% content-ref url="/pages/WyE5bvOSekzW1bBSazBe" %}
[Email change guide](/dashboard/guides/email-change-guide)
{% endcontent-ref %}


# Pro license administration

Here are the instructions on how to manage your ShapesXR Pro subscription.

The account you use to activate the Pro subscription will be appointed as Admin. Admins can manage seats, invite other members to the subscription, and change payment information.&#x20;

### How to find subscription settings

Click on the dropdown menu in the top right corner with your subscription and choose the Organization settings.&#x20;

<figure><img src="/files/mc3c10H4zmk2BYonARXx" alt=""><figcaption></figcaption></figure>

### How to invite new member

1. Go to the subscription settings, and click the Invite button for an empty seat.&#x20;

<figure><img src="/files/IpXGCEvN76yG1AQ1O8cf" alt=""><figcaption></figcaption></figure>

2. Type an email for the person you want to add to your subscription and click on Send invite. This person will receive an email with further instructions.&#x20;

<figure><img src="/files/3oVB0XICctNYFpvw5PO5" alt=""><figcaption></figcaption></figure>

### How to invite an admin

Go to the subscription settings, click the Invite admin button, type an email for a new admin, and send an invite. This person will receive an email with further instructions.

<figure><img src="/files/m37XQ1SEeFzH7GqXGPvi" alt=""><figcaption></figcaption></figure>

### How to add more seats

Go to the subscription settings, and click the "Add seats" button. Then choose the number of seats you want to add, and follow the instructions.

<figure><img src="/files/KQ0rjw7fvsfnCNXAWTdo" alt=""><figcaption></figcaption></figure>

### How to change payment information

Go to the subscription settings -> Preference tab, and click the Settings button. You will be redirected to the payment service page, where you can change your payment information.

<figure><img src="/files/sqOXW7pymXPYLkdCRsCt" alt=""><figcaption></figcaption></figure>


# Business license activation

Here are the instructions for setting up the Shapes business license. Activate your new features from the Dashboard:

1. Check your email for an activation link.

<figure><img src="/files/wi8ZlQMLJHMTOOWKXCS2" alt=""><figcaption></figcaption></figure>

2. Log in to the [shapes.app](https://shapes.app/) panel.

<figure><img src="/files/rDgjtd94qcp81vrto19k" alt=""><figcaption></figcaption></figure>

3. Select the Projects tab and click on Create New Project.

<figure><img src="/files/MDiFNW0f0legTYl6MBtA" alt=""><figcaption></figcaption></figure>

4. Name your project. After creating you will be redirected to this project page.

<figure><img src="/files/l7qa1Tx9ipTmz2xG7aT5" alt=""><figcaption></figcaption></figure>

5. **IMPORTANT:** Add yourself to this Project.

<figure><img src="/files/D3Y7ksqLphSxRBIH5bzh" alt=""><figcaption></figcaption></figure>

6. Open the Members tab, then press the Invite button to invite team members to this project.

<figure><img src="/files/S5FWn9gFF4s28HEkm0XP" alt=""><figcaption></figcaption></figure>

7. Type an email and choose the role for this person.

<figure><img src="/files/bRho6f1XuhR6Xk4X7GkR" alt=""><figcaption></figcaption></figure>

8. Press the Send Invitation button.

<figure><img src="/files/sHlh23jIplDzV5zeDcLW" alt=""><figcaption></figcaption></figure>

9. You can change the role of any project member in the Member tab.

<figure><img src="/files/fEouyvGI1raBj3MqToN1" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Admins do not inherit access to projects.
{% endhint %}

{% hint style="info" %}
Only Editors will consume licenses (seats).
{% endhint %}

10. The license is activated - now you can create spaces inside the project or move your existing space into it.&#x20;


# Education license activation

To activate your Education license and unlock the full potential of ShapesXR, please follow these steps:

1. Check your email inbox. An invitation email from <hey@shapesxr.com> has been sent to the email address you specified in the application form (Email Associated with University/School). Accept the invitation by clicking on the Accept invitation button in this email. You will be redirected to [shapes.app](https://shapes.app/).

{% hint style="info" %}
If you can't find the email, be sure to check your Spam folder as well.
{% endhint %}

2. Log in to the [shapes.app](https://shapes.app/) panel with email from step 1.
3. Select the Projects tab and click on the "+ New Project" button.

<figure><img src="/files/W8nk1BF4AJkIVbmYmwtr" alt=""><figcaption></figcaption></figure>

4. Name your project and click on "Create" - you will be redirected to the project page.

<figure><img src="/files/hRUHDsZrSYG7ApXf7nAZ" alt=""><figcaption></figcaption></figure>

5. **IMPORTANT:** Add yourself to this project.

<figure><img src="/files/wzp6maW9j9uW4it1YiHK" alt=""><figcaption></figcaption></figure>

6. Open the Members tab, then press the Invite button to invite team members to this project. Write an email and choose the role for this person, then press "Invite".

{% hint style="info" %}
To use ShapesXR for educational purposes, each student should have a headset, a separate Meta account, and a ShapesXR account. You need to add each participant to the project as a member and assign them the appropriate role.
{% endhint %}

<figure><img src="/files/pNofq0Gh8NWP9p9HibSb" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/PS2kaHv8elNAXH6BT8DF" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Admins do not inherit access to projects.
{% endhint %}

{% hint style="info" %}
Only Editors will consume licenses (seats).
{% endhint %}

7. Make sure that you have a License - click on the Profile button and choose Profile, in the right top corner you should see Education license.&#x20;

<figure><img src="/files/izGQfRc1kNA2ekKy2iCk" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/Y7SUOKmHHxgD1639sL2z" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Please note!** You'll see an Education license in Dashboard and VR only after creating a project with the editor.
{% endhint %}


# Email change guide

If you need to change your email address associated with [shapes.app](https://shapes.app/), please follow the steps below.

1. Open User Profile Settings

Go to [shapes.app](http://shapes.app/) and log in to your account. Click on your profile picture at the top right corner of the screen and then click on the Profile button in the dropdown menu.

<figure><img src="/files/AjxX3nUMSFPXtmkrfkKx" alt=""><figcaption></figcaption></figure>

2. Verify your account

Click on the "Change email" button and enter your current password to verify your account or reauthenticate if you're using a Google account.

<figure><img src="/files/Hg6ttEWAnSAY7k42kxQt" alt=""><figcaption><p>Click on the "Change email" button</p></figcaption></figure>

<figure><img src="/files/dYI13jKSom8Z8WjDHXR5" alt="" width="563"><figcaption><p>Reauthenticate if you're using Google account</p></figcaption></figure>

<figure><img src="/files/p7wyRedrnIZntDtjILqO" alt="" width="563"><figcaption><p>Or enter your current password</p></figcaption></figure>

3. Choose a new authentication method for the new email (Google or email).

<figure><img src="/files/uXjJG3eNDTZectM5Vudk" alt="" width="563"><figcaption></figcaption></figure>

4. Enter your new email address

To use a Google account as a new authentication method, simply select it from the list of Google accounts.

To use a regular email enter your new email address and click on the "Change email" button.

<figure><img src="/files/23caTbcZanrzVKeVjRfC" alt="" width="563"><figcaption></figcaption></figure>

5. Follow Email Service Instructions

Once you've saved your changes, go to your email service and follow the instructions to confirm your new email address.

<figure><img src="/files/ECcrtqnLGEjmHiHzBObK" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
It is important to keep your email address up to date to ensure you receive important notifications about your account.
{% endhint %}


# Places Dashboard

{% content-ref url="/pages/kugEJS54wiEYuM77LM7f" %}
[Signing In](/places/places-dashboard/signing-in)
{% endcontent-ref %}

{% content-ref url="/pages/Dz7tbbFhhsIhHAOhqZhd" %}
[Pairing and Workstations Management](/places/places-dashboard/pairing-and-workstations-management)
{% endcontent-ref %}

{% content-ref url="/pages/IRSvQBjyTidt1Z3eYILj" %}
[Creating Places](/places/places-dashboard/creating-places)
{% endcontent-ref %}

{% content-ref url="/pages/av5uqmzT9Ag14RjhIoAR" %}
[Web Arranger](/places/places-dashboard/web-arranger)
{% endcontent-ref %}


# Signing In

To use Places, you’ll need a **ShapesXR account**.

1. Go to <https://shapes.app/> and enter your email to get started. Follow the prompts to set your password and create your account.<br>

   <figure><img src="/files/ELyZNZy1o4B7vk5i0vEG" alt=""><figcaption></figcaption></figure>
2. After signing up, check your inbox for a verification email and click the link to confirm your address. You’ll also be asked to complete a short survey to finish setting up your account.
3. Once your account is ready, contact your **Sales representative** to request a Places license. When your license is activated, you’ll gain access to the **Places Dashboard**.
4. As a license holder, you can publish and manage immersive spaces through the Places Dashboard — your central hub for working with Places.\
   To switch to it, open the ShapesXR Dashboard, click the button next to your account icon, and select **Places**.

<figure><img src="/files/RoMMgvTqhQN6oJ2e0GjR" alt=""><figcaption><p>Switching from the ShapesXR Dashboard to Places Dashboard</p></figcaption></figure>

8. You’re now fully set up and ready to use the **Places Dashboard!** \
   Next, you’ll need to [pair your devices](/places/places-dashboard/pairing-and-workstations-management) and [create your first place](/places/places-dashboard/creating-places) to get started.

<figure><img src="/files/GHrAZEh1rxEbbIuc2vQq" alt=""><figcaption></figcaption></figure>


# Pairing and Workstations Management

### Pairing the device

Once you’ve signed in and created an account, the next step is to pair it with your headset using the Places app.

1. Open the **Places app** on the headset you want to connect. On first launch, you’ll be prompted to pair the headset with your account, and a pairing code will be displayed.

<figure><img src="/files/25WhRvirwrQ1s2ZeDVbB" alt=""><figcaption></figcaption></figure>

2. In the **Places Dashboard**, click the **Pair Headset** button and enter the code shown on your headset.

<figure><img src="/files/IWchzinYVRGxbRbn9atj" alt=""><figcaption></figcaption></figure>

3. Once the code is confirmed, your headset will be successfully paired, and you can continue working in the app.

### Workstations Management

A **Workstation** is a per-device license designed for teams that share VR headsets - both internally and externally. With a Workstation license, a headset is unlocked for seamless use: anyone can put it on and launch the **Places app** without needing to log in.

Each Workstation license is linked to a unique alphanumeric access code. Once this code is entered into the Places app, the headset becomes permanently enabled for shared access - no accounts, no friction.

#### Setting Up Workstations

As an admin, setting up a Workstation takes just a few steps:

1. Open the **Places Dashboard** and go to **Organization → Workstations**.\
   Here, you’ll see all purchased Workstation licenses, including those available and currently in use. If this tab is empty, please contact your Sales representative for assistance.

<figure><img src="/files/LPkTUhOi0AtpD7gKD1QY" alt=""><figcaption></figcaption></figure>

2. Click **Link headset to activate** on an available workstation to generate a unique access code. The code will appear in a pop-up window.

{% hint style="warning" %}
**Important:** The access code is valid for 48 hours.
{% endhint %}

<figure><img src="/files/6jeIslfWIeOesmgo3XBP" alt=""><figcaption></figcaption></figure>

3. Launch the **Places app** on the headset you want to pair.\
   On first launch, you’ll be prompted to pair the headset with an account - select **Enter workstation key** instead.<br>
4. Enter the access code from the Places Dashboard and submit it.

That’s it! The headset is now paired with the Workstation license and ready for anyone to use - no login required. In the Places Dashboard, the Workstation status will update to **Active**, confirming it’s in use.

#### Managing Your Workstations

For easier organization, you can:

* Rename Workstations
* View headset details

**Need to move a license to another device or just deactivate it?** Simply click **Revoke headset** on the active Workstation. This frees up the license so you can pair it with a different headset, and the previous device will be automatically logged out.


# Creating Places

Once you log in to the Places Dashboard, you’ll land on the **Places** tab — your central hub for managing all your places.

To get started, click the **New Place** button. You’ll be able to browse a selection of ready-to-use templates. Choose a template that fits your needs or start from scratch with an empty template. After selection, your place will open in the [**Web Arranger**](/places/places-dashboard/web-arranger) in a new tab.

<figure><img src="/files/8SQcku8XhYCIob3D0dP5" alt=""><figcaption></figcaption></figure>

You can also access these templates from the **Environments** **tab**. Simply select an environment you like and click it to create a new place based on that template. Your newly created place will automatically appear in the **Places** tab.

The **Samples** **tab** offers templates that come with pre-installed assets. Use these if you want to quickly create a place that already includes content and components.

<figure><img src="/files/PPKOZjAusMrUP7t3Z6qh" alt=""><figcaption></figcaption></figure>


# Web Arranger

The **Web Arranger** lets you edit places directly in your browser — no VR headset required.

Simply open the **Places Dashboard** and click on a place to launch it in a new tab in the **Web Arranger**, where you can make updates quickly and effortlessly.

### Working with your assets

#### Importing assets

You can upload your own 3D models to Places to help present and pitch your ideas. Supported formats include **.glb**, **.obj**, and **.gltf** (as a .zip file).

To add an asset, either drag and drop it directly into the **Web Arranger** or import it from your computer. Once uploaded, drag the model into your scene. You can snap it to surfaces and adjust its position as needed.

Manipulate an asset by grabbing it with the left mouse button, or select it by clicking, and use the Gizmo to rotate the asset.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVe3WtaDajk6XtByQd1M6%2Fuploads%2FKYWVEGsXQWAFhAjFgSIl%2Fuploading.mp4?alt=media&token=234af2d3-569c-446f-94f9-4f94920e1b38>" %}

You can also quickly duplicate assets by selecting them and using **Ctrl/Cmd + C** and **Ctrl/Cmd + V**.

### Variants&#x20;

In the **Variants** panel, you can create and manage different versions of your scene.

Click the **Plus (+)** button to add a new variant. Select a variant to make it active, and use the arrow keys to quickly switch between variants.

You can also duplicate, rename, and reorder variants as needed.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVe3WtaDajk6XtByQd1M6%2Fuploads%2F6dmKoKolseWKtFT5Sfi5%2Fvariants.mp4?alt=media&token=24da9428-a7a8-4f46-81e7-dba1ea034bf9>" %}

### Viewpoints&#x20;

**Viewpoints** allow you to review and present your scene from specific perspectives. In the VR app, viewpoints act as teleportation points, letting users quickly jump between predefined positions.

Each place includes one default viewpoint. When you enter a place for the first time — both in the web editor and in the Places app — your position is aligned with this default viewpoint.

In the **Viewpoints** panel, you can create new viewpoints based on your current camera position, as well as duplicate, rename, or delete existing ones.

### User session recording (Heatmaps)

Enable the **User Session Recording** toggle to capture a user’s movement and eye gaze while they explore your place in the VR app.

When recording is enabled, each session is saved automatically and organized by variants.

If recordings are available, the panel expands to display a list of sessions. In the Web Arranger, click on any recording to play it back.

Read more about Heatmaps [here](/places/heatmaps-feature).


# Places VR

#### **About the VR Application**

The Places VR Application is where you can experience your Places at true scale using natural, intuitive interactions.

While Places are created and managed through the web dashboard, the Places VR Application lets you:

* Step inside your spaces.
* Explore designs in full scale.
* Interact with objects in real time.
* Review and discuss ideas with your team in a shared environment.

You can easily switch between different design variants and better understand how they feel in context - something that’s hard to achieve in 2D.

No VR experience is required - anyone can jump in, explore a space, and start making decisions right away.<br>

{% content-ref url="/spaces/Ve3WtaDajk6XtByQd1M6/pages/IV2OSBvsx6BdkEyg7R6M" %}
[Requirements & Availability](/places/places-vr/requirements-and-availability)
{% endcontent-ref %}

{% content-ref url="/spaces/Ve3WtaDajk6XtByQd1M6/pages/4gN0lZMPLJUT9GwMmQ9X" %}
[Getting Started](/places/places-vr/getting-started)
{% endcontent-ref %}


# Requirements & Availability

#### **Requirements & Availability**

The VR App is supported on the following headsets:

* **Meta Quest 3**
* **Meta Quest 3S**
* **Samsung Galaxy XR**

***

#### **Where to Get the App**

The VR App is available through multiple distribution platforms:

* [Get Places on the Meta Quest Store](https://www.meta.com/en-gb/experiences/places/24984636414565627/)
* [Get Places on the Google Play (Android XR)](https://play.google.com/store/apps/details?id=com.ShapesXR.Places)
* ArborXR&#x20;

Depending on your setup, the app can be installed directly from a store or deployed to managed devices via ArborXR.


# Getting Started

### **Login & Access**

When you first open the app, you will see the login screen

<div align="left"><figure><img src="/files/mc6kCfl8QE6l7hXYMOCp" alt="" width="365"><figcaption></figcaption></figure></div>

* Admins can access the app using a pairing code (via <https://shapes.app/start> or the headset pairing button in the web dashboard).
* **Users assigned to a workstation can only log in using their workstation key.**

Read more about signing in and logging in [here](/places/places-dashboard/signing-in).

{% hint style="warning" %}
If you continue without logging in, access to spaces is limited - only sample spaces are available for viewing
{% endhint %}

### Lobby&#x20;

After logging in, you’ll land in the Lobby.

Here you can browse:

* Your Places (published and created spaces).
* Sample spaces provided by the app.

{% hint style="warning" %}
Creating new places from samples is only available through the web Dashboard.
{% endhint %}

To open a place or sample, point and tap it with your finger or use a pinch gesture.

Use the account menu in the top-right to:

* Check your account.
* Log out.
* Quit the app.

### Controls & Navigation

* **Reach out and grab** objects to interact with them.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVe3WtaDajk6XtByQd1M6%2Fuploads%2Fl2ohyGNmLl9d3PA099rA%2FGrabbing%20Bags%20Luxury%20Store%20Realistic%20Physic%20Places.mp4?alt=media&token=010e8ad4-bb57-416a-beeb-e6e0971db698>" %}

* **Pinch and drag** with two fingers to move around.
* **Point and hold** to teleport.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVe3WtaDajk6XtByQd1M6%2Fuploads%2FRkF8OK1oGL4B4TEYwaSi%2FTeleport.mp4?alt=media&token=2a07b9be-03ca-43b7-bd86-1eb667bae218>" %}

* The **arrow buttons on the wrist menu** are used to switch between frames.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVe3WtaDajk6XtByQd1M6%2Fuploads%2FsBaR8iBC51FAZkHYSMvm%2Foptions.mp4?alt=media&token=c48ac420-9797-43d4-8227-2c4d876f3f8e>" %}

* Press **Reset** to restore objects to their original positions.
* Press **Home** to return to the lobby.


# Heatmaps feature

Heatmaps provide a way to understand how people experience a space by capturing real user sessions in VR.

They make it possible to:

* **Analyze movement** — see how users navigate through a space.
* **Assess attention** — understand where users look and how long they focus on specific areas.
* **Validate design decisions** based on real interactions in context.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVe3WtaDajk6XtByQd1M6%2Fuploads%2Ft4XzMYdLPz86txDFpUNB%2FHeatmapping%20Luxury%20Store%20Places%20-%20Trim.mp4?alt=media&token=e35a7add-9cdc-4745-9940-dde2f123ff8c>" %}

Heatmaps are recorded as **holonotes (without audio)** that capture:

* User movement and position.
* Object interactions.
* Gaze direction over time.

Each session becomes a replayable record of the user experience, providing detailed insight into how a space is explored and used.

### **Enabling Heatmaps**

To start recording heatmaps, enable this option for a Place in the [**Web Arranger**](/places/places-dashboard/web-arranger).

<figure><img src="/files/oMpRDgoHZCWLuIq09CRN" alt=""><figcaption></figcaption></figure>

Once enabled, **recording starts automatically when a user enters the Place in VR**.\
All sessions will be captured and grouped by variants.

***

### **Reviewing Recordings**

Recorded heatmaps can be viewed in the **Web arranger** in different modes:

* **Observer view** — watch the session from the outside
* **First-person view** — see the experience from the user’s perspective

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVe3WtaDajk6XtByQd1M6%2Fuploads%2FU6Gmv1oMBUUjmdgKcTkt%2FGIF2.mp4?alt=media&token=89f3c8f7-6179-45df-ae57-a1ce47d771fe>" %}

\
Attention is visualized using a **color gradient**, showing how long a user focused on specific areas, for example: green - short attention, but red — long, sustained focus.

***

### **Managing Recordings**

The Web Arranger also provides the possibility to organize and manage recordings:

* **Rename** heatmaps.
* **Delete.**

<figure><img src="/files/6Sd9FEVsp0x1cJ1qEOEu" alt=""><figcaption></figcaption></figure>