一、图片投影

1、创建材质函数

MF_PS_Style_Shadow

定义 function input。

公开到库（可选）

Shadow代码：

/**
PS图层样式投影效果@param {UVs}                     texture coordinate@param {Texture}                 texture object@param {TextureSize}             纹理大小（x, y）@param {ShadowRGBA}                    投影颜色与不透明度@param {ShadowRotate}             投影角度@param {ShadowLength}              投影距离@param {ShadowSize}                    投影大小@param {BorderThreshold}           边界UVs阈值（左, 上, 右, 下）
*/
float4 Shadow(float2 UVs, Texture2D Texture, float2 TextureSize, float4 ShadowRGBA, float ShadowRotate, half ShadowLength, half ShadowSize, float4 BorderThreshold=0.001) {const float PI = acos(-1);// 单位像素float2 TexturePixel = 1 / TextureSize;// 角度float Angle = 360 * ShadowRotate;// 弧度float Degrees = Angle / 180 * PI;// 阴影反向方位（单位向量）float2 Direction = TexturePixel * float2(cos(Degrees), sin(Degrees));class Function {Texture2D Texture;SamplerState TextureSampler;float4 ShadowRGBA;float2 Position;float BorderThresholdLeft;float BorderThresholdTop;float BorderThresholdRight;float BorderThresholdBottom;float PI;float2 TexturePixel;// 阴影颜色float3 ShadowColor(float3 Color) {// 如果需要与颜色混合，在此修改返回值，如下式 正片叠底。//    return this.ShadowRGBA.rgb * Color;return this.ShadowRGBA.rgb;}// 混合float3 Blend(float3 base, float3 blend, float alpha) {// 如果使用了混合模式，把 blend 按混合公式计算一次，如下式 正片叠底。//  blend = base * blend;return lerp(base, blend, alpha);}// 纹理采样float4 TextureSample(float2 UVs) {// 如果需要 alpha 通道反向，在此修改。return Texture2DSampleLevel(this.Texture, this.TextureSampler, UVs, 0).xyzw;}float4 GetShadowRGBA(float2 UVs) {// 当前像素点 RGBAfloat4 TextureRGBA = this.TextureSample(UVs);// 阴影反向方位 UVsfloat2 PositionUVs = UVs + this.Position;// 阴影反向方位 UVs 超出了 0 - 1 的范围则不计算if (PositionUVs.x < this.BorderThresholdLeft || PositionUVs.x > this.BorderThresholdRight || PositionUVs.y < this.BorderThresholdTop || PositionUVs.y > this.BorderThresholdBottom) {return TextureRGBA;}// 阴影反向方位像素点RGBAfloat4 PositionRGBA = this.TextureSample(PositionUVs);// 阴影透明度float ShadowOpacity = PositionRGBA.a * this.ShadowRGBA.a;if (ShadowOpacity <= 0) {return TextureRGBA;}// 当前像素点混合后的结果色//    this.ShadowRGBA.rgb 为 base 固有色//    TextureRGBA.rgb 为 blend 固有色//   TextureRGBA.a 为 alphafloat3 ShadowBlendColor = this.Blend(this.ShadowColor(PositionRGBA.rgb) * ShadowOpacity, TextureRGBA.rgb, TextureRGBA.a);// 当前像素点混合后的透明度float ShadowBlendOpacity = ShadowOpacity + TextureRGBA.a - ShadowOpacity * TextureRGBA.a;// 当前像素点混合后的RGBAreturn float4(ShadowBlendColor / ShadowBlendOpacity, ShadowBlendOpacity);}float Calculate1DGaussian(float x) {return exp(-0.5 * pow(this.PI * x, 2));}float4 GetShadowSizeRGBA(float2 UVs, half ShadowSize) {// 当前像素点 RGBAfloat4 TextureRGBA = this.TextureSample(UVs);// 投影大小范围内像素颜色累加float4 RGBASum = float4(0, 0, 0, 0);// 投影大小范围内像素的权重float WeightSum = 0;for (half x = -ShadowSize; x <= ShadowSize; x++) {for (half y = -ShadowSize; y <= ShadowSize; y++) {float Weight = this.Calculate1DGaussian(x / ShadowSize) * this.Calculate1DGaussian(y / ShadowSize);WeightSum += Weight;// 阴影偏移 UVsfloat2 OffsetUVs = UVs + float2(x, y) * this.TexturePixel + this.Position;if (OffsetUVs.x < this.BorderThresholdLeft || OffsetUVs.x > this.BorderThresholdRight || OffsetUVs.y < this.BorderThresholdTop || OffsetUVs.y > this.BorderThresholdBottom) {continue;}// 阴影偏移像素点 RGBAfloat4 OffsetRGBA = this.TextureSample(OffsetUVs);// 阴影透明度float Opacity = this.ShadowRGBA.a * OffsetRGBA.a;if (Opacity <= 0) {continue;}// 阴影结果色float4 RGBA = float4(this.ShadowColor(OffsetRGBA.rgb), Opacity);RGBASum += RGBA * Weight;}}// 模糊后的 RGBAfloat4 BlurRGBA = RGBASum / WeightSum;// 当前像素点混合后的结果色float3 Color = this.Blend(BlurRGBA.rgb * BlurRGBA.a, TextureRGBA.rgb, TextureRGBA.a);// 当前像素点混合后的透明度float Opacity = BlurRGBA.a + TextureRGBA.a - BlurRGBA.a * TextureRGBA.a;// 当前像素点混合后的RGBAreturn float4(Color / Opacity, Opacity);}};        // 注意要加分号// Function func;// func.Texture = Texture;// func.TextureSampler = TextureSampler;// func.ShadowRGBA = ShadowRGBA;// func.Position = ShadowLength * Direction;// func.BorderThresholdLeft = BorderThreshold.x;// func.BorderThresholdTop = BorderThreshold.y;// func.BorderThresholdRight = 1 - BorderThreshold.z;// func.BorderThresholdBottom = 1 - BorderThreshold.w;// func.PI = PI;// func.TexturePixel = TexturePixel;Function func = { Texture, TextureSampler, ShadowRGBA, ShadowLength * Direction, BorderThreshold.x, BorderThreshold.y, 1 - BorderThreshold.z, 1 - BorderThreshold.w, PI, TexturePixel };if (ShadowSize < 1) {return func.GetShadowRGBA(UVs);}return func.GetShadowSizeRGBA(UVs, round(ShadowSize));
}

2、创建材质

M_PS_Style_Shadow

修改材质域和混合模式。

调用之前创建的材质函数。

材质函数调用方式。

如果之前没有公开到库，则使用 material function call 调用

3、效果预览

二、文字投影

1、添加 Retainer Box

设置尺寸，并指定效果材质。

2、添加 TextBlock

3、设置材质实例参数

由于字体所在画布大小为 300 * 100，这里要设置同步。

4、效果预览（需要运行游戏才能看到效果）

ShadowSize 为 0。

ShadowSize 为 10。

ShadowSize 为 20。

需要改颜色就修改 ShadowRGBA。

三、人物角色投影

1、创建渲染目标

命名 RT_Equipment。

用于 UI 贴图，修改参数，这里大小使用1024。

2、创建 Actor

命名 BP_Equipment

添加场景捕获组件2D。

根据需要设置参数。

添加骨骼网络体组件。

指定模型与动画。

调整好位置。

3、放入场景。

将 BP_Equipment 放入 Level，也可以在运行时动态生成。

4、修改材质

由于 A 通道需要反向，所以之前的 Shadow 代码做如下改动：

     // 纹理采样float4 TextureSample(float2 UVs) {// 如果需要 alpha 通道反向，在此修改。float4 PixelRGBA = Texture2DSampleLevel(this.Texture, this.TextureSampler, UVs, 0).xyzw;return float4(PixelRGBA.rgb, 1 - PixelRGBA.a);}

5、效果预览

四、使用混合模式

假定使用正片叠底，代码做如下改动。

     // 阴影颜色float3 ShadowColor(float3 Color) {// 如果需要与颜色混合，在此修改返回值，如下式 正片叠底。return this.ShadowRGBA.rgb * Color;}

也可以换成其他的混合模式，具体算法可以参考文章《HLSL实现PS混合模式》。

效果预览

UE5实现PS图层样式投影效果相关推荐

【有利可图网】PS实战系列：PS图层样式设计制作透明塑料质感字体效果
本篇教大家如何巧用PS图层样式设计制作透明塑料质感字体效果!教程讲解过程灰常的详细,首先把字体复制多层,副本文字图层填充都改为零,然后为副本字体层设置图层样式,这样就可以叠加出高光细腻,质感不错的文字 ...
ps—ps图层样式阴影样式详解/等高线/扩展/大小等
今天让我们来了解一下图层样式里面的阴影样式,打开阴影样式的面板我们发现里面有很多的选项,下面介绍一下各个选项的作用原理和效果(下面的解释仅是我个人的理解) 1.混合模式混合模式跟图层的混合模式是一样 ...
PS图层样式制作双色巧克力字
来源:uimaker.com 文字由两部分构成,底层的巧克力及顶部的粉红色装饰层.每一部分都是用样式来设置纹理及质感,顶部图层还需用滤镜等把轮廓变形处理. 最终效果 1.这儿我们先新建一个文件,大小是 ...
真实的玻璃反光效果PS图层样式
高级感玻璃反光效果图层样式模板,提供PSD文件,编辑智能对象图层,即可实现真实的玻璃反光效果照片.
PS图层样式中的“图案叠加”技巧
在我们的Photoshop中,图层样式是被应用最多的设计手段,那么在图层样式中,图案叠加相信有不少的朋友已经用过了,下面我们先来看看这图案叠加可以用来做什么~ 首先在Photoshop中随意新建个画布 ...
图层样式混合选项_ps教程，混合颜色带原理讲解
在ps图层样式的混合模式选项中,最下面有一个颜色混合带,与蒙版的效果差不多,可以理解为是蒙版功能的延伸,是以像素为单位来隐藏,而蒙版是以整个图层来隐藏. 在混合颜色带选项后,有一个选框,里面有灰色选项 ...
图层样式混合选项_图标设计，用PS的图层样式制作逼真的玉石图标
在PS中如何用图层样式制作出精美逼真的玉石,相信很多同学们都很想来学习一下,其实在PS里制作该类型的图标还是比较好上手的,用好图层样式可以制作很多有创意的作品,就可以制作出来逼真漂亮的玉石图标,具体制 ...
PS初学者实例教程——图层样式的学习［斜面和浮雕］
本系列教程由中国教程网互助课堂专为PS新手制作,在这里有系列的教程.练习,并有老师对练习进行点评与指导,欢迎朋友们的光临! 本例我们学习"斜面和浮雕"图层样式斜面和浮雕是使用 ...
敬伟PS教程：掌握篇B01初级抠图、B02制图操作、B03图层样式、B04工具介绍
B站倍速 F12 控制台 document.querySelector('video').playbackRate = 2.5 B01初级抠图调整边缘介绍抠图,调整边缘(ps2021选择并遮住) ...
5.22 对图层应用多个相同的图层样式(新) [原创Ps教程]
原文:http://coolketang.com/staticPhotoshop/5a98d4ad0b61607bf6cc25a9.html 1. 新版本提供了一项极为有用的功能:允许对图层多次应用相 ...

UE5实现PS图层样式投影效果