Making-of CANAL+ first Virtual Reality experience
This post is part of the onboarding process of CANAL+. After a few months we’re asked to write about our experiences within the company.
This is post #2, post #1 can be found here.
Inspired by Ryan Hoover’s “Why you should build your product in public”.
4
During its August 2014 hackathon, in less than 24 hours, Netflix made a prototype of what its interface may look like in VR.
When I first saw it it made an impression on me. I was still working on OPUS, far from CANAL+ and VR, but I ordered an Oculus DK2 in the hope of one day building an app for it.
That didn’t happen for a lot of reasons. One of which being that I had no idea how to make 3D nor the time to learn it. And so, VR went back to being something cool I was happy to read about, waiting for its grand beginning.
Context
When I came to CANAL+ I was lucky to join a group of people passionate about tech. The digital experience division. Within a team charged to look out for innovative ideas and to experiment with new technologies.
The team, lead by Pierre-Louis Naud, has been working on subjects ranging from IoT, to Natural-Language Understanding, iBeacons, IFTTT, Image Recognition, Augmented Reality and the latest tech from Apple (HLS-FPS, Apple TV, Apple Watch..) and Google.
Here the idea of doing something with VR quickly came back.
5
One of the main take-away I keep from my startup experience is that you can do almost everything. You just need to commit enough time and energy to it.
Pitching
The idea was simple. Build an iOS VR experience for our on-demand video streaming service. I chose iOS because of how familiar I am with the platform having developped and shipped a couple of apps.
I started by pitching the idea to Pierre-Louis and instantly got his green light to keep looking into it. Guillaume Bentaieb, at the time working in our team, proposed to join the project and was of tremendous help.
Tinkering
First thing first we had to learn how to make 3D. Then make it work in VR. Like — oh I don’t know — everyone our first recourse was Google and Github.
Google’s Cardboard SDK documentation seemed clear enough. The sample Github project presenting it ran immediately with no issues. We were confident we were going to quickly get the hand of it. It was just cubes and planes after all. Everything was good in the world..
..until it wasn’t.
We started to experiment with the project and discovered the joy of OpenGL and vertices along the way. After the better part of a Friday working our way to some minor changes (the cube became a surface on which we had no way to map a texture, image or video) we left for the weekend not feeling so confident anymore.
Searching
That night I couldn’t let it go. We had to find a way to do it. There had to be a way to do 3D efficiently. OpenGL clearly wasn’t going to cut it for us, it required too much for too little.
As soon as I got back home I fired up my computer and went on looking. After a short while there it was. Apple made a 3D engine easy to use and built into iOS. Someone even made a Github project demoing VR with it.
Building
From that point on everything came together quickly. We tested interface ideas. First displaying our content on a flat then curved wall. We tried cylinder, cube and sphere layouts as well.
Figuring out how to play a video, with and without DRM, took about a day. If you are interested you can see our code for an iOS 360 VR video player here on Github. Great idea from Guillaume to make it available to everyone.
Speaking of Star Wars. For a while our interface was set in space. Yep.
You would navigate between planets representing the genre of movies in our catalog. I don’t have any screenshots left but trust me it was clunky and didn’t feel right. There was also no direct link to the CANAL+ universe and brand.
CANAL+ is an important partner and promoter of the movie industry. So naturally we gravitated towards putting our users inside a 3D movie theater. We just had to build one first.
Google 3D Warehouse came to the rescue here. It is a great repository of models in which we found the elements we needed to build our theater.
The first time we went inside and explored it felt great. It felt huge. It felt right. We knew we were on to something.
We decided to use the walls of the room to display posters of movie genres. Even as it meant that users had to look all the way to their left and right to access them. We wanted people to actually experience the full room. Not only what was just in front of them.
We changed it so you could select and element by looking and clicking at it using the Google Cardboard unique button. Adding this mechanism and detect where the users were looking was an aventure in and of itself. It took us a few days before figuring out the best way to code our way through it. Props to Guillaume on that part!
Testing
Then we started showing people. The fact that there was only one button on a Google Cardboard made us think that users would naturally use it to validate their selections.
We were wrong. When we had people test it they didn’t understand how to select something or what it was possible to select.
So we tried a bunch of other VR apps and settle on implementing the same mechanism as Land’s End, a game by the creators of Monument Valley.
Now instead of clicking you just need to look at an interactive element and a loading animation will appear. Indicating that the element is interactive and giving you a sense of how long you have to keep looking before the selection is made. Simple.
We tested again and the results were dramatically different. People got it.
Shipping
During the final stages of development, thanks to Pierre-Louis’ insight, we contacted the French startup Original Cardboard. We will be linking to their website directly within the app. For users wanting to get their hands a good quality cardboard at a fair price I believe it makes for a great user experience. It also removes friction for people not knowing about Cardboards, and gives a nice boost to a young startup.
Soon we will ship this experience to our customers. It is still early days for Virtual Reality. We learned a lot with this project and we have so much more to learn. We can’t wait to get your feedbacks. You can contact me here or on Twitter.
In the meantime we already started working on the next (and augmented ;) chapter of Virtual Reality. We will show more soon.
Cheers
Thanks to everyone involved in this project. Mickael, our lead iOS developer, for helping us work the quirks out of our code. Ismail our mobile product owner on CANALPLAY for his attention to detail. Pierre-Louis for his advices and insights. Romain and Baptiste for their designer’s eyes. And Guillaume for all of the above.
