WebGL Panorama by ulfbiallas

Easy-to-use jQuery plugin to display cube map panoramas on a HTML canvas object using WebGL.

Downloads

Demo

Click here to see a demo of the plugin.

How to use?

All you need to use WebGL Panorama is a canvas object and a 360 degree panorama in shape of a cube map (consisting of 6 images)

<script type="text/javascript" src="jquery-1_0.js"></script>
<script type="text/javascript" src="jquery-panorama.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

    var data = {
        xp : "xp.png",
        xn : "xn.png",
        yp : "yp.png",
        yn : "yn.png",
        zp : "zp.png",
        zn : "zn.png"
    }
    $('#pano').panorama(data);

});
</script>

<canvas id="pano" width="640" height="400"></canvas>

Optional parameters

For the moment, there is just one optional parameter:

Field of view

To set the field of view, just add the entry 'fov : someValue' to the parameter hash. If not explicitly set, it is set to its default value which is 90.

Browser support