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.
Border shaders
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_vertex.shader
and border_fragment.shader
files. Define them as follows.
The border_vertex
shader is identical to the unlit_tex_vertex
shader that we were using.
File: res/raw/border_vertex.shader
uniform mat4 u_MVP; attribute vec4 a_Position; attribute vec2 a_TexCoordinate; varying vec3 v_Position; varying vec2 v_TexCoordinate...