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';
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
About
Source code I wrote↓
set
progressive: truemulti-cube + progressive
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), }); } }