WebGL Panorama

jquery plugin webgl panorama cubemap 360

View the Project on GitHub ulfbiallas/jquery-webglpanorama

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


production version
development version


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">

    var data = {
        xp : "xp.png",
        xn : "xn.png",
        yp : "yp.png",
        yn : "yn.png",
        zp : "zp.png",
        zn : "zn.png"


<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

Even if WebGL Panorama runs with every jQuery version, your browser has to support WebGL to work with it!


Copyright (c) 2014 Ulf Biallas. Licensed under the MIT license.