Next Generation Web Timelines

Monday, September 16, 2013

I am excited to introduce a new way for sharing interactive timelines. This revolutionary new web publishing feature uses next-generation web and rendering technology in completely new ways and will debut with Timeline 3D for iOS 7.

View Full Size

Interactive 3D timelines on the web!

For years, I have been thinking about how to render 3D timelines in a web browser. Many of you have e-mailed and asked for this capability too. Until recently, however, I did not believe that it would be technically feasible.

Why don't you just use…

…Flash?

I received many suggestions along the lines of “Why don't you just use Flash to present 3D timelines?” There are several reasons. The most important reason is that Flash is not available on most mobile platforms, and it is falling out of favor on desktop platforms as well. Many people have Flash disabled in order to avoid annoying ads in their browser.

The second issue with Flash is technical. In a nutshell, Flash was not designed for this kind of work, and it would be very challenging to get it to work well for 3D timelines. It is more suited to 2D animations than 3D animations.

…HTML5 / CSS Animations?

Similarly, I received suggestions like “Why don't you just use HTML5?”

CSS Animations and CSS Transforms are great, but they are not designed for the advanced 3D animations that are happening in Timeline 3D. Yes, CSS transforms can display an image in perspective. But they cannot be used to implement technical features such as dynamic texture loading to the GPU, fragment shading for lighting, and other effects that make our animations look so good.

The new kid in town

Then a new technology emerged that looked promising. WebGL uses code similar to OpenGL. I am using OpenGL in Timeline 3D, so that is good. WebGL also enables advanced coordination with the GPU, which is also good. Promising!

However, WebGL also has challenges. It has only recently become adapted by desktop browsers and is not yet available on many mobile browsers. Most WebGL implementations that you can find at this point are technology demos that are cool but would not be practical in a real-world website. For example, I want web timelines that can be included in a major news media story with viewers using every platform and browser.

Then I realized…

WebGL would be the best way to show an interactive timeline in the web. But until it becomes ubiquitous, I would need a fallback — something that looks like the WebGL version but does not require WebGL.

So crazy, it just might work!

What if we pre-rendered every event as a 3D image, then stitched them together with HTML5 / CSS animations? We also could pre-render bitmap textures required by WebGL and present the WebGL animations for the browsers that supported it.

I dismissed this idea at first. Each website actually would need to be two websites, the WebGL and the pre-rendered one. Sounds complex!

Ideally, pre-rendering the images would need to be done at multiple sizes if we wanted the timeline to resize within it's frame. Rendering 3D images is a lot of processing work, especially for a mobile device. Would an iPhone or iPad even be capable of rendering and uploading hundreds of images?

So I had an idea, but it required something that has never been done with WebGL, along with intensive offline 3D rendering on a mobile device, which is rarely attempted. And, why not try to build it in time for the new version of Timeline 3D for iOS 7? What could possibly go wrong?!

Cutting edge technology, in your hands

Well, fortunately, not much has gone wrong. The project has come together quite well. We are shipping a first peak at the feature in our iOS 7 update for Timeline 3D.

You can now publish interactive web timelines from your iPhone or iPad!

Those timelines can be viewed on any web browser. On a WebGL browser, the timelines will be fully animated and interactive in 3D. WebGL-capable browsers include Chrome, Firefox, Opera, and Internet Exporer 11. WebGL is an opt-in feature of desktop Safari.

On other browsers, such as mobile Safari, the timelines are also 3D and interactive, though they will use cross-fading images instead of actual 3D motion graphics.

Either way, the timelines can be navigated with a mouse, keyboard shortcuts, or touch gestures.

Just the beginning

Please note that this is very new technology that we are continuing to improve. In fact, we have chosen not to advertise the feature in our App Store marketing until it is a bit more mature. Think of it as a stealth feature known only by our closest friends.

At this point, web publishing can take your iPhone or iPad quite a while to render the many images required. Processing will pause if you switch to another app, since the rendering requires the full resources of the CPU and GPU.

Your feedback will be valuable and will help us improve the feature. You can start by viewing the timeline above in your favorite web browser and letting us know how it goes. You can always reach us at support@beedocs.com with questions and comments.

Over the next few weeks, I will go into more detail on how the web publishing works and how you will be able to integrate it with your existing websites.

Labels: html5, timelines, web publishing, webgl