Putting a border frame on the image
Pictures look best in a frame. Let's add one now. There are a number of ways to accomplish this, but we are going to use shaders. The frame will also be used for the thumbnail images and will enable us to change colors to highlight when the user selects an image. Furthermore, it helps define a region of contrast, which ensures that you can see the edge of any image on any background.
We can start by writing the shader programs which, among other things, define the variables they will need from the
Material object that uses it.
If necessary, create a resource directory for the shaders,
res/raw/. Then, create the
border_fragment.shader files. Define them as follows.