<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Kolor: Image-stitching &#38; virtual tour solutions &#187; 360 video</title>
	<atom:link href="http://www.kolor.com/blog-en/tag/360-video/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.kolor.com/blog-en</link>
	<description></description>
	<lastBuildDate>Thu, 16 May 2013 13:21:17 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Introducing Kolor Eyes, an HTML5/WebGL player for 360° video by Yann Gilquin, developer</title>
		<link>http://www.kolor.com/blog-en/2011/04/06/introducing-kolor-eyes-an-html5webgl-player-for-360-video-by-yann-gilquin-developer/</link>
		<comments>http://www.kolor.com/blog-en/2011/04/06/introducing-kolor-eyes-an-html5webgl-player-for-360-video-by-yann-gilquin-developer/#comments</comments>
		<pubDate>Wed, 06 Apr 2011 09:17:44 +0000</pubDate>
		<dc:creator>Rami</dc:creator>
				<category><![CDATA[Labs]]></category>
		<category><![CDATA[360 video]]></category>

		<guid isPermaLink="false">http://www.kolor.com/blog-en/?p=346</guid>
		<description><![CDATA[<table border="0">
<tbody>
<tr>
<td><img style="display: block; width: 230px; height: 140px; margin: auto;" src="http://www.kolor.com/blog-fr/wp-content/uploads/2011/04/overview.jpg" alt="KolorEyes overview" /></td>
<td valign="top"><strong>Kolor Eyes</strong> is a web video player designed to allow user to <em>immerge himself into the scene</em> 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. </td></tr></table>]]></description>
			<content:encoded><![CDATA[<p><img style="display: block; width: 600px; height: 380px; margin: auto;" src="http://www.kolor.com/blog-fr/wp-content/uploads/2011/04/overview.jpg" alt="KolorEyes overview" /></p>
<p><span style="color: #ff6600;"><strong><em>Kolor Eyes video player</em></strong></span></p>
<p><strong>Kolor Eyes</strong> is a web video player designed to allow user to <em>immerge himself into the scene</em> 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&#8217;s now up to you to decide where to look at in the video.</p>
<p><span style="color: #ff6600;"><strong><em>Live version and demo video</em></strong></span></p>
<p>You can try online version <a title="try Kolor Eyes now" href="http://www.kolor.com/eyes">here</a>.</p>
<p>Here is a demo video showing what is possible to do with Kolor Eyes. <em>Remember to enable closed caption (CC button) to get live explanations.</em></p>
<p><span style="color: #ff6600;"><strong><em>Technologies behind Kolor Eyes</em></strong></span></p>
<p><strong>Kolor Eyes video player</strong> is based on 2 recent major technologies of the Internet:</p>
<ul>
<li> <span style="color: #ff6600;"><strong><em>HTML5</em></strong></span>
<p>Video content is broadcasted through a &lt;video&gt; tag which is part of HTML5 specification. Data decoding is done by the browser, without any need for some additional plug-in.</li>
<li> <span style="color: #ff6600;"><strong><em>WebGL</em></strong></span>
<p>View frame is inside a &lt;canvas&gt; element with a 3D WebGL context. This brand new technology is specified by <a href="http://www.khronos.org/webgl">Khronos Group</a>. It&#8217;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.</li>
</ul>
<p><span style="color: #ff6600;"><strong><em>No need for additional plug-in</em></strong></span></p>
<p>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 <strong>Kolor Eyes video player</strong>. Opera 11 will support it, and Safari enables it with a special setting. Khronos Group maintains a <a href="http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">web page</a> listing current available implementations of WebGL for every platform.</p>
<p><span style="color: #ff6600;"><strong><em>High level of integration</em></strong></span></p>
<p>Proprietary technologies well deployed over the Internet today suffer of a lack of integration with web page content. <strong>Kolor Eyes video player</strong> breaks this statement offering new possibilities as it relies on <em>standards</em>. Player&#8217;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.</p>
<p><img style="display: block; width: 700px; height: 600px; margin: auto;" src="http://www.kolor.com/blog-fr/wp-content/uploads/2011/04/snapshot.png" alt="Snapshot" /></p>
<p><span style="color: #ff6600;"><strong><em>Kolor Eyes video player features</em></strong></span><br />
<span style="color: #ff6600;"><strong><em>A video player</em></strong></span></p>
<p><strong>Kolor Eyes</strong> 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 <em>take snapshot</em> button allowing to capture instant frame to save and share it wherever the user wants to. <strong>Kolor Eyes video player</strong> also enables camera autorotation.</p>
<p><img style="display: block; width: 506px; height: 94px; margin: auto;" src="http://www.kolor.com/blog-fr/wp-content/uploads/2011/04/player-controls.png" alt="Player controls" /></p>
<p><span style="color: #ff6600;"><strong><em>Controls</em></strong></span></p>
<table style="color: #999999; font-size: 1em; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;">
<tbody>
<tr>
<td>Different controls are available from right column sliding menus. They expose useful camera and view settings. <em>Projection distance</em> makes it possible to change distance to projection plane for <em>pannini</em> and <em>little planet</em> projection modes.</td>
<td rowspan="4"><img style="display: block; width: 264px; height: 513px; margin: auto;" src="http://www.kolor.com/blog-fr/wp-content/uploads/2011/04/view-controls.png" alt="View controls" /></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>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&#8217;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.</td>
</tr>
<tr>
<td>All these controls are also reachable by <em>presets</em> 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&#8217;s up to the user to modify them to create his own view.</td>
</tr>
</tbody>
</table>
<p><span style="color: #ff6600;"><strong><em>Projections</em></strong></span></p>
<p><strong>Kolor Eyes video player</strong> allows to set the projection mode. As any other controls, it&#8217;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.</p>
<table style="color: #999999; font-size: 1em; font-family: 'Lucida Grande',Verdana,Arial,Sans-Serif; width: 500px; margin: auto; border: 1px solid #ffffff;" cellspacing="5" cellpadding="5">
<tbody>
<tr class="itemtitle">
<td style="border: 1px #fff solid;" colspan="2"><strong>Orthographic</strong></td>
</tr>
<tr>
<td><img style="display: block; width: 250px; height: 263px; margin: auto;" src="http://www.kolor.com/blog-fr/wp-content/uploads/2011/04/projection-orthographic.png" alt="Projection orthographic" /></td>
<td style="text-align: left;">This projection mode shows the spherical video. This means fields of view of 360×180°.</td>
</tr>
<tr>
<td style="border: 1px #fff solid;" colspan="2"><strong>Rectilinear</strong></td>
</tr>
<tr>
<td style="text-align: right;">This projection mode is a standard lens. It&#8217;s the default mode.</td>
<td><img style="display: block; width: 250px; height: 263px; margin: auto;" src="http://www.kolor.com/blog-fr/wp-content/uploads/2011/04/projection-rectilinear.png" alt="Projection rectilinear" /></td>
</tr>
<tr>
<td style="border: 1px #fff solid;" colspan="2"><strong>Pannini</strong></td>
</tr>
<tr>
<td><img style="display: block; width: 250px; height: 263px; margin: auto;" src="http://www.kolor.com/blog-fr/wp-content/uploads/2011/04/projection-pannini.png" alt="Projection pannini" /></td>
<td style="text-align: left;">Pannini is a large field of view planar projection that allows to display large field of view while keeping lines straight.</td>
</tr>
<tr>
<td style="border: 1px #fff solid;" colspan="2"><strong>Little planet</strong></td>
</tr>
<tr>
<td style="text-align: right;">Also called polar projection, everything is wrapped around a small ball.</td>
<td><img style="display: block; width: 250px; height: 263px; margin: auto;" src="http://www.kolor.com/blog-fr/wp-content/uploads/2011/04/projection-littleplanet.png" alt="Projection little planet" /></td>
</tr>
<tr>
<td style="border: 1px #fff solid;" colspan="2"><strong>Fisheye</strong></td>
</tr>
<tr>
<td><img style="display: block; width: 250px; height: 263px; margin: auto;" src="http://www.kolor.com/blog-fr/wp-content/uploads/2011/04/projection-fisheye.png" alt="Projection fisheye" /></td>
<td style="text-align: left;">This mode corresponds to the projection given by a 180° fisheye lens.</td>
</tr>
<tr>
<td style="border: 1px #fff solid;" colspan="2"><strong>Mirror ball</strong></td>
</tr>
<tr>
<td style="text-align: right;">If you had a perfect spherical mirror ball, you&#8217;ll get this view.</td>
<td><img style="display: block; width: 250px; height: 263px; margin: auto;" src="http://www.kolor.com/blog-fr/wp-content/uploads/2011/04/projection-mirrorball.png" alt="Projection mirror ball" /></td>
</tr>
</tbody>
</table>
<p><span style="color: #ff6600;"><strong><em>More information</em></strong></span></p>
<p><strong>Kolor Eyes video player</strong> is at the moment at the demonstration level, and still evolving in our lab. If you&#8217;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</p>
]]></content:encoded>
			<wfw:commentRss>http://www.kolor.com/blog-en/2011/04/06/introducing-kolor-eyes-an-html5webgl-player-for-360-video-by-yann-gilquin-developer/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>
