[游戏开发]Unity颜色矫正无障碍方案

0. 前言

之前有在关注色盲视觉纠正问题，最近在调整游戏的时候就打算把这个用上。

色弱色盲，这其实算是一种误称吧，只是人类中的少数派，只不过看到的颜色和大部分人不一样。下文用，视觉少数者，来称呼吧。

本质上是因为感知颜色的细胞发生突变，感知与大部分人有差异。之前就一直在想能不能有一些方法对颜色做一些调整作为纠正。比如说红色感知弱，显示的时候把红强度提高作为弥补。但目前来说好像还没有确切的方案来执行，甚至色盲色弱的标准以及测试都不清楚，何谈纠正呢。

主要是色觉其实是比较复杂的，人有3种感光细胞用于感知光线，然后感知之后再由大脑脑补一下出画面。这其中的过程并不能够简单映射得出结果，比如同种颜色在不通颜色的比较下会感知不同。而且三种感光细胞还有一定的感光范围，和RBG这种常用的颜色空间基准还有偏差。所以这部分是比较难处理的。另外如果从小看到的火就是蓝色的，那后面蓝色这个颜色的意义也会发生改变，这个也难以统一。

1. 颜色矫正

颜色矫正是为了让颜色更好区分，并不是开了之后就会让视觉少数者感知到其他人一样的颜色。处理还是有挺多种方法的。

• 颜色映射，红色映射为某一种颜色，紫色映射为另一种等等，这种方法主要是映射空间难以确定，而且运行比较复杂，一般只有对图片做处理才会有这种方式。
• 旋转H分量，在HSV空间缩放旋转H分量的方式，这样在色环上做的处理就可以让颜色均匀，只不过旋转角度难以确定、前后颜色差异比较大。
• 线性变换，RGB颜色做一个线性变换，这样颜色可以做到均匀计算量也比较小。至于能否在线性空间内找到合适的方法，或者因人而异的指定参数这个还是比较难确定。

基本上目前软件上，基本都是用第三种做的矫正处理，目前window中就是用的这个，所以后续讲的也是如此，参数也是用window开纠正后的颜色，反向求解出来的，效果应该还可以。对于应用到游戏中、UnIty中，目前考虑的方法就是用写一个 颜色线性变换Shader，确定好不同的颜色纠正参数，然后在摄像机后处理的时候做统一的纠正处理。

2. 线性变换Shader

这里就简单的写一个RGB线性变换的shder，主要目的是让颜色与给定的矩阵做叉乘，如下。

Shader "MyShader/ColorTr" {
    Properties {
        [PerRendererData] _MainTex ("Texture", 2D) = "white" {}
        _UtR ("UtR",Vector)=(0.14,0.86,0,0)
        _UtG ("UtG",Vector)=(0.14,0.86,0,0)
        _UtB ("UtB",Vector)=(0,0,1,0)
    }
    SubShader {
        Pass {
            CGPROGRAM
            
            #include "UnityCG.cginc"
            
            #pragma vertex vert
            #pragma fragment frag

            sampler2D _MainTex;
            float4 _UtR;
            float4 _UtG;
            float4 _UtB;
            
			struct a2v {
                float4 vertex : POSITION;
                float3 normal : NORMAL;
                float4 texcoord : TEXCOORD0;
                //float3 color : COLOR0;
            };

            struct v2f {
                float4 pos : SV_POSITION;
                float3 texcoord : COLOR0;
            };
            
            v2f vert(a2v v) {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                o.texcoord = v.texcoord;
                return o;
            }

            fixed4 frag(v2f i) : SV_Target {
                float4 color = tex2D(_MainTex, i.texcoord);
                color.r = mul(_UtR,color);
                color.g = mul(_UtG,color);
                color.b = mul(_UtB,color);
                return color;
            }
            
            ENDCG
        } 
    }
    FallBack Off
}

好了，那么后面我们只需要修改_UtR 等3个矩阵点的值，就可以调整颜色线性变换的结果了。

2. 颜色纠正参数

我们先定义下颜色纠正类型，常规/红色/绿色/蓝色，

public enum ColorMappingType
{
    Normal,
    Red,
    Green,
    Blue,
}

具体的参数怎么去确定呢，参考window的颜色变换，我们只要获取到对应的颜色变换对，就可以通通过矩阵求逆的方式来得到和这个参数了，如下。color为原颜色，colorF为映射得到的函数

private double[,] GetTranslateU(double[,] color, double[,] colorF)
{
    double[,] colorAthwart = MatrixF.Athwart(color);
    return MatrixF.MultiplyMatrix(colorF, colorAthwart);
}
// 矩阵运算相关内容是参考的这里
// https://blog.csdn.net/Lynn_whu/article/details/80745634

如果不用矩阵运算也可以，假设原本的颜色为（R1,G1,B1）,变换后的颜色为(R2, G2, B2),线性变换矩阵为((a,b,c),(d,e,f),(g,h,i)}，那么这个线性变换其实就是如下的结果。3个方程式，只要找到颜色变换对，代入就可以求出这几个参数了。（不过估计还挺难算的。）

R2 = a * R1 + b * G1 + c * B1
G2 = d * R1 + e * G1 + f * B1
B2 = g * R1 + h * G1 + i * B1

那么求逆矩然后再求解之后，可得参数如下：

// 红色
new double[3,3]{
    {1,0,0}, {0.47,0.49,0.04}, {0.59,-0.68,1.09},
},
// 绿色
new double[3,3]{
    {1.22,-0.31,0.11}, {0,1,0}, {-0.18,0.17,1},
},
// 蓝色
new double[3,3]{
    {0.74,-0.39,0.66}, {0.08,0.59,0.33}, {0,0,1},
}

3. 摄像机后处理

场景等物体渲染后再做处理，用摄像机后处理来处理就很方便了。写个脚本控制一下

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


namespace GDT
{
    [RequireComponent(typeof(Camera))]
    public class ColorMapping : MonoBehaviour
    {
        public Material materialMapping;

        private double[][,] MappingUt;
        private Material curMaterial;

        private void Awake()
        {
            MappingUt = new double[3][,]{
                // 红色
                new double[3,3]{
                    {1,0,0}, {0.47,0.49,0.04}, {0.59,-0.68,1.09},
                },
                // 绿色
                new double[3,3]{
                    {1.22,-0.31,0.11}, {0,1,0}, {-0.18,0.17,1},
                },
                // 蓝色
                new double[3,3]{
                    {0.74,-0.39,0.66}, {0.08,0.59,0.33}, {0,0,1},
                }
            };
        }

        public void SetMaping(ColorMappingType type)
        {
            switch (type)
            {
                case ColorMappingType.Normal:
                    curMaterial = null;
                    break;
                case ColorMappingType.Red:
                    ChangeShaderColorTraU(MappingUt[0]);
                    curMaterial = materialMapping;
                    break;
                case ColorMappingType.Green:
                    ChangeShaderColorTraU(MappingUt[1]);
                    curMaterial = materialMapping;
                    break;
                case ColorMappingType.Blue:
                    ChangeShaderColorTraU(MappingUt[2]);
                    curMaterial = materialMapping;
                    break;
            }
        }

        private void OnRenderImage(RenderTexture source, RenderTexture destination)
        {
            //https://blog.csdn.net/qq_31042143/article/details/127186310
            if (curMaterial)
            {
                Graphics.Blit(source, destination, curMaterial);
            }
            else
            {
                Graphics.Blit(source, destination);
            }
            // R2 = a * R1 + b * G1 + c * B1
            // G2 = d * R1 + e * G1 + f * B1
            // B2 = g * R1 + h * G1 + i * B1
        }

        private void ChangeShaderColorTraU(double[,] Ut)
        {
            //Debug.LogError("Ut:" + Ut);
            materialMapping.SetVector("_UtR", new Vector4((float)Ut[0, 0], (float)Ut[0, 1], (float)Ut[0, 2], 0));
            materialMapping.SetVector("_UtG", new Vector4((float)Ut[1, 0], (float)Ut[1, 1], (float)Ut[1, 2], 0));
            materialMapping.SetVector("_UtB", new Vector4((float)Ut[2, 0], (float)Ut[2, 1], (float)Ut[2, 2], 0));
        }
    }
}

• [RequireComponent(typeof(Camera))]
  因为需要进行相机后处理，所以要求了一下组件类型
• SetMaping 设置颜色纠正方式
• OnRenderImage 进行摄像机后处理
• ChangeShaderColorTraU 设置shader参数

然后把脚本挂到摄像机对象上就完成了。

4. 效果

效果还是比较明显的，下面是参照颜色条，和window 上的变换一致。

实现还是挺简单的，只需要挂在显示的摄像机上就可以了，不会影响到其他shader的处理，场景和游戏对象都不用另外做处理。

5. 结束咯

到这里就结束了。线性变换的参数还是有很大操作空间的，不仅可以用于视觉少数者纠正颜色，也可以用于做一些视觉特殊效果，比如说画面变黄等滤镜效果。只要绑定到特殊的摄像头上，或者直接用于对应物体的材质上就可以了。

希望能够提供参考组作用。