纹理不但可以和颜色叠加,纹理和纹理也可以叠加。纹理叠加时需要设置透明度,我们看下公式
mix (x,y, a):返回x和y的线形叠加。a的范围0-1,结果= x*(1-a) + y * a
根据上篇文章的着色器代码,修改gl_FragColor为两个纹理的叠加
vertexShaderCode =
"uniform mat4 uMVPMatrix;" +
"attribute vec4 aPos;" +
"attribute vec2 aTextCoord;" +
"varying vec2 TextCoord;" +
"attribute vec3 aColor;" +
"varying vec3 ourColor;" +
"void main() {" +
" gl_Position = uMVPMatrix * aPos;" +
" ourColor = aColor;" +
" TextCoord = aTextCoord;" +
"}";
fragmentShaderCode =
"precision mediump float;" +
"uniform sampler2D texture1;" +
"uniform sampler2D texture2;" +
"varying vec2 TextCoord;" +
"void main() {" +
" gl_FragColor = mix(texture2D(texture1, TextCoord),texture2D(texture2, TextCoord),0.5);" +
"}";
这时就需要创建两个纹理了,
@Override
public void onSurfaceCreated(GL10 gl, EGLConfig config) {
super.onSurfaceCreated(gl, config);
Bitmap bitmap1 = BitmapFactory.decodeResource(context.getResources(),
R.drawable.image1);
Bitmap bitmap2 = BitmapFactory.decodeResource(context.getResources(),
R.drawable.image2);
imageWH = (float) bitmap1.getWidth() / (float) bitmap1.getHeight();
texture1 = OpenGLUtil.createTextureNormal(bitmap1);
texture2 = OpenGLUtil.createTextureNormal(bitmap2);
bitmap1.recycle();
bitmap2.recycle();
}
绘制时就需要传入两个纹理的索引,
@Override
public void onDrawFrame(GL10 gl) {
super.onDrawFrame(gl);
……
int textureHandle1 = GLES20.glGetUniformLocation(shaderProgram, "texture1");
//GLES20.glUniform1i(textureHandle, 0);
OpenGLUtil.bindTexture(textureHandle1, texture1, 0);
int textureHandle2 = GLES20.glGetUniformLocation(shaderProgram, "texture2");
//GLES20.glUniform1i(textureHandle, 0);
OpenGLUtil.bindTexture(textureHandle2, texture2, 1);
……
}
显示效果如下
因为两张图片的宽高比不同,而我们是用的第一张图片的宽高比为基准设置的,导致第二张图片有拉伸。想要避免这种情况,有两个方式,一是用两张宽高比相同的图片;二是修改第二张图片的纹理坐标。