2

I am doing some game-related rendering with Silverlight, and when I attach a pixel shader to an image that has a (rotational) transformation, I am seeing a strange, fuzzy, pixelation effect.

Here is a screenshot of the problem. The image on the left has just a transformation. The image on the right has a transformation and a pixel shader.


(source: andrewrussell.net)

You can see this in action here on my blog (click the Silverlight control to add the pixel shader).

The pixel shader in question is the one from SilverSprite used to tint an image's colour. You can view its source code here.

The transformation I am applying is a MatrixTransform (with a hand-calculated translate, scale, rotate matrix). The problem appears when rotating the image.

The element that both the shader and the transform are being applied to is an Image that is added to a Canvas in code. The Image's ImageSource is a WriteableBitmap but the effect also happens with a BitmapImage.

My question is: what is causing this fuzzy pixelation? and what can be done to reduce or remove it?

Community
  • 1
  • 1
Andrew Russell
  • 26,924
  • 7
  • 58
  • 104
  • This might seem an obvious question but do you get pixelation if you use the shader but __not__ the transform? – AnthonyWJones Aug 13 '10 at 17:01
  • @Anthony: Interestingly enough, yes. Although it is a lot less obvious (it doesn't "fuzz"). The output matches the original sprite pixel-for-pixel, as if its position were put through `Math.Floor`. Remove the pixel shader too, but keep using fractional positions, and then the sprite will "blend" between pixels (seems to be bilinear interpolation). – Andrew Russell Aug 14 '10 at 01:12
  • Also interesting is, if I use a scale-up transform with no rotation, then the output is the sprite with bilinear filtering - and the same whether or not a pixel shader is attached (it's probably still doing the `Math.Floor` thing mentioned above, but it's impossible to tell). If I then rotate the scaled-up sprite, then it will still get the "fuzzy" effect with the shader - but it is still at the one-output-pixel-offset scale as my original example. – Andrew Russell Aug 14 '10 at 01:21
  • More additional information: without the pixel shader, there is one GPU Enabled Surface and one Intermediate Surface. With the pixel shader there are two GPU Enabled Surfaces and one Intermediate Surface. The problem exists regardless of the enableGPUAcceleration setting. – Andrew Russell Aug 14 '10 at 11:20

1 Answers1

2

After watching this presentation from PDC09, I have a much better idea of how the rendering system in Silverlight works. This problem isn't directly addressed by the presentation, but knowing the rendering order of things helps.

The order of the rendering steps relevant to my question is: An object's children (and/or itself) are rendered, that rendering passes through the Effect and then passes through the RenderTransform.

It appears that in any case where a RenderTransform is applied to an object where that object or its children have had an Effect applied (ie: a RenderTransform that comes after an Effect in the rendering tree), that RenderTransform is done in a "low quality" mode that produces this "fuzzyness".

The solution, then, is to move the Effect to after the RenderTransform. In my case this means putting the Image on its own Canvas, applying the RenderTransform to the Image, and the Effect to the Canvas.

Andrew Russell
  • 26,924
  • 7
  • 58
  • 104