X

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.

Stephen Shankland Former Principal Writer
Stephen Shankland worked at CNET from 1998 to 2024 and wrote about processors, digital photography, AI, quantum computing, computer science, materials science, supercomputers, drones, browsers, 3D printing, USB, and new computing technology in general. He has a soft spot in his heart for standards groups and I/O interfaces. His first big scoop was about radioactive cat poop.
Expertise Processors, semiconductors, web browsers, quantum computing, supercomputers, AI, 3D printing, drones, computer science, physics, programming, materials science, USB, UWB, Android, digital photography, science. Credentials
  • Shankland covered the tech industry for more than 25 years and was a science writer for five years before that. He has deep expertise in microprocessors, digital photography, computer hardware and software, internet standards, web technology, and more.
See full bio
Stephen Shankland
3 min read
 
Adobe's CSS shaders technology permits Web pages--including text, graphics, animation, and video--to be placed on curved 3D surfaces.
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. screenshot by Stephen Shankland/CNET

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 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.

In combination with the CSS filter effects technology, CSS shaders can let programmers animate a swipe from one color scheme to another, in this case on a 3D surface.
In combination with the CSS filter effects technology, CSS shaders can let programmers animate a swipe from one color scheme to another, in this case on a 3D surface. screenshot by Stephen Shankland/CNET

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.

Related stories
• Adobe buys PhoneGap, TypeKit for better Web tools
• Adobe: We've got the Touch for tablets
• Adobe sharpens Edge for advanced HTML
• Adobe fights back with Flash 11
• Adobe's Web design work lands in WebKit browser

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 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 Flash Player 11.

Adobe's CSS shaders let this Google Maps page be folded like a real map.
Adobe's CSS shaders let this Google Maps page be folded like a real map. screenshot by Stephen Shankland/CNET

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.