最近通关了《闪避刺客》，非常不错的游戏，爽快的战斗、宏大但细节拉满的演出与同品类游戏中让人印象深刻。无论是室外还是室内，游戏场景中多次使用了类似下图所示的静面反射效果，用来烘托氛围和叙事；在《刀剑神域》中，也有类似的倒影地面，本文分享使用EasyX实现镜面反射效果的思路。
在图形学中，一提到“镜子”，最直接的思路一定是帧缓冲，比较通用且简单的思路就是使用额外的摄像机渲染场景到纹理中，然后再将其贴到场景中的物体上。在EasyX中，我们可以使用IMAGE对象实现帧缓冲纹理，并借助SetWorkingImage函数切换当前的渲染目标，整体流程如下图所示：
通过对一组动画帧
IMAGE对象色彩缓冲区的操作，实现了动画帧翻转、无敌帧闪烁、冻结三种常见的游戏效果，本文介绍这三种效果的相关概念和实现思路。程序中所使用的帧动画素材为提瓦特幸存者进阶版中分享的素材，需要测试的小伙伴可以在文末找到相关素材的下载链接。
朋友的社团邀请我去做技术培训，带着小伙伴们一起做一款小游戏，正好手头有一个黑客题材游戏的灵感，便整理了一下策划案，准备以教学为目的带着大家做一部完整的游戏作品；一开始是打算用引擎的，但是引擎使用中的诸多概念对仅有浅薄编程语法基础的同学们来说还是有点为时过早了，想来近期在做的EasyX系列教程，便试着用EasyX实现一点高级的画面效果。本文代码作为软渲染的实践，仅用作算法思路分享，实际工程中还需要考虑渲染效率的优化等问题。
本文算法和实现思路参考了以下内容：
为什么要做泛光？泛光在一般用来强化画面中的亮部，因为显示器的亮度范围是有限的，例如游戏画面中有一张阳光下的白纸，白纸显示为纯白色，而太阳为了表达光亮最多也是为纯白色，二者同时出现时便会有亮度一样的感觉，而当我们给太阳加一个光晕，这样二者的亮度就有所区分了。
泛光可以看做是在摄像机视角下，光源的颜色向着画面中其他物体的颜色逐渐侵染的过程。泛光的通用实现思路主要分为以下几步：亮部提取 -> 模糊处理 -> 混叠渲染。
本文极大地参考了毛星云大师的《高品质后处理：十种故障艺术(Glitch Art)算法的总结与实现》一文，以及由他开发的 Unity 高品质后处理库 X-PostProcessing-Library源码，能力有限，但也希望本文能够给感兴趣的小伙伴们抛砖引玉，为国产 3A 游戏续星星之火。
故事的起因是群友的一句话让我想起了当年做 3D“软渲染”的冲动，想来 CodeBus 上已经有大佬给出了相对不错的实现，便重新拉取代码本地编译查看，却没料到性能比预想的还要差一些，就算是在此基础上费尽心思实现了导入 3D 模型导入进行渲染，在没有 PBR 等高性能需求的技术实现可能的情况下，“炫酷”这方面可能就多少差点意思——不过，既然 3D 软渲染提升的空间有限，那么实现 2D 软渲染应该还可以有相当大的操作可能。
想来近期工作研究的故障艺术效果（Glitch Art），便重新翻出了收藏夹中毛星云大师的文章，试着将应用于 GPU 的 shader 实现移植到 CPU 端。
本文着重探究在 CPU 端逐像素的图像处理逻辑，即模拟 shader 程序在片段着色器阶段的工作，这就导致其工作流并不一定是 CPU 这种相对线性的工作者所喜欢的，也就是说在实际运行的过程中，效率可能远不及 GPU 的并行处理。尽管如此，考虑到本文重点在于算法和编程思想的分享，而非高性能场景的实际应用，况且对于 60 帧的游戏 demo 而言，本文提及的大部分算法实现都还算可以勉强胜任。
关于本文所提及的蒙版光照相关的前置内容，详见：EtherTK 解构《武士零》 - 蒙版光照
对于这篇博客的标题，其实还是犹豫了一会儿的，因为在 2D 渲染过程中，对于“能够对光照效果产生影响的贴图”这种东西的叫法，就算是工作组内的同学意见也不一致；但在我看来，如果我们把不使用法线贴图的 2D 纹理看做是法线方向始终沿 Z 轴方向的话（即在光照响应时法线对光强的贡献始终为 1），那么当我们使用另外一张蒙版遮罩贴图对这张目标贴图响应光照强度的区域进行限定时，这张蒙版遮罩贴图本身就已经起到了法线的作用——如果我们的这张蒙版遮罩贴图使用 Alpha 值来描述目标纹理的光照响应区域强度，那么目标纹理在渲染时计算每个像素的光照响应强度时，与传统法线贴图使用 RGB 分量来描述空间向量相似，使用 Alpha 通道的值直接作为衰减系数对光照效果进行计算，所得到的渲染结果是一致的；综上所述，这种蒙版遮罩与法线本质相同，所以将其称之为法线也并不为过。
——听起来可能有点绕，咱们先看一下这种法线贴图在实际渲染中的效果：
而渲染上图所使用的纹理原始素材如下：
我们可以很清晰地看出，在使用法线后，光照的响应强度开始受法线贴图的 Alpha 值影响，这不仅让光源的外形更加真实，也让被渲染的目标纹理在复杂光照环境下更加立体，让画面中的物体与光效“融合”到了一起，避免了使用贴图光的剥离感。
——那么，接下来的问题便是，如何由目标纹理得到对应的法线纹理？
冲刺特效也就是俗称的“残影”，《武士零》中玩家几乎所有的冲刺操作都会或多或少地伴随着这种特效，在本次重现的思路中，残影由一系列透明度随时间变化的剪影风格序列帧构成，当然，考虑到赛博朋克的艺术风格，这些残影的颜色也主要应该由红色和蓝色构成——
想要实现剪影风格的渲染也很简单，简单来说可以使用如下的 shader 代码实现：
1 | in vec2 textureCoord; |
因为要在外部程序中控制透明度渐变从而实现消逝的过程，所以我们传入了 alpha 这个 Uniform 值，由于原始素材中没有使用半透明的像素，所以我们直接将传入的透明度作为了最终的片段透明度输出，如果需要考虑到原始素材中的半透明像素，那么只需要将 FragColor = vec4(color, alpha); 变更为 FragColor = vec4(color, alpha * textureColor.a);
其实与光照的死磕在很久之前便已经开始了，在开发第一代使用 OpenGL 可编程渲染管线的引擎时，便实现了一套简单的 2D 光照算法，那时候更多的还是借鉴自 LearnOpenGL 的 3D 光照思路，但是在对《武士零》的研究过程中，发现如果仅制作 2D 游戏的话，使用源自上个游戏技术世代的蒙版贴图，配合现代化的渲染管线，可以更简明地实现更符合艺术效果的光照效果（至少在像素风格的 2D 游戏看来是这样），本文将对该过程的探索过程进行阐述。
本文及相关程序所使用的实现依然为 EtherTk，不过由于需要更精确自由的渲染逻辑，所以底层实现由 SDL Renderer 变更为了 OpenGL。
此节内容更多参考自：投光物 - LearnOpenGL CN
对于游戏中的光照公式可以简化为：物体受光 = 环境光 + 聚光灯（点光源可以看作是外切角为 360° 的聚光灯），而整个世界是一片漆黑没有任何光照的，环境光作为让场景中各物体雨露均沾接受光照的光源，为物体提供了最基础的光照贡献——简单理解，在不使用光照进行渲染的场景中，不经任何处理绘制的物体纹理贴图相当于被赋予了环境光强度为 1 的白色光照；而聚光灯的技术核心，更多的是使用统一的公式和参数描述指向性光源的外形，从而计算得到世界中受此影响的像素片段。
对于聚光灯的处理，首先要计算的便是处理其径向衰减，逆向思考一下，聚光灯也可以看做是指向性的点光源，所以在处理径向衰减的思路和点光源完全相同。虽然我向来不喜欢将晦涩的数学公式搬上台面，但是无奈光照这种基于物理和经验的模拟，很难找到除去公式之外的第二种表述方式——当然，这样方便了我们，即使不能完全理解，也是可以直接套用公式实现不错的效果：
本教程将介绍如何在 DirectX 11 中使用纹理，纹理使我们能够通过将照片和其他图像应用到多边形面上，为场景添加真实感。
例如，在本教程中，我们将使用如下图像：
然后将其应用于上一教程中的多边形，以生成如下内容：
我们将使用的纹理格式是 .tga 文件，这是支持红色、绿色、蓝色和 alpha 通道的常见图形格式。你可以使用任何通用图像编辑软件创建和编辑 targa 文件，这种文件格式一般是可以直接使用的。
在我们进入代码之前，我们应该讨论纹理贴图是如何工作的。
DirectX 11 Tutorials 4 - 缓冲区、着色器和 HLSL
本教程将介绍如何在 DirectX 11 中编写顶点和像素着色器，还将介绍如何在 DirectX 11 中使用顶点和索引缓冲区，这些是渲染 3D 图形时需要理解和利用的最基本概念。
首先要理解的概念是顶点缓冲区，为了说明这个概念，让我们以球体的 3D 模型为例：
3D 球体模型实际上由成百上千个三角形组成：
球体模型中的每个三角形都有三个点，我们称每个点为顶点，因此，为了渲染球体模型，我们需要将构成球体的所有顶点放入一个特殊的数据数组中，我们称之为顶点缓冲区；一旦球体模型的所有点都被放置到了顶点缓冲区中，我们就可以将顶点缓冲区发送到 GPU，来将模型渲染出来。
DirectX 11 Tutorials 3 - 初始化 DirectX 11
本教程将首次介绍如何使用DirectX 11，我们将讨论如何初始化和关闭 Direct3D，以及如何将内容渲染到窗口。
我们将向框架中添加另一个类，该类将处理所有 Direct3D 系统的功能。我们称之为 D3DClass，更新后的框架图如下：
正如你所见，D3DClass 位于 GraphicsClass 内部；在之前的教程提到过，所有与图形有关的类都将封装在 GraphicsClass 中，所以我们新增的 D3DClass 类放到这里最为合适。
现在，让我们看看对 GraphicsClass 所做的更改。