📢 v4.0 Major Update Announcement

[WoodNeck]

I'm reworking this whole repository for a new major version, and it's almost done.
Please check them and give us your opinion!

• https://woodneck.github.io/egjs-view360/

Changes

There will be many breaking changes in almost everything.
But please understand that we're trying to make them good.

We're writing migration guide, so you can check that later if you're planning to migrate from v3 to v4.

Here're some major changes:

PanoViewer will be renamed to View360

// before
import { PanoViewer } from "@egjs/view360";

// after
import View360 from "@egjs/view360";

• See "Spinviewer will be deprecated in v4" for reasons.

CSS/SASS files will be provided

As we were injecting <canvas> element and all the styles, it was pretty hard to predict how the viewer would be shown after mounting PanoViewer in v3.
So, we'll provide CSS/SASS files in the later versions, make the viewer area consistent before/after mounting View360
But, this change will make you create your own <canvas> element.

<link rel="stylesheet" href="https://naver.github.io/egjs-view360/release/latest/css/view360.min.css">

<div class="view360-container is-16by9">
  <canvas class="view360-canvas" />
</div>

• https://woodneck.github.io/egjs-view360/docs/quick-start

New API

Reworked the whole API for tree-shaking & efficiency, but also for the easy-to-use.

Lots of tutorials will be added.

Well, as there ain't plenty of tutorials at the moment in v3, just some demos & quick start, so we're adding lots of tutorials to v4.
We're adding tutorials & documents for options, events, plugins, and general how-to-use.
But, as the documents are written by Koreans, they can be weird or hard to understand.
So, helps are much appreciated! Please contribute to our guide to make them better.

Smoother controls

We'll provide more smooth & animated controls in V4, which works on mouse/touch/keyboard
You can try it now: https://woodneck.github.io/egjs-view360/demo/hotspot

New options & events

We've added lots of options & events for customization in V4

• Options
• Events

Also, we're adding one new projection in v4: "LittlePlanetProjection"

Plugins

We're adding two plugins in v4, ControlBar, and LoadingSpinner which can show default controls & UI.
You can check it here:

• Plugins

More plugins will be added.

Hotspots (Annotations)

We're supporting Hotspots in v4. You can add hotspots like this, and they will be parsed automatically:

<div class="view360-container is-16by9">
  <canvas class="view360-canvas">
  <!-- Hotspot container -->
  <div class="view360-hotspots">
    <!-- Hotspot elements -->
    <div class="view360-hotspot" data-yaw="0" data-pitch="0">1</div>
    <div class="view360-hotspot" data-yaw="-90" data-pitch="0">2</div>
    <!-- You can also use (x, y, z) coordinates -->
    <div class="view360-hotspot" data-position="0 1 0">3</div>
    <!-- You can customize hotspots yourself -->
    <div class="view360-hotspot" data-yaw="-90" data-pitch="-90">
      <div>SOME_UNIQUE_TEXT</div>
      <img src="SOME_IMG_URL" alt="You can show anything in hotspots" />
    </div>
  </div>
</div>

Spinviewer will be deprecated in v4

We're focusing on PanoViewer only after v4. Spinviewer will be maintained in v3, but won't be included in the later versions.

Future works (Roadmap)

We're planning to add these features to View360:

New projections

We'd like to support other 360 panorama projection types.
As our major reference is FFmpeg(https://ffmpeg.org/ffmpeg-filters.html#v360), we're planning on adding projections that FFmpeg supports one by one.
Also, we'd like to support tile-based projections like Google street view.

New features we're planning 💡

• Image resize when it's too big for the device
• Spatial Audio
• HDR Images
  • Support .hdr & .exr formats
  • Tone mappings
• Progressive loading
  • srcset
  • Change src by current zoom level (Level of Detail)
• New controls
  • Ctrl + scroll, or other bindings for zoom
  • Double-tap to zoom-in & zoom-out
• PIP(Picture in Picture)
• Initial camera animation
• Video controls for VR
• Gallery plugin
• Transition effects for image changes.

Please give us your opinions! Also, any form of contribution is welcomed!

[WoodNeck]

I'll check old issues after finishing v4, sorry for the wait!

[naashw]

Nice 😁👍

[hurda21]

Any status update on this? Trying to install with npm install @egjs/view360@next gives an error.

[WoodNeck]

@hurda21
v4.0.0 is in PR (#402), sorry but it's unavailable at the moment.
I'll release it asap after the PR is merged!

[WoodNeck]

v4.0.0-beta.0 is released!