When on the master branch of this repo (and time of this writing), viewing on Firefox nightly results in a view not rendering properly. While it looks like a distortion is being correctly applied, the view appears to not render the left and right eye properly. Examples:

The provided simple Scene

Sechelt Port

A Colleague's Demo made from the master

This problem appears to be fixed on the gh-pages branch for Firefox Nightly BUT appears to cause Chromium to crash.

I just wanted to know if all of this works with a samsung gear vr headset? Thanks!

I think we need a UI in the boilerplate to pick between VRDevices. Related: immersive-web/webvr-polyfill#4

There is a skybox and it doesn't look how it looks on every other platform besides iOS.

Not sure what is causing it.

http://alpha.vrchive.com/image2/Ou

Hi, in Windows phone there is a lot of vibration and no stable image in the examples.
It rotates correctly but a lot of trembling.
Tested with a Lumia 640 and 930.

as webvr-boilerplate is webgl only - you may add a fallback or support page at line https://github.com/borismus/webvr-boilerplate/blob/master/index.html#L88
currently the switch to CanvasRender causes troubles with the get/setsize value from webvr-manager,
so it's uncommented here:

function webglAvailable() {
    try {
      var canvas = document.createElement( 'canvas' );
      return !!( window.WebGLRenderingContext && (
        canvas.getContext( 'webgl' ) ||
        canvas.getContext( 'experimental-webgl' ) )
      );
    } catch ( e ) {
      return false;
    }
  }

  if ( webglAvailable() ) {
    renderer = new THREE.WebGLRenderer({antialias:true});
  } else {
    //renderer = new THREE.CanvasRenderer();
    window.open("add custom page or url here - eg. https://get.webgl.org/","_self")
  }

1. Open http://borismus.github.io/webvr-boilerplate/ in Chrome on Android.
2. The page is visible, but the cube is off to the left.
3. Touch the WebVR icon and nothing happens.

Notes:

• Oh! Turns out I wasn't facing north. If I face north, the cube is centered ;)
• I'm using Cyanogen 12 (Lollipop) on a OnePlus One.

It would be nice to be able to turn orientation tracking on or off, independent of VR mode. I find this useful on desktop/laptop for debugging or demonstration to show how the view is tracking the headset even in the monoscopic, non-distorted view. On mobile, it is sometimes convenient to disable orientation and only use touch if you're showing to multiple people and it's not easy to turn everybody all the way around.

Orientation tracking should be off by default on desktop and on by default on mobile. It should not be possible (or at least not easy) to turn it off while in VR mode because that would just make people sick. Keep in mind that some laptops (e.g. Macs without SSDs) do receive orientation events.

Possibly related to #11.

Thanks.

Maybe a black or white border around the icon and text would help.

Currently using update.sh, to pull from r72, but once those tweaks become stable, switch to using the bower dependency.

I updated FF on 11/30 to the most recent nightly. After applying changes, the sample index.html loads, the cube flashes momentarily - and then disappears. Buttons work fine, but no spinning cube. Same code shows the cube in Chrome and Edge.

1. Open http://borismus.github.io/webvr-boilerplate/ in Firefox on Android.
2. The page is visible, but the cube is not.
3. Touch the WebVR icon and nothing happens.

Notes:

• I'm using Cyanogen 12 (Lollipop) on a OnePlus One. I tried Firefox release and Nightly versions.
• Touching the WebVR icon gets this in the console: "TypeError: 'vrDisplay' member of RequestFullscreenOptions does not implement interface HMDVRDevice" on VREffect.js:97:3

Hi, borismus! I'm trying to add FirefoxOS device (Alcatel 6015x) to supported devices but get the this error:
TypeError: 'vrDisplay' member of RequestFullscreenOptions does not implement interface HMDVRDevice.

I have had to patch polyfill for proper uA detection

diff --git a/src/webvr-polyfill.js b/src/webvr-polyfill.js
index cb2eb86..3eaa29a 100644
--- a/src/webvr-polyfill.js
+++ b/src/webvr-polyfill.js
@@ -73,7 +73,9 @@ WebVRPolyfill.prototype.getVRDevices = function() {
  */
 WebVRPolyfill.prototype.isMobile = function() {
   return /Android/i.test(navigator.userAgent) ||
-      /iPhone|iPad|iPod/i.test(navigator.userAgent);
+      /iPhone|iPad|iPod/i.test(navigator.userAgent) || 
+      /Firefox/i.test(navigator.userAgent)  || 
+      /ALCATELOneTouch6015X/i.test(navigator.userAgent);
 };

 WebVRPolyfill.prototype.isCardboardCompatible = function() {

Can you please look at changes to the code above and my changes to boileplate?
Just can't get what I'm missing.

I've just started experimenting with the boilerplate, and ran into the following issue. If VR is unavailable there may be good reasons to fall back to the mono 3d canvas, embedded within a DOM element on a 2d browser page. However, the resize always goes to window .innerWidth and .innerHeight. So, in other words boilerplate assumes you always want to fill the screen with the 3d canvas. Resizes via three.js get overridden.

Better Ux would allow graceful decay into a defined smaller size, as a child element in markup, instead of assuming it is the only thing in the page body. This is consistent with interfaces that follow "progressive enhancement" and use existing markup elements as the base for building the VR display. -pete

Configuration :

• Windows 8.1
• Oculus Rift DK2
• Runtime 0.6
• Chromium 44.0.2383.0

Reproduction steps :

• Launch the example at /index.html
• Rotate the oculus by 90° with quick and repeated motion

Expected result :

• The camera should look at the aim of the oculus in a smoothless fashion

Actual result :

• Judders are experimented while doing the motion

Other informations :

• I updated with the latest commits to experience this problem which I didn't have before. I tried to roll back to commit ae349e9 and I don't experience the problem anymore.

Thanks for the amazing work though, all the other features are working neatly!

Since updating to version 0.2 THREE.DoubleSide seems to be rendering incorrectly in VR mode for me (on cardboard), the BackSide will often be rendered in front of the FrontSide. It's inconsistent. Is this happening with anyone else?

Move your fingers left/right, and the camera looks up/down.

Hi,
I've found that setting renderer.shadowMap.enabled = true, to enable shadows to be seen, breaks the VR/cardboard split-screen mode

Tested with r72 and r73 of three.js

Here's a test showing the basic boilerplate example, with an added ground plane and spotlight to create a shadow of the cube. https://kosso.co.uk/vr/boilerplate/index.html

• Open in mobile Safari. Rotate to landscape.
• Tap the corner icon once, to view the Cardboard icon.
• Tap the cardboard icon to go to VR/Cardboard mode.

The scene is not correctly split in two.

Here's an example with renderer.shadowMap.enabled = true; commented out. https://kosso.co.uk/vr/boilerplate/noshadows.html

ps: When in the split-screen mode, I would like to remove the back arrow. It's not needed then. Surely, rotating the device back to portrait is enough to bring the buttons back if needed?

thanks!

Chrome for iOS does have a real fullscreen mode. This would provide a better experience than the one Safari currently provides.

At the moment i am running a webapp and must drag the browser window to the extended HMD feed off screen. Is it possible, using WebVRManager to go into fullscreen mode on the extended HMD display while running the browser on a physical screen? help would be much appreciated.

Add support for button customization. Button elements are appended to document.body,

I would like to define which element these buttons are appended to. Better, I would like to define my own buttons and attach them to a well-defined interface.

I believe this issue is related:

• #13

After clicking the Goggles, I get the "Place your phone into your Cardboard viewer." message, but it does not disappear.

This is an issue in both Firefox and Chromium desktop (Mac OS 0.5 SDK)

Hi, I am relatively new to three.js and webvr-boilerplate.

I implemented it and its great but, when I click the button at the bottom to move into fullscreen stereoscopic view, the scale of the two view effect is wrong, both eye screens appear very small and in the centre so when viewed through the oculus rift it is useless. The only work around I have found is to use the browser zoom to zoom into the correct level to line the eyes up
This however affects the quality of the graphics.

Is there any way to adjust the scale of view before the view is rendered so zooming is not necessary?

thanks :)

Hi there

Love the library, we use it and the polyfill extensively. I have leveraged it here:
https://github.com/MetaCDN/videojs-vr

I have noticed a change in behaviour in recent versions for the DK2 which is a bit of a negative for us.

Previous versions (< 1.2) were able to 'cast' directly to the Oculus Rift DK2 in direct rendering mode on chromium and firefox nightly w/ VR enabled, which was fantastic. You hit the VR button, a warning came up like it was a native app at the beginning, and it worked & looked great.

e.g. try this link with a DK2 plugged in (I'm running Oculus SDK 0.8, Windows 10, chromium vr build or firefox nightly w/ VR enabled):
https://s3-ap-southeast-2.amazonaws.com/quicktest-metacdn/vr3.html

The new 0.2.0 behaviour is fantastic with cardboard but not great with DK2. At one point I was getting cardboard instructions on desktop but I believe this has been resolved in recent commits.

This is with 0.2.0 of the new libs
https://stage.metacdn.com/r/v/vorjbrr/GKIb3Gc/embed?cachebust

The VR button now does side by side rendering on the main monitor. I presume this might still work in extended mode but most folks have moved (really, have been forced to move via SDK changes) to direct mode. Is there any way to get this behaviour back?

cheers

James

The release page shows 0.1.0 as the latest release.

https://github.com/borismus/webvr-boilerplate/releases

Hi I've been trying to find a solution to support both for a while. I am using your VR boilerplate, but when I include all the files to do object mtl loading as well I run into a bit of a snag.

The current Three version this library uses throws a 'cannot read vertexNormals' of undefined. Now if I update the three.js to their current minified version the object loads perfectly.

The caveat to this was that the VREffects.js calls this.renderer.getSize() to split the scene. Unfortunately that method no longer exists in the new version of Three.js.

My thoughts were that I could take the new version and reimplement the old version of set size, but then I'd be building on top of a hybrid version that wasn't really maintainable.

Have you guys ran into problems with loading objmtls in VR scenes too or is there just something I'm missing with my approach?

Thanks for your time, and keep up the awesome work.

I feel it would be good functionality to have the option to automatically change the controls to VRControls when entering VR mode and disabling then when exiting. I'm developing an app that can jump into VR mode intermittently and enabling the controls and disabling them is becoming problematic with all the different ways VR mode can exited (ESC on desktop, back button on Android etc).

Is there a place where we can get all registered google cardboard viewer profiles?

Is there any way to use two managers in the same time, one using the three.js renderer and one with the CSS3DRenderer.js renderer? I'm trying to emebed some html in my scene but when i enter in fullscreen the css renderer doesn't work.

Ty for your attention!

It would appear that the aforementioned files are currently out of date in the three.js master repo and the correct files are located on the dev branch or in the js/deps folder of this repo. I'd recommend updating the readme with a note about this as it does not work with the "latest" copy of three.

The cardboard demos work on iOS but this doesn't?

Is that intentional? It's not clear from your description (or maybe I skimmed too much) how this is supposed to distinguish between a phone on it's own and a phone in a cardboard like holder. I thought maybe pressing the VR button that appeared but all that seemed to do is zoom rather than split the screen with a few for each eye.

Is this only supposed to work if you have WebVR. Asking since like I mention the cardboard demos work on iOS even without WebVR which is a huge plus.

When trying stereoscopic mode on iPhone the screen only shows the right side.

Hey I'm working with some 3d cameras that export .obj and .mtl files. I managed to get it setup to work with the three js loaders (though I had to update the three.js source). Now I'm having issues moving around the scene it doesn't appear that I can just manually update the camera position.

Is there an API to this boilerplate for moving the camera/user through the scene?

hi boris

i'm currently comparing your webvr-boilerplate with the one from https://vr.chromeexperiments.com/ - i have set up two projects with the same content for each boilerplate - a skybox using 6x 1024x1024px textures.

with your boilerplate on iOS (tested on iphone6+ and ipad air2 running both iOS 8.3 with google cardboard) the device orientation is not smooth (works fine on android / nexus 5) and it's not a fps issue. may it has something to do with gyro/motion sensor .. ?

you can test it here (best with cardboard)

this is the project with your webvr-boilerplate:
http://zaak.io/prototypes/swiss/

same project with vr chrome experiments boilerplate:
http://zaak.io/prototypes/swiss3/

Curious as to how to handle interaction when in VR/cardboard mode. I'm particularly interested in implementing streetview style expeditions along the lines of walkinto.

Any suggestions on how to handle user input to, say, switch scenes sans mouse/touch events? The vr.chromeexperiments site handles this nicely.

Entering VR mode in Firefox Nightly on my desktop (Ubuntu 14.10) crashes the browser. This happens independent of the CARDBOARD_DEBUG value, and independent of whether the connected Oculus DK2 is turned on or off and the ovrd service is running or not. The demos on MozVR.com work fine.

I do get a message "Failed to load Oculus VR library!" when Firefox starts, which might be part of the problem, but I haven't figured out what to do about that yet. The OculusWorldDemo runs fine on the machine, so it's not a general problem with my Oculus installation.

On a side note, I am also not able to change the camera orientation with the mouse before entering fullscreen mode. This works in stable Chromium, along with fullscreen mode and CARDBOARD_DEBUG mode. I haven't tried the WebVR enabled Chromium build yet.

Any suggestions on how to fix this would be appreciated. Thanks!

The crash message:

AbortMessage: [11015] ###!!! ABORT: Invalid effect type!: file /builds/slave/m-cen-l64-ntly-000000000000000/build/src/gfx/layers/basic/BasicCompositor.cpp, line 441
Add-ons: %7B972ce4c6-7e08-4474-a285-3208198ce6fd%7D:41.0a1,webvr-addon%40mozvr.com:0.1.0
BuildID: 20150519030202
CrashTime: 1432091463
EMCheckCompatibility: true
EventLoopNestingLevel: 1
FramePoisonBase: 7ffffffff0dea000
FramePoisonSize: 4096
InstallTime: 1432089210
Notes: OpenGL: NVIDIA Corporation -- GeForce GTX 660/PCIe/SSE2 -- 4.5.0 NVIDIA 346.46 -- texture_from_pixmap
WebGL- libGL.so.1- libGL.so.1+ GL Context- GL Context+ WebGL+ xpcom_runtime_abort([11015] ###!!! ABORT: Invalid effect type!: file /builds/slave/m-cen-l64-ntly-000000000000000/build/src/gfx/layers/basic/BasicCompositor.cpp, line 441)
ProductID: {ec8030f7-c20a-464f-9b0e-13a3a9e97384}
ProductName: Firefox
ReleaseChannel: nightly
SecondsSinceLastCrash: 267
StartupTime: 1432091377
TelemetryEnvironment:
Theme: classic/1.0
Throttleable: 1
URL: file:///data/third-party-projects/webvr-boilerplate/index.html
Vendor: Mozilla
Version: 41.0a1
useragent_locale: en-US

Very cool! In the long run, of course, this should work on every major browser. Right now, I see a black screen on http://borismus.github.io/sechelt/ when I use Chrome Version 40.0.2214.93 (64-bit) and Internet Explorer 11 and Opera 27.0.1689.66 on Windows 7.

Due to call to use of webkitFilter on the new SVG icons, the latest Chromium WebVR build crashes out on page load. A separate issue has been filed for that project, though given it may be awhile before it's addressed and people upgrade, a workaround may be in order.

Hi,

I use both the nightly and release version of Firefox and I can't seem to get input from keyboard or mouse. All I get is a slight up and down movement when using arrow keyboard button. This happen in Mac Yosemite.

Anyone has the same problem? Or is there any solution for it?

Feel free to test out here http://www.adityo.net/99names

If there's no VR headset, in addition to using the mouse and keyboard to turn and move, it would be really cool to use webcam head tracking to change perspective/viewing angle.

Example: http://topheman.github.io/parallax/

I downloaded ChromePublic_Tango_1.19.apk from this link (https://drive.google.com/folderview?id=0BzudLt22BqGRbW9WTHMtOWMzNjQ&usp=sharing#list). I installed it on Nexus 6 but when I open it, it crashes. Is their device compatibility issues? It would be great if you can help me around since I need to use WebVR for a class project.

If layering multiple scenes on top of each other and clearing the depth buffer between each one only the last scene in the right eye is rendered. It's as if the opacity in the scene isn't working to allow the scenes behind to show through. It works fine in the left eye but in the right I only see the last rendered scene.

Entering VR mode on desktop doesn't enter with distortion.

(Mac OS, 0.5 runtime)

Line 158 of webvr-manager.js reads:
this.vrButton.offsetHeight;

Is that correct or is something missing? WebStorm flagged it as an expression statement which wasn't an assignment.

But I'm not sure what would be correct in this context.

Also note that offsetHeight is not referenced anywhere else in that code (that I am able to find).

I am thinking of using babel's es6 import for webVR-manager. What do you think?

It would be nice to have the option to use the mouse to look around when not in VR mode, but this is only available in browsers that don't support webvr directly. It seems that mouse control is implemented as a VR control device in the polyfill and that part is just skipped when the polyfill is not necessary.

Maybe mouse/touch should be implemented separately, since the functionality is complementary to VR device control.

UPDATE 28/10/2015:

the problem is: to map the VR controls to an object ( not the camera ) that has a different axis configuration and keep the correct rotation rules.
Example of object axis:

• x - up
• y - depth
• z - side

//attach head tracker controller to object ( not camera )
controls = new THREE.VRControls( object );

Swapping the rotations by just
object .rotation.x = object .rotation.z results that, after updating the controls, rotating to the side makes an undesired rotation after 45º.

The rotation rules for each axis are different :

• x rotates until PI and after that inverts signal and keeps changing in the same direction it was;
• y rotates until PI/2 and after inverts the direction (when increasing, starts decreasing)
• z is equal to x.

Changed webvr-polyfill.js and got it fixed for keyboard/mouse with this:

MouseKeyboardPositionSensorVRDevice.prototype.getState = function() {
   // this.euler.set(this.phi, this.theta, 0, 'YXZ');
   this.euler.set( this.theta , 0, - this.phi, 'YXZ');

But no way similar line to other controllers (HMD, cardboard, etc.).
Maybe it would be nice the rotation order and mapping could be available to the user.
Thanks

INITIAL QUESTION:

Hi,

I'm using your webvr-boilerplate and trying to map it to a human face mesh.

The way I do is is:

1. attach the camera to an eye bone and the neck bone to the VRControls

main js script:

//attach head tracker controller to neck bone
controls = new THREE.VRControls( mesh.skeleton.bones[ neckVRControlBone ] );

//add camera to eye
mesh.skeleton.bones[ 22 ].add(camera);

//resets camera rotation
camera.rotation.set(0,0,0);

//looks at mesh up direction to face front
camera.lookAt( mesh.up );

//moves camera to middle of eyes 
camera.position.set(10,10,0);

2. change the webvr-manager.js to update the neck bone ( passed as argument on initialization ) position and rotation and in index.php I swap the axis to match the HMD ones with the ones of the bone:

webvr-manager.js:

if ( state.orientation !== null ) {

    object.quaternion.copy( state.orientation );

}

if ( state.position !== null ) {

    //object.position.copy( state.position ).multiplyScalar( scope.scale );

}

main js script:

 /* INSIDE UPDATE CYCLE */

// mesh.rotation.y+=0.1;
controls.update();

//resets bone position to default
mesh.skeleton.bones[ neckVRControlBone ].position.set(neckInitPosition.x,neckInitPosition.y,neckInitPosition.z) ;

//rotates the mesh body with the neck

mesh.rotation.x = - mesh.skeleton.bones[ neckVRControlBone ].rotation.x; // UP - DOWN - PITCH

mesh.rotation.y =  mesh.skeleton.bones[ neckVRControlBone ].rotation.y; //  LEFT RIGHT - YAW

mesh.rotation.z =  - mesh.skeleton.bones[ neckVRControlBone ].rotation.z; //  INCLINE - ROLL

The problem is that there is a rotation restriction on the up HMD axis, that, after swapping the left/right bone axis with up/down HMD axis, constrains the left/right bone movement.
I've been looking at your files and I've seen this in webvr-polyfill.js :

  // Prevent looking too far up or down.
  //this.phi = this.clamp_(this.phi, -Math.PI/2, Math.PI/2);

However commenting this seems to me to have no effect.
Is this the right place?
Where can I change that? thanks!
Example

I'm trying to get a mirror effect working in a project that is using webvr-boilerplate.

I tried two ways:

1. use THREE.Mirror:

    verticalMirror = new THREE.Mirror( renderer, camera, { clipBias: 0.03, textureWidth: 256, textureHeight: 256, color:0x889999 } );

    verticalMirrorMesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 10, 10 ), verticalMirror.material );
    verticalMirrorMesh.add( verticalMirror );
    verticalMirrorMesh.position.y = 0;
    verticalMirrorMesh.position.z = 10;
    verticalMirrorMesh.rotation.y = 60;
    scene.add( verticalMirrorMesh );


    // Request animation frame loop function
    function animate( timestamp ) {

      verticalMirror.render();


      // Update VR headset position and apply to camera.
      controls.update();

      // Render the scene through the manager.
      manager.render( scene, camera, timestamp );



      requestAnimationFrame( animate );

    }

1. use THREE.CubeCamera (based on Stemkoski's example):

  var cubeGeom = new THREE.CubeGeometry(10, 10, 10, 1, 1, 1);
  mirrorCubeCamera = new THREE.CubeCamera( 0.1, 5000, 1024 );
  // mirrorCubeCamera.renderTarget.minFilter = THREE.LinearMipMapLinearFilter;
  scene.add( mirrorCubeCamera );
  var mirrorCubeMaterial = new THREE.MeshBasicMaterial( { envMap: mirrorCubeCamera.renderTarget } );
  mirrorCube = new THREE.Mesh( cubeGeom, mirrorCubeMaterial );
  mirrorCube.position.set(0,0,10);
      mirrorCube.rotation.y = 60;
  mirrorCubeCamera.position = mirrorCube.position;
  mirrorCubeCamera.rotation = mirrorCube.rotation;
  scene.add(mirrorCube);       


// Request animation frame loop function
        function animate( timestamp ) {

          mirrorCube.visible = false;
          mirrorCubeCamera.updateCubeMap( renderer, scene );
          mirrorCube.visible = true;


          // Update VR headset position and apply to camera.
          controls.update();

          // Render the scene through the manager.
          manager.render( scene, camera, timestamp );



          requestAnimationFrame( animate );

        }

In both cases, the render targets stops updating when activating VR Mode and stereo viewing is active.

Any thoughts of why this happens?

example (messy code, sorry for that)

Thanks in advance.

Might be a good starting point: https://github.com/zz85/quirc.js

example:
http://postfat.ninja/

notice blue in front, red in rear. then view in VR.