The value of tile.z remains unchanged at 0.

[HarunoOi]

This may be a rudimentary question, but I need help.
I have implemented multi-cube and progressive display using marzipano.

The value of tile.z remains unchanged at 0 depending on the screen.
I would like to know if there are any possible reasons why the value of tile.z does not change.

Env

• Windows OS
• Chrome

About

• Progressive display when images are displayed in full screen.
  • width x height ： 1355x667, 1024x768
  • When the image is opened on the screen, tile.z=0, then tile.z=1
• Progressive display does not work when images are displayed in small ranges.
  • width x height ：540x370, 768x576...
  • When the image is opened on screen, tile.z=0 and not tile.z=1
  • When the image is enlarged on the screen, the tile.z=1 is loaded at a certain time, and when the image is reduced, the preview image is returned to the display.

Source code I wrote↓

• set progressive: true

stage: { progressive: true }

• multi-cube + progressive

import Marzipano from 'marzipano';
import { ViewParams, createView, ViewLimit } from '../view/rectilinear';
import { MarzipanoCubeGeometry, MarzipanoViewer } from '../types';

export type CubeImageType = 'cube';
export type Face = 'a' | 'b' | 'c' | 'd' | 'e' | 'f';

export type URLs = { [K in Face]: string };

export type TCubeImage = {
  urls: URLs;
  type: CubeImageType;
  equirectUrl?: string;
  viewParams?: ViewParams;
};

export default class CubeImage implements TCubeImage {
  readonly urls: URLs;
  readonly type: CubeImageType;
  readonly viewParams?: ViewParams;
  readonly aspectRatio: number;
  readonly viewLimit?: ViewLimit;

  constructor(
    { urls, type, viewParams }: TCubeImage,
    aspectRatio: number,
    viewLimit?: ViewLimit,
  ) {
    this.urls = urls;
    this.type = type;
    this.viewParams = viewParams;
    this.aspectRatio = aspectRatio;
    this.viewLimit = viewLimit;
  }

  private static createGeometry(): MarzipanoCubeGeometry {
    return new Marzipano.CubeGeometry([
      { tileSize: 512, size: 512 },
      { size: 1536, tileSize: 1536 },
    ]);
  }

  private createSource() {
    const sourceFromTile = (tile: { z: number; face: Face }) => {
      const valueFromTile = tile.face;
      const previewUrl = `https://s3-hogehoge/fugafuga/preview`;
      if (tile.z === 0) {
        const mapY = 'lfrbud'.indexOf(valueFromTile) / 6;
        return {
          url: previewUrl,
          rect: { x: 0, y: mapY, width: 1, height: 1 / 6 },
        };
      } else {
        return { url: this.urls[valueFromTile] };
      }
    };
    return new Marzipano.ImageUrlSource(sourceFromTile, {});
  }

  createScene(viewer: MarzipanoViewer) {
    return viewer.createScene({
      geometry: CubeImage.createGeometry(),
      pinFirstLevel: true,
      source: this.createSource(),
      view: createView(this.aspectRatio, this.viewParams, this.viewLimit),
    });
  }
}