服装电子商务网站建设3000字,wordpress商城主题模板,做flash网站遇到函数,电子商务主要就业方向NDK系列之OpenGL渲染画面效果技术实战#xff0c;本节主要是通过OpenGL Java库#xff08;谷歌对OpenGL C库做了JIN封装#xff0c;核心实现还是在Native层#xff09;#xff0c;实现页面渲染#xff0c;自定义渲染特效。
实现效果#xff1a; 实现逻辑#xff1a; 1…NDK系列之OpenGL渲染画面效果技术实战本节主要是通过OpenGL Java库谷歌对OpenGL C库做了JIN封装核心实现还是在Native层实现页面渲染自定义渲染特效。
实现效果 实现逻辑 1.创建Camera绑定SurfaceTexture纹理画布对象
2.将Camera预览画面数据传递给SurfaceTexture缓存到buffer
3.OpenGLES获取SurfaceTexture缓存的画面数据渲染到GLSurfaceView屏幕。
本节主要内容
1.OpenGL理论知识
2.自定义GLSurfaceView
3.自定义渲染器Renderer
4.ScreenFilter封装OpenGL
5.着色器代码工作。
源码
NdkOpenGLPlay: NDK OpenGL渲染画面效果
一、OpenGL理论知识
1图形领域的工业标准是一套跨编程语言、跨平台的、专业的图形编程(软件)接口。它用于二维、三维图 像是一个功能强大调用方便的底层图形库。 可以简单理解为是GPU显卡语言。针对手机、PDA和游戏主机等嵌入式设备而设计的OpenGL API 子集 GLSurfaceView(不仅仅有SurfaceView的所有功能还拥有了 OpenGL的处理)。
2OpenGL绘制流程
为什么是三角形三角形是 图像领域最小单元
1.位置排版顶点位置确定好【顶点位置】
2.根据各个的位置排版细节的网格排版【光栅化】
3.根据各个的位置排版细节的网格排版执行逻辑处理【光栅操作逻辑】
4.颜色色彩的准备工作【纹理过滤】
5.片元处理其实就是上色绘制成效画面【纹理填充】
6.输出结果 --- GPU 人类就看到了画面 3Shader着色器(重点)
着色器(Shader)是运行在GPU上的小程序。
顶点着色器vertex shader如何处理顶点、法线等数据的小程序。
片元着色器fragment shader如何处理光、阴影、遮挡、环境等等对物体表面的影响最终生成一 副图像的小程序。
二、自定义GLSurfaceView
GLSurfaceView继承至SurfaceView不仅仅有SurfaceView的所有功能还拥有了OpenGL的处理而MyGLSurfaceView继承至GLSurfaceView拥有GLSurfaceView的所有能力支持自定义渲染器(render)可以灵活的进行OpenGL渲染。
public class MyGLSurfaceView extends GLSurfaceView {public MyGLSurfaceView(Context context, AttributeSet attrs) {super(context, attrs);init();}private void init() {// TODO 一设置EGL版本// 2 代表是 OpenGLES 2.0setEGLContextClientVersion(2);// TODO 二设置渲染器// 注意// EGL 开启一个 GLThread.start run { Renderer.onSurfaceCreated ...onSurfaceChanged onDrawFrame }// 如果这三个函数不让GLThread调用会崩溃所以他内部的设计必须通过GLThread调用来调用三个函数setRenderer(new MyGlRenderer(this)); // this 自定义渲染器 会回调回来做处理所有传递this// TODO 三设置渲染器模式// RENDERMODE_WHEN_DIRTY 按需渲染有帧数据的时候才会去渲染 效率高麻烦后面需要手动调用一次才行// RENDERMODE_CONTINUOUSLY 每隔16毫秒读取更新一次如果没有显示上一帧setRenderMode(RENDERMODE_WHEN_DIRTY); // 手动模式 - 效率高麻烦后面需要手动调用一次才行}
}
三、自定义渲染器Renderer
1.实现GLSurfaceView.Renderer接口实现接口的onSurfaceCreated()、onSurfaceChanged()和onDrawFrame()方法
1当Surface创建时回调onSurfaceCreated()函数创建CameraHelper对象创建SurfaceTexture纹理对象并绑定SurfaceTexture.OnFrameAvailableListener监听创建ScreenFilter屏幕过滤器。
Override
public void onSurfaceCreated(GL10 gl, EGLConfig config) {Log.i(TAG, onSurfaceCreated);mCameraHelper new CameraHelper((Activity) myGLSurfaceView.getContext(), // 上下文Camera.CameraInfo.CAMERA_FACING_FRONT, // 前置摄像头640, 480);// 获取纹理ID【先理解成画布】mTextureID new int[1];/*** 1.长度 只有一个 1* 2.纹理ID是一个数组* 3.offset:0 使用数组的0下标*/glGenTextures(mTextureID.length, mTextureID, 0);mSurfaceTexture new SurfaceTexture(mTextureID[0]); // 实例化纹理对象mSurfaceTexture.setOnFrameAvailableListener(this); // 绑定好此监听 SurfaceTexture.OnFrameAvailableListenermScreenFilter new ScreenFilter(myGLSurfaceView.getContext());
}
2当Surface改变时回调onSurfaceChanged()函数获得Camera对象设置Camera绑定SurfaceTexture纹理对象开启相机预览。
Override
public void onSurfaceChanged(GL10 gl, int width, int height) {Log.i(TAG, onSurfaceChanged);mCameraHelper.startPreview(mSurfaceTexture); // 开始预览mScreenFilter.onReady(width, height);
}
实例化CameraHelper打开Camera设置Camera绑定SurfaceTexture纹理对象开启相机预览。
public void startPreview(SurfaceTexture surfaceTexture) {mSurfaceTexture surfaceTexture; // TODO 重点try {// 获得camera对象mCamera Camera.open(mCameraID);// 配置camera的属性Camera.Parameters parameters mCamera.getParameters();// 设置预览数据格式为nv21parameters.setPreviewFormat(ImageFormat.NV21);// 这是摄像头宽、高setPreviewSize(parameters);// 设置摄像头 图像传感器的角度、方向setPreviewOrientation(parameters);mCamera.setParameters(parameters);cameraBuffer new byte[mWidth * mHeight * 3 / 2]; // 请看之前讲过的的细节cameraBuffer_ new byte[mWidth * mHeight * 3 / 2]; // 请看之前讲过的的细节// 数据缓存区mCamera.addCallbackBuffer(cameraBuffer);mCamera.setPreviewCallbackWithBuffer(this);// 设置预览画面之前的方式把显示的画面渲染到SurfaceView屏幕上即可// mCamera.setPreviewDisplay(mSurfaceHolder); // SurfaceView 和 Camera绑定 以前音视频推流就是这个干的// 设置预览画面离屏渲染 surfaceTexture纹理画布仅仅只是缓存一份画布不可见的画布 配合 OpenGL渲染操作// Camera相机预览数据 ---- surfaceTexture纹理画布不可见的画布 --- OpenGL TODO 重点绑定纹理mCamera.setPreviewTexture(surfaceTexture); // OpenGL无法直接访问到 Camera预览数据 他只能访问 surfaceTexture// 开启预览mCamera.startPreview();} catch (Exception e) {e.printStackTrace();}
}
3绘制一帧图像时回调onDrawFrame()函数获取纹理对象的图像数据通过OpenGL渲染到屏幕
Override
public void onDrawFrame(GL10 gl) {Log.i(TAG, onDrawFrame);// 每次清空之前的例子上课擦黑白 是一个道理glClearColor(255, 0, 0, 0); // 屏幕清理成颜色 红色清理成红色的黑板一样// mask 细节看看此文章https://blog.csdn.net/z136411501/article/details/83273874// GL_COLOR_BUFFER_BIT 颜色缓冲区// GL_DEPTH_BUFFER_BIT 深度缓冲区// GL_STENCIL_BUFFER_BIT 模型缓冲区glClear(GL_COLOR_BUFFER_BIT);// 绘制摄像头数据mSurfaceTexture.updateTexImage(); // 将纹理图像更新为图像流中最新的帧数据【刷新一下】// 画布矩阵数据通过Native层将数据存储到mtxmSurfaceTexture.getTransformMatrix(mtx);// 绘制一帧图像mScreenFilter.onDrawFrame(mTextureID[0], mtx);
}
2.实现SurfaceTexture.OnFrameAvailableListener接口实现接口的onFrameAvailable()方法
当有可用的数据时回调onFrameAvailable()函数手动调用触发屏幕渲染
Override
public void onFrameAvailable(SurfaceTexture surfaceTexture) {Log.i(TAG, onFrameAvailable);myGLSurfaceView.requestRender(); // setRenderMode(RENDERMODE_WHEN_DIRTY); 配合用
}
四、ScreenFilter封装OpenGL
1.初始化ScreenFilter操作
1读取顶点着色器和片元着色器代码转换为字符串
String vertexSource readTextFileFromResource(context, R.raw.camera_vertex);
String fragmentSource readTextFileFromResource(context, R.raw.camera_fragment);
2配置顶点着色器
// 1.1 创建顶点着色器
int vShaderId glCreateShader(GL_VERTEX_SHADER);
// 1.2 绑定着色器源代码到 着色器加载着色器的代码
glShaderSource(vShaderId, vertexSource);
// 1.3 编译着色器代码编译阶段编译成功就能拿到顶点着色器ID编译失败基本上就是着色器代码字符串写错了
glCompileShader(vShaderId);
// 1.4 获取着色器配置结果
int[] status new int[1];
glGetShaderiv(vShaderId, GL_COMPILE_STATUS, status, 0);
if (status[0] ! GL_TRUE) {throw new IllegalStateException(顶点着色器配置失败);
}
3配置片元着色器
// 2.1 创建片元着色器
int fShaderId glCreateShader(GL_FRAGMENT_SHADER);
// 2.2 绑定着色器源代码到 着色器加载着色器的代码
glShaderSource(fShaderId, fragmentSource);
// 2.3 编译着色器代码编译阶段编译成功就能拿到顶点着色器ID编译失败基本上就是着色器代码字符串写错了
glCompileShader(fShaderId);
// 2.4 获取着色器配置结果
glGetShaderiv(fShaderId, GL_COMPILE_STATUS, status, 0);
if (status[0] ! GL_TRUE) {throw new IllegalStateException(片元着色器配置失败);
}
4配置着色器程序
// 3.1 创建一个着色器程序
mProgram glCreateProgram();
// 3.2 将前面配置的 顶点 和 片元 着色器 附加到新的程序 上
glAttachShader(mProgram, vShaderId); // 顶点
glAttachShader(mProgram, fShaderId); // 片元
// 3.3 链接着色器
glLinkProgram(mProgram); // mProgram着色器程序 是我们的成果
// 3.4 获取着色器配置结果
glGetShaderiv(mProgram, GL_LINK_STATUS, status, 0);
if (status[0] ! GL_TRUE) {throw new IllegalStateException(着色器程序链接失败);
}
5获取顶点着色器和片元着色器代码的变量的索引值通过索引来赋值
// 顶点着色器里面的如下
vPosition glGetAttribLocation(mProgram, vPosition); // 顶点着色器的索引值
vCoord glGetAttribLocation(mProgram, vCoord); // 顶点着色器纹理坐标采样器采样图片的坐标 的索引值
vMatrix glGetUniformLocation(mProgram, vMatrix); // 顶点着色器变换矩阵 的索引值// 片元着色器里面的如下
vTexture glGetUniformLocation(mProgram, vTexture); // 片元着色器采样器
6缓存顶点坐标顶点位置 排版
mVertexBuffer ByteBuffer.allocateDirect(4 * 2 * 4) // 分配内存 坐标个数 * xy坐标数据类型 * float占几字节.order(ByteOrder.nativeOrder()) // 使用本地字节序例如大端模式小端模式这里设置为跟随OpenGL的变化二变化.asFloatBuffer();
mVertexBuffer.clear(); // 清除一下
float[] v { // OpenGL世界坐标-1.0f, -1.0f,1.0f, -1.0f,-1.0f, 1.0f,1.0f, 1.0f,
};
mVertexBuffer.put(v);
7缓存纹理坐标纹理上色 成果
mTexturBuffer ByteBuffer.allocateDirect(4 * 2 * 4) // 分配内存 坐标个数 * xy坐标数据类型 * float占几字节.order(ByteOrder.nativeOrder()) // 使用本地字节序例如大端模式小端模式这里设置为跟随OpenGL的变化二变化.asFloatBuffer();
mTexturBuffer.clear(); // 清除一下
// 旋转 180度 就纠正了
float[] t { // 屏幕坐标系1.0f, 0.0f,0.0f, 0.0f,1.0f, 1.0f,0.0f, 1.0f,
};
mTexturBuffer.put(t);
2.绘制操作
通过OpenGL顶点着色器规划位置设置顶点坐标相当于相机的四个点位置排版设置纹理坐标用来图形上色设置图形矩阵数据
通过OpenGL片元着色器给图片上色设置采样器获取顶点着色器设置的纹理坐标和矩阵数据的最终计算成果通知OpenGL绘制。
1顶点着色器
// TODO 1.1 顶点坐标赋值 NIO的Buffer 用它就要归零习惯
mVertexBuffer.position(0); // 养成好习惯每次来用他时归零为了从坐标位置的起始开始
/*** 传值把float[]值传递给顶点着色器把mVertexBuffer传递到vPosition size:每次两个xy stride:0 不跳步* 1.着色器代码里面的 标记变量 attribute vec4 vPosition;* 2.xy 所以是两个* 3.不用管* 4.不用管* 5.跳步 0 不跳步* 6.顶点坐标nio的buffer缓存数据*/
glVertexAttribPointer(vPosition, 2, GL_FLOAT, false, 0, mVertexBuffer);
// 激活
glEnableVertexAttribArray(vPosition);// TODO 1.2 纹理坐标赋值
mTexturBuffer.position(0); // 养成好习惯每次来用他时归零为了从坐标位置的起始开始
// 传值把float[]值传递给纹理把mTexturBuffer传递到vCoord size:每次两个xy stride:不跳步
glVertexAttribPointer(vCoord, 2, GL_FLOAT, false, 0, mTexturBuffer);
// 激活
glEnableVertexAttribArray(vCoord);// TODO 1.3 变换矩阵 把mtx矩阵数据 传递到 vMatrix
glUniformMatrix4fv(vMatrix, 1, false, mtx, 0);
2片元着色器
// 激活图层
glActiveTexture(GL_TEXTURE0);
// TODO 2.1 绑定纹理ID --- glBindTexture(GL_TEXTURE_2D ,textureId); 如果在片元着色器中的vTexture不是samplerExternalOES类型就可以这样写
glBindTexture(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, mTextureID); // 由于我们的着色器代码是 使用了 samplerExternalOES
// TODO 2.2 采样器赋值
glUniform1i(vTexture, 0); // 传递参数 给 片元着色器采样器
// TODO 2.3 通知 opengl 绘制 从0开始共四个点绘制
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
五、着色器代码工作
1顶点着色器
attribute vec4 vPosition; // 顶点坐标相当于相机的四个点位置排版attribute vec4 vCoord; // 纹理坐标用来图形上色的uniform mat4 vMatrix; // 变换矩阵4*4的格式的varying vec2 aCoord; // 把这个最终的计算成果给片元着色器 【不需要Java传递他是计算出来的】void main() {gl_Position vPosition; // 确定好位置排版aCoord (vMatrix * vCoord).xy; // 兼容所有设备
}
2片元着色器
// 导入 samplerExternalOES 的意思
#extension GL_OES_EGL_image_external : require// float 数据的精度 precision lowp 低精度 precision mediump 中精度 precision highp 高精度
precision mediump float;// 根据上面的数据的精度写下面的 采样器 相机的数据
// uniform sampler2D vTexture; 由于我们用的是 安卓的相机就不能用他
uniform samplerExternalOES vTexture; // samplerExternalOES才能采样相机的数据varying vec2 aCoord; // 把这个最终的计算成果给片元着色器拿到最终的成果我才能上色void main() {// texture2D (采样器, 坐标) 正常效果// gl_FragColor texture2D(vTexture, aCoord);// 305911公式黑白电视效果其实原理就是提取出Y分量/*vec4 rgba texture2D(vTexture, aCoord);float gray (0.30 * rgba.r 0.59 * rgba.g 0.11* rgba.b); // 其实原理就是提取出Y分量 ,就是黑白电视gl_FragColor vec4(gray, gray, gray, 1.0);*/// 底片效果vec4 rgba texture2D(vTexture,aCoord); // rgbagl_FragColor vec4(1.-rgba.r, 1.-rgba.g, 1.-rgba.b, rgba.a);
}
至此OpenGL渲染画面效果技术实战项目已完成黑白电视和大眼萌等特效都可以通过OpenGL实现。
源码
NdkOpenGLPlay: NDK OpenGL渲染画面效果
