Unity自定义后处理——Tonemapping色调映射

文章介绍了ToneMapping色调映射的概念,它是将高动态范围(HDR)图像转换为低动态范围(LDR)的过程,以适应显示限制。文章提供了C#代码和Shader实现,并强调了自定义Shader的灵活性和性能考虑。此外,还讨论了ToneMapping与其他后处理效果如校色、暗角、Bloom等的结合使用,以增强视觉效果。
摘要由CSDN通过智能技术生成

  大家好,我是阿赵。
  继续介绍屏幕后处理,这一期介绍一下Tonemapping色调映射

一、Tone Mapping的介绍

  Tone Mapping色调映射,是一种颜色的映射关系处理,简单一点说,一般是从原始色调(通常是高动态范围,HDR)映射到目标色调(通常是低动态范围,LDR)。
  由于HDR的颜色值是能超过1的,但实际上在LDR范围,颜色值最大只能是1。如果我们要在LDR的环境下,尽量模拟HDR的效果,超过1的颜色部分怎么办呢?
最直接想到的是两种可能:
1、截断大于1的部分
  大于1的部分,直接等于1,小于1的部分保留。这种做法,会导致超过1的部分全部变成白色,在原始图片亮度比较高的情况下,转换完之后可能就是一片白茫茫的效果。
2、对颜色进行线性的缩放
  把原始颜色的最大值看做1,然后把原始的所有颜色进行整体的等比缩放。这样做,能保留一定的效果。但由于原始的HDR颜色的跨度可能比0到1大很多,所以整体缩小之后,整个画面就会变暗很多了,没有了HDR的通透光亮的感觉。
  为了能让HDR颜色映射到LDR之后,还能保持比较接近的效果,上面两种方式的处理显然都是不好的。
  Tonemapping也是把HDR颜色范围映射到0-1的LDR颜色范围,但它并不是线性缩放,而是曲线的缩放。
在这里插入图片描述

  从上面这个例子可以看出来,Tonemapping映射之后的颜色,有些地方是变暗了,比如深颜色的裤子,但有些地方却是变亮了的,比如头发和肩膀衣服上的阴影。整体的颜色有一种电影校色之后的感觉。
  很多游戏美工在没有技术人员配合的情况下,都很喜欢自己挂后处理,其中Tonemapping应该是除了Bloom以外,美工们最喜欢的一种后处理了,虽然不知道为什么,但就是觉得颜色好看了。
  虽然屏幕后处理看着好像很简单实现,挂个组件调几个参数,就能化腐朽为神奇,把原本平淡无奇的画面变得好看。但其实后处理都是有各种额外消耗的,所以我一直不是很建议美工们只会依靠后处理来扭转画面缺陷的,特别是做手游。

二、Tonemapping的代码实现

1、C#代码

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class TonemappingCtrl : MonoBehaviour
{
    private Material toneMat;
    public bool isTonemapping = false;
    // Start is called before the first frame update
    void Start()
    {

    }

    // Update is called once per frame
    void Update()
    {

    }

    private bool TonemappingFun(RenderTexture source, RenderTexture destination)
    {
        if (toneMat == null)
        {
            toneMat = new Material(Shader.Find("Hidden/ToneMapping"));
        }
        if (toneMat == null || toneMat.shader == null || toneMat.shader.isSupported == false)
        {
            return false;
        }
        Graphics.Blit(source, destination, toneMat);
        return true;
    }

    private void OnRenderImage(RenderTexture source, RenderTexture destination)
    {
        
        if(isTonemapping == false)
        {
            Graphics.Blit(source, destination);
            return;
        }
        RenderTexture finalRt = source;
        if (TonemappingFun(finalRt,finalRt)==false)
        {
            Graphics.Blit(source, destination);
        }
        else
        {
            Graphics.Blit(finalRt, destination);
        }
    }
}

C#部分的代码和其他后处理没区别,都是通过OnRenderImage里面调用Graphics.Blit

2、Shader

Shader "Hidden/ToneMapping"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
    }
    SubShader
    {
        // No culling or depth
        Cull Off ZWrite Off ZTest Always

        Pass
        {
            CGPROGRAM
            #pragma vertex vert_img
            #pragma fragment frag

            #include "UnityCG.cginc"

          

            sampler2D _MainTex; 

		float3 ACES_Tonemapping(float3 x)
		{
			float a = 2.51f;
			float b = 0.03f;
			float c = 2.43f;
			float d = 0.59f;
			float e = 0.14f;
			float3 encode_color = saturate((x*(a*x + b)) / (x*(c*x + d) + e));
			return encode_color;
		}

            fixed4 frag (v2f_img i) : SV_Target
            {
                fixed4 col = tex2D(_MainTex, i.uv);
				half3 linear_color = pow(col.rgb, 2.2);
				half3 encode_color = ACES_Tonemapping(linear_color);
				col.rgb = pow(encode_color, 1 / 2.2);
                return col;
            }
            ENDCG
        }
    }
}

需要说明一下:
1.色彩空间的转换
  由于默认显示空间是Gamma空间,所以先通过pow(col.rgb, 2.2)把颜色转换成线性空间,然后再进行Tonemapping映射,最后再pow(encode_color, 1 / 2.2),把颜色转回Gamma空间
2.Tonemapping映射算法

float3 ACES_Tonemapping(float3 x)
	{
		float a = 2.51f;
		float b = 0.03f;
		float c = 2.43f;
		float d = 0.59f;
		float e = 0.14f;
		float3 encode_color = saturate((x*(a*x + b)) / (x*(c*x + d) + e));
		return encode_color;
	}

把颜色进行Tonemapping映射。这个算法是网上都可以百度得到的。

三、Tonemapping和其他后处理的配合

  一般来说,Tonemapping只是一个固定颜色映射效果,所以应该是需要配合着其他的效果一起使用,才会得到比较好的效果。比如我之前介绍过的校色、暗角、Bloom等。
在这里插入图片描述
在这里插入图片描述

  可以做出各种不同的效果,不同于原始颜色的平淡,调整完之后的颜色看起来会比较有电影的感觉。
  这也是我为什么要在Unity有PostProcessing后处理插件的情况下,还要介绍使用自己写Shader实现屏幕后处理的原因。PostProcessing作为一个插件,它可能会存在很多功能,会有很多额外的计算,你可能只需要用到其中的某一个小部分的功能和效果。
  而我们自己写Shader实现屏幕后处理,自由度非常的高,喜欢在哪里添加或者修改一些效果,都可以。
比如,我可以写一个脚本,把之前介绍过的所有后处理效果都加进去:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
//[ExecuteInEditMode]
public class ImageEffectCtrl : MonoBehaviour
{
    //--------调色-----------
    private Material colorMat;
    public bool isColorAjust = false;
    [Range(-5,5)]
    public float saturation = 1;
    [Range(-5,5)]
    public float contrast = 1;
    [Range(0,1)]
    public float hueShift = 0;
    [Range(0,5)]
    public float lightVal = 1;
    [Range(0,3)]
    public float vignetteIntensity = 1.8f;
    [Range(0,5)]
    public float vignetteSmoothness = 5;


    //-------模糊-----------
    private Material blurMat;
    public bool isBlur = false;
    [Range(0, 4)]
    public float blurSize = 0;
    [Range(-3,3)]
    public float blurOffset = 1;
    [Range(1,3)]
    public int blurType = 3;

    //-----光晕----------
    private Material brightMat;
    private Material bloomMat;
    public bool isBloom = false;
    [Range(0,1)]
    public float brightCut = 0.5f;
    [Range(0, 4)]
    public float bloomSize = 0;
    [Range(-3, 3)]
    public float bloomOffset = 1;
    public int bloomType = 3;
    [Range(1, 3)]

    //---toneMapping-----
    private Material toneMat;
    public bool isTonemapping = false;





    // Start is called before the first frame update
    void Start()
    {
        //if(colorMat == null||colorMat.shader == null||colorMat.shader.isSupported == false)
        //{
        //    this.enabled = false;
        //}
    }

    // Update is called once per frame
    void Update()
    {
        
    }

    private bool AjustColor(RenderTexture source, RenderTexture destination)
    {
        if(colorMat == null)
        {
            colorMat = new Material(Shader.Find("Hidden/AzhaoAjustColor"));
        }
        if(colorMat == null||colorMat.shader == null||colorMat.shader.isSupported == false)
        {
            return false;
        }
        colorMat.SetFloat("_Saturation", saturation);
        colorMat.SetFloat("_Contrast", contrast);
        colorMat.SetFloat("_HueShift", hueShift);
        colorMat.SetFloat("_Light", lightVal);
        colorMat.SetFloat("_VignetteIntensity", vignetteIntensity);
        colorMat.SetFloat("_VignetteSmoothness", vignetteSmoothness);
        Graphics.Blit(source, destination, colorMat, 0);
        return true;
    }

    private Material GetBlurMat(int bType)
    {
        if(bType == 1)
        {
            return new Material(Shader.Find("Hidden/AzhaoBoxBlur"));
        }
        else if(bType == 2)
        {
            return new Material(Shader.Find("Hidden/AzhaoGaussianBlur"));
        }
        else if(bType == 3)
        {
            return new Material(Shader.Find("Hidden/AzhaoKawaseBlur"));
        }
        else
        {
            return null;
        }
    }

    private bool CheckNeedCreateBlurMat(Material mat,int bType)
    {
        if(mat == null)
        {
            return true;
        }
        if(mat.shader == null)
        {
            return true;
        }
        if(bType == 1)
        {
            if(mat.shader.name != "Hidden/AzhaoBoxBlur")
            {
                return true;
            }
            else
            {
                return false;
            }
        }
        else if(bType == 2)
        {
            if (mat.shader.name != "Hidden/AzhaoGaussianBlur")
            {
                return true;
            }
            else
            {
                return false;
            }
        }
        else if (bType == 3)
        {
            if (mat.shader.name != "Hidden/AzhaoKawaseBlur")
            {
                return true;
            }
            else
            {
                return false;
            }
        }
        else
        {
            return false;
        }
    }

    private bool BlurFun(RenderTexture source, RenderTexture destination,float blurTime,int bType,float offset )
    {
        if(CheckNeedCreateBlurMat(blurMat,bType)==true)
        {
            blurMat = GetBlurMat(bType);
        }
        if (blurMat == null || blurMat.shader == null || blurMat.shader.isSupported == false)
        {
            return false;
        }
        blurMat.SetFloat("_BlurOffset", offset);
        float width = source.width;
        float height = source.height;
        int w = Mathf.FloorToInt(width);
        int h = Mathf.FloorToInt(height);
        RenderTexture rt1 = RenderTexture.GetTemporary(w, h);
        RenderTexture rt2 = RenderTexture.GetTemporary(w, h);
        Graphics.Blit(source, rt1);
        for (int i = 0; i < blurTime; i++)
        {
            ReleaseRT(rt2);
            width = width / 2;
            height = height / 2;
            w = Mathf.FloorToInt(width);
            h = Mathf.FloorToInt(height);
            rt2 = RenderTexture.GetTemporary(w, h);
            Graphics.Blit(rt1, rt2, blurMat, 0);
            width = width / 2;
            height = height / 2;
            w = Mathf.FloorToInt(width);
            h = Mathf.FloorToInt(height);
            ReleaseRT(rt1);
            rt1 = RenderTexture.GetTemporary(w, h);
            Graphics.Blit(rt2, rt1, blurMat, 1);
        }
        for (int i = 0; i < blurTime; i++)
        {
            ReleaseRT(rt2);
            width = width * 2;
            height = height * 2;
            w = Mathf.FloorToInt(width);
            h = Mathf.FloorToInt(height);
            rt2 = RenderTexture.GetTemporary(w, h);
            Graphics.Blit(rt1, rt2, blurMat, 0);
            width = width * 2;
            height = height * 2;
            w = Mathf.FloorToInt(width);
            h = Mathf.FloorToInt(height);
            ReleaseRT(rt1);
            rt1 = RenderTexture.GetTemporary(w, h);
            Graphics.Blit(rt2, rt1, blurMat, 1);
        }
        Graphics.Blit(rt1, destination);
        ReleaseRT(rt1);
        rt1 = null;
        ReleaseRT(rt2);
        rt2 = null;
        return true;
    }

    private bool BrightRangeFun(RenderTexture source, RenderTexture destination)
    {
        if(brightMat == null)
        {
            brightMat = new Material(Shader.Find("Hidden/BrightRange"));
        }
        if (brightMat == null || brightMat.shader == null || brightMat.shader.isSupported == false)
        {
            return false;
        }
        brightMat.SetFloat("_BrightCut", brightCut);
        Graphics.Blit(source, destination, brightMat);
        return true;

    }

    private bool BloomAddFun(RenderTexture source,RenderTexture destination, RenderTexture brightTex)
    {
        if(bloomMat == null)
        {
            bloomMat = new Material(Shader.Find("Hidden/AzhaoBloom"));
        }
        if (bloomMat == null || bloomMat.shader == null || bloomMat.shader.isSupported == false)
        {
            return false;
        }
        bloomMat.SetTexture("_brightTex", brightTex);
        Graphics.Blit(source, destination, bloomMat);
        return true;
    }

    private bool TonemappingFun(RenderTexture source, RenderTexture destination)
    {
        if(toneMat == null)
        {
            toneMat = new Material(Shader.Find("Hidden/ToneMapping"));
        }
        if (toneMat == null || toneMat.shader == null || toneMat.shader.isSupported == false)
        {
            return false;
        }
        Graphics.Blit(source, destination, toneMat);
        return true;
    }

    private void CopyRender(RenderTexture source,RenderTexture destination)
    {
        Graphics.Blit(source, destination);
    }

    private void ReleaseRT(RenderTexture rt)
    {
        if(rt!=null)
        {
            RenderTexture.ReleaseTemporary(rt);
        }
    }

    private void OnRenderImage(RenderTexture source, RenderTexture destination)
    {        
        RenderTexture finalRt = source;
        RenderTexture rt2 = RenderTexture.GetTemporary(source.width, source.height);
        RenderTexture rt3 = RenderTexture.GetTemporary(source.width, source.height);
        if (isBloom == true)
        {
            if(BrightRangeFun(finalRt, rt2)==true)
            {
                if(BlurFun(rt2, rt3, bloomSize,bloomType,bloomOffset)==true)
                {

                    if(BloomAddFun(source, finalRt, rt3)==true)
                    {

                    }                        
                }
            }
        }
        if(isBlur == true)
        {
            if (blurSize > 0)
            {
                if (BlurFun(finalRt, finalRt, blurSize,blurType,blurOffset) == true)
                {

                }


            }
        }

        if (isTonemapping == true)
        {
            if (TonemappingFun(finalRt, finalRt) == true)
            {

            }
        }

        if (isColorAjust == true)
        {           
            if (AjustColor(finalRt, finalRt) == true)
            {

            }

        }



        CopyRender(finalRt, destination);
        ReleaseRT(finalRt);
        ReleaseRT(rt2);
        ReleaseRT(rt3);


    }
}

在这里插入图片描述

  一个脚本控制所有后处理。当然这样的做法只是方便,也不见得很好,我还是比较喜欢根据实际用到多少个效果,单独去写对应的脚本,那样我觉得性能才是最好的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值