Adobe

decor

Web Platform Team Blog

Making the web awesome

CSS Custom Filters Now Available Under Flag in Chrome Canary

Note: Custom Filters is no longer supported in Chrome or WebKit Nightlies.

Chrome Canary now has a flag to enable CSS custom filters. In Canary, enter “about:flags” in the address bar, find “Enable CSS Shaders”, click “Enable”, and relaunch Canary.

Then, check out our samples to explore the power of custom filters!

For an explanation of Chrome flags, check out Christian Cantrell’s video.

17 Comments

  1. September 21, 2012 at 12:38 pm, Paul Irish said:

    about:flags is slightly easier to type, btw. :)
    This feature is massive! Congrats!

  2. September 21, 2012 at 12:43 pm, Max Vujovic said:

    Thanks Paul!

    You’re right- “about:flags” is easier to type than “chrome://flags”. I’ve updated the post :)

  3. September 22, 2012 at 9:37 am, Arthur Reynolds said:

    This is amazing. However, why are the attributes of the custom filter referenced in a separate .vs and .fs files instead of being inline to the CSS?

    I would like to point out that some versions of Chrome 24 do not support this feature, and may need to update on chrome://chrome.

    • September 22, 2012 at 11:39 am, Max Vujovic said:

      Thanks Arthur!

      In OpenGL Shading Language, attributes provide information about the particular vertex that your vertex shader is processing. Often times, each vertex has a unique value for each attribute. For example, when your vertex shader processes the top left vertex in the mesh, the “a_texCoord” attribute will have a value of (0.0, 0.0). When it processes the bottom right vertex in the mesh, “a_texCoord” will have a value of (1.0, 1.0). You can think of “attributes” as “vertex attributes”. WebKit creates the mesh out of your DOM element and sets these attribute values, so you can use them in your vertex shader.

      CSS Custom Filters allow you to pass in uniform values via CSS, not attribute values. Uniforms have the same value for all vertices and fragments that your shaders process. Passing in attribute values via CSS would be a impractical, since you would have to specify a value for each vertex, and your mesh can have hundreds or thousands of vertices.

      Search for “attributes vs. uniforms in GLSL” for more info about this topic.
      Also, check out the Filter Effects spec for a list of the attributes that are available to you.

  4. September 25, 2012 at 4:38 pm, Isaac said:

    These are great, but what is the essence if they can’t be used in production?
    Everything still have to be hacked. None works in FF or IE yet these are the web standards? Strange!

    • September 26, 2012 at 10:51 am, Max Vujovic said:

      Thanks for the comment!

      > what is the essence if they can’t be used in production?

      Eventually, Custom Filters will be able to be used in production. The about flag in Chrome Canary lets you preview what’s coming in future releases of the browser.

      In the future, you’ll see Custom Filters enabled by default in Chrome and Safari. Then, you can use feature detection on your web page to determine if Custom Filters are available on the user’s browser. If they are, you can use them to enhance your page. If they aren’t, you can fall back to other techniques.

      > None works in FF or IE yet these are the web standards? Strange!

      Not yet, but that’s the end goal. Web standards are an ongoing process. The feedback loop between specification and implementation is very important and takes time. The idea is that we specify how the feature should work, then we try to actually implement it in browsers. Some things work like we expected in the specification, and others don’t work so well. Then, we go back and improve the specification.

  5. September 27, 2012 at 1:14 pm, Revision 89: Mobile, Frameworks, iOS 6 | Working Draft said:

    [...] CSS Custom Filters Now Available Under Flag in Chrome Canary [...]

  6. September 30, 2012 at 9:02 pm, CSS Custom Filters | Pranav's space said:

    [...] a copy of Chrome Canary – the nightly build with experimental features. You also need to Enable CSS shaders in the chrome [...]

  7. October 11, 2012 at 1:18 am, Brit Monkey Girl said:

    Cheers for posting. Much appreciated…

  8. February 28, 2013 at 4:21 pm, Greg Kass said:

    I’m not getting the Vertex Shader CSS transition or CSS animation examples to work in Canary. Also, if I use a 3d CSS transition will the vertex shader work with this, or are they two separate 3d environments?

    • March 01, 2013 at 10:48 am, Max Vujovic said:

      > I’m not getting the Vertex Shader CSS transition or CSS animation examples to work in Canary.

      Yeah, seems like something went wrong. We’ll take a look and fix them up once we find the issue. Thanks!

      > Also, if I use a 3d CSS transition will the vertex shader work with this, or are they two separate 3d environments?

      CSS 3D transforms and shaders can work together. Note that after your shaders run, the image is flattened, and the CSS 3D transform will apply to the flattened image. If you want to apply a 3D transform to the mesh vertices (before the image is flattened), you should apply the transform inside your vertex shader. There are some examples of this in http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/.

      • March 01, 2013 at 3:34 pm, Greg Kass said:

        Your *note* is actually the answer to my question. That is a pity that they get flattened immediately. Could it not be done otherwise? It would be nice to be able to group together different shaders plus standard elements and transform them as a group instead of calculating each one individually.

        • March 01, 2013 at 4:02 pm, Max Vujovic said:

          If I understand correctly, you’re talking about two things:
          1) Multiple shaded elements sharing the same 3D space.
          2) Chaining custom filters on one element and preserving the 3D space between the operations instead of flattening the image.

          #1 would be great, but it has some implementation challenges. The 3D intersection between multiple translucent elements (meshes) could cause visual artifacts unless the geometry was broken at the intersections and the triangles were sorted and drawn back to front. Also, shading groups of elements makes browser optimizations based on elements’ bounds very difficult.

          #2 would also be great. We could rewrite multiple shaders as one shader at the WebKit level. We could also write CSS 3D transforms into the shaders so that they operate in the same 3D space.

          If you have specific use cases you can tell us about or show us, it can really help us and the W3C define the feature to meet your use cases.

          Thanks for your input!

          • March 22, 2013 at 1:44 pm, Greg Kass said:

            I’ve put together a few cases where I built shapes using 3D elements, but for the most part, I’m always limited to using simple shapes with straight edges, such as cubes, 3D arrows, or even pyramids. My limitation is that none of the surfaces could curve in space to match an element with a curved edge, like taking two elements with border-radius of 50% and wrapping a third element on itself and combining them to make a cylinder. With shaders, it looks like you can now create that third element, but to rotate and translate the whole thing in space, you would want these elements grouped together and move them with the same transform instead of figuring out manually how the first two elements interact with the flattened third element.

            I had one case where I built a web app for iPad to be used as a marketing presentation aid, essentially a slideshow presentation with animated 3D elements using webkit 3D. One slide was a 3D bar-graph, and the bar elements were “tombstone” shaped. Building the faces, the bottom and the sides was simple, but for the curved top I had to fake flat elements using skewing and border radius’s that looked approximately correct within the limited range of movement they could transform through. My other option would have been to use a lot of 1px wide elements curved around the top. It would have helped a lot if I could have used a single curved element for the top.

    • March 01, 2013 at 3:37 pm, Michelangelo De Simone said:

      Hello Greg,

      thanks for pointing that out. I’ve just fixed that.

      • March 01, 2013 at 4:03 pm, Max Vujovic said:

        Thanks for fixing the examples, Michelangelo.

  9. June 03, 2013 at 3:02 pm, Blur This! (or Demonstrating MobileSafari’s Awesome Support for CSS3 Filter Effects) | fonicmonkey said:

    [...] one part of a complex spec. The ‘filter’ property is an easy-to-use version of a more general proposal for vertex shaders that will give web authors mind-bending power to apply effects to their [...]