Technology in Iconasys 360 Product View Creator Software
Shutter Stream 360 Product Photography Software is an application that connects a digital camera to a computer and automates the process of capturing, editing and creating 360 product image sets and web-ready 360 Product Views. Shutter Stream 360 comes bundled with the 360 Product View Creator Software and can optionally be paired with an Iconasys 360 Product Photography Turntable and Lighting solution. Shutter Stream 360 supports a wide range of cameras, imaging tools for efficient image editing and background removal, and external hardware for efficient 360 degrees and still image capturing. The 360 Product View Creator takes the images captured from Shutter Stream 360 and creates interactive 360 product views with support for deep zoom and hot-spot image tagging (see complete 360 Product View features list).
In an earlier article, Why Iconasys for In-House Still & 360 Product Photography, we compared our software solution against other third party vendors that integrate hardware and software for eCommerce photography and we highlighted the strengths of our software solution. In the article entitled High Level Software Architecture Overview of Shutter Stream we took a high-level view at the use of the cross platform Qt library in Shutter Stream 360. This article takes a high level view at the technologies used in Iconasys’ 360 Product View Creator Software and in particular, the technologies used for creating the interactive content.
First, a bit of historical background. The Hypertext Markup Language (HTML) is the language that web pages are written in. A web browser will read the HTML code and translate it to a Document Object Model (DOM) structure which can be displayed on the computer’s screen. The DOM is a tree structure with nodes representing parts of the document.
To achieve interaction with a web page, the DOM was modified and updated with the introduction of JavaScript and styled by Cascading Style Sheets (CSS). When HTML5 came out, it had 2 major goals to achieve:
- To enable streaming and have more interactivity
- To enable mobile devices to access desktop class web pages
The biggest visible changes in HTML5 are the audio, video and canvas tags, which enable web developers to embed music, movies and interactive hardware accelerated animations without extra browser plugins. HTML5 also added better support for vector graphics, like the Scalable Vector Graphics (SVG) format.
These improvements, and many more, make HTML5 a good candidate for 360 viewing animations. HTML5 provides support for real-time rendering, small file sizes, gesture interactivity on mobile devices, MP4 support and much more.
Second, to maximize our users’ experience, Iconasys choose HTML5 as the technology for the 360 Product View Creator Software and we offer continuous updates for our customers through our update system. We use CSS to style our 360 viewer, because CSS offers reusability which saves development time, it is easy to maintain, it keeps the HTML file size low, by having the style definitions in separate files, it is a W3C standard – which means that it is supported in all major browsers.
Third, for browser logic programming and interactivity we use JavaScript and jQuery. jQuery is an excellent choice for manipulating the DOM. It is packed with a lot of features for modern web development and it offers great cross-browser compatibility. jQuery is light weight, it is easy to extend, and it covers all the development needs from event listeners to complex DOM restructuring. By employing modern web technologies, we built upon the HTML5 video tag and leverage its capabilities in order to add support for MP4 360 video animations.
Fourth, mobile devices are an essential category of the computing form factor fragmentation.
At Iconasys we focused heavily on mobile support and we use mobile APIs to provide a rich experience when viewing 360 animations. Thanks to the vast APIs included in jQuery, our mobile rendering is as robust and similar, as the desktop experience.
Fifth, our 360 Product View Creator customers can take advantage of our 360 views Stream Server. The server is built on top of the aforementioned technologies, has an intuitive Web UI, and users can host their own 360 views, and embed the 360 views on any web page which supports the iframe tag. Future plans for our Stream Server include SVG and tint-able control buttons and an HTML5 Canvas viewer, which will enable hardware acceleration and smooth interaction on very large image sets. This change will take advantage of the GPU to render the images, instead of updating the DOM tree with the source paths of the images, and will be most noticeable on mobile devices, where rendering on GPU instead of CPU will result in significantly more responsive 360 views.
In conclusion, this article provided an overview of the technologies used in our 360 Product View Creator and our 360 Stream Server. It also highlighted the directions we plan to take with future product releases.
Learn more about Iconasys 360 Product Photography Equipment & Software
