音视频之opengl绘制三角形

音视频之opengl渲染图片

音视频之渲染yuv图片

首先来看看渲染效果
音视频之opengl渲染图片-LMLPHP
我们先来看看关于纹理的坐标:
他是如下图:
音视频之opengl渲染图片-LMLPHP

顶点着色器代码:texture_vertext_shader_java_1.glsl

attribute vec4 a_Position;
attribute vec2 a_TextureCoordinates;
varying vec2 v_TextureCoordinates;

void main() {
    v_TextureCoordinates = a_TextureCoordinates;
    gl_Position = a_Position;
}

a_Position:是顶点的坐标
a_TextureCoordinates:是用来接收的纹理坐标的属性。
v_TextureCoordinates:这个是用来将坐标传递给片段着色器。

片段着色器代码: texture_frament_shader_java_1.glsl

precision mediump float ;
uniform sampler2D u_TextureUnit;
varying vec2 v_TextureCoordinates;

void main() {
    gl_FragColor = texture2D(u_TextureUnit , v_TextureCoordinates);
}

u_TextureUnit:这是用来接收纹理数据的数组。
v_TextureCoordinates:是从顶点着色器传递过来的纹理坐标
texture2D方法:他会读入特定坐标的颜色值,然后传递给gl_FragColor

现在来看看java上的代码:
这些都是加载代码,然后编译,连接,然后使用,和上篇渲染三角形是一样的。

String vertexShaderSource = TextResourceReader.readTextFileFromResource(context, R.raw.texture_vertext_shader_java_1);
String frgShaderSource = TextResourceReader.readTextFileFromResource(context, R.raw.texture_frament_shader_java_1);
int vertextShader = ShaderHelper.compileVertextShader(vertexShaderSource);
int fragmentShader = ShaderHelper.compileFragmentShader(frgShaderSource);
program = ShaderHelper.linkProgram(vertextShader, fragmentShader);
ShaderHelper.validatePrograme(program);
glUseProgram(program);

下面是获取三个变量的地址:

uTextureUnitL = glGetUniformLocation(program, "u_TextureUnit");
aPositionL = glGetAttribLocation(program, "a_Position");
aTextureCoordinatesL = glGetAttribLocation(program, "a_TextureCoordinates");

接下来我们着重看下加载纹理的地方:loadTexture

先创建一个纹理对象:

final int[] textureObjectIds = new int[1];
glGenTextures(1,textureObjectIds , 0);
if(textureObjectIds[0] == 0){
    Log.e("xhc" , "cant open opengl texture object !");
    return 0;
}
//然后将图片加载成一个bitmap
final BitmapFactory.Options options = new BitmapFactory.Options();
options.inScaled = false;
final Bitmap bitmap = BitmapFactory.decodeResource(context.getResources() , resourceId , options);
if(bitmap == null){
    Log.e("xhc" , "bitmap create faild ");
    glDeleteTextures(1, textureObjectIds , 0);
    return 0;
}
//在使用这个新生成的纹理之前,我们需要告诉opengl纹理调用应该应用于这个纹理对象
//第一个参数GL_TEXTURE_2D 告诉这个纹理是个二维的纹理,对应的id是 textureObjectIds[0]
glBindTexture(GL_TEXTURE_2D , textureObjectIds[0]);
/**
 * 设置过滤器GL_TEXTURE_MIN_FILTER指缩小的情况选择GL_LINEAR_MIPMAP_LINEAR说明缩小使用三线性过滤
 * GL_TEXTURE_MAG_FILTER 指放大的情况GL_LINEAR使用双线性过滤
 */
glTexParameteri(GL_TEXTURE_2D , GL_TEXTURE_MIN_FILTER , GL_LINEAR_MIPMAP_LINEAR);
glTexParameteri(GL_TEXTURE_2D , GL_TEXTURE_MAG_FILTER , GL_LINEAR);

我们简单来看看过滤方式:
音视频之opengl渲染图片-LMLPHP

//加载位图数据到opengl中
texImage2D(GL_TEXTURE_2D , 0 , bitmap,0);
//释放位图,节约内存
bitmap.recycle();
//生成mip贴图
glGenerateMipmap(GL_TEXTURE_2D);
//解除纹理绑定,这里不是把纹理数据和纹理id解除绑定,只是为了让后面的操作不要操作到此纹理,如果就是想操作,再从新绑定即可
glBindTexture(GL_TEXTURE_2D , 0);
//我们再来看看坐标,顶点坐标和纹理坐标都放在一起
//注意顶点和纹理的坐标做好对应
float[] tableVerticesTexture = {
        //x, y , s , t
        0f, 0f, 0.5f, 0.5f,
        -1f, -1f, 0f, 1f,
        1f, -1f, 1f, 1f,
        1f, 1f, 1f, 0f,
        -1f, 1f, 0f, 0f,
        -1f, -1f, 0f, 1f,
};

将坐标数据传入对应的opengl中,并使能。

    private void setVertexAttribPointer(int dataOffset, int attributeLocation, int componetCount, int stride) {
        vertexData.position(dataOffset);
        glVertexAttribPointer(attributeLocation, componetCount, GL_FLOAT, false, stride, vertexData);
        glEnableVertexAttribArray(attributeLocation);
        vertexData.position(0);
    }

最后绘制:

//通过  glActiveTexture(GL_TEXTURE0);把活动的纹理单元设置成纹理单元0,
//然后通过glBindTextture()把纹理绑定到这个单元。通过调用
//glUniformli(uTextureUnitLocation ,0)把被选定的纹理单元传递给片段着色器中。
 @Override
    public void onDrawFrame(GL10 gl10) {
        glClear(GL_COLOR_BUFFER_BIT);
        glUseProgram(program);
        //drawtexture
        glActiveTexture(GL_TEXTURE0);
        glBindTexture(GL_TEXTURE_2D, texttureId);
       glUniform1i(uTextureUnitL, 0);
        glDrawArrays(GL_TRIANGLE_FAN, 0, 6);
    }

github项目链接

03-21 18:28