Cómo convertir una imagen panorámica en mosaicos de mapas de cubos con JavaScript

Cómo convertir una imagen panorámica en mosaicos de mapas de cubos con JavaScript

No importa en qué estés trabajando ahora mismo, ya sean videojuegos o visores de 360​​°, los llamados skyboxes son un recurso necesario que no es fácil de encontrar. Sin embargo, lo que es fácil de encontrar son imágenes regulares con la relación de aspecto 2: 1 (equirrectangular) o imágenes panorámicas, y existe la posibilidad de crear la versión de mapa de cubos de ellas con diferentes herramientas.

En este artículo, aprenderá cómo generar fácilmente la versión de vista de cubo de su imagen panorámica utilizando JavaScript simple en el navegador.

1. Prepara una imagen de 360 ​​°

Para crear nuestro propio componente de visor de imágenes de 360 ​​° para ReactJS, necesitaremos una imagen que tenga las características de una imagen panorámica de 360 ​​°, ya que crearemos la versión de seis cubos más adelante. Esta imagen debe:

  • Tener una proyección equirrectangular.
  • Mantenga la 2:1relación de aspecto. Esto significa que el ancho debe ser el doble de la altura (o la altura debe ser la mitad del ancho, por ejemplo, 2000px * 1000px es ideal para una imagen de 360 ​​de excelente apariencia).

En este artículo usaremos la siguiente imagen que cumple con los requisitos mencionados:

360 Degrees Image Panoramic
Source: Unsplash by Timothy Oldfield

Recuerde que este es un ejemplo puro, la imagen no es de alta resolución, así que no espere calidad 4K. Cuanto mayor sea la resolución de las imágenes, mejor se verá, por supuesto.

2. Convierta una imagen panorámica en un mapa de cubos

A continuación, convertirás la imagen panorámica en 360 ° que tienes en 6 imágenes diferentes que contienen uno de los bloques de la imagen en su versión cubemap. Puedes utilizar esta herramienta online gratuita para generar los 6 mosaicos , cuyo código fuente está disponible en Github aquí en caso de que quieras investigar más al respecto. panorama-to-cubemap le permite convertir fácilmente sus imágenes de 350 grados (con aspecto equirrectangular) en imágenes con caras de cubo usando JavaScript simple y el elemento canvas. Se ejecuta directamente en su navegador y utiliza la interpolación de Lanczos para obtener imágenes de salida de alta calidad.

En nuestro ejemplo, la herramienta generará 6 imágenes diferentes cuya estructura es la siguiente:

Panorama Image Converted to Cubemap

Los mosaicos generados, en este caso, son los siguientes:

  • Arriba (top.jpg): Cubemap Up Side
  • Derecha (right.jpg): Cubemap Right Side
  • Atras (back.jpg): Cubemap Back Side
  • Izquierda (left.jpg): Cubemap Left Side
  • Frontal (front.jpg): Cubemap Front Side
  • Inferior (bottom.jpg): Cubemap Downside

También puede generar los mosaicos junto con un visor simple de JavaScript, HTML y CSS que la herramienta en línea de Marzipano puede generar aquí. Con estos mosaicos, debería poder implementar un visor de imágenes 360 tal como lo requiere la biblioteca marzipano.

Que te diviertas ❤️!

Esto podria interesarte

Conviertete en un programador más sociable