How to create lighting and shadow effects using PNG images

Watch this video tutorial about how to make lighting effects using PNG images.

How GPU sorts the geometry with such material:

The main disadvantage of this approach is that the GPU cannot accurately sort the geometry with such material. The sorting is not done pixel by pixel, but by the coordinates of the centers of the objects (Pivot). Whose pivot is closer to the camera, that object will be drawn first on top of the others - like layers in 2D graphical editors.

Cutout mode:

An alternative option is Cutout mode which assigns Cutout material. It has no sorting problems, but it does not support the texture semi-transparency effect. This material can either only display geometry, or not based on data from the texture.

Applicable for when you want to add detail, but without changing the geometry and increasing the number of triangles. A classic option for games is leaves on trees, grass, sprites and icons. Handy for interfaces, like imitating UI with rounded corners, 2D icons, etc.

Differences between Cutout and Default transparent materials are:
  • Cutout material cannot have partially transparent areas. Everything will be either fully opaque or fully transparent.

  • The graphical sorting problems normally associated with Transparent shaders do not occur when using this shader.

This material uses an alpha channel contained in the Base Texture(Only for PNG) to determine the transparent areas. If the alpha contains a blend between transparent and opaque areas, you can manually determine the cutoff point for which areas will be shown. You change this cutoff by adjusting the Alpha slider in the Color tool.

For example, this can be used when creating a progress bar. By changing the alpha value for such an image with Cutout material, you can create different states of the progress bar.

Apply materials to images:

Experiment with different materials and apply them to your images to achieve different results.

Last updated