OpenGL (一)OpenGL ES 绘制基础

OpenGL (一)OpenGL ES 绘制基础
OpenGL (二)GLSurface 视频录制
OpenGL (三)滤镜filter 应用
OpenGL (四)贴纸和磨皮理论

Open Graphics Library
图形领域的工业标准,是一套与硬件无关的跨编程语言、跨平台的、专业的图形编程(软件)接口。它用于二维、三维图像,是一个功能强大,调用方便的底层图形库。

OpenGL ES(OpenGL for Embedded Systems)
针对手机、PDA和游戏主机等嵌入式设备而设计的OpenGL API 子集。

在Android SDK与NDK中均有提供OpenGL ES的类库。所以我们可以借助Java、C/C++来使用OpenGL

和面向对象不同,OpenGL 是个状态机,面向过程编程。代码量比较多,难度较大。但是现在流 行的各种美颜相机、短视频APP实现各种图像渲染效果都需要OpenGL来完成。

图像处理流程一般的方式如下;

图像处理流程.png

很多图形处理的书都有这样一个经典的图

OpenGL管线.png

抓了一张图,还是说明一下,OpenGL管线,通俗 的说所有的图形都是由三角行构成,只要给定定点就好。
把三角形细分成像素点,每个像素点放大,就是我们第三个Fragments。根据像素点的位置,用着色器上色。
最后精工Fragment处理,行程图像。

EGL

OpenGL ES只是图形API,不负责管理(显示)窗口,窗口的管理交由各个设备自己来完成。OpenGL ES调用用于渲染纹理多边形,而 EGL 调用用于将渲染放到屏幕上。

GLSurfaceView

调用任何 OpenGL 函数前,必须已经创建了 OpenGL 上下文。Android中GLSurfaceView中会为我们初始化OpenGL上下文。

内部启动一个子线程(GL线 程)来初始化ELG环境,并完成OpenGL的绘制。使用GLSurfaceView,我们只能在这个EGL线程调用 OpenGL函数。

类关系.png

继承至SurfaceView,它内嵌的Surface专门负责OpenGL渲染。

  • 管理Surface与EGL;
  • 允许自定义渲染器(render);
  • 支持按需渲染和连续渲染;

GLThread定义在GLSurfaceView内部,我们怎么在这个线程中去执行我们编写的代码?
GLSurfaceView并不是一创建就会启动GL线程初始化环境。你可以把GLSurfaceView当成普通的 SurfaceView来使用。但是如果我们需要使用OpenGL ES在GLSurfaceView中绘制,那么我们需要调 用:


//使用OpenGL ES 2.0 context. 
setEGLContextClientVersion(2); 
//設置渲染回調接口
renderer = new CameraRender(this);
setRenderer(renderer);
/**
 * 刷新方式:注意必须在setRenderer 后面设置
 * RENDERMODE_WHEN_DIRTY 手动刷新,調用requestRender()回调一次渲染器的onDraw方
 * 法;
 * RENDERMODE_CONTINUOUSLY 自动刷新,大概16ms自動回調一次渲染器的onDraw方法
 */
setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);

其中 CameraRender 是一个实现了 GLSurfaceView.Renderer 接口的类。这个接口定义为:

public interface Renderer {
//窗口画布准备完成
void onSurfaceCreated(GL10 gl, EGLConfig config); 
//画布发生改变(如:横竖切换)
void onSurfaceChanged(GL10 gl, int width, int height); 
//绘制
void onDrawFrame(GL10 gl);
}

所谓的刷新就是回调这个接口的 onDrawFrame 方法让我们进行OpenGL ES的绘制调用。其实 GLSurfaceView的setRenderer方法源码实现为:

    public void setRenderer(Renderer renderer) {
        checkRenderThreadState();
        if (mEGLConfigChooser == null) {
            mEGLConfigChooser = new SimpleEGLConfigChooser(true);
        }
        if (mEGLContextFactory == null) {
            mEGLContextFactory = new DefaultContextFactory();
        }
        if (mEGLWindowSurfaceFactory == null) {
            mEGLWindowSurfaceFactory = new DefaultWindowSurfaceFactory();
        }
        mRenderer = renderer;
        mGLThread = new GLThread(mThisWeakRef);
        mGLThread.start();
    }

可以看到,如果需要在GLSurfaceView中配置的ELG环境并使用OpenGL ES就必须设置渲染接口。这样 才会启动线程初始化OpenGL ES的环境。而渲染接口需要实现的方法就是在GLThread回调的。

GLThread定义在GLSurfaceView内部,我们怎么在这个线程中去执行我们编写的代码?
渲染接口Renderer的三个回调方法就是在该线程中回调的。

下面我们需要使用OpenGL ES在GLSurfaceView中显示摄像头的图像。 这里在之前的文章有说过
请转到 RTMP(四)交叉编译与CameraX 结尾有提到

Renderer渲染
前面我们说了,我们需要在GLThread中去调用OpenGL ES的方法来完成渲染。因此我们的主要工作就 是在实现了Renderer接口的类中我们需要实现的: onSurfaceCreated 、 onSurfaceChanged 与 onDrawFrame 三个方法中完成绘制。

onSurfaceCreated
在OpenGL ES环境准备完成之后,会在GLThread中回调 onSurfaceCreated 方法。在这个方法中我们 需要准备我们需要绘制的图像。

OpenGL纹理可以看成是能在OpenGL中使用的图像,在代码中我们通过id来操作纹理。

 @Override
    public void onSurfaceCreated(GL10 gl, EGLConfig config) {
    //创建OpenGL 纹理 ,把摄像头的数据与这个纹理关联
        textures = new int[1];  //当做能在opengl用的一个图片的ID
        mCameraTexure.attachToGLContext(textures[0]);
        // 当摄像头数据有更新回调 onFrameAvailable
        mCameraTexure.setOnFrameAvailableListener(this);

        screenFilter = new ScreenFilter(cameraView.getContext());
    }

 @Override
    public void onFrameAvailable(SurfaceTexture surfaceTexture) {
        //  请求执行一次 onDrawFrame
        cameraView.requestRender();
    }

让摄像头数据绑定到我们创建的纹理 textures[0] 之后,后续我们会将 textures[0] 交给OpenGL ES 的Sharder着色器去进行渲染,并且在渲染时也能去实现各种图像效果。

OpenGL Sharder(着色器)需要使用GLSL(着色器语言)编写

上述代码中的 mCameraTexure 就是摄像头预览数据绘制的窗口。 attachToGLContext 方法能够让摄像
头预览的窗口与我们的纹理绑定起来。

摄像头捕获

由于我们本次会使用CameraX来完成摄像机的使用,使用CameraX,将捕获的图像与OpenGL纹理关联 起来也非常简单。再来回顾下我们之前直接通过CameraX与TextureView显示预览的代码。

 // 预览配置
    private Preview getPreView() {
        // 分辨率并不是最终的分辨率,CameraX会自动根据设备的支持情况,结合你的参数,设置一个最为接近的分辨率
        PreviewConfig previewConfig = new PreviewConfig.Builder()
                .setTargetResolution(new Size(640, 480))
                .setLensFacing(currentFacing) //前置或者后置摄像头
                .build();
        Preview preview = new Preview(previewConfig);
        preview.setOnPreviewOutputUpdateListener(listener);
        return preview;
    }


// 绑定声明周期
        CameraX.bindToLifecycle(lifecycleOwner, getPreView());

@Override
    public void onUpdated(Preview.PreviewOutput output) {
        mCameraTexure = output.getSurfaceTexture();
//        if (mCameraV.getSurfaceTexture() != surfaceTexture) {
//            if (textureView.isAvailable()) {
//                ViewGroup parent = (ViewGroup) displayer.getParent();
//                parent.removeView(displayer);
//                parent.addView(displayer, 0);
//                parent.requestLayout(); }
//                //设置布局中TextureView中的纹理画布完成预览
//            textureView.setSurfaceTexture(mCameraTexure); }
//        }
    }

着色器

着色器(Shader)是运行在GPU上的小程序。

顶点着色器(vertex shader)
如何处理顶点、法线等数据的小程序。

#version 120
attribute vec4 vPosition;//变量 float[4] 一个顶点 java 传过来
attribute vec2 vCoord;//传给片元进行采样的纹理坐标
varying vec2 aCoord;//易变变量 和片元写的一模一样 会传给片元
void main() {
//    gl_Position = vec4(vec3(0.0), 1.0);
    // 内置变量:把坐标点赋值给gl_position就ok
    gl_Position = vPosition;
    aCoord = vCoord;
}

这段程序就是一个顶点着色器的代码。与Java或者C一样,程序入口就是 main 方法。在 main 方法中只 要我们把要画的物体形状的点坐标给到 gl_position 即可。 vPosition 就是我们在CPU中确定的物体 形状坐标点。现在我们需要绘制的是摄像头采集图像,也就是矩形,那就需要传递4个顶点坐标数据到 着色器中。

与我们熟悉的Java语法类似, vPosition 是变量名, vec4 是类型,而应用程序传递到顶点着色器中的 变量值需要使用 attribute 修饰。可以看成是 in 顶点着色器输入变量的修饰。

vec4 其实就是vector向量,4表示这个向量包含4个数据。需要注意的是vec4只能存储float数据, 如果需要存储整型则需要使用ivec4。

aCoord 定义为存储2个float的vec2类型,被varying修饰。如果说 attribute 是 in 输入变量的修饰, 那么 varying 就是 out 输出变量。我们会在片元着色器使用这个变量。

这个顶点着色器中没有任何逻辑,只进行了赋值的操作,那么作为 attribute 输入的值 vPosition 与 vCoord 就需要我们在Android中传递进来。这两个值分别为顶点坐标与纹理坐标。

我们需要根据OpenGL世界坐标系传递顶点坐标点来确定绘制的几何形状,需要在绘制的几何表面进行 贴图,就需要按照纹理坐标贴合几何顶点。顶点着色器执行4次, vPostion 接收的点坐标与 vCoord 分 别为:

坐标.png
-1.0,-1.0 与 0,0
 1.0,-1.0 与 1.0,0
 -1.0,1.0 与 0,1.0 
1.0,1.0 与 1.0,1.0

和U3D 坐标系类似

片元着色器(fragment shader)
如何处理光、阴影、遮挡、环境等等对物体表面的影响,最终生成一副图像的小程序。

#version 120
precision mediump float;//数据精度
varying vec2 aCoord;
// uniform 片元着色器必须用这个
uniform samplerExternalOES vTexture;//samplerExternalOES 图片,采样器
void main() {
//    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    gl_FragColor = texure2D(vTexture,aCoord);//rgba
}

片元着色器中,使用内置函数 texture2D 采集对应坐标点的像素,赋值给 gl_FragColor 即可。

#extension GL_OES_EGL_image_external : require :Android摄像头只能用samplerExternalOES 类型的纹理去接收摄像头的画面,而使用samplerExternalOES需要开启 GL_OES_EGL_image_external功能。

uniform 变量是Android中需要传递给着色器的变量,不能被着色器修改。可以用于修饰共享变 量(在顶点和片元中声明方式完全一样)。

aCoord 的定义需要和顶点着色器一模一样,但是在片元着色器能读取之前会通过光栅化传递, 光栅化程序在三角形的三个顶点之间进行插值处理,会访问三个顶点之间每一个像素,然后对每 个像素点执行片元着色器。所以在片元着色器中 aCoord 的值可以看成几何中每一个像素点的坐 标。

texture2D(vTexture,aCoord) ,则是利用摄像头纹理的采样器 vTexture 获取 aCoord 坐标的 像素RGBA值并赋值给 gl_FragColor ,OpenGL就知道当前处理的片元是什么颜色从而绘制。

实际上,在Android中我们就是通过OpenGL接口给着色器传参就好啦。我们可以在渲染接口的 onDraw 中调用OpenGL动态的给着色器传递参数。而各种绘制效果的处理在着色器中来完成。

GLSL

OpenGL着色语言(OpenGL Shading Language)

attribute
属性变量,顶点着色器输入数据。如:顶点坐标、纹理坐标、颜色等。

uniforms
一致变量。在着色器执行期间一致变量的值是不变的。类似常量,但不同的是,这个值在编译时期是未知的,由着色器外部初始化。

varying
易变变量,顶点着色器输出数据。是从顶点着色器传递到片元着色器的数据变量

着色器使用

着色器使用.png

OpenGL 的结构流程

结构.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
禁止转载,如需转载请通过简信或评论联系作者。
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,198评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,663评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,985评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,673评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,994评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,399评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,717评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,407评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,112评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,371评论 2 241
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,891评论 1 256
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,255评论 2 250
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,881评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,010评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,764评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,412评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,299评论 2 260

推荐阅读更多精彩内容