CSS Filters — Sydney 2016

Last updated 1 Februrary 2016

Status of CSS Filters

  1. What are the plans for getting to CR?
  2. Who is working on it?
  3. Who has implemented it?
  4. CSS Filters Level 2?

Artifacts with Lighting Filter primitives

Using the lighting filter primitives often results in unwanted artifacts.

A CSS filter is used to add a 3D effect to a shape. SVG. Banding occurs due to the use of 8 bits per channel. The filter chain uses a Gaussian blur filter on the original image to create the bump map.

Lighting filters use the alpha channel of an image for a bump map. When the input is 8 bits per channel, steps are generated in the calculation of the surface normal. Use of a 16 bit per channel bump map would greatly reduce this banding.

Red line: calculated alpha values. Black: quantized alpha values. Blue: calculated normal vectors.

This problem also exists when using an external 'bump map'. In this case, the use of 16 bit per channel PNG's would be helpful.

The use of a input image for the bump map. Left: 8 bits per channel. Right: 16 bit per channel (simulated). Red is diffuse lighting; blue is specular lighting.

Currently, the specification does not dictate the range of values. Issue 22950 is that the color values in the specification should either all be in the range 0..255 or 0..1. Require floating point values between 0 and 1 would solve this problem. The discussion in the feConvolveMatrix and feTurbulence filter primitives use the range 0..255 and would need to be changed.