Adobe brings programmable 3D pizazz to the web


Now that the web standards bug has bitten Adobe Systems, the company is starting to produce some very interesting new technology.

Adobe’s CSS shaders technology permits web pages — including text, graphics, animation and video — to be placed on curved 3D surfaces such as this flip book.
The newest example, revealed at the Adobe Max show this week, are CSS shaders. Shaders are small programs run by computers’ graphics chips for games and other graphics-intensive applications. Shaders come in two varieties: vertex shaders, which control the geometry of the vertices used to construct the 3D surface meshes, and pixel shaders, which control pixel colours. CSS shaders employ both ideas.This newly proposed standard, developed in cooperation with CSS pioneers Opera and Apple, brings a common 3D graphics ability to the Cascading Style Sheets technology for controlling web page formatting. Building shaders into CSS enables eye-catching, dynamic effects. Adobe demonstrated a few. With vertex shaders, it created web page elements that curve like pages or ripple like flags. Because the shaders operate on HTML content, that means shader-controlled surfaces can contain ordinary elements including forms, Scalable Vector Graphics (SVG) and HTML5 video. CSS already has some 3D animation effects, but the shaders work would make the technology programmable for free-form control. The technology looks well suited for use in Adobe’s Edge software for creating dynamic web pages. Adobe said future preview versions of Edge will add better “expressivity”, and CSS shaders would serve that end. The company is developing CSS shaders with WebKit, the browser engine used in Apple’s Safari, Google’s Chrome and Adobe’s AIR technology. It also wants to standardise CSS shaders, Vincent Hardy, principal scientist of web standards at Adobe and the person who proposed the standard, said in a blog post. “Adobe is bringing CSS shaders to the W3C as part of the FX taskforce, and our goal is to start contributing this code to WebKit as soon as the work is accepted by W3C so that web developers can start enjoying this powerful new set of filter effects soon,” Hardy said. He cautioned that Adobe’s proposed syntax for using the technology could well change.
In combination with the CSS filter effects technology, CSS shaders can let programmers animate a swipe from one colour scheme to another, in this case on a 3D surface.
Adobe is working hard to jump aboard the web-standards train. Earlier this year, it proposed CSS Regions and Exclusions technology that lets text flow around objects, overflow into different regions and be placed within specific areas. That technology has attracted some support, for example in the latest Microsoft IE10 platform preview, and stands to help build more magazine-like layouts and to design web pages more adaptable to different screen sizes. Also at its Max show, Adobe announced acquisition plans Nitobi and TypeKit, small companies that specialise in web development for mobile devices and web fonts, respectively. Adobe’s web standards-push stands to draw some attention away from Flash, Adobe’s previous preferred method for building advanced web content. Adobe remains committed to Flash, though, and last night released Flash Player 11. CSS shaders work in conjunction with a proposed CSS filter technology, which lets a computer apply present graphical transformations to content. Preset transformations include saturating colours or changing them into sepia tones, blurring or sharpening content, adding drop shadows and changing opacity.
Adobe’s CSS shaders let this Google Maps page be folded like a real map. (Screenshot by Stephen Shankland/CNET)
Adobe, though, wants to add customisable filter effects. “CSS shaders provide the flexibility and expressivity needed to create arbitrary effects — from the simplest ones to the most complex,” Hardy said. Another demo uses pixel shaders to control how a colour filter effect swipes across a page. Shaders also are a feature of WebGL, a 3D graphics technology for the web led by Firefox and the Khronos Group standards committee. WebGL graphics are contained within a region of a web page defined using HTML5’s canvas element, but Adobe said its CSS approach works with “arbitrary web content” — an entire web page, for example.  

Leave a Reply

Your email address will not be published. Required fields are marked *