¿Se puede utilizar Leaflet para mostrar imágenes panorámicas de 360°?

Question

El Marzipano de Google facilita enormemente la tarea de crear recorridos de realidad virtual. Es posible tomar la salida de Marzipano y personalizarla, hasta cierto punto. Sin embargo, Leaflet, con su gran cantidad de complementos y la facilidad para crear capas personalizadas, ofrece un grado de personalización mucho mayor. Lo que no me queda claro es si puedo usar imágenes panorámicas de 360° como esta en Leaflet especificando de alguna manera el sistema de coordenadas y luego sirviendo los "tiles" correctos desde mi propio servidor.

Aparte del problema del sistema de coordenadas y del corte en mosaico, no me queda claro si Leaflet puede producir el efecto de desplazamiento suave que ofrece Marzipano. Por ejemplo, ¿qué sucede cuando se llega a los 180°? En una vista panorámica, deseas hacer una transición suave para mostrar lo que sea que esté en/alrededor de -180° en lugar de que el servidor de mosaicos envíe un mosaico en blanco de "no encontrado".

Agradecería mucho a cualquier persona que pueda decirme si esto es posible en absoluto con Leaflet.

Answer 1

¿Puede leaflet usarse para mostrar imágenes panorámicas de 360 grados?

Sí, pero el resultado probablemente no es lo que esperabas.

Por ejemplo, puedo tomar esta imagen de la página de ejemplos de Panellum, que es un panorama completo en proyección equirectangular...

...añadirla a un mapa de Leaflet para que se repita horizontalmente usando algunos trucos de Leaflet...

var map = new L.Map('leaflet', {
    center: [0, 0],
    zoom: -3,
    minZoom: -6,
    crs: L.CRS.Simple
});

L.tileLayer('https://pannellum.org/images/alma.jpg', {
    tileSize: L.point(4096,2048),
    bounds: [[0,-Infinity],[2048,Infinity]],
    attribution: 'Panellum',
    maxNativeZoom: 0,
    minNativeZoom: 0,
    minZoom: -6
}).addTo(map);

... y Leaflet lo mostrará (como en este demostración funcionando), y el usuario podrá hacer zoom y pan:

En este punto es importante señalar que Leaflet solo funciona con imágenes planas y no realiza reproyección, por lo que la (falta de) distorsión es (muy) notable. Compara eso con cómo se ve el mismo ejemplo en Panellum:

...y ahora, la acera, que se mostraba como una línea curva, ¡ahora es recta! (¡como se esperaba!). Pero, ¿por qué?

Porque las imágenes de panoramas se proyectan para hacerlas planas. En términos de SIG, lo que tienes es una imagen/mapa en proyección equirectangular, como...

...y luego proyectas eso en una esfera...

...y luego colocas una cámara en el centro de la esfera para obtener el punto de vista correcto. Así que cuando estás explorando un panorama de 360°, no estás moviendo una imagen plana, estás rotando una cámara (virtual) dentro de una esfera (virtual).

En términos prácticos, los visualizadores de panoramas tienden a trabajar con mapas de cubo y/o skyboxes. En lugar de una esfera, se utiliza un cubo (y en lugar de una imagen plana, se utilizan seis proyecciones azimutales).

Leaflet podría ser capaz de mostrar texturas de caras de cubo (por ejemplo, ignorando la "superior" y la "inferior" y repitiendo horizontalmente las otras 4) pero, nuevamente, solo de forma plana.

por ejemplo, utilizando las imágenes del ejemplo de cubemap de Panellum y aplicando aún más trucos de Leaflet para que la coordenada x del mosaico se repita cada 4 mosaicos...

var cubemaptiles = L.tileLayer('https://pannellum.org/images/wyman-park-playground-cubic/face{x}.jpg', {
    tileSize: L.point(1704,1704),
    bounds: [[0,-Infinity],[1704,Infinity]],
    attribution: 'Panellum',
    maxNativeZoom: 0,
    minNativeZoom: 0,
    minZoom: -6
});

cubemaptiles.getTileUrl = function getTileUrl(coords) {
    coords.x = coords.x % 4;
    if (coords.x < 0) coords.x += 4;
    return L.TileLayer.prototype.getTileUrl.call(this, coords);
}

cubemaptiles.addTo(map);

...se puede obtener algo como esta demostración funcionando...

...debería ser obvio que hay artefactos notables en los límites de los mosaicos (es decir, las líneas rectas de las sombras chocan entre sí), como se esperaba. La distorsión es similar a tener mapas en proyecciones gnomónicas uno al lado del otro, por ejemplo,

Leaflet puede mostrar texturas de cubemap, pero argumentaré que no es la mejor herramienta para el trabajo.