Texture blending shader

Does anyone know a good way of blending two textures together. I am working on making a tiled terrain mesh in 3D. Right now I am using a mix shader were I use 3 pictures. The first and second image are the images I want to blend together. The third image is the blending image were I use its red value as the mix amount. My terrain mesh has 12800 triangles and 38400 vertecies. The thing is. It is really slow. I am getting around 30 fps on the new iPad Pro 9.7in.

This is what I have so far:

// A basic fragment shader

//Default precision qualifier
precision highp float;

uniform lowp sampler2D texture;

uniform lowp sampler2D texture2;
uniform lowp sampler2D blendtexture;

varying lowp vec4 vColor;

varying highp vec2 vTexCoord;

void main()
    lowp vec4 col1 = texture2D(texture,vTexCoord);
    lowp vec4 col2 = texture2D(texture2,vTexCoord);
    lowp vec4 col3 = texture2D(blendtexture,vTexCoord);
    gl_FragColor = mix(col1, col2, col3.r);

Does anyone have a good blending shader?

I want it to do something like this:


If you want a uniform blend, eg 80% of image A and 20% of image B, there is a shader in the built in shader lab that does this. Essentially, you only need to pass a float uniform variable giving the percentage mix, plus the two images, ie no need for a third image.

I’ve done this by blending according to an attribute I wasn’t using (color I think I used). I moving house this weekend, but on Monday I should be able to work out which box I put the iPad in and share some code

Your shader doesn’t look too bad, if instead you have a simple color shader (ie no textures, just sets a fixed color) does the performance improve? I’m wondering if the issue is your large terrain mesh and the performance across that rather than the teturing.

If so, then what’s it drawing? Is a bunch of your terrain off screen? there are then a bunch of approaches that could be used to reduce the amount of mesh that is being processed…