HTML5 VR demo

Tutorials on how to create your own rigs, pics, movies, and everything that has to do with S-3D at home!
Post Reply
alexvw
One Eyed Hopeful
Posts: 6
Joined: Thu May 17, 2012 4:22 pm

HTML5 VR demo

Post by alexvw »

Hey guys - I've been cruising this site for a while, using it as inspiration to work on a couple prototypes. Finally have something worth sharing, though.

My rig itself is pretty terrible, but I wrote a little html5 page to use it that people here might enjoy - It allows you to use your smartphone and any browser to create a VR experience. The actual implementation is not very immersive (the 3d world is super simplistic, and server data limitations limits it to less than 10FPS) but I dont know if something like this has been done before.

I did a short write up of how it works/how to use it at http://alexvw.com/blogo/?p=278, and the actual app is located at alexvw.com/orient.php.

I'm working to try and get the FPS up (data-wise, not on the client rendering) but check it out and let me know what you think
User avatar
cybereality
3D Angel Eyes (Moderator)
Posts: 11406
Joined: Sat Apr 12, 2008 8:18 pm

Re: HTML5 VR demo

Post by cybereality »

Ok. Was not able to get it working on my Android phone but the idea seems cool. Keep it up.
alexvw
One Eyed Hopeful
Posts: 6
Joined: Thu May 17, 2012 4:22 pm

Re: HTML5 VR demo

Post by alexvw »

Yeah, most android phones dont support DeviceOrientationEvent, even the very newest version only gives me 2DOF. What phone was it though? I'd like to get it working everywhere its supported
User avatar
android78
Certif-Eyable!
Posts: 990
Joined: Sat Dec 22, 2007 3:38 am

Re: HTML5 VR demo

Post by android78 »

I'm not sure about this... When I use the Get from server on the PC and input the device number that it tells me, I get a stereo image. When I try the same from the mobile, it just comes back with a black screen.
When I click on the Send To Server, it appears to just show text for orientation data. What am I supposed to do?

P.S. this is on iphone 4s
alexvw
One Eyed Hopeful
Posts: 6
Joined: Thu May 17, 2012 4:22 pm

Re: HTML5 VR demo

Post by alexvw »

The mobile device (4S works) acts only as an accelerometer - it merely sends the signals to the server, which is then picked up and rendered on the PC. The other way around is... possible, but not really logical. Very few PCs have directional sensors, and even the 4S would struggle to render much. I'm not sure if you read the post where I describe how to use it, but this is the process:

1. open page on iphone. remember this device ID
2. on the iphone, select "Send to server". dont let the phone turn off or go blank
2. open page on PC, select "get from server"
3. When prompted, enter the device id shown originally on the iphone, not the PC
4. The PC will now start rendering the stereo image, but the scene will mirror the iphone's movements in real time
User avatar
android78
Certif-Eyable!
Posts: 990
Joined: Sat Dec 22, 2007 3:38 am

Re: HTML5 VR demo

Post by android78 »

cool. Got it.
It works, but I was hoping to be able to view it on the iphone too. Have you managed to render 3D on the iphone in the browser using HTML5? I would have thought that the same page should be able to both send tracking data and display the image at the same time.
alexvw
One Eyed Hopeful
Posts: 6
Joined: Thu May 17, 2012 4:22 pm

Re: HTML5 VR demo

Post by alexvw »

Almost no mobile devices support webGL (browser 3d rendering) yet (see http://caniuse.com/webgl) - much of HTML5 is cutting edge web tech, support is always an issue. Hardest part of my job (I do a ton of Jquery/HTML5 development) is handling the dozens of different types of device/browser.

In this case, though, that sort of defeats the purpose. There are plenty of native apps that will allow you to use the phone as a camera - but they do it all natively, as in they both get accelerometer data and then render directly on the phone. The purpose of this was to get the excellent accelerometer on my iPhone usable on my PC - I have a rudimentary HMD I built that connects to two displayport connections on my PC, and I can quite easily drag a browser into their view. This way, I can simply slot the iphone on the helmet, and it automatically syncs with my PC view. Not super useful in terms of performance, but its more of a proof of concept than anything.
TheLookingGlass
Two Eyed Hopeful
Posts: 73
Joined: Fri Aug 31, 2012 6:22 am

Re: HTML5 VR demo

Post by TheLookingGlass »

alexvw wrote:Almost no mobile devices support webGL (browser 3d rendering) yet (see http://caniuse.com/webgl) - much of HTML5 is cutting edge web tech, support is always an issue. Hardest part of my job (I do a ton of Jquery/HTML5 development) is handling the dozens of different types of device/browser.

In this case, though, that sort of defeats the purpose. There are plenty of native apps that will allow you to use the phone as a camera - but they do it all natively, as in they both get accelerometer data and then render directly on the phone. The purpose of this was to get the excellent accelerometer on my iPhone usable on my PC - I have a rudimentary HMD I built that connects to two displayport connections on my PC, and I can quite easily drag a browser into their view. This way, I can simply slot the iphone on the helmet, and it automatically syncs with my PC view. Not super useful in terms of performance, but its more of a proof of concept than anything.
I tried your demo. Great work! The frame rate was extremely slow as you mentioned but I definitely see the potential. Otherwise, it's a fun little proof-of-concept and i'm sure it took some work to "throw together". Keep it up.
User avatar
jaybug
Binocular Vision CONFIRMED!
Posts: 302
Joined: Sun Sep 09, 2012 4:55 pm

Re: HTML5 VR demo

Post by jaybug »

Is the server down now?

I only get "Your device is number Loading...."

Edit: Just realized this post is almost a month old, so the answer is probably yes... :cry: :p
alexvw
One Eyed Hopeful
Posts: 6
Joined: Thu May 17, 2012 4:22 pm

Re: HTML5 VR demo

Post by alexvw »

Is the server down now?

I only get "Your device is number Loading...."
Yeah, unfortunately I did disable it. It was a victim of its own success - considering that every communication of frame data counts as a hit to my hosting, there was a point where a handful of people playing with it drove it over 100,000k+ hits / day. Even though those hits were 1kb JSON calls, it was driving up my bandwidth so I disabled it.

I took a look into websockets (HTML5 browser emulation of standard socket communication, would be far more efficient) but it's not supported by my hosting setup, and even if it were, few browsers do it.

I also looked into re-enabling the local version (takes local accelerometer data, and renders a scene on the phone/mobile device itself) however again, there is a complete lack of support. iOS 6, IE10, Android, etc do not support webGL AT ALL... basically only a couple desktop browsers support it... but who has an accelerometer built into a desktop? Also, I got a new phone (Nokia 920) which does not even have a browser to test the app anymore.

This is actually a bad thing for 3d games in general (including anything VR) - Microsoft has decided that webGL is "Bad":
http://www.pcgamer.com/2011/06/21/micro ... e-harmful/. Theyre not the only ones - iOS doesnt support it, neither does the android browser.

I, being primarily a web developer, was hoping what webGL would take off and we might see lots of platform-agnostic 3d games built... they could even easily be VR, considering that phones nowadays are 1080p and have very accurate accelerometers - we could have devices where you just drop your phone into a headset and the lenses adapt the view. Without 3d support, however, that isnt going to happen. At least not non-natively... and I don't do much native coding, so nothing from me :(

I am working on another game for fun though, if you want to check it out: http://www.alexvw.com/particle.php . Not VR related, but a fun work-in progress regardless
alexvw
One Eyed Hopeful
Posts: 6
Joined: Thu May 17, 2012 4:22 pm

Re: HTML5 VR demo

Post by alexvw »

Side note - one method which I have yet to explore is emulating a 3d context using three.js... Not exactly a real solution, but an interesting way to get it to work nonetheless. I'll look into it later
Post Reply

Return to “Do it Yourself!”