Make the Web Spatial Too

TechShop Demo for WebSpatial

This demo explores and showcases the possibilities of spatializing a real-world e-commerce site’s GUI.

Large Screen	Small Window

Phone	Tablet

visionOS Safari	WebSpatial

WebSpatial Documentation

• Table of Contents
• Introduction
• Quick Example
• Core Concepts
• Development Guide

Setup

Run this command to reinstall dependencies after cloning or updating the repository:

pnpm install:clean

Install the following tools globally:

1. Xcode
2. visionOS simulator

Then, create a .env.local file:

cp .env.example .env.local

Development

Only For Desktop/Mobile Platforms

pnpm dev

Ensure the environment variable XR_ENV is empty when running this dev server

For Both Desktop/Mobile Platforms and visionOS

Step 1: Web Build Tool

Option A: open two terminals and run these two commands in each one:

pnpm dev

pnpm dev:avp

This environment-variable-enabled devserver can coexist with the devserver for desktop/mobile, using different ports and base automatically.

Option B: open one terminal and run this all-in-one command:

pnpm dev:all

Step 2: WebSpatial Builder

Fill in the $XR_DEV_SERVER in the .env.local file.

XR_DEV_SERVER=http://localhost:[port from `pnpm dev:avp`]/webspatial/avp/
XR_PRE_SERVER=
XR_PROD_SERVER=

Then:

pnpm run:avp