Photoshop入门学习之使用Unity Render Textures实现画面特效—画面特效中的类似Photoshop的基本混合模式
小标 2018-09-13 来源 : 阅读 1827 评论 0

摘要:本文主要向大家介绍了Photoshop入门学习之使用Unity Render Textures实现画面特效—画面特效中的类似Photoshop的基本混合模式,通过具体的内容向大家展现,希望对大家Photoshop入门学习有所帮助。

本文主要向大家介绍了Photoshop入门学习之使用Unity Render Textures实现画面特效—画面特效中的类似Photoshop的基本混合模式,通过具体的内容向大家展现,希望对大家Photoshop入门学习有所帮助。

写在前面画面特效并不只限于调整游戏画面的颜色。我们还可以使用它们来和其他的图片混合起来。这个技术和在Photoshop里新建一个layer很像,我们可以选择一个混合模式来混合两张图片,在我们的例子里,其中一张就是指render texture。这使得美术人员可以在游戏里面模拟各种混合效果,而不是仅仅在Photoshop里。这篇文章里,我们将要学习一些常见的混合模式,例如,正片叠底(Multiply),Add,滤色(Screen,这竟然是滤色的意思。。。)。你将会发现这些都不难实现~知识补习这里增加一个内容,就是对各种混合模式的理解。正片叠底(Multiply)和滤色(Screen)正片叠底(Multiply)和滤色(Screen)是两种基本的混合模式,分别用于使图片变暗和变亮。它们之间的组合还可以形成更复杂的混合模式,如叠加(Overlay)和柔光(Soft Light)。正片叠底 —— 就是把两层图像的像素相乘,最后会得到一个更暗的图像。这个模式是对称的,也就是说交换基色和混合色得到的结果是一样的。,其中a是基色,b是混合色。滤色 —— 首先把两层图像的像素值取互补数,然后将它们相乘,最后再去互补数。这和正片叠底得到的结果是相反的。它会得到一个更亮的图像。,其中a是基色,b是混合色。叠加 —— 结合了正片叠底和滤色两种混合模式。基色中亮色的部分会更加亮,而暗色的部分会更暗。,其中a是基色,b是混合色。准备工作这一篇同样很多代码是建立在上一篇的基础上,所以很多代码不用写啦~创建一个新的脚本,命名为BlendMode_ImageEffect;创建一个新的Shader,命名为BlendMode_Effect;把本章第一篇中的C#代码复制到第一步中创建的脚本中;(我发现原作者貌似也因为复制粘贴忘了删掉亮度、饱和度、对比度那句话。。。)把本章第一篇中的Shader代码复制到第二步中创建的Shader中;把新的脚本添加到Camera上,并使用新的Shader给脚本中的Cur Shader赋值。这篇里我们会需要一张纹理来演示混合效果。你可以从本书资源(见文章最上方)里找到这张难看的图片,作者说这是为了更容易看到效果~。。。下面的图就是我们要使用的纹理啦!这张纹理除了丑以外,它的细节很丰富,灰度范围也很大,有利于我们检验混合效果。实现我们要实现的第一个混合模式就是正片叠底(Multiply),说白了就是把基色和混合色相乘。为了能够控制透明度(opacity),我们还需要一个属性: Properties {
  _MainTex ("Base (RGB)", 2D) = "white" {}
  _BlendTex ("Blend Texture", 2D) = "white" {}
  _Opacity ("Blend Opacity", Range(0.0, 1.0)) = 1.0
 }同样,在我们在CGPROGRAM块中创建对应的变量:  Pass {
   CGPROGRAM
   #pragma vertex vert_img
   #pragma fragment frag
   
   #include "UnityCG.cginc"
   
   uniform sampler2D _MainTex;
   uniform sampler2D _BlendTex;
   fixed _Opacity;最后,我们修改frag函数,让它来对两张纹理执行乘法操作:   fixed4 frag(v2f_img i) : COLOR
   {
    //Get the colors from the RenderTexture and the uv‘s
    //from the v2f_img struct
    fixed4 renderTex = tex2D(_MainTex, i.uv);
    fixed4 blendTex = tex2D(_BlendTex, i.uv);
    
    // Perform a multiply Blend mode
    fixed4 blendedMultiply = renderTex * blendTex;
    
    // Adjust amount of Blend Mode with a lerp
    renderTex = lerp(renderTex, blendedMultiply,  _Opacity);
    
    return renderTex;
   }下面开始编辑C#脚本。首先,我们需要创建对应的变量。所以我们需要一张可以在面板中赋值的纹理,以及一个可变的透明度: #region Variables
 public Shader curShader;
 public Texture2D blendTexture;
 public float blendOpacity = 1.0f;
 
 private Material curMaterial;
 #endregion然后,我们需要在OnRenderImage函数中把变量数据传递给Shader: void OnRenderImage (RenderTexture sourceTexture, RenderTexture destTexture){
  if (curShader != null) {
   material.SetTexture("_BlendTex", blendTexture);
   material.SetFloat("_Opacity", blendOpacity);
   
   Graphics.Blit(sourceTexture, destTexture, material);
  } else {
   Graphics.Blit(sourceTexture, destTexture);
  }
 }最后,我们在函数中保证blendOpacity的值范围在0.0到1.0: void Update () {
  blendOpacity = Mathf.Clamp(blendOpacity, 0.0f, 1.0f);
 }完成后,你可以把任意图片作为混合图片传递给脚本。最后,你可以看到类似下面的结果:Multiply混合模式 Opacity = 0.5 :Multiply混合模式 Opacity = 1.0 :通过上面的实现,我们可以发现实现这样的混合效果实际并不难,下面我们继续添加一些简单的混合模式。扩展下面我们实现另外两种简单的混合模式:在Shader中修改frag函数,即把乘法操作注释,再添加新的加法操作:   fixed4 frag(v2f_img i) : COLOR
   {
    //Get the colors from the RenderTexture and the uv‘s
    //from the v2f_img struct
    fixed4 renderTex = tex2D(_MainTex, i.uv);
    fixed4 blendTex = tex2D(_BlendTex, i.uv);
    
    // Perform a multiply Blend mode
//    fixed4 blendedMultiply = renderTex * blendTex;

    // Perform a add Blend mode
    fixed4 blendedAdd = renderTex + blendTex;
    
    // Adjust amount of Blend Mode with a lerp
    renderTex = lerp(renderTex, blendedAdd,  _Opacity);
    
    return renderTex;
   }保存后返回Unity查看。你可以看到类似下面的结果。你可以看到,它和Multiply是刚好相反的结果:Add混合模式 Opacity = 1.0 :最后,我们实现一个名为Screen Blend(感觉好怪,中文名字?)的混合模式。这里面用到的运算比前两种更多,但也很简单。继续修改frag函数:   fixed4 frag(v2f_img i) : COLOR
   {
    //Get the colors from the RenderTexture and the uv‘s
    //from the v2f_img struct
    fixed4 renderTex = tex2D(_MainTex, i.uv);
    fixed4 blendTex = tex2D(_BlendTex, i.uv);
    
    // Perform a multiply Blend mode
//    fixed4 blendedMultiply = renderTex * blendTex;

    // Perform a add Blend mode
//    fixed4 blendedAdd = renderTex + blendTex;

    // Perform a screen render Blend mode
    fixed4 blendedScreen = 1.0 - ((1.0 - renderTex) * (1.0 - blendTex));
    
    // Adjust amount of Blend Mode with a lerp
    renderTex = lerp(renderTex, blendedScreen,  _Opacity);
    
    return renderTex;
   }    

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注常用软件Photoshop频道!

本文由 @小标 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程