SPRING PROMO!

Get 20% OFF for 12 months on new PixRiot business subscriptions. To redeem, select one of the business plans under Settings -> Plan in your PixRiot account, then enter RIOT22 at checkout under promotion code. Offer is valid through March 19. If you don't have a PixRiot account yet, request a free one here (business email is required).

Quick update on the new PixRiot build we just pushed over the weekend.

1. Viewer Upgrade

Your new and existing 360 product spins will now use the latest release of WebRotate 360 Product Viewer v4 when previewed inside PixRiot or anywhere they are embedded via iFrame code or a standalone link.

You can find more details about this massive release of the core viewer in this recent blog post. In short, you can now take the advantage of these key new features we released in v4 in your PixRiot embeds:

• New highly responsive lightbox popups with support for third-party embeds and scroll.
• Configurable drag acceleration and max zoom (previously you could not zoom further than the size of the high-res images).
• Connected "always-active" hotspots with configurable content link.
• Configurable responsiveness of hotspot indicators to better small screen support.
• 6 hotspot indicator animations to chose from.
• Fully animated product tours with configurable hotspot triggers and zoom.
• Improved viewer responsiveness and new APIs.
• Important fixes and support for latest OS's and browsers.

To ensure you are using v4 in your 360 viewer embeds, verify that your Integration Channel is Current Release (v4) under Settings -> Configuration -> WebRotate 360:

Note that for viewer integrations that don't use iFrames and simply load 360 images from PixRiot via Config Url (.xml), the v4 upgrade has no effect.

2. Video Support

You can now upload MP4 and MOV videos to PixRiot and easily share them elsewhere or even link in the new hotspot popups as discussed under #2 of this blog post. New video sharing relies on the same world-wide CDN infrastructure that our PixRiot users have been using successfully for their 360 product photography and rendered 3d views since 2019.

To upload one ore move videos, simply drag a video file(s) to a PixRiot folder of choice or use the Upload button in the toolbar to select your video files for upload.

This feature is available to all PixRiot users. For the initial launch, we limit video uploads to 200MB and plan to increase the limit soon, if there's a good demand for the new feature.

3. WEBP Images, Search and View

As we continue working on supporting WEBP image format in WebRotate 360 Product Viewer v4.1 in the coming months, PixRiot was just updated to allow uploading, viewing and sharing of webp images (in addition to gif, svg, jpg, and png we already support).

In our initial testing, using .webp format reduces the size of our test sets of 360 product images by around 20% for an equivalent JPG quality. Now that Apple has joined the rest of the pack to fully support the new image format in Safari browsers, we're committed to supporting it across all of our products as well.

In addition to .webp support, we have introduced a built-in image viewer with zoom that supports all of the image formats mentioned above. Search feature was also revamped to allow searching for file assets so you can now search for both 360 image spins and standalone assets such as videos and images in your asset dashboard in PixRiot.

4. Shareable Private Folders

Previously anything that was uploaded to PixRiot was technically accessible for viewing by anybody as long as they knew the path and the name of an asset in a folder (e.g. when you share it). With the new private folders, you now have three options to control the access:

• Public - assets are accessible for viewing by anybody if they know the path and the name of an asset.
• PixRiot admins - only user with a PixRiot account can access.
• Anybody with folder password - password protected folder (read below).

The third option is the most interesting. In fact, it was recently developed to support teaching classes in one of the most respected wild animal conservation organizations in the world. The feature allows sharing a "collection" of assets that a folder can represent using a short link and a unique password.

To do this, select an existing folder and click the globe icon to open its sharing properties. Select the last option from the drop-down, enter a password and select Ok to trigger the update. Because the update can take a little while (depending of the amount of exiting content in a folder), it works as a separate task that will run on the background so you can continue working in the dashboard.

Once the access update task is complete, click the same globe icon again and open Share tab to get a short link you can share with anybody who you want to have viewing access to the folder content.

When somebody signs in using such short link with password, they will see the list of assets and sub-folders (if any) that they can browse and view, and it may include the usual 360 product images and now still images and videos as well.

Here's a quick video explaining the entire process:

PixRiot admin can change the password at any time or make the folder public or admin-only as well as to continue adding new assets, etc.

Last but not least, you can now collapse the left "MENU" panel to give your assets more real estate as some of you have requested :)

Request PixRiot Account

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:

Download Free Version

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.

By Kyle Thatch Studios

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.