移动端角色渲染(丝绸篇)

1,160 阅读2分钟

“我正在参加掘金社区游戏创意投稿大赛个人赛,详情请看:游戏创意投稿大赛

接下来给大家分享一下移动端丝绸的渲染表现,丝绸渲染对角色整体效果还是有显著提升的,代表作有《闪耀暖暖》《崩坏宣传片系列》。。。相信大家对这些渲染表现已经见到比较多了,但怎样移植到移动端,并且达到高品质的渲染效果呢,今天给大家集中分享一下。

话不多说,先来看一下效果吧:

image.png 整体效果

image.png 细节表现

image.png 细节表现

image.png 细节表现

image.png 不同颜色效果

实现过程:

丝绸材质光照模型相对来说比较的复杂,里面的有比较多的微表面的反射以及菲尼尔。

下面我简单绘制一下大概的光照:

image.png 比较的粗略,大概看一下吧。

所以普通的GGX光照模型难以表现丝绸的细节高光效果。

所以为了模拟复杂的光照效果,这里看一下光照模型的实现步骤:

首先实现Tangent及Bitnormal的方向对高光控制:

image.png

image.png G项

image.png D项

image.png F项

最终的光照计算:

image.png

整体光照模型计算

注意事项:

为了让丝绸效果反射效果得到更好的表现,这里需要偏移法线向量的方向,为后面的反射计算做好准备!!!

image.png

偏移法线向量

其实整个效果实现还是相对比较简单的,但是需要明确理解每个光照分量,

然我们看下丝绸比较难控制的部分吧,就是丝绸的半透明效果,我们都知道,直接使用半透明混合模式的话,丝绸的半透明渲染会出现排序问题,这里就不班门弄斧了,直接看了网上的文章,使用了比较实惠的挖洞技术。

其实这个技术是一个比较老的技术了,但是目前的硬件水平已经非常高了,远非早些年哪些像素游戏可比的,所以这里再次采用这种技术来处理半透明丝绸的渲染表现.

image.png

点阵透明方案

半透明实现效果:

image.png

丝绸透明度50%

细节纹理表现:

这里通过一张灰度图的mask(位置可以塞在贴图的任意通道),来控制细节法线的强度和tiling。

image.png

可调节双层细节法线效果

image.png

不同细节纹理

动态效果:

image.png

整体动态效果

image.png

变色效果

声明:发布此文是出于传递更多知识以供交流学习之目的。若有来源标注错误或侵犯了您的合法权益 ,请作者持权属证明与我们联系,我们将及时更正、删除,谢谢。