tel: +1 (800) 996-8617
  • Interactive 3D Tour in WebRotate 360 with Blender - Permit Application for Surf Coast Shire Council by Avi Mandal

    Hello everybody! I'm Avi Mandal and I'm a creative graphic artist in Melbourne, Australia. Not long ago I have been involved in a great assignment with Surf Coast Shire Council within Digital Transformation team where among other projects I worked on an interactive 3D app.

    The app was designed as a graphical presentation for the Building and Planning permit guidelines and the goal was to visually explain various permit requirements using common architectural and environmental elements one would find in a typical Surf Coast house.

    Presenting the guidelines inside a 360-degree view using interactive call-outs was the perfect choice for this application and I picked WebRotate 360 for the implementation as the hotspot support there is very extensive.

    Check out the final result here

    I started it with old school sketches and some planning on paper:

    The next step was to model the house in 3D and render it as a sequence of 360-degree images. For this project I decided to go with 72 images (i.e frames) for the entire animation as it felt like a good balance of smoothness, detail and performance. Also more images meant more hotspot work in WebRotate 360 and there were lots of hotspots!

    Initially, I used Sketch-up and Raylectron but the combo was not flexible enough as I had a fixed camera and had to rotate the model manually in 5-degree increments to render the images for further import into WebRotate 360 SpotEditor. Not to mention, Raylectron was not available for Mac...

    Recently I have moved to Blender for all of my 3D modeling and rendering projects. In fact I have a similar app in works which is done exclusively in Blender. The rendering process there is much simpler. All I have to do is to create a big enough circle for the the camera to spin and follow an empty object I choose.

    Here's how you can render a 3D model in Blender as a turntable animation to produce 360 degree images compatible with WebRotate 360:

    1 Add a bezier circle big enough to cover your 3D model. You can scale it up or down later as needed.

    2 Give the camera a Follow Path constraint using the bezier circle as a target and also Track To constraint with your center object as a target. Make sure to set the camera location to 0,0,0 so it sticks to the circle and play with the To and Up settings of the Track To constraint until the camera is oriented towards the target.

    3 Select bezier circle and check Path Animation in the Object Data Properties. Set timeline frames to start at 1 and end at 72. Create an animation of the bezier rotation by inserting two keyframes (use "i" key on the keyboard):
    1) on frame 0 with Rotation  Z at 0 degrees
    2) on frame 72 with Rotation Z at 360 degrees.

    Make sure to set Interpolation mode to Linear for the first keyframe by selecting the keyframe in the timeline and pressing "t" key on the keyboard.

    4 Assuming you have already configured your light setup and materials, configure the Output Properties as needed and finally select Render -> Render Animation in the top menu to start the render.

    Once images were rendered, I have imported them into SpotEditor and added my hotspots. To learn more about various hotspots options, see this user guide under Hotspots. For my 3D projects I check Use custom styles and place my own HTML markup under Text Content tab of the Hotspot form so I'm not limited to the built-in features and styles.

    Though I have tested different software packages for web publishing of my 3D models, I keep coming back to WebRotate 360. A sequence of images is all that is needed to create these interactive apps so any end-user will be able to open it without installing any plugins and I can produce quality 3D image renderings of any complexity.

  • Two-row 360 Product Photography With Eric Gordon of The Product Photography Studio

    Recently we asked Eric Gordon of The Product Photography Studio to show our readers how he produced 360 product photography for one of his clients which we found interesting. It's not the usual 360 product photography you would see elsewhere. It's a 360 product photography with a twist. Literally!

    Before we're ready to comprehend what Eric did on this peculiar project, let's review the terminology:

    Single-row 360 product view

    A regular 360 product spin is composed of a sequence of 360-degree product images photographed on a turntable with a stationary camera. Let's assume our turntable allows us to take 36 images in a single revolution of its platform. We photograph these 36 images on a single horizontal plane and so we call it a single-row 360 product view. Here's a schematic example using 36 images that you can spin horizontally:

    Multi-row 360 product view

    Now if we move the camera slightly up in a circular trajectory around the center of our platform and take another set of 36 images by spinning our turntable again, we get the second "row" of 360-degree images. If we do it like this a few times, we get a multi-row 360 product view where you can drag the images both horizontally and vertically and which schematically looks like this (7 rows by 36 images in this example):

    There're many advantages to this type of interactive three-dimensional presentation but it's also often challenging to produce and it's particularly time consuming.

    Two-row 360 product view

    That's where our unique two-row mode comes to rescue. In simple terms, the difference with the multi-row process we just reviewed is that after we take the first single-row of 36 images on a turntable and move our camera up (or down), we don't spin the turntable again to capture another sequence of 360-degree images. Instead we take just a single picture with each such vertical camera transition while the turntable doesn't move.

    By doing so we get one row of images of a horizontal 360-degree rotation like our first example, and one row of a vertical rotation. For simplicity we call it a two-row 360 product view.

    Here's a demo of this mode that has 36 images in the horizontal row and just 6 in the vertical one. Note how you can still see the entire product by spinning it either vertically or horizontally:

    There's still the challenge of setting up some kind of a vertical camera rig to accomplish something this type of animation, and that's why Eric's approach we review next is interesting.

    As you can see in this diagram below, Eric's solution doesn't require moving the camera at all. It's always fixed. To accomplish our two-row animation, his trick was to put the product on its side on the turntable to capture what would then appear as a vertical rotation, once the images were flipped in his Capture One software:

    Here's how Eric describes the process:

    "The diagram is not entirely accurate as there are two centering axis points that must be maintained as well as pitch vs yaw (gets very complex and annoying when setting up) but this covers the basic “vibe" of the method.

    Also the easiest method for holding the object in place must be taken into account. For horizontal axis the easiest method was to simply lay the thing on its top and shoot it upside-down.

    This unit above was tough due to it not really having any flat stable surface so it had to be shot upside-down using hot glue that had to be removed in post, and its vertical axis shots were also difficult because there was virtually no way to hold it straight in all 3 axis for pitch & yaw problem."

    Nevertheless, considering these complex products, the results we saw were impressive. Here's one of the 360 product views Eric produced for this project:

    If you are curious about the gear Eric used here, it's PhaseOne camera, Schneider-Kreusnach 120mm f4 Macro AF lens, Pocket Wizard PlusX (remote trigger), Paul C. Buff Einsteins lights, 3x1 ft stripbox through 4 ft square diffusion flags.

    Publishing such two-row 360 product views is easy in WebRotate 360 product view creator software:

    1 Prepare two folders with images on your hard-drive, one folder with the images of the horizontal spin and one with the vertical images (download our green cube example below).
    It's important that the image file names are unique between the two folders. Also, given the current limitations, the first image of the vertical sequence and the first image of the horizontal one should match, or in other words, the first image in the folder with the vertical images should be the one you expect to see right above (or below) the first image in the folder with the horizontal images.

    2 Start a new project in SpotEditor and select the folder with the horizontal images on the New Project form. The number of rows under Advanced options -> Number of image rows should remain 1 for this type of projects.

    3 Once the images are loaded, go to Images -> Rows and click the green plus button at the bottom of the tab.

    4 On the Add new rows form, set the number of rows to the number of images in the folder with your vertical images (6 in the example we shared below) and select that folder.

    5 Navigate to Control -> More options and check Rows on single index.

    6 Under Control -> Rotation -> Speed, adjust X and Y sensitivity as needed to make dragging in both directions more stable (both values should be non-zero).

    7 Publish your project and if you use the example images below, it should look and work like the two-row cube we reviewed earlier.

    Download example images

  • 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.

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