tel: +1 (800) 996-8617
  • How to Create Photorealistic WebRotate 360 Product Views in 3ds Max and V-Ray

    To just see the tutorial, scroll to the bottom of the post.

    If you have been shopping on Amazon lately, chances are a good number of images you saw there were not actual photographs. Instead they have been produced in 3D modeling software and then rendered to look like a real thing. This recent trend is especially noticeable in categories such as electronics, appliances, furniture, automotive and similar.

    About 75% of all images on IKEA's website are also CGI. Here's a case study by the developer of V-Ray, which is a 3d rendering software used by IKEA along with Autodesk 3ds Max and SolidWorks:

    "While a lot of IKEA's imagery is photographed in the building's cavernous sets, an increasing proportion is CGI, created using 3ds Max in conjunction with Chaos Group's V-Ray for 3ds Max."

    For those of us who spent years producing product photography it's easy to spot a 3D rendering like this cool Ayeway power bank on Amazon:

    Here's an interesting CGI initiative by Wayfair who are setting up a 3D rendering platform designed for agencies and service providers to allow uploading 3D product models for final rendering and listing on Wayfair:

    "Wayfair uses 3D modeling in place of traditional photography to generate 2D images for thousands of products. In place of the physical entailments of traditional photography, we create models using Autodesk's 3ds Max."

    It's not just the large retailers who do it. Small companies around the world are jumping on board as the benefits often outweigh the usual ecommerce product photography. Here's for instance a UK company who exclusively use 3D product models in all of their product listings, including pretty awesome 360 product spins!

    Check out how consistent, crisp and exciting the rendered images are:

    When it comes to rendering 360 product views there are some extra challenges.

    One issue is that we need at least 20 images (preferably 72) to create a complete 360-degree product rotation so the rendering times and further image processing increase proportionally. Then of course we need to learn how to animate our virtual camera to capture the entire turntable animation or a multi-row sequence.

    This is where the recent tutorial by Jamie Cardoso, a renowned author in this space, comes in handy. It takes you step by step through the setup of both the photorealistic lighting and camera animation as well as using a cool rendering workflow.

    In the video below Jamie guides us through the camera setups for the two (out of three) types of image sequences we support at WebRotate 360:

    1) Single row turntable animation where camera simply orbits around an object.

    2) Our unique two-row setup where there's one horizontal row and a single vertical row. This setup saves a lot of time on rendering (or photography) while giving you pretty much a full 3D product view coverage. Not to mention the loading times for the end-user that are way better than our traditional multi-row 360 product views like this example.

    Load and drag the demo cube horizontally and vertically to see the effect:

    Apr 30, 2020: see this recent post that has more details and an example of how one photographer captured a few two-row 360 product veiws using a smart trick: Two-row 360 Product Photography With Eric Gordon of The Product Photography Studio.

    So without further adieu, here's the timeline of what's covered in the following tutorial:

    • 2:02 Set up the 3ds max scene
    • 3:00 Load up the V-Ray rendering engine and set up the scene for draft renders
    • 7:31 Create and setup a V-Ray Dome Light
    • 8:40 Add the V-Ray Environment Exposure Control
    • 8:55 Apply and edit the V-Ray HDRI Light
    • 11:17 Create and Edit a Camera Animation
    • 17:39 Create and edit a V-Ray Material
    • 20:19 Add and Edit HDRI to the Environment
    • 21:10 Add and edit a 3ds max LUT file in the Frame Buffer
    • 22:37 Create and Edit a Stainless Steel Material
    • 25:04 Set up V-Ray for High Resolution Renders
    • 26:05 Create an Animatic Preview
    • 26:41 Fixing Gamma Issues
    • 27:25 Use LUT Explorer script to save the render with the LUT applied
    • 29:36 Use Garagefarm to Render the frames
    • 35:50 Create Photoshop actions to apply LUT files
    • 39:20 Upload and launch your files using WebRotate 360 and SpotEditor

    You don't have to use Photoshop to size the images as per the video. Our WebRotate 360 product view creator software helps with this and many other batch related routines in a much more convenient way than the Photoshop actions.

    The final note is that with the two-row setup you can't use the option to set the number of rows on the New Project form as per the video. The workflow is a bit different and you can read more about it at the end of this recent blog post.

    PS: if you are using SolidWorks, check out this video by planetsoftware GmbH on why & how to use it together with WebRotate 360. See English subtitles and video description for more details: https://www.youtube.com/watch?v=wbpFxRupKT8

  • New SpotEditor for Mac with Catalina Support Now in v3.6.4 Final

    We're excited to announce that a much awaited release of a fully reworked SpotEditor for Mac has been released. Here we will cover some of the major Mac specific improvements (see full version history).

    Simple Installation and Stability

    Our old installation workflow was getting clunkier and less secure with each macOS release as Apple was removing old features and restricting what vendors like us could do. You had to go through two required third-part installations totaling almost 1 GB of installed data between mono and X11. Our new installation of SpotEditor v3.6.4 for macOS is just 18 MB and it doesn't require any separate third-party software. No reboot or lowering your core OS security is required. Dropping X11 as an intermediary layer between the application and macOS made the software very stable.

    Native Fast UI

    While we kept the overall look and feel of the application the same so we're consistent with our Windows software (and folks who have been using our software for years don't need to re-learn it!), the underlying technology has been reworked to use native macOS rendering so things like text boxes, check-boxes, drop-downs, full-screen function, etc are the same that users expect on macOS. It looks flat and modern. No more slow re-painting of the application controls every time you open a tab or a hotspot dialog, it's native fast.

    This also brings support for Dark Theme which looks gorgeous. Plus the new software fully utilizes OpenGL to render 360 spin images on the screen which makes our industry leading non-destructive batch workflow noticeably faster.

    Native File Management

    Arguably, one of the major limitations in our old Mac software was the inability to work with projects or files outside of your user folder. Since the new software uses the native macOS File Open and doesn't rely on X11 for internal implementation, you can use pretty much any location on your Mac, network, or external hard-drive.

    Superior Image Quality and Publishing Times

    The old Mono implementation didn't allow us to use the Bicubic interpolation for published JPG images which would produce substantially better results comparing to Bilinear we had to rely on Mac for years. With the new software you get the same great published image quality that we always had on Windows. Surprisingly, this didn't stop us from optimizing the overall publishing speed which is now roughly 4 times faster for the same set of 360 product images than in our previous Mac releases.

    Preview in Chrome and Firefox

    Again, due to various limitations in the underlying technologies in the old software, you could only preview your published 360 product views in Safari. Now you can select from Chrome, Firefox or Safari, and with Chrome we take care of all local security restrictions so you don't have to deal with the manual scripting just to test your published work in Chrome on Mac locally (see this post for more details).

    Inverse Path

    Inverse Path is a function of our Path tools that allows you to quickly clip unwanted space around an object in your 360 product images so you can quickly remove the background. You don't have to trust us that this feature is high on our users wish-list on Mac. Just check out this forum thread where year after year since 2014 we have been asked if this has been made available on Mac yet... well now it is!

    PS: there's a slew of new features and improvements we have released in SpotEditor v3.6.4 some of which we have been showcasing in v3.6.4 BETAs such as this new ground-breaking 360 spin image rotation mode or the integration with our new hosting platform PixRiot.

    Download

    If you have older version of WebRotate 360 Product Viewer v3.5 or v3.6 installed on your computer, click the info icon on the left bottom of the application window and select Check Updates to get the new software. Otherwise, download the free version of WebRotate 360 Product Viewer Software or request the commercial version here if you have purchased a license in the past.

  • Pan and Spin at the Same Time. Coming Soon in v3.6.4

    Introducing a new rotation mode! When it's on and the 360 product viewer is zoomed in, you can pan vertically and drag horizontally at the same time.

    This is very convenient as pretty much the entire zoomed-in product can be evaluated quickly and there are no extra buttons to click to switch between the pan and drag modes. The only other option we have to achieve a similar effect is using the mouse wheel (Control tab -> More options -> Rotate on mouse wheel) which is not usable with touch-screen devices.

    To enable the new mode, expand Control tab -> More Options where you will see a set of these three new settings under the Zoom section:

    • Allow drag rotation when zoomed
    • Allow panning on X-axis
    • Allow panning on Y-axis

    By default the last two are checked as our standard mode of operation is to allow X-Y panning when viewer is zoomed-in. Check "Allow drag rotation when zoomed" and uncheck "Allow panning on X-axis" since we can't drag and pan on X-axis at the same time.

    Some of our users would flip input via Control -> Flip input axis to make viewer spin 360 product images when you drag up & down vs our usual left & right drag. In this case you would need to uncheck "Allow panning on Y-axis" instead.

    To achieve even a more fluid user experience, enable this relatively new setting called "Zoom on single tap" which you can see at the top of the same tab in the screenshot. Once it's set, a single click or tap triggers zoom-in and user can immediately pan and zoom at the same time as discussed above.

    This new mode works wonders for tall and narrow products such as the LED lantern in the example video at the beginning of the post.

  • The Missing Manuals - Spin and Zoom to Hotspot via API

    Photo by Maarten van den Heuvel

    In this new series of posts we will attempt to cover some of the topics that so far have not been documented well, starting with this API example that spins a 360 product view to a desired frame and zooms in to a selected hotspot via API (WebRotate 360 Product Viewer programming interface).

    Check it out by opening this link and clicking the button at the top. Alternatively, download the entire SpotEditor project here and see the customized html template in the published folder.

    See Example

    To achieve the same result, start by creating a new project in WebRotate 360 SpotEditor (download here) or open an existing SpotEditor project.

    Navigate to Images -> Rows tab that has the list of all images in the 360 product view and select one of the images that will be used as a label for zooming (e.g as a thumbnail in your custom gallery that will need to be zoomed in inside the 360 spin). Double click on the selected image and give the label some name, i.e 'zoom' in the attached screenshot.

    Create a new hotspot and place it at a desired location on the same image as the one that was labeled in step 2 (see the second screenshot).

    If you don't want to see the hotspot indicator images on the published 360 product view (i.e those circular shaped graphics that we usually use for the hotspots), you can assign a custom indicator image that can be a 1x1 transparent PNG image for example. You can import such custom indicator images by clicking the current indicator image on the first tab of the Hotspot form.

    Once you publish the project, add the apiReadyCallback property to your integration snippet as shown in the following example.

    The example has a pretty straightforward logic where we call api.images.playToLabel to spin to our 'zoom' label first and once the playback is finished, we call api.hotspots.getDynamicHotspots()[0] to get the first hotspot and extract its coordinates on the current frame (i.e the image we labeled with 'zoom').

    You can also enumerate the array that is returned in getDynamicHotspots to find a hotspot by its name as needed. Note that the second parameter in 'playToLabel' is the speed at which we want to spin to the labeled image. The speed is measured in seconds and it's the time it takes for the 360 product view to make a full spin (i.e 2 seconds in this example).

    jQuery('#wr360PlayerId').rotator({
        
        ....
    
        apiReadyCallback: function(api, isFullScreen) {
            if (isFullScreen)
                return;
           
            jQuery('#zoomButton').click(function() {
                api.images.playToLabel('zoom', 2, function() {
                    var hostpost = api.hotspots.getDynamicHotspots()[0];   
                    api.images.zoom(1, { x: hostpost.coordX, y: hostpost.coordY });
                });
            });
        },
    
        ....
    
    });

    Lastly, we call api.images.zoom(1, { x: hostpost.coordX, y: hostpost.coordY }) where we pass zoom step (which is 1 unless you have configured multiple zoom steps under Control -> More options -> zoom) and the coordinate for our zoom.

    In the final release of v3.6.4 which is planned for November 2019 (version history), we will add a new API function that will allow receiving the coordinate of a hotspot on a desired image / label even before the hotspot is shown as right now, as you may have noticed, we had to wait for playToLabel to finish before calling zoom so that we can get the correct coordinates. With the new API, you won't need to wait in playToLabel and rather call api.images.zoom right after or before it (i.e not inside the playToLabel callback) which will produce a more dramatic effect with the concurrent play and zoom transitions.

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!

Signup