tel: +1 (800) 996-8617
  • The Missing Manuals - Accelerated Spin on Load and Auto Playback on Inactivity via API

    Photo by 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.

  • Recommend WebRotate 360 and Earn 25% From Every Sale You Referred

    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

  • Guest Post: Multi-Camera Photo Studio for 360 Fashion Photography and More

    Phil and Dyne here from Toledo, Ohio. 360 image spins of live models have proven difficult to produce using the standard turntable approach because it is difficult for even a professional model to remain motionless during the entire photo capture process.

    To address this issue, we have developed a multi-camera prototype studio which can quickly produce high quality 360 spins of live models (and any other item) in a matter of minutes. Our patented process uses multiple Canon cameras, electronic logic interface circuits, LED dimmable lighting, and pan/tilt fixtures for accurate image alignment – all interfaced with our software.

    Here is a typical 360 spin produced in our 16 camera "booth". You can see many more images at myshowntell.com and also use the "contact us" form for additional inquiries.

    Studio construction

    The studio is constructed with conventional 2x8x10 framing and drywall which allows for the subsequent addition of an outer wall with decorative logo or print media. Although a multi-camera version is required for shooting live models, we have found that using a conventional single camera and 360 product photography turntable in the structure offers a variety of benefits especially as relates to image background "washing" and object set up time. In most instances, any item can be placed or hung in the booth or set on a turntable, and the 360 product view generated with little or no post-processing required. This is because the lighting is directed evenly to the walls only and the subject is illuminated from all directions.

    Here is a video of the entire image capture and display process in real time:

    Lighting

    We use 16 dimmable LED flood lights and 16 dimmable high frequency fluorescent flood lights - all strategically directed to the walls and NEVER directly toward the subject. Lighting directed toward the subject can cause shadowing on the background of the image which necessitates subsequent image photo processing - not much fun when there are multiple photos to address. We get the R, G and B value differentials to be less than 4 or 5 max across the entire background, which make programmatic or manual cleanup quick and easy.

    Our multiple camera system software also does a background "wash" to any preset color. The magic of the studio lies with the 360 degree lighting that is made possible only with a 360 studio. When shooting live models, it was not unusual to get some shadowing around the feet, and this problem was totally eliminated by the addition of an LED back lit plastic floor insert. For this, the best results were obtained by using clear Lexan with severely abraded surfaces.

    If you are using a single camera and turntable, the floor insert may not be required, but a lit or painted stand will prove beneficial. The system also works great by hanging an object from a center hook in the ceiling.

    Cameras and power tilt modules

    We use 16 Canon EOS cameras mounted on programmable power pan/tilt bases. Camera functions and alignments are adjusted and controlled individually or globally by the software. Below is a photo of a camera mounted on the power pan/tilt mechanism and also one of the interface circuit boards.

    Software

    Software for the 16-camera version has been in development over several years and it is very versatile. The software automatically does the following and more: camera alignment, light balancing, background "washing", live view capability, vertical and horizontal alignment, manual or auto focusing, cropping, resizing, color balancing and camera hole elimination.

    A folder of the completed images is generated which can then be dropped into WebRotate 360's SpotEditor and subsequently to PixRiot for publication. Once the cameras have been initialized and some other parameters set (total of about 15 minutes), we can usually produce hundreds of live models rotations without any additional adjustments required.

    Here is a typical screenshot of one of the many windows in the software:

    Obviously the 16-camera system is not for everyone, but if you wish to capture 360 fashion photography of live models or have a high volume of other rotational image requirements, the system is ideal. Internet-ready 360 product spins can be produced in a couple of minutes and the system can also generate images of stationary objects in multiples of 16 by rotating the object and then just one more "snap" of 16 to yield 32 or 64 images if desired.

    There is also a little trick with the studio that allows one to generate 3D anaglyph 360 images quite quickly. Although these types of images are a bit gimmicky and require red/cyan 3D glasses, they have proven to be popular in the education arena and fun to watch. You can see a couple of 360 anaglyph examples at myshowntell.com.

    The multi-camera process and WebRotate 360's software in combination with PixRiot hosting has enabled us to produce, view and publish interactive 360 image spins of models and stationary objects in a few minutes each.

    We welcome anyone who wishes to see our studio in action to come to Toledo, Ohio and get a demonstration as well as a 2 hour photo shoot and their image links for no charge!

    Call 419-260-2692 fore more details (9am to 4pm EST).

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

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