Direct3d improvement: Using HLSL Programming to Implement Photoshop filter effect-watercolor

Real watercolor effects are difficult in shaderImplementationIt needs to perform some operations such as median filtering and then accumulate, and also needs to deal with the concept of strokes in. This article bypasses these concepts and only simulates the feeling of watercolor painting from the visual effect.

One of the biggest features of Watercolor Painting is that it will flow on the paper and then mix with the surrounding color. Another feature is that watercolor usually forms a color block, and the transition is not as smooth as the photo. In view of these two features. You can design suchAlgorithmTo simulate the effect of watercolor painting.

First, we simulate diffusion. In short, we can randomly sample neighboring pixel points to simulate color diffusion. The size of this random area is called the intensity of diffusion. In C ++CodeIt should be very easyImplementationThe reader only needs to use the random function. However, HLSL does not provide such a function (it seems that there is a noise function, but l cannot be used ). What should we do? We can use the noise texture method to calculate a random number array of N * n in advance and pass it as a texture to pixel shader so that we can obtain the random number in pixel shader. After obtaining the random number, we can map the random number to the offset value of the texture coordinate to simulate the color diffusion. The typical noise texture is like this:

Figure: Noise texture

Next, process the color block and quantify the RGB values of the color. The RGB component is quantified from the original 8-bit to a lower bit value. In this way, the color transition will appear less smooth, but will show a certain color block effect.

After the above two steps, the image still has a lot of details, especially the noise produced by the first step. These high-frequency noise elements are filtered out in a smooth and fuzzy manner.

After the algorithm is designed, let's take a look at how we can implement this algorithm in rendermonkey.

Similar to the previous effect, we need two passes to complete this algorithm. The first pass is called flow pass, which simulates the flow of colors and processes the quantization of colors. The second pass is the Gauss pass algorithm mentioned above. The focus of implementation is the first pass.

A rendertarget is also required in the pass to simulate diffusion to save the result for subsequent processing. Then, a noise texture is required to generate a random number. The Code is as follows:

The _ quatlevel in the code is used to represent the number of quantified bits of the image. The smaller the value, the more obvious the color block. The reasonable value range is 2-6. _ Waterpower indicates the color diffusion range of the image, and the value range is between 8 and 64.

The following figure shows the watermarked image:

Figure: Watercolor effect. The number of bits in the left image is 6 bits, and the diffusion range is 20 pixels.

Quantifies the number of bits to 5 and the diffusion range is 40 pixels.

LSummary

GPU for digital image processing, or even using GPU for digital video editing, is currently a very popular topic. Many commercial products have emerged in the market, such as imotion of Mac companies, it is a video NLE software that fully uses GPU acceleration. The imotion author's comment on it is: play with the images in real-time. This article briefly introduces the application of HLSL in the field of image processing, hoping to open some clouds for readers. Based on the filter effects described above, readers should have a general understanding of some basic steps and methods for using HLSL for digital image processing. For convenience, instead of storing the processed image, we only display the processed image on the screen. In fact, the processed image can be saved in renderermonkey, we can create a large rendertarget such as images. And draw the result of our processing to this rendertarget (for how to set the current rendertarget and how to set multiple rendertargets, leave it to readers for exploration ), then, select the rendertarget in the rendermonkey workspace and choose Save to image from the context menu.

C ++, basic, and even the current HLSL/glsl. They are all languages. It is very simple to fully understand these languages and be familiar with their features. However, how to give full play to their roles and use them to do meaningful things lies in our own practices and creativity in practice. If the reader can create more and more practical results in practice. It is even used in commercial products.

Finally, I have to mention a lot of knowledge about signal processing and mathematics. It can be seen that spending more time on mathematics is very worthwhile.

Note: It is easy to read and the code in this article has not been optimized.