我们基于前面四边形的例子，给四边形贴个图
screenshot-1550647708208.jpg
文理坐标
纹理的坐标是屏幕左下角
{
0.0f, 0.0f, // 左下角
1.0f, 0.0f, // 右下角
1.0f, 1.0f ,// 左上角
0.0f,1.0f //右上角
}
文理坐标
然后看下文理创建的方法
private fun genTexture(bitmap: Bitmap): Int {
var textureId = IntArray(1)
GLES30.glGenTextures(1, textureId, 0)
GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, textureId[0])
GLUtils.texImage2D(GLES30.GL_TEXTURE_2D, 0, bitmap, 0)
//过滤方式 GL_LINEAR 线性取插值 GL_NEAREST 取最靠近
//当图片缩小时的模式
GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, GLES30.GL_TEXTURE_MIN_FILTER, GLES30.GL_NEAREST)
//当图片放大时的模式
GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, GLES30.GL_TEXTURE_MAG_FILTER, GLES30.GL_LINEAR)
//文理横轴的缩放方式 GL_CLAMP_TO_EDGE：纹理坐标会被约束在0到1之间，超出的部分会重复纹理坐标的边缘，产生一种边缘被拉伸的效果
// GL_REPEAT 重复
// GL_MIRRORED_REPEAT 镜像重复
//GL_CLAMP_TO_BORDER 边缘颜色
GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, GLES30.GL_TEXTURE_WRAP_S, GLES30.GL_CLAMP_TO_EDGE)
//文理纵轴的缩放方式
GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, GLES30.GL_TEXTURE_WRAP_T, GLES30.GL_CLAMP_TO_EDGE)
GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, 0)
return textureId[0]
}
要注意文理环绕方式和纹理过滤方式，注释里已经写清楚了
绘画时绑定下文理就能画出来了
override fun onDrawFrame(gl: GL10?) {
GLES30.glClear(GLES30.GL_COLOR_BUFFER_BIT)
esShader.use()
GLES30.glBindVertexArray(vao[0])
GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, texture)
GLES30.glDrawElements(
//图元的类型
GLES30.GL_TRIANGLES,
//定点个数
6,
//定点数据类型
GLES30.GL_UNSIGNED_SHORT,
//顶点偏移量
0
)
}
还要更换着色器
顶点
#version 300 es
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec3 aColor;
layout (location = 2) in vec2 aTexCoord;
out vec3 ourColor;
out vec2 TexCoord;
void main() {
gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);
ourColor=aColor;
TexCoord=aTexCoord;
}
片段
#version 300 es
precision mediump float;
out vec4 FragColor;
in vec3 ourColor;
in vec2 TexCoord;
uniform sampler2D ourTexture;
void main()
{
FragColor = texture(ourTexture, TexCoord);
}
这样就能显示出纹理了
学习OpenGL就是为了之后视频滤镜打基础，现在可以尝试下了
比如给箱子图片加点颜色
screenshot-1550648668524.jpg
我们改下片段着色器
#version 300 es
precision mediump float;
out vec4 FragColor;
in vec3 ourColor;
in vec2 TexCoord;
uniform sampler2D ourTexture;
void main()
{
// FragColor = texture(ourTexture, TexCoord);
FragColor = texture(ourTexture, TexCoord)* vec4(ourColor, 1.0);
}
让箱子的颜色乘以添加的颜色，这样两个颜色就混合一块了
现在才使用一个文理，我们使用两个文理来做个有趣的事情
两张图片，一张作为背景，一张作为人物，让他们一块显示
背景图
人物图
不用在于两个图片大小不一致，因为小的会放大，大的会放小，都取决于坐标。
屏幕快照 2019-02-20 下午4.14.46.png
效果就是两张图片混合一块了，很多滤镜都是通过这样做的
要实现这效果的话改下着色器就可以了
顶点
#version 300 es
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec3 aColor;
layout (location = 2) in vec2 aTexCoord;
out vec3 ourColor;
out vec2 TexCoord;
void main() {
gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);
ourColor=aColor;
TexCoord=vec2(aTexCoord.x,1.0-aTexCoord.y);
}
TexCoord=vec2(aTexCoord.x,1.0-aTexCoord.y); 这句要注意 不然图片会翻转的，因为文理是左下角 但是图片是左上角开始的
片段
#version 300 es
precision mediump float;
out vec4 FragColor;
in vec3 ourColor;
in vec2 TexCoord;
uniform sampler2D texture1;
uniform sampler2D texture2;
void main()
{
FragColor = mix(texture(texture1, TexCoord), texture(texture2, TexCoord), 0.2);
}
就是两个文理混合，mix是着色器语音的内置函数，如果第三个值是0.0，它会返回第一个输入；如果是1.0，会返回第二个输入值。0.2会返回80%的第一个输入颜色和20%的第二个输入颜色，即返回两个纹理的混合色。
看下所有代码
class MixTextureRender : GLSurfaceView.Renderer {
private val vao = IntArray(1)
private val vbo = IntArray(1)
private val ebo = IntArray(1)
private var esShader = Shader()
private var texture1 = 0
private var texture2 = 0
private var vertices = floatArrayOf(
//顶点 //颜色 //文理
0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, 1.0f,// 右上角
0.5f, -0.5f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f,// 右下角
-0.5f, -0.5f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f,// 左下角
-0.5f, 0.5f, 0.0f, 0.5f, 0.5f, 0.5f, 0.0f, 1.0f// 左上角
)
private var indices = shortArrayOf(
0, 1, 3, // 第一个三角形
1, 2, 3 // 第二个三角形
)
override fun onSurfaceCreated(gl: GL10?, config: EGLConfig?) {
GLES30.glClearColor(0.2f, 0.3f, 0.3f, 1.0f)
//vao
GLES30.glGenVertexArrays(1, vao, 0)
GLES30.glBindVertexArray(vao[0])
//vbo
GLES30.glGenBuffers(1, vbo, 0)
GLES30.glBindBuffer(GLES30.GL_ARRAY_BUFFER, vbo[0])
val vertexBuffer = DataUtil.createByteBuffer(vertices)
//复制数据到opengl
GLES30.glBufferData(
//顶点缓冲对象当前绑定到GL_ARRAY_BUFFER目标上
GLES30.GL_ARRAY_BUFFER,
//指定传输数据的大小(以字节为单位)
vertices.size * DataUtil.sizeof(GLES30.GL_FLOAT),
//发送的实际数据
vertexBuffer,
//GL_STATIC_DRAW ：数据不会或几乎不会改变。
//GL_DYNAMIC_DRAW：数据会被改变很多。
//GL_STREAM_DRAW ：数据每次绘制时都会改变
GLES30.GL_STATIC_DRAW
)
//设置顶点数组指针
GLES30.glVertexAttribPointer(
//shader中 layout(location = 0)的值
0,
//顶点属性的大小。顶点属性是一个vec3，它由3个值组成，所以大小是3
3,
//数据的类型
GLES30.GL_FLOAT,
//GL_TRUE，数据被标准化，所有数据都会被映射到0（对于有符号型signed数据是-1）到1之间。我们把它设置为GL_FALSE
false,
//步长，它告诉我们在连续的顶点属性组之间的间隔 字节单位
8 * DataUtil.sizeof(GLES30.GL_FLOAT),
//数据偏移量 这里只有顶点 位置数据在数组的开头，所以这里是0
0
)
GLES30.glEnableVertexAttribArray(0)
//设置颜色数组指针
GLES30.glVertexAttribPointer(
//shader中 layout(location = 0)的值
1,
//顶点属性的大小。顶点属性是一个vec3，它由3个值组成，所以大小是3
3,
//数据的类型
GLES30.GL_FLOAT,
//GL_TRUE，数据被标准化，所有数据都会被映射到0（对于有符号型signed数据是-1）到1之间。我们把它设置为GL_FALSE
false,
//步长，它告诉我们在连续的顶点属性组之间的间隔 字节单位
8 * DataUtil.sizeof(GLES30.GL_FLOAT),
//数据偏移量 编译前面
3 * DataUtil.sizeof(GLES30.GL_FLOAT)
)
GLES30.glEnableVertexAttribArray(1)
//设置颜色数组指针
GLES30.glVertexAttribPointer(
//shader中 layout(location = 0)的值
2,
//顶点属性的大小。顶点属性是一个vec3，它由3个值组成，所以大小是3
2,
//数据的类型
GLES30.GL_FLOAT,
//GL_TRUE，数据被标准化，所有数据都会被映射到0（对于有符号型signed数据是-1）到1之间。我们把它设置为GL_FALSE
false,
//步长，它告诉我们在连续的顶点属性组之间的间隔 字节单位
8 * DataUtil.sizeof(GLES30.GL_FLOAT),
//数据偏移量 编译前面
6 * DataUtil.sizeof(GLES30.GL_FLOAT)
)
GLES30.glEnableVertexAttribArray(2)
//vbo end
//ebo start
GLES30.glGenBuffers(1, ebo, 0)
GLES30.glBindBuffer(GLES30.GL_ELEMENT_ARRAY_BUFFER, ebo[0])
val indexBuffer = DataUtil.createByteBuffer(indices)
//复制数据到opengl
GLES30.glBufferData(
//顶点缓冲对象当前绑定到GL_ELEMENT_ARRAY_BUFFER目标上
GLES30.GL_ELEMENT_ARRAY_BUFFER,
//指定传输数据的大小(以字节为单位)
indices.size * DataUtil.sizeof(GLES30.GL_SHORT),
//发送的实际数据
indexBuffer,
//GL_STATIC_DRAW ：数据不会或几乎不会改变。
//GL_DYNAMIC_DRAW：数据会被改变很多。
//GL_STREAM_DRAW ：数据每次绘制时都会改变
GLES30.GL_STATIC_DRAW
)
//ebo end
//vao end
//shader
esShader.loadProgramFromAsset(MyApp.context, "mix_texture_vert.glsl", "mix_texture_frag.glsl")
//create texture1
var bitmap = BitmapFactory.decodeResource(MyApp.context.resources, R.mipmap.test)
texture1 = genTexture(bitmap)
//记得用完释放
bitmap.recycle()
bitmap = BitmapFactory.decodeResource(MyApp.context.resources, R.mipmap.face)
texture2 = genTexture(bitmap)
//记得用完释放
bitmap.recycle()
esShader.use()
esShader.setInt("texture1", 0)
esShader.setInt("texture2", 1)
}
private fun genTexture(bitmap: Bitmap): Int {
var textureId = IntArray(1)
GLES30.glGenTextures(1, textureId, 0)
GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, textureId[0])
GLUtils.texImage2D(GLES30.GL_TEXTURE_2D, 0, bitmap, 0)
//过滤方式 GL_LINEAR 线性取插值 GL_NEAREST 取最靠近
//当图片缩小时的模式
GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, GLES30.GL_TEXTURE_MIN_FILTER, GLES30.GL_NEAREST)
//当图片放大时的模式
GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, GLES30.GL_TEXTURE_MAG_FILTER, GLES30.GL_LINEAR)
//文理横轴的缩放方式 GL_CLAMP_TO_EDGE：纹理坐标会被约束在0到1之间，超出的部分会重复纹理坐标的边缘，产生一种边缘被拉伸的效果
// GL_REPEAT 重复
// GL_MIRRORED_REPEAT 镜像重复
//GL_CLAMP_TO_BORDER 边缘颜色
GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, GLES30.GL_TEXTURE_WRAP_S, GLES30.GL_CLAMP_TO_EDGE)
//文理纵轴的缩放方式
GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, GLES30.GL_TEXTURE_WRAP_T, GLES30.GL_CLAMP_TO_EDGE)
GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, 0)
return textureId[0]
}
override fun onSurfaceChanged(gl: GL10?, width: Int, height: Int) {
GLES30.glViewport(0, 0, width, height)
}
override fun onDrawFrame(gl: GL10?) {
GLES30.glClear(GLES30.GL_COLOR_BUFFER_BIT)
GLES30.glActiveTexture(GLES30.GL_TEXTURE0)
GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, texture1)
GLES30.glActiveTexture(GLES30.GL_TEXTURE1)
GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, texture2)
esShader.use()
GLES30.glBindVertexArray(vao[0])
GLES30.glDrawElements(
//图元的类型
GLES30.GL_TRIANGLES,
//定点个数
6,
//定点数据类型
GLES30.GL_UNSIGNED_SHORT,
//顶点偏移量
0
)
}
}
效果就是这些了
我么还可以合成颜色进去哦
屏幕快照 2019-02-20 下午4.46.44.png
void main()
{
FragColor = mix(texture(texture1, TexCoord), texture(texture2, TexCoord), 0.2)* vec4(ourColor, 1.0);
}
修改下片段着色器
