• Seven Highlights of WebRotate 360 Product Viewer v3.6.3

    Photo by Carl Heyerdahl

    If you haven't noticed, there were two releases of WebRotate 360 Product Viewer that we quietly delivered in 2018. The objective of these releases (v3.6.2 and v3.6.3) was a targeted feature update and a few fixes and improvements for trickier issues that have accumulated in v3.x.

    Here's the list of 7 features that we would like to highlight:

    • Viewer loading can be paused on the first "pre-loader" image
    • Zooming is now possible in the full-screen mode
    • Zooming can be triggered on a single mouse click or a touch-screen tap
    • Zooming can be incremental
    • Optional toolbar auto-hide
    • Mouse wheel can be used to spin images
    • Simplified viewer skin with a single control button

    Pause on "pre-loader" image

    One of the concerns we hear from our users is "how your 360 product views will affect my page loading speed". And while we have several built-in capabilities that take care of the bulk of the issue, there was always the need for the option to not load the entire set of 360 product images until user decides to interact with a spin. It's especially important if you have a portfolio page or a gallery with several embedded spins. Another good case is when you have massive multi-row 3D product spins with hundreds of images.

    The feature is optional and can be activated in SpotEditor under Control -> Rotation via "Pause loading after the first image". When it's activated, the viewer downloads a single image that you have selected via "Set current image (row) as first" on the same tab and pauses further loading until user taps inside the view (or hovers over if this option is checked).

    If you want to place a small info button at the bottom of the view with your custom text upon presenting the first image, enter some text in the Hint field or leave it empty which can give your web designer some freedom as to how to tell user that there's a 360 product view. Or your web designer can customize our default "hint" styling further in CSS.

    Click this image to see an example of a 3D product view consisting of 288 images that pauses loading until user interaction:

    Zooming enhancements

    WebRotate 360 ® is used on large touch-screen devices at trade-shows, in merchandising mobile apps where showing smaller details is important, in training and education environments where quick and precise navigation to different parts of a 360 object view is required.

    With the last two releases we made sure this area of the product is sufficiently improved.

    We start with the ability to zoom in the full-screen mode (or full browser window mode, if configured). This is on by default, and as long as your high-resolution images are large enough, a user can zoom-in further while in full-screen as well.

    You can control the size of the high-res images under Images -> Tools via the Resize slider:

    These high-res images are loaded either on demand when the viewer is zoomed-in or the entire set is loaded when the full-screen mode is activated. The later can be disabled such that you can still show the low-res images that have been already loaded when switching to full-screen. This can be done by unchecking "Use high-res images in full-screen" under Control -> More Options -> Miscellaneous. With the new support for full-screen zooming this presents some interesting opportunities.

    Zoom can be incremental. What this means is that your high-res image, while loaded in full as needed, is not shown in its original size upon zoom-in. Instead its split into the number of increments that you can define under Control -> More Options -> Zoom via "Zoom-in increments". Each zoom-in action then increases the image size accordingly. You can pan further and magnify other parts of the image as needed, adding another dimension to your published media.

    The other important enhancement is the ability to zoom-in on a single tap or click inside the 360 product spin. You can activate this feature under Control -> More Options -> Miscellaneous via "Zoom on single tap".

    Considering how easy the product navigation is when this feature is on (and the new mouse wheel support we discuss below), this should have been our default setting for new projects in v3.6.3. Something we will do in the next release!

    Click this image to see an example of a 360 product view that has all three features enabled:

    Toolbar auto-hide

    The reсent major trend in web design is to "un-clutter" web pages and make the user experience a breeze. WebRotate 360 Product Viewer comes with various skins that feature optional toolbars that sometimes may look overwhelming if paired with a super clean modern product page or a 360 product photography portfolio (remember that you can always customize the toolbars in CSS to match your website look & feel). To follow the trend, we introduced this new feature to let you not show the toolbar until users start interacting with a 3D product view and quietly hide it again when it's not being used for a couple of seconds.

    To turn it on, navigate to Interface -> Options and check "Automatically hide toolbar".

    Click this image to see an example of a 360 product view with toolbar auto-hide enabled:

    Mouse wheel support

    At last your web visitors can use their mouse wheel to spin the images. This is especially handy when the viewer is zoomed-in or in full-screen as it nicely complements the panning of a zoomed-in image and / or doesn't directly affect user's ability to scroll the page. Or at least users would expect that page scrolling is blocked as they are exploring the product while zoomed-in. This also doesn't interfere with hotspot navigation if hotspots are present which is the case with the existing setting to spin on mouse hover.

    The feature consists of two settings located under Control -> More Options -> Miscellaneous:

    1) Rotate on mouse wheel and 2) Mouse wheel when zoomed only. The last setting makes sure that mouse wheel is only active when a 360 product view is zoomed-in or in full-screen to prevent issues with page scrolling.

    Click this image to see an example of a 360 product view with the mouse wheel support when zoomed:

    New simple Zoom skin

    This is another tool at your disposal to deliver simpler & functional user experiences when additional toolbar features are not required. The new skin was designed to go hand in hand with the zooming improvements we discussed above. It consists of a single "full-screen" button that can be placed in various corners of a 360 product view. To place the button at the top, use the new toolbar positioning option "Place at the top" located under Interface -> Styles -> Toolbar align.

    Zoom skin is available as two separate skins called "zoom light" and "zoom dark" so you can pick the one that works best with the background of your 360 product photography or website styles. The skins can be selected under Interface -> General -> Skin.

    Here's a live 360 product view by Bruno Debiasi from his recent guest post that featurs the new skin as well as some of the other features we discussed in this blog post:

    For the first time since 2011 we're raising our pricing next month. Don't wait! Get it now or stay tuned for our first sale event of 2018 that we plan in November, offering 35% off on WebRotate 360 Product Viewer at the current prices. Subscribe to our newsletter below.

  • Guest Post: 360 Product Photography Of White Reflective Product On White Background By Bruno Debiasi, Brazil

    Hello Everyone! My name is Bruno Debiasi Sousa and I'm a commercial product photographer from Curitiba, Brazil. I have been shooting product photography almost exclusively since 2006.

    A few years ago I started a company that develops interactive product views using 360 degree product images. I have been working with WebRotate 360 for many years now and they have invited me to showcase a technique I used on a recent project that deals with 360 product photography of a white and reflective product on a white background. So here it is..

    Our customer (Pro-Aqua) asked us to produce a 360 product spin of their excellent vacuum cleaner called Vivenso Smart Cleaner. The vacuum is white and is very reflective. It has a modern shape and curves that we wanted to highlight. It uses water to filter dirt so to make it more interesting we wanted the vacuum to be powered on and show how the water splashes and swirls inside the tank as the product spins inside the 360 product view.

    Shooting "white on white" is easily doable if it's a single still image. In our case, we needed a sequence of images of a spinning product which is more challenging. And our setup had to be optimized such that we could replicate it easily for similar products and shoot the entire sequence of 72 images fast to reduce our & client costs.

    Overall our approach here is straightforward: we place the product further away from the background and put more light at the background to burst the whites to help us separate the product. The product itself is underexposed but there's still enough light to give us some good contrast and detail.

    As the photos are produced for online viewing, I decided to work with high ISO (ISO 2500) and that allowed me to work with continuous LED lighting. This helps greatly with the setup as we can fine-tune the position and angles of the lights across the entire 360 degree spin.

    As you can see in this picture, I used 4 light sources:

    Main boom light that illuminates the front of the product, creating nice gradients and contrast for the front facing items:

    Two side lights to highlight the product volume and the edges of the vacuum:

    Background light that shoots from the bottom at the backdrop to give us the background separation:

    For the lights that illuminate the product I used 3 softboxes that I set up with a tracing paper to nicely diffuse the lights. The lights are underexposed at -1EV vs the background light.

    A very important detail for this setup to work well is the position of the side lights and the use of the black cards.

    If you look carefully at the picture with the side lights above, they are not pointed directly at the left and right of the product. Instead, they shoot slightly from the back and the two black cards on each side make sure that the light from these two sources doesn't bleed to the product edges. This ensures that the white product will not merge with the white background and there's a nice dark outline on the sides. The extra two black cards "shield" the product from the background light, creating the dark outline at the top of the product as well.

    Another interesting bit is that the power cable would appear on virtually every photo if we were to photograph the product as-is. So we had to disassemble the vacuum and drill a hole at the top of the unit to pass the cord so it would be easier to remove in post-production.

    All in all, it took 7 hours to setup everything and just 40 minutes for the digital processing and packaging of the finalized 360 product view. My suggestion for this type of projects, involving sequences of multiple images is to not save time on the preparation of the lighting setup. The ideal is to leave just a few very minor adjustments for the image editing steps.

    The project was photographed with Canon 6D MK2 and the 70-200 lens. It was set at f5.6 and 1/400s in order to freeze the movement of water in the vacuum tank. If it was a conventional vacuum that can shake slightly when powered on, I would need to use a higher speed, like 1/1200, but luckily this was not the case.

    And here's the result. Take it for a spin!

    I hope this was a helpful insight and if any questions, here's my email. Thanks for your time!

    Stay tuned for 35% Off on WebRotate 360 Product Viewer PRO in early-mid November 2018 (a one day event for all of 2018!). Subscribe to our Newsletter below.

    We have recently moved all posts from our old photogear360 blog here, so here's some related material you may find useful:

  • More Details on 360 Product Photos in Amazon Listings

    If you have been reading this blog or followed us on Facebook, you know that Amazon recently started showing 360 product photography in a few selected product listings (example). There's pretty much no information on the web about this new feature, so we quickly concluded that Amazon picked a few large retailers to test waters with the new technology.

    This appears to be the case!

    To learn more about the recent development with 360 product images on Amazon or even if you are just interested in related topics, listen to this awesome episode by Bobsled Marketing and Jeff Hunt at Snap 36. Don't have a spare 40 minutes for the podcast? There's a list of key takeaways on this page.

    Our takeaway is simply this... even though Snap 36 is currently a prime beneficiary of the developing trend, covering selected few listings on Amazon, we feel that in a short while this technology will be available to everybody.

    So whether your are a commercial photographer or an eCommerce vendor, there will be an opportunity (and a challenge!) for everybody.

  • 360 Product Images in eCommerce: What Science Says

    Have you heard that Amazon is testing waters with 360 product photos as we have recently spotted in a couple of product listings by Bosh and Ashley Furniture (example, example)? How about this recent announcement by Shopify?

    If you are still on the fence whether to implement 360 product views into your eCommerce strategy, consider this study by Tibert Verhagen, Charlotte Vonkeman, and Willemijn van Dolen that was published in Cyberpsychology, Behavior, and Social Networking, Vol 19, No 7. 

    The study looks into these three product presentation categories to see how they affect buyer's ability to evaluate products online and their impact on buyer's purchase decision:

    • Still images
    • 360 product spins
    • Virtual mirror

    Almost four hundred undergraduate students participated in this study in Netherlands in 2016 where they rated various forms of perceived product tangibility and their purchase intentions using product pages on

    Ray-Ban offers all three presentation options for some of their glasses which is rare. This is mainly because "virtual mirror" is specific to fashion (we couldn't recall a successful commercial implementation that didn't involve eyeware) and the technology is still complex and finicky.

    While we encourage you to browse through the entire paper, the results on page 3 is what we're after and they make perfect sense: virtual mirror is a winner followed by 360 product photography. Interestingly, the difference between the virtual mirror and 360 product spins seems very close to the gap between the spins and still product photos.

    As a take away from this study consider this: buyers who interact with 360 product images are 14% more likely to purchase a product than when there are still photos alone.

    With "virtual mirror" there's an extra 15% improvement. And that's not all as we have to also consider that the improved experience ("perceived diagnosticity" which is 17% better with 360 product spins as per the study) can reduce product returns and improve the overall shopping satisfaction.

    Another interesting research by folks at University of Hong Kong and Stanford (published in the Journal of Consumer Research) looked into the affect of having multiple additional images of the same product on buyer's ability to compare and decide while shopping online. Surprisingly, participants who saw extra photos were "both less confident about their decision and liked and valued the product less than those who saw only one photo for each product".

    Considering the results from the first study, we think that some products such as shoes used in the last research can benefit from having a single 360 product view and forgo still images altogether.

Subscribe to our newsletter

Sign up to our newsletter to keep a pulse on our latest developments, informative posts and beta releases. We don't abuse it!