前言

本文为“优梦创客”原创文章,您可以自由转载,但必须加入完整的版权声明

更多学习资源请加QQ:1517069595获取(企业级性能优化/热更新/Shader特效/服务器/商业项目实战/每周直播/一对一指导)

点赞、关注、分享可免费获得配套学习资源

完整视频可以点击B站链接:点击观看完整视频

各位同学大家好!欢迎大家来到我们的直播课堂,今天这节课要给大家分享的是《泛二次元卡通渲染》的技术原理与实现。

近几年以来二次元卡通渲染是游戏中越来越被广泛采用的渲染方式,像我们课程封面图上的《原神》、《崩坏》、《阴阳师》、《明日方舟》都是一些非常流行的二次元手游佳作。

那么今天我要分享给大家的就是如何实现二次元的风格化渲染效果,以及对于已经在职的或者在开发独立游戏的小伙伴们,如何将这项渲染技术应用在自己的项目中。

主题

  • 二次元卡渲的技术概览
  • 二次元卡渲的着色实现
    • Part 1:亮部与暗部
    • Part 2:细节处理
    • Part 3:技术实现
  • 商业项目实现的重点和难点问题详解

技术概览



二次元卡通渲染实际上是二次元卡通渲染的一个分支,而二次元卡通渲染又是风格化渲染的一个分支。

当我们打算立项制作一款游戏的时候,首先我们的美术团队就要确定整体的画面风格,偏写实还是偏风格化,偏风格化的话,那么风格化的程度如何,并且风格化渲染又有很多种分类,常见于:水墨风、铅笔风、卡通风,卡通风格又可以分成美式动漫风格和日式二次元风格,我们平时所说的二次元卡通渲染指的就是这种日式渲染风格。

下面我们来看一看,如果我们打算立项一个二次元风格的游戏,那么在商业项目的开发中要经历几个步骤呢?

二次元卡通渲染的分类


美式卡通风格在色彩上比较连续,有渐变色,着色风格很大程度上依赖于艺术家定义的色调(tone),而在阴影和高光方面常常采取夸张和变形的做法,比较典型的是《军团要塞2》。

日式卡通风格往往角色造型更写实,但在着色方面,则趋向于大片大片纯色色块,并有的明暗交界,例如《崩坏3》。虽然这样的分类并没有清晰界限,但易于描述,接下来我们就按照美式卡通和日式卡通的分类,从光影和描边两个维度上分别列举各类技术实现。

二次元卡通渲染的步骤


那么二次元卡通渲染总体的步骤在图形学当中基本是没有什么变化的。

就是第1步先描边,第2步再着色。

当然具体到描边和着色的技巧,那么这么多年就会有蛮多的演变了。我们今天,会重点针对二次元卡通渲染中的描边步骤做较为深入的讲解
包括,描边的具体实现的多种方法,每个步骤的实现细节,以及在商业项目中的实现技巧。

如何着色

二次元卡通渲染技术的实现

Part 1:亮部与暗部

什么是阴影?

阴=暗面,所有还有…?

明暗过度


diffuseMin为色条中肉色最上端位置

着色分阶


着色分阶视频传送门

Part 2:细节表现

  • 面部阴影
  • 阴影倾向
  • 边缘光
  • 内轮廓线

面部细节刻画


  • 如何修正?

    • 调整好角色的法线
  • 如何调整?
    • TA工具箱

阴影倾向的表现


实际制作中,会希望阴影有一定的倾向,即有些地方容易产生阴影,有些地方则很难产生阴影。
比如,凹陷的地方和受周围遮挡的地方应该被认为是影,需要增加阴影倾向,改变光照表现。
这时候可以用一张贴图或 者顶点色控制阴影的倾向。但是,阴影倾向信息不能反映外部遮挡物投射的阴影,最好结合 ShadowMap 一起使用

边缘光


大家能看出来哪副图有边缘光吗?(右,盔甲上)身体各个部分,或者不同材质的边缘光最好用 mask精确区分

内轮廓线

Part 3:实现


那么我们如何实现这个效果呢?

三张贴图

  • MainTex:主纹理贴图

  • DetailMap: 细节贴图

  • ShadowMap:暗部贴图

  • DetailMap

    • 高光强度贴图
    • 阴影区域贴图
    • 高光区域贴图
    • 内轮廓线贴图

Shadow Map

  • 亮部颜色=MainTex
  • 暗部颜色=MainTex*Shadow Map

用于调整阴影的颜色

着色-细节处理


着色细节处理视频传送门

思考

  • 如何实现整体着色效果?
  • 如何刷面部法线?
  • 如何实现头发各向异性高光?
  • 如何整体投射和接收阴影?

如何学习

  • 理解总体美术目标
  • 分析美术需求,形成Shader开发思路
  • Shader实现
  • 效果调整
  • 商业项目中的TA技巧与面试经验

更多学习资源请加QQ:1517069595获取(企业级性能优化/热更新/Shader特效/服务器/商业项目实战/每周直播/一对一指导)

点赞、关注、分享可免费获得配套学习资源

完整视频可以点击B站链接:点击观看完整视频

二次元卡通渲染-着色相关推荐

  1. 二次元卡通渲染之描边

    前言 本文为"优梦创客"原创文章,您可以自由转载,但必须加入完整的版权声明 更多学习资源请加QQ:1517069595获取(企业级性能优化/热更新/Shader特效/服务器/商业项 ...

  2. 二次元卡通渲染——进阶技巧

    前言 随着<原神>游戏的盛行,国内对于二次元游戏这块儿领域越来越看重了.二次元项目中本身基于日本的卡通动漫而来,所以最后的本质都是为了尽量还原2D立绘,而并不像PBR追求物理正确,只要好看 ...

  3. 寄存器分配图着色_【02】从零开始的卡通渲染-着色篇1

    专栏目录 2173:[01]从零开始的卡通渲染-描边篇​zhuanlan.zhihu.com 2173:[02]从零开始的卡通渲染-着色篇1​zhuanlan.zhihu.com 2173:[03]从 ...

  4. 腾讯游戏主美:二次元卡通渲染有哪些黑科技?

    今年,<原神>的出现让行业注意到了三渲二这种独特的画风.但在二次元游戏中,<原神>其实并非第一个吃螃蟹的人.作为腾讯游戏魔方工作室群<王牌战士>项目组的主美,谢海天 ...

  5. Unity制作二次元卡通渲染角色材质——2、色阶化光影的多种做法对比

    Unity制作二次元材质角色 回到目录 大家好,我是阿赵. 这里继续讲二次元角色渲染.之前说过,最基本的卡通渲染,包含了色阶化光影和描边二个元素.所以这里先来说一下色阶化光影的多种做法对比. 一.光照 ...

  6. Unity制作二次元卡通渲染角色材质——5、脸部的特殊处理

    Unity制作二次元材质角色 回到目录 大家好,我是阿赵. 这里继续讲二次元角色材质的制作.这次是讲头部的做法. 1.脸部 之前在分析资源的时候,其实已经发现了这个模型的脸部法线有问题,导致在做光照模 ...

  7. Unity制作二次元卡通渲染角色材质——1、资源分析

    Unity制作二次元材质角色 回到目录 大家好,我是阿赵. 开始制作二次元角色材质之前,我觉得应该是先分析一下,我手上拿到的这个角色模型资源,总共有哪些信息是我们能用的. 所以这篇文章我不会分享具体的 ...

  8. Unity制作二次元卡通渲染角色材质——4 、内外描边和细节添加

    Unity制作二次元材质角色 回到目录 大家好,我是阿赵. 这里继续讲二次元角色材质.这次打算讲一下描边和细节的添加. 一.外描边 外描边的做法也不止一种,比如后处理方法的偏导数ddx/ddy之类的, ...

  9. Unity制作二次元卡通渲染角色材质——3、高光反射与ILM贴图

    Unity制作二次元材质角色 回到目录 大家好,我是阿赵. 这里继续来讲二次元角色的材质.上次讲了光影的色阶化问题,这次继续讲光照模型效果的问题. 之前我们说过,光照模型的最后效果是: 环境色+漫反射 ...

最新文章

  1. 使用最小堆使用优先级队列(c语言版本)
  2. 如何优雅关闭 Spring Boot 应用
  3. 【Java面试题】docker启动失败原因
  4. 使用泛型查询数据小例
  5. 产品经理面试中如何攻克有关用户体验的问题?
  6. 跟踪DB2的sql语句
  7. Windows socket之最简单的socket程序
  8. 基于junit4的关于个人所得税计算的等价类与边界值_《边界值分析》-有这篇就够了...
  9. Linux ALSA声卡驱动之四:Control设备的创建
  10. python怎么处理文字_python 处理给规范的文字
  11. 电脑pro,大师屏幕,小米归来!小米笔记本Pro 15 OLED首发评测
  12. 在IIS服务器上安装SSL证书
  13. Mysql索引成本计算规则 Optimizer Trace
  14. 搜狗深入布局人工智能 Q2营收利润创新高
  15. java解析html_java中几种解析html的工具
  16. CCF NOI1154 大整数开方
  17. verilog将像素数据写入txt_【测试工具】测试数据生成工具datafaker
  18. 5G NR CSI Report中关于codebook/PMI的理解(1)
  19. Java程序设计实验三 面向接口编程
  20. Word的样式库在 选项卡中_Word自动生成目录的四种方法步骤

热门文章

  1. 型男的帅气秘诀绝对少不了这对CP
  2. 求质(素)数中的筛选思想
  3. 计算机科学技术学院博逸楼,逍遥二路(宁夏路)附近校内附属设施
  4. Google play billing(Google play 内支付) 下篇
  5. 用leaflet做地图数据分析与可视化
  6. 在线SVG转png的网站
  7. 使用QML进行界面开发
  8. 大数据之Flink流式计算引擎
  9. 【每天一个java设计模式(十四)】 - 解释器模式
  10. Django表单类forms与模型关联以及表单验证