[游戏开发]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. 结束咯

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

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

猜你喜欢

转载自blog.csdn.net/Blue_carrot_/article/details/131245149