Adobe brings programmable 3D pizazz to the Web
With CSS shaders, Adobe hopes to bring dynamic, programmable 3D graphics effects to Web content. Apple and Opera back the proposed standard.
Now that the Web-standards bug has bitten Adobe Systems, the company is starting to produce some very interesting new technology.
The newest example, revealed at the Adobe Max show this week, are CSS shaders.
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.
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 fragment shaders, which control pixel colors. CSS shaders employ both ideas.
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 infor 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. And it wants to standardize 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 task force, 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.
Adobe is working hard to jump aboard the Web-standards train. Earlier this year, it proposedtechnology 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,, small companies that specialize 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.
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 colors or changing them into sepia tones, blurring or sharpening content, adding drop shadows, and changing opacity.
Adobe, though, wants to add customizable 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 color filter effect swipes across a page.
Shaders also are a feature of WebGL, a 3D graphics technology for the Web led by Firefox and 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.