/equirectangular-cubemap

convert equirectangular image (360° panorama) to cubemap images

Primary LanguageTypeScriptMIT LicenseMIT

Equirectangular to Cubemap

Take an Equirectangular or 360 Panorama image as input and return Cubemap images (6 images with a 1:1 aspect ratio).

Usage

Visit https://equirectangular-cubemap.vercel.app/ and you will be welcomed with the UI like the following image.

The main view is a 3D scene where you can see:

  • 360 Panorama image around your view.
  • Visually, a cube with the same texture as the panorama.

At the top-right corner is the settings menu.

Settings Menu

Adjust the view and functionality.

Setting

  1. Angle: rotate the cube's texture.

  2. Dimension: resolution of the image.

    • Preset values are 256, 512, 1024, 2048, and 4096 pixels.

    • The higher the value the slower the rendering will be.

    • 256 pixels will make the image blurry.

  3. Mode: view as box or flat image.

Local Development

Note: Make sure you have Node.js installed on your machine.

  1. Clone the repo.
  2. Change directory to equirectangular-cubemap. 
    cd equirectangular-cubemap
  3. Install dependencies: 
    pnpm i # you can use `yarn` or `npm install` or `bun install`
    if you want to use pnpm but haven't enabled it yet, you can run corepack enable to enable yarn and pnpm.
  4. Run local server 
    pnpm dev

Roadmap

  • Handle HDR image with RGBELoader

Acknowledgement

Image source