[PNG] Example of combined images (use-case for generic image data)

Hello everyone,

I found a good online example of how game devs combine multiple images for
those who aren't familiar and benefit from seeing it in motion.

https://cpetry.github.io/NormalMap-Online/

Above the center picture in that link, you can click the buttons labeled
Normal, Displacement, AmbientOcc, and Specular. These 4 images are clearly
similar but contain different information. When combined together, they are
used to produce the image you see on the right spinning cube.

Above the spinning cube are checkboxes to enable/disable those 4 images.

The important things to note here are those 4 images all contain image-like
data and are really part of a bundle. It would be weird for them to be
separate.

For completeness sake,
- This is really a tool to generate those 4 images. It isn't supposed to be
a demo.
- As such, it uses the 1 "HeightMap" image you see to the left to generate
those 4 images.
- If you click "Pictures" above the left image, it now needs 4 images of
the same thing lit from different directions to generate those original 4
images.
- Both "HeightMap" and "Pictures" are missing the diffuse texture, which is
the thing we are most familiar with. (That is the result of this being a
generation tool, not really a demo.)
- You cannot always generate this content on the fly like this tool does
(which is why the tool exists). Sometimes the 3d modelling software
generates it for you. Sometimes the artist paints it by hand.


Notice at the bottom center, once you have generated those 4 images, you
can download them as 4 separate PNGs/JPGs/TIFFs.