Today I will share a couple of quick tips on how we recently produced 360 product photography of a few racing helmets for a customer. To see the final result, check out the helmet examples we shared under 360 product photography services.
Lighting
I usually use continuous lights for my 360 product views, but for these helmets I used strobes. I shot stills of these helmets beforehand and had the lighting looking good, so I just progressed from that shoot.
I used 2 x 1 x 1m soft boxes either side with a strip light at the top shot through a large scrim or translucent reflector. This provides a nice even fill at the top. I did try it first without the reflector, but it created a distracting hotspot with soft box only.
The strip highlights created by the soft boxes were not perfect out of camera and needed a tidy up in Photoshop. In the setup you can see some white card on the left and right side between the soft box and the background Perspex to soften the dark lines created.
Rigging and Turntable
To edit out the stand the insert was shot separately by shooting some images with the helmet upside down and later flipping them 180 degrees and editing in.
The helmets were placed on a small floor stand with some packing foam on the top to make it more stable.
The turntable is homemade and measured out in both 24 and 36 shot increments. It's just a round piece of chip board laminated white and cut round by the supplier, I also asked them to drill a small hole in the centre for my reference.
The "lazysusan" turntable mechanism underneath came from a woodwork supply shop.
Post-production
We needed to show the visors clear the way customer provided them to us. Normally, I'll show the product clear by back-lighting but with these reflective helmets the back-lighting created a distracting reflection around the helmets, so I decided to create the translucency in the visor in post-production.
I did that in Photoshop by using the quick selection tool to select the part that needed to look translucent, duplicating the layer and using the blend mode in linear light so I could adjust the transparency to show some of the visor so it's not completely white but does look translucent.
Contact See 360 Degrees for consultation and online imagery as required.
The latest release of WebRotate 360 Product Viewer v5.0 comes with the first of its kind hardware integration with NOXON's advanced 360 Product Photography Turntable. As of December 2023, this integration is available exclusively on Windows, with plans to extend support to macOS soon.
NOXON, a Spanish firm, specializes in professional photography equipment, including robotic 4-axis camera sliders, cablecams, and various accessories.
The turntable comes with a standard 80cm platform, accommodating objects up to 200kg — a perfect capacity for most commercial studio requirements in 360 product photography. Custom-sized platforms are available upon request.
Its sturdy construction ensures precise rotation and smooth movement with controlled acceleration. A unique offering in this package is the Noxon control accessory, allowing full remote control of the turntable. Remarkably, this accessory is also compatible with other Noxon robotic products, a valuable feature for those considering an investment in, for example, their robotic slider.
So what does WebRotate 360 brings to the table? :)
Turntable and Camera Control in WebRotate 360 SpotEditor
Simply select Noxon in the Integration dropdown when creating a new project to activate the turntable control panel at the bottom of the SpotEditor preview. After configuring USB connections and rotation settings via the gear button, the panel allows you to initiate full-auto or semi-auto stop-motion rotations.
The table's built-in camera integration, using a standard shutter release cable, automatically triggers the connected camera at each stop.
Instant Image Loading & Preview in WebRotate 360 SpotEditor
This feature is available if your camera can automatically download images to a folder on your hard drive when new images are captured. We recommend testing this before making a purchase.
In WebRotate 360 Product Viewer v5 we introduced a new folder monitoring feature. If your camera supports automatic downloading of new images to a folder on a PC, and this folder is set up for monitoring in SpotEditor under the Images -> Rows tab, you will see new 360-degree images loading into the active project's preview window in real-time. You can immediately test and drag the partial 360 view in the preview, as all configured real-time edits (crop, resize, image filters, etc.) are applied automatically.
Bundle Discount
New and existing Noxon customers can enjoy a 20% discount on WebRotate 360 Product Viewer PRO by entering code NOXON360 at checkout.
Likewise, new and existing WebRotate 360 customers can receive a 10% discount on the NOXON Turntable by using code WEBROTATE10 at checkout at noxon.tech.
This application of WebRotate 360 began as a project at the Cleveland Museum of Natural History to create online 3D models of insect specimens, enabling easy examination for scientific research. These specimens are normally stored in museum collections and are available to researchers who can afford the time and expense to visit the collection, or they can be shipped to the researcher at the risk of loss or damage to the fragile specimens in transit.
Online specimen models would be safely available anytime, anywhere, and to anyone for free.
3D models of real objects are usually produced using 360-degree photogrammetry or by 3D scanning. The latter technique is very fast but a micro 3D scanner is expensive, and has limitations in the resolution of tiny details, as well as difficulty with transparent or shiny surfaces. Producing a 3D model from photogrammetry typically involves processing the camera images through meshing and modeling software to create a rotatable screen object. In our experience this approach results in a loss of high-resolution photographic details that are important for scientific analysis of specimens.
Zoomed image provides microscopic detail not seen in 3D models
This is where WebRotate 360 excels for our application. We are able to create screen models of insects using multiple 2D macro images that retain all of the high-resolution details and simulate looking at the actual specimen under a microscope – a "virtual specimen".
The process we use is time-consuming, but almost entirely automated. We shoot between 182 and 254 views of each specimen as it is rotated and tilted at specified angles. Because the insects are so small (typically 3 - 50 mm), each one of the views requires focus-stacking 10-40 macro images with extremely shallow depth of field. It can take up to 10,000 photos and 4 hours to shoot one specimen, although most are half that.
We’re using a Canon 5DS R camera for maximum sensor resolution (50MP) with macro lenses attached to a motorized focus-stacking rail, with the specimen mounted (using its existing mounting pin) on a 360° motorized turntable. This in turn is tilted on a motorized arm for 5-7 rows of images. The motors are programmed and controlled with a StackShot 3X from Cognisys.
Full rig with laptop for museum travelTilted Z-axis with view of flash diffuser drawn back on its own rail to view specimen. The Z-axis is tilted in 20-30 degree increments, depending on the specimen. Also visible is a special mount to accommodate insects with off-center pins (such as the tiny "point-mounted" beetle shown here)
The 50-megapixel images are then batch-processed over several more hours (or concurrently) with Zerene stacking software and Photoshop to create the cropped views that are imported into WebRotate 360 – retaining 3000-4000 pixel resolution for online magnification.
The final web model is then created in a matter of minutes, after adding canvas text, logo, and hotspots. Top and bottom (dorsal and ventral) views of the specimen are created, respectively, from a single focus-stacked image which is rotated in 10° increments in Photoshop to create the 36 views that fill the first and last rows of the WebRotate 360 import.
Hotspot button shows popup with insect’s pin labels
The resulting web site interface provides easy controls for manipulating the virtual specimen and zooming in for full-resolution details. A hotspot button provides an image of the identifying labels that are kept on the insect’s pin in the museum’s collection drawer.
We have currently imaged over 150 specimens, which can be viewed online at Ento360.
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:
Colored bones are polygonal hotspots. Click or tap to explore.
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.
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:
