当前位置:   article > 正文

Shader学习12——简易图片叠加

shader 一张图叠在另一张上

看到蛮牛有人想要两个带透明通道的图片叠加,就是最简单的纹理混合,想想其实实现起来应该很简单,但是搜了一下还真没搜到,这里简单实现一下,要求底图需要是不透明的:

image.png
image.png
image.png

在系统创建的ImageEffectShader基础上略改一下:

  1. Shader "Hidden/图片叠加"
  2. {
  3. Properties
  4. {
  5. _MainTex ("Texture", 2D) = "white" {}
  6. _BlendTex ("Blend Texture", 2D) = "white" {}
  7. _Blend("Blend", Range(0,1)) = 0
  8. }
  9. SubShader
  10. {
  11. // No culling or depth
  12. Cull Off ZWrite Off ZTest Always
  13. Pass
  14. {
  15. CGPROGRAM
  16. #pragma vertex vert
  17. #pragma fragment frag
  18. #include "UnityCG.cginc"
  19. struct appdata
  20. {
  21. float4 vertex : POSITION;
  22. float2 uv : TEXCOORD0;
  23. };
  24. struct v2f
  25. {
  26. float2 uv : TEXCOORD0;
  27. float4 vertex : SV_POSITION;
  28. };
  29. v2f vert (appdata v)
  30. {
  31. v2f o;
  32. o.vertex = UnityObjectToClipPos(v.vertex);
  33. o.uv = v.uv;
  34. return o;
  35. }
  36. sampler2D _MainTex;
  37. sampler2D _BlendTex;
  38. float _Blend;
  39. fixed4 frag (v2f i) : SV_Target
  40. {
  41. //获取两个贴图的颜色信息
  42. fixed4 col = tex2D(_MainTex, i.uv);
  43. fixed4 blendcol = tex2D(_BlendTex, i.uv);
  44. //增加_Blend值控制第二张贴图的混合度
  45. //saturate限制到0-1
  46. float blend=saturate(blendcol.a-_Blend);
  47. //如果叠加贴图当前像素透明度为0,则取底图像素,否则取叠加图片的像素
  48. fixed4 color=col*(1-blend)+blendcol*blend;
  49. return color;
  50. }
  51. ENDCG
  52. }
  53. }
  54. }

如果想要底图也带透明通道,可以将底图颜色再乘一下底图的alpha,然后开启图片的透明通道设置即可:

image.png
image.png
  1. Shader "Hidden/图片叠加"
  2. {
  3. Properties
  4. {
  5. _MainTex ("Texture", 2D) = "white" {}
  6. _BlendTex ("Blend Texture", 2D) = "white" {}
  7. _Blend("Blend", Range(0,1)) = 0
  8. }
  9. SubShader
  10. {
  11. Tags{ "Queue" = "Transparent" "RenderType" = "Transparent" }
  12. Blend SrcAlpha OneMinusSrcAlpha
  13. // No culling or depth
  14. Cull Off ZWrite Off ZTest Always
  15. Pass
  16. {
  17. CGPROGRAM
  18. #pragma vertex vert
  19. #pragma fragment frag
  20. #include "UnityCG.cginc"
  21. struct appdata
  22. {
  23. float4 vertex : POSITION;
  24. float2 uv : TEXCOORD0;
  25. };
  26. struct v2f
  27. {
  28. float2 uv : TEXCOORD0;
  29. float4 vertex : SV_POSITION;
  30. };
  31. v2f vert (appdata v)
  32. {
  33. v2f o;
  34. o.vertex = UnityObjectToClipPos(v.vertex);
  35. o.uv = v.uv;
  36. return o;
  37. }
  38. sampler2D _MainTex;
  39. sampler2D _BlendTex;
  40. float _Blend;
  41. fixed4 frag (v2f i) : SV_Target
  42. {
  43. //获取两个贴图的颜色信息
  44. fixed4 col = tex2D(_MainTex, i.uv);
  45. fixed4 blendcol = tex2D(_BlendTex, i.uv);
  46. //增加_Blend值控制第二张贴图的混合度
  47. //saturate限制到0-1
  48. float blend=saturate(blendcol.a-_Blend);
  49. //如果叠加贴图当前像素透明度为0,则取底图像素,否则取叠加图片的像素
  50. fixed4 color=col*(1-blend)*col.a+blendcol*blend;
  51. return color;
  52. }
  53. ENDCG
  54. }
  55. }
  56. }
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/羊村懒王/article/detail/98152
推荐阅读
相关标签
  

闽ICP备14008679号