Cocos 引擎

创建于:2019-11-05

创建人: CocosEngine

14 信息 33 成员
与Cocos引擎、游戏开发有关的内容

Cocos Creator次世代人物渲染实战:眼睛篇

CocosEngine 2021-11-04

眼睛往往是项目中腾挪空间较大的资产:它可以很简单,用一张贴图即可;它也可以非常复杂,美术大神会手动雕刻虹膜的每一条沟壑。作为通俗的“灵魂的窗口”,即便是风格化的卡通美术项目,眼睛的重要性也不容忽视。在关于眼睛的美术资产制作流程,可以参考这篇文档

确立目标

与皮肤篇和头发篇一样,我们将基于 Cocos Creator 的 PBR 流程实现引擎中的眼球渲染效果。

我们的美术资源包括一张表现“眼白”(学名是巩膜)部分的颜色贴图,一张表现“眼眸”(学名是巩膜)部分的颜色贴图,一张法线贴图和一张MatCap贴图。其中,虹膜圆形的边缘用虹膜贴图的alpha通道表达。除此之外,我们还需要一些小技巧来表现眼珠在眼眶中的遮蔽关系,这将会在后文中详说。

奠定理论

眼睛的结构需要我们关注哪些点呢?我们仍然需要求教于参考图:

Image title


  • 虹膜直径大约等于整个眼球的半径;
  • 瞳孔的直径大约等于虹膜的半径;
  • 眼球并不是正球体,在虹膜前方又突起的液泡结构;

首先我们需要了解的是:眼球不是一个正球形,在虹膜的正前方位置有一个圆形的突起。这是因为虹膜正前方有一个液泡的结构,而整个眼球又包裹在透明的巩膜里,所以眼球是一个整体流线型,在正前方有小突起的球体。这些细节,美术的同学会进行表现。

综合来说,虹膜将会是我们的核心,我们需要重点处理虹膜和巩膜、瞳孔以及它正前方的液泡的关系。


UV的处理和归一化

在头发篇中,我们已经聊到了UV数据和其他类型的数据一样,可以对它进行算数运算。我们熟悉的UV Tiling的功能就是通过用UV乘以一个常量实现的。对于虹膜贴图,我们也可以采用相同的处理:

vec2 offsetUV = v_uv * irisSize;

我们新建了一个浮点参数irisSize,并让他与UV数据直接相乘。结果和UV Tiling是一样的:虹膜贴图在UV上的比例缩小了(在irisSize取值大于1的情况下),并且在UV空出来的部分叠加上了同样的虹膜贴图。

当然,我们的眼珠只需要一个虹膜。我们既希望利用常量相乘的办法缩放UV,又不需要贴图的叠加,只需要在贴图的属性中将Wrap Mode设为clamp-to-edge即可。

Image title


叠加消除了,我们又遇到了新的问题:贴图似乎缩放到了左下方的角落里。我们需要对坐标系做归一化处理,让我们在缩放UV的同时,贴图可以保持在UDIM正中心。

vec2 offsetUV = (v_uv - 0.5) * irisSize +  0.5;

我们的虹膜大小和位置已经差不多了,下面我们需要将虹膜向后“推”进眼球里,以表现液泡和虹膜的前后关系。我们可以使用视差贴图的方法实现这个效果。

视差贴图

Image title


       如上图所示,灰色平面代表物体的基本网格平面,在此基础上物体有突起的表面结构,用红色曲线表示。当我们以上图V向量的方向观察物体时,我们理应观察到红色曲线上的B点,当突起的表面结构不存在时,我们则会观察到基本网格上的A点。换言之:我们需要A点上的网格数据,去实现高度在B点的渲染效果。

       我们知道,高度贴图(Height Map)表达的是物体切线空间的高度数据。也就是说,A点的切线空间高度数值(H(A))是可以通过贴图获得的。但是B点呢?我们通常会以A点的切线空间高度作为数值权重,以观察向量V的反方向(从片元指向摄像机)进行缩放,就可以大致得到B的位置坐标。这样的计算当然不能做到完全精准,但效果是我们可以接受的。

Image title


       方法有了,我们需要做的第一步是获得从片元指向摄像机的向量,并将其转化到切线空间当中:

vec3  worldDirPosToCam = normalize(cc_cameraPos.xyz - v_position);

vec3  tangentDirPosToCam = vec3(dot(worldDirPosToCam, v_tangent),  dot(worldDirPosToCam, v_bitangent), dot(worldDirPosToCam, v_normal));

       我们可以利用得到的切线空间向量,对UV进行偏移,以偏移后的UV坐标读取切线空间的高度信息。这样我们就在A点得到了B点的高度输出:

vec2  parallaxUV( vec3 V, vec2 uv, float iniHeight, float scalar ){

    vec2 delta = V.xy / V.z * iniHeight *  scalar;

    return uv - delta;

  }

       上面的代码需要带入四个参数:V为我们刚求得的切线空间中的从片元指向摄像机的向量,uv为物体的原uv(即我们已经在皮肤篇和头发篇中使用过的“v_uv”),scalar为自定义的权重参数,iniHeight是片元的原高度数据,这个数据应该由一张贴图提供。在我们的着色器中,我们只需要用视差贴图做一些简单的像素偏移,因此没有准备专门的高度贴图,我们可以用颜色贴图的任意一个通道,或者直接使用一个常量0.5作为代替。

       得到了视差贴图的函数,我们就可以把它用在虹膜上面了。

vec2 offsetUV =  (v_uv - 0.5) * irisSize + 0.5;

vec4  irisTex = texture(irisMap, offsetUV);

vec2 irispUV =  parallaxUV( tangentDirPosToCam, offsetUV, irisTex.r, parallaxScale );

vec3 irisColor  = SRGBToLinear(texture(irisMap, irispUV).xyz);

       我们可以用之前的缩放归一后的UV得到有视差效果的虹膜UV,用这套新UV赋予我们的虹膜贴图,得到的结果应该类似下图:

Image title


(gif传不了图,尴尬)

       如图所示,随着权重数值的变化,我们的虹膜贴图应该能够沿着法线方向向前“推”或向后“缩”,同时我们也发现,我们目前的视差贴图只能达到一种近似的效果,随着权重数值增大,视差的效果也会越来越失真。因此我们在使用它时,需要注意将数值控制在比较低的范围内。

完成虹膜

       虹膜的处理已经差不多了,下面我们需要处理一下瞳孔。

       完成了虹膜的视差,我们如法炮制,对我们得到的视差UV做归一化处理。区别在于,这次我们将UV归一化,这相当于将所有的UV塌陷到归一化坐标的原点上。使用这个UV采样贴图,得到像素向坐标中心拉伸的效果。

       接下来,就是制作一个遮罩将虹膜和瞳孔混合在一起了。

vec2  pupilpUV = normalize(irispUV - 0.5) + 0.5;

float  pupilIndex = (1.0 - length(v_uv - 0.5) * 2.0 * irisSize) * (0.8 * pupilSize);

vec2 irisUV =  mix(irispUV, pupilpUV, pupilIndex);

vec3 irisColor  = SRGBToLinear(texture(irisMap, irisUV).xyz) * irisColor.xyz;

       通过自定义参数irisSize和pupilSize,我们可以分别控制虹膜和瞳孔的大小。我们也可以为虹膜贴图自定义一个偏转的颜色irisColor,快速制作出不同颜色的眼眸。

      

       下面我们可以把虹膜贴到眼球上了。眼球的基本材质使用巩膜贴图,我们只需要把虹膜的部分叠加在上面即可。虹膜贴图的边缘部分是用alpha通道的渐变完成的,我们可以用指数运算控制渐变的曲线强度,从而控制虹膜边缘的硬度:

vec3  scleraTex = SRGBToLinear(texture(scleraMap, v_uv).xyz);

float  irisEdgeIndex = clamp(pow(irisTex.a, irisEdge), 0.0, 1.0);

vec3 eyeBase =  mix(scleraTex, irisColor, irisEdgeIndex) * irisColor.xyz;

       目前眼球的固有颜色信息已经得到了。但是我们的眼球看上去和直接贴了一张颜色贴图没有什么区别。下面我们需要做的是:为眼球赋予“神”。

Image title


MatCap贴图

Image title


       所谓有“神”的眼睛,可以简单概括为“有高光和/或有反光的眼睛”。如参考图所示,上面两张参考图中的眼睛显得更加生动和有活力,而下面两张则看上去非常死板,好似无机物。

       然而,游戏中角色的眼睛并不是总能恰好反射环境中的光照,当环境有某些特定的需求或者从某些特定的角度观察时,眼睛很有可能没有足够的高光或反光。更何况,眼睛固然重要,但毕竟是一个较小的反射面,为此专门进行反射的光照计算似乎有点得不偿失。一个常见的折中办法是:把高光和反光作为贴图,永久地“贴”在眼睛表面。这样无论任何环境和角度,角色的眼睛里永远有星辰大海。

       所谓MatCap贴图,顾名思义,是一张把整个材质(“Mat”-erial)的特性捕捉(“Cap”-ture)到像素内的贴图。MatCap贴图通常绘制的是一个球体,着色器会根据球体上的明暗面、高光和反射,为整个材质绘制明暗关系和高反光。美术的同学应该对MatCap并不陌生——ZBrush中用于渲染动辄上百万个多边形的材质正是使用MatCap着色器。因此MatCap有着效率极高,又足够能表现明暗关系和质感的优点。同时,MatCap的缺点也是显而易见的:无论从哪个角度观察,MatCap材质的明暗关系和高反光永远一成不变。

       在我们的着色器中实现MatCap材质也非常简单:我们知道MatCap的特性是它永远正对观察方向,既然如此,得到一套永远正对摄像机的UV,用它来采样MatCap贴图即可。我们知道,法线数据表达的是物体表面片元正对的方向,因此把法线数据转换到视图空间,只取X和Y轴数据,就能得到我们想要的UV:

vec4 matCapUV =  (cc_matView * vec4(v_normal, 0.0)) * 0.5 + 0.5;

vec4 matCapUV =  (cc_matView * vec4(v_normal, 0.0)) * 0.5 + 0.5;

       确定了UV,剩下的工作就水到渠成了:

vec3  matCapColor = SRGBToLinear(texture(reflecMap, matCapUV.xy).xyz) * reflecAmt;

vec3 eyeColor =  eyeBase + matCapColor;

我们的着色器已经编写完成了,让我们来看看效果:

      Image title

       按理来说,我们该参考的图都参考了,该考虑的变量都考虑了,该做的工作都做了,但这白森森的眼神,还是直接营造出一种纸人既视感。尤其是从较远距离观察的时候,白的发亮的眼珠更是莫名惊悚。

       这是因为:眼珠和身体的其他部位一样,应该相互产生遮蔽的关系。我们的眼珠是单独制作的,所以和眼皮没有暗部遮蔽,因此在整张脸上特别出挑。这也是角色渲染的一个常见问题:我们对人脸都太熟悉不过了,以至于人脸上如果出现异于常理的现象都会触发本能的警觉。而且当其他的部分越趋近于真实时,这种恐怖感越严重。

        如果是一个静态的部位,这个问题非常好解决:烘培一张AO即可。但是对于角色来说,绝大多数的角色眼球是需要骨骼动画的,直接把AO烘培在眼球上显然不可取。我们需要做的是在眼球的模型前方再新建一个遮蔽的模型,给它赋予一个AO的透明贴图,单独作为AO保留在模型上。这个模型除了AO将不会起任何其他作用,因此只需要给予一个基本的Unlit材质,也不会消耗额外资源。这种做法,也是包括UE4在内的许多引擎选择的做法。

    Image title   增加了AO之后,我们角色的眼神柔和了许多,眼球和眼眶的衔接也更自然了。

Image title


结语

我们对人物渲染的探索到这里就可以成功收官了。在我们试图解答一个个渲染问题的过程中,我们获得的不仅是皮肤、头发和眼睛,同时也包括了:

  • 了解方形模糊和高斯模糊的原理,并实现高效率的模糊效果;
  • 探索人类皮肤的Diffuse Profile并用代码重现现实观测的数据;
  • 了解次表面散射和各向异性高光的逻辑和原理;
  • 学习纵横行业30余年的Kajiya-Kay模型;
  • 尝试视差贴图的渲染方法;
  • 学习和使用MatCap贴图;

虽然我们只是在 Cocos Creator 现有的着色器上进行修改,但相信你也已经发现:在Cocos Creator着色器的基础上编写自己的着色器,不仅省去了大量GLSL基础工作,而且可以一步到位地获得PBR的基础渲染效果。在一个稳固的基础上,我们可以自由发挥,尝试各种各样的方法和模型, 实现丰富多样的渲染需求。

(转发自:原日志地址
 

加入 indienova

  • 建立个人/工作室档案
  • 建立开发中的游戏档案
  • 关注个人/工作室动态
  • 寻找合作伙伴共同开发
  • 寻求线上发行
  • 更多服务……
登录/注册