卡通金属渲染思路

最新推荐文章于 2022-11-12 21:29:26 发布

TA_Soli

最新推荐文章于 2022-11-12 21:29:26 发布

阅读量3.8k

点赞数 2

分类专栏： Shader 文章标签： shader unity

本文链接：https://blog.csdn.net/weixin_42653501/article/details/107025992

版权

文章案例与素材均来自MinionsArt，如有需要请直接关注其Patreon账号

先上效果图：

$ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b0gd4oZ5-1593426513147)(D:\Post\asset\image-20200629173212607.png)]$

分析思路

首先我们根据图片来确定其所包含的元素：

白色高光
黄色二级高光（或者说金属高光反射）
阴影部分

还有两点比较隐秘，也是细节所在，盾牌的中心鹰的周围是暗紫色的无金属区域，所以要区别开来

其次是边缘自发光，用来模拟淡淡的边缘bloom效果（或者金属Frensel）

代码实现

有了需求，代码的实现思路就会更加清楚明了

白色高光（highlight）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wKXkoh7B-1593426513150)(D:\Post\asset\image-20200629180202703.png)]$

注意此处也可以使用smoothstep，这里使用step是为了达到卡通渲染中光照边界线明显的效果，具体的使用视项目效果来定
金属高光反射（specular）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dzbihDsS-1593426513151)(D:\Post\asset\image-20200629180542877.png)]$

原理同上，设置了一个cutoff阈值，这常用来控制高光颜色区域
阴影部分

阴影部分完全可以按照正常颜色来渲染，直接一个_BaseColor，乘上cutoff就可以用来控制其渲染区域了
无金属区域

这个也比较简单，首先想到的一定是使用一张遮罩图进行处理，这里使用了一张如下的图

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-swoC5fQL-1593426513152)(D:\Post\asset\image-20200629181110902.png)]$

红色部分代表金属区域，黑色部分代表非金属区域（通过R通道来判断)

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MyMVBt6v-1593426513153)(D:\Post\asset\image-20200629181305564.png)]$
边缘泛光（Rim）

我们在金属物品的周围添加一层淡淡的自发光效果，就可以模拟金子“布灵布灵”的效果了

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mhAIXWKL-1593426513154)(D:\Post\asset\image-20200629181535532.png)]$
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3huVT6yI-1593426513154)(D:\Post\asset\image-20200629181611243.png)]$

整体代码如下：

Shader "MayoHa/ToonMetal"
{
   
    Properties
    {
   
        [Header(Base)]
        _BaseColor ("基础颜色", Color) = (1,1,1,1)
        _MainTex ("基础贴图", 2D) = "white" {
   }
        
        [Header

最低0.47元/天解锁文章

TA_Soli

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
卡通金属渲染思路

文章案例与素材均来自MinionsArt，如有需要请直接关注其Patreon账号先上效果图：分析思路首先我们根据图片来确定其所包含的元素：白色高光黄色二级高光（或者说金属高光反射）阴影部分还有两点比较隐秘，也是细节所在，盾牌的中心鹰的周围是暗紫色的无金属区域，所以要区别开来其次是边缘自发光，用来模拟淡淡的边缘bloom效果（或者金属Frensel）代码实现有了需求，代码的实现思路就会更加清楚明了白色高光（highlight）注意此处也可以使用smoothstep，.
复制链接

扫一扫