写点什么

音视频之 opengl 渲染图片

用户头像
赖猫
关注
发布于: 2021 年 03 月 08 日

首先来看看渲染效果



我们先来看看关于纹理的坐标:


他是如下图:



顶点着色器代码: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;}

//然后将图片加载成一个bitmapfinal 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中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项目链接


推荐自己的Linux、C/C++技术交流群:【960994558】整理了一些个人觉得比较好的学习书籍、大厂面试题、和热门技术教学视频资料共享在里面(包括 C/C++,Linux,Nginx,ZeroMQ,MySQL,Redis,fastdfs,MongoDB,ZK,流媒体,CDN,P2P,K8S,Docker,TCP/IP,协程,DPDK 等等.),有需要的可以自行添加哦!~



以上有不足的地方欢迎指出讨论,觉得不错的朋友希望能得到您的转发支持,同时可以持续关注我,每天分享技术干货内容!


用户头像

赖猫

关注

还未添加个人签名 2020.11.28 加入

纸上得来终觉浅,绝知此事要躬行

评论

发布
暂无评论
音视频之opengl渲染图片