vr-flyweb-gallery

This is a demo for building discoverable VR art installations with WebVR and Flyweb.

MozVR

FlyWeb

Backstory: William Gibson's "Spook Country"

The inspiration for this project came from this part of Gibson's "Spook Country":

She stood beneath Archie’s tail, enjoying the flood of images rushing from the arrowhead fluke toward the tips of the two long hunting tentacles. Something about Victorian girls in their underwear had just passed, and she wondered if that was part of Picnic at Hanging Rock, a film which Inchmale had been fond of sampling on DVD for preshow inspiration. Someone had cooked a beautifully lumpy porridge of imagery for Bobby, and she hadn’t noticed it loop yet. It just kept coming.

And standing under it, head conveniently stuck in the wireless helmet, let her pretend she wasn’t hearing Bobby hissing irritably at Alberto for having brought her here.

It seemed almost to jump, now, with a flowering rush of silent explosions, bombs blasting against black night. She reached up to steady the helmet, tipping her head back at a particularly bright burst of flame, and accidentally encountered a control surface mounted to the left of the visor, over her cheekbone. The Shinjuku squid and its swarming skin vanished.

Beyond where it had been, as if its tail had been a directional arrow, hung a translucent rectangular solid of silvery wireframe, crisp yet insubstantial. It was large, long enough to park a car or two in, and easily tall enough to walk into, and something about these dimensions seemed familiar and banal. Within it, too, there seemed to be another form, or forms, but because everything was wireframed it all ran together visually, becoming difficult to read.

She was turning, to ask Bobby what this work in progress might become, when he tore the helmet from her head so roughly that she nearly fell over.

This left them frozen there, the helmet between them. Bobby’s blue eyes loomed owl-wide behind diagonal blondness, reminding her powerfully of one particular photograph of Kurt Cobain. Then Alberto took the helmet from them both. “Bobby,” he said, “you’ve really got to calm down. This is important. She’s writing an article about locative art. For Node.”

“Node?”

“Node.”

“The fuck is Node?”

How it works

Running this demo with

npm run gallery

starts two things - a web server (the static-server node module) and Flyweb instance advertising it. Flyweb is (among other things) a local-services discovery protocol based on web technologies. You can do a lot of cool stuff with it, but in this case it's effectively a web page that's advertising the presence of another web page.

If you've got Firefox Nightly on Android. you can scroll down the menu and see the "Flyweb" option, and the browser will look around the local network and see what services are on offer; if you're running this demo, you'll see "Hello, Invisible World!" on the list. Selecting that will give you a Firefox Developer Edition logo, which in turn will give you a window into a 3D virtual space around you.

I've hung some of the Mozilla UX team's experiments and prototypes around in that space, so take a look.

Installation

To get started, you'll need npm installed locally, then clone this repository.

To get set up: npm install
To serve up the site locally: npm run serve
To serve up the site with discoverability: npm run gallery

You can observe it machine-locally via http://localhost:9090 for testing. This works out-of-the-box on OSX, and works in the Ubuntu subsystem on Windows 10 if you (temporarily, of course) disable the Windows Firewall.

For discoverability to work, you'll need to be running a browser that supports both WebVR and FlyWeb, preferably on a device with motion sensors.

At the moment means Firefox Nightly on Android.

To Do

• Add motion inside the virtual space and a reasonable controller.
• Use the phone camera to generate skybox textures, for that poor-man's AR experience.
• More arts!
• A collaborative way of submitting art would be nice.

Thank You

Thank you to Blake Winton, Kannan Vijayan and Vlad Vukecevic for their help and patience getting version 0.1.0 working.

I didn't end up using a lot if it directly, but I learned a lot from Kevin Ngo's work on AFrame.io while I was working on this.

While this project isn't based on or aimed at on Google's Tango project, I relied on a big chunk of Archilogic.com's Tango demo code to get started, so thanks to them as well for making it available and open-source. There's still a few lines of their code in here, I'm pretty sure.