# Webspaces
> Webspaces turns a plain HTML file into a walkable, multiplayer 3D world. One ``
- Preview, with everything marked **(preview)** below (Gaussian splats, scripting, night skies):
``
Versioned preview URLs never change, so a world that pins one keeps working.
## The smallest world
```html
```
Open it in Chrome (from disk or any HTTPS host) and you spawn in as an avatar. Anyone who opens the same URL
is in the world with you: avatars, voice, and live co-editing, peer to peer.
When hosted over HTTP(S), also place `webspace.service.1.0.1.js` next to the HTML (copy it from
https://webspaces.space/webspace.service.1.0.1.js). It is a tiny service worker that enables cross-origin
isolation, which the engine needs. (Worlds saved by the engine write this file for you.)
## Objects are elements
Every direct child of `` is one object in the world. Its tag chooses what it is:
| Markup | Object |
|---|---|
| `` | A screen. YouTube URLs work. HLS (`.m3u8`) and DASH (`.mpd`) streams work |
| `` | A positional sound source |
| `` | A PDF you can page through |
| `` | A Smooth Voxel model (plain-text voxel format, see below) |
| `` | A glTF model (Draco compressed OK) |
| `` | A Gaussian splat capture (`.spz`, `.ply`, `.splat`) of a real place or thing **(preview)** |
| `Hello …rich HTML…
` | A text page (headings, lists, links, bold, etc.) |
| `Welcome ` | Big outlined banner text |
| `🌵
` | A 3D voxel emoji |
| `` | A link to another world or page. Clicking it in-world follows it like any web link: in place, or in a new tab with `target="_blank"` |
Attributes:
- `id="lamp"`: optional. **(preview)** Any id that starts with a letter and uses letters, digits, `-` or `_`
is kept, so scripts can find objects with `getElementById`. (The stable engine only keeps 7-character
lowercase ids like `abc1234` and renames others.) Keep ids stable once a world is published.
- `draggable`: people can grab and move it in-world. Omit to lock it in place.
- `contenteditable`: text people can edit in-world.
- `hidden`: not shown.
Style properties that matter: `transform` (placement, below), and for text: `color`,
`background-color`, `font-family` (`sans-serif`, `serif`, `monospaced`, `fantasy`, `ui-rounded`,
`cursive`, `emoji`), `width: min-content; height: min-content` (shrink-to-fit), `-webkit-text-stroke-color`
(banner outline).
## Placing things: CSS transforms, in centimeters
```html
My World
` tags. A folder of them is a *webspace*: a website that has
worlds as well as pages. An `index.html` with a `` list defines the site's menu.
## Smooth Voxels (SVOX): 3D models as text
SVOX is "markdown for 3D models". It's plain text, so you can write it by hand or generate it.
```
size = 7
scale = 0.15 0.17 0.15
origin = -y
material lighting = smooth, roughness = 0.25, fade = true, deform = 3
colors = A:#C11 B:#F60 D:#000 C:#F93
material lighting = smooth, roughness = 1, fade = true, deform = 3
colors = E:#840 F:#000
voxels
------- --AAA-- --AAA-- --AAA-- ------- ------- -------
--AAA-- -BAAAA- -BAAAA- -BAAAA- -BAAAA- ------- -------
-BADAA- BAAAAAA BAAAAAA BAAAAAA -B---A- ------- -------
-BDDDA- BAAAAAA CAAAAAA CABAAAA -B-E-A- ---E--- ---FF--
-BBDBA- BAAAAAA CAAAAAA CABBAAA -C---A- ------- -------
--BBB-- -BAAAB- -CAAAB- -CAAAB- -CCBBB- ------- -------
------- --BBB-- --CCB-- --CCB-- ------- ------- -------
```
That's an apple. Layout of `voxels`: each **line** is one z slice; within a line, each space-separated
**group** is one y layer, bottom to top; each **character** is one x voxel. `-` is empty; letters are
colors declared in a `material`. `size = x y z` (or one number for a cube). `scale` is meters per voxel.
`origin = -y` puts the model's bottom at its placement point. `deform` smooths the shape and `lighting = smooth` shades it.
The world's cel-shaded look comes from these; keep models small (< 32³) and let smoothing do the work.
Save it as `apple.svox` and add ``, or paste the text directly into a world.
Full reference: https://svox.glitch.me
## Gaussian splats: real places and things
```html
Score: 5 "`) and emoji objects
(`bud.textContent = "🌷"`).
- Emoji objects use a built-in voxel emoji set; very new emoji (e.g. 🪨) may not be available.
- Time-based motion (`Date.now()`) looks identical for everyone; use `webspace.state` for things people cause.
- Events: `click`, `pointerenter`, `pointerleave` on body elements. Clicks come from mouse, touch taps, VR controllers and hand pinches alike.
## Virtual reality (preview)
Worlds work in headset browsers (Meta Quest, and other WebXR browsers). An **Enter VR** button appears when a
headset is available; scripts can call `webspace.xr.enterVR()` from a click handler. In VR: thumbstick to move,
snap turn with the right stick, point and pull the trigger to click. Trigger clicks arrive as the same DOM
`click` events, so one script serves desktop and VR. `webspace.xr.isPresenting` tells you which mode you're in.
## Controls (for your README)
WASD to move, drag or Shift to look, Space to jump, `/` to create objects, Ctrl+V to paste images/URLs/SVOX,
drag and drop files in, `~` or `@` to toggle the UI, `?` to hide tips. Hover an object and use the tips shown
to move (right-drag), scale, rotate, or edit voxels.
## Saving and publishing
- **Local**: open the `.html` from disk in Chrome and grant folder access when asked. Edits save back to the
file (File System Access API).
- **GitHub**: host on GitHub Pages; the world can commit its own edits back to the repo with a fine-grained
token, so anyone you trust can edit it live.
- **Anywhere static**: it's just HTML plus assets (`.svox`, `.glb`, `.spz`, images) in the same folder.
Relative `src` paths keep a world portable. Keep `webspace.service.1.0.1.js` beside each world's HTML.
## Taste
Webspaces worlds should feel like places, not tech demos. A strong palette, a sense of arrival at spawn,
a few meaningful objects placed with care, text that speaks to the visitor, and something to do together.
The house style is soft, cel-shaded, and timeless: smooth voxels, flat color, clean type.
` | A picture (GIF/WebP animate) |
| `