加载中...

图形编程想要调试并不是一件容易的事，有的时候渲染出全黑的结果基本上只能凭经验来查错，特别是对于着色器，断点日志都是无效的，因此想办法掌握一些调试方法还是有必要的，不然找错误的源头可能真的会非常困难一、glGetError()可以在程序的任意地方调用glGetError方法，它会返回之前所有的错误标记，常见的错误如下：标记 代码 描述 GL_NO_ERROR 0 自上次调用glGetError以来没有错误 GL_INVALID_ENUM 1280 ...

一、FreeType库FreeType是一个能够提供多种字体相关的操作的软件开发库，往往使用它来做最简单的文字渲染：OpenGL环境配置（超全整合版）FreeType库可以从这篇文章中的链接中下载到，也可以直接去他们的官方网站上获取和其它环境配置方法一样，编译其builds文件夹的对应版本，并将include文件夹里面的所有文件全部放入老位置（C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\VC\Tools\M...

前置：OpenGL基础53：阴影映射（下）一、万象阴影贴图之前成功实现了平行光阴影，生成阴影贴图时使用的矩阵是正交矩阵，若是想要实现点光源的阴影效果，那么理论上只需要修改投影矩阵为透视矩阵就好了，看上去并不是很难但是要得到点光源阴影贴图要考虑到的是：如何渲染出周围所有的场景，像摄像机它是有一定视角的，而点光源确是360°全面照射，因此对于点光源的阴影贴图一张肯定是不够的，它只能展示出一个方向下图是90°透视投影的视觉范围，朝向为x轴正方向，那么只需要再对剩下的5个方向各来一次投影理论...

接上文：OpenGL基础52：阴影映射（上）五、阴影失真按照上文的计算的结果，一个很明显的问题是：对于参与计算深度贴图的物体，其表面可以看到这样的栅格状的阴影，这种现象也叫做阴影失真(Shadow Acne)出现这种请情况的原因是：在计算深度贴图的时候，分辨率不够高，毕竟这张深度贴图是对于整个场景而言的，想要一一对应到每个模型的每个片段就是个不可能的事，这样对于实际的模型的多个片段，就都会从深度贴图中的同一个坐标去采样，如果这些相邻片段的实际深度值一致那其实不会有什么问题，但由于光照角...

参考于：https://learnopengl.com/#!Advanced-Lighting/Shadows/Shadow-Mapping一、游戏中的阴影阴影是光线被阻挡的结果，当一个光源的光线由于其他物体的阻挡不能够达到一个物体的表面的时候，那么这个物体就在阴影中了。理论上阴影无处不在，但是想要渲染出很好的阴影效果，并不是一件特别容易的事，目前实时渲染领域还没找到一种完美的阴影算法，尽管有不少近似阴影技术，但它们都有自己的弱点和不足minecraft游戏截图目前较多使用的一种技术...

一、泛光（Bloom）如果一个物体的颜色值接近1.0，怎么确定它是否是光源呢？毕竟一张白纸它的颜色也可以是1.0在此之前，分辨光源往往都是靠的经验，例如你知道这个物体它是个路灯，又或者说根据周围的光照来判断光的中心等等，其实只要使用的模型，都没什么大的问题，而很多游戏中为了体现出更真实的光源，都会给光源加上泛光，以体现出光源向四周发散的光芒，提升光照的效果：泛光效果只是一个渲染技巧，本质上就是一个模糊处理，它并不能反映出真实的物理世界，但尽管如此，一个完美的算法依旧可以大幅提升画面的效...

一、HDR与LDR由于显示器只能显示值为0.0到1.0间的颜色，因此当数据存储在帧缓冲(Framebuffer)中时，亮度和颜色的值也是默认被限制在0.0到1.0之间的，这个颜色范围即是LDR(Low Dynamic Range)低动态范围如果光源足够的多，越或者某个光源亮度非常的高，那么对当下的环境，就有可能遇到这样的情况：可以看到，当前的纹理已经变得难以分辨了，丢失了特别多的细节：在计算片段亮度的过程中，这些片段中超过1.0的亮度或者颜色值都会被约束在1.0，这样一大段的区域都会是...

接上文：OpenGL基础48：高度贴图（上）四、陡峭视差映射上文计算纹理偏移的方法是最简单的，但问题也比较大：当你斜视贴图的时候可以看到非常明显的错误这里有另一种方法，这种方法类似于找连续函数在特定定义域内与x轴第一次相交：在范围内不停的取x值，直到当前得到的与上一次得到的符号不同，这样就可以确定交点在上一个采样点和这次采样点之间就如上，先将总深度范围分布到同一个深度的多个层中，然后在每个层中沿着观察方向移动采样纹理坐标，直到找到第一个采样深度值 ≤测试深度值的点，以确定...

前置：OpenGL基础47：法线贴图一、凹凸贴图不少模型都会附带以“bump”为名结尾的贴图，这种帖图统称为凹凸贴图，目的是为了体现出物体的凹凸不平，最经典的例子就是法线贴图，这个在上一章有详细提到过除此之外还有高度贴图、浮雕贴图等，暂时先了解下高度帖图及其最简单的算法高度贴图又称视差贴图，用于直接给予纹理显示上的错觉，视差贴图往往都是黑白图，因为理论上只需要知道每个纹理的深度值，因此RGB三个值都是相等的，就如下：如果对应的像素是黑色的，意味着此纹理的高度为0，也就是默认值，...

前置：OpenGL基础46：切线空间这章在《OpenGL基础46：切线空间》之后，如果不了解切线空间的话，是没法很好理解法线贴图的五、逐像素光照前文提到过：为了得到正确的光照，需要知道物体每个顶点的法向量，但为了保证效率，一般物体的顶点不会太多，就像一面很长很宽的墙壁，它的表面往往凹凸不平，但事实上它可能单纯的只是一个立方体，每一面给上了一个贴图。这样如果还想要体现出物体“凹凸不平”的效果，就需要用到法线贴图或者高度贴图之前所有的光照都是逐顶点光照：也就是说对于当前片段，它的法向量取决...

前置：OpenGL基础11：空间一、什么是切线空间（Tangent Space）在《OpenGL基础11：空间》中提到了观察空间、裁剪空间、世界空间等。切线空间和它们一样，都属于坐标空间上面就是一个切线空间的例子，对于切线空间：N：该顶点本身的法线方向，z轴 T：该顶点的一条切线，但由于切线数量有无数条，其一般由模型给定，对应着UV图中的U，也就是使用和纹理坐标方向相同的那条 B：由前两者叉乘得到，对应着UV图中的VUV图：用于告知计算机，如何用2维的贴图包住3维的物体，本...

接上文：OpenGL基础44：光照矫正（上）四、Gamma矫正4.1、人的视觉特性先不考虑OpenGL，甚至不考虑计算机和很多错视图一样，对于下面这张图（灰阶），如果用1表示纯白，用0表示纯白，那么这张图片的哪个位置代表的是0.5，也就是自然界的平均亮度（中灰）呢？我想看到这里的你可能会毫不犹豫的选中间，并心想：这个问题不是zz嘛？然而事实上，自然界的平均亮度0.5在这张图3/4的位置而并非正中间，也就是说，平均色在人眼中是偏白的，尽管这确实看上去有点颠覆认知、不可思议...

对于openGL的API，倒是没有必要花太多时间，重点应该还是在着色器上一、采样器、glActiveTexture和glBindTexture在之前测试简单光照时可能出现的两个问题，尽管它们可能不会被察觉：着色器中有定义对应的采样器，可是在通过glGetUniformLocation方法获取时，获取不到对应位置值 着色器中不止1个采样器，在没有给其中某个特定采样器赋纹理时，它居然也持有纹理对于①，排除了低级错误后，检查下着色器中对应的采样器是否有参与实质运算，并且这个运算还必须是有效的...

一、走样与反走样走样(Aliasing)就是锯齿化，反走样(Anti-aliasing)就是抗锯齿只要玩过游戏，那么都应该对抗锯齿不陌生，不少游戏也都有关于抗锯齿的设置如上图，放大的部分能很明显的看到“锯齿”边，如果了解光栅化的过程，那么也很容易理解锯齿是怎样产生的，不要以为这是什么底层的BUG，正是完全正确的流程会出现这中“锯齿”现象，它是由顶点数据像素化之后成为片段的方式所引起的二、采样参考于learnopengl.com，这里具体了解下锯齿的产生和解决用通俗易懂...

一、循环渲染在前面的场景里，箱子和地面都被渲染了多次：for (int i = 0; i <= 7; i++){ model = glm::translate(glm::mat4(1.0f), positions[i]); model = glm::scale(model, glm::vec3(0.01f)); glUniformMatrix4fv(modelLoc, 1, GL_FALSE, glm::value_ptr(model)); wood....

在顶点着色器之后，片段着色器之前，还有几何着色器，它是可选的，在《OpenGL基础3：渲染管线》这一章中就有提到了，有了几何着色器后可以做很多骚操作，更容易实现很多有意思的效果一、最简单的几何着色器(Geometry Shader)几何着色器的输入：一个或多个表示单独基本图形(primitive)的顶点，这个基本图形可以是点、线或者三角形输出：处理过后的基本图形顶点，这些顶点无论是大小还是位置，甚至是数量、基本图形单元都可以被改变、拼装最“简单”的几何着色器如下：#version...

前置：OpenGL基础39：GLSL内建变量与接口块想想之前代码，glUniform()和glGetUniformLocation()的使用数量是不是过于频繁了，对于每个着色器的每一个uniform变量，都需要特意去设置，不但代码特别长，而且大多都是重复的一、Uniform对象没错，就是UBO，这不知道是第几个缓冲对象(xBO)了，不过也好，这样不用去查都可以大致知道它的意思和作用在之前的例子中，几乎所有的物体着色器中都有投影矩阵和观察矩阵，值也是相同的（都处于一个世界中怎么可能不一样...

GLSL有几个以gl_为前缀的变量（内建变量），它们在着色器中能直接获取和使用，并且都有着很重要的意义，gl_Position 和 gl_FragCoord 就是两个典型的内建变量一、顶点着色器变量gl_Position：顶点着色器裁切空间输出的位置向量。想让屏幕上渲染出东西，那么就必须使用，否则将什么都看不到，在第一次接触顶点着色器之后，就一直在用它了gl_PointSize：渲染出的点的大小，需要满足以下两个条件，gl_PointSize才会是有效的：glEnable(GL...

一、缓冲数据OpenGL中的缓冲就是一块内存区域的对象，将缓冲绑定到一个特定缓冲对象的时候，就给缓冲赋予了一个特殊的意义，例如绑定到GL_ARRAY_BUFFER的时候，这个缓冲就是一个顶点数组缓冲，绑定到GL_ELEMENT_ARRAY_BUFFER的时候，这个缓冲就是个顶点索引缓冲之前的用法一直都是这样：GLuint skyboxVAO, skyboxVBO;glGenVertexArrays(1, &skyboxVAO);glGenBuffers(1, &sky...

前置：OpenGL基础20：镜面光照一、反射不一定所有的光源都是简单的白光，不仅如此，光线也是可以多次反射的，例如一面镜子，可以从中看到远处的风景，一些金属材质的物体表面也会反射周围物体的光这主要就是着色器的改动，和漫反射以及镜面反射一样，还有一种贴图叫做反射贴图，当然了，是否是贴图只是着色器写法上的问题，有了之前的经验，搞定这个不是问题反射的计算方式和之前的镜面反射很像，，着色器如下：#version 330 corelayout (location = 0) in ve...

一、立方体贴图立方体贴图就是6个2D贴图，每个贴图都是立方体的一个面，当然这样的立方体贴图是一个整体，有自己特有的属性，可以使用方向向量对它们索引和采样立方体贴图的主要作用：其组成了一个完全封闭的空间，这就意味着从立方体中间发出任意方向的向量，一定会触碰到立方体表面的一个点，也就是立方体贴图的纹理位置，从而就可以获取所有顶点的纹理坐标，再通过这个纹理坐标就能获取到立方体贴图上正确的纹理沿着黄色的方向向量，可以得到对应黄色块的纹理坐标创建一个立方体贴图：GLuint textur...

在之前的章节，所有的物体都是中规中矩的显示的，只考虑了光照对物体的影响，那假设想要显示特殊的效果该怎么操作呢？例如马赛克风、将所有的物体都显示为黑白色，就像上世纪80年代的灰白电视一样，又或者说将整个场景渲染到一张泛黄的纸上以体现出年代感……当然是修改着色器，事实上，很多地方都是这么做的，不过有些情况下，场景中的物体和对应的着色器都不少，若是想要整个场景（视口）体现出某个效果，就需要借助别的方法了接上文：OpenGL基础34：帧缓冲之附件接下来就可以开始实战了五、黑白画根据上文的目...

在之前的章节，所有的物体都是中规中矩的显示的，只考虑了光照对物体的影响，那假设想要显示特殊的效果该怎么操作呢？例如马赛克风、将所有的物体都显示为黑白色，就像上世纪80年代的灰白电视一样，又或者说将整个场景渲染到一张泛黄的纸上以体现出年代感……当然是修改着色器，事实上，很多地方都是这么做的，不过有些情况下，场景中的物体和对应的着色器都不少，若是想要整个场景（视口）体现出某个效果，就需要借助别的方法了接上文：OpenGL基础33：帧缓冲之离屏渲染三、纹理附件接下来，就是想办法往帧缓冲里添加...

在之前的章节，所有的物体都是中规中矩的显示的，只考虑了光照对物体的影响，那假设想要显示特殊的效果该怎么操作呢？例如马赛克风、将所有的物体都显示为黑白色，就像上世纪80年代的灰白电视一样，又或者说将整个场景渲染到一张泛黄的纸上以体现出年代感……当然是修改着色器，事实上，很多地方都是这么做的，不过有些情况下，场景中的物体和对应的着色器都不少，若是想要整个场景（视口）体现出某个效果，就需要借助别的方法了一、帧缓冲为了解决这个问题，来学习帧缓冲吧，当有了目的之后才能更好的去理解和掌握。这一章相对之...

一个标准的立方体总共6个面，对于每个面又有里外之分，因此若要绘制一个正方形的话，总共需要绘制12个面，然而事实上，对于每个面，我们在玩家视角一定只能看到它的一个朝向换句话说，对于一个六个面的正方体，我们一定只能看到最多三个面，这样的话，有个很明显的优化方法：不再绘制玩家看不到的面！一个好消息是，openGL自带这样的优化一、绘制顺序当定义一系列的三角顶点时，他一定也同时定义了一个特定的连接顺序(Winding Order)，它们可能是顺时针的或逆时针的，每个三角形由3个顶点组成，我们从三角...

在很多游戏场景中，地面往往都不是完全干净和平坦的，如果是草坪，那么肯定会有一些长得比较高的杂草，而对于沙地，往往总会有一些奇形怪状的石头等，一般来讲确实可以用模型，但是贴图也是一个不错的选择一、Alpha值考虑给地面铺上“石头”：注意如果想加载这种纹理，最好保证空白的部分是透明的而并非为白底！前面讨论过颜色的属性：RGB，其实颜色还有一个属性A代表为透明度也就是说：RGBA才是一个表示颜色的“完全体”，如果想渲染一些半透明的材质，就必须要考虑到透明度这一属性，就如上面的石头...

前置：OpenGL基础29：深度测试一、模板测试前面一章提到过：深度缓冲是在片段着色器运行、以及模板测试(Stencil Testing)之后，那么这下知道模板测试是在什么时候了吧，模板测试和深度测试逻辑可以说是一致的，它能丢弃一些片段，仍然保留下来的片段将会进入深度测试阶段：glEnable(GL_STENCIL_TEST)：开启模板测试 glClear(GL_STENCIL_BUFFER_BIT)：清空模板缓冲可以用模板测试实现一些非常有意思的效果，一个最经典的例子就是3D物体的描...

前置：OpenGL基础11：空间一、深度测试在OpenGL基础13：第一个正方体这一章中，就开始用深度测试了深度缓冲就像颜色缓冲(Color Buffer)（储存所有的片段颜色：视觉输出）一样，在每个片段中储存了信息，并且通常和颜色缓冲有着一样的宽度和高度，深度缓冲是由窗口系统自动创建的，它会以16、24或32位float的形式储存它的深度值，在大部分的系统中，深度缓冲的精度都是24位的当深度测试(Depth Testing)被启用的时候，OpenGL会将一个片段的的深度值与深度缓...

参考文献：https://learnopengl.com/#!Getting-started/OpenGL前置：OpenGL基础27：网格一、模型有了mesh类之后，接下来就是实现一个model类将各个mesh拼成一个模型首先是模型的创建：很好理解，就是一次绘制其所有的mesh：public: Model(const GLchar* path) { this->loadModel(path); } void Draw(Sha...

一、网格(Mesh)从字面上的意思来看就是下面这个东西：其实差不多，如果你是游戏开放相关的工作者，又或者了解过图形学，应该都听过网格(Mesh)这个词，大概印象是下面这样的：...

一、模型文件游戏中有很多复杂的模型往往都是美术通过3D建模工具构建出来的，当然不是程序将顶点写死在代码里的，想想看一个简单的人物模型可能就有上千个顶点，这个时候按之前“生成木箱子”的方法肯定就不可行了从3D模型的设计到最后体现在场景中，整个过程可以分为2个步骤当使用3D建模工具导出模型文件时，建模工具会自己生成所有的顶点坐标、顶点法线和纹理坐标等信息，这些图像技术细节并不需要美工去处理，美工只需要关心如何构建高品质的模型，所有的技术细节内容都隐藏在里导出的模型文件里。而对于图形开发者，就必...

到这里，光照基础就已经接近尾声了，当然对于光照渲染的学习，这可能只是百步中的一步，尽管如此，至少是做到了从 0 到 1 的一个过程，就像之前刚学会“HelloWorld”一样，一切伟大的行动和思想，都有一个微不足道的开始再次声明：直至这一章，主要还是参考于https://learnopengl.com/，当然这不仅是翻译，也结合了不少其它的文献和教学视频，和原文略有不同，很多地方去掉了繁杂或不重要的描述，加入了自己的看法，整体更加整洁易懂如有问题/错误，求反馈一、GLSL配置之前...

前置：OpenGL基础23：平行光与点光源一、聚光灯三种基础光源在上一章讲了2种，现在只剩下聚光灯了手电筒就是一个很经典例子，相对于点光源，聚光灯拥有以下特点依然有衰减，但是聚光灯的光照一般都是非常强的（也就是有着非常远的射程） 有一定的范围，在这个范围外光照极速衰减，距离聚光方向超过一定角度，哪怕离光源很近，也有可能完全没有光照 依上，既有位置属性，又有方向属性（聚光方向）那么也就是说，相对于点光源，聚光灯会额外多出2个属性：聚光方向和切光角如下图：其中就是入射光向量与...

前面几章主要是针对物体，现在开始针对光源！一、平行光在OpenGL基础18：光照基础这一章里面讲了几种常见光源，先看平行光吧一个很好的例子就是太阳光，因为离我们的距离过远，所以太阳光的特点就是“无限范围”且平行所有的光线都是平行的，这样的话物体与光源的相对位置是不重要的，在之前的章节，Light里面都有position这一属性，对于平行光而言，这个属性就由direction替代，代码改动如下：struct Light{ // vec3 position; v...

在OpenGL基础13：第一个正方体中给正方体加了箱子的纹理，但是在后面介绍光照的时候又把纹理属性给丢了，现在尝试在有纹理的基础之上增加光照一、漫反射贴图先把之前的纹理加回去顶点着色器和主代码的处理和之前OpenGL基础9：纹理 纹理这一章一样，而对于片段着色器，需要进行稍加修改在OpenGL基础21：材质这一章里，给予了物体材质属性，包括：ambient：定义了在环境光照下这个物体反射的是什么颜色，通常是和物体颜色相同的颜色 diffuse：定义了在漫反射光照下物体的...

前置：OpenGL基础20：镜面光照一、材质前面环境光、漫反射光照和镜面光照都已经安排上了，但是物体的属性是写死的在真实的世界里，不同的物体会对光产生不同的反应，例如一颗金属球或一块橡木，它们在完全相同的光照下显示出来的效果必然是不同的，前者以反射(Reflect)为主，后者以散射(Scatter)为主，如果想在OpenGL中模拟不同的材质，就必须为每个物体定义材质(Material)属性，尽管现在还是在用正方体ambient：定义了在环境光照下这个物体反射的是什么颜色，通常是和物体颜...

前置：OpenGL基础19：法向量与漫反射一、镜面光照前面物体已经拥有了环境光和漫反射光，现在再加上镜面光照就完美了，镜面光照的效果是：当我们去看光被物体所反射的那个方向的时候，会看到一个高光和镜面反射一样，不过我们希望得到的是下图与的夹角我们在求漫反射光照时，已经获得了向量和接下来我们求出，Viewer正是我们的摄像机：GLint viewPosLoc = glGetUniformLocation(shaderObj.Program, "viewPos...

前置：OpenGL基础18：光照一、法向量法向量：垂直于当前点所在面的向量无论是漫反射光照还是镜面光照，我们都需要知道当前反射点的法向量单纯的对于一个顶点来讲，它肯定是没有法向量的，所以我们需要考虑这个顶点与其周围的顶点（他们可以构成唯一的一个面，即顶点所在的面），并可以通过叉乘来获取法向量，当然对于一个不能再简单的正方体，我们也可以直接将每个顶点的法向量数据加入顶点数据中，也就是类似于离线+存储方法：GLfloat vertices[] = { -0.5f, -0.5...

真实的光照非常的复杂，所以有关光照的算法和论文也有不少，想要模拟出更真实的光照往往需要很强的实力，很牛的算法以及很高的数学/物理水平，与此相关的技术到现在为止也只是在发展中（包括目前比较火的“光线追踪”），当然，肯定要从最简单的入手，尽可能以最低的门槛，最简单的算法先入手，做出个大致的样子来一、光照模型与光源之所以说光照比较复杂，主要是在物理和数学专业上的难度，光通常都不是来自于同一光源，而是来自散落于我们周围的很多光源，即使它们可能并不是那么显而易见，光的一个属性是，它可以向很多方向发散和反...

一、RGB三原色回想一下初中物理知识：三原色：自然界中所有的颜色都可以用红、绿、蓝(RGB)这三种颜色频率的不同强度组合而得，白色包含了所有颜色 能看到一个物体的颜色，是这个物体(Reflected)反射的颜色，换句话说，就是不能被当前物体吸收(Absorb)的颜色 之所以能看到五彩斑斓的世界，是因为存在光源（发光的物体），否则将是完全的黑暗 结合②③，颜色从光源到我们的眼睛，大致就是这样一个过程：光源发出光线 → 照射到物体上 → 物体反射所有光源中存在，但不能被其吸收的颜色计算机如...