3.0.0 Change Notes

3.0.0 Changes

Summary

• PanoViewer

  • Video Support (#44)
  • Better Performance (#126)
  • Test Coverage (62% -> 92%)
  • Multiple Image Load (#127)
  • Various types of Cubemap (#131)
  • Additional gyro mode - VR (#137)
  • Enable native scroll when viewer is embeded (#171)
  • Interface improvement
  • Bug fixes

• SpinViewer

  • Add spinTo method (#140)
  • Unify interface

1. Support Video

By specifying 360 videos as parameters, you can display video that can be rotated 360 degrees.

const panoViewer = new PanoViewer(contaier,{
    video: videoElement or "/path/to/video/video.mp4"
  }
);

2. Performance Improvement

• Texture loading performance (MacBook Pro 2015, Chrome 63)

jpg image size(width x height)	before	after
4096 x 2048	332ms	133ms
8192 x 4096	997ms	538ms

3. Breaking change on Interface

When to panoviewer activate changed and resume() have been removed

• before: You must call resume() to activate the viewer

const panoViewer = new PanoViewer(contaier, {...});
panoViewer.resume();

• after: Viewer is activated as soon as anoViewer instance is created

const panoViewer = new PanoViewer(contaier, {...});

resume event name changed to ready event

• before: resume event

panoViewer.on("resume", onResumeHandler);

• after: ready event

panoViewer.on("ready", onReadyHandler);

suspend(), suspend event have been removed

• before: Call suspend() to disable the viewer and re-enable it with resume().

/* Inactivate Viewer */
panoViewer.suspend();

/* Reactivate Viewer */
panoViewer.resume();

• after: Call destroy() to destruct the viewer and create a new instance if needed again.

/* Inactivate Viewer */
panoViewer.destroy();

/* Reactivate Viewer */
panoViewer = new PanoViewer(contaier, {...});

new error event type added

a new type added to error event that occurs when the viewer is disabled by rendering context lost. It can be determined that the error.type value is 15.

panoViewer.on("error", function(e) {
    if (e.type === 15) { // rendering context lost 
        // Deactivation response action
    }
    // is equivalent with following
    if (e.type === PanoViewer.ERROR_TYPE.RENDERING_CONTEXT_LOST) {
        // Deactivation response action
    }
});

rename ProjectionType

• Before: config.imageType

const panoViewer = new PanoViewer(contaier, {imageType: "equirectangular"});

• After: config.projectionType

const panoViewer = new PanoViewer(contaier, {projectionType: "equirectangular"});

As video is supported, imageType can be confused with image as a restricted attribute, so change to projectionType

• Based on(Ref)
  • Many methods of projection have been proposed over the centuries
  • A useful method to visually compare different projection types is to use saturation maps.

Change return value of getImage

• Before: {image, imageType} Object

const image = panoViewer.getImage();
// image.image (URL or Image object)
// image.imageType (imageType)

• After: Image Object

const image = panoViewer.getImage(); //Image Object

Specification error correction

• In the past, when a user specifies a URL, it returns a URL. If you pass an Image object, it returns an Image object.
• It is not meaningful to return the image information specified by the user as it is

Enhanced ease of use

• By returning object information redefined as {image, imageType}, we need to access through image object each time to get real image information
• In particular, there is no need to pass the imageType information to the value requested by the user

Unity with getVideo

• Change the getImage() interface to match the style and style of the getVideo() method that returns a video object.

Changing the parameters of setImage

• Before: {image, imageType} Object

panoViewer.setImage({image: "url", imageType: "vertical_cubestrip"});

• After: image can be specified as a mandatory value, optionally changed to specify projectionType

panoViewer.setImage("url", {projectionType: "cubemap"});
// or if image type is equirectangular, projectionType can be omitted.
panoViewer.setImage("url");

Eliminate existing unnecessary {image, imageType} structures

• Returning an Image object instead of {image, imageType} in getImage() eliminates the need to use that object
• {image, imageType} type not required

Enhance convenience

• In the past, image and imageType were specified for each image, but only image and imageType can be specified.