At last, we have pushed a full new release of WebRotate 360 Product Viewer. It's released as v4.0 as the number of new features, enhancements, and fixes we packed in it since the last full release (v3.6.4) is significant, not to mention that it's two years in the making.
If you follow our blog, you probably have seen already this summary on some of the key features in this release as well as the follow up on the new hotspot Magnify tool.
Today we will cover the remainder of the key additions that made it into the final release (see full version history).
macOS Monterey Support and DMG installer
With the release of macOS Monterey, Apple broke our desktop software and that required the rework of some of the key image processing features in SpotEditor. While at it, we also revamped the Mac installation to use DMG installer, making it more streamlined and secure. And finally, we have notarized everything with Apple so that it seamlessly installs on Mac.
Also new in this release is the ability to install and use different versions of the software at the same time on both Mac and Windows.
Advanced "Play to Label" controls
This feature update gives you the ability to create "scripted" presentations that don't require user interaction. Using the new controls you can configure a 360 product views or a multi-row 3d spin to automatically animate to various labels (a.k.a. "key-frames") with extra options to control the animation direction, activate and/or trigger hotspots, etc.
If you visit our home page today on a desktop computer, you will see the 360 product animation of a Reebok shoe that automatically starts "playing" through the hotspots. Previously this required relatively involved use of viewer's APIs. With the new controls we go over below, the same (and more) can be done without any coding.
To use the new feature, first create one or more image labels. This is done under Images -> Rows tab where you can double-click on any of the images to create a named label. Once labels are created, you can optionally auto-start the animation by selecting Play to label in the drop-down under On view load section via Control -> Rotation tab. Click to configure and select the first label where you want to animate your spin when it's fully loaded.
Here you can control the speed (i.e the number of seconds to spin through all images), the direction of the animation, and optionally pick a key hotspot that you would create beforehand via the Hotspots tab.
First, you can simply choose to activate the hotspot so that its popup is made visible when the label is reached. You can also make it wait a number of milliseconds to auto-trigger the hotspot using the Trigger after control. Triggering a key hotspot can either result in simply closing the hotspot popup or "triggering" a hotspot action that you would assign to the hotspot on the Action tab of the hotspot form.
There're a few actions to choose from on the Action tab (e.g the new "zoom to hotspot action" under Control action). One of them is called Label action and it allows you to pick a label and configure the same animation settings for your next step, thus giving you the ability to fully "script" the tour:
Remember, these hotspots can be made invisible by using a transparent 1px PNG as a hotspot indicator for example, and hotspots can be auto-triggered without being activated using the new feature, so technically you don't have to show hotspots to create such scripted 360 product tours.
Hotspot Animations
In v4 we have introduced six hotspot indicator animations to add a modern touch to your interactive 360 product photography or rendered 360 product views. They are made to work with any of the default indicators that come with SpotEditor and should work equally well with your custom graphics. The colors were fine-tuned to work well with light and dark backgrounds and you can always customize it further in your skin's CSS stylesheet if you need something different. To give you extra control, you can configure the speed of the animation and stop animating once user has interacted with the hotspot.
To assign an animation to a hotspot, select Configure next to Styles on the main tab of the hotspot form and choose one of the styles in the drop-down next to Animation. Note the new Min scale control that makes the indicators responsive which we covered in the previous blog post.
This website has not been updated yet to use the latest viewer (we're working on it!), so the best place to see 4 out of the 6 new animations that you can now configure for your hotspot indicators is this video.
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:
We're releasing a new feature in v3.6.5 beta later this week with a handy new tool to improve hotspot placement in your 360 product spins. It's really just a magnifying "glass" with a configurable zoom but a couple of extras make it quite more useful.
Update [Aug 22, 2023] Latest v5 now comes with the Auto-path feature that can be a huge help for hotspot creation.
Until now you mostly had to guess where to click on each image when creating a trajectory of your point of interest. True, you could zoom-in but even then, we don't let image zooming beyond the app boundaries while working inside SpotEditor. Also, it was hard to figure out where to click as the mouse cursor and the rest of the trajectory graphics could get in the way, blocking the image pixels you need.
Now with the Magnify tool you have a configurable zoom to give you clear details as well as unobstructed view of the image pixels at all times. But what makes it even more useful is that when you leave the mouse with the Magnify tool still on, you can use the extra unobstructed view to fine-tune the trajectory via the keyboard by adjusting each hotspot placement using a combination of arrow keys and ALT key (Option key on macOS).
Check out this video, explaining the entire process:
In addition to Magnify, you will notice a couple of minor enhancements:
1 New Hide inactive spot option under Path Tools that lets you hide other hotspot placements within the same hotspot trajectory. In other words, if checked, you will only see the hotspot placement on the current image.
2 There are extra options in the hotspot context menu and via keyboard shortcuts to allow propagating current hotspot placement to the next or previous frame. Before you had to propagate to all images first when you needed to have the hotspot to stay at the same position and then delete each placement on those frames where you didn't need it.
3 At last the color and width preferences you make for your hotspot trajectory via revised Path Tools will be saved to your project and restored (per hotspot) next time you open the project.
More exciting hotspot features are coming soon...
PS: if you can't wait for the public release of the new v3.6.5 beta with this feature, request it here.
I have been a 3D animator since I purchased my first computer, (an Amiga 500) way back in 1988. Much has changed obviously, in regards to rendering technology, CPU speed and the amount of memory our glorious machines have. However, we as animators still have issues that crop up no matter how technology changes.
One issue that might crop up is how to use this 360 interactive animation technology that you see almost constantly on the Internet. Better yet, how do you even start to think about and use this technology. Think of interactivity as a film strip, which allows the viewer to push or pull their mouse through the presentation. Basically, you are able to present a widget, process, or an idea to the user by dragging your mouse and clicking on icons attached to the geometry which are called hotspots.
Hey, "old 3D animation guy" we get that… do you? Most of my clients think they can only rotate a widget and talk about its parts. Not so. Using the film strip idea above you can allow your users to get lost in your film strip and interact with your widget when you are not able to be there and present it yourself. Your creations do have limitations in the form of internet speeds, graphic cards and the device that your viewer is using to view them on, but that is another blog post all together.
Working with most clients is easy because they simply want to have their product ("widget") rotate in 360. A rotation around the widget's center axis gives the viewer the ability to not only see all sides of the widget, but any hidden features the client wants to showcase.
How many degrees of rotation per frame is adequate for a smooth presentation? I use 24 frames with a rotation of 15° per frame (360 divided by 24 is 15). Just target the camera to your widget and make the first frame zero on the Y axis and at frame 24 336° (360 minus 24 is 336) on Y. The software you use to compile your project will give you a smooth interpretation of the widget’s rotation. Just add hotspot of your choice, and you are ready to publish.
What if you decide to show your widget from all sides in full "3D" and then show a few hotspots as the viewer enjoys the multiple axes provided (see the video example at the bottom of the post)? Easy enough you would think, but here is a sure-fire way to do it...
Luxion KeyShot
Some programs I use like KeyShot do this for you by selecting the "Tumble" feature from the KeyShot XR tab. In Keyshot, you first setup your animation. Setting the camera distance from the widget and lighting of the scene. Next, save your camera and select KeyShot XR from the bottom menu. Now, select tumble and choose "Object" as the rotation center. Since you have already setup your camera, you can select next from the "Pick Initial KeyShotXR View" menu.
For this example, I used 24 for "Horizontal Frames" and 12 for "Vertical Frames".
All that is left to do is name your animation, set the folder where the frames will be saved and set frame resolution (1920 x 1080 is what I usually use). Remember to render frames, not video when creating interactive projects. Use .png images if you want to change your background later, or .jpg to conserve room.
However, when I use Modo it can be a little tricky to get the results you're seeking.
Foundry Modo
I start by creating a target for my camera, (usually the center of the widget) then parent the camera to the target after setting the desired distance. In the example here, the client wanted to see their widget from the top and the bottom while it rotated in place. The camera would be at 45° on the Y axis at the highest and lowest points of the project to see the top and bottom of the widget, while rotating around the Y axis as you moved up and down.
To do that, I decided to have four positions for the camera on both the positive and negative Y axis. I simply divided 45° by four to get an angle of 11.25°. Starting from 0° and moving up on the Y axis I got the following angles: -11.25°, -22.5°, -33.75° and -45°. The angles for moving down on the Y axis are: 11.25°, 22.5°, 33.75° and 45°.
To get the widget to rotate around the Y axis I simply applied a 360-degree rotation over 30 frames. Frame 1 is 0° and frame 30 is 348°. I programed the software to repeat this motion for the rotation of the widget for the length of the project. Since there are 9 positions that the camera can move on the Y axis, the project needed 270 frames total.
WebRotate 360 SpotEditor
Now let's review how to setup your project up in WebRotate 360 SpotEditor.
Start a new project in SpotEditor and make sure to check "Advanced options" on the New Project menu. You must tell SpotEditor how many image rows there are. In our case there are 12 rows with 24 images each. The software is pretty smart and does the math for you once you say 12 rows.
After your new project loads, go to the "Images" tab at the top right of the SpotEditor interface. There you find the "Current row" box where you can select which row of images you want to view. Hold the left mouse button and drag to move through each row of images. To see the finished widget, you will need to publish the project that will automatically launch a local preview in your browser.
Wrapping up
To wrap up, Keyshot does a good job in creating the images you need as well as the interactive files, but it lacks a few features that can make your interactive 360 or multi-row 3D product views stand out, so I use WebRotate 360 Product Viewer software. I have been using it for nearly 3 years and cannot recommend it enough.
If you have questions, or need help with your widget, process, or idea interactive project reach out, I would love to help or create the project for you.
Kyle Thatch is a professional 3D animator with over 20 years of experience producing 3D models, interactive 360 product animations, TV commercials, and other digital media.
Last week we released a new v3.6.5 beta build 507. Today there are more than 70 new features, enhancements and fixes in v3.6.5 beta of WebRotate 360 Product Viewer (see version history). And while we have plans for a few more before the final release, now is a good time to cover the most interesting ones that are already available in the latest downloads.
1. Built-in web server
Starting with the latest build 507 of v3.6.5, we have packaged a tiny web server with SpotEditor to finally stop requiring any extra browser configuration for your local tests. Now every time you publish in SpotEditor, your local browser previews are loaded via the web server that runs inside SpotEditor which doesn't trigger any security flags with modern web browser. You will also notice that the preview URLs will look like this:
http://localhost:63533/xyz (or some other local port number)
Though if you manually open published html files from your hard-drive, the extra steps discussed in this article are still required.
2. Videos, third-party content & scrollable content in hotspots
Historically it's been a challenge adding videos or "iframed" content in hotspot popups without some custom work. In the latest v3.6.5 we introduced advanced support for embedding videos, third-party content (e.g web pages, 3D panoramas, iFrames, etc) as well as using long scroll-able content inside the hotspot popups. Moreover in this hotspot mode, the popups are fully responsive and give you a lot of control over sizing either within the 360 product view itself or even outside of the view, i.e. centered on its parent page.
To activate this mode, first make sure to select the "lightbox" option under Render as on the first tab of the Hotspot form (third option). Then use button #2 in the screenshot on the Text Content tab to insert the URL of your custom content:
To see extended sizing and positioning options, click button #3 next to Width (%).
You may find that the close button that is automatically added in the top right corner of the popup overlaps the popup content. If so, simply add extra padding using Padding CSS option on the same tab. For example, if you enter 40,50 in the padding field, it will use 40px for top-bottom padding and 50px for left-right. Or use four comma separated numbers for top, right, bottom, left. Use Close button color picker to match your content color as required.
3. Configurable max zoom
This has been something we have resisted for a while. Zooming your high-res images over or below 100% of their published resolution never seemed like a good idea. Going over 100% makes images blurred and may slow down your browser (depending on how big you blow them up) while not zooming to 100% would seem like a waste of bandwidth.
But there're still good reasons to allow custom zoom scale and this is what this feature is about. Now you can set Max Zoom as percentage of your published image size and it can go both ways. For example, you may set it to 70% to ensure that when you zoom the view on a high-density retina screen (say an iPad with 2x2 pixels per dot), your zoom details remains sharp. Or you can set it to 200% to blow up the images and fill the screen to create a better presentation and reveal more information to the end-user.
Also note the new "Zoom to image center on tap" that works great for narrow objects and ensures that no matter where user taps on the screen, we always zoom in to image center. This make it more user-friendly when zooming 360 product spins with tall narrow objects, especially in conjunction with the recently introduced "Pane and Spin" feature in v3.6.4.
4. Spin on page scroll
Sometimes you may want to give user a hint that the image they see is not simply a still image but an interactive 360 product view. And there're existing ways to do this, including setting automatic playback or placing a "Hint" message on top of the view that you can do under Controls tab in SpotEditor. One overlooked option is to spin images automatically as user scrolls the page and this can be especially useful if your 360 product view is not placed at the very top of the page. With the latest release this is now possible under Control -> More options -> Page scroll
There are few options for advanced control:
Follow scroll direction: animate images according to the direction of page scrolling (up/down to clockwise/counterclockwise).
Use playback to smooth: if not checked, the speed of the image animation is relative to the amount of page scrolling. If checked, we activate the standard playback function on page scroll and you can then configure the speed of the playback and its responsiveness (to the release of the page scroll) in the same section.
The later creates smoother animation regardless of how fast user scrolls the page.
There's also a new template under Templates on the Publish form called Spin on page scroll that you may use to test this feature before delivering for integration.
5. Configurable drag acceleration
Here's an extra tool for your animation control toolbox. It's designed for 360 product spins that consist of an unusually high number of 360 product images.
Usually, we recommend to stay somewhere between 20 to 72 images per rotation but on occasion our customers may produce spins that consist of a couple of hundred or so images. The large number of images creates a very smooth animation at the expense of slower loading but often is a necessity. For example, we see in architectural 3D renderings such as this one that unless you render almost 200 images, the moving background may result in some disorienting and almost dizzying effect. Or you can think of photographing a car on a parking lot in 360 degrees which also may benefit from the higher number of images (also due to the moving background and usually somewhat jerky 360 footage you get on a parking lot or via a drone).
This brings us to the issue where the large number of 360-degree images makes it harder to spin the view. In other words no matter how fast you drag it, it takes too long to go through the entire spin (because there're so many images!).
And this is where the new Drag Acceleration feature is very helpful. The default is 1 which means no acceleration, and you can then activate the acceleration by dragging the slider and selecting desired acceleration multiplier which will speed up the image animation based on how fast user drags their mouse or finger.
6. Responsive hotspot indicators
At last you can make hotspot indicators responsive so that they scale with your views and look sharp and neat on small screen devices. To activate responsive indicators, access indicator styles as per the following screenshot and set Min scale (%) to some number that works for your view and/or custom hotspot indicator.
For example, if you set it to 50% and your indicators are 32 by 32 px, they will scale with the view (i.e proportional to the change of the base viewer width that you configure on the Interface tab in SpotEditor), and no matter how small your 360 product view ends up on a mobile device, they will be at least 16 by 16 px.
By the way, one of the improvements in the latest v3.6.5 is better precision of hotspot indicator placement inside a 360 view (we transitioned to floating point numbers for the calculations of hotspot path) which also helps with the smooth scaling.
7. Always active & linked hotspot content
v3.6.5 introduces extra activation option called Always activated (see this recent example). Checking this option as shown in #2 in the screenshot below ensures that hotspot content, be it an image or text or custom styled html, is visible right away and no extra input is needed from user to "trigger" the hotspot.
Also unless when indicator is visible is also checked under Activation options, the content stays always visible, even when the hotspot indicator is not present on a given image. This can be useful in combination with the new content linking feature where a connecting line is added between the hotspot content and the indicator.
For example, user can select Rotating indicator with content popup in fixed position under Render as section of the Hotspot tab and position the hotspot content on the right side of the view at the top using Content position controls as shown in the screenshot. Then assuming a content link is also enabled as discussed below, when the hotspot indicator comes to view, a link between the fixed content and the indicator is shown and it links the two accordingly until the indicator disappears after following its configured trajectory.
To enable content linking, click Styles -> Configure on the Hotspot tab of the Hotspot form and then check Show a link between indicator and hotspot content under Content link style as per #4 in the screenshot:
Link width: pixel width of the link (default is 1px).
Content offset: offset from the content start position where to start the line.
Indicator offset: offset from the indicator center where to end the line.
Link color: hex color of the link (default is #eeeeee).
Opacity (%): opacity of the link (default is 80).
Content start: nine X-Y origins of the link relative to the content center.
Download or upgrade
There are more features, important fixes and enhancements in this release (e.g configurable resolution of imported images, new "zoom to hotspot" action, configurable "play to label" action, new API additions, etc).
To get this update in your existing SpotEditor installation, click blue "info" icon in the left toolbar in SpotEditor and select Check Updates.
Free version can be downloaded under "additional resources" using this button:
