Quick Start Guide¶

Get your first WebXR Gallery experience up and running in under 10 minutes.

Prerequisites¶

Before you begin, you'll need:

• A modern web browser (Chrome, Firefox, Safari, or Edge)
• A 360° equirectangular image or video
• An account at xrgallery.online

Step 1: Create Your Account¶

1. Visit xrgallery.online
2. Click Sign Up
3. Enter your email and create a password
4. Verify your email address

Step 2: Create a New Sequence¶

A Sequence is a collection of connected scenes that make up your VR experience.

1. From your dashboard, click New Sequence
2. Give your sequence a name (e.g., "My First Tour")
3. Optionally add a description
4. Click Create

Step 3: Add Your First Stage¶

A Stage is a single scene in your sequence with its own skybox and interactive elements.

Upload a Skybox¶

1. In your new sequence, click Add Stage
2. Click Upload Skybox
3. Select your 360° image or video
4. Wait for processing to complete

Configure Stage Settings¶

After upload, you can customize your stage:

Step 4: Add Interactive Elements¶

Add a Hotspot¶

1. Click the Hotspots tab
2. Click Add Hotspot in Preview
3. Click anywhere in the 360° preview to place it
4. Configure the hotspot:

type: info
infoTitle: "Welcome"
infoDescription: "Click hotspots to explore!"

type: audio
audioUrl: "https://example.com/narration.mp3"
audioVolume: 0.8

type: navigation
targetStageId: "stage-2"

Customize Appearance¶

Step 5: Add More Stages (Optional)¶

Create a multi-room experience:

1. Click Add Stage to create another scene
2. Upload a new skybox
3. Add Navigation Hotspots between stages

graph LR
    A[Lobby] --> B[Room 1]
    A --> C[Room 2]
    B --> A
    C --> A

Step 6: Configure Navigation¶

Choose how users move between stages:

1. Click Settings in your sequence
2. Configure navigation type:

1. For navigation hotspots, choose a portal style:

Step 7: Preview & Publish¶

Preview Your Experience¶

1. Click Preview to test in your browser
2. Check all hotspots work correctly
3. Test navigation between stages
4. Verify VR mode (if you have a headset)

Publish¶

1. Click Publish when ready
2. Copy your shareable link
3. Share with your audience!

What's Next?¶

Example Configuration¶

Here's a complete example of a simple two-room tour:

{
  "stages": [
    {
      "id": "lobby",
      "name": "Lobby",
      "skybox": {
        "type": "image",
        "url": "https://storage.example.com/lobby.jpg"
      },
      "hotspots": [
        {
          "id": "enter-gallery",
          "type": "navigation",
          "position": { "x": 0, "y": 0, "z": -500 },
          "targetStageId": "gallery",
          "label": "Enter Gallery",
          "color": "#4CAF50"
        }
      ]
    },
    {
      "id": "gallery",
      "name": "Gallery",
      "skybox": {
        "type": "image",
        "url": "https://storage.example.com/gallery.jpg"
      },
      "hotspots": [
        {
          "id": "artwork-info",
          "type": "info",
          "position": { "x": 300, "y": 50, "z": -400 },
          "infoTitle": "Masterpiece",
          "infoDescription": "A stunning work of art from the 19th century.",
          "color": "#2196F3"
        },
        {
          "id": "back-to-lobby",
          "type": "navigation",
          "position": { "x": 0, "y": 0, "z": 500 },
          "targetStageId": "lobby",
          "label": "Back to Lobby"
        }
      ]
    }
  ]
}

Troubleshooting¶

Image doesn't load?¶

• Ensure image is in equirectangular format (2:1 ratio)
• Check file size (under 50MB recommended)
• Try a different format (JPEG vs PNG)

Video won't play?¶

• Wait for Mux transcoding to complete (may take a few minutes)
• Ensure video codec is H.264 or H.265
• Check your subscription tier supports video

VR mode not working?¶

• Ensure you're using HTTPS
• Check browser WebXR support
• Try a different browser

More troubleshooting help