OpenGLES2学习教程2——HelloOpenGLES2.0

Hello GLES2

和ES1.0不同&＃xff0c;ES2.0引入了可编程管线&＃xff0c;如下图中&＃xff0c;可编程阶段为VertexShader,FragmentShader顶点和片段着色器阶段。

图片描述

顶点着色器被使用在传统的基于顶点的操作,例如位移矩阵、计算光照方程、产生贴图
坐标。顶点着色器被应用指定,应用于客户端的顶点转化。顶点着色器需要一个位置和颜色数据作为输入属性,输入位置数据是 4×4 的矩阵,输出是变换后的位置和颜色。
片段着色器不需定义输出,这是因为片段着色器仅仅的输出是gl_FragColor。

现在我们用上一节的Android入口渲染一个三角形。这里借用NDK包里的例子hello-gl2。项目代码看里面的lesson2的tag

宏文件

#ifndef _APPMACROS_H__ #define _APPMACROS_H__#include #include #include #include #include #define LOG_TAG "GLES-Tutorial"#define LOGV(...) __android_log_print(ANDROID_LOG_VERBOSE,LOG_TAG,__VA_ARGS__) #define LOGI(...) __android_log_print(ANDROID_LOG_INFO,LOG_TAG,__VA_ARGS__) #define LOGE(...) __android_log_print(ANDROID_LOG_ERROR,LOG_TAG,__VA_ARGS__)static void printGLString(const char *name, GLenum s) {const char *v &＃61; (const char *) glGetString(s);LOGI("GL %s &＃61; %s\n", name, v); }static void checkGlError(const char* op) {for (GLint error &＃61; glGetError(); error; error &＃61; glGetError()) {LOGI("after %s() glError (0x%x)\n", op, error);} }#endif

这里除了android里的Log外添加了gl2.h, gl2ext.h头文件&＃xff0c;这两个文件可以在NDK包&＃xff08;platforms/android-19/&＃xff09;中找到,这里使用了android里的libGLESv2.so库。printGLString可以获取到OpenGL属性的状态&＃xff0c;checkGlError可以检测OpenGL状态是否有错误。

使用OpenGLES2

先给Director添加成员变量:

GLProgram *_glProgram; // opengl状态机GLuint _vPositionHandle; // 获取到的顶点位置属性

#include "Director.h" #include "AppMacros.h"// 顶点着色器 static const char gVertexShader[] &＃61; "attribute vec4 vPosition;\n""void main() {\n"" gl_Position &＃61; vPosition;\n""}\n"; // 片段着色器 static const char gFragmentShader[] &＃61; "precision mediump float;\n""void main() {\n"" gl_FragColor &＃61; vec4(0.0, 1.0, 0.0, 1.0);\n""}\n"; // 三角形顶点数据 const GLfloat gTriangleVertices[] &＃61; { 0.0f, 0.5f, -0.5f,-0.5f, 0.5f, -0.5f }; // ... 省略掉一些void Director::setFrameSize(float width, float height) {LOGI("Director::setFrameSize(%lf, %lf)", width, height);_fFrameWidth &＃61; width;_fFrameHeight &＃61; height;// 创建一个空源的OpenGL状态机_glProgram &＃61; new GLProgram();// 将着色器装载和编译_glProgram->initWithVertexShaderByteArray(gVertexShader, gFragmentShader);// 链接着色器_glProgram->link();// 使用此状态机&＃xff0c;着色器将能运用上_glProgram->use();// 获取到位置属性&＃xff0c;以便用来绘制图形&＃xff1b;顶点着色器里的vPosition属性_vPositionHandle &＃61; _glProgram->getAttribLocation("vPosition");// 设置OpenGL视口&＃xff0c;一个2D的长方形区域&＃xff08;Android里GLSurfaceView窗体的大小&＃xff09;glViewport(0, 0, width, height);checkGlError("glViewport"); }void Director::mainLoop() {// 每一帧都让灰度值叠加static float grey;grey &＃43;&＃61; 0.01f;if (grey > 1.0f) {grey &＃61; 0.0f;}// 用颜色来填充清除深度和颜色缓冲区glClearColor(grey, grey, grey, 1.0f);glClear( GL_DEPTH_BUFFER_BIT | GL_COLOR_BUFFER_BIT);// 将顶点位置属性获取到glVertexAttribPointer(_vPositionHandle, 2, GL_FLOAT, GL_FALSE, 0, gTriangleVertices);checkGlError("glVertexAttribPointer");glEnableVertexAttribArray(_vPositionHandle); // 并将三角形顶点设置进顶点矩阵checkGlError("glEnableVertexAttribArray");glDrawArrays(GL_TRIANGLES, 0, 3); // 绘制三角形图元checkGlError("glDrawArrays"); }

GLProgram是我包装了OpenGL的一些操作&＃xff0c;便于使用&＃xff1a;

class GLProgram { public:GLProgram();~GLProgram();/** init GLProgram with vertex shader array data and fragment shader array data*/bool initWithVertexShaderByteArray(const GLchar* vShaderByteArray, const GLchar* fShaderByteArray);/** link shader*/bool link();/** use this opengl program*/void use();/** get location attrib*/GLuint getAttribLocation(const GLchar* attrib);private:GLuint loadShader(GLenum shaderType, const GLchar* shaderSrc);GLuint _uProgram;GLuint _uVertShader;GLuint _uFragShader;};

bool GLProgram::initWithVertexShaderByteArray(const GLchar* vShaderByteArray, const GLchar* fShaderByteArray) {_uVertShader &＃61; loadShader(GL_VERTEX_SHADER, vShaderByteArray);if (!_uVertShader) {return false;}_uFragShader &＃61; loadShader(GL_FRAGMENT_SHADER, fShaderByteArray);if (!_uFragShader) {return false;}_uProgram &＃61; glCreateProgram();if (!_uProgram) {return false;}glAttachShader(_uProgram, _uVertShader);checkGlError("glAttachShader");glAttachShader(_uProgram, _uFragShader);checkGlError("glAttachShader");return true; }bool GLProgram::link() {glLinkProgram(_uProgram);GLint linkStatus &＃61; GL_FALSE;glGetProgramiv(_uProgram, GL_LINK_STATUS, &linkStatus);if (linkStatus !&＃61; GL_TRUE) {GLint bufLength &＃61; 0;glGetProgramiv(_uProgram, GL_INFO_LOG_LENGTH, &bufLength);if (bufLength) {char* buf &＃61; (char*) malloc(bufLength);if (buf) {glGetProgramInfoLog(_uProgram, bufLength, NULL, buf);LOGE("Could not link _uProgram:\n%s\n", buf);free(buf);}}glDeleteProgram(_uProgram);_uProgram &＃61; 0;return false;}return true; }void GLProgram::use() {glUseProgram(_uProgram);checkGlError("glUseProgram"); }GLuint GLProgram::loadShader(GLenum shaderType, const char* shaderSrc) {GLuint shader &＃61; glCreateShader(shaderType);if (shader) {glShaderSource(shader, 1, &shaderSrc, NULL);glCompileShader(shader);GLint compiled &＃61; 0;glGetShaderiv(shader, GL_COMPILE_STATUS, &compiled); // check compile informationif (!compiled) {GLint infoLen &＃61; 0;glGetShaderiv(shader, GL_INFO_LOG_LENGTH, &infoLen);if (infoLen) {char* infoLog &＃61; (char*) malloc(infoLen);if (infoLog) {glGetShaderInfoLog(shader, infoLen, NULL, infoLog); // seek infor log LOGE("Could not compile shader %d:\n%s\n",shaderType, infoLog);free(infoLog);}glDeleteShader(shader);shader &＃61; 0;}}}return shader; }GLuint GLProgram::getAttribLocation(const GLchar* attrib) {GLuint retAtt &＃61; glGetAttribLocation(_uProgram, attrib);checkGlError("glGetAttribLocation");LOGI("glGetAttribLocation(\"%s\") &＃61; %d\n", attrib, retAtt);return retAtt; }

OpenGL ES提供了一套运行期动态编译的流程&＃xff1a;

1.创建着色器&＃xff1a;glCreateShader
2.指定着色器源代码字符串&＃xff1a;glShaderSource
3.编译着色器&＃xff1a;glCompileShader
4.创建着色器可执行程序&＃xff1a;glCompileShader
5.向可执行程序中添加着色器&＃xff1a;glAttachShader
6.链接可执行程序&＃xff1a;glLinkProgram

Run

编译之前&＃xff0c;需要修改下Android.mk

LOCAL_SRC_FILES :&＃61; \ com_richard_glestutorial_GLRenderer.cpp \ ../core/Director.cpp \ ../core/GLProgram.cppLOCAL_C_INCLUDES :&＃61; \ $(LOCAL_PATH)

$ndk-build && ant debug && adb install -r bin/GlesTutorial-debug.apk

运行脚本&＃xff0c;将可以看一个绿色的三角形&＃xff0c;并且背景在不断变化。

图片描述