<美术向TA入门课 From 庄懂> L02
本文最后更新于203 天前,其中的信息可能已经过时,如有错误请发送邮件到2939296129@qq.com

Lesson1作业标准答案

思路

实现

作业点评


作业批改

作业1 简单玉石效果

可以看到这是一个像玉石的效果,拆解一下就是:

HalfLambert采样RampTex + NdotV边缘光 + Trick双高光

接下来讲详细实现过程

HalfLambert采样RampTex

双高光Trick

思路:偏移法线,再dotL,给高亮部分一个阈值,让其形成一个黑白遮罩,再插值上高光的颜色

先偏移法线(偏移LightDir也可以得到一样的效果)

归一化后dot光线Dir

大于阈值输出1,小于阈值输出0,形成黑白遮罩

Max合并两个高光,Clamp将其钳制在01之间(防止负数),Lerp插值RampColor和HighLightColor

边缘光

这里用到Fresnel节点,菲涅尔详细原理公式这里就不给出了,直接用就好了,最后加上原来的颜色即可。

效果

猴头有点锯齿,应该是模型的问题。


作业2 屏幕空间条纹纹理

HatchingShader,手绘素描的效果

拆解一下:

Lambert + ScreenPosition和Depth采样HatchTex + Lerp明暗颜色

这个作业效果,由于ShaderForge里有个Depth节点,在ASE中没实现出来,所以在Unity2019用SF复刻了

Lambert

先是连个NdotL,然后Clamp到01之间,乘上一个BaseColor

效果:


HatchTex采样

我们使用ScreenPostion来采样HatchTex

可以看到效果如下,并且根据摄像机距离远近会导致效果不同

ScreenPos采样HatchTex
摄像机距离远

因此我们需要给ScreenPosition乘上Depth,这样就不会产生问题了

Depth节点:目标点到摄像机的距离

加上Depth

接下来将采样结果与Lambert基础光照Step,神奇的效果就出现了

如果 [A] 小于或等于 [B],则输出 1,否则输出 0

Step后

颜色

接下来就是用Step的结果,插值两种颜色,然后加上Lambert的基础色,就完成了

连连看

这里留个坑:这个shader是在built-in管线下用SF连的效果,之后在URP下用代码或者ASE复刻这个效果。

ASE版本

效果比较怪,摄像机离得近没有问题,如果离得远还存在摩尔纹的问题,不知道是哪里导致的,以后再排查吧。

相对正常
摩尔纹问题

作业3 程序化点阵纹理HalfTone

一个halftone的效果

Lambert + 程序化纹理,这个效果实现过程中,涉及到了一些数学知识

Halftone

与HatchingShader类似,我们同样需要用ScreenPosition,将ScreenPos乘上一个Size参数,用Frac函数来实现uv的拆分。

效果如下:

Frac

接下来Remap一下uv的范围,从01映射到-0.5~0.5,效果如下,remap后 原点 到了 中心点位置

Remap

Remap的目的在于下一步的,Length是取向量的模长,生成黑点程序纹理,

Length

接下来调整下Size,就有点感觉了

Size=120

Lambert

简单连个Lambert,将其Remap到-0.5~2

这里得到的效果非常奇怪,是与正常Lambert光照相反的结果(不准确)

这一步看似没有用,但是非常的有用,不知道是怎么想到这样的Trick的

接下来将原来的Halftone,用重映射后的值进行pow,效果如下

pow后的效果竟然正常了,这里解释一下原理,程序生成出来的纹理值在0-1之间,重映射后的NodtL值:

越黑越接近0(也有可能是负数),在黑色部分,pow出来的值就越接近1或大于1,也就是白色

越白数值越大(1~max),在白色部分,pow出来的值越接近0,也就是黑色


最后round函数,增加对比,最终效果如下:

round:四舍五入,非0即1

贴上整个节点图:

思考

这个案例确实足够的有意思,也让我学到了很多,用数学方法来实现了程序化的纹理生成,加上一些trick最终实现了这样的美术效果。

图形编程还是离不开数学,想要用程序化的方式去生成很多好看的效果,以及一些特殊的trick,少不了扎实的数学功底。


情报·卡渲

卡通渲染的风格有很多种,赛璐璐,大色块等


卡通渲染的技术那就更多了


比较常用的两种卡通渲染方案:罪恶装备和究极风暴


以及HatchingShading在游戏中的应用

这样的风格化阴影还是很好看的,这里先埋个坑,之后有机会都去实现一下()


内容规范

TA需要整理团队项目资源,因此规范自身很重要

对应文件放在相应的文件夹下面,一种像我这样对应文件夹下面放每课的内容,另一种就是给每课单独创个文件夹,再创建相应的文件夹放文件。两种都行,能方便找到就ok。


总结

这节课主要介绍了三种效果,并不算特别难,但有些细节还是存在一些问题的

比如:

  • 作业2、3的屏幕空间坐标的问题,在ASE中效果与SF中不太一样,应该如何得到一样的效果
  • unity2022,urp下作业2实现出来有摩尔纹,以及阴影效果不太对,如何修正
  • 作业3中,我尝试了用屏幕空间uv来作为ScreenPos,但是效果乘出来不对,是为啥

这些问题目前以我的知识要解决还有点麻烦,暂且先放一下,在以后的学习过程中,再回头来看。

还有就是介绍了一些卡渲的技术和方案效果,但课程中介绍的方案目前来说应该已经过时了,后续会研究如今二游的卡通渲染方案。


暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇