Happy to announce the new release of WebRotate 360 Product Viewer. v5 is packed with great new features and important fixes. In this post we will summarize the key enhancements you should care about.
Polygonal Hotspots
We are thrilled to introduce one of the most requested features: Polygonal Hotspots. For years, our users have been asking for a way to outline specific areas in their 360-degree product images. While traditional hotspots have been useful, they typically rely on indicator images like circles or rectangles with a fixed shape. However, for those designing architectural presentations or producing eLearning material, this often isn't enough. That's where polygonal hotspots come in, and we are excited to announce that they are now available in version 5 of WebRotate 360 Product Viewer.
Here's a quick example using a single image of a skull to illustrate what is possible:
There are two methods for creating polygonal hotspots: manual creation and our new Blender plugin, which we'll describe below.
Manual polygonal hotspot creation:
- Start by creating a new hotspot.
- In the Hotspot form, click on the image with the blue hotspot indicator at the bottom of the Hotspot tab.
- Rather than selecting a different indicator image, check the "Enable" option under Polygonal Indicator.
- Customize the active and inactive colors of the polygon and adjust its opacity as needed.
- Close both forms and begin drawing polygons on the images to cover the desired areas. Complete each polygon shape by placing the last polygon point close to the first one or via a double-click.
- To fine-tune the polygons, use the adjustment boxes at their edges or click and drag the entire polygon using the white space inside the polygon.
- Navigate through the images with arrow keys or the mouse wheel and draw new polygon spots as necessary.
How to create polygonal hotspots in WebRotate 360 SpotEditor
Automated WebRotate 360 Turntable Animator for Blender:
With version 5, we are excited to introduce an advanced Blender addon that automates the creation of both polygonal and standard hotspots. This plugin streamlines the process for published 360-degree product models in Blender. Simply select the desired mesh or pick a vertex within your 3D model, and the plugin will automatically generate a complete 360 view with perfectly positioned hotspots. You can then further edit and customize these hotspots using WebRotate 360 SpotEditor.
See how simple it is to create a polygonal hotspot from a mesh
See the Turntable Animator section below for more details.
Zip Publishing for 360 views in Amazon listings
Amazon has taken the initiative to introduce 360 product views in recent years. While they offer their own 360 product viewer, which is still quite rudimentary, our v5 update now enables you to publish zip packages containing processed images that are fully compatible with Amazon. This means you can effortlessly create interactive 360 product views using the WebRotate 360 SpotEditor for your website or your clients' websites, as well as conveniently package and upload these views directly to your Amazon listings. It's a highly convenient solution.
This feature is not limited to just Amazon. The ability to generate conveniently sized and packaged 360-degree product images proves useful for various other applications you might encounter.
Publish 360 image zip for Amazon uploads
To utilize this feature, simply click the new Zip button located in the application toolbar on the left side of the main window. Then, set your zip SKU (unique product identifier, if different from the project name), specify its Amazon compatibility, choose the desired image quality, and press OK.
Once published, you can upload your zip to PixRiot and get a shared link you can use in your Amazon vendor dashboard:
Upload your Amazon 360 zip to PixRiot to get a link for Amazon
WEBP image format
With nearly all modern browsers now supporting WEBP images and the phase-out of IE 11 complete, v5 introduces support for publishing 360 product views in the WEBP format. Compared to JPG images with similar compression levels, WEBP can achieve up to a 40% reduction in overall image file size.
This results in faster loading times for your end-users. Additionally, our optimized PixRiot service, bolstered by a global CDN, now accepts WEBP uploads, guaranteeing top-tier performance for PixRiot users.
To utilize this feature, simply choose WEBP from the 'Image Format' drop-down menu on the Publish Form. Then, adjust the quality settings for both low-res and zoom (high-res) images as desired. While it's possible to keep the same quality for both image resolutions, we suggest lowering the quality for zoomed images. This is because compression artifacts tend to be less noticeable on high-resolution images.
Hotspot Auto-path
A standout feature of our product is the hotspot capability. However, creating smooth hotspot paths or trajectories can be challenging. Manual adjustments can lead to a jerky presentation, ruining the overall 360 viewing experience. While our Magnify tool was a step forward, it was clear we needed more.
Introducing the Auto-Path: this innovative tool simplifies the process of crafting smooth hotspot trajectories.
Manually mark your point of interest on at least 5 images, then apply Auto-path
To use the new feature, start by following these steps:
- Create a New Hotspot on the Hotspots tab.
- Uncheck the preview mode and zoom in via toolbar at the top (see the following video).
- Optionally, check "Show magnify tool" to help with positioning.
- In "Path tools" on the same tab, check the new "Show auto-path" option.
- Identify a point of interest in your images.
Next, using either arrow keys or the mouse wheel for quick navigation, scroll through the images and place at least 5 spots (one per image) following the trajectory of the point of interest.
No need to be precise in positioning the initial spots! For the best results though, ensure that two of these spots lie close to the left and right edges of the hotspot's visible path.
After placing the fifth spot, an elliptical trajectory, indicated by a dashed line, will automatically appear. If needed, add extra spots or tweak the existing ones either by dragging them with the mouse or using the keyboard shortcut, (Ctrl + Arrow on Windows; Option + Arrow on macOS). Spots can be also individually removed using the Delete key or the right-click menu.
Once satisfied with the trajectory, enable "Stick new spots to auto-path". Then, click "Stick existing spots to auto-path" to align the initial spots with the auto-path.
Now, as you navigate through the rest of the images and set new spots close to your selected point of interest, they will automatically snap to the auto-path. You can also drag them left or right along the trajectory as required, ensuring a consistently smooth elliptical path.
New hotspot creation workflow in v5 using Auto-path
WebRotate 360 QuickView app
When you publish a 360 product view on your hard-drive using WebRotate 360 SpotEditor, it generates an HTML file inside the "published" folder. However, viewing this file offline outside of SpotEditor can be less straightforward. Although there are simple workarounds available, using your default browser for previewing might feel too heavy or intrusive for such previews.
Additionally, when delivering your work to a client for an offline review, they may encounter difficulties when trying to open the HTML file (consider using PixRiot to share your 360 product images with your clients instead).
WebRotate 360 QuickView is the solution to this problem.
It is a standalone application designed to open your published 360s offline with ease. By simply double-clicking on a .view file, which you can now find in v5's published output folder under published/360-assets/project-name, you can instantly view your 360 product spins without any hassle. QuickView is also available under the "Test Browser" drop-down on the publish form in SpotEditor (Windows version only at this time), so you don't have to mess with your browser tabs while testing your webrotate views.
Double-click .view file to launch the QuickView app
Furthermore, QuickView is an essential tool for quick previews of your rendered 360 product images created using WebRotate 360 Turntable Animator for Blender, a new feature we are introducing with v5. You can find more details about it in the post below.
For Windows users, WebRotate 360 QuickView can be downloaded here. The macOS version will be released soon, so stay tuned for updates.
WebRotate 360 Turtable Animator for Blender
We are thrilled to introduce our Blender addon, the WebRotate 360 Turntable Animator! This exciting addition opens up a whole new world of possibilities for 3D designers who are familiar with Blender, making it easier than ever to work with WebRotate 360.
This plugin provides similar functionality to SpotEditor, including the ability to publish finalized 360s that can be uploaded online or viewed locally. When combined with the QuickView app mentioned earlier and integrated with SpotEditor, it streamlines your 3D production pipeline, enhancing your workflow.
"How to" video is coming here soon
Here's a brief overview of what you can achieve with the Turntable Animator:
- Easily set up 360 animations for single-row and multi-row rendering with just a few mouse clicks. The plugin animates the target object instead of the camera, resulting in realistic studio-like lighting.
- Render animations using Blender's built-in rendering engines or via a fast draft render for quick reviews.
- Automatically create hotspots, including polygonal ones from meshes or vertex groups, saving you time and effort in the hotspot creation process (see this quick demo).
- Instantly preview the results as an interactive view in QuickView and/or upload them to PixRiot or elsewhere for easy sharing and showcasing.
- Seamlessly open the output in WebRotate 360 SpotEditor for further editing and advanced publishing, giving you full control over your 360 projects.
Refer to our detailed user guide for comprehensive instructions on using the Turntable Animator.
As of now, the plugin is exclusively available to users with a valid PRO or Enterprise license. If you have previously purchased our software and are still within your free upgrade period, you can request access to the Turntable Animator here.
Performance and SEO
One of the challenges in SEO with 360-degree product views has been a performance metric known as "Largest Contentful Paint" (LCP). Put simply, search engines like Google evaluate how quickly users can view media in the most prominent section of a website. They often judge site performance based on this metric (among others) since it reflects the user's perception of page performance.
In past releases, our 360-degree product views, which are often the main content on a page, faced challenges with LCP. The first image would only load after all the viewer scripts and configuration xml were in place. This delay sometimes led to slower-than-expected LCP times, which Google could flag as a performance issue. Moreover, it meant users had to wait longer before seeing any content within the viewer container.
LCP has a major effect on your SEO performance ranking
With v5, we've revamped the viewer's loading process. Now, a "pre-loader" image can be visible even before any scripts are loaded. This is achieved by incorporating a direct link to the first image in the HTML integration snippet, ensuring considerably faster LCP times.
All SpotEditor publishing templates have been updated accordingly. They now produce viewer HTML that ensures the first image loads immediately, and importantly, before any page scripts. To emphasize this enhancement, we've added a new integration template named template_fast_largest_contentful_paint.html in the integration templates.
Additionally, come late September, core WebRotate 360 plugins and PixRiot iFrames will be updated to support this faster loading mechanism.
There's more!
In the next post, we will cover other interesting features and enhacements in v5, including:
- Noxon turtable integration.
- Google Analytics v4 integration.
- Auto-play on drag release for smooth non-stop 360s (jewlerly mode!)
- Centered pulsating animation as a progress indicator.
- Copy styles between hotspots.
- New hotspot action that can trigger another hotspot.
- File monitor
- See full-version history
To get the latest release using your existing installation, start SpotEditor and click the blue "info" icon in the bottom left corner, then select "Check Updates". Free version can be downloaded using this link: