VR and wearables are the future of tech in my opinion. Everything in the next few years will be about getting us more immersed into the tech, and the tech immersed into us. With this in mind I wanted to get WebVR working with my Jekyll site. How do we do this?
Looking at that source it looked like we really only needed to do a couple of things to make this work with Jekyll. I’m going to assume you have a Jeckyll installation up and going (if you don’t then go to jekyllrb.com and grab it). First thing you do is edit your _config.yaml to add a collection. Here is a simple example (add to the bottom of the file):
Now we have a collection for jekyll to look for. Now add a few directories to your root:
Inside of your /libraries directory download and place the file vr.dev.js from the WebVR Starter Kit. Inside of your /_vr directory you’ll be putting your *.md files later.
The next thing I did was make a new file inside of /_layouts called vr.html which is really just a copy of the source from the Panorama Example with some md changes. Here’s what that looks like (disclosure: I don’t know how to ignore the markdown I’m putting in this so I’ve putt in /’s to prevent the markdown from being applied in the example):
As you can see there are only two spots I’m messing with this. The title, and the VR.panorama. Next I made my first md file which I called opening-day.md. The only thing that goes here is the layout, title, and image. The layout chooses the layout to use, the title is placed in the markup above, and the image as shown above. That opening-day.md file looks like this:
And there you have it. I have a type of content on my site that will be VR. If you’ve got Google Cardboard you can checkout this picture I took at Camden Yards on opening day in full VR glory. If you don’t have Cardboard then you can still see a decent effect via a mobile or desktop modern browser. The picture isn’t perfect. I took it with my (awesome) OnePlus One, and I didn’t use anything to really stabilize myself. You’ll notice some stitching weirdness in that picture. In the end I got a cool VR thing going on with my simple jekyll site in about 5 minutes.