OpenGL Draw函数族以及渲染优化

前言

       影响OpenGL绘制的效率直接和OpenGL API相关的一部分来自于其在CPU上执行的开销,一部分来自于渲染本身在GPU上执行的开销。CPU上执行的开销主要是由于调用API导致的OpenGL驱动的开销,这类开销一般可以分成三大类:
(1)由于驱动提交渲染命令的开销,即调用OpenGL draw函数造成;
(2)第二类是由于驱动提交状态命令导致的状态命令切换的开销,这种切换命令包括了固定管线中的各种光照函数的切换,片段测试与操作的切换,不同Shader, Texture之间的切换,甚至包括VBO, UBO等GPU缓冲对象之间的开销,这两类情况在D3D API使用时也是一样,甚至有表明在D3D中更显著;
(3)第三类就是其他由于OpenGL API被调用导致加载或是同步数据的驱动开销。

       通过批次合并(即将合理的方式将渲染状态相同多个可渲染物的draw绘制数据合并到一批绘制),以及实例渲染(即将诸多几何数据近似的可渲染物通过一次drawInstance函数绘制,而将这些可渲染物的区别通过数组传入渲染命令中),可以显著降低第一类开销。通过对可渲染物进行有效的排序,将状态相同的部分的可渲染物尽可能依次渲染,从而减少状态的切换,可以较明显减少第二类开销。因此在执行渲染之前,可以通过上述两种方式对数据进行预处理,从而达到目的,这两种策略已经成为3D渲染引擎最常用的提高效率的方法。对此本文不再进行讲解,本文主要聚焦通过新式的OpenGL API来尽可能减少这三类开销。

1.最基本的Draw函数

1.1 glDrawArrays

  • glDrawArrays(GLenum mode, GLint first, GLsizei count)

       为最常用的Draw函数,按mode指定的图元类型,画出vertex buffer中第first个起的count个顶点。

1.2 glDrawElements

  • glDrawElements(GLenum mode, GLsizei count, GLenum type, GLvoid* indices)

       使用glDrawElements前,除了类似glDrawArrays一样准备好VAO和VBO外,还需要产生并绑定EBO(Element Buffer Object),注入的数据为一个类型为type的数组,其元素表示vertex buffer中顶点索引。glDrawElement以按照指定的图元类型mode,以其前count个元素作为VBO中顶点数据的索引。

2.基本Draw函数的变种

2.1 *Instanced

  • glDrawArraysInstanced(GLenum mode, GLsizei first, GLsizei count, GLsizei primcount)
  • glDrawElementsInstanced(mode, count, type, indicesPtr, instanceCount)
           当vertex buffer中的顶点会被多个图元频繁使用时,DrawElements比DrawArrays更为高效;
           当需要将一个模型多次渲染,并且每次具有不同的位置或某种属性时,DrawArraysInstanced为更为有效简洁。
           在应用中有时需要多次画同一个模型,但每次该模型的部分属性有所不同。例如画楼群,森林时,可以使用同一个模型,每次为该模型赋予不同的坐标变换,颜色等等。这样需要调用多次Draw函数,每次使用新的属性数据等。
           DrawArraysInstanced便是为这种需要准备的,它接收5个参数,前4个参数与DrawArrays一致。我们将其中指定的count个顶点构成的模型称为一个Instance,第5个参数primcount表示要重复画多少个instance。使用glVertexAttribDivisor(GLuint index, GLuint divisor)将序数为index的属性指定为instance属性,每隔divisor个instance,vertex shader中注进buffer一个新的属性值。

2.2 *BaseVertex

  • glDrawElementsBaseVertex(mode, count, type, indicesPtr, baseVertex)
           用于扩展DrawElements,当根据indices作为索引从vertex buffer中读取数据时,有时希望允许一定数目顶点的偏移——例如当vertex buffer中存着动画的多帧,需要按照一定的偏移取每一帧的数据进行渲染。该偏移通过一个额外的参数GLint basevertex指定。

2.3 *BaseInstance

       用于扩展Draw*Instanced,通过一个额外的参数GLint baseInstance指定按照baseInstace作为偏移从buffer中取出instance属性的数据。

2.4 *BaseInstanceBaseVertex

       同时具有前面两种作用。

2.5 *Indirect

间接命令绘制的缓存对象需要被存储于GL_DRAW_INDIRECT_BUFFER中。

  • glDrawArraysIndirect(GLenum mode, const void*indirect)
typedef struct DrawArraysIndirectCommand_t{
	GLuint count;
	GLuint primCount;
	GLuint first;
	GLuint baseInstance;
} DrawArraysIndirectCommand;
  • glDrawElementsIndirect(GLenum mode, GLenum type, const GLvoid * indirect)
typedef struct DrawElementsIndirectCommand_t{
	GLuint count;
	GLuint primCount;
	GLuint firstIndex;
	GLuint baseVertex;
	GLuint baseInstance;
} DrawElementsIndirectCommand;

       DrawArraysIndiret具有DrawArraysInstanced一样的参数及功能,只不过其参数间接从类型为GL_DRAW_INDIRECT_BUFFER的buffer中读出。
       DrawElementsIndiret具有DrawElementsInstanceBaseVertex一样的参数及功能,只不过其参数间接从buffer中读出。

2.6 小结

两个常用函数

  • glDrawElementsInstancedBaseVertex(mode, count, type, indicesPtr, instanceCount, baseVertex)

       当baseVertex等于0时,此API即退化为glDrawElementsInstanced;当instanceCount等于1时,此API退化为glDrawElementsBaseVertex。

  • glDrawElementsInstancedBaseVertexBaseInstance(mode, vertexCount, type, instanceCount, baseVertex, baseInstance)

       当baseInstance等于0时,此API即退化为glDrawElementsInstancedBaseVertex。

       这样就将一次渲染据大多数命令都直接通过放置在GPU上,减少了绘制API在CPU上的开销。但是上述版本的非直接绘制API用法并不是本文要推荐的API,因为如上述用法,当绘制多个可渲染物时,其实还是需要多次绑定indirect buffer并多次调用glDrawElementsIndirect,大量绑定indirect buffer就会导致新的开销,也就是前面说的第二类开销。因此非直接绘制技术只有在大量绘制能合并的情况下才有效,即用一个indirect buffer将多次渲染的命令数据整合。因此,现在来介绍第二个版本的非直接绘制glMultiDrawArraysIndirect(mode, indirectPtr, drawwCount, stride)glMultiDrawElementsIndirect(mode, type, indirectPtr, drawwCount, stride),这里的indirectPtr即非Multi版本API中indirectPtr的数组,drawCount指该数组的个数, stride表示步长,若等于0说明绘制数据来源于紧密的数据流。由于Multi版本的API可将多次绘制命令一起存在GPU,从而大大减少了多次调用绘制API的次数,因此这两个API往往是非直接绘制技术用才真正使用的。

3.多重Draw函数

  • glMultiDrawArrays(GLenum mode, const GLint * first, const GLint * count, GLsizei primcount)
  • glMultiDrawElementsIndirect(GLenum mode,GLenum type,const void*indirect,GLsizei primcount,GLsizei stride)

在GPU中调用,其实现类似:

void glMultiDrawArrays(GLenum mode,const GLint * first,onst GLint * count, GLsizei primcount)
{
    GLsizei i;
    for (i = 0; i < primcount; i++)
    {
        glDrawArrays(mode, first[i], count[i]);
    }
}

       glDrawElementsInstancedBaseVertexBaseInstance,这里简化下用其退化的版本说明,即多次调用glDrawElementsBaseVertex,这是用单个绘制API所不能代替的,这时非独立绘制的好处就体现出来了,但是前提是这些绘制的数据单个顶点属性都来自一个数据流,然后渲染状态也一致(实际三维渲染中大量情况都如此)。假设不用非直接绘制,每个draw的渲染命令数据是16或20字节,若绘制100万批次,那单渲染命令就是20G!这么多数据每次让OpenGL驱动在CPU上执行的话,那是巨大的开销,现在通过非直接绘制将这种开销理论上降为0!

4.无绑定技术(bindless)

       在渲染中不同纹理,VBO,UBO等之间的切换开销是各种状态开销中比较明显的,尤其是这些对象数量众多时较为明显。比如对于纹理,传统的解决办法主要有纹理图册(Texture Atlases),就是将多个纹理合并到一张图中,然后重新给出不同的纹理坐标;另外还有纹理数组(Texture Array),即将这些纹理组装成数组传到OpenGL中。这些方法都存在可能会将不需要的纹理数据负载到管线中,以及纹理的某些参数必须一致的情况:纹理图层必须各种环绕,过滤等都一致,纹理数组也得必须原来的纹理格式和形状一致。通过无绑定技术即可在改动原有代码很少的基础上解决上述问题。
       glBindTexture, glBindBuffer等API的调用实质上就是驱动对相应的buffer和texture进行查找与解引用,之前文章《Nvidia OpenGL无绑定VBO与UBO技术》(http://www.opengpu.org/home.php?mod=space&uid=36152&do=blog&id=595),讲过的无绑定VBO与UBO原理。这里在说下无绑定纹理,与无绑定VBO与UBO相比,这里无绑定纹理是一个ARB通用标准,而不是仅N卡支持的标准,在OpenGL 4.0或以上版本的机器和驱动上支持。同样无绑定纹理也只有在每帧需要做较多的纹理切换时才效果明显,使用方法与传统的纹理使用区别如下实例代码:

//初始化时
GLuint texture;
GLuint64 textureHandle;
glGenTexture(1, texture);
//通过glTexImage或glTexStorage初始化纹理
textureHandle = glGetTextureHandleARB(texture);
glMakeTextureHandleResidentARB(textureHandle);
//渲染时:
glUniformHandleui64ARB(location, textureHandle);
//渲染, draw call

5.稀疏纹理技术(sparse)

       当大规模纹理被OpenGL载入时,当纹理数据的大小超过当前显卡能分配的显存时,这时候纹理会被分页的加载到显存中,这种分页不是稳定的,这就在一定程度上降低了使用大纹理程序的性能,甚至在某些情况下会导致程序崩溃。这种开销也是在驱动上进行的,同样才CPU端。在OpenGL 4.3及以上版本中,可以利用稀疏纹理技术解决这个问题。所谓稀疏纹理技术,就是OpenGL对输入的纹理按照用户指定的参数固定的对大纹理进行了分页与金字塔处理,形成一个虚拟的被分割后纹理,因此称“稀疏”纹理。这使得纹理在实际加载中实现了稳定的动态分页调度,从而改善了大纹理加载的效率。分页纹理的原理

使用方式如下:
glGenTexture(1, &id);
glBindTexture(GL_TEXTURE_2D, id);
//首先要调用纹理参数接口,让OpenGL知道使用稀疏纹理特性
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_SPARSE_ARB, GL_TRUE);
// 分配空间,创建了一个金字塔为10层,长宽各为1024像素的纹理
glTexStorage2D(GL_TEXTURE_2D, 10, GL_RGBA8, 1024, 1024);

// 得到可用的分页数
glGetInternalformativ(GL_TEXTURE_2D, GL_NUM_VIRTUAL_PAGE_SIZES_ARB, GL_RGBA8, sizeof(GLint), &num_sizes);
// 得到实际的页大小
glGetInternalformativ(GL_TEXTURE_2D, GL_VIRTUAL_PAGE_SIZE_X_ARB,
GL_RGBA8, sizeof(page_sizes_x), &page_sizes_x[0]);
glGetInternalformativ(GL_TEXTURE_2D, GL_VIRTUAL_PAGE_SIZE_Y_ARB, GL_RGBA8, sizeof(page_sizes_y), &page_sizes_y[0]);
//设置分页的大小
glTexParameteri(GL_TEXTURE_2D, GL_VIRTUAL_PAGE_SIZE_INDEX_ARB, n);

//然后将分配好的这些虚拟空间提交到OpenGL中,并进行真正存储空间的分配
glTexPageCommitmentARB(GL_TEXTURE_2D, level, xoffset, yoffset, zoffset, width, height, depth, commit);
//之后再将纹理原始数据和常规纹理一样载入
glTexImage2D(GL_TEXTURE_2D, level, internalFormat, width, height, border, format, type, dataPtr);

6.使用新的缓冲区分配接口解决由于GPU缓冲区对象数据同步带来的开销

       在OpenGL中有一组叫glMapBuffer/glMapBufferRange的API,这个API将GPU缓存中的数据映射到内存的地址上,使得内存可以直接通过这个地址将数据读回或将数据写入到该GPU缓冲中。这是这个函数已经被各方面证明了出奇得慢,慢到似乎不管填什么参数,在渲染时如果稍微多次调用该函数,那么时间的开销就无法接受,必须换其他方法(D3D中类似的API也慢,但是要比OpenGL要好些,还没有到必须换其他方法的程度)。可以通过使用glGetBufferSubData/glBufferSubData来分别替换map的读写操作。之所以这个API慢,是因为调用该API进行了对GPU的同步操作。

       对于常常需要修改其内容的GPU缓存对象,解决此问题的方法还有使用glBufferStorage(target, size, dataPtr, flags)这个API来代替进行数据的分配,使得在后续使用glMapBuffer/glMapBufferRange时可以不进行同步操作,也就是说缓冲区在被映射的状态下,GPU也能使用这个对象而不发生任何错误,并且可以在被映射的状态下不管是CPU还是GPU哪端更改了数据,被更新后的都立刻在另一端可见。GPU缓冲区对象的这个特性在OpenGL 4.4或更高版本中得以支持,使用方式如下:

glGenBuffer(1, &buffer);
glBindBuffer(GL_ARRAY_BUFFER, buffer);
GLbitfield flags = GL_MAP_WRITE_BIT
| GL_MAP_PERSISTENT_BIT //在被映射状态下不同步
| GL_MAP_COHERENT_BIT //数据对GPU立即可见
//为Buffer分配数据,取代之前的glBufferData
glBufferStroage(GL_ARRAY_BUFFER, size, data, flags);
//映射一次即可,保存该指针后用于渲染时使用
GLvoid* dataPtr = glMapBuffer(GL_ARRAY_BUFFER, flags);

//渲染时用dataPtr修改数据
.....
//接着可以直接调用draw call,不需要调用glUnmapBuffer,如果需要同步的话,需要在draw之前手动调用glFenceSync与glClientWaitSync。
glDrawArray(mode, first, count);

       已经有证明非同步下的GPU缓存对象进行map的效率比要求同步下明显要高,这时候大量调用glMapBuffer/glMapBufferRange不再是效率瓶颈。

参考文献
OpenGL中的绘制命令,https://blog.csdn.net/yyww322/article/details/47807637
利用现代OpenGL API大幅度减少由于执行驱动导致CPU的开销,https://blog.csdn.net/kasteluo/article/details/52810551

  • 6
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1.创建一个OpenGL窗口: 在这个教程里,我将教你在Windows环境中创建OpenGL程序.它将显示一个空的OpenGL窗口,可以在窗口和全屏模式下切换,按ESC退出.它是我们以后应用程序的框架. 理解OpenGL如何工作非常重要,你可以在教程的末尾下载源程序,但我强烈建议你至少读一遍教程,然后再开始编程. 2.你的第一个多边形: 在第一个教程的基础上,我们添加了一个三角形和一个四边形。也许你认为这很简单,但你已经迈出了一大步,要知道任何在OpenGL中绘制的模型都会被分解为这两种简单的图形。 读完了这一课,你会学到如何在空间放置模型,并且会知道深度缓存的概念。 3.添加颜色: 作为第二课的扩展,我将叫你如何使用颜色。你将理解两种着色模式,在左图中,三角形用的是光滑着色,四边形用的是平面着色。 注意三角形上的颜色是如何混合的。 颜色为OpenGlL 工程增加很多。通过理解平面着色(flat coloring)和平滑着色(smooth coloring),你能显著的改善你的OpenGL Demo的样子。 4.旋转: 在这一课里,我将教会你如何旋转三角形和四边形。左图中的三角形沿Y轴旋转,四边形沿着X轴旋转。 这一章将引入两个变量, rtri 被用来存储三角形的角度, rquad存储四边形的角度。 和容易创建一个多边形组成的场景。让这些物体动起来是整个场景变得生动起来。在后面的课程钟我将教给你如何绕屏幕上的一个点旋转物体,使得物体绕屏幕而不是它的轴转动。 5.3D形体: 既然我们已经领会到多边形,方形,色彩和旋转。现在该建立3D物体了。我将使用多边形和矩形c创建3D物体。这次我们将扩展上一章的教程,并且将三角形转换成一个彩色的棱锥,把正方形变为一个实心正方体。棱锥使用混合色,正方体每个面使用一种颜色。在3D空间创建物体可能很费时间,但是所获得的结果(收获)值得这样做。充分发挥你的想象力吧。 6.纹理映射: 你想要它,它现在就在这里了,那就是 ... 纹理映射!!!在这一章我将教会你如何将一幅位图(bitmap)映射到正方体的六个面上去。我们将使用第一章的OpenGL代码来创建工程。创建一个空的窗口比修改上一课的代码更容易。 你将会发现第一章的代码在对于快速创建工程来说是及其有价值的。第一章的代码为你设置好了一切,你所需要做的只是集中精力为效果编程。 7.纹理滤波, 光照和键盘控制: 好的,我希望到现在你已经理解了所有的东西,因为这是一个巨大的教程。我想教给你两个新的方法来过滤(filter)你的纹理,简单的光照,键盘控制并且还可能更多 :) .如果你对到这一课为止你所学的东西并不充满信心,那就回头复习一下。玩一下其它课程的代码,不要操之过急。最好专心把每一课学好,而不是蜻蜓点水,只知道如何把东西做出来。 8.混合 有理由等一下,一个来自很酷的Hypercosm的程序员伙伴问(我)他是否可以写一章关于混合的教程。第八课通常正是讲混合的,所以太巧了。这一章教程扩展了第七章。混合是一项很酷的技术 .. 我希望你们能好好享受这一章教程。这一章的作者是Tom Stanis他在这制作一章上花费了很多精力,所以让他知道你觉得怎么样。混合可不是一个好讲的话题。 9.在3D空间中移动位图: 这一章覆盖了一些你们要求的主题,你想知道如何移动你在3D屏幕空间上创造的物体。你想要知道如何在屏幕上绘制一幅位图,并且位图的黑色部分不会覆盖它后面的东西。你想要简单的动画,想要更多的混合的应用,这一章将教会你所有这些。You'll notice there's no spinning boxes(yaker:很惭愧这一句我不是很明白)。前面的课程覆盖了OpenGL的基础,每一章都基于前面的内容。前面的课程涵盖了基础的OpenGL,每一课都是在前一课的基础上创建的。这一课是前面几课知识的综合,当你学习这课时,请确保你已经掌握了前面几课的知识。 10.加载3D世界,并在其中漫游: 你一直期待的教程来了!这一章友一个叫Lionel Brites的伙伴制作。这一课里你讲学到如何导入一个3D世界。代码仍然使用第一章的,但是,课程页面只是解释了新的部分,包括导入3D场景,在3D世界中移动。下载VC++代码并且在你阅读教程的同时阅读代码。按[B]键控制混合,[F]键控制滤波,[L]键控制光照(但光并不随场景移动),还有[Page UP]和[Page Down]键。我希望你能喜欢Lionel对网站的贡献。我有空的时候我会让这个教程更容易学习。 11.旗帜效果 (飘动的纹理): 这一章教程由Bosco带给你。他就是那个创造了很酷的小Demo: worthless的家伙。他喜欢每个人对他的Demo的反映,并且决定更进一步,在他的Demo的最后解释他怎么实现这么酷的效果的。这一章教程构建在第六章的代码之上。阅读完这一章之后,你将能弯曲,折叠以及操纵你自己的纹理。这绝对是个很漂亮的效果,并且比纹理固定的旗帜好得多。如果你喜欢这一章,请发邮件给bosco让他知道。 12.显示列表 想知道如何加速你的OpenGL程序么?每次为放置一个物体在屏幕上而写很多代码让你厌烦了吧?如果是这样,这一章就是为你准备的。学习如何用OpenGL来显示列表。只用一行代码预构建和显示物体。使用预编译物体加速你的程序。不要再一次又一次写重复的代码。让显示列表为你做所有的工作吧!这一章里我们将建造Q-bert金字塔(Q-bert是一款游戏),感谢显示列表,我们只需要用不多的几行代码。 13.位图字体 这一课我们将创建一些基于2D图像的字体,它们可以缩放,但不能旋转,并且总是面向前方,但作为基本的显示来说,我想已经够了。 14.图像字体 在一课我们将教你绘制3D的图形字体,它们可像一般的3D模型一样被变换。 15.图形字体的纹理映射: 这一课,我们将在上一课的基础上创建带有纹理的字体,它真的很简单。 16.看起来很酷的雾 这一课是基于第7课的代码的,你将学会三种不同的雾的计算方法,以及怎样设置雾的颜色和雾的范围。 17.2D 图像文字 在这一课中,你将学会如何使用四边形纹理贴图把文字显示在屏幕上。你将学会如何把256个不同的文字从一个256x256的纹理图像中分别提取出来,并为每一个文字创建一个显示列表,接着创建一个输出函数来创建任意你希望的文字。 18.二次几何体 利用二次几何体,你可以很容易的创建球,圆盘,圆柱和圆锥。 19.粒子系统 你是否希望创建爆炸,喷泉,流星之类的效果。这一课将告诉你如何创建一个简单的例子系统,并用它来创建一种喷射的效果。 20.蒙板 到目前为止你已经学会如何使用alpha混合,把一个透明物体渲染到屏幕上了,但有的使用它看起来并不是那么的复合你的心意。使用蒙板技术,将会按照你蒙板的位置精确的绘制。 21.线,反走样,计时,正投影和简单的声音 这是我第一个大的教程,它将包括线,反走样,计时,正投影和简单的声音。希望这一课中的东西能让每个人感到高兴。 22.凹凸映射,多重纹理扩展 这是一课高级教程,请确信你对基本知识已经非常了解了。这一课是基于第六课的代码的,它将建立一个非常酷的立体纹理效果。 23.球面映射 这一个将教会你如何把环境纹理包裹在你的3D模型上,让它看起来象反射了周围的场景一样。 24.符号,扩展,剪裁和TGA图像文件的加载 在这一课里,你将学会如何读取你显卡支持的OpenGL的扩展,并在你指定的剪裁区域把它显示出来。 25.变形和从文件中加载3D物体 在这一课中,你将学会如何从文件加载3D模型,并且平滑的从一个模型变换为另一个模型。 26.剪裁平面,蒙板缓存和反射 在这一课中你将学会如何创建镜面显示效果,它使用剪裁平面,蒙板缓存等OpenGL中一些高级的技巧。 27.阴影 这是一个高级的主题,请确信你已经熟练的掌握了基本的OpenGL,并熟悉蒙板缓存。当然它会给你留下深刻的印象的。 28.贝塞尔曲面 这是一课关于数学运算的,没有别的内容了。来,有信心就看看它吧。 29.Blitter 函数 类似于DirectDraw的blit函数,过时的技术,我们有实现了它。它非常的简单,就是把一块纹理贴到另一块纹理上。 30.碰撞检测 这是一课激动的教程,你也许等待它多时了。你将学会碰撞剪裁,物理模拟太多的东西,慢慢期待吧。 31.模型加载 你知道大名鼎鼎的Milkshape3D建模软件么,我们将加载它的模型,当然你可以加载任何你认为不错的模型。 32.拾取, Alpha混合, Alpha测试, 排序 这又是一个小游戏,交给的东西会很多,慢慢体会吧 33.加载压缩和未压缩的TGA文件 在这一课里,你将学会如何加载压缩和为压缩的TGA文件,由于它使用RLE压缩,所以非常的简单,你能很快地熟悉它的。 34.从高度图生成的美丽地形 这一课将教会你如何从一个2D的灰度图创建地形 35.在OpenGL中播放AVI视频 在OpenGL中如何播放AVI呢?利用Windows的API把每一帧作为纹理绑定到OpenGL中,虽然很慢,但它的效果不错。你可以试试。 36.放射模糊和渲染到纹理 如何实现放射状的滤镜效果呢,看上去很难,其实很简单。把渲染得图像作为纹理提取出来,在利用OpenGL本身自带的纹理过滤,就能实现这种效果,不信,你试试。 37.卡通映射 什么是卡通了,一个轮廓加上少量的几种颜色。使用一维纹理映射,你也可以实现这种效果。 38.从资源文件中载入图像 如何把图像数据保存到*.exe程序中,使用Windows的资源文件吧,它既简单又实用。 39.物理模拟简介 还记得高中的物理吧,直线运动,自由落体运动,弹簧。在这一课里,我们将创造这一切。 40.绳子的模拟 怎样模拟一根绳子呢,把它想象成一个个紧密排列的点,怎么样有了思路了吧,在这一课你你将学会怎样建模,简单吧,你能模拟更多。 41.体积雾 把雾坐标绑定到顶点,你可以在雾中漫游,体验一下吧。 42.多重视口 画中画效果,很酷吧。使用视口它变得很简单,但渲染四次可会大大降低你的显示速度哦:) 43.在OpenGL中使用FreeType库 使用FreeType库可以创建非常好看的反走样的字体,记住暴雪公司就是使用这个库的,就是那个做魔兽世界的。尝试一下吧,我只告诉你了基本的使用方式,你可以走的更远。 44.3D 光晕 当镜头对准太阳的时候就会出现这种效果,模拟它非常的简单,一点数学和纹理贴图就够了。好好看看吧。 45.顶点缓存 你想更快地绘制么?直接操作显卡吧,这可是前沿的图形技术,不要犹豫,我带你入门。接下来,你自己向前走吧。 46.全屏反走样 当今显卡的强大功能,你几乎什么都不用做,只需要在创建窗口的时候该一个数据。看看吧,驱动程序为你做完了一切。 47.CG 顶点脚本 nVidio的面向GPU的C语言,如果你相信它就好好学学吧,同样这里也只是个入门。记住,类似的语言还有微软的HLSL,OpenGLGLSL,ATI的shaderMonker。不要选错哦:) 48.轨迹球实现的鼠标旋转
创建一个OpenGL窗口: 在这个教程里,我将教你在Windows环境中创建OpenGL程序.它将显示一个空的OpenGL窗口,可以在窗口和全屏模式下切换,按ESC退出.它是我们以后应用程序的框架. 理解OpenGL如何工作非常重要,你可以在教程的末尾下载源程序,但我强烈建议你至少读一遍教程,然后再开始编程. 2.你的第一个多边形: 在第一个教程的基础上,我们添加了一个三角形和一个四边形。也许你认为这很简单,但你已经迈出了一大步,要知道任何在OpenGL中绘制的模型都会被分解为这两种简单的图形。 读完了这一课,你会学到如何在空间放置模型,并且会知道深度缓存的概念。 3.添加颜色: 作为第二课的扩展,我将叫你如何使用颜色。你将理解两种着色模式,在左图中,三角形用的是光滑着色,四边形用的是平面着色。 注意三角形上的颜色是如何混合的。 颜色为OpenGlL 工程增加很多。通过理解平面着色(flat coloring)和平滑着色(smooth coloring),你能显著的改善你的OpenGL Demo的样子。 4.旋转: 在这一课里,我将教会你如何旋转三角形和四边形。左图中的三角形沿Y轴旋转,四边形沿着X 轴旋转。 这一章将引入两个变量, rtri 被用来存储三角形的角度, rquad存储四边形的角度。 和容易创建一个多边形组成的场景。让这些物体动起来是整个场景变得生动起来。在后面的课程钟我将教给你如何绕屏幕上的一个点旋转物体,使得物体绕屏幕而不是它的轴转动。 5.3D形体: 既然我们已经领会到多边形,方形,色彩和旋转。现在该建立3D物体了。我将使用多边形和矩形c创建3D物体。这次我们将扩展上一章的教程,并且将三角形转换成一个彩色的棱锥,把正方形变为一个实心正方体。棱锥使用混合色,正方体每个面使用一种颜色。在3D空间创建物体可能很费时间,但是所获得的结果(收获)值得这样做。充分发挥你的想象力吧。 6.纹理映射: 你想要它,它现在就在这里了,那就是 ... 纹理映射!!!在这一章我将教会你如何将一幅位图(bitmap)映射到正方体的六个面上去。我们将使用第一章的OpenGL代码来创建工程。创建一个空的窗口比修改上一课的代码更容易。 你将会发现第一章的代码在对于快速创建工程来说是及其有价值的。第一章的代码为你设置好了一切,你所需要做的只是集中精力为效果编程。 7.纹理滤波, 光照和键盘控制: 好的,我希望到现在你已经理解了所有的东西,因为这是一个巨大的教程。我想教给你两个新的方法来过滤(filter)你的纹理,简单的光照,键盘控制并且还可能更多 :) .如果你对到这一课为止你所学的东西并不充满信心,那就回头复习一下。玩一下其它课程的代码,不要操之过急。最好专心把每一课学好,而不是蜻蜓点水,只知道如何把东西做出来。 8.混合 有理由等一下,一个来自很酷的Hypercosm的程序员伙伴问(我)他是否可以写一章关于混合的教程。第八课通常正是讲混合的,所以太巧了。这一章教程扩展了第七章。混合是一项很酷的技术 .. 我希望你们能好好享受这一章教程。这一章的作者是Tom Stanis他在这制作一章上花费了很多精力,所以让他知道你觉得怎么样。混合可不是一个好讲的话题。 9.在3D空间中移动位图: 这一章覆盖了一些你们要求的主题,你想知道如何移动你在3D屏幕空间上创造的物体。你想要知道如何在屏幕上绘制一幅位图,并且位图的黑色部分不会覆盖它后面的东西。你想要简单的动画,想要更多的混合的应用,这一章将教会你所有这些。You'll notice there's no spinning boxes(yaker:很惭愧这一句我不是很明白)。前面的课程覆盖了OpenGL的基础,每一章都基于前面的内容。前面的课程涵盖了基础的OpenGL,每一课都是在前一课的基础上创建的。这一课是前面几课知识的综合,当你学习这课时,请确保你已经掌握了前面几课的知识。 10.加载3D世界,并在其中漫游: 你一直期待的教程来了!这一章友一个叫Lionel Brites的伙伴制作。这一课里你讲学到如何导入一个3D世界。代码仍然使用第一章的,但是,课程页面只是解释了新的部分,包括导入3D场景,在3D世界中移动。下载VC++代码并且在你阅读教程的同时阅读代码。按[B]键控制混合,[F]键控制滤波,[L]键控制光照(但光并不随场景移动),还有[Page UP]和[Page Down]键。我希望你能喜欢Lionel对网站的贡献。我有空的时候我会让这个教程更容易学习。 11.旗帜效果
基本信息 原书名:WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL (OpenGL) 原出版社: Addison-Wesley Professional 作者: (美)Kouichi Matsuda Rodger Lea(松田浩一,罗杰.李) 译者: 谢光磊 出版社:电子工业出版社 ISBN:9787121229428 上架时间:2014-6-11 出版日期:2014 年6月 开本:16开 页码:470 版次:1-1 --------------------- 目录 《WebGL编程指南》 第1 章 WebGL 概述 1 WebGL 的优势 3 使用文本编辑器开发三维应用 3 轻松发布三维图形程序 4 充分利用浏览器的功能 5 学习和使用WebGL 很简单 5 WebGL 的起源 5 WebGL 程序的结构 6 总结 7 第2 章 WebGL 入门 9 Canvas 是什么? 10 使用[canvas] 标签 11 DrawRectangle.js 13 最短的WebGL 程序:清空绘图区 16 HTML 文件(Hel loCanvas.html) 16 JavaScript 程序(HelloCanvas.js) 17 用示例程序做实验 22 绘制一个点(版本1) 22 HelloPoint1.html 24 HelloPoint1.js 24 着色器是什么? 25 使用着色器的WebGL 程序的结构 27 初始化着色器 29 顶点着色器 31 片元着色器 33 绘制操作 34 WebGL 坐标系统 35 用示例程序做实验 37 绘制一个点(版本2) 38 使用attribute 变量 38 示例程序(HelloPoint2.js) 39 获取attribute 变量的存储位置 41 向attribute 变量赋值 42 gl.vertexAttrib3f() 的同函数 44 用示例程序做实验 45 通过鼠标点击绘点 46 示例程序(ClickedPoints.js) 47 注册事件响应函数 48 响应鼠标点击事件 50 用示例程序做实验 53 改变点的颜色 55 示例程序(ColoredPoints.js) 56 uniform 变量 58 获取uniform 变量的存储地址 59 向uniform 变量赋值 60 gl.uniform4f() 的同函数 61 总结 62 第3 章 绘制和变换三角形 63 绘制多个点 64 示例程序(MultiPoint.js) 66 使用缓冲区对象 69 创建缓冲区对象(gl.createBuffer()) 70 绑定缓冲区(gl.bindBuffer()) 71 向缓冲区对象中写入数据(gl.bufferData()) 72 类型化数组 74 将缓冲区对象分配给attribute 变量(gl.vertexAttribPointer()) 75 开启attribute 变量(gl.enableVertexAttribArray()) 77 gl.drawArrays() 的第2 个和第3 个参数 78 用示例程序做实验 79 Hello Triangle 80 示例程序(HelloTriangle.js) 80 基本图形 82 用示例程序做实验 83 Hello Rectangle(HelloQuad) 84 用示例程序做实验 85 移动、旋转和缩放 86 平移 87 示例程序(TranslatedTriangle.js) 88 旋转 91 示例程序(RotatedTriangle.js) 93 变换矩阵:旋转 97 变换矩阵:平移 100 4×4 的旋转矩阵 101 示例程序(RotatedTriangle_Matrix.js) 102 平移:相同的策略 105 变换矩阵:缩放 106 总结 108 第4 章 高级变换与动画基础 109 平移,然后旋转 109 矩阵变换库:cuon-matrix.js 110 示例程序(RotatedTriangle_Matrix4.js) 111 复合变换 113 示例程序(RotatedTranslatedTriangle.js) 115 用示例程序做实验 117 动画 118 动画基础 119 示例程序(RotatingTriangle.js) 119 反复调用绘制函数(tick()) 123 按照指定的旋转角度绘制三角形(draw()) 123 请求再次被调用(requestAnimationFrame()) 125 更新旋转角(animate()) .126 用示例程序做实验 128 总结 130 第5 章 颜色与纹理 131 将非坐标数据传入顶点着色器 131 示例程序(MultiAttributeSize.js) 133 创建多个缓冲区对象 134 gl.vertexAttribPointer() 的步进和偏移参数 135 示例程序(MultiAttributeSize_Interleaved.js) 136 修改颜色(varying 变量) 140 示例程序(MultiAttributeColor.js) 141 用示例程序做实验 144 彩色三角形(ColoredTriangle.js) 145 几何形状的装配和光栅化 145 调用片元着色器 149 用示例程序做实验 149 varying 变量的作用和内插过程 151 在矩形表面贴上图像 153 纹理坐标 156 将纹理图像粘贴到几何图形上 156 示例程序(TexturedQuad.js) 157 设置纹理坐标(initVertexBuffers()) 160 配置和加载纹理(initTextures()) 160 为WebGL 配置纹理(loadTexture()) 164 图像Y 轴反转 164 激活纹理单元(gl.activeTexture()) 165 绑定纹理对象(gl.bindTexture()) 166 配置纹理对象的参数(gl.texParameteri()) 168 将纹理图像分配给纹理对象(gl.texImage2D()) 171 将纹理单元传递给片元着色器(gl.uniform1i()) 173 从顶点着色器向片元着色器传输纹理坐标 174 在片元着色器中获取纹理像素颜色(texture2D()) 174 用示例程序做试验 175 使用多幅纹理 177 示例程序(MultiTexture.js) 178 总结 183 第6 章 OpenGL ES 着色器语言(GLSL ES) 185 回顾:基本着色器代码 186 GLSL ES 概述 186 你好,着色器! 187 基础 187 执行次序 187 注释 187 数据值类型(数值和布尔值) 188 变量 188 GLSL ES 是强类型语言 189 基本类型 189 赋值和类型转换 190 运算符 191 矢量和矩阵 192 赋值和构造 193 访问元素 195 运算符 197 结构体 200 赋值和构造 200 访问成员 200 运算符 201 数组 201 取样器(纹理) 202 运算符优先级 203 程序流程控制:分支和循环 203 if 语句和if-else 语句 203 for 语句 204 continue、break 和discard 语句 205 函数 205 规范声明 207 参数限定词 207 内置函数 208 全局变量和局部变量 209 存储限定字 209 const 变量 209 Attribute 变量 210 uniform 变量 211 varying 变量 211 精度限定字 211 预处理指令 213 总结 215 第7 章 进入三维世界 217 立方体由三角形构成 217 视点和视线 218 视点、观察目标点和上方向 219 示例程序(LookAtTriangles.js) 221 LookAtTriangles.js 与RotatedTriangle_Matrix4.js 224 从指定视点观察旋转后的三角形 225 示例程序(LookAtRotatedTriangles.js) 227 用示例程序做实验 228 利用键盘改变视点 230 示例程序(LookAtTrianglesWithKeys.js) 230 独缺一角 232 可视范围(正射类型) 233 可视空间 234 定义盒状可视空间 235 示例程序(OrthoView.html) 236 示例程序(OrthoView.js) 237 JavaScript 修改HTML 元素 239 顶点着色器的执行流程 239 修改near 和far 值 241 补上缺掉的角(LookAtTrianglesWithKeys_ViewVolume.js) 243 用示例程序做实验 245 可视空间(透视投影) 246 定义透视投影可视空间 247 示例程序(perspectiveview.js) 249 投影矩阵的作用 251 共冶一炉(模型矩阵、视图矩阵和投影矩阵) 252 示例程序(PerspectiveView_mvp.js) 254 用示例程序做实验 257 正确处理对象的前后关系 258 隐藏面消除 260 示例程序(DepthBuffer.js) 262 深度冲突 263 立方体 266 通过顶点索引绘制物体 268 示例程序(HelloCube.js) 268 向缓冲区中写入顶点的坐标、颜色与索引 271 为立方体的每个表面指定颜色 274 示例程序(ColoredCube.js) 275 用示例程序做实验 277 总结 279 第8 章 光照 281 光照原理 281 光源类型 283 反射类型 284 平行光下的漫反射 286 根据光线和表面的方向计算入射角 287 法线:表面的朝向 288 示例程序(LightedCube.js) 291 环境光下的漫反射 296 示例程序(LightedCube_ambient.js) 298 运动物体的光照效果 299 魔法矩阵:逆转置矩阵 301 示例程序(LightedTranslatedRotatedCube.js) 302 点光源光 304 示例程序(PointLightedCube.js) 305 更逼真:逐片元光照 308 示例程序(PointLightedCube_perFragment.js) 309 总结 310 第9 章 层次模型 311 多个简单模型组成的复杂模型 311 层次结构模型 313 单关节模型 314 示例程序(JointMode.js) 315 绘制层次模型(draw()) 319 多节点模型 321 示例程序(MultiJointModel.js) 323 绘制部件(drawBox()) 326 绘制部件(drawSegments()) 327 着色器和着色器程序对象:initShaders() 函数的作用 332 创建着色器对象(gl.createShader()) 333 指定着色器对象的代码(gl.shaderSource()) 334 编译着色器(gl.compileShader()) 334 创建程序对象(gl.createProgram()) 336 为程序对象分配着色器对象(gl.attachShader()) 337 连接程序对象(gl.linkProgram()) 337 告知WebGL 系统所使用的程序对象(gl.useProgram()) 339 initShaders() 函数的内部流程 339 总结 342 第10 章 高级技术 343 用鼠标控制物体旋转 343 如何实现物体旋转 344 示例程序(RotateObject.js) 344 选中物体 347 如何实现选中物体 347 示例程序(PickObject.js) 348 选中一个表面 351 示例程序(PickFace.js) 352 HUD(平视显示器) 355 如何实现HUD 355 示例程序(HUD.html) 356 示例程序(HUD.js) 357 在网页上方显示三维物体 359 雾化(大气效果) 359 如何实现雾化 360 示例程序(Fog.js) 361 使用w 分量(Fog_w.js) 363 绘制圆形的点 364 如何实现圆形的点 364 示例程序(RoundedPoint.js) 366 α 混合 367 如何实现α 混合 367 示例程序(LookAtBlendedTriangles.js) 369 混合函数 369 半透明的三维物体(BlendedCube.js) 371 透明与不透明物体共存 372 切换着色器 373 如何实现切换着色器 374 示例程序(ProgramObject.js) 375 渲染到纹理 379 帧缓冲区对象和渲染缓冲区对象 380 如何实现渲染到纹理 381 示例程序(FramebufferObject.js) 382 创建帧缓冲区对象(gl.createFramebuffer()) 385 创建纹理对象并设置其尺寸和参数 385 创建渲染缓冲区对象(gl.createRenderbuffer()) 386 绑定渲染缓冲区并设置其尺寸(gl.bindRenderbuffer(), gl.renderbufferStorage()) 386 将纹理对象关联到帧缓冲区对象(gl.bindFramebuffer(), gl.framebufferTexture2D()) 388 将渲染缓冲区对象关联到帧缓冲区对象(gl.framebufferRenderbuffer()) 389 检查帧缓冲区的配置(gl.checkFramebufferStatus()) 390 在帧缓冲区进行绘图 390 绘制阴影 392 如何实现阴影 392 示例程序(Shadow.js) 393 提高精度 399 示例程序(Shadow_highp.js) 400 加载三维模型 401 OBJ 文件格式 404 MTL 文件格式 405 示例程序(OBJViewer.js) 406 自定义类型对象 409 示例程序(OBJViewer.js 解析数据部分) 411 响应上下文丢失 418 如何响应上下文丢失 419 示例程序(RotatingTriangle_contextLost.js) 420 总结 422 附录A WebGL 中无须交换缓冲区 423 附录B GLSL ES 1.0 内置函数 427 角度和三角函数 428 指数函数 429 通用函数 430 几何函数 433 矩阵函数 434 矢量函数 435 纹理查询函数 436 附录C 投影矩阵 437 正射投影矩阵 437 透视投影矩阵 437 附录D WebGL/OpenGL :左手还是右手坐标系? 439 示例程序(CoordinateSystem.js) 440 隐藏面消除和裁剪坐标系统 443 裁剪坐标系和可视空间 444 什么是对的? 446 总结 448 附录E 逆转置矩阵 449 附录F 从文件中加载着色器 453 附录G 世界坐标系和本地坐标系 . 457 本地坐标系 458 世界坐标系 459 变换与坐标系 461 附录H WebGL 的浏览器设置 . 463

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值