WebVR on Mobile devices

-
We all know VR is a very popular stuff currently. There are lots of big companies start to develop their own headsets. Facebook and Youtube begin to support 360 degree videos on their platforms. Due to their works, we could expect there would be huge amounts of applications that target to Virtual Reality in the next couple of years. Currently, if you want to play VR content, you have to spend about $300 USD to buy a headset and plug several wires into your desktop. I think it would increase the wall to invite users to use VR. On the other hand, Google and Gear VR choose to use mobile devices as their headsets. You just need to spend $20 USD to buy a Google Cardboard and can start to enjoy the interaction with VR content.

How about the content part of VR applications? If you want to write an application for Oculus, you must write Windows version for Windows users, or MacOS version for MacOS users. On mobile devices, you also need to rewrite apps for Android and iOS versions. No one wants to spend lots of time in rewriting the same code. Actually, there is an approach can solve this problem. That is to use HTML5 tech to make web apps. Luckily, WebVR API could help us meet the requirement.

WebVR [1] is an experimental technology WebAPI in Mozilla and Google. In Mozilla, we call it MozVR [2]. It has been landed in Firefox Nightly. The goal is for any VR devices could display VR content from browsers. Therefore, we can find lots of demos on MozVR.com that you can view the content through Oculus Rift. However, the main topic of my writing is want to prove how to view VR content on your mobile devices, I want to prove the concept and tell everyone how to use their mobile phones to view WebVR. Go on, I will tell you how to use WebVR API on Firefox browser Nightly and Firefox OS.

First of all, I would like to say the results that I am very satisfied. But there are still some workarounds that have to been noticed.

1. Fix the image size to power of two. This limit actually is according to WebGL 1.0 spec. Under the desktop environment, some browsers can solve this exception. However, on mobile devices, we must follow this limit. Otherwise, it will be crashed.

2. Full screen. If we want to allow full-screen mode, we have to set:
full-screen-api.allow-trusted-requested-only; false

3. On mobile devices, we have no position tracker support.

4. Enable VR flag
dom.vr.enabled; true

5. Using dom.deviceOrientation APIs instead of PositionState
On Firefox Android, PositionState support has been landed to nightly version. However, on Firefox OS, it is not implemented yet. So, I decide to use dom.deviceOrientation APIs [3] on Firefox OS.

window.addEventListener( 'deviceorientation', onDeviceOrientationChangeEvent, false );

6. Position tracker on FirefoxOS
Although FirefoxOS devices didn't provide position tracker APIs natively, we would be difficult to control the camera movement in the 3D scene. But, thanks for the Open Web technology, we can try the Leap Motion JavaScript SDK [4]. In Leap Motion SDK, it would give use gesture data via WebSocket to control the camera movement.

ws = new WebSocket("ws://ipaddress:6437/v6.json");

ws.onopen = function( event ) {
   // Initial leapMotion
}

ws.onmessage = function( event ) {
   // Receive the messages
}

Finally, Let's see our demo that is done at Mozilla work week in Whistler.

Demo:


Reference:
[1] WebVR API https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API
[2] MozVR, http://mozvr.com
[3] DeviceOrientation API, www.html5rocks.com/en/tutorials/device/orientation/
[4] LeapMotion JavaScript SDK, https://developer.leapmotion.com/documentation/javascript/supplements/Leap_JSON.html?proglang=javascript


Comments

Post a Comment

Popular posts from this blog

Drawing textured cube with Vulkan on Android

-
Image
Vulkan is a modern hardware-accelerated Graphics API. Its goal is providing an high efficient way in low-level graphics and compute on modern GPUs for PC, mobile, and embedded devices. I am personally working a self training project, vulkan-android , to teach myself how to use this new APIs. The difference between OpenGL and Vulkan OpenGL: Higher level API in comparison with Vulkan, and the next generation of OpenGL 4 will be Vulkan.   Cross-platform and Cross-language (mostly still based on C/C++, but people implemented diverse versions and expose similar API binding based on OpenGL C++, WebGL is a good example).  Mainly used in 3D graphics and 2D image processing to interact with GPU in order to achieve hardware acceleration. Don't have a command buffer can be manipulated at the application side. That means we will be easily see draw calls being the performance bottleneck in a big and complex 3D scene. Vulkan: Cross-platform and low-overhead. Erase the boundary bet...
Read more

glTF loader for Android Vulkan

-
Image
This post is going to introduce how we integrate with an existing glTF loader library to make it be able to show glTF models in our Vulkan rendering framework,  vulkan-android . tinygltf In the beginning, we don't want to make our new own wheel, so choosing  tinygltf as our glTF loader. tinygltf is a C++11 based library that would help us support all possible cross-platform project easily. tinygltf setup in Android Studio In  vulkan-android  project, we put third party libraries into third_party folder. Therefore, we need to include tinygltf from third_party folder in app/CMakeLists.txt as below. set(THIRD_PARTY_DIR ../../third_party) include_directories(${THIRD_PARTY_DIR}/tinygltf) Model loading from tinygltf We are going to load a gltf ASCII or binary format model from the storage. tinygltf provides two APIs , they are LoadBinaryFromFile() and LoadASCIIFromFile() respectively based on the extension name is *.glb or *.gltf. TinyGLTF loader will return a tiny...
Read more

C++ unit testing & CI integration in GitHub (I/2)

-
Image
I am working on a side project,  Vulkan-Android , that is based on Java, JNI, C++, and Vulkan for Android platform. It also uses my C++ math library. Therefore, the requirement of my build and unit tests are around C++. First of all, I would make sure the unit tests in local are run properly. C++ unit test on Mac OS On Mac OS, I think the most convenient way to do unit testing for C++ is writing XCT in Xcode. In the beginning, we need to create a test plan in Xcode. It will helps us create a schema, then, in the test navigator, create a new Unit Test Target. Due to XCT was originally designed for Objective-C or Swift, if we wanna test our C++ code, we need a workaround by making the file extension name to be *.mm . And then, write down the unit tests as below: #import <XCTest/XCTest.h> #include "Vector3d.h" using namespace gfx_math; @interface testVector3D : XCTestCase @end @implementation testVector3D - (void)setUp { // Put setup code here. This method is cal...
Read more