How to achieve supersampling / anti-aliasing in pixel shaders? - c#

I am trying to write a couple pixel shaders to apply to images similar to Photoshop effects. For example this effect:
http://www.geeks3d.com/20110428/shader-library-swirl-post-processing-filter-in-glsl/
But I noticed there is aliasing in the resulting image. What can I do to prevent this? I couldn't find any article that explains how to solve this. I read some techniques like rendering in high res and then downsizing the image, but I need to solve this in a pixel shader capacity. But if there is something that could help, I would appreciate it.

The WPF Shader Effect Library already has that same exact effect, along with many others. You can download the source from the link.

Related

losing quality when resizing with ImageResizer

I'm using the ImageResizer .net library. It works as expected, but one image messes around.
I've uploaded the image below. I've already tried some things like format=jpg&quality=100, only width=220, also different sizes, but it always adds this blurry border around the image.
The original image is a png.
This one is the original image:
This one is resized by the ImageResizer:
And this one is resized with photoshop:
EDIT:
If you're running into the same issue. Try to set up the SpeedOrQuality Plugin. I've set it to speed=3 and the image is sharp again.
Vector graphics require different resampling algorithms than photographs.
ImageResizer V4 includes higher quality image resampling options under the FastScaling plugin.
For graphics (non-photographic images), I suggest playing with &f.sharpen=0..100, &down.preserve=-5..5, and &down.filter=Robidoux. Make sure &fastscale=true and FastScaling is installed.
You can certainly find a good configuration for your rasterized vector art and set up a preset for it. FastScaling is capable of much better resampling than Photoshop - on par with Lightroom, in fact.
Enabling fastscaling alone helps substantially (?width=200&fastscale=true):
Adding sharpening gives a very clear result: (?width=220&fastscale=true&f.sharpen=100):
Visibly crisper than Photoshop:
Each time you save a jpeg, you loose quality (the image is reencoded).
I would recommend using the same quality as the original image was save against, it should give the best results.
Using a higher quality is not recommended as it will artificially try to improve quality, mistaking approximations done by previous encoding for details, resulting in things like the blurry border.
Aside that, usually, one should not use a quality over 95 for jpeg encoding.

Native WPF vs. Custom DirectX for displaying large images

I need to speed up my image viewer, and wondering if I should be looking into creating my own DirectX control to do so.
My image viewer displays medical images. They can be pretty large. We're talking 55mb when it comes to mammography. The pixel data is 16bit greyscale stored in a ushort array. Without getting into the gory details, my current approach is loading the pixel data into an ImageSource, and using the WPF Image control.
I've never done anything with DirectX. Is it worth diving into it? Would it be any faster than the native WPF stuff? If so how significantly? Or, should I just forget about DirectX and look into areas where I can improve my current approach?
Before somebody says so, I know WPF utilize DirectX. I'm wondering If removing the WPF layer and writing the DirectX myself will improve performance.
I have some experience drawing multi-gigabyte satellite and chart imagery. Working with imagery around 55MB should probably work okay even without trying to optimize it too much. You haven't really given enough detail to recommend one alternative over the other, so I will give my opinion on the pros and cons.
Using 2D windows APIs will be the simplest to implement and should always be fast enough if you don't need to rotate and simply want to display an image and zoom and pan around. If you treat it as one large image the performance will not be as good when you zoom out if you are drawing with halftoning to give a nice smooth image. This is because it will effectively have to read all 55mb of image every time it draws.
To get around this performance issue you can make multiple bitmaps, effectively mip-mapping your image. As you zoom out you can pick the reduced resolution image closest to the resolution you are trying to draw . If you are not familiar with mip-mapping here is a Wikipedia link:
http://en.wikipedia.org/wiki/Mipmap
Implementing it with DirectX will be 10x as difficult. Different graphics hardware has different maximum texture sizes. Most likely you will need to break your image up in to multiple textures to draw and you will also have to keep track of render states, viewing matrices, etc.
However, if you do use DirectX, you can implement lots of real-time photo adjustments You can do real-time rotation by simply adjusting view matrices. You can do real-time contrast, brightness, gamma, and sharpness easily in a pixel shader.
There are two other API's I might suggest. If you are willing to limit yourself to Vista or later then Direct2D would be a little simpler than Direct3D. Also if you ever will need to implement it on a non-windows platform I would suggest using OpenGL instead. My current project is in Direct3D because a few years ago when we started it OpenGL was falling behind and I didn't forsee the popularity of Android devices. I now wish we had used OpenGL instead.
Try profiling to see where WPF is spending its time. Are you displaying the images at their native resolution? If not it might be worthwhile to do some preprocessing and create 1/2 resolution versions.

Marking an interest point in an image using c++

I have a bitmap image like this
My requirement is to create a GUI to load the image and for changing the contrast and other things on the image and algorithm to mark the particular area in silver colour as shown in the fig using C++ or C#.I am new to image processing and through my search I have found out that I can use the Histogram of the image for finding the required area.These are the steps.
Get the histogram
Search for intensity difference
Search for break in the line
Can someone suggest me how can I proceed from here.Can I use Opencv for this or any other efficient methods are available..?
NOTE:
This image have many bright points and the blob algorithm is not successful.
Any other suggestions to retrieve the correct coordinates of the rectangle like object.
Thanks
OpenCV should work.
Convert your input image to greyscale.
adaptiveThreshold converts it to black and white
Feature detection has a whole list of OpenCV feature detectors; choose one depending on the exact feature that you're trying to detect.
E.g. have a look at the Simple Blob Detector which lists the basic steps needed. Your silver rectangle certainly qualifies as "simple blob" (no holes or other hard bits)
If all of your pictures look like that, it seems to me not complicate to segment the silver area and find its centre. Basically you will need to apply these algorithms in the sequence below:
I would suggest binaryze the image using Otsu adaptive threshold algorithm
Apply a labelling (blob) algorithm
If you have some problem with noise you can use an opening filter or median before the blob algorithm
If you end up with only one blob (with the biggest area I guess) use moment algorithm to find its centre of mass. Then you have the X,Y coordinate you are looking for
These algorithms are classical image processing, I guess it wouldn't be hard to find then. In any case, I may have they implemented in C# and I can post here latter in case you think they solve your problem.
May be a research on Directshow, a multi media framework from Microsoft will help you to accomplish your task.

How do you change the color of an Image in WPF?

I have a .png image that's just white-on-transparent, and I'm wondering if there's an easy way to make that green-on-transparent, red-on-transparent, etc so I don't need to make separate .png files for each color.
Take a look at these CodeProject Articles
Image Processing Lab
ImageMagic-WPF Image Color Spaces
Image Processing Lab is a simple tool for image processing, which
includes different filters and tools to analyze images available in
the AForge.NET framework.
You could also take a look at the FormatConvertedBitmap, ColorConvertedBitmap or WritableBitmap Class's
For a simpler solution that doesn't require pulling in huge libraries and lets you understand what's going on under their hood (and thus gives you greater flexibility), learn how to use WPF Pixel Shaders (google it).
Then you can use something like the multiply shader here: http://rakeshravuri.blogspot.com/2008/08/blending-modes-in-wpf-using.html

Detect Quadrilateral points in high contrast image

I need to detect points of quadrilateral in a pretty high contrast image. I understand how I can detect large changes in contrast between 2 pixels, but I'm wondering what would be the best way to detect entire boundaries and corners of a quad in an image.
So I'm basically looking for a good article/algorithm which explains/does this. Note I've seen articles which detect edges but don't actually turn these into vector-based lines. It's the corner points I'm really after! :)
The Hough Transform is a very useful algorithm for your task. Here are a few links: 1) wikipedia, 2) more detailed with examples -- but on solid shapes, 3) an example using points.
Have a look at AForge- it's got great computer vision capabilities that you can build on, and it's open source to boot, so even if it doesn't do what you want out of the box, you can get some ideas.
Use Corner detection techniques, like Harris's or SUSAN. OpenCV could help you.

Categories

Resources