r3-legacy/src/r3-d3-viewport-fixedAspect-vr.js

/**
 * R3.D3.Viewport.FixedAspect.VR
 *
 *  Respect the aspectRatio setting and adjust viewport x,y,width and height accordingly
 *      - entire viewport remains visible at all times
 *      - will have empty space above or below viewport depending on canvas size (if canvas ratio != viewport ratio)
 *      - is centered around center of canvas
 *
 * @param apiComponent
 */
R3.D3.Viewport.FixedAspect.VR = function(
    apiComponent
) {

    __RUNTIME_COMPONENT__;

    R3.D3.Viewport.FixedAspect.call(
        this,
        apiComponent,
        true
    )

};

R3.D3.Viewport.FixedAspect.VR.prototype = Object.create(R3.D3.Viewport.FixedAspect.prototype);
R3.D3.Viewport.FixedAspect.VR.prototype.constructor = R3.D3.Viewport.FixedAspect.VR;

R3.D3.Viewport.FixedAspect.VR.prototype.createInstance = function() {

    R3.D3.Viewport.FixedAspect.prototype.createInstance.call(this);
};

R3.D3.Viewport.FixedAspect.VR.prototype.updateInstance = function(property) {

    R3.D3.Viewport.FixedAspect.prototype.updateInstance.call(this, property);

};

/**
 * This calculates the dimensions of the viewport based on the following example info:
 *
 * aspect =  width
 *           ------
 *           height
 *
 * width    = aspect * height;
 * height   = width / aspect;
 *
 * aspect > 1 (width > height) (landscape)
 * aspect < 1 (height > width) (portrait)
 *
 * 4 / 3   = 1.33333 (1920 x 1440)
 * 16 / 9  = 1.77777 (1920 x 1080)
 *
 * w   h                w      h
 * 9 / 16  = 0.5625    (1080 x 1920) - required
 * 3 / 4   = 0.75      (1440 x 1920) - current
 *
 * @returns {{left: number, right: number, top: number, bottom: number}}
 *
 * At all times we have to half the width since this is only one half of the viewport
 */
R3.D3.Viewport.FixedAspect.VR.prototype.calculateDimensions = function() {

    var canvasSize = this.parent.getCanvasSize();

    var newCanvasWidth = canvasSize.width / 2;

    var canvasAspectRatio = newCanvasWidth / canvasSize.height;

    if (canvasAspectRatio > 1) {

        /**
         * Width is greater than height (landscape)
         */

        if (this.aspectRatio < 1) {

            /**
             * The required aspect ratio is portrait mode - use the full Height of the canvas
             */
            this.width  = this.aspectRatio * canvasSize.height;
            this.height = canvasSize.height;

        } else {

            /**
             * The required aspect is also more wide than high - so we have another two possibilities:
             * a) The required aspect is greater than the current aspect - this means the required aspect is less high
             *    than the current aspect - we can use the full width
             *
             * b) The required aspect is less than the current aspect - this means the required aspect is higher than
             *    the current aspect - we need to determine a new width based on the current height
             */

            if (this.aspectRatio > canvasAspectRatio) {
                /**
                 * a)
                 */
                this.width  = newCanvasWidth;
                this.height = newCanvasWidth / this.aspectRatio;

            } else {
                /**
                 * b)
                 */
                this.height = canvasSize.height;
                this.width  = this.aspectRatio * canvasSize.height;
            }

        }

    } else {

        /**
         * Width is less than height (portrait)
         */

        if (this.aspectRatio > 1) {

            /**
             * The required aspect is landscape in a portrait mode - but we are in landscape - use the full width and
             * calculate the new height
             */
            this.width = newCanvasWidth;
            this.height = newCanvasWidth / this.aspectRatio;

        } else {

            /**
             * The required aspect is also more high than wide (portrait) - we have again, two possibilities
             * a) The required aspect is greater than the current aspect - this means the required aspect does not fit
             *    the full width of the current aspect - use the full width of the current size and determine a new height
             *
             * b) The required aspect is less than the current aspect - this means that the required aspect is less wide
             *    than the current aspect, so we can use the full height of the current size and determine a new width
             */

            if (this.aspectRatio > canvasAspectRatio) {

                /**
                 * a)
                 */
                this.width  = newCanvasWidth;
                this.height = newCanvasWidth / this.aspectRatio;

            } else {

                /**
                 * b)
                 */
                this.height = canvasSize.height;
                this.width  = canvasSize.height * this.aspectRatio;
            }
        }
    }

    /**
     * Clamp the values between 0 and 1
     */
    this.width  = this.width / canvasSize.width;
    this.height = this.height / canvasSize.height;

    /**
     * Center the viewport
     */
    if (this.height < 1) {
        this.y = (1 - this.height) / 2;
    } else {
        this.y = 0;
    }

    if (this.width < 1) {
        this.x = (1 - this.width) / 2;
    } else {
        this.x = 0;
    }

    if (this.side === R3.D3.API.Viewport.FixedAspect.VR.VIEWPORT_RIGHT) {
        this.x += this.width / 2;
    }

    if (this.side === R3.D3.API.Viewport.FixedAspect.VR.VIEWPORT_LEFT) {
        this.x -= this.width / 2;
    }

};