I attended the “WebVR Ecosystem and API Update” meetup held on May 25th, 2016, in Google’s San Francisco offices (which are near Mozilla’s) overlooking the Bay Bridge. The WebVR event is usually held once a year and it was sponsored by both Google and Microsoft.
The event was $10 per ticket, and about 200 people showed up – which included a raffle for prizes (lots of bottles of wine, plus a grand prize being a ChromeBook Pixel) and catered dinner and drinks, as well as the talks. There was not enough seating, some people had to stand.
The talks were recorded and posted on YouTube, with speakers from wevr [Tony Parisi] now at Unity, Google [Brandon Jones][Boris Smus], Mozilla [Kevin Ngo][Diego Marcos], AltVR [Amber Roy] now at Oculus, and Microsoft [Liv Erickson].
I will be giving my summary of the talks, as well as concluding with what this means for Adobe PhoneGap.
WebVR 1.0 (Google and Mozilla)
It has been recently re-factored (version 1.0) to support the new capabilities of VR devices that have been recently released, particularly the Oculus Rift and HTC Vive, and a focus on WebGL content. Tracked controller support – like the controllers that come with the HTC Vive, and upcoming Oculus Touch controllers – will be supported in WebVR through the W3C Draft GamePad API.
Since WebVR is not baked into browsers yet, there is a WebVR polyfill that works quite well, anywhere you have WebGL support – which includes mobile browsers like Safari on iOS and of course Chrome on Android. There is also the concept of “Responsive VR” (like Responsive Design) through use of the WebVR Boilerplate.
Google’s use of WebVR can be seen in their VR View work, where you can embed VR images and videos into a web page. An example could be a VR view in Wikipedia, showing Machu Picchu. You can create these VR Views yourself to embed in a web page using Google Cardboard Camera and converting them using the Cardboard Camera Converter.
Try out some WebVR examples by using the polyfill link: https://webvr.info/samples/ (you can use Google Cardboard as well).
The development of WebVR has been driven mainly by Google and Mozilla.
Created by Mozilla VR in December of 2015, A-Frame is a web framework that provides a declarative way to create VR, and is a layer on top of WebGL, and three.js. WebVR’s API might be too uninviting for some, and the declarative nature of A-Frame aims to make it easier for everyone to create VR experiences.
A-Frame doesn’t just have declarative markup, but it has also has extensibility through their use of the Entity-Component-System (ECS) pattern. For example , you can have a
car entity, that has
tire components – each of the components themselves have properties (horsepower, grip).
It has a thriving community. The component model enables a rich community of components to be shared and available for developers. For example, someone made a WebVR controller component (HTC Vive) for A-Frame. Other interesting uses of A-Frame can be seen in their examples and in their blog.
Other Tools and Environments
Microsoft was also there talking about their enterprise and education efforts with VR, especially WebVR – to leverage existing expertise in web technologies in enterprises and schools (just like what PhoneGap’s strengths are).
Unity is a cross-platform IDE that enables you to create regular games and VR games. IDEs like this can be a bridge for creating games in WebVR. Unity supports WebGL and VR, but not WebVR. A community user has bridged the gap (sound familiar?) and created a way to export Unity games to WebVR.
AltspaceVR is social VR, a virtual meeting space for VR users. In the video of the talk linked to above, Amber Roy walks us through how to embed WebVR (through manipulating nyan cat!) in the embedded browser component in the virtual space.
What does this mean for PhoneGap?
We can embed WebVR experiences using PhoneGap, right now. The two major mobile operating systems (iOS and Android) already support WebGL – iOS since iOS 8, and Google in Chrome. PhoneGap support for WebVR should be fine in Android 7.0 Nougat and above, anything below that will require the Crosswalk plugin.
WebVR’s goals are to make WebVR linkable, and embeddable everywhere there is a web browser – and PhoneGap can provide extra value on top of that, in providing a bridge to device APIs when the WebVR content is wrapped with PhoneGap – for apps in mobile app stores.
You can create a WebVR PhoneGap app using the template we provided (based off the WebVR Boilerplate):
phonegap create hello com.example.hello HelloWorld --template phonegap-template-webvr
Don’t forget to add the Crosswalk plugin beforehand if you are on an older Android (< 7) version:
phonegap plugin add cordova-plugin-crosswalk-webview
index.html in the
www folder to add a reference to
cordova.js and you should be able to use PhoneGap plugins in your app.