OpenGL筆記（五） 着色器渲染（以Android爲例）

1、Android平臺上下文環境的建立及初始化

1. 首先實例化Android上下文環境，即EGL的初始化。

bool EGLCore::init(EGLContext sharedContext) { EGLint numConfigs; EGLint width; EGLint height; const EGLint attribs[] = { EGL_BUFFER_SIZE, 32, EGL_ALPHA_SIZE, 8, EGL_BLUE_SIZE, 8, EGL_GREEN_SIZE, 8, EGL_RED_SIZE, 8, EGL_RENDERABLE_TYPE, EGL_OPENGL_ES2_BIT, EGL_SURFACE_TYPE, EGL_WINDOW_BIT, EGL_NONE }; //eglGetDisplay來返回OpenGL ES渲染的目標，每一個廠商都會返回默認的顯示設備
    if ((display = eglGetDisplay(EGL_DEFAULT_DISPLAY)) == EGL_NO_DISPLAY) { LOGE("eglGetDisplay() returned error %d", eglGetError()); return false; } // 初始化顯示設備
    if (!eglInitialize(display, 0, 0)) { LOGE("eglInitialize() returned error %d", eglGetError()); return false; } // 獲得配置選項信息
    if (!eglChooseConfig(display, attribs, &config, 1, &numConfigs)) { LOGE("eglChooseConfig() returned error %d", eglGetError()); release(); return false; } // 建立OpenGL的上下文環境EGLContext
    EGLint eglContextAttributes[] = { EGL_CONTEXT_CLIENT_VERSION, 2, EGL_NONE }; if (!(context = eglCreateContext(display, config, NULL == sharedContext ? EGL_NO_CONTEXT : sharedContext, eglContextAttributes))) { LOGE("eglCreateContext() returned error %d", eglGetError()); release(); return false; } pfneglPresentationTimeANDROID = (PFNEGLPRESENTATIONTIMEANDROIDPROC)eglGetProcAddress("eglPresentationTimeANDROID"); if (!pfneglPresentationTimeANDROID) { LOGE("eglPresentationTimeANDROID is not available!"); } return true; }

2. 將EGL和設備的屏幕鏈接起來。使用EGLSurface，經過EGL庫提供的eglCreateWindowSurface能夠建立一個可實際顯示的Surface，經過EGL庫提供的eglCreatePbufferSurface能夠建立一個OffScreen的Surface。_window就是經過Java層的Surface對象建立出的ANativeWindow類型的對象，即本地設備屏幕的表示。也就是說真實顯示的Surface仍是經過Java層建立好的， 而後OpenGL只是繪製到了這個target上邊？

EGLSurface EGLCore::createWindowSurface(ANativeWindow* _window) { EGLSurface surface = NULL; EGLint format; if (!eglGetConfigAttrib(display, config, EGL_NATIVE_VISUAL_ID, &format)) { LOGE("eglGetConfigAttrib() returned error %d", eglGetError()); release(); return surface; } ANativeWindow_setBuffersGeometry(_window, 0, 0, format); if (!(surface = eglCreateWindowSurface(display, config, _window, 0))) { LOGE("eglCreateWindowSurface() returned error %d", eglGetError()); } return surface; }

經過Java層的Surface對象建立ANativeWindow類型的對象方法以下：

JNIEXPORT void JNICALL Java_com_phuket_tour_opengl_renderer_PngPreviewController_setSurface (JNIEnv * env, jobject obj, jobject surface) { if (surface != 0 && NULL != controller) { window = ANativeWindow_fromSurface(env, surface); LOGI("Got window %p", window); controller->setWindow(window); } else if (window != 0) { LOGI("Releasing window"); ANativeWindow_release(window); window = 0; } }

3. 開發者須要開闢一個新的線程，來執行OpenGL ES的渲染操做，並且還必須爲該線程綁定顯示設備（surface）與上下文環境（Context）。EGL是雙緩衝模式，內部有兩個FrameBuffer，當EGL將一個FrameBuffer顯示到屏幕上的時候，另一個FrameBuffer就在後臺等待OpenGL ES進行渲染輸出了。直到調用函數eglSwapBuffers這條指令的時候，纔會把前臺的FrameBuffer和後臺的FrameBuffer進行交換。

bool EGLCore::makeCurrent(EGLSurface eglSurface) { return eglMakeCurrent(display, eglSurface, eglSurface, context); }

2、Texture/Shader/Program

 1. 建立Texture（紋理）

int PicPreviewTexture::initTexture() { glGenTextures(1, &texture); glBindTexture(GL_TEXTURE_2D, texture); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE); return 1; }

2. 建立/初始化/編譯Shader

GLuint PicPreviewRender::compileShader(GLenum type, const char *sources) { GLint status; GLuint shader = glCreateShader(type); if (shader == 0 || shader == GL_INVALID_ENUM) { LOGI("Failed to create shader %d", type); return 0; } glShaderSource(shader, 1, &sources, NULL); glCompileShader(shader); glGetShaderiv(shader, GL_COMPILE_STATUS, &status); if (status == GL_FALSE) { glDeleteShader(shader); LOGI("Failed to compile shader : %s\n", sources); return 0; } return shader; }

3. 建立並使用Program（顯卡可執行程序）

int PicPreviewRender::useProgram() { program = glCreateProgram(); glAttachShader(program, vertShader); glAttachShader(program, fragShader); glBindAttribLocation(program, ATTRIBUTE_VERTEX, "position"); glBindAttribLocation(program, ATTRIBUTE_TEXCOORD, "texcoord"); glLinkProgram(program); GLint status; glGetProgramiv(program, GL_LINK_STATUS, &status); if (status == GL_FALSE) { LOGI("Failed to link program %d", program); return -1; } glUseProgram(program); uniformSampler = glGetUniformLocation(program, "yuvTexSampler"); return 1; }

 3、渲染操做

void PicPreviewRender::render(){ glViewport(_backingLeft, _backingTop, _backingWidth, _backingHeight); glClearColor(0.0f, 0.0f, 1.0f, 0.0f); glClear(GL_COLOR_BUFFER_BIT); glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); glUseProgram(program); static const GLfloat _vertices[] = { -1.0f, 1.0f, -1.0f, -1.0f, 1.0f, 1.0f, 1.0f, -1.0f }; glVertexAttribPointer(ATTRIBUTE_VERTEX, 2, GL_FLOAT, 0, 0, _vertices); glEnableVertexAttribArray(ATTRIBUTE_VERTEX); static const GLfloat texCoords[] = { 0.0f, 0.0f, 0.0f, 1.0f, 1.0f, 0.0f, 1.0f, 1.0f }; glVertexAttribPointer(ATTRIBUTE_TEXCOORD, 2, GL_FLOAT, 0, 0, texCoords); glEnableVertexAttribArray(ATTRIBUTE_TEXCOORD); picPreviewTexture->bindTexture(uniformSampler); glDrawArrays(GL_TRIANGLE_STRIP, 0, 4); }

    首先，_vertices有4個頂點，每一個頂點都會調用一次頂點着色器程序。按照規則，一共有四個點，每一個點爲vec2，可是頂點着色器的in輸入變量爲vec3，在GLSL語法中，vec2傳遞給vec3，其中擴充的維度的值默認爲0，這也能夠接受由於所在的是二維平面，否則也不會2個float表明一個點，因此，第三維自動爲0。gl_Position 的第四維是和裁剪以及變換有關的，沒有相關的變換時候是1.0。

    頂點座標的歸一化區間是[-1, 1]，紋理座標的歸一化區間是[0, 1]。因此代碼是將紋理總體完整鋪在顯示區域，若是想把紋理的一部分鋪上去，那就在[0, 1]區間內部分寫進去。

執行完渲染操做後，調用eglSwapBuffers便可顯示。至此，一次渲染操做完成。