It's super easy with A-Frame. I highly recommend it. Play around with this demo I built and change it around. https://codepen.io/derekm/pen/kkVbjX
Better yet, here are all the awesome demo's people better than I built https://aframe.io/blog/awoa-26/
I think the best way to start with WebVR is to develop directly with WebGL in Javascript. You can build a simple world with THREEJS and then add VR handlers. A good introduction might be this article. http://www.sitepoint.com/bringing-vr-to-web-google-cardboard-three-js/ Don't hesitate if you have any question
For work we made a mini-course on it https://glitch.com/culture/an-intro-to-webvr/ (the editor is in video 4). They've added new features since though!
I think the sales pitch for Webvr is the issue for the general public. It gets lumped in with regular websites and it’s so small right now that describing it as a niche market isn’t even appropriate. If we can somehow make it MAYA. most advanced yet acceptable it’ll change the web world..
Which mobile browser are you talking about? AFAIK, the latest Chrome Dev channel release uses the official Cardboard API, so the tracking should be just as good and probably as good as it's going to be.
Make sure you have WebVR enabled in chrome://flags though, otherwise the boilerplate will fallback to it's own naive deviceOrientation tracking.
I'm sorry it's not working for you. What sort of symptoms are you experiencing? Are you getting a blank, black screen? I've seen Firefox coupled with out of date GPU drivers fail in that way before. One of the earlier WebVR builds of Firefox had an issue where anti-aliasing, on Windows, on Nvidia GPUs, crashed Firefox's WebGL contexts like that.
I eventually figured out what the issue was by going through a large portion of the Three.js examples: http://threejs.org/examples/
Basically, by finding which demos worked and which didn't, I was then able to read the code and find the common differences.
I know I'm messing something up with regards to mip-mapping, but haven't had a chance to fix it yet. It's supposed to only cause a warning, but perhaps with your system it's crashing the WebGL context.
There is huge variation in GPU drivers and their stability, even over time. The common recommendation is "have the latest drivers", but I've seem major, major regressions before that have necessitated rolling back drivers. That anti-aliasing issue I mentioned was one such case. I updated my drivers to see if that would fix the problem and it actually broke WebGL in Chrome to boot. I had to roll back the driver to get anything to work. Nvidia did quickly replace that particular driver, so I'm on the latest now, but tracking latest isn't always the best policy. Better to "upgrade only when broken".
Anyway, sorry again.
Officially, you need a WebVR-enabled browser. That could be one of the experimental Chromium builds that Brandon Jones at Google is working on right now: http://blog.tojicode.com/2014/07/bringing-vr-to-chrome.html. Or it could be Firefox Nightly: https://nightly.mozilla.org/. Both require enabling a flag to turn WebVR on.
I say "officially", because I do have a system for using the browser's motion sensor APIs to control the view, but I had turned it off a while ago due to problems with the motion sensor APIs. The various browser vendors don't implement the Device Motion and Device Orientation APIs with the same origin or range of values. My code tries to compensate and renormalize it, but I don't have a wide range of devices on which to test. A WebVR-enabled browser will be more reliable and have smoother tracking. Without the WebVR API, the monkeying the browser does to the motion sensor data (none of them provide a raw stream, they all attempt to do a sensor fusion process, to varying degrees of non-success) makes for a jittery, drifty experience. It's enough that you might get motion sick if you haven't been using VR headsets for a while.
That said, I think most people are probably just browsing, so I've put the regular motion-controls back in this morning. It should work in most mobile browsers now.
Your first question seems unrelated to your second question. If you really just want the angle of the viewer's perspective. You can get it directly from the camera's rotation. Here's a component that does that:
https://glitch.com/edit/#!/deserted-daisy-marquess
AFRAME.registerComponent("display-angle", {
schema: {
output: { type: "selector" }
},
tick: function() {
var camera = this.el.object3D;
var angle = camera.rotation.y;
this.data.output.setAttribute(
"value",
(THREE.Math.radToDeg(Math.abs(angle)) % 360).toFixed(2)
);
}
});
...
<a-camera display-angle="output: #angle">
<a-text id="angle" value="hi" position="0 0 -1" align="center"></a-text>
</a-camera>
Try this: http://output.jsbin.com/cagime
Editable here: http://jsbin.com/cagime/edit?html,js
I'm using the April 26th Chrome build in extended mode. You'll have to move the window into your rift (I use Win+Right Arrow) and then hit F11 for fullscreen.
You should see a front-lit, 10cm green cube 20cm in front of you. I can walk around the cube and see its sides and duck below it to see it from the bottom.
Edit: Your point of view depends on the position of your oculus camera. I have mine about 1 meter directly in front of my head.
For the oculus store you need to accept the app by oculus. You should be able to build a apk. And then load via Sidequest. But I have not done it myself yet, so I speak here theoretically. Or you can try you app build to an apk with Electron https://electronjs.org/
It says directly in the sentence that the first model was built from commodity video components.
I even found the cameras you used in the prototype with a 5 second Google search.
There's not even much deviation from the initial prototype's form factor. It's most likely a 3d printed case.
What happens when the user turns their head with your software? A static perspective with head motion is going to make most people blow chunks.
> I encourage you to try it out and record a demo video out of it.
It's an interesting concept, I'll probably build something myself and improve upon it.
Thanks for the work!
I changed the VRambling browser so that it would go straight into VR with your site, and with all the links too.
https://play.google.com/store/apps/details?id=com.vrambling.vrambling
Your site is under "portals", by the way. You should try it, I think it's the best browser for your content!