Image © John Greenleigh/flipsidestudios.com

To jump straight to the Apple gallery, scroll to the bottom of this post.

Notebooks full of data CDs from the 1990s and early 2000s sat on closet shelves in my home for years. They were my archive of 360-degree product demos I made for Apple for over a decade. From 1996 to 2007 my company, Flipside Studios (then called John Greenleigh Studios) was the exclusive provider of Apple's website 360 product photography for every hardware product they released. The first iPod, the first iMac, and who can forget the eMate 300? Well…everyone.

I had always thought about digging out these old 360s to put on my website for fun and to show an important part of Apple's history – and my own. Unfortunately, Apple has not supported the platform they were meant to function on - QuickTime VR (aka QTVR) - for years, and I hadn't wanted to deal with all of the steps and hassle of updating them for current systems and browsers.

Drag and spin the multi-row 360 product view of the iPod shuffle (circa 2005) in any direction.

Recently, as I was revising the Flipside Studios website, I decided it was time to include a gallery of our Apple QTVRs. This meant finally getting down to taking the original jpeg files and making new versions of the 360s in HTML5. Unlike before, however, I now had a tool that would make the process much easier and stress free, and this was my go-to stitching and viewing software, WebRotate 360!

How our QTVRs were made

Apple's QTVR product 360s were photographed with custom-designed automated turntables and camera rigs created by the wonderful engineer, Lewis Knapp of Corybant West. As the turntable rotated and stopped every 10 degrees, images were captured until a full 360-degree rotation was made.

Almost all of the Apple 360s were of the "multi-row" variety, meaning that photos were captured both horizontally and vertically (x-axis & y-axis) using the motion control rig that raised the camera to precise and repeatable positions above the product. These QTVRs usually contained 360 total images and allowed the customer to virtually examine a product all around and also over the top.

Left: a diagram from an early Apple Developer document showing the multi-row object movie process. Right: shooting a Mac and display with our custom designed turntable and motion control camera rig in 2001. (Photo: ©John Greenleigh/flipsidestudios.com)

For some products – like ipods – our clients at Apple requested that we additionally shoot the underside to allow viewers to see below the product as well as above. The trick to capturing the bottom was to shoot the whole sequence twice – flipping the product upside down for the 2nd run. When the upside down images were rotated 180° in post production, the effect was that of moving underneath it.

A multi-row QTVR object movie allowing for horizontal and vertical movements. Product is the original iPod released in 2001. (360: ©John Greenleigh/flipsidestudios.com)

Once the images were captured, they were edited in Photoshop to remove the backgrounds, retouch minor cosmetic blemishes, and composite a screen image into every frame that showed a screen. The result was a folder of retouched, sequentially numbered jpegs. Apple's QTVR Authoring Studio software (replaced later by 3rd party programs) was used to stitch the retouched jpegs into web-ready QTVR files.

Frames of a MacBook after importing into Apple's QTVR Authoring Studio. (Photo: ©John Greenleigh/flipsidestudios.com)

The finished QTVRs were delivered to Apple at two different resolutions: 360px x 360px and 480px x 480px. Why such small image sizes? Because anything larger would have taken forever to download on the slow dial-up modems that connected us to the internet before broadband came along in the early 2000s.

Final files with the product code name 'Gimme' as delivered in 2 sizes to Apple. The '.obj' files were the interactive web-ready files.

The final QTVRs were featured on the product page of all newly released hardware, and also on a dedicated 360 product photography page called the "QTVR Hardware Gallery".

Left: a product page with a link to the QTVR 360s. Right: Apple's QTVR Hardware Gallery circa 1993.

Apple eventually discontinued supporting the QTVR object movie plug-in in 2006, and later did the same with VR panoramas, forcing both 360 product photographers and panorama photographers to move to Flash and then to HTML5 for presentation on the web.

Remaking the 360s

To remake the QTVRs in HTML5 for viewing on current systems, I simply imported the folder of original retouched jpegs into WebRotate's SpotEditor, adjusted the control and interface settings, and output the files to a new web-ready folder. This time around - with broadband speed - I could remake the 360 product spins larger than the originals, and include high resolution zooming as well as full screen mode. The folders were uploaded and are now hosted with WebRotate's new PixRiot server platform which simplified the uploading and has made a real difference in the download speeds as well.

A screen capture of the WebRotate 360 SpotEditor.

I am excited to have finally remade a selection of the Apple 360s that led me into the world of 360 VR product photography and hope you enjoy them and share them with others.

To see announcements of new 360s added to the gallery - as well as other one-of-a-kind Apple history not found anywhere else - be sure to follow Flipside Studios on Twitter and Instagram.

See the Apple 360 Gallery!

We have recently revamped our Shopify app, so today lets review what is currently possible in the latest WebRotate 360 Product Viewer for Shopify v2.0.

It's important to note that given Shopify limitations, your 360 product views have to be uploaded to a third-party web hosting such as webrotate's PixRiot, a GoDaddy server, etc. PixRiot, if you haven't had a chance to play with it  is our new optimized hosting solution where you simply drag a published folder from your hard-drive to your PixRiot dashboard to host and share your webrotate 360 views online. PixRiot is not a requirement for using this integration.

Install the app

There're three main integration methods available in the new app:

• Automatic PixRiot integration
• Image ALT integration
• Programmatic Integration

Let's first review Automatic PixRiot integration which is a new method we added in v2.0:

Automatic PixRiot integration

It's the simplest integration we have so far. It relies on automatic matching of a product ID in your Shopify catalog with the name of your 360 product spin in PixRiot. In other words, if a user lands on a product page and the app finds a matching 360 product spin on PixRiot, the integration is activated automatically.

Here's how to configure it step by step:

1 Let's first find out the ID of our product which we can do by simply looking at the URL of the product page in our Shopify admin. The ID is this long number at the end of the URL:

If you don't like using this ID for some reason, you Shopify developer can use a global JavaScript variable that they can output in your product template with the matching PixRiot name as needed. The name of the variable is __PixRiotAssetName.

Let's copy this number and re-publish our 360 product view in WebRotate 360 SpotEditor (download) using the Shopify number as the View Name. Alternatively, we could create a new SpotEditor project using this ID as the actual project name:

2 Now we can upload the published view to PixRiot under some folder like the shopify folder we created in the following screenshot. This folder and any sub-folders we can create there contain all required 360 product views for our app.

To upload, simply drag a single folder that just got created under published/360_assets that looks like our product id and drop it under your chosen folder in PixRiot:

3 To configure the app, first select Yes under Use PixRiot and also enter the URL of the shopify folder under PixRiot Folder in the app settings. To get the URL of the folder, click Share (globe icon) next to the folder name in PixRiot and copy-paste the URL accordingly:

Now we need to decide where to place our 360 product view on a product page in Shopify and this is what the HTML Placeholder field is for.

HTML Placeholder is either a CSS class or id of an existing HTML element (container) on a product page where we want to see our embedded 360 product spins.

It can be also a class or id of an element that triggers a popup with a 360 product view, if it's configured in the app (e.g a thumbnail with a 360 view graphic, etc). If this sounds intimidating, please get in touch with us or your Shopify developer to find out how to identify or create such placeholder.

For this exercise, we will manually replace the gallery that came with our Shopify template with this empty div container in the product template as follows:

<div class="test-360">
</div>

Alternatively, we could make it a hidden 360 graphic as shown next and place it let's say next to our main product gallery and select Show In Popup (PRO) in the app settings. The app would make it visible automatically on a product page, if a matching 360 is found in PixRiot (not all of your products may have a 360 product images). If user clicks the graphic, it opens a clean popup with a configured 360.

<div class="test-360" style="visibility:hidden;width:120px;">
    <img src="https://cdn.webrotate360.com/lib/integration/shopify/graphics/360icon.svg"/>
</div>

4 Finally, let's enter .test-360 in HTML Placeholder in the app settings in Shopify admin, save the app and clear browser cache to see our embedded 360 product spin as we intended:

You can fine-tune it further by updating viewer dimensions, its Base Width (important for responsive viewer height!), viewer skin, etc using the app settings as needed. Hover over the field names on the left in the app settings to see more details about each field there.

Remember to clear your browser cache each time you save the changes.

Image ALT integration

Instead of the automatic linking with PixRiot we reviewed earlier, here the app relies on the URL of a 360 product view that you can enter in the ALT field of any product image in your Shopify admin under Products.

The URL can point to a webrotate 360 product view on any third-party web hosting, including PixRiot. And it's the URL of a config XML file that WebRotate 360 publishing software creates on publish on your hard-drive under published/360assets/your-folder-name.

It's the same URL you see on the first tab of the Share & Embed form in PixRiot if it's uploaded there:

Here's an example URL you can use for your tests:

https://s1.pixriot.com/433181dfa6/CMS/Shopify/shirt/shirt.xml

The integration will look for the image ALT on a product page that resembles our config file to see if a given product  actually links to a 360 product view. And if it does, it will show it inside your configured placeholder (or via a popup) as we just discussed in bullet 3 under Automatic PixRiot integration.

Programmatic Integration

With this integration method, your Shopify developer can insert an HTML placeholder at a desired location on a product page programmatically and only for those products that have 360 product views. The placeholder container just needs to include the URL of the config XML file via the data attribute as shown in the following example:

<div class="test-360" data-imagerotator='{"config":"https://s1.pixriot.com/433181dfa6/CMS/Shopify/shirt/shirt.xml"}'>
</div>

Using this example, we also need to tell the app to use .test-360 as the HTML Placeholder in the app settings accordingly.

As with the other two integration methods we have reviewed, you can also configure this placeholder to work as a popup thumbnail and use the rest of the app settings as applicable.

Photo by Startup Stock Photos

Today we continue with our Missing Manuals series (see previous post) where we review more advanced product features and API examples. This time let's review a recent customization we have implemented for our client using viewer APIs.

Quick tip: to see all available APIs, simply publish your SpotEditor project using "JavaScript API" template that you can select via Template drop-down on the Publish form.

This customization was outside of our standard feature set and specifically the client wanted to really speed up the initial playback of their 360 product views on page load and then to also ensure that the 360 is always spinning as long as user doesn't interact with it. What seemed like a quick "fix" ended up being a good example of a more advanced API usage.

Check it out by opening the following link. Alternatively, download the entire SpotEditor project here and see our 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. Configure everything as you would usually do. As we're going to always auto-play, make sure to hide the playback button if selected viewer skin supports it (e.g all except "empty", "zoom_light", "zoom_dark"). In our example, we use "zoom_light" so this is not a concern.

With "zoom_light" skin consider using the "Toolbar align" controls to position the full-screen button to the top right of a 360 product spin as per the example.

Next step is to verify that the playback speed is reasonable, as again our product view is going to spin non-stop pretty much. Playback speed is controlled via "Rotate period" and it's the number of seconds it takes to play once through the entire set of 360 product images.

Remember that the rotate period value is also used in the calculation of the drag speed in that we multiply "Drag factor" you see in the same section in SpotEditor by the rotate period to get our desired drag responsiveness.

Let's also configure our 360 view to zoom-in on single tap and spin on mouse wheel when it's either zoomed-in or in full-screen.

Publish the project using "Responsive" template and rename the .html file under "published" folder of your project to something else so that our manual API changes don't get overwritten accidentally if something needs to be modified in SpotEditor and re-published.

As always to use APIs we add apiReadyCallback property with the name of our callback function, i.e wr360Callback.

jQuery('#wr360PlayerId').rotator({
    ....
    apiReadyCallback: wr360Callback
});

In wr360Callback (see the entire script in the html source of the example) we first determine the number of images we want to skip during the first spin to achieve that snappy turnaround we need. In this example, it's set to 2 via startPlaySkip. Then we setup a timer to manually play through the 360 degree animation by skipping 2 images every time the timer is fired which in our example is every 120ms.

Once we finish a full loop determined by skipCount, we stop the timer and start our standard viewer playback via api.toolbar.playbackToggle().

And if our callback is called in full-screen, we skip the whole thing all together to give user full control over the 360 product view.

function wr360Callback(api, isFullScreen) {
    if (isFullScreen)
        return;  

    var totalImageCount = api.images.getTotalImageCount(),
        startPlaySpeed = 150; // Speed of the first spin in ms. The smaller the faster.
        startPlaySkip = 2; // Number of images to skip when running the first spin.
        startPlayDirection = 1; // Change to -1 to spin in opposite direction.
        
    var skipCount = Math.floor(totalImageCount / startPlaySkip);
    
    var startPlayInterval = setInterval(function() {
        api.images.showImageByDelta(startPlayDirection * startPlaySkip);
        if (--skipCount <= 0) {
            clearInterval(startPlayInterval);
            api.toolbar.playbackToggle();
        }
    }, startPlaySpeed);
	
    ....

Next section in the callback deals with the auto-playback when there's inactivity. Here we setup a separate timer that keeps tracking every 2 seconds whether the current viewer image is the same as the previous one we checked inside the timer callback. If it's not and the viewer is not in a zoomed-in state, we toggle the playback again.

....
var previousImageIndex = -1;
    isZoomed = false,
    pauseTimeout = 2000; // Time in ms to check for inactivity.

setInterval(function() {
    var newImageIndex = api.images.getCurrentImageIndex();
    if (previousImageIndex == newImageIndex && !isZoomed)
        api.toolbar.playbackToggle();
    previousImageIndex = newImageIndex;
}, pauseTimeout);

In the next v3.6.5 update, there's going to be a new api.images.onFrame that the viewer calls each time the image index changes and this may provide a bit cleaner solution without the extra timer.

All of our CMS and eCommerce plugins expose API callback so you can easily add interesting effects such as the one we reviewed above by providing the name of your callback function via a dedicated plugin property.

See the previous post in the Missing Manuals series here.

We're happy to announce that our new affiliate program is now live!

The premise is simple. Help us spread the word about our products and get a 25% share from each license sale your leads generate. With our current pricing, this is $150 from every Enterprise license and $100 from every PRO that you help us sell. If you are a photo studio that shoots 360 product photography or a 3D product modeling company with a good number of projects, this can move the needle.

PS: we have delayed the launch of the program for years since our old software for macOS admittedly was subpar and the market was not ripe enough for what we do here at WebRotate 360. Today we enjoy working with the new SpotEditor on macOS and it seems the market "overnight" started really craving all things e-commerce, e-learning & virtual, and 360 product views are on the menu.

Who is Eligible

If you have purchased our products in the past, the affiliate program is free to join and there is no minimum sales level or other requirements. This is one way to thank our clients who at the end know our products best and understand who else can benefit from using them. We also welcome serious software resellers who would be interested in joining.

How to Start

Request your affiliate account on this page. You will be provided with an affiliate link and access to your personalized tracking dashboard. Simply post your affiliate link to a blog, article, social media, forum or email. Then track your referral clicks, sales and your commissions.

Accurate Tracking and Reporting

We track website visitors and purchases that come through your affiliate links within 90 days from the first visit of your referrals and attribute them to your affiliate account. You will receive an email for each sale your referrals make and will get access to detailed reports via a personalized dashboard.

Become an Affiliate