Introducing Kolor Eyes, an HTML5/WebGL player for 360° video by Yann Gilquin, developer


Wednesday 6 April 2011

KolorEyes overview

Kolor Eyes video player

Kolor Eyes is a web video player designed to allow user to immerge himself into the scene during viewing. Video footage is in spherical format and consists in frames with fields of view of 360×180°. User can turn in every direction and zoom in order to position where he aims anytime. It’s now up to you to decide where to look at in the video.

Live version and demo video

You can try online version here.

Here is a demo video showing what is possible to do with Kolor Eyes. Remember to enable closed caption (CC button) to get live explanations.

Technologies behind Kolor Eyes

Kolor Eyes video player is based on 2 recent major technologies of the Internet:

  • HTML5

    Video content is broadcasted through a <video> tag which is part of HTML5 specification. Data decoding is done by the browser, without any need for some additional plug-in.

  • WebGL

    View frame is inside a <canvas> element with a 3D WebGL context. This brand new technology is specified by Khronos Group. It’s a set of graphical 3D features made available directly in the web page by the browser and taking advantage of the capacities of the graphical card.

No need for additional plug-in

As said earlier, the browser does give access to these technologies, thus user does not need to install any third party plug-in. All market leader browsers does not enable these technologies yet. Nevertheless, Firefox 4.0 or Chrome 10 do implement them and give the best user experiences with Kolor Eyes video player. Opera 11 will support it, and Safari enables it with a special setting. Khronos Group maintains a web page listing current available implementations of WebGL for every platform.

High level of integration

Proprietary technologies well deployed over the Internet today suffer of a lack of integration with web page content. Kolor Eyes video player breaks this statement offering new possibilities as it relies on standards. Player’s code runs directly into the browser and can access all enabled API. This allows web page developers to create better interaction between the player and online resources. We demonstrate this with snapshot feature in version 1.0.

Snapshot

Kolor Eyes video player features
A video player

Kolor Eyes is a video player. It has a complete set of common features: playback and audio settings control, preloading, stream quality selector, playlist, full windowed or reduced display modes. Fullscreen mode is reachable by a simple user action, depending on the browser. More features can be developed, 1.0 version embeds as an example of HTML5 capabilities a take snapshot button allowing to capture instant frame to save and share it wherever the user wants to. Kolor Eyes video player also enables camera autorotation.

Player controls

Controls

Different controls are available from right column sliding menus. They expose useful camera and view settings. Projection distance makes it possible to change distance to projection plane for pannini and little planet projection modes. View controls
Camera has several settings allowing user to have a real custom experience. Zoom speed sets the zoom actions intensity and camera speed the repositioning velocity. Camera has a spring simulating physics when moving into the scene, to give user a strong natural feeling. Two important spring settings are exposed: damping and harshness. It’s also possible to set autorotation speed in degrees per second. Positive values makes it turn to the right and negative values to the left.
All these controls are also reachable by presets assigned on projection mode change. When user selects a projection mode, some predefined settings are automatically applied to the view presenting what we think is the most interesting scene. Then it’s up to the user to modify them to create his own view.

Projections

Kolor Eyes video player allows to set the projection mode. As any other controls, it’s available anytime during playing. Projection computation is done by graphical card and reaches a precision to the pixel. This means there is no distortion in image. 6 modes are today proposed by the player.

Orthographic
Projection orthographic This projection mode shows the spherical video. This means fields of view of 360×180°.
Rectilinear
This projection mode is a standard lens. It’s the default mode. Projection rectilinear
Pannini
Projection pannini Pannini is a large field of view planar projection that allows to display large field of view while keeping lines straight.
Little planet
Also called polar projection, everything is wrapped around a small ball. Projection little planet
Fisheye
Projection fisheye This mode corresponds to the projection given by a 180° fisheye lens.
Mirror ball
If you had a perfect spherical mirror ball, you’ll get this view. Projection mirror ball

More information

Kolor Eyes video player is at the moment at the demonstration level, and still evolving in our lab. If you’re interesting in this technology, in a futur product or if you wish to know more about this technology, please contact us with following form

Tags:




You can leave a response, or trackback from your own site.

6 Responses to “Introducing Kolor Eyes, an HTML5/WebGL player for 360° video by Yann Gilquin, developer”

  1. Thesing Says:

    I don’t think Flash is the one that requires a lot of computing power, it’s the fact of decompressing and decoding a very complex data in real time called “Digital Video”, Flash makes transparent the hardware calls implementation for the developers, with swf to html5 converter you will need to deal with conversion of flash to html5 players by rendering a lot of hardware engines, then multi-platform apps will be a true headache for the developers, the same problem than always: HTML hacks for each browser but with a more complex technology: HTML5


  2. Rami Says:

    Hi Garrett,
    The only low-cost solution is currently to mount several GoPro cameras on a rig, and stitch the videos using a dedicated solution from Kolor.
    Maybe other solutions will come out in the next few months.


  3. Garrett Says:

    The player is great, but I’d like to create the content and more information on the filming equipment required would help developers envision how they can use your player. The “immersive media” 360 camera is over $25,000 and they aren’t currently making them. Do you have other options because a still camera probably isn’t the tool used to capture 360 while moving.


  4. zack Says:

    what kind of hardware are you using to film such video?


  5. Eduard Says:

    I am interested in your technology (Kolor Eyes)


  6. Mike Hoover Says:

    I am interested in hearing more about this technology. We currently use Autopano Giga and Panotour and we are wanting to do the “street view” kind of thing you are doing here. What are the requirements and how do we get the photos to snap while driving?
    Thank you in advance.


Leave a Reply