W3C home > Mailing lists > Public > public-fx@w3.org > October to December 2012

[filters] Request: Support for convolution in CSS Shaders

From: Roy Williams <royw@fb.com>
Date: Fri, 12 Oct 2012 01:26:19 +0000
To: "public-fx@w3.org" <public-fx@w3.org>
Message-ID: <81F2750821530646B544C7FFAE363F445559F6@SC-MBX01-1.TheFacebook.com>
Lots of effects like reflections or distortions, etc... require
sampling from different locations in a texture to get the desired effect.
Effects like Blurs or edge detection require convolution.  When I first
heard about CSS Filter Effects and sat down with the code, I tried to
implement a water ripple originating from where the user clicked.  I found
I was unable to do so with the current spec, I wasn't able to distort the element I was styling.

Convolution is a superset of modifying the sample location, so I would
propose adding two (maybe 3?) new output parameters from the fragment
shader,

vec2[KERNEL_SIZE] css_SampleOffsets (css_SampleLocations?)
and
float[KERNEL_SIZE] css_SampleWeight
(maybe mat4[KERNEL_SIZE] css_SampleColorMatrix as well?)

The first, css_SampleOffsets, would contain the offsets (or absolute
locations?) into the texture to sample from. css_SampleColorMatrix would
have the same functionality as css_ColorMatrix, but applied to each
sample. css_SampleWeights would contain the weight with which each sample
should contribute to the final color. Finally, css_SampleWeight would be
used to weigh each sample.

The actual fragment shader executing would look something like:

void main() {
  shaderMain();
  float totalWeight = 0;
  vec4 sum = vec4(0.);
  for (int i = 0; i < KERNEL_SIZE; ++i) {
    sum += css_SampleColorMatrix[i] *
    texture2D(tex, css_SampleLocations[i]) * css_SampleWeight[i];
    totalWeight += css_SampleWeight[i];
  }
  multColor = css_ColorMatrix * (sum / max(totalWeight, 1.));
}

This doesn't seem like it would disclose any additional information nor
does it seem like it could be exploited by a timing attack, but it would
greatly expand the kinds of effects you can achieve with the shader.

I'd make css_SampleColorMatrix optional. There are a large number of
effects that would default to the identity matrix, and it would be
wasteful to use all of that additional memory.  If there aren't an effects
that would need this kind of functionality, I wouldn't bother with it.

Thanks,

Roy Williams
Software Engineer, Facebook
royw@fb.com
Received on Tuesday, 16 October 2012 13:39:52 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 16 October 2012 13:39:52 GMT