![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Shader Graph
艺菲
这个作者很懒,什么都没留下…
展开
-
Shader Graph25-UV移动旋转缩放(自定义函数)
Offset为偏移值,Rotation为旋转速度,Scale为重复数,Pivot旋转中心的位置。一、UE在Material中右键,新建Material Function。三、Unity版本,新建Sub Graph命名为TransformUV。UVs变量后面增加一个默认UV的设置,如果没有uv传入则使用默认uv。编写内容,可以复制摇晃树叶的代码进入该sub graph。我们将UV操作放入函数内,该函数的内容来自我之前的文章。别忘了保存,最后的代码是这样的。修改Output名字和类型。原创 2023-10-18 09:00:40 · 589 阅读 · 0 评论 -
Shader Graph24-摇晃树叶
三、换上我们的图片,在time节点后添加一个sine,让他的位置是周期性的就行了。一、开始Unreal,新建Materail命名为DemoUVRotation。二、在网上找个素材,去掉背景,保证树根是在边上的位置。原创 2023-08-24 09:11:38 · 304 阅读 · 0 评论 -
Shader Graph23-Tessellation镶嵌
Tessellation Factor控制生成三角形的数量,Tessellation Displacement控制生成三角形的偏移。在低模上通过Shader的方式增加三角形的数量,从而使得图形表现上更加逼真。下图左侧Displacement=1,右侧Displacement=0.01。下图左边是Factor=1,右边是Factor=16。这里我们使用的是高度图。原创 2023-08-16 16:27:11 · 131 阅读 · 0 评论 -
Shader Graph22-卡通风格(上)
二、0.5、0.5、0.5为模拟的光线方向,VertexNormalWS为法线的世界坐标,Dot点积之后得到指定光线方向分布,Multiply(,0.5)和Add(,0.5)是去掉负值。Texture我们需要用photoshop制作。一、打开Unreal,新建Material命名为DemoToonPaint。PS制作的gradient注意取消勾选sRGB选项。下面是256x256的图。三、Unity的版本。原创 2023-07-05 08:34:05 · 209 阅读 · 0 评论 -
Shader Graph21-UV投影cubemap
TransformVector设置从World Space到Tangent Space,也就是坐标原点移动到了这么面中心点位置,x是从原点指向右侧,y是从原点指向下侧,z是从原点垂直于平面指向外,连接DebugFloat3Values进行测试,转动视角可以观察值得变化。在Unreal中Texcoord直接输出显示的是如上图,原点是左上角,U是x的值所以显示红色,V是y的值所以显示绿色,红色+绿色=黄色,所以中间部分是黄色。分为两个部分,红线内部和红线外部,红线内部变形较大,红线外部变形较小。原创 2023-06-16 09:20:39 · 775 阅读 · 0 评论 -
Shader Graph20-三面拉伸修复
Mask部分,先使用VertexNormal取绝对值然后Power得到红绿蓝三色间隔黑色部分,然后使用divide去掉黑色部分,得到下图左侧的结果,然后Split得到B方向也就是z轴方向的结果。在场景上添加两个球体,左侧是使用Triplanar Projection,右侧是没有使用的。右侧的在水平方向是上有拉伸现象,顶部还有聚集缩小的现象。Shader中下边红框为Mask的部分对应红绿蓝三色图,绿框部分Texture对应带有拉伸Texture图,两部分的结果就是最左侧的图。而x、y的方向上纹理出现了拉伸。原创 2023-06-01 11:45:25 · 183 阅读 · 0 评论 -
Shader Graph19-位置函数
Mask(B)是只选择垂直方向,Multiply(,0.01)使黑白的颜色变淡,Add(,1)是使黑白的分界线向下移动,Power是增强现在效果,Lerp就是线性插值由Texture到黑白的一个渐变,Alpha设置为0.1。因为中心点为物体中心,所以将坐标值连接到Base Color上是上面的效果,然后在场景中添加一个球体,将材质应用在该球体上,按下w我们可以在场景中改变物体的坐标,法线颜色并没有随着位置的改变而改变。添加红框的部分,将上明下暗效果叠加到已有的材质上。原创 2023-05-27 12:37:15 · 705 阅读 · 0 评论 -
Shader Graph18-反射、折射函数
第二个参数是Surface Normal就是法线方向,第三个参数是入射介质为空气的折射值1,第四个参数是射出介质为玻璃折射值1.54,下面配个图看看。首先是看一下引擎内置的反射,Base Color设置为1是白色,Metallic设置为1金属强度为最大,Roughness为0粗糙度为最小,那么最后的结果球面上显示的就是周围环境。Lerp的作用是混合两个图的效果,但是我们想要的是边缘反射,中间折射的效果,所以增加Fresnel节点,Fresnel的作用是边缘接近于1,中间接近于0,正是我们需要的。原创 2023-05-21 15:12:17 · 986 阅读 · 0 评论 -
Shader Graph17-幂函数(power)
这个过程的结果也可以看成是y=Base^Exp的曲线,目前Base=0.5,Exp由1~5变化如下图,可以看到箭头的大小越来越小,所以结果是越来越黑。图片随便找一张放到Textures下面,拖拽到编辑视图内就可以了,然后调整Power的Exp的值,我下面设置的是0.5,1,2。0.5为常量,表示为灰色,连接到Power,Exp为1的时候,最后的结果就是0.5x0.5=0.25,所以颜色会变黑。逐渐改变Exp的值由1~5,观察颜色的变化。Exp的值由1~4的结果。四、Unity的版本。原创 2023-05-17 14:13:48 · 250 阅读 · 0 评论 -
Shader Graph16-正弦函数
使用Time生成一个自动增加的变量,然后通过Frac节点只取小数部分,也就是从0.1~0.9的重复,通过Subtract节点后,结果是从-0.9~-0.1范围,然后再通过Add节点与Texture Sample相加的结果就是好像原点在不断增大的效果,解释一下为什么最后的效果是不断增大。Subtract的结果为-0.9。时,纹理中心数值为1,1-0.9=0.1,纹理最边缘数值为0,0-0.9=-0.9。以此类推,下面的数值是这样算出来的。Clamp是截取数值在0~5之间,再乘以0.5是控制圈的个数。原创 2023-05-13 08:13:57 · 155 阅读 · 0 评论 -
Shader Graph15-DDX、DDY(像素导数)
先获得顶点坐标,DDX为水平方向在顶点的导数,DDY为垂直方向在顶点的导数,导数也就是切线方向。Cross是算出叉积也就是垂直于DDX和DDY的平面法线向量,再通过TransformVector转换连接到Normal接口上,形成了迪斯科灯球的样子。这里要注意将Transform的源改为World目标改为Tangent。一、Unreal版本。原创 2023-05-07 08:41:40 · 383 阅读 · 0 评论 -
Shader Graph14-上限、下限、四舍五入函数
Floor的意思是将0~1的值降低至0所以是黑色的,Ceil的意思是将0~1的值提高至1所以是白色的,Round的意思是大于0.5的值提高至1,小于0.5的值降低至,所以显示的是黑白相间的。接下来我们将数值由-1~1转换到0~1的范围内。这样黑白过渡的更自然,有些游戏引擎使用这种光照half lambert,在入射光方向上的面更亮,其他的方向的面更暗。下面我们自己模拟灯光的方向0.5、0.5、0.5,VertexNormalWS为表面法线方向,这样有光照的地方更亮数值为1,相反的地方就更暗数值为-1。原创 2023-05-05 08:41:20 · 191 阅读 · 0 评论 -
Shader Graph13-长度函数、距离函数下
来回移动是使用Sine+Time来实现的,加一个Time节点让数值在-1到1的不断变化。现在的情况是整体在y轴上来回移动,但我们的目标是最下面不动。所以我们的思路是按照从下到上的,由小到大控制移动的距离。所以这里我们加上Mask节点,属性勾选B,只保留z轴的方向,然后与Sine的结果相乘。结论就是原点是立方体中心的位置,整个立方体的边长为256,所以我们观察y轴正向的数值为128,-y的方向数值为-128。同理z轴也是这样的。我们会发现中间红线的部分是不动的,上面和下面相对运动。最下面不动,上面左右摆动。原创 2023-04-27 10:42:05 · 114 阅读 · 0 评论 -
Shader Graph13-长度函数、距离函数上
一、Camera节点的Position表示相机坐标,Position代表物体顶点坐标记得改为Absolute World,这样Distance计算的就是相机与物体的距离,除以5的意思是在5m的范围内,物体的颜色会从黑色变成白色。下面我们用subtract和Length节点替换Distance节点,像下面这样,效果和上面是一样的。Camera与Position做减法之后得到是向量,然后再通过Length计算该向量的大小。这里Divide的参数500的原因是unreal默认的单位是cm,而Unity的单位m。原创 2023-04-26 11:11:36 · 271 阅读 · 0 评论 -
Shader Graph8-输入向量
当我们旋转相机的时候,立方体面上的颜色就会发生变化,这个颜色表示就是相机的法线方向。这里要注意的是,官方对于相机法线的方向的说法是,由像素到相机的方向。因为(0,0,1)是垂直向上的,立方体的所有面的法线与它点积之后,只有顶面的结果为1,所有只有顶面是白色的,其他面都是黑色的,也就是0。我们选择Top视图,立方体面的颜色为蓝色,选择Bottom视图,立方体面的颜色为黑色。正的x、y、z法线向量对应的颜色是红、绿、蓝,负的x、y、z的法线向量对应的颜色是黑色。每个面都有法线,法线向量是这样的。原创 2023-04-09 14:27:08 · 494 阅读 · 0 评论 -
Shader Graph6-点积函数(下)
它的效果与之前的效果的一样的,因为我们的两个参数都是1,下面我们改一下参数值。先将Power的Exp的值改为4,出现下面第2个图效果,继续修改Multiply的参数B改为4,出现下面第3个图效果,第一个图是两个参数都是1的情况。第一个图是棉毛织物,第二个图是丝绸,m黄线表示表面最高的位置,b蓝线表示表面边缘位置。我们可以看出棉毛织物的m线比较亮,b线比较暗,而丝绸的m线比较暗,b线是比较亮的,所以下面我们要使用菲尼尔效果模拟不同布料的效果。我们发现参数1控制内部光亮的范围,参数2控制内部光亮的强度。原创 2023-04-06 20:32:15 · 332 阅读 · 0 评论 -
Shader Graph6-点积函数(上)
当我们从最上面向下看时,View Direction的方向与Normal Vector的方向是一致的,而下下面的图View Direction的方向与Normal Vector的方向形成了一定的角度。那么图1这两个向量的夹角是0,cos0度=1,图2这两个向量的夹角比方说是60度 ,那么cos60=1/2,所以说图1的结果就比图2的结果要大,所以这就解释了为什么文章一开始的shader的连接的结果比较亮,不连接的结果比较暗。当我们选择预览的立方体的时候,为什么总是朝向我们的面会比较亮的原因。原创 2023-04-06 10:49:37 · 545 阅读 · 0 评论 -
Shader Graph5-线性插值函数(下)
Desaturation去饱和度表达式将其输入去饱和度,或者将其输入的颜色转换为基于一定百分比的灰色阴影。Lerp结合Desaturation节点,Alpha为0时A100%显示。Alpha为1时B100%显示。当我们把值调为负的时候。原创 2023-04-04 13:32:13 · 84 阅读 · 0 评论 -
Shader Graph5-线性插值函数(上)
星形外围黑色的部分相当于数字0,0的时候A占100%,也就是图1的3显示,4不显示,星形中间的部分是白色相当于数字1,1的时候B占100%,也就是图2的3不显示,4显示。Lerp上的T可以理解为占比,T=0时A的占比100%,T=1时B的占比100%,T=0.5时A、B各占比50%添加节点时,注意我们选择的是Math->LinearInterpolate,变量是使用Constant。修改变量的值,我们可以点击float,然后在左侧修改Value的值。换成Lerp节点,x=0得到红色,x=1得到蓝色。原创 2023-04-04 13:15:56 · 699 阅读 · 0 评论 -
Shader Graph4-Texture介绍(图解)
在UE中我们查看Texture的属性,看看可以修改什么东西。将tgz或png图片直接拖拽进Textures文件夹内,然后双击就可以看到Texture的属性了。Textures文件夹是示例工程自带的。原创 2023-04-03 14:35:15 · 711 阅读 · 0 评论 -
Shader Graph3-第一个Shader滚动UV
UE和Unity的shader工作流程基本一致,只是Unity中的UV节点在UE中使用的是TexCoord,使用UE的时候可以直接拖拽Texture到工作区,它会自动创建节点。Multiply左侧的0.3是控制UV滚动速度的,通过特殊的节点获得UV的值,而不能是直接将值连接到UV上是不对的。原创 2023-04-01 15:52:38 · 348 阅读 · 0 评论 -
Shader Graph1-渲染管线介绍
由CPU将顶点信息发送给DirectX或OpenGL,继续发送给Graphic Driver显卡驱动程序,发送给GPU Front End为GPU顶点着色器,下一步如果我们需要使用代码添加效果,则我们可以通过Programmable Vertex Processor将我们的shader增加的顶点效果添加到原有模型的顶点上。那么对应在Unity和UE中应该是怎么样操作呢?unity中如果我们要对顶点增加效果,就将节点连接到Vertex上,如果对像素增加效果就连接到Fragment上。原创 2023-03-28 13:04:22 · 122 阅读 · 0 评论 -
Shader Graph2-PBR介绍之光线(图解)
由上面4个小类,分别组合就形成了4种情况,分别是Direct Specular、Direct Diffuse、Indirect Specular和Indirect Diffuse,计算机为了方便计算将现实中情况进行了简化分成了4种类型。讲一讲光线的类型,光线分为入射光线和反射光线,入射光分为Direct直接光和Indirect间接光,反射光分为Specular镜面反射和Diffuse漫反射。原创 2023-03-29 16:14:11 · 172 阅读 · 0 评论