上文我们讲解了如何构建一个hello world开发环境,那么这一篇我们就来画一个简单的三角形出来。
首先,我要向大家介绍下opengl es的渲染流程,在2.0之前,es的渲染采用的是固定管线,何为固定管线,就是一套固定的模板流程,局部坐标变换 -> 世界坐标变换 ->观察坐标变换->背面消除->光照->裁剪->投影->视口计算->光栅化,程序员只需要调用固定的api修改一些配置参数就可以完成整个渲染流程了。而到了2.0,固定管线改成了可编程管线,我们对整个渲染流程可以再编程,没有固定的api给你调用,一切都依靠shader来完成。那么什么是shader呢:
Shader分为Vertex Shader
顶点着色器和Pixel Shader
像素着色器两种。其中Vertex Shader主要负责顶点的几何关系等的运算,Pixel Shader主要负责片源颜色等的计算。
着色器替代了传统的固定渲染管线,可以实现3D图形学计算中的相关计算,由于其可编辑性,可以实现各种各样的图像效果而不用受显卡的固定渲染管线限制。这极大的提高了图像的画质。
好了,介绍完渲染流程,我们变进入正题,如何在上一篇的基础上完成一个简单三角形的渲染呢?
首先,我们要建立一个三角形的局部坐标系,也就是三角形每个点的顶点坐标。
- GLKVector3 vec[3]={
- {0.5,0.5,0.5},
- {-0.5,-0.5,0.5},
- {0.5,-0.5,-0.5}
- };
然后,因为我们介绍的是opengl es3.0的编程,所以我们用的是可编程管线,那么我们就应该建立一个vertex shader文件和一个pixel shader文件,分别命名为shader.vsh和shader.fsh。
shader.vsh:
- attribute vec3 position;
- void main()
- {
- gl_Position = vec4(position,1);
- }
shader.fsh:
- void main()
- {
- gl_FragColor = vec4(0.5,0.5,0.5,1);
- }
可以看到,每一个着色器文件都一个类似于c语言的main函数入口,这个就是着色器的入口,所有的代码都从这里开始执行。
编写完着色器后,我们便需要在主程序里加载shader了,加载shader的代码基本上不需要变动什么,直接copy过来就可以了。
- - (BOOL)loadShaders
- {
- GLuint vertShader, fragShader;
- NSString *vertShaderPathname, *fragShaderPathname;
-
-
- program = glCreateProgram();
-
-
- vertShaderPathname = [[NSBundle mainBundle] pathForResource:@"Shader" ofType:@"vsh"];
- if (![self compileShader:&vertShader type:GL_VERTEX_SHADER file:vertShaderPathname]) {
- NSLog(@"Failed to compile vertex shader");
- return NO;
- }
-
-
- fragShaderPathname = [[NSBundle mainBundle] pathForResource:@"Shader" ofType:@"fsh"];
- if (![self compileShader:&fragShader type:GL_FRAGMENT_SHADER file:fragShaderPathname]) {
- NSLog(@"Failed to compile fragment shader");
- return NO;
- }
-
-
- glAttachShader(program, vertShader);
-
-
- glAttachShader(program, fragShader);
-
-
- if (![self linkProgram:program]) {
- NSLog(@"Failed to link program: %d", program);
-
- if (vertShader) {
- glDeleteShader(vertShader);
- vertShader = 0;
- }
- if (fragShader) {
- glDeleteShader(fragShader);
- fragShader = 0;
- }
- if (program) {
- glDeleteProgram(program);
- program = 0;
- }
-
- return NO;
- }
-
- if (vertShader) {
- glDetachShader(program, vertShader);
- glDeleteShader(vertShader);
- }
- if (fragShader) {
- glDetachShader(program, fragShader);
- glDeleteShader(fragShader);
- }
-
- return YES;
- }
-
- - (BOOL)compileShader:(GLuint *)shader type:(GLenum)type file:(NSString *)file
- {
- GLint status;
- const GLchar *source;
-
- source = (GLchar *)[[NSString stringWithContentsOfFile:file encoding:NSUTF8StringEncoding error:nil] UTF8String];
- if (!source) {
- NSLog(@"Failed to load vertex shader");
- return NO;
- }
-
- *shader = glCreateShader(type);
- glShaderSource(*shader, 1, &source, NULL);
- glCompileShader(*shader);
-
- #if defined(DEBUG)
- GLint logLength;
- glGetShaderiv(*shader, GL_INFO_LOG_LENGTH, &logLength);
- if (logLength > 0) {
- GLchar *log = (GLchar *)malloc(logLength);
- glGetShaderInfoLog(*shader, logLength, &logLength, log);
- NSLog(@"Shader compile log:\n%s", log);
- free(log);
- }
- #endif
-
- glGetShaderiv(*shader, GL_COMPILE_STATUS, &status);
- if (status == 0) {
- glDeleteShader(*shader);
- return NO;
- }
-
- return YES;
- }
-
- - (BOOL)linkProgram:(GLuint)prog
- {
- GLint status;
- glLinkProgram(prog);
-
- #if defined(DEBUG)
- GLint logLength;
- glGetProgramiv(prog, GL_INFO_LOG_LENGTH, &logLength);
- if (logLength > 0) {
- GLchar *log = (GLchar *)malloc(logLength);
- glGetProgramInfoLog(prog, logLength, &logLength, log);
- NSLog(@"Program link log:\n%s", log);
- free(log);
- }
- #endif
-
- glGetProgramiv(prog, GL_LINK_STATUS, &status);
- if (status == 0) {
- return NO;
- }
-
- return YES;
- }
-
- - (BOOL)validateProgram:(GLuint)prog
- {
- GLint logLength, status;
-
- glValidateProgram(prog);
- glGetProgramiv(prog, GL_INFO_LOG_LENGTH, &logLength);
- if (logLength > 0) {
- GLchar *log = (GLchar *)malloc(logLength);
- glGetProgramInfoLog(prog, logLength, &logLength, log);
- NSLog(@"Program validate log:\n%s", log);
- free(log);
- }
-
- glGetProgramiv(prog, GL_VALIDATE_STATUS, &status);
- if (status == 0) {
- return NO;
- }
-
- return YES;
- }
然后再viewdidload里面添加如下代码:
- [self loadShaders];
- glEnable(GL_DEPTH_TEST);
- glClearColor(0.1, 0.2, 0.3, 1);
- glGenVertexArrays(1, &vertexID);
- glBindVertexArray(vertexID);
- GLuint bufferID;
- glGenBuffers(1, &bufferID);
- glBindBuffer(GL_ARRAY_BUFFER, bufferID);
- glBufferData(GL_ARRAY_BUFFER, sizeof(vec), vec, GL_STATIC_DRAW);
- GLuint loc=glGetAttribLocation(program, "position");
- glEnableVertexAttribArray(loc);
- glVertexAttribPointer(loc, 3, GL_FLOAT, GL_FALSE, sizeof(GLKVector3), 0);
- glBindVertexArray(0);
- glBindBuffer(GL_ARRAY_BUFFER, 0);
这里我们用到了es 3.0里面的新技术vao(vertex array object)以及2.0里面的vbo。关于vao和vbo,我们会专门展开一章来探讨,现在大家知道就行啦。
接下来便到了渲染阶段,这里的代码需要写在
-(
void
)glkView:(
GLKView
*)view drawInRect:(
CGRect
)rect方法里。
- -(void)glkView:(GLKView *)view drawInRect:(CGRect)rect
- {
- glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
- glBindVertexArray(vertexID);
- glUseProgram(program);
- glDrawArrays(GL_TRIANGLES, 0, 3);
- glBindVertexArray(0);
- glBindBuffer(GL_ARRAY_BUFFER, 0);
- glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);
- }
代码阶段便编写完成啦,保存运行,出现如下界面便大功告成啦。