/zuho

WebGL equirectangular image viewer with many projection method.

Primary LanguageJavaScript

zuho.js

zuho.js is a high-quality WebGL Equirectangular image viewer with many projection method.

Demo

Features

  • High-quality rendering.
    • Use QMC sampling to handle highly nonlinear anisotropy.
    • Pseudo gamma-corrected calculation.
    • Switch the two shaders (speed vs quality) adaptively.
  • Support many projection methods.
    • Azimuthal | Perspective
    • Azimuthal | Conformal
    • Azimuthal | Equidistant
    • Azimuthal | Equiarea
    • Azimuthal | Orthogonal
    • Azimuthal | Reflect
    • Cylindrical | Perspective
    • Cylindrical | Conformal
    • Cylindrical | Equidistant
    • Cylindrical | Equiarea (= Orthogonal)
    • Mollweide
    • Hammer
    • Eckert IV
    • It is also very easy to add custom projection functions. See "Mapping" in "zuho.js".
  • No dependencies, small, and easy to use.
    • Requires only "zuho.js", which is less than 600 SLoC.
    • Implemented as a custom element.
    • Provides simple rendering JS APIs.

Usage

zuho.js provides a x-zuho custom element.

<script type="module" src="zuho.js"></script>
<x-zuho src="src.jpg"></x-zuho>

See "index.html" for more advanced usage.

zuho.js also provides JS API. Although it is not stable and not documented yet, I think it is not difficult to use because zuho.js is a tiny library.

Manipulation

  • Rotate : Drag.
  • Zoom : Wheel, shift key + drag, or pinch gesture.

Browser Support

The latest Blink-based, Gecko-based, and WebKit-based browsers should be supported.

TODO:

  • Custom default rotation.
  • 3 DoF rotation with two-finger operations.
  • Read XMP metadata.

Tips

"zuhô (図法)" is the Japanese word which means "map projection method".