VR Art Gallery (WebXR)

[ Discord ] · [ Introducing the VR Art Gallery ]

View artworks like the Mona Lisa, The Sistine Chapel, Starry Night as they appear in real life.

Rendered to scale with realistic texture. Ultra HD (10K+). As a virtual reality website!

demo.mp4

---

Live demo

Visit https://art.cosm.run from your VR headset's browser.

Click the "Enter VR" button. Note that loading may take awhile and be choppy because of the massive files. High-speed internet required.

Controls:

• Left joystick: Move painting up / down / left / right.

• Right joystick OR tap right index finger with thumb: Switch to next or previous painting.

• Right trigger OR tap left index finger with thumb: Bring painting closer or further away.

---

How it works

1. This app/website is built using WebXR and Three.JS.

2. High-resolution public domain artwork was scraped from Wikimedia and similar websites.

3. This artwork was then sliced up into smaller chunks, and processed to show depth and lighting effects, by generating normal & displacement maps.

4. For some classic paintings, I couldn't find high-resolution scans. For these, I used ESRGAN which increases the resolution of images via a generative adversarial network.

---

To run your own instance

npm install
npm run dev

This will start a server on your local network you can see at https://localhost. You'll see a security warning that appears for using a self-signed certificate, this is safe to bypass.

You will then need to visit your local IP address on your VR headset's browser to use the app (likely something like: https://192.168.1.123).

⚠️ Note: If running locally, you will have only a limited set of artwork available. You need to manually generate assets for custom art, as the files are too large to be included in this repo. See next section.

Loading custom artwork

To load in your own artwork, you will need to pre-process it before it can be used in the app.

Install dependencies: deno, python3, pip install -r requirement.txt, npm install, and (if using Google Arts & Culture) dezoomify-rs

Once installed, find a painting on Wikipedia, WikiArt, or Google Arts & Culture and copy its URL.

Then run:

./scripts/art.sh <valid-url> <unique-hyphenated-name-for-art>

For example:

./scripts/art.sh https://commons.wikimedia.org/wiki/File:Monet_-_Impression,_Sunrise.jpg monet-impression

You can also pass in a local file path to a JPEG or PNG image instead of a URL.

This will automatically generate slices, normal maps, and displacement maps for your art.

You may need to manually adjust some of the values (like the physical dimensions) it writes to public/art/index.json. More about this in scripts/

Force refresh the page (Cmd+Shift+R) to see your artwork loaded in!

---

TODO

• Improve performance loading images
• Use WebXR layers for higher resolution
• Add augmented reality support
• Way to browse artwork
• Automate more of image processing, super-resolution

---

🖼️ + 🥽