您需要 登录 才可以下载或查看，没有账号？注册
x
在2012年11月举办的【SQUARE ENIX 开放会议 2012】的第2天，进行了新世代游戏引擎【Luminous Studio】制作的实时技术演示作品【Agni's Philosophy】中使用的实时图形技术的解说。由于连载非常花费时间，这个会议的后篇报道完成了。技术解说分了3篇进行介绍，到本篇结束。
Agni's Philosophy的中间部分，有一个被注射了不明物体变异成鬣狗一样的怪物，从晃动的卡车上跳下的场景。其中，卡车的货差中射入的像手电筒一样的光（GodyRay），可以看到上下左右有聚光灯运动。
这个光线，是把手电筒的光源生成的ShadowMap，对视线向画面深处发射的射线的轨迹进行采样，把【被光照射】和【在阴影中】的判断结果累积计算来生成效果。 再稍微做些解说，从视点发射的光线每前进一定的距离（Step），就与ShadowMap采用来进行【是否是阴影】的判断，把这个结果累积加起来。也就是正统的用Volumetric Rendering的方法进行【Ray Marching】。 另外，讲座的演讲者Remi Driancourt提到，Agni's Philosophy的光体表现，纵切方向每个像素发射的光线大概是32~64次的步数。 Driancourt还提到，Agni's Philosophy的光线和采用了和NVIDIA SDK 10中的【VolumeLight】几乎一样的技术。
NVIDIA SDK 10的解说。Agni's Philosophy中的光线表现，采用了这个技术
射线前进对ShadowMap做采样，把【是否是阴影】的判定来累加计算。
只是，因为用全分辨率来实现负荷很高，这个光线绘制，是在最终渲染分辨率的长宽1/4（面积1/16）的RenderTarget上进行的。 但是，把在1/16大小的RenderTarget上绘制的光线的帧，单纯的扩大16倍合成在最终帧上，光线和场景里的物体对象的轮廓会产生强烈的锯齿感。 那么，把在1/16的分辨率上绘制光线的帧与最终帧合成时，通过最终帧的分辨率大小的深度缓冲，使用【Sobel Filter】（检测边缘的滤镜）检测出边缘，在Stencil Buffer里Mark。后面用这个Mark对轮廓部分做模糊来UpSampling做的合成的方法，来进行改善。
减少场景的轮廓产生的锯齿的方法
光线渲染的性能
光线的演示 光筋のデモムービー
这种用低分辨率缓冲来Ray Marching的方法，在Agni's Philosophy的Fog（雾，霞）的表现里也有使用。只是，与光线表现时有些不同，是从场景内被光照的物体对象的像素向视点发射线来实现的。 Ray Marching的时候，通过场景内配置的光源来进行光照，实现光的照射到模糊的雾的表现。但是，为了降低负荷，对雾的光照只在距离视点远的分地方进行（近处雾的浓度太薄很难表现出光照效果）。
雾的表现用Ray Marching方法来实现
フォグライティングの様子 使用光源对雾模糊做渲染的样子
关闭FOG
打开FOG
打开FOG和FOG光照
关闭FOG的场景绘制
打开FOG的场景绘制 对应内壁折射的玻璃瓶的折射表现Agni's Philosophy中，主人公Agni取得有水的玻璃瓶的场景 并不重要的一帧，但这个玻璃瓶的表现，也花费了很大的功夫。
透过透明材质看的情景，因为视线在表面上产生折射，会看到扭曲的移动，这些在平时也是可以体验的。 水面的表现上，用的比较多的方法是，先渲染没有水面的场景并Texture化，，渲染睡眠时，对应水面上视线的折射量对前面渲染的场景Texture进行采用来做表现折射。【折射】是有些难的印象，实质上是加入【对应表面状态的Offset】对场景Texture采样来实现。
屏幕空间上实现的折射效果
Agni's Philosophy开放时进行的最初实现，视线从玻璃瓶外侧的表面做1次折射的，完全看不出真实的效果。
最初尝试，对玻璃瓶眼前的表面进行折射处理的结果
从视线的背面对玻璃瓶的后侧来渲染， 这样的折射实验，虽然画面有所改善，但看起来像粗的玻璃棒
第二次尝试，对玻璃瓶的前面和后面进行折射处理的结果。
得到的表现是中空的玻璃瓶，这样并不足够好。这次把瓶子的内璧折射也实现，效果变得真实，得到了非常好的效果。
3号试验，不光是玻璃瓶的正面和背面，内壁也进行折射处理。
这样，最后实现的，视线被玻璃瓶折射了4次 玻璃瓶的内壁也要建模，实际渲染时，按下面的顺序进行。
首先，是距离视线最远的玻璃瓶的背面外侧，对玻璃瓶的外面进行渲染时得到的Z值较大的，按一般的渲染规则，视点朝向的是瓶子内面，这样内面被剔除（Culling）就无法绘制。这里需要改变Culling模式的处理（下面幻灯片中的（1）） 然后，是玻璃瓶背面内侧，渲染玻璃瓶内面时，保留Z值比较大的，按正常的Culling来绘制（幻灯片中的（2）） 同样，是玻璃瓶前侧的内壁，玻璃瓶内面渲染时，保留Z值较小的，用背面绘制用的Culling Mode（幻灯片中的（3））
实际的玻璃瓶的内壁也建模
Metaaphanon Napaporn氏（SQUARE ENIX 技术推进部）
通过事先的Pass，把这3表面做渲染，在最终Pass中，从视线侧向玻璃瓶的前面渲染时，此绘制的前面的外壁的点上发射射线，根据折射率从表面折射，按照玻璃瓶【前面外壁，前面内壁，后面内壁，后面外壁】的顺序，求出和下一个平面的交叉点，再计算出折射角度，这样反复，用最终瓶子背面射出的线来对场景Texture采样。
视线按【前面外壁，前面内壁，后面内壁，后面外壁】的顺序折射进入玻璃瓶的内部处理，实质是射线传递求出表面碰撞点（Ray Marching处理）。这个处理的消耗非常大。
最后，除了折射处理，还要加入考虑到镜面反射和菲涅尔反射的CubeMap环境Map，以及Decal Texture。 只是，演讲后从Metaaphanon Napaporn（SQUARE ENIX技术推进部）哪里确认，内壁和背后并没有进行处理。 不过，最后效果还是变的相当的真实。
只有4个表面的折射
增加镜面反射光照的结果
使用环境Cubemap后
使用Decal Texture后
玻璃材质的渲染演示 ガラス素材のレンダリングのデモ映像 GPU粒子系统的详细（1） 对应碰撞判断和立场的影响 Agni's Philosophy的粒子系统，基本上上都是GPU方面实现的。 构筑了粒子的产生，模拟和动画，消失，以及全部的绘制，都是不借助CPU来运作的子系统。 这个技术，最近通常称作【GPU粒子系统】，Epic Games的【Unreal Engine 4】也采用了GPU粒子系统
GPU粒子系统登场的背景，可以说是采用了DirectX 10时代的GPU里，在GPU内部生成几何体的【Geometry Shader】的出现，以及和CPU完全不同步的GPU自己绘制的DrawAuto功能的搭载。
Agni's Philosoph采用的GPU粒子系统
Napaporn解说到，Agni's Philosophy的GPU粒子系统，有非常多的功能完成度很高。 首先，全部的粒子，都设计为受立体的【力场】（Force Field）的影响。 【力场】没听过的话，例如【风】可以是力场的。 烟旋转着扩散的行为，作为一种程序化噪声（Procedural Noise），实现了【Curl-Noise】的立场。 程序化噪音的一种【Curl-Noise】来实现立场
这里使用的立场，是用素材向量的形式来表现，作为3DTexture来获取。例如把场景分割为3D网格，把速度力场存放在对应的3DTexture的Texel中，进行表现粒子被立体的风流翻转的表现。Napaporn提到【如果让这个3D Texture做动画，那么可以表现出随时间变化的气流表现】。
给予场立体的速度向量，也可以表现复杂的气流
还有，Agni's Philosophy的GPU粒子系统也对应碰撞判断。碰撞判断的基本形状有【球体】【圆筒】【长方体】，为了场景里的粒子不会进入到物体对象里，这三种形状需要适当的给每个物体模型上配置。
GPU粒子系统也对应碰撞判定
Agni's Philosophy使用的粒子系统，在判断到粒子碰撞的情况下，会给予【排斥力】（Repulsion Force）和【搬送力】（Vector Field）的立场。 【排斥力】是反弹的力。【搬送力】是把粒子用某个程度的力牵引移动的力。 搬送力的效果，看下面的影像可以理解。
没有有搬送力（Vector Field）和有搬送力（右）的比较 搬送力（Vector Field）なし（左）と，あり（右）の比較映像
Agni's Philosophy的GPU粒子系统中最有特征的立场功能可以认为是叫做Target Mesh的功能。 这个是让粒子，按目标的3D模型集合的来给予运动，作品中，在无数的萤火虫飞向召唤兽的骨骼的场景中采用了。 TragetMesh的举动，是把Target和粒子，用看不到的虚拟弹簧连接，距离目标地点越远速度越快，越近速度也慢的聚集的来运动。但是，为了防止远处的粒子速度太快给予最大速度来限制。
对于粒子，给予向3D模型的特定地点汇集的力场的【Target Mesh】功能。 GPU粒子系统的详细（2） 粒子的绘制系统和Fourier Opacity Mapping Agni's Philosophy的GPU粒子系统绘制的粒子，一般是四边形粒子（Billboard，PointSprite），也对应3D模型。而且，用四边形粒子的厚度信息来绘制的【虚拟MetaBall Particle】（Blobby Object）也有准备。
Agni's Philosophy的GPU粒子系统对应粒子变化
根据Napaporn所说，因为粒子使用半透明Texture的情况很多，也需要对应绘制前的排序（深处的不绘制很奇怪）。排序算法使用的【Bitonic Sort】，这些也在GPU粒子系统中实行。 另外，Bitonic Sort，是并行处理元素交换的点用GPU来处理的排序算法。GPU实现的例子，可以在NVIDIA的网站上详细参考。
半透明粒子的排序也在GPU中执行
四边形的粒子最基本的使用例，是场景开头的祭坛前排列的蜡烛的火焰。 四边形粒子，也可以对应给予三维的速度信息来变形，这个蜡烛场景中使用变形功能，让火焰Texture做动画，做出相当真实的效果。
场景开始的蜡烛火影实际是四边形粒子
预览版的Agni's Philosophy中，烟等流体系的特效是用的【Maya Fluid】和【FumeFX】等Maya上的功能插件来制作的。但是，预览版中，因为这些插件无法运行，所以要继承生成特效的Emitter的信息和特效的种类，以及运动的参数信息，把这些用GPU粒子系统来控制绘制。 负责Agni's Philosophy的美术制作的岩田 亮说道，“粒子的表现部分，要品味预览版的意图，在替换为GPU粒子系统的表现”。 这样辛苦替换的粒子的绘制品质，做明显的品质差距，就是粒子和场景里物体对象的交叉线的Artifact。
据Napaporn所说，这个是Artifact是用【软粒子（Soft Particle）】的技术来对应。 Soft Particle方法里，物体对象并不是平面，四边形粒子绘制时，有虚拟的厚度信息，通过【虚拟的厚度，与其他物体对象的交叉位置】来决定透明度绘制粒子的绘制方法。简单来说，是粒子和其他物体交叉透明度提升，交叉线的Artifact变薄的系统。
把这个厚度信息的分布保存在Texture中，这样也可以处理任意厚度的形状。一般来说，Napaporn在下面的幻灯片里提到用【球体状的厚度信息】来处理的情况比较多。球体的话，构成这个粒子的每个像素都要求出厚度信息。 烟等的粒子，这个的球体状的厚度信息足够了，在PlayStation 3和Xbox 360的游戏中，使用这个方法的很多。
Agni's Philosophy的软粒子绘制方法
不使用软粒子绘制（左）和使用（右）的比较
还有，粒子投下的影子和粒子的自身的自阴影的制作，采用的是NVIDIA的Jon Jansen和Louis Bavoil在2010年发表的【Fourier Opacity Mapping】 Fourier Opacity Mapping，是以烟为代表的【有流畅的光衰减特性】的计算投影的阴影生成方法。
这个方法的基本构思和Depth Shadow方法相似的部分很多，Depth Shadow的方法，是通过【光源位置到看到遮蔽物的距离分布】来生成ShadowMap，Fourier Opacity Mapping也是从光源位置观看来生成【Fourier Opacity Map】。
ここでキモとなるFourier Opacity Mapの概念の説明が難しいのだが，各テクセルには，「光源から出た光がパーティクルの透明度（不透明度）αや，厚みdによってどの程度減衰されるのか」の分布をフーリエ級数の係数a'k，b'kの形で記録するのだ（下スライド上段の式）。
这个要把Fourier Opacity Map的概念说明很难，是在每个Texel中，把【从光源发出的光到粒子的透明度（不透明度）α，厚度d的衰减程度】的分布，用傅里叶级数的系数a'k，b'k的形式来记录（下面幻灯片上段的公式）。 傅里叶级数的系数，是【把连续函数变化为正弦波的和的形式时，各个波长的正弦波的比重】的意思。感觉就是把经过烟雾的衰减的光的强度变化显示出来的图表，用正弦波和的形式来近似。
粒子的阴影生成使用的是Fourier Opacity Mapping
在渲染场景和物体时，并不是【该像素是否在阴影里】这样的YES/NO的二值判断，而是参考Fourier Opacity Map，取出傅里叶系数a'k，b'k，利用光源到这个像素的距离d，复原傅里叶级数来求出光的衰减量（上面幻灯片中下面的公式）
右下是生成的Fourier Opacity Map的可视化
关闭Fourier Opacity Mapping生成的阴影
打开Fourier Opacity Mapping生成的阴影
实际运行的演示在下面，另外说一句Fourier Opacity Mapping的阴影生成技术，在【蝙蝠侠：阿卡姆疯人院】了也有采用。
使用Fourier Opacity Mapping生成阴影的烟雾粒子的演示 Fourier Opacity Mappingによる影生成付き煙パーティクルのデモ
这里使用的傅里叶系数的数量多，品质也会提高，在Agni's Philosophy中，是把7个傅里叶系数输出到2个Fourier Opacity Map（RGBA的组件里每个保存4个参数）。多张的Fourier Opacity Map的生成，使用2个GPU的MRT（Multiple Render Target）来效率化。
另外i，NVIDIA实现的用4个MRT，16个系数实现的Fourier Opacity Mapping的演示在NVIDIA SDK 10中公开，有兴趣的人可以参考下。
而且，Driancourt还尝试过使用Fourier Opacity Mapping生成的阴影。但是，从下面的截图可以看出，缺少对比感，因为Depth Shadow的技术负荷更轻，就放弃了。
没有自阴影的头发
有自阴影的头发，阴影使用Fourier Opacity Mapping生成。
有自阴影的头发，使用的Depth Shadow和浓淡控制。是实际Runtime采用的方法。
GPU粒子系统（3）。 10万以上的萤火虫描绘和模拟的MetaBall粒子。
Agni's Philosophy的GPU粒子系统，有立体几何体构造的3D模型粒子也是可以绘制的。 这种利用3D物体对象粒子的效果，上文也有稍许接触，Agni's Philosophy的开头，无数的萤火虫飞来飞去的场景。
把萤火虫这个数十个多百年修的模型，使用4个模板循环动画，在GPU粒子系统上上登录，作品的场景中约10万只运动的同时，分别按各自的轨道的飞翔。
这个的绘制，使用的是DirectX 9开始追加的，把同一个模型用不同参数驱动重复绘制的【Geometry Instance】功能。4个模板的Animation Instance，由10万只萤火虫一只一只的分别加载。并不是所有的萤火虫同时开闭翅膀。
演示中萤火虫尾部的亮光，并没有实际的配置动态光源。发光是通过Bloom产生效果，在萤火虫尾部胴放置高动态范围的亮度信息。通过Bloom和Motion Blur的后处理效果来制作，因为增加了适当的模糊，看到了并不清晰的亮光。
那么，这萤火虫去，按前述的那样，向召唤兽的骨骼飞去，这个是使用上面提到的【Target Mesh】的行为控制。根据Napaporn所说，通过GPU把10万只荧火虫的【Target Mesh】的行为更新处理在约1ms完成相当的厉害。如果没有使用GPU粒子系统，能不能这么快速就不知道了。
萤火虫模型使用了4个模版的循环动画的翅膀。这个绘制使用了Geometry Instance技术。
10万只的萤火虫的运动更新处理在1ms里完成，是GPU粒子系统才有的性能
萤火虫向水晶汇集的Target Mesh行为控制的 蛍が水晶に集まろうとするターゲットメッシュ挙動制御のデモ 10万只萤火虫模型的绘制性能也引人注目
这些萤火虫，靠拢在召唤兽的骨骼上并变换成绽开的肉片，邻接的肉片有机的进行合体。 和萤火虫不同，这些肉片四边多边形的粒子（Billboard）来表现的。但是，这样绘制邻接的粒子的交叉线会变得明显。 这里使用的是，Agni's Philosophy的GPU粒子系统最后绘制形态的擬似MetaBall粒子。
从结论来看，这里虚拟的Metals粒子，是基于NVIDIA的技术Demo【Screen Space Fluid Rendering with Curvature Flow】。
首先，绘制粒子时同时描绘深度缓冲半球状的深度信息，后面在把这个深度缓冲按Z方向模糊来平整深度信息。然后，进行实质的着色，求出【平整后深度信息】的法线信息。然后，用这个深度的平整效果给予MetaBall有机结合的氛围，可以说这个肉片的MetaBall表现，是很好的2.5D的Fake效果。但是因为是巨大数量的效果，看起来非常真实和怪异。
疑似MetaBall粒子的实现概念图
从Napaporn氏哪里确认到【深度缓冲的平整（Blur）处理】，并没有使用高斯模糊滤镜，而是用的Separable Bilateral Filter。Bilateral Filter让亮度差很大的边缘部分不会变模糊的特性。 另外，NVIDIA的演示实现中，对圆形的深度深度值分布，使用了把曲率平均化的滤镜（Mean Curvature Flow Filter）。
疑似MetaBall粒子
加强深度值平坦化的效果
而且，这个疑似MetaBall粒子，也可以用来制作流水的表现，。和不透明的【肉片】和【血】不同，因为水是清澈透明的，不使用折射效果的话就没有真实的表现。
疑似Metabll粒子，在流血表现上被使用
这里Agni's Philosophy的GPU粒子系统在绘制透明的MetaBall粒子，在渲染粒子厚度信息到深度缓冲时，并不光是从视线方向正面渲染，还从后面渲染。这样，得到视线看到的水（块）的前后表面。
水的渲染也使用的疑似MetaBall粒子，但是，水是透明的，为了获得正确的折射效果，不光是视线方向的正面，背面的表面也必须要取得。
渲染水块时，利用【水块】的正后表面的信息。 折射的视线采样场景Texture的处理，和前面玻璃瓶的折射处理采用了同样的Ray Marching处理。 最后，为了水块有更真实的外观，使用镜面反射光照，和支持菲涅尔反射的环境Cubemap，并加入水独有的特效泡沫Texture。
用疑似MetaBall绘制水的透明
对疑似MetaBall粒子制作的水加入折射效果
加入镜面反射光照
使用泡沫Texture
使用环境CubemapMap后
加入后处理特效的最终影像。映入水滴的高动态范围背景的反射和折射效果的一部分产生了Flare闪闪放光。成为了非常显眼的效果。 另外，这里【进行了基于粒子的流体物理模拟，向深度Texture输出粒子的火毒信息来获取模糊表面】的方法称作【Smoothed Particle Hydrodynamics】（SPH）。
疑似MetaBall粒子制作的水和血的表现演示 疑似メタボールパーティクルで水や血を表現したデモ
据Napaporn所说，水块的渲染那，因为需要获得视线反方向的表面，来实施折射效果的处理，渲染的负荷非常的高。例如，同样数量的疑似MetaBall粒子制作的不透明的（肉片和血）与透明的（水）向比较，后者的性能要低15%。
总之，使用SPH方法实现大范围的水面很难，使用时必须要注意，在Agni's Philosophy中使用的，有从水面飞出的水花和流水的表现效果。今后说不定会在这类的表现上经常使用。
同样数量的疑似MetaBall粒子的透明和不透明绘制的比较，后者性能降低了15%。
Agni's Philosophy的最优化
岩﨑 浩氏（SQUARE ENIX 技术推进部 首席工程师）
对Agni's Philosophy制作的管线解说是岩﨑 浩。关于这个演示制作的的性能调试做描述，以及最后的内容介绍。 岩﨑进行的最优化中，最有效果的是【把分散的DrawCall合并减少】。可以说是实时3D的性能调试最基本的处理。
开头的场景中，各要素渲染需要的时间
消减DrawCall数的优化的效果最好
有意思的是，虽然Agni's Philosophy是场景1000万多边形级别来进行渲染的，但几何体的负荷并没有问题。所以，从预渲染版移植时，除了一部分模型做了顶点消减外，都是直接使用的（除去需要实时的Skinning的，总之，对角色的多边形数进行了消减）。 因此，对应背景物体到视点的距离进行剔除的LOD（Level of Detail）系统并没有被加入。在次世代游戏图形中，说不定多边形的限制和预渲染CG是一样的。 此外，作为突出的优化，是Depth Shadow技术中的阴影生成，准备了生成阴影的专用模型。某种意义上也可以说是使用LOD方法的部分。
没有必要进行优化的部分。
把1像素以下的多边形称为微多边形（Micro-Polygon）
把场景的这个部分扩大
这些多边形并没有进行顶点消减，就输入到了GPU里。
继续关注这里。
山中寺院的几何体。观察更加细节的地方
寺院的一扇门，进一步观察
像绳子一样的物体缠绕
扩大后如此的详细
实际上，这个绳子约9万个顶点（多边形）。当然，最初远景的视点状态这个几何体就输入到GPU了。
虽然这些顶点输入到GPU，在实际在GPU内部前期的Culling Check中就被排除了，并没有实行像素的绘制。但是，还是进行了几何体的计算处理。最新世代的GPU有可以承受几何体输入的性能这点还是很让人吃惊的
结束
橋本善久氏（CTO 执行董事＆技术推进部 已离职）
Agni's Philosophyの「リアルタイムグラフィックス技術解説」セッションのフルレポートおよび解説を行ってきたわけだが，いかがだったろうか。 以上就是Agni's Philosophy的【实时图形技术解说】会议的全部报道。
以往GPU厂商中的单个技术演示中所看到的高新技术，由技术推进部在3D游戏图形中使用的形式来实现，把所有这些整合有效的来使用。不用说Agni's Philosophy的影像非常厉害，这些技术演示等级的研究结果可以实用的来使用也很让人吃惊吧
但是，这次的Agni's Philosophy是把计算机全部分配到图形表现的成果。 但因为实际游戏，是场景的展开控制，输出控制，敌人的AI控制，游戏物理的各种游戏逻辑要素的综合，今后，次世代游戏引擎【Luminous Studio】如何实现这些要素的功能引人注目。这次的开放会议中，SE的三宅陽一郎氏也谈到了Luminous Studio的AI架构，可以看出构成游戏的重要元素AI有明确的实现方案。
技术推进部和Luminous Studio的挑战才刚刚开始
让我们震惊的Agni's Philosophy项目，对CTO橋本善久所带领的技术推进部可以说是很大里程碑了，但对他们来说也只是一个通过点，他们实现的目标是【未来的游戏体验】，会在一个更新是起始点开始也说不定。
但这个新的起始点肯定是非常厉害的。期待Luminous Studio的完成有它开放的游戏登场的那天。
原作者：西川善司
| 
![[焦散][碎裂]脉络-四方连续](https://pic.element3ds.com/data/attachment/category/202205/27/2914331653659619QqVkkM.jpg)
