We were stumped.
We had a client who needed a cheap, portable, multi-browser compliant, mobile ready 3D viewer for their products.
I had used 3D viewers in the past but things have changed. Apparently 3D Product Viewers have become either expensive or not very good! We had a medium sized budget but we didn’t want to stick the client with a monthly or yearly fee to use a 3D product viewer on their site.
So we bit the bullet and made our own.
Initially it seemed simple. Make a WordPress plugin that allows them to drag and view different angles of the product. It seemed simple. We realized that a lot of times the rendered files are very large resulting in long wait times for 15 degree image shots. We tried everything, the initial renders came to us in PNG format which was obviously too much so we decided to move to JPEG which sucked because we wanted the transparency of the PNG. This still sucked as a solution because even though the images loaded it was still ~10MB of downloads for 15 degree view.
Then it dawned on us. Video.
Sure we’ll still have the transparency issue. Sure we’ll still fall back onto JPEGs if their browser doesn’t support HTML5 video tag or flash but when the user does we were able to compress ~10MB of images into 1.8MB of video. When the user drags to a certain angle of the product we just flip to a certain frame in the video. Better yet we can even do a 1 degree video with little increase in size and the user can drag around the product almost seemlessly.
That still seemed like.. So what?
Now when users land on our client’s website from their desktop they quickly load the product via video (a couple seconds on broadband) and can pan around the product without a problem, dragging or arrow keys, pick your poion.
Mobile users get an even cooler experience though. They visit the website and are looking at a couple products, check out the 3D view and they are panning around it using their finger and it asks them, “Do you want to enter ‘Augmented View’?” When they choose yes it is like looking into product window on your device, you rotate the device around and it rotates in the same fashion as if you were looking at the product.
We hope to productize this in the next 3-6 months and offer product image hosting (Amazon S3), image to video conversion, a WordPress plugin, a jQuery plugin, support on product usage and a bunch of cookies.
If you have an immediate need for an awesome and fast product viewer, contact us today and we can help you out with a beta version.
Next Up: Augmented Reality Jewelry.