tel: +1 (800) 996-8617
  • How to Convert a 360 Video into Interactive 360 Product View

    There are multiple ways to produce imagery for 360 product views:

    1. Professional 360 product photography using still images.

    This usually involves a specialized 360 product photography turntable with a stop-motion action, a camera, and turntable control software that runs either on desktop or some mobile device that synchronizes the turntable motion with camera trigger. This is how most of the e-commerce 360 product photography you see everywhere is produced. Note that you don't always need a turntable as other options exist (e.g., "walk-around" 360 object photography, 360-degree camera array).

    2. 360 product photography using video recording.

    This is where instead of capturing multiple still images one by one, we record a video of an object as it spins on a turntable or by simply walking around our subject. The latter is how auto dealerships often produce 360 product views of their cars.

    3. 3D product modeling and rendering.

    Here a skillful 3D designer creates a photo-realistic representation of an object in 3D design software by assembling a 3D product model from a number of polygons, meshes, textures, materials, etc. Once a 3D model is created, it's rendered as a sequence of 360-degree images by animating the rotation of a virtual camera or the object itself. Here's one such example: 360 product view in Blender. It's also one of the services we offer at WebRotate 360 and it's gaining popularity as more and more companies start their product design by first creating quality models of their products in 3D.

    4. 3D object scanning or Photogrammetry.

    This method usually involves some combination of the first three options. The key here is that there's a specialized equipment that can scan a product using multiple cameras and/or a laser and then a combination of "scanned" 3D data and photographic images is processed further in 3D software to produce a photo-realistic 3D model of an object. The model can be then rendered as a set of images and loaded into WebRotate 360 Product Viewer. This option is very time consuming and produces mixed results. We see this mostly used for preserving historical artifacts.

    Let's talk about 360 product photography using video recording, i.e option #2.

    The major benefit of 360 product videos is the speed of image production as it's much faster to record a video vs waiting for the turntable to finish its stop-motion action as discussed in #1. There are also lower hardware requirements as you don't need a specialized turntable and can get a way with a cheap motorized display stand (there's a bunch on eBay). This comes at the cost of image quality as the imagery in the video is not as sharp as with still photography in #1. Still, it's a very popular option with our users.

    One of the popular questions we get here is how one can take a 360-degree video of a product and make it an interactive 360 product view they can integrate online. Even today we're gearing up to help a jewelry client who has an existing catalog of 7000 videos of their products in 360 degrees and they want to make it interactive!

    The answer is that we need to extract still images from the video first. For this exercise we will use this 360-degree product video of a diamond. It's 43 seconds long and was recorded in 4K. The result of the video conversion will look like this:

    Demo video to 360 product view conversion (120 images).

    1 There are different software options for extracting individual image frames from videos (example for macOS). For advanced options, we recommend FFmpeg that you can download for free here for either Mac, Windows or Linux. Let's download Windows version and extract it to our desktop.

    Download free FFmpeg tool for your OS.

    2 We will also download VLC video player as it works everywhere too and will allow us to quickly note the timestamps in the video for the interval with a complete 360 spin.

    Download free VLC player to track timestamps.

    3 Let's fire up VLC with our video and note that the start of our spin is at 0 seconds and the end is somewhere at 38 seconds with a slight overlap to give us some flexibility to synchronize the sequence once it's loaded into WebRotate 360 software.

    To prepare for the next step, we also need to agree on the number of images that our interactive 360 product spin will be comprised of. For jewellery, there's a tendency to go with a higher number of images per 360 view to get that smooth spin even at the expense of slower loading times and longer production times. And so for our demo diamond we chose to go with 120 images which means we need to extract about 3.16 images per second (i.e 120 / 38).

    Demo 360 video makes a full loop at 38 sec.

    4 Now we can run FFmpeg by pasting this command in cmd or PowerShell on Windows (or Terminal on macOS), where --ss is the extraction start time, --to is the end time where we want the extraction to stop, and fps is the number of frames per second to extract. We also tell it where the video is on our hard-drive and where we want the images to get extracted, making sure to extract in PNG format to not lose any quality. For this exercise, the individual images will be named according to this format "image-%04d.png" (i.e., image-0001.png, image-0002.png, etc).

    C:\Users\Me\Desktop\ffmpeg.exe -ss 00:00:00 -to 00:00:38 -i C:\Users\Me\Desktop\diamond.mov -vf "fps=3.16" C:\Users\Me\Desktop\out\image-%04d.png

    5 Once images are extracted, we create a new project in WebRotate 360 SpotEditor and possibly remove a couple of odd frames at the end or beginning of the sequence that are overlapping.

    Remove any overlapping 360 images.

    6 After necessary edits are applied to viewer dimensions, image crop, drag speed & direction, etc, we can publish the project to test locally. As our input images were PNGs, it's important to select JPG format on the Publish form to ensure our images are compressed and lightweight.

    Publish 360 product view to your hard-drive and test.

    7 Once we are happy with the local preview, we can upload it online using PixRiot to give us the final URL or embed code we can share or integrate elsewhere using WebRotate 360 Product Viewer plugins or APIs (see user guide).

    Upload to WebRotate's PixRiot for fast delivery.
  • Industrial 360 Product Photography. Shooting Forklift Trucks in 360 Degrees by Klaes Image Productions

    Hello Everyone! This is Bill Klaes of Klaes Image Productions in Seymour, Indiana. We specialize in video production and commercial photography. Here's my short report on one of the projects I have been recently involved with.

    I needed to shoot a Toyota Forklift to be a WebRotate 360 presentations. The large fork truck required a 50’ camera-to-truck distance to be shot with a standard lens. Before the truck was driven in, a weighted C-stand was put in the center of the room and a 50’ rope was attached. Using a piece of chalk on the other end, a 100’ diameter circle was drawn on the floor. A long piece of 1” flexible PVC pipe was taped on the chalk line. A piece of tape was placed at each shot location.

    You'll have to do your own math to determine the chord length, based on the diameter and number of shots you want to make the 360 product view. There are on-line calculators to get through the high school geometry problem. But, if you want 36 shots, there will be 36 equally spaced pieces of tape at 10-degree angles, each piece of tape secures the PVC circular track and indicates when to make each exposure.

    Note the grooved wheels sitting on the blue pipe. They are hard rubber, 4" diameter, 1.5" wide, with a groove for 1" pipe.

    Two grooved wheels were purchased off Amazon and replaced 2 wheels on my tripod spreader. The 2 grooved wheels go on the circular track. The third tripod wheel goes inside the track. Each time the lead wheel hits a tape mark, a shot is taken. Keep pushing and rolling and clicking for 36 shots.

    The Nikon was tethered to a laptop on a cart, which traveled around the truck with the tripod, giving a preview of each shot.

    Even on the smooth concrete floor, the alignment of the 36 shots would be unacceptable for smooth rotation in WebRotate 360 Product Viewer.

    You may get a better view of the alignment rod with the ball in the first image of the post.

    So again, a low-tech alignment solution. A 2 ft. rod was pushed into a bright yellow tennis ball. Using a cardellini clamp and c-stand knuckle, the rod was attached to the fork truck’s overhead guard at the physical center (front to back, side to side). The rod is long enough to elevate the ball to make it visible in all 36 shots.

    In Photoshop, the 36 files were loaded into layers. Using gridlines, the tennis ball on each layer was aligned to a common point. The image was rotated if the rod was not straight up and down. The rods on each shot were also aligned on top of each other.

    The truck had to be cut out in Photoshop, so a roll of seamless white paper was hung between 2 light stands on wheels. It traveled behind the truck to facilitate cutting out. It also helped cut the clamps under the tennis ball away from the overhead guard.

    All layers have been aligned via Photoshop guides using the rod with the ball, which was then removed along with the background.

    The resulting 360 spin is remarkably smooth, and my Toyota guy is very pleased!

    Update [Jun 13, 2022]: While I can't share a final 360 product spin for the exact truck in the images, here's a low-resolution preview of another forklift from the same project that was photographed and processed using the same workflow:

    Quick low-res 360 view from one of the shoots using the same setup.

    By the way, before getting onto the real project I did a few tests, starting with this simulated run using a toy forklift which helped securing this project with Toyota, consisting of 70 forklift trucks:

    PS: every minute detail couldn't be covered in my short report but I'm happy to answer any individual questions!

  • Infinity Cove Studio for 360 Degree Car Photography

    Studio Owner: TRU Veiculos Ltda. Porto Alegre - RS, Brazil (Ezequiel Piacini - cofounder, Mario Guilherme Mercado - cofounder)

    It's not very often that we get a chance to see our users getting involved in massive 360 product photography projects like the one we discussed today with Jose Carlos Ramalho of ZAER Imagens Aereas located in Joinville, Southern Brazil. To see examples of his studio work, including WebRotate 360 views of cars that were shot in the cove, head out to ZAER's impressive portfolio page.

    Here's a brief summary of what Jose had to share:

    What would you like to tell us about your business?

    We started ZAER Imagens Aereas in 2014 with the goal to provide our clients with high quality still and interactive real estate photography (received Google Trust Agency Certification a couple of years ago). We have been expanding our services into aerial imaging, interactive 360 car views and small 360 product photography.

    What were the high-level requirements for the 360 car photography project?

    In August 2018 we were hired to advise our client TRU Veículos Ltda located in the city of Porto Alegre (the State of Rio Grande do Sul) on the construction of a 360 car photography studio with very specific requirements to photograph exterior and interior of vehicles in 360 degrees.

    The studio was to be constructed in the space of 8 x 8 meters and a minimum height of 4 meters. The objective was to photograph cars of various sizes including sedans, SUVs, and pickups. It is important to note that it's a very innovative, pioneering project in South America for this purpose.

    How long did it take to build the infinite cove studio?

    All in all it took about nine months from the moment we were contacted by the client to the final hand-over. We did a lots of research and testing before starting on the construction. By the way, the studio was built on client's premises so we also did all the knowledge transfer for their operations team to be able to shoot cars in 360 on their own. It was quite an experience! I have been in photography business for 30 years and shot a few 360 product views but there was still quite a lot to learn on this project.

    Was the turntable custom-designed for this project?

    Yes, it was designed for this specific studio and was built by a contractor. To give you an idea, the turntable is 4500mm in diameter and can safely withstand up to 4 tons of load. It's designed to stop at 10-degree increments and trigger the camera after 3 seconds of each stop.

    Anything you can tell us about your photo equipment for this project?

    It's relatively low-key.. here's the list of the main components:

    • Sony a6000 for both interior and external photography
    • Sony 16-50mm for exterior and Samyang 7.5mm fisheye for interior
    • Customized horizontal arm to allow centering the camera between the front seats
    • Automated rotor for spinning the arm at 90-degree increments inside a car
    • Studio lighting has forty LED tube bulbs 2400mm / 6000K that are installed about one meter above the diffuser tent made of nylon fabric .
    How fast can you shoot a 360 view of a car and how many images per spin do you use?

    For exterior its 36 images total and we can shoot a car in under 8 minutes.

    Anything else you can tell us about the camera and workflow for the interior views?

    So as I said it's the same camera we use for the interior shorts which is Sony a6000. The lens is Samyang 7.5mm with Nodal Ninja adapter plus the rotor that is controlled from an app. The system shoots four images in RAW at 90 degrees intervals with the bracketing set at -2, 0, +2. The images are then downloaded using Adobe LightRoom where they are reviewed and exported in TIFF. We use PTGui Pro to transform the images into an equirectangular spherical image which we then transfer to Photoshop for small fixes and touch-up. The last step is publishing an interactive 360 interior view using Panotour Pro.

    Many thanks to WebRotate 360 for also being part of this project!

  • PixRiot Upgrades to v4. Shareable Private Folders, Videos, WEBP Support, Image Viewer and more

    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

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