Introducing Axis, a free and open source panoramic rendering engine

Video by

What is Axis?

Axis is an extenable video and photo rendering engine written in Javascript. It supports equirectangular, cylindrical, and flat formats. Axis can render textures with multiple built-in projections such as Fisheye and Tiny Planet. Axis has built-in support for WebVR.

Formats

Axis can detect formats such as Equilinear and Cylindrical by examining the dimensions of a video. Below are the supported formats Axis can support.

Equirectangular Format

Equirectangular Format

Cylindrical Format

Cylindrical Format

Flat (Normal) Format

Flat (Normal) Format

Projections

Out of the box Axis supports multiple projections such as Fisheye and Tiny Planet.

Equilinear/Cylindrical Projection

Equilinear Projection

Fisheye Projection

Fisheye Projection

Tiny Planet Projection

Tiny Planet Projection

Mirror Ball Projection

Mirror Ball Projection

Who is Axis for?

Video Players

Axis enables multiple projection and texture rendering for different types of content. It supports panoramic video and photo. Traditional flat video is also supported. Axis is extendable and has a fluid API.

Panoramic Galleries

Axis provides a robust frame and fluid API for rendering panoramic textures. Build your panoramic video and/or photo gallery on Axis.

Hackers

Axis is free and open source. Contribute today and join others working to make Axis for everyone.

You?

Contribute, read the documentation, or check out the source and see how Axis can work for.


How do I use Axis?

Axis is written in Javascript and is meant for the web. It has a fluid API and plugin system allowing any consumer to build and quickly extend the Axis rendering frame. It relies on WebGL for rendering but fallbacks on a canvas rendering engine if WebGL is not supported. Axis utilizes Three.js, an open source 3D Javascript library.


            var domElement = document.querySelector('#my-video');
            var frame = new Axis(domElement, {preload: true});

            frame
            // set video source
            .src('/path/to/video.mp4')
            // set frame height
            .height(500)
            // set frame width
            .width(500)
            // render to DOM
            .render()
            .once('ready', function () {
              frame
              // seek to 2 seconds for current time
              .seek(2)
              // begin interval rotation around y axis every 100ms decrementing 0.002
              .rotate('y', {value: -0.002, every: 100});
              // play the video
              .play();
            });
          

Sites using Axis