Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/zebrajaeger/sphere2cube-js

Converter for images to panoramic viewer
https://github.com/zebrajaeger/sphere2cube-js

equirectangular jpg js pannellum pano panorama partial-panorama png psb psd

Last synced: 9 days ago
JSON representation

Converter for images to panoramic viewer

Awesome Lists containing this project

README

        

# @zebrajaeger/createpano

[![NPM Version](https://img.shields.io/npm/v/@zebrajaeger/createpano.svg?style=flat)](https://www.npmjs.org/package/@zebrajaeger/createpano)
[![Install Size](https://packagephobia.now.sh/badge?p=@zebrajaeger/createpano)](https://packagephobia.now.sh/result?p=@zebrajaeger/createpano)
[![License](https://img.shields.io/github/license/zebrajaeger/sphere2cube-js)](https://img.shields.io/github/license/zebrajaeger/sphere2cube-js)

Convert
- full spheric panorama image to viewer (equirectangular)
- 360° panorama image to viewer (y to small for equirectangular)
- partial panorama image to viewer

Reads
- PSD and PSB with RAW or RLE Encoding
- jpg
- png

Writes
- preview (cubic)
- preview (downscaled)
- tiles (pyramide levels)
- html (pannellum implementation)
- all above as zip file

## Installation

```bash
$ npm install -g @zebrajaeger/createpano
```

## Usage

### Minimum

```bash
$ createpano -i sourceimage.psd
```

## Options
```bash
Usage: cli [options]

Options:
-V, --version output the version number
-i, --source Source image (mandatory)
-ipa, --panoAngle Angle of pano (default: "360")
-ipy, --panoYOffset Y-Offset in degree [-90.0...90.0] (default: "0")
-o, --output Output folder (default: "_dist")
-te, --targetSize Image edge length of a face @ max resolution (default: inputImage.x / 4)
-fr, --facesToRender Faces To render (default: "flrbud")
-ti, --tilesIgnore Dont render tiles
-ts, --tileSize Tile size (default: "512")
-tq, --tileJpgQuality Jpg Image quality of tiles in percent (default: "85")
-tp, --tilePathTemplate Tile path template (default: "{{levelCount}}/{{face}}{{y}}_{{x}}.{{fileType}}")
-tpt, --tilePathType Tile image type (default: "jpg")
-c, --renderCube Render cube sites in full resolution
-cp, --cubePath Cube sites path (default: "{{face}}.jpg")
-cq, --cubeJpgQuality Cube Jpg Image quality (default: "85")
-pi, --previewIgnore Dont render preview
-pcp, --previewCubePath Path and name of preview image (default: "preview.q.jpg")
-pcq, --previewCubeJpgQuality Preview quality in percent (default: "85")
-pfp, --previewFlatPath Path and name of preview image (default: "preview.f.jpg")
-pfo, --previewFlatOrder Face order from left to right (default: "bdflru")
-pfq, --previewFlatJpgQuality Preview quality in percent (default: "85")
-psp, --previewScaledPath Path and name of preview image (default: "preview.s.jpg")
-psf, --previewScaledFactor Factor for one Downscaling (default: "1.4142135623730951")
-psq, --previewScaledJpgQuality Preview quality in percent (default: "85")
-pw, --previewWidth Preview width (default: "1000")
-sp, --signaturImagePath Signature image
-ss, --signaturSide Signature side (default: "d")
-sb, --signaturBelow Signature below pano image
-hi, --htmlIgnore Don't render html
-ht, --htmlTitle Head-Title-Tag (default: inputImage)
-hpp, --htmlPannellumFile Path of Pannellum .html file (default: "index.p.html")
-hmp, --htmlMarzipanoFile Path of Marzipano .html file (default: "index.m.html")
-zi, --zipIgnore Don't zip
-zp, --zipPath Path for Zip File (default: "pano.zip")
-v, --verbose verbose
-h, --help display help for command
```

## Preview

Made here: 47.162081, 10.923371

### Downscaled

![dsf](./doc/preview.eq.png)

### Cubic

![dsf](./doc/preview.png)

## TODO

- Flat image example
- zip refactoring
- parse exif data (needed?)
- parse xmp (for Autopano Giga, but GoPro seems to let it die. So needed?)

## Many Thanks to

- https://stackoverflow.com/questions/29678510/convert-21-equirectangular-panorama-to-cube-map
- https://de.wikipedia.org/wiki/Alpha_Blending
- https://stackoverflow.com/questions/1726630/formatting-a-number-with-exactly-two-decimals-in-javascript