Building a Website #Day14

Key Takeaways

well this is awkward so far death diary has been exclusively Paul and now I'm here I kind of snuck into the series because I actually built something on the Chrome death Summit website uh and I wanted to show you what I did because I think it's really exciting so the last few weeks I've been playing around with VR and web VR a little bit I'm just dabbling I'm you know just trying things out um and Paul and I thought it would be a really cool opportunity to build like a 360 image of the SF Jazz Center into the Chrome def website for that people if they are not able to join us live tomorrow they could actually at least see what the venue looks like and have get more a feel of the space that is available to us and that's exactly what I did so uh if you go to the Chrome def website developer.chrome.com/apps same website that Paul built but you have this tiny cardboard button and if you click it we load the 360 view of the SF Jazz Center on a desktop with just normal desktop you can just use your mouse to pan around and get a feel for what the surroundings look like if you're on your phone you can actually just hold the phone in your hand and move around uh and have this as a like a magic window into a different location um you'll also have a cardboard button that if you have a cardboard you can put your phone inside it and actually move your head around to actually feel even more like you're there and if you have a proper VR device you can actually use that to uh get into the location use a proper like an ulous Rift or the HZ Vive or whatever you have um and use that to actually take a look inside so as I said this is sadly just a stereoscope just a 3D 360 image so many acronyms 360 image it is not a stereoscopic image so the perception of depth won't actually be real but you will have like this is basically a big 3D sphere with a texture on the inside that you can look around in to give you at least the the feel of you looking around but not actually a feel of of depth so how do I do this how this this is actually a good example of how to do Progressive enhancement with web VR because if you don't have anything it still works with ma with mouse and panning and you can just use your mouse L on it's already a pretty good experience so let's dive into the code a little bit um mostly I'm working with VR view which is a great library that a colleague of mine wrote which uses the VR polyfill and the VR boiler plate so VR polyfill basically polyfills the web VR API for your browser while the VR boiler plate does the progressive enhancement story to go from just a canvas where you can pan around to cardboard to um to actual VR devices so if you go into the component section where Paul has written different things like the video handle that does the fading the moving in and out of Big Picture Mode to small picture mode for the video I wrote a new VR component and it's actually mostly a lot of animation and class JavaScript but mostly what it does is it checks if you are on the de Summit location sub page and if so it will fade in the button or rather if you're not on the def Summit location sub page it will just not do anything thing and then we hijack the m to inject our little button and do Transitions and all of these kind of things is not not rocket science right here and the interesting thing is basically the two lines of the onclick Handler if you click on that button we will hide the button because it needs to go out the way and also we will load a script so that means we will load a script on click this is usually not recommended because it will take it mean that if you click it there will be especially if you've never loaded this script it will take a lot of time until action takes place however I thought that it's probably not going to be every single visitor on the website is that is going to go into the VR experience so both forcing the data onto the user and loading it ahead of time just because didn't seem like a good idea so I just wanted to load it on demand and the webvr script is again mostly about hijacking so this is where uh I use VR view the library and I hijack the master to inject a new iframe uh where inside I'm going to have the canvas with the 360 image and everything this is all the things that webvr does for me um and it's basically one call so what I'm doing is uh I'm saying create a new player for me webvr please uh put it into the VR view ID element and use this image that we have and that's basically all I have to do and with this code it already worked and after that I uh took a little bit a closer look into web y because the amount of data we were transferring was was quite big and it turns out that web VR actually bundled the chakra player uh which makes sense because it also has support for playing videos in web VR or in a VR space um and chakra player is a module that basically does adaptive streaming it Tunes down the quality depending on how how much bandwidth you have at your disposal but you're never going to play video here so so delivering that code to the user is just going to waste so I'm basically vendoring the entire VR view into third party our third party folder here and I commented out lot of requires that were in there and just recompiled the entire thing and shrunk the code down so I think at this point when gzip we're now delivering uh 100 kilobytes of code and 250 kilobytes of image data which I think is it's still a lot of data but it's acceptable most of the time on mobile um and it will load quick enough most of the time other than that it's very basic code but I did find a nice pattern which is creating functions that create promises for both request animation frame and transition end so trans calling transition end promise on an element will give you a promise that resolves when transition end is fired on that element and it allows you to just do these chains uh chains as in Chains you chain promises together so I Call Transition end promise on the M head and when is when that is done I append a child I do a double graph and then I do again a class adaptation and do Transition and promise again so this is basically how I can just more or less declaratively uh do animation sequences without using the actual web animation API which is somewhat of a nice work on it's not as powerful but um it makes stuff a little more readable than having multiple levels of indentations because you to double w and all these kind of things uh if you like this let me know if you have questions let me also know I am at Sur on Twitter uh if you want to join us tomorrow at the sfj center in person come by it's going to be great if you can't use the features on the Chrome Summit website to get notifications when we're going to go live everything is going to be live streamed subscribe also to this YouTube channel because we have more great things here that are going to come out regularly so um thank you for watching and hopefully see you [Music] tomorrow a