【GoogleSamples】源码研究 - hello-gl2
简单介绍
hello-gl2项目是用来展示如何用jni的方式来使用OpenGL ES 2.0。所谓JNI的方式，是以Java代码为主，在Java代码中调用C++代码去实现功能。与之相对的，可以以C++代码为主，在C++代码中调用Java代码，这种方式笔者称之为NativeActivity方式（因为它需要用到NativeActivity类）。
这两种方式在显示流程上有区别。JNI方式需要在Java中创建上下文，选择表面配置；NativeActivity方式会直接进入C++代码，创建上下文和表面配置的工作都在C++代码中实现（teapots项目就是这种实现方式）。
工程实现思路
使用JNI绘制的流程是：在Activity中创建OpenGL ES显示要使用的context和surface，调用C++代码初始化OpenGL ES（init），然后在绘制函数中调用C++提供的绘制接口。
先看项目的文件结构：
- GL2JNIActivity：主活动类文件。本项目中只有一个初始化的作用。
- GL2JNILib：加载共享库的文件。用于导出C++中定义的函数。
- GL2JNIView：GLSurfaceView类文件，用来显示界面。
- gl_code.cpp：使用OpenGL ES实现渲染。
我们可以将这个流程分成两部分理解：
- 第一部分：创建显示要用的context和surface。这一部分的实现是在Java代码中。
- 第二部分：实现真正的绘制功能。这一部分的实现是在C++代码中。
我们先来看第一部分：创建显示要用的context和surface。
创建显示要用的context和surface
这一步，我们要用到一个非常重要的类GLSurfaceView。它本质上是一个视图，一个专门用来让OpenGL绘制的表面视图。我们知道，APP在主Activity启动的时候都需要设置一个视图（setContextView），平常情况下用普通视图就可以了，但是在使用OpenGL的情况下要使用GLSurfaceView视图。在本项目中，GL2JNIView就继承了GLSurfaceView，用于OpenGL绘制。
知识补完：Activity是一个组件，它用来显示和用户发生交互的界面，创建它的时候都需要创建一个视图（View）作为用户看到的东西。视图可以捕获用户的操作，与用户进行交互。可以将其类比成一个窗口，这有通过窗口才能显示并且与用户产生交互。所以，在Activity的onCreate函数中通常会有这么一行代码：setContentView(mView);
看代码最直观：
// 活动类（GL2JNIActivity文件）
public class GL2JNIActivity extends Activity {
GL2JNIView mView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate (savedInstanceState);
mView = new GL2JNIView(getApplication());
setContentView (mView);
}
...
}
// 视图（GL2JNIView文件）
public class GL2JNIView extends GLSurfaceView {
private static String TAG = "GL2JNIView";
private static final boolean DEBUG = false;
public GL2JNIView (Context context) {
super (context);
init (false, 0, 0);
}
public GL2JNIView (Context context, boolean translucent, int depth, int stencil) {
super (context);
init (translucent, depth, stencil);
}
private void init (boolean translucent, int depth, int stencil) {
/* 默认情况下，GLSurfaceView()创建一个RGB_565格式的不透明表面
如果我们需要一个半透明（或透明）表面，我们要在这里改变表面的格式
使用PixelFormat.TRANSLUCENT枚举值设置表面，是它成为一个32位
带有alpha通道服务端
*/
if (translucent) {
this.getHolder ().setFormat (PixelFormat.TRANSLUCENT);
}
/*
需要一个context工厂来实现2.0的渲染
ContextFactory类在下面定义
这个函数必须在setRenderer()函数之前调用
如果不用这个函数，默认的context是不共享的，而且没有属性列表
函数声明：void setEGLContextFactory (GLSurfaceView.EGLContextFactory factory)
*/
setEGLContextFactory (new ContextFactory());
/*
我们需要选择一个EGLConfig来匹配我们生成的表面格式。这一步操作
会在我们的自定义配置选择器中完成。查看下面定义的ConfigChooser类。
*/
setEGLConfigChooser (translucent?
new ConfigChooser (8, 8, 8, 8, depth, stencil) :
new ConfigChooser (5, 6, 5, 0, depth, stencil));
/* 设置渲染器 */
setRenderer (new Renderer());
}
...
}
Activity在创建的时候就生成了一个视图。这个视图就是继承自GLSurfaceView的GL2JNIView类。视图在初始化的时候主要做了3件事：
- 1、创建了一个上下文工厂给EGL
- 2、创建了一个配置选择器给EGL
- 3、设置渲染器（这是必备的一步）
这里出现了一个新名词：EGL。在Android中进行OpenGL开发，我们总绕不开EGL。那么什么是EGL呢？
官方的解释是：
EGL is an interface between Khronos rendering APIs such as OpenGL ES or OpenVG and the underlying native platform window system.
It handles graphics context management, surface/buffer binding, and rendering synchronization and enables high-performance, accelerated, mixed-mode 2D and 3D rendering using other Khronos APIs.
翻译成人话就是：
EGL是OpenGL ES和本地窗口系统之间的接口。它负责处理图形上下文管理，表面/缓存绑定，同步渲染，高性能、加速、混合模式2D和3D渲染。这么多乱七八糟的功能说的云里雾里的，不容易理解，打个比方吧，OpenGL ES就像是一个画家，它只会画其他啥都不管。EGL就像是他的管家，要帮他安排什么时候画，在哪个画室画（类似上下文），画在哪张纸上（表面/缓存绑定），用一支好的画笔画（高性能）等等。
就因为OpenGL除了画啥都不管，其他事情只好交给EGL来做，EGL就是为了这个目的而存在的。
上下文工厂的作用就是创建和删除上下文：
// 上下文工厂
private static class ContextFactory implements GLSurfaceView.EGLContextFactory {
private static int EGL_CONTEXT_CLIENT_VERSION = 0x3098;
public EGLContext createContext (EGL10 egl, EGLDisplay display, EGLConfig eglConfig) {
Log.w (TAG, "createOpenGL ES 2.0 context");
checkEglError ("Before eglCreateContext", egl);
/**
* 属性列表指定的格式就是这样，必须以EGL_CONTEXT_CLIENT_VERSION开头，后面紧跟一个整数值表示OpenGL ES的版本号
*/
int[] attrib_list = {EGL_CONTEXT_CLIENT_VERSION, 2, EGL10.EGL_NONE};
/**
* 这是一个重度函数，它所做的事情非常重要
* 函数的参数：
* EGLDisplay display, 关联的显示器
* EGLConfig config, 指定egl帧缓存的配置，这是上下文可以获取到的资源
* EGLContext share_context, 要共享缓存给哪个EGL上下文。如果设置EGL_NO_CONTEXT表示要共享给谁
* EGLint const * attrib_list 指定创建EGL所需的属性。只有EGL_CONTEXT_CLIENT_VERSION可以指定
* eglCreateContext为当前渲染API创建了一个EGL渲染上下文。当前渲染API就是eglBindAPI绑定的东西。
* 函数的返回值是一个上下文的句柄。这个上下文就可以用来渲染EGL绘制表面。如果创建失败，函数会
* 返回一个EGL_NO_CONTEXT。
*/
EGLContext context = egl.eglCreateContext(display, eglConfig, EGL10.EGL_NO_CONTEXT, attrib_list);
checkEglError("After eglContextContext", egl);
return context;
}
public void destroyContext (EGL10 egl, EGLDisplay display, EGLContext context) {
egl.eglDestroyContext (display, context);
}
}
笔者在阅读代码的时候做了很多注释，这些注释帮助我更好地理解函数的作用，代码的功能，相信有很多读者也是这么做的。工厂函数中最重要的一行代码就是egl.eglCreateContexxt(display, eglConfig, EGL10.EGL_NO_CONTEXT, attrib_list)。它用来创建一个符合我们要求的上下文。该函数的具体参数请看代码中的注释，要是注释看的还不尽兴，官方文档肯定能满足你的要求了。
ConfigChooser类要实现选择一个需要配置的功能，这个配置指的是帧缓存的配置（笔者将其理解为表面配置）。首先需要人为确定要什么属性，然后查询硬件支持这些属性的配置有哪些，根据返回的配置，选择一个合适的使用：
private static class ConfigChooser implements GLSurfaceView.EGLConfigChooser {
public ConfigChooser (int r, int g, int b, int a, int depth, int stencil){
mRedSize = r;
mGreenSize = g;
mBlueSize = b;
mAlphaSize = a;
mDepthSize = depth;
mStencilSize = stencil;
}
/*
EGL 配置指定，被用于2.0渲染
我们使用最小的尺寸（4位）给R/G/B，但是会在chooseConfig()中提供真实的匹配
*/
private static int EGL_OPENGL_ES2_BIT = 4;
private static int[] s_configAttribs2 = {
EGL10.EGL_RED_SIZE, 4,
EGL10.EGL_GREEN_SIZE , 4,
EGL10.EGL_BLUE_SIZE, 4,
EGL10.EGL_RENDERABLE_TYPE, EGL_OPENGL_ES2_BIT,
EGL10.EGL_NONE
};
public EGLConfig chooseConfig (EGL10 egl, EGLDisplay display) {
// 获取EGL最低配置
int[] num_config = new int[1];
/**
* 这也是一个要重度用的函数。
* 返回匹配指定属性的EGL帧缓存配置列表
* 函数参数：
* EGLDisplay display, 关联的显示器
* EGLint const * attrib_list, 指定的属性
* EGLConfig * configs, 输出的帧缓存配置列表
* EGLint config_size, 帧缓存配置列表的大小
* EGLint * num_config 符合条件的配置个数
* 函数返回时，将所有的EGL帧缓存配置保存到configs中，config_size指定了配置列表最多可以接受多少个配置信息
* num_config返回了符合条件的配置数量
* 如果configs设置成NULL，config_size会被忽略
* 一般使用的时候都是先将configs设置成NULL,调用一次函数，获得配置个数，再根据配置个数new一个相应大小的配置
* 列表数组出来，再调用一次获取信息。
*
* 我们下面就是这么做的
*/
// 获取满足指定属性的所有配置
egl.eglChooseConfig (display, s_configAttribs2, null, 0, num_config);
int numConfigs = num_config[0];
if (numConfigs <= 0) {
throw new IllegalArgumentException("No configs match configSpec");
}
// 分配，读取EGL最低配置
EGLConfig[] configs = new EGLConfig[numConfigs];
egl.eglChooseConfig(display, s_configAttribs2, configs, numConfigs, num_config);
if (DEBUG){
printConfigs (egl, display, configs);
}
return chooseConfig (egl, display, configs);
}
public EGLConfig chooseConfig (EGL10 egl, EGLDisplay display, EGLConfig[] configs) {
for (EGLConfig config : configs) {
int d = findConfigAttrib (egl, display, config, EGL10.EGL_DEPTH_SIZE, 0);
int s = findConfigAttrib (egl, display, config, EGL10.EGL_STENCIL_SIZE, 0);
// 检查深度合模板属性是否达到最低要求
if (d < mDepthSize || s < mStencilSize) {
continue;
}
// rgba属性的检查
int r = findConfigAttrib (egl, display, config, EGL10.EGL_RED_SIZE, 0);
int g = findConfigAttrib (egl, display, config, EGL10.EGL_GREEN_SIZE, 0);
int b = findConfigAttrib (egl, display, config, EGL10.EGL_BLUE_SIZE, 0);
int a = findConfigAttrib (egl, display, config, EGL10.EGL_ALPHA_SIZE, 0);
if (r == mRedSize && g == mGreenSize && b == mBlueSize && a == mAlphaSize)
return config;
}
return null;
}
private int findConfigAttrib (EGL10 egl, EGLDisplay display,
EGLConfig config, int attribute, int defaultValue) {
/**
* 返回EGL帧缓存配置的信息
* 函数的参数：
* EGLDisplay display, 相关联的显示器
* EGLConfig config, 要查询的配置
* EGLint attribute, 需要返回的属性
* EGLint * value 返回值
*/
if (egl.eglGetConfigAttrib (display, config, attribute, mValue)) {
return mValue[0];
}
return defaultValue;
}
...
}
茫茫多的代码，还是笔者省略后的。代码虽多，理解起来却不困难。最关键的就是chooseConfig函数，不是下面三个参数的，是上面两个参数的那个。在那个函数里，调用了两次eglChooseConfig。第一次是为了获取有多少个支持属性的配置，第二次是输出配置信息。很巧妙的一个方法，也不是第一次见了。三参chooseConfig函数就是遍历获取到的配置信息，找一个符合属性值要求的配置返回，这点没有什么困惑的。
private static class Renderer implements GLSurfaceView.Renderer {
public void onDrawFrame (GL10 unused) {
GL2JNILib.step();
}
public void onSurfaceChanged (GL10 unused, int width, int height) {
GL2JNILib.init (width, height);
}
public void onSurfaceCreated (GL10 gl, EGLConfig config) {
// 什么都不做
}
}
上面的代码是实现一个GLSurfaceView.Renderer。这也是使用GLSurfaceView必要的一步操作。里面有三个函数需要重载，分别是：
- onDrawFrame（绘制一帧的函数，在这里面调用C++中的绘制函数）
- onSurfaceChanged（表面属性改变时调用到，例如横屏了，这里也要调用C++中的函数，初始化OpenGL）
- onSurfaceCreated（表面创建时调用，虽然我们不用，担也必须实现）
这样，Java中的工作做好了，我们切换到C++那边。
实现真正的绘制功能
C++代码重点是在着色器部分。需要写好顶点着色器和片元着色器的代码，编译，链接，然后使用。
先来到写着色器代码环节：
auto gVertexShader =
"attribute vec4 vPosition;\n"
"void main() {\n"
" gl_Position = vPosition;\n"
"}\n";
auto gFragmentShader =
"precision mediump float;\n"
"void main() {\n"
" gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);\n"
"}\n";
着色器采用GLSL语言编写，其语法和C语言非常类似。在正式的开发中，通常会写一个着色器加载函数，在文件中写着色器，然后通过加载函数加载进来，编译链接以供使用。本例出于示范目的，就没有做这一部分的功能。
加载着色器函数：
GLuint loadShader (GLenum shaderType, const char* pSource) {
GLuint shader = glCreateShader (shaderType);
if (shader) {
glShaderSource (shader, 1, &pSource, NULL);
glCompileShader (shader);
GLint compiled = 0;
glGetShaderiv (shader, GL_COMPILE_STATUS, &compiled);
// 下面都是进行日志输出
if (!compiled) {
GLint infoLen = 0;
glGetShaderiv (shader, GL_INFO_LOG_LENGTH, &infoLen);
if (infoLen) {
char* buf = (char*) malloc (infoLen);
if (buf) {
glGetShaderInfoLog (shader, infoLen, NULL, buf);
LOGE ("Could not compile shader %d:\n%s\n", shaderType, buf);
free (buf);
}
glDeleteShader (shader);
shader = 0;
}
}
}
return shader;
}
首先需要根据着色器类型创建着色器（glCreateShader），然后初始化着色器代码（glShaderSource），编译着色器（glCompileShader），编译后需要检查一下有没有编译成功（glGetShaderiv）。养成一个好习惯，编译后要检查是否编译成功。
创建着色器程序函数：
/**
* 创建着色器程序
* @param pVertexSource 顶点着色器源码
* @param pFragmentSource 片段着色器源码
* @return {GLuint}
*/
GLuint createProgram (const char* pVertexSource, const char* pFragmentSource) {
GLuint vertexShader = loadShader (GL_VERTEX_SHADER, pVertexSource);
if (!vertexShader) {
return 0;
}
GLuint pixelShader = loadShader (GL_FRAGMENT_SHADER, pFragmentSource);
if (!pixelShader) {
return 0;
}
GLuint program = glCreateProgram ();
if (!program) {
LOGE ("Could not create Program\n");
return 0;
}
glAttachShader (program, vertexShader);
checkGlError ("glAttachShader");
glAttachShader (program, pixelShader);
checkGlError ("glAttachShader");
glLinkProgram (program);
GLint linkStatus = GL_FALSE;
glGetProgramiv (program, GL_LINK_STATUS, &linkStatus);
if (linkStatus != GL_TRUE) {
GLint bufLength = 0;
glGetProgramiv (program, GL_INFO_LOG_LENGTH, &bufLength);
if (bufLength) {
char* buf = (char*) malloc (bufLength);
if (buf) {
glGetProgramInfoLog (program, bufLength, NULL, buf);
LOGE ("Could not link program:\n%s\n", buf);
free (buf);
}
}
glDeleteProgram (program);
return 0;
}
return program;
}
着色器程序这个东西非常不好理解，因为在编程的过程中没有什么东西能和它对应上。说它是代码吧，它用的是已经编译过了的着色器。说它是库吧，为什么还要附加两个库，然后在链接？笔者至今还没有想出一个能匹配的模型，如果哪位读者有好的理解模型，请务必告诉我。
扯远了。着色器程序也是使用OpenGL渲染的一环，着色器编译好后需要链接到着色器程序上进行链接，链接完成之后的东西（这个着色器程序）才是真正可以用的。没什么弯弯绕绕的地方，就是要养成一个链接完后也检查是否成功的习惯。
接下来是设置图形系统的接口：
// 设置图形系统
bool setupGraphics (int w, int h) {
printGLString("Version", GL_VERSION);
printGLString("Vendor", GL_VENDOR);
printGLString("Renderer", GL_RENDERER);
printGLString ("Extensions", GL_EXTENSIONS);
LOGI ("setupGraphics (%d, %d)", w, h);
gProgram = createProgram (gVertexShader, gFragmentShader);
if (!gProgram) {
LOGE ("Could not create program.");
return false;
}
gvPositionHandle = glGetAttribLocation(gProgram, "vPosition");
checkGlError ("glGetAttribLocation");
LOGI ("glGetAttribLocation (\"vPosition\") = %d\n", gvPositionHandle);
glViewport (0, 0, w, h);
checkGlError("glViewport");
return true;
}
这个函数主要是用来初始化图形系统的，包括系统的状态的输出，创建着色器程序，保存着色器程序中vPosition的位置（用来在其他代码中进行赋值）。最重要的一点，初始化视口：glViewport做的工作。
最后，也是离Java代码最近的东西-渲染：
void renderFrame() {
static float grey;
grey += 0.01f;
if (grey > 1.0f) {
grey = 0.0f;
}
glClearColor (grey, grey, grey, 1.0f);
checkGlError("glClearError");
glClear (GL_DEPTH_BUFFER_BIT | GL_COLOR_BUFFER_BIT);
checkGlError ("glClear");
glUseProgram (gProgram);
checkGlError("glUseProgram");
glVertexAttribPointer (gvPositionHandle, 2, GL_FLOAT, GL_FALSE, 0, gTriangleVertices);
checkGlError("glVertexAttribPointer");
glEnableVertexAttribArray(gvPositionHandle);
checkGlError("glEnableVertexAttribArray");
glDrawArrays (GL_TRIANGLES, 0, 3);
checkGlError("glDrawArrays");
}
渲染表面的流程：1、清理表面。2、使用着色器。3、设置顶点属性。4、绘制。
对应到代码就是：1、glClearColor。2、glUseProgram。3、glVertexAttribPointer和glEnableVertexAttribArray。4、glDrawArray。
最后再看两个逗乐函数：
JNIEXPORT void JNICALL Java_com_android_gl2jni_GL2JNILib_init(JNIEnv * env, jobject obj, jint width, jint height)
{
setupGraphics(width, height);
}
JNIEXPORT void JNICALL Java_com_android_gl2jni_GL2JNILib_step(JNIEnv * env, jobject obj)
{
renderFrame();
}
Renderer中调用的接口就是这两个函数，这两函数除了被Java调用一下也没啥实际作用了（话说回来，jni接口都是这样，所有的具体功能都是在别的代码中，jni接口只要调用具体功能函数就行了。这也算是中间层的宿命吧。）。
总结
两个部分的功能都非常明确，代码的逻辑也十分清晰，不愧是官方的示例代码。从这个思路走，即使不看代码，你也应该能“拼”出这个功能。
参考资料
官方示例：如何使用OpenGL ES？
