All the effects of ‘Artistic’ will help you to achieve a unique look for your games. It consists of the following effects:

• One Bit, a hipster, original and versatile look using a dithering with blue noise.
• Oil Paint, transform your games into pieces of art.
• Tilt Shift, used to simulate a miniature scene.
• Color Isolation, isolates areas by color and applies effects.
• Sharpen, enhances image details.
• Tonemapper, maps HDR into LDR using different algorithms.
• Comic, simulates the printing technique used in comics and newspapers.
• Neon, synth-wave effect.
• Spark, adds bloom and ray-of-light effects.
• Radial Blur, the need for the speed.

Requirements  

All ‘Artistic’ effects are developed for ‘Universal Render Pipeline’ (or URP), which means they will not work with Built-In, or HDRP.

You will need to have URP version 12.1.11 or higher installed. If you don’t know how to do it, I recommend you to follow this official tutorial.

Using them in the Editor  

Once installed, you have to add the effect you want to use from ‘Artistic’ as a ‘Render Feature’. This official tutorial tells how to do it.

Remember that the camera you are using must have the ‘Post Processing’ option enabled.

VR  

To increase compatibility with VR devices, I recommend that you select ‘Stereo Rendering Mode’ in ‘Multi Pass’ mode:

Using them in code  

Once you have added the effect in the Editor, you can also handle ‘Artistic’ effects by code.

First you must add the corresponding namespace. They are all of the style ‘FronkonGames.Artistic.XXXX’, where XXXX is the name of the effect. For example, if the effect you want to use is ‘One Bit’ the code would be:

using FronkonGames.Artistic.OneBit;

To modify any of the effect parameters, you must first request its settings. In the following example we change the intensity of the effect by half.

OneBit.Settings settings = OneBit.GetSettings();

settings.intensity = 0.5f;

If you are using an effect other than ‘OneBit’ just change it to its name. Check the source code comments for more information.

One Bit  

Get a distinctive look with ‘One Bit’, an original and versatile effect that uses a special type of dithering algorithm based on Blue Noise, similar to that used at the award-winning ‘Return of the Obra Dinn’.

Once installed, when you select your ‘Universal Renderer Data’, you will see something like this:

With ‘Intensity’ (1) you can control the intensity of the effect. If it is 0, the effect will not be active.

‘Edges’ (2) makes it remarked more the edges and ‘Noise’ (2) affects the amount of noise that will appear on the screen. You can change the random seed used to generate the noise with ‘Seed’.

‘Blend’ (4), specifies the formula used to mix the original color of the screen with the effect. They are very similar to those you can find in ‘Photoshop’. With ‘Color’ you can change the way a color (or several) effects the final result. The simplest is ‘Solid’ and its ‘Color’ parameter tints the image. Other modes are ‘Horizontal’, ‘Vertical’ and ‘Circular’ and use two colors in a gradient in different directions.

‘Gradient’ is another mode that uses the brightness of the original pixel to replace it in a color gradient. So the leftmost colors of the gradient would be used for the darker areas of the image and the rightmost colors would be used for the brighter areas. Click on the gradient to modify it to your liking. If the gradient you use does not have dark colors, the result may be too bright, and vice versa. You can modify the brightness range used with ‘Luminance’.

Click on ‘search’ to open the color palette search tool.

Just find a palette you like and click the ‘Use’ button.

In 6, 7 and 8 you can modify the color range in each channel. Small values in these fields can create a ‘retro’ effect.

When ‘Invert’ (9) is activated, the color is inverted.

Oil Paint  

Transform your games into pieces of art in a very easy way. Once installed, when you select your ‘Universal Renderer Data’, you will see something like this:

With ‘Intensity’ (1) you can control the intensity of the effect. If it is 0, the effect will not be active.

Oil Paint provides you with a wide variety of algorithms (2) to choose from to best suit your needs. They are as follows:

• Kuwahara Basic: the simplest and fastest based on the algorithm created by Michiyoshi Kuwahara.
• Kuwahara Generalized: a version that fixes some problems of the previous one, based on the work of Acerola.
• Kuwahara Directional: a Sobel filter is added to improve the denoising process.
• Kuwahara Anisotropic: improves the quality in the smallest details, based on the paper ‘Image and Video Abstraction by Anisotropic Kuwahara Filtering’.
• Tomita-Tsuji: a steroid version of Kuwahara’s algorithm, with the best visual results but with a performance decrease.
• Symmetric Nearest Neighbour: another smoothing algorithm designed to preserve image edges. Much more efficient than the previous ones.

Depending on the selected algorithm, you will see different parameters although all of them have ‘Passes’. This parameter specifies the number of passes of the algorithm to be performed. If it is 1, the algorithm will only run once per pixel.

If you increase the value, the effect will be greatly enhanced but you will multiply the cost of the effect. I only recommend that the value be greater than 1 if you are going to use it on powerful hardware (consoles and PC).

You can add an extra algorithm to better define details with ‘Improve details’ (3): Emboss and Sharpen. Note that adding this algorithm creates an additional pass and therefore lower performance.

Still not enough? Raise the value of ‘Water Color’ (4) to add an water color paint effect to the image.

If you need more control, activate ‘Process depth’ (5).

With ‘Depth curve’ (1) you can adjust the intensity of the effect depending on the depth. In the values of the example you can see that the effect would have the maximum intensity except in the farthest areas it would tend to 0. With this you can avoid that small details in the background of the scene disappear because of the effect. You can also adjust the intensity of the curve with ‘Depth power’ (2).

Adjusting these two parameters can be complicated by not being able to see clearly how the curve varies. Activate ‘View depth curve’ (4) and you will see that the areas with the most intense effect are warmer and the areas with the least are cooler.

Don’t want the effect to be applied to the sky? Disable ‘Sample sky’ (3).

Tilt Shift  

Used to simulate a miniature scene, something very used in cinema as in the race scene of ‘The Social Network’. Once installed, when you select your ‘Universal Renderer Data’, you will see something like this:

With ‘Intensity’ (1) you can control the intensity of the effect. If it is 0, the effect will not be active.

You can modify the angle (2), aperture (3) and offset (4) of the effect. Also the blur intensity (5) and distortion (6).

You can also modify certain color parameters in the ‘focused’ (7) area (where the effect is not applied) and in the ‘unfocus’ (8) area.

In order to better adjust these parameters, you can activate ‘Debug’ (9) to better see how the effect is applied. With this parameter activated, the areas with more intensity of the effect will be tinted red, and those with less intensity will be tinted blue.

Color Isolation  

Isolates areas by color and applies effects. Once installed, when you select your ‘Universal Renderer Data’, you will see something like this:

With ‘Intensity’ (1) you can control the intensity of the effect. If it is 0, the effect will not be active.

The first thing to do is to set the color you want to isolate, using ‘Isolated color’ (2). You can adjust the sensitivity with ‘Threshold’, to be more or less strict when filtering colors.

‘Color Isolation’ translates the image into the CIELAB color space, in order to more accurately differentiate colors. You can adjust the parameters that are used:

• L*: luminosity.
• a*: green-magenta axis.
• b*: blue-yellow axis.

Once you have isolated the color you want, you can apply different effects to both the ‘Isolated zone’ (3) and the ‘Not isolated zone’ (4).

Sharpen  

Enhances image details using different algorithms. Once installed, when you select your ‘Universal Renderer Data’, you will see something like this:

With ‘Intensity’ (1) you can control the intensity of the effect. If it is 0, the effect will not be active.

The first thing is to select the algorithm (2) that gives you the best result. They are as follows:

• Luma, it applies a blurring effect to the original pixel by incorporating the neighboring pixels, and subsequently, it subtracts this blur to enhance the image’s sharpness. Is similar to using Unsharp Mask in Photoshop.
• Contrast Adaptive, dynamically regulates the sharpening intensity on a per-pixel basis to achieve a uniform level of sharpness throughout the entire image.

From the first algorithm, ‘Luma’, you can choose between different patterns:

• Fast, only two texture fetches. Faster but slightly lower quality.
• Normal, four texture fetches.
• Wider, four texture fetches, less sensitive to noise but also to fine details.
• Pyramid, four texture fetches, diamond-shaped. A slightly more aggresive look

Once you have chosen the algorithm that best suits your needs, you can adjust the intensity of the effect with ‘Sharpeness’ (3) and the radius of each sample pattern (4).

You can also increase the contrast of the colors with ‘Vibrance’ (5).

To view in which areas of the image the effect is applied, activate ‘Debug view’ (6).

Tonemapper  

Maps wide range colors (HDR) into low dynamic range (LDR) using different algorithms. Once installed, when you select your ‘Universal Renderer Data’, you will see something like this:

With ‘Intensity’ (1) you can control the intensity of the effect. If it is 0, the effect will not be active. These are the operators (2) included:

• Linear: Good old linear.
• Logarithmic: logarithmic mapping
• Exponential: exponential mapping.
• Simple Reinhard: simple and fast Reinhard.
• Luma Reinhard: Reinhard based on luminance from “Photographic Tone Reproduction for Digital Images”.
• Luma Inverted Reinhard: Reinhard based on inverted luminance, by Brian Karis.
• White Luma Reinhard: Reinhard based on luminance, but white preserving.
• Hejl 2015: ACES-liked, by Jim Hejl.
• Filmic: filmic tonemapping.
• Filmic Aldridge: variation of the Hejl and Burgess-Dawson filmic curve by Graham Aldridge.
• ACES: From ‘ACES Filmic Tone Mapping Curve’ by Narkowicz.
• ACES Oscars: Pastel hue function, designed to provide a pleasing albedo.
• ACES Hill: ACES curve fit by Stephen Hill (@self_shadow).
• Lottes: From “Advanced Techniques and Optimization of HDR Color Pipelines” by Timothy Lottes.
• Uchimura: Used in Gran Turismo. From “HDR theory and practice” by Uchimura.
• Unreal: Adapted to be close to ACES curve by Romain Guy. Used in Unreal Engine 3 up to 4.14.
• Uncharted 2: Created by John Hable for ‘Uncharted 2’ (based on Haarm-Pieter Duiker’s works in 2006 for EA).
• Watch Dogs: Used in ‘Watch Dogs’ by Ubisoft.
• Piece-Wise: ‘Piece-Wise Power Curve’ by John Hable at Epic Games.
• RomBin Da House: By tech art Roman Galashov (@RomanGalashov).
• Oklab: Oklab-based.
• Clamping: Clamps everything above a given luminance threshold to 1, by Schlick.
• Max 3: From ‘Optimized Reversible Tonemapper for Resolve’, by Timothy Lottes.
• Max 3 Inverted: Inverted luminance.

Each operator can also have some extra parameters that will appear under it.

You can also modify the final color with the parameters offered by ‘Color filter’ (3) and its ‘Lift’ (4), ‘Midtones’ (5) and ‘Gain’ (6).

Comic  

Simulates the printing technique used in comics and newspapers: halftone. Once installed, when you select your ‘Universal Renderer Data’, you will see something like this:

With ‘Intensity’ (1) you can control the intensity of the effect. If it is 0, the effect will not be active.

The scale of the points can be modified with ‘Scale’ (2). The operation used to blend the color of these points with the original image can be adjusted with ‘Color blend’ (3).

To increase the feeling of seeing a comic book, you can add a stroke effect with ‘Edge’ (4).

If you want to finely adjust the angle of each color point, you can modify it with ‘CMYK pattern’ (5).

Neon  

Neon synthwave effect highlighting the edges of the image with cycling colors. Once installed, when you select your ‘Universal Renderer Data’, you will see something like this:

With ‘Intensity’ (1) you can control the intensity of the effect. If it is 0, the effect will not be active. You can control the edge strength with ‘Strength’ (2). The thickness can be adjusted with ‘Radius’ (3).

With ‘Blend’ (4) you can change how the original image and the effect are blended, using formulas very similar to those used by Photoshop.

Additionally you can apply a deformation to the effect with ‘Fisheye’ (5). If the value is positive a fisheye effect will be applied and if negative an anti-fisheye effect will be applied.

You may want the effect to become less intense as you move away from the camera. Activate ‘Process depth’ (7) and adjust ‘Depth power’ to achieve this. If you also want it to affect the sky, turn on ‘Sample sky’.

Spark  

Adds bloom and ray-of-light effects to the brightest areas. Once installed, when you select your ‘Universal Renderer Data’, you will see something like this:

With ‘Intensity’ (1) you can control the intensity of the effect. If it is 0, the effect will not be active.

In the ‘Rays’ section (2) you can adjust everything related to the rays generated by the effect. From their size, intensity, color and angle, to the operation used to blend them with the original image.

In ‘Barrel’ (3) you can control the deformation of the rays and with ‘Dispersion’ (4) you can simulate a chromatic shift of their colors.

Add more smoothness to the shape of the rays with ‘Blur’ (5), but remember that very high values may affect performance. You can also add some noise with ‘Dirt’ (6).

If you want to better adjust at what brightness level rays start to be generated, use ‘Threshold’ (7).

Although it will decrease the quality of the effect, you can increase the performance of the effect by choosing other values for ‘Down sample’ (8). This may generate some annoying glitches in the brightness, you can mitigate them by using ‘Artifacts’ (9).

Radial Blur  

Increases the feeling of speed and adrenaline! Once installed, when you select your ‘Universal Renderer Data’, you will see something like this:

With ‘Intensity’ (1) you can control the intensity of the effect. If it is 0, the effect will not be active.

Change the origin of the effect with ‘Center’ (2), where (0, 0) is the center of the screen.

The quality depends directly on the number of ‘Samples’ (3) you use. The higher the number, the better the quality, the lower the number, the better the performance. By adjusting the ‘Density’ (4) and ‘Falloff’ (5) values correctly you can lower the number of samples.

In addition to the radial blur effect, another chromatic aberration effect (also radial) is used. Adjust how it affects each color channel with ‘Offset’ (6).

A screen warping effect is also added with ‘Fisheye’ (7). With negative values the deformation will be inward and with positive values outward.

You can also apply color effects to the inner zone, ‘Inner’ (10), where less effect is applied and to the outer zone, ‘Outer’ (11), where more effect is applied. The zones can be modified with ‘Gradient power’ (8) and ‘Range’ (9).

Misc  

All effects have a panel, ‘Color’, in which you can modify the final color of the effect.

They also have an ‘Advanced’ panel with these options:

Activate ‘Affect the Scene View?’ (1) if you want the effect to be applied also in the ‘Scene’ window of the Editor. With ‘Filter mode’ (2) you can change the type of filter used.

Although it is not recommended to change it, with ‘RenderPass event’ (3) you can modify at which point in the render pipeline the effect is applied. Finally, activate ‘Enable profiling’ (4) to show in the ‘Profiling’ window the metrics of the effect.

F.A.Q.  

How to make the effect also affect the UI?  

In order for the UI not to be affected by the effect, you should set the ‘Render Mode’ of your canvas from ‘Screen Space - Overlay’ to ‘Screen Space - Camera’ and dragging your camera with to ‘Render Camera’.

Note that when you make this change, the coordinates of your UI will be in camera space, so you will have to change them.

When Bloom is added, its intensity is too low or the effect stops working.  

Bloom’s URP Unity effect is not compatible with postprocessing effects based on ScriptableRendererFeature (like this one).

You will have to add your own one based on ScriptableRendererFeature or you can use this one at no cost ;)

Can I use it in a material?  

Yes! Any effect can easily be used on a material. Just follow these steps:

• In the ‘Project’ window, open the ‘Create’ menu with the right mouse button and select ‘Create > Render Texture’.
• Create a new camera and in ‘Output Texture’ select the Render Texture previously created. Remember to activate ‘Post Processing’ and select in ‘Renderer’ where you have the effect added.
• In the material you want to use, select in ‘Base Map’ the Render Texture.
  
  

Support  

Do you have any problem or any suggestions? Send me an email to fronkongames@gmail.com and I’ll be happy to help you.

Remember that if you want to inform me of an error, it would help me if you sent to me the log file.