【LWJGL官方教程】渲染

翻译 2015年10月28日 19:07:51

原文:https://github.com/SilverTiger/lwjgl3-tutorial/wiki/Rendering
译注:并没有逐字逐句翻译一切,只翻译了自己觉得有用的部分。另外此翻译仅供参考,请一切以原文为准。代码例子文件链接什么的都请去原链接查找。括号里的内容一般也是译注,供理解参考用。总目录传送门:http://blog.csdn.net/zoharwolf/article/details/49472857

这次教程终于要用OpenGL 3.2核心profile来做渲染了。
注意源代码也提供了OpenGL 2.1的一个版本。

Creating the context 创建上下文

在我们开始之前,先要告诉GLFW要用的是OpenGL 3.2核心profile的上下文,用以下代码就可以:

glfwDefaultWindowHints();
glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 2);
glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE);
long window = glfwCreateWindow(width, height, title, NULL, NULL);

我们先设置窗口的hint一律为默认,用glfwDefaultWindowHints()即可。这样做,防止之前已经用其他hint创建过其他窗口影响到我们这次的创建。
GLFW_CONTEXT_VERSION_MAJOR和GLFW_CONTEXT_VERSION_MINOR顾名思义,就是要告诉GLFW创建的是3.2版本的上下文。
在GLFW_OPENGL_PROFILE,我们指定要使用核心功能。如果你想用低于3.2版本的OpenGL,你需要指定的是GLFW_OPENGL_ANY_PROFILE,默认其实就是这个值。
GLFW_OPENGL_FORWARD_COMPAT这个hint指定OpenGL的上下文是否应该向前兼容,如果设定成TRUE,它会停用所有的废弃功能。如果是用OpenGL3.0版本以下,请无视这个hint。

如果你的图形卡不支持 OpenGL 3.2版本,创建的窗口会是NULL,如果那样的话,试着用以下代码创建一个传统的OpenGL 2.1上下文。

glfwDefaultWindowHints();
glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 2);
glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 1);
long window = glfwCreateWindow(width, height, title, NULL, NULL);

Vertex Array Objects 顶点数组对象

现在,我们有了窗口,窗口里也有我们要的上下文了,可以开始初始化渲染。
首先应该创建一个顶点数组对象,简称VAO(Vertex Array Object),它用来储存所有的链接,这些链接用来连结你的顶点缓冲对象和属性们。所以,记得要最先创建VAO然后绑定它。

int vao = glGenVertexArrays();
glBindVertexArray(vao);

你能在LWJGL3的GL30类里找到这两个方法。因为版本是3,所以如果你用的是OpenGL2.1上下文,就别用它们了。

Vertex Buffer Objects 顶点缓冲对象

在老式的固定功能管线里,你只能在每次glBegin(target)和glEnd()间的渲染调用里传递你的顶点(指老版本的OpenGL的机理),但是现代的方法却是把它们放在顶点缓冲对象VBO(Vertext Buffer Object)里。
VBO用来储存所有你GPU里的顶点数据。LWJGL里,你需要创建一个缓冲将顶点传到GPU。在我们的简单例子里,就用入门教程里的那个三角形。创建缓冲的话,就用LWJGL里的BufferUtil来创建一个合适的FloatBuffer。

注意,为了方便起见,顶点是逆时针排序的。

FloatBuffer vertices = BufferUtils.createFloatBuffer(3 * 6);
vertices.put(-0.6f).put(-0.4f).put(0f).put(1f).put(0f).put(0f);
vertices.put(0.6f).put(-0.4f).put(0f).put(0f).put(1f).put(0f);
vertices.put(0f).put(0.6f).put(0f).put(0f).put(0f).put(1f);
vertices.flip();

别忘了来一下vertices.flip()!这很重要,因为不这样的话你JVM会崩出一个EXCEPTION_ACCESS_VIOLATION。
创建缓冲之后,把它上传到GPU。但是在那之前,我们需要先创建并绑定一个VBO。

int vbo = glGenBuffers();
glBindBuffer(GL_ARRAY_BUFFER, vbo);
glBufferData(GL_ARRAY_BUFFER, vertices, GL_STATIC_DRAW);

这样我们有了一个存在GPU上的VBO。需要注意我们用的是一个交错VBO,既有顶点数据又有色彩数据。我们马上就会看到怎样指定数据了。

其实也可以用两个VBO分别存顶点和色彩数据。

Shaders 着色器(一般就直接称之为shader了)

初始化的下一步是创建和编译shader。在OpenGL里,用的是GLSL(OpenGL Shading Language),跟C语言略像。
本教程我们就用两个简单的shader,一个顶点shader,一个片断shader,在每个shader程序里一般也都要有这两个shader。

Vertex Shaders 顶点shader

顶点shader用每个顶点和它的属性去计算最终的顶点位置(如果以后用镶嵌shader或几何shader的话,顶点shader可能仅仅是计算一个更新后的顶点位置)。它也传递片段shader需要的数据,比如色彩和纹理坐标。
然后,来看看我们的shader例子。

#version 150 core

in vec3 position;
in vec3 color;

out vec3 vertexColor;

uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;

void main() {
    vertexColor = color;
    mat4 mvp = projection * view * model;
    gl_Position = mvp * vec4(position, 1.0);
}

第一行指定使用的GLSL版本。OpenGL 3.2使用GLSL版本是1.50,OpenGL 2.1用的版本是1.20。想快递查找所有的对应版本,看这篇教程的结尾处表格。
in关键字表示这些变量是从你的程序代码里传进来的,在这里是两个三元向量,保存位置和色彩用,具体值由每个顶点提供。
out变量将会传到下一个shader去,在这里也就是要传到片段shader,值也是由每个顶点提供。
最后,uniform变量是全局GLSL变量,也由程序代码传来,区别是,它们在每个顶点里的值相同。

最后看main方法,在顶点shader里,你实际上只需要设置gl_Position来决定最终的顶点位置。
在本例中,我们有out变量vertexColor,所以我们得告诉shader变量里面是什么。
我们还有model、view、projection矩阵用来计算MVP矩阵,注意你必须用反顺序计算它们。(MVP矩阵,在本教程后面会详细介绍)

最后我们用MVP矩阵乘以position,得到最终的顶点位置。

如果你用OpenGL 2.1,用以下shader代替上面的。

#version 120attribute vec3 position;
attribute vec3 color;

varying vec3 vertexColor;

uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;

void main() {
    vertexColor = color;
    mat4 mvp = projection * view * model;
    gl_Position = mvp * vec4(position, 1.0);
}

这shader和其他顶点shader相似,只是关键字略有变化。你可以把attribute就当成in来看,它们都来自程序代码。varying就是out,传到下一个shader。

Fragment Shaders 片段shader

通过顶点shader,顶点们被转换为基本的象素点,这些象素被称为片段。片段shader会计算最后每个片段要输出的色彩。

#version 150 core

in vec3 vertexColor;

out vec4 fragColor;

void main() {
    fragColor = vec4(vertexColor, 1.0);
}

注意in变量和顶点shader中的out变量有同样的名字。
out变量用来储存片段的输出色彩。
main方法中,只需要传递转换后的顶点颜色到out变量里,然后out变量输出片段色彩。

如果你用OpenGL 2.1,用以下shader替代上面的。

#version 120
varying vec3 vertexColor;

void main() {
    gl_FragColor = vec4(vertexColor, 1.0);
}

你会看到其实跟其他片段shader几乎一样。
varying变量就是in变量,也跟之前的顶点shader里的varying变量名字相同。
传统OpenGL 2.1里不能用out变量,所以你必须用内置变量gl_FragColor来输出色彩。

Compiling Shaders 编译shader

现在我们了解这些shader怎样工作了,我们最后创建并编译它们。
和之前处理东西的流程相似,需要调用glCreateShader(type)来创建。之后设定shader源并编译它。shader源就是连在一起的GLSL代码,可以直接写成一个string,但是注意里面要有/n来换行,至少在声明版本的那行代码后必须要换行。

int vertexShader = glCreateShader(GL_VERTEX_SHADER);
glShaderSource(vertexShader, vertexSource);
glCompileShader(vertexShader);

int fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragmentShader, fragmentSource);
glCompileShader(fragmentShader);

最好要检查一下编译是否成功,用shader info log来看。

int status = glGetShaderi(shader, GL_COMPILE_STATUS);
if (status != GL_TRUE) {
    throw new RuntimeException(glGetShaderInfoLog(shader));
}

Shader Programs shader程序

编译后,还差最后一步就可以渲染了。必须把它和shader程序连接在一起。
现在猜猜要怎样处理shader程序,对,调用glCreateProgram()。然后把你的shader们挂在程序上连结在一起。

int shaderProgram = glCreateProgram();
glAttachShader(shaderProgram, vertexShader);
glAttachShader(shaderProgram, fragmentShader);
glBindFragDataLocation(shaderProgram, 0, "fragColor");
glLinkProgram(shaderProgram);

你可能注意到了,glBindFragDataLocation(shaderProgram, 0, “fragColor”)这句之前没有解释过,这是因为这句可写可不写,因为我们在片段shader里只有一个out变量,所以默认它就会被绑定一个序号0。
这命令仍然只在GL30里才有效,所以用OpenGL2.1上下文的就别写了。
连结程序后,用程序的info log检查一下是否成功。

int status = glGetProgrami(shaderProgram, GL_LINK_STATUS);
if (status != GL_TRUE) {
    throw new RuntimeException(glGetProgramInfoLog(shaderProgram));
}

之后,可以使用shader程序了。

glUseProgram(shaderProgram);

Specify Vertex Attributes 指定顶点属性

在本教程一开始,我们把顶点和色彩数据放进了VBO,但是我们还没有告诉程序如何使用这些数据。可以用顶点属性来完成这项工作。设置一个顶点属性需要三步:首先取到属性位置,然后激活它,最后指向顶点属性。

int floatSize = 4;

int posAttrib = glGetAttribLocation(shaderProgram, "position");
glEnableVertexAttribArray(posAttrib);
glVertexAttribPointer(posAttrib, 3, GL_FLOAT, false, 6 * floatSize, 0);

int colAttrib = glGetAttribLocation(shaderProgram, "color");
glEnableVertexAttribArray(colAttrib);
glVertexAttribPointer(colAttrib, 3, GL_FLOAT, false, 6 * floatSize, 3 * floatSize);

刚开始的两个方法如其字面意思,之后的glVertexAttribPointer(location, size, type, normalized, stride, offset)需要解释一下。
location不言而喻,就是我们刚得到的属性位置;
size是我们需要告诉程序每个顶点的数据包含了多少值;
type指明属性用哪种数据类型,本例中是float类型;
normailized是你是否想要程序标准化这些值,不过一般这里都用false,更多关于标准化的详细内容可以参照这里
stride和offset,这个很重要,你需要传入的是字节数。stride指的是在相邻的两个顶点属性之间隔了几个字节,本例中每个顶点有六个float数值,所以stride值为 6*一个float占字节数= 6*4 = 24。offset则指定了第一个顶点属性的偏移量,在我们的VBO里,顶点位置数据是每个顶点六数值中一开始的那个数值,所以偏移量就是0。而三个位置数值之后才是颜色数据,所以颜色属性的依稀量是3*一个float占字节数= 3*4 = 12。

Set uniform variables 设置uniform变量

初始化完成了。最后就是设置uniform变量了。
本教程我们有三个矩阵作为uniform变量,但是你也可以传其他类型的数据。如果你不晓得怎样做向量和矩阵的数学计算,你应该看看这里这里,或者参考里提到的链接。(反正全是英文,不如去百度搜搜中文的,其实就是些线代的基本知识)
但是其实如果你不想的话,你并不需要自己去实现这些东西,因为在本教程里已经有非常基础的向量和矩阵类提供了,你可以在这里看看它们。
想要一个更完整的数学计算库,你应该看看Java OpenGL Math Library(JOML)。(亲自试用了过了,这个JOML里的矩阵格式和范例代码里的矩阵是转置关系,使用的时候居然不用flip……)
设置uniform变量和设置顶点属性相似,先拿到位置然后再设置它。

int uniModel = glGetUniformLocation(shaderProgram, "model");
Matrix4f model = new Matrix4f();
glUniformMatrix4fv(uniModel, false, model.getBuffer());

int uniView = glGetUniformLocation(shaderProgram, "view");
Matrix4f view = new Matrix4f();
glUniformMatrix4fv(uniView, false, view.getBuffer());

int uniProjection = glGetUniformLocation(shaderProgram, "projection");
float ratio = 640f / 480f;
Matrix4f projection = Matrix4f.orthographic(-ratio, ratio, -1f, 1f, -1f, 1f);
glUniformMatrix4fv(uniProjection, false, projection.getBuffer());

glUniformMatrix4fv(location, transpose, values)的参数很明显,location就是得到位置。transpose如果设定为true,矩阵在使用前会被转置。values设一个想要填充的缓冲。
为了计算一个正交矩阵,可以看glOrtho(left, right, bottom, top, near, far),里面描述了怎样计算它。(其实也可以百度一下glOrtho看看中文的介绍)
你自己写的时候需要注意,当你把值放入FloatBuffer中时,你应该清楚在OpenGL里,矩阵是列主序矩阵。(列主序矩阵可以参见这里:http://blog.csdn.net/zhihuier/article/details/9098179

现在是时候解释一下model、view、projection矩阵了。(即MVP矩阵,模型视图投影矩阵)
模型(model)矩阵会将物体的本地坐标计算到世界坐标上。在OpenGL中,你使用它来缩放、平移、旋转物体。(本地→世界)
视图(view)矩阵将世界坐标计算为视点坐标,视点坐标用于决定摄像机位置。但是实际上你并没有移动摄像机,你移动的是世界,所以为了得到正确的视图矩阵,你必须以摄像机平移相反的方向平移世界。(想象一下电脑屏幕是摄像机,当你想移动摄像机移动画面的时候其实是整个世界在向反方向动,你的电脑并没有动)(世界→摄像机)
投影(projection)矩阵将视点坐标计算成修剪坐标,你用这矩阵来实现一个正交或透视的矩阵。(摄像机→修剪)
上面提过了,计算MVP的时候必须反着乘三个矩阵。这是因为最后其实是:新矩阵 = 投影矩阵 * 视图矩阵 * 模型矩阵 * 向量,所以实际上它的计算顺序是:新矩阵 = 投影矩阵 * (视图矩阵 * (模型矩阵 * 向量)) (译注:矩阵乘法满足结合律,所以这句话的意思其实是说,本地→世界的转换矩阵M肯定要和向量相乘才能正确生效,故MVP不能正着乘,不然就是M*V*P*向量,P和向量相乘了,计算结果肯定不对。至于为何不是“向量*M*V*P”这样的顺序,这是因为前边提过,openGL里用的是列主序矩阵,向量用的也都是列向量,所以应该倒过来乘才能正确计算。如果是在DirectX里,用的是行主序矩阵和行向量,那就是正着乘了。)

Rendering 渲染

最后我们渲染我们的三角形,只需要调用glDrawArrays(type, first, count)。别忘了在那之前清一下屏。

glClear(GL_COLOR_BUFFER_BIT);
glDrawArrays(GL_TRIANGLES, 0, 3);

第一个方法就是清除屏幕缓冲里的色彩。如果不这样做会得到很诡异的效果。
glDrawArrays(type, first, count)会描画目前绑定的VBO。type值大部分情况下都是GL_TRIANGLES,你也可以用一些其他的三角形类型比如GL_TRIANGLE_STRIP,或者其他类型比如GL_POINTS。既然我们要画出所有顶点,start那就设成0,有三个顶点要画,所以count是3。

Interpolating with alpha value 使用alpha插值

但是一个不动的三角形非常无聊,所以我们让它像入门范例里那样转起来!还得在之前的游戏循环教程里的update(float delta)和render(float alpha)吗?现在就是用到它们的时候了。
要转动三角形,我们需要设置我们的模型矩阵为一个旋转矩阵,源代码中已经提供了方法,所以只要自己实现它就可以了,参见glRotate(angle, x, y, z).
除了旋转矩阵我们还需要当前的角度和每秒要转的角度。在范例代码中,三角形每秒旋转50度。

private int uniModel;
private float angle = 0f;
private float anglePerSecond = 50f;

在我们的update方法里,我们用delta值计算当前循环的角度,在render方法里,我们只需将当前的角度用到模型矩阵上。

public void update(float delta) {
    angle += delta * anglePerSecond;
}

public void render(float alpha) {
    glClear(GL_COLOR_BUFFER_BIT);

    Matrix4f model = Matrix4f.rotate(angle, 0f, 0f, 1f);
    glUniformMatrix4fv(uniModel, false, model.getBuffer());

    glDrawArrays(GL_TRIANGLES, 0, 3);
}

对可变时步来讲,这样就已经OK了。再看看固定时步会怎样,假设UPS设定为5,这个循环会变得结结巴巴的。
怎么办?这就需要用的alpha插值了。
为了用到它,我们还需要另一个变量,上次循环时的角度。

private int uniModel;
private float previousAngle = 0f;
private float angle = 0f;
private float anglePerSecond = 50f;

这样我们就可以插入本次角度和上次角度的中间状态。你仔细想想就会意识到,你的屏幕将会延迟一帧,但是这没什么问题。所有的专业的游戏都是这样做的,使用固定时步,你不会注意到的。
需要在update方法里设置之前的角度。

public void update(float delta) {
    previousAngle = angle;
    angle += delta * anglePerSecond;
}

插值将会在render方法中生效,并应用在旋转矩阵之上。

public void render(float alpha) {
    glClear(GL_COLOR_BUFFER_BIT);

    float lerpAngle = (1f - alpha) * previousAngle + alpha * angle;
    Matrix4f model = Matrix4f.rotate(lerpAngle, 0f, 0f, 1f);
    glUniformMatrix4fv(uniModel, false, model.getBuffer());

    glDrawArrays(GL_TRIANGLES, 0, 3);
}

通过两种状态之前的插值,无论是5UPS还是60UPS都没问题,它看起来将始终是一个平滑的变换。

Cleaning up 清除

你的程序结束时,好习惯是要将图形数据清除掉。

glDeleteVertexArrays(vao);
glDeleteBuffers(vbo);
glDeleteShader(vertexShader);
glDeleteShader(fragmentShader);
glDeleteProgram(shaderProgram);

下一篇,讲怎样使用材质。

【LWJGL2 WIKI】【基础篇】基础1:显示

原文:http://wiki.lwjgl.org/wiki/LWJGL_Basics_1_%28The_Display%29Introduction 介绍LWJGL库使用自带的轻量级本地窗口(即所谓的...

【LWJGL官方教程】总目录

原文:https://github.com/LWJGL/lwjgl3-wiki/wiki/2.6.-Tutorial-Index 译注:慢慢翻译,主要是给自己看的。基础 开始使用LWJGL 入门 ...

j2me游戏开发之LWJGL(Lightweight Java Game Library)

LWJGL(Lightweight Java Game Library)它可以帮助Java程序员开发有着商业性质的游戏.LWJGL为开发者提供简单易用的API来访问OpenGL (Open Graph...

【LWJGL官方教程】Introduction 入门

原文:https://github.com/SilverTiger/lwjgl3-tutorial/wiki/Introduction 译注:并没有逐字逐句翻译一切,只翻译了自己觉得有用的部分。另外...

【LWJGL官方教程】输入处理

原文:https://github.com/SilverTiger/lwjgl3-tutorial/wiki/Input 译注:并没有逐字逐句翻译一切,只翻译了自己觉得有用的部分。另外此翻译仅供参考...

【LWJGL2 WIKI】【现代OpenGL篇】用投影、视图、模型矩阵画方形

原文:http://wiki.lwjgl.org/wiki/The_Quad_with_Projection,_View_and_Model_matricesIntroduction 介绍在OpenG...

【LWJGL官方教程】Introduction 入门

原文:https://github.com/SilverTiger/lwjgl3-tutorial/wiki/Introduction 译注:并没有逐字逐句翻译一切,只翻译了自己觉得有用的部分。另外...

【LWJGL2 WIKI】【现代OpenGL篇】用DrawArrays画方形

原文:http://wiki.lwjgl.org/wiki/The_Quad_with_DrawArraysIntroduction 介绍随着3.0发布,“弃用”机制被引入。所有被标记为弃用的函数,在...

【LWJGL官方教程】批渲染

原文:https://github.com/SilverTiger/lwjgl3-tutorial/wiki/Batching 译注:并没有逐字逐句翻译一切,只翻译了自己觉得有用的部分。另外此翻译仅...

【LWJGL官方教程】Game loops 游戏循环

原文:https://github.com/SilverTiger/lwjgl3-tutorial/wiki/Game-loops 译注:翻译仅供参考,请以原文为准。代码请看原文中的链接。括号里的内...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【LWJGL官方教程】渲染
举报原因:
原因补充:

(最多只允许输入30个字)