Shader output antialiasing

[logoliv]

Hi all,
Just a question : is it possible to antialias a shader result ?
I guess the answer will be "no" because of the way shaders work (pixel after pixel), but perhaps is there another way to do it (without supersampling).

[vrld]

Can you clarify what you want to do? Right now your question makes little sense, because aliasing and shaders are two separate concepts: Aliasing can happen when you sample a signal (sound, image), whereas a shader is a program run on the sampled signal (the pixels).
Side note: You can use a shader to implement some anti-aliasing filter. Is that what you want to know?

[logoliv]

To be more precise, I want to make a game based on the Voronoï shader I found in the shaders thread. But my problem is the cells borders are aliased (because algorithm calculates distances strictly, without any smoothing step) and I would like to know is there is a mean to antialias the shader result afterwards.
It seems that I will have to code the cell border antialiasing in the GLSL shader itself, am I right ?

[logoliv]

up ^

Has someone an answer please ?
I've tried to draw the shader to a canvas defined with fsaa = 4 and to define t.window.fsaa = 4 in conf.lua, without success...

[micha]

Two possible solutions come to my mind:

• Your current implementation seems to construct the diagram pixel-wise. Change the code, such that for each pixel you sample four points instead of one and then average the color (instead of comparing the distance of a point (x,y) with all prescribed points, compare the distance of the four points (x +/- 0.25,y +/- 0.25) )
• Instead of a pixel-wise approach you can actually construct the polygons of the diagram and draw them with LÖVE's polygon-function. That can be done with aliasing. In this case you wouldn't need to use a shader at all. Wikipedia has some algorithms for generating the nodes of the diagram.

[logoliv]

Thanks for answer. I'm searching more a "second pass" shader that can do antialiasing on the result of the first, so that I could reuse it in many situations, not only in this particular case...

An alternative to your first solution would be to calculate the voronoi on a double size canvas and to display it at 50%, so let the canvas FSAA do the work (supersampling), but it would cost 4 times the calculation of a single pixel...

Your second solution would not be so easy, and would surely create bad artifacts at points where polygon lines overlap, plus I really want to make it using an implicit way, using my GPU power, and not doing a lot of maths...

[micha]

Thanks for answer. I'm searching more a "second pass" shader that can do antialiasing on the result of the first, so that I could reuse it in many situations, not only in this particular case...

An alternative to your first solution would be to calculate the voronoi on a double size canvas and to display it at 50%, so let the canvas FSAA do the work (supersampling), but it would cost 4 times the calculation of a single pixel...

Yes, it would cost 4 times more, but that is how antialiasing works. Antialiasing is not a method of smoothing things, but it is a method for displaying a high resolution image in a lower resolution. Wikipedia says:

In digital signal processing, spatial anti-aliasing is the technique of minimizing the distortion artifacts known as aliasing when representing a high-resolution image at a lower resolution.

That means there is no such "second pass shader" that takes an image and returns a smoothend one of the same size.

I have another idea, that is no antialiasing, but might give a similar result:
In your shader you have to calculate the distance from each pixel to all of the nodes. Then you find the nearest node and assign the color accordingly. Instead try this: First find the node with the smallest distance. And then collect all nodes, whose distance is at most 1 pixel larger than the smallest distance. If a pixel is on an "edge" then this will give you the two closest nodes. Then take the colors of all selected nodes and mix it according to the different distances.

Example: a pixel has the distances 20 and 20.6 from two nodes. We subtract a number x from both distances, such that the rest sums up to 1. In this case x = 19.8. We then get 20-x = 0.2 and 20.6-x = 0.8. So the two colors of the two nodes get mixed with a ratio of 8:2.

This is so far only an untested idea.

[Germanunkol]

I know this is kind of a hack, but since you're wanting to smooth out the results after using your first shader, why not render to canvas and then use a gaussian blur? Maybe with a blur-size of one or two pixels...

It would not be my method of choice, but you could try it, maybe it gives you what you want.

[logoliv]

Thanks Germanunkol, will try that

[logoliv]

@Germanunkol : So I tried your Gaussian Blur with blurSize = 0.0005 but the result is not as good as another FXAA antialias I've found on the net. My actual image has some "hard edges" and they're difficult to smooth...

By the way, does someone know the difference between t.window.fsaa in conf.lua and the antialias in love.graphics.newCanvas( width, height, format, fsaa) ? They don't work on images or shaders, so are they only to antialias lines and polygons ?

I also had the idea to set an antialiasing specific to Löve application in my nVidia control panel, but I think it works only in 3D with mesh edges, am I right ? (and the shader result is considered as a texture)