Web Platform Team Blog

Adobe

decor

Making the web awesome

The Graphical Web Experiment

The Quest for the Graphical Web was an experimental presentation we put together to tell the story of how the web is evolving from a graphical perspective. You can watch the full recording of the presentation from the Create the Web event.  A web version can be viewed online at thegraphicalweb.com.  We’ve also open-sourced the presentation on github.

For the presentation we wanted to show some key graphical features of the web along with newer features being implemented by Adobe’s own Web Platform team. Some of these features are still in the specification process so implementations can currently only be found in experimental or preview browser builds, like Chrome Canary. To show off these features we put together a cast of unique characters to represent each of the technologies used. In the story, our protagonist “Div” travels through an evolving landscape, where he meets “CSS”, who makes things colorful, and “SVG” who makes things more shapely. The journey then continues into outer space where we are introduced to “3D Transforms” who brings a new perspective on things, “2D Canvas” who shows some particle tricks, and an enigmatic “WebGL”.  We then return home to explore some coming features like “Blend Modes”, with some ghostly overlay effects.  Then wrap things up with “Shader Princess”, showing off the power of CSS Custom Filters. Each of the characters explains how they make the web a more graphical place.

SVG

We decided to use inline SVG heavily throughout the site because of it’s scalability and ease of manipulation with CSS and Javascript.  For dynamic SVG creation and animation we used D3.js which is a popular data visualization library for SVG. We decided to use D3 because it provides a simple API which exposes many of SVG’s more unique features, like clipping paths, which weren’t readily available with all vector libraries. D3 was primarily used for generating and then interpolating the path of the hills in the background from flat to curved. It turns out that getting manually drawn shapes to interpolate smoothly can be quite tricky. There are methods you can use to make this more reliable, but ultimately the more complex the shapes being interpolated are the more difficult this process will be. We generated the start and end shapes dynamically to have full control and ensure a smooth transition between the two shapes.

CSS3 & SASS

Most of our characters are SVG elements that blink and move using CSS animations and transformations. These properties are applied to paths and elements inside the inline SVG (only currently supported by certain browsers). This allowed us to trigger animations and transition attributes of a character simply by appending or removing a class to the root element. We used SASS, a meta-language on top of CSS that compiles into CSS, which allows us to use variables, mixins, and to break out our CSS into different files. We used this in conjunction with Compass which provides a useful set of built in mixins, specifically helpful for CSS3 prefixed features, allowing you to write one line and then taking care of all the prefix variants for you. So, instead of writing:

-webkit-transition: transform .2s ease-in;
-moz-transition: transform .2s ease-in;
-o-transition: transform .2s ease-in;
-ms-transition: transform .2s ease-in;
transition: transform .2s ease-in;

We can just write:

@include transition(transform .2s ease-in);

2D Canvas

For Canvas we used Processing.js to render a particle system, which switches between arrays of points to create animated transitions between shapes. We created a crude tool to draw target shapes allowing us to easily manipulate them for smooth transitions, which then exports these points in a format we could use. This is how we created a talking face animation made up of star particles.

 

Shaders

A number of custom GLSL shaders were created for this project. We wrote a custom fragment shader to create the ambient glowing background of our WebGL scene. This fragment shader, along with the geometry in the scene was easily implemented with the Three.js library. We also wrote a custom vertex shader for our Custom Filters character to create wave-like oscillations similar to a stingray. The CSS for this element is below, referencing the individual vertex and fragment shaders as well as setting the attributes within them.  We used CSS Animations to interpolate the states back and forth with easing for smooth motion.  These shaders can be difficult to write so having a tool like CSS Filter Lab is really helpful in creating custom shaders.

-webkit-filter: custom(url(../assets/shaders/jelly.vs) mix(url(../assets/shaders/jelly.fs) multiply source-atop), 50 50 filter-box, transform translateY(-10px) rotateY(0deg) rotateX(60deg) rotateZ(170deg) scale(0.55), delta 1.0, backface 0.0);

 

3D Transforms

We built a camera to manage the viewable HTML area by translating our scene element relative to the camera position with 3D transforms. This allowed us to slide, rotate and zoom the camera on all three axes. We managed the position and rotation of our “Div” character within the scene with this same approach.  3D support is not completely there for all browsers, for example, we found some implementation issues with Safari where rendered nested content in some scenarios don’t respect their transformation, and IE10 does not currently support transform-style: preserve-3d, meaning content within a container always layers based on the z-index of the attribute, so proper depth sorting with translate3d is out of the question.

HTML5 Audio

Audio in HTML is still a work in progress.  To make it more manageable we used the SoundJS library and loaded the assets with PreloadJS, which are part of the CreateJS suite of javascript libraries. These libraries make it easy to get up and running with audio in HTML.  They also let you specify different audio formats based on the browsers capabilities.

We tried to pack a lot of different features into a colorful, creative demo, to show some fun uses of the technology. Feel free to check out the source on github and see how we put it together. Given the nature of the content it obviously doesn’t work great in every browser, but we thought it was a good test case to see how far the open web, as a design medium has come and we believe there’s still a lot of cool things on the way.  We’re excited to see how the web community will continue to innovate with these and coming graphical features as the web platform continues to grow.

2 Comments

  1. October 19, 2012 at 4:38 am, Anthony said:

    This is amazing, as an avid HTML5 developer this has taught me a few things. Thanks.

  2. January 30, 2013 at 8:42 am, Nicholas said:

    This is the most amazing thing I’ve ever seen on the web. I can’t believe this didn’t involve any .swf formats or flash, amazing job