百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

零基础带你看游戏内灰度效果实现原理

liuian 2025-05-08 02:45 36 浏览

前言

在Unity中实现后处理效果有两种方式:一种是通过使用Unity官方提供的Post-Processing插件。另外一种方式就是使用脚本获取到渲染后帧缓冲区的图像,再通过shader写后处理的效果,最后合并输出图像到屏幕上。


一,Post Processing

1.1 设置组件

Post Processing后处理插件的工程配置:Unity 之 Post Processing后处理不同项目配置(UPR项目配置)

这里我们用到的只有:Color Grading 色彩调整

此组件可以使一个用到的特效,用于校正镜头中的颜色与亮度,来实现电影或海报效果,可以理解为手机中的何种滤镜。

这个组件设置项很多,此篇文章中介绍的灰度效果只需要使用到一个,那就是:Saturation 饱和度

Saturation值调整为-100,则可以实现灰度效果。随便大家一个界面测试一下:


1.2 代码控制

我这里创建了一个Slider,来动态控制Saturation 饱和度的值。创建代码命名为PostProcessingProfile 将其挂载到场景中PostProcessProfile的物体上,就可以实现开篇看到的滑动条控制灰度效果了:

具体代码如下,

using UnityEngine;
using UnityEngine.Rendering.PostProcessing;
using UnityEngine.UI;

public class PostProcessingProfile : MonoBehaviour
{
    public Slider Slider_Profile;
    
    // 后处理的配置容器
    private PostProcessVolume _volume;
    // 根据Inspector面板上的组件创建对应类型变量
    private ColorGrading _colorGrading;
    
    void Start()
    {
        // 获取容器
        _volume = GetComponent<PostProcessVolume>();
        // 获取此容器下添加的组件
        _volume.profile.TryGetSettings(out _colorGrading);
        
        Slider_Profile.onValueChanged.AddListener(OnValueChangedSlider);
    }

    void OnValueChangedSlider(float progress)
    {
        Debug.Log(progress + " " + (progress * 100 - 100));
        // 控制灰度值的变化 (-100 0 -> 0-1)
        _colorGrading.saturation.Override(progress * 100 - 100);
    }
}

二,Shader材质实现

2.1 原理API

Unity在摄影机完成渲染后调用的事件函数,允许您修改摄影机的最终图像。

Unity后处理OnRenderImage

在内置渲染管道中,Unity在摄影机完成渲染后,调用MonoBehaviours上的OnRenderImage,该MonoBeh aviours作为已启用的摄影机组件附加到同一GameObject。您可以使用OnRenderImage创建全屏后处理效果。这些效果通过从源图像读取像素,使用Unity着色器修改像素的外观,然后将结果渲染到目标图像中来实现。通常使用图形。Blit执行这些步骤。

Graphics.Blit 官方文档:使用着色器将源纹理复制到目标渲染纹理。 Blit将dest设置为渲染目标,在材质上设置source_MainTex属性,并绘制全屏四边形。

若要blit到内置渲染管道中的屏幕后缓冲区,必须确保dest为空,并且摄影机为空。Camera的targetTexture属性。main也为空。如果dest为空,Unity将尝试使用Camera.main.targetTexture作为目标。


2.2 编写Shader

当输出的RGB值相同的时候,就变成了灰度图。所以只要在渲染输出颜色值的地方,将RGB输出为相同的值就可以实现了。

实现相同值的我们一般使用是加权平均值的做法,目前最常用的一组灰色RGB值是(0.299,0.587,0.114)。

具体怎么来的我也算不明白,感兴趣的同学可以搜索:在使彩色图变灰RGB的权重会固定为(R:0.299 G:0.587 B:0.114)? 学习一下。

最终Shader如下:

Shader "Custom/GrayAll"
{
    Properties
    {
        _MainTex("Base (RGB)", 2D) = "white" {}
        // 灰度值
        _Color("GaryScale Amount", Range(0.0, 1.0)) = 1.0
 
    }
 
    SubShader
    {    
        Pass{
            CGPROGRAM
            #pragma vertex vert_img
            #pragma fragment frag
            
            #include "UnityCG.cginc"
            
            uniform sampler2D _MainTex;
            fixed _Color;
     
            fixed4 frag(v2f_img i) : COLOR
            {
                fixed4 renderTexture = tex2D(_MainTex, i.uv);
                
                float grayValue = 0.299 * renderTexture.r + 0.587 * renderTexture.g + 0.114 * renderTexture.b;
                
                fixed4 finalColor = lerp(renderTexture, grayValue, _Color);
                
                return finalColor;
            }        
            ENDCG
        }
    }
    FallBack "Diffuse"
}

最后创建一个材质球使用上面创建的这个Shader,待下面使用:


2.3 编写代码

创建代码SetGrayScene,并将其挂载到摄像机上,通过2.1中介绍的OnRenderImageGraphics.Blit实现,具体代码如下:

using UnityEngine;

public class SetGrayScene : MonoBehaviour
{
    public Material grayMaterial;
    [Range(0f,1f)]
    public float grayScaleAmount = 1.0f;
    
    void Start()
    {
        // 判断终端是否支持
        if (grayMaterial != null && grayMaterial.shader.isSupported == false)
        {
            enabled = false;
        }
    }

    void OnRenderImage(RenderTexture sourceTexture, RenderTexture destTexture)
    {
        if (grayMaterial != null)
        {
            grayMaterial.SetFloat("_Color", grayScaleAmount);
            Graphics.Blit(sourceTexture, destTexture, grayMaterial);
        }
        else
        {
            Graphics.Blit(sourceTexture, destTexture);
        }
    }
}

最后将2.2中创建的材质球,赋值给挂到摄像机的脚本上:


2.4 实现效果

运行游戏,调整grayScaleAmount值即可看到效果。

实现效果:

grayScaleAmount值调整到1


效果展示

使用Post Processing的效果:

使用Shade的效果:

相关推荐

Python 中 必须掌握的 20 个核心函数——items()函数

items()是Python字典对象的方法,用于返回字典中所有键值对的视图对象。它提供了对字典完整内容的高效访问和操作。一、items()的基本用法1.1方法签名dict.items()返回:字典键...

Python字典:键值对的艺术_python字典的用法

字典(dict)是Python的核心数据结构之一,与列表同属可变序列,但采用完全不同的存储方式:定义方式:使用花括号{}(列表使用方括号[])存储结构:以键值对(key-valuepair)...

python字典中如何添加键值对_python怎么往字典里添加键

添加键值对首先定义一个空字典1>>>dic={}直接对字典中不存在的key进行赋值来添加123>>>dic['name']='zhangsan'>>...

Spring Boot @ConfigurationProperties 详解与 Nacos 配置中心集成

本文将深入探讨SpringBoot中@ConfigurationProperties的详细用法,包括其语法细节、类型转换、复合类型处理、数据校验,以及与Nacos配置中心的集成方式。通过...

Dubbo概述_dubbo工作原理和机制

什么是RPCRPC是RemoteProcedureCall的缩写翻译为:远程过程调用目标是为了实现两台(多台)计算机\服务器,互相调用方法\通信的解决方案RPC的概念主要定义了两部分内容序列化协...

再见 Feign!推荐一款微服务间调用神器,跟 SpringCloud 绝配

在微服务项目中,如果我们想实现服务间调用,一般会选择Feign。之前介绍过一款HTTP客户端工具Retrofit,配合SpringBoot非常好用!其实Retrofit不仅支持普通的HTTP调用,还能...

SpringGateway 网关_spring 网关的作用

奈非框架简介早期(2020年前)奈非提供的微服务组件和框架受到了很多开发者的欢迎这些框架和SpringCloudAlibaba的对应关系我们要知道Nacos对应Eureka都是注册中心Dubbo...

Sentinel 限流详解-Sentinel与OpenFeign服务熔断那些事

SentinelResource我们使用到过这个注解,我们需要了解的是其中两个属性:value:资源名称,必填且唯一。@SentinelResource(value="test/get&#...

超详细MPLS学习指南 手把手带你实现IP与二层网络的无缝融合

大家晚上好,我是小老虎,今天的文章有点长,但是都是干货,耐心看下去,不会让你失望的哦!随着ASIC技术的发展,路由查找速度已经不是阻碍网络发展的瓶颈。这使得MPLS在提高转发速度方面不再具备明显的优势...

Cisco 尝试配置MPLS-V.P.N从开始到放弃

本人第一次接触这个协议,所以打算分两篇进行学习和记录,本文枯燥预警,配置命令在下一篇全为定义,其也是算我毕业设计的一个小挑战。新概念重点备注为什么选择该协议IPSecVPN都属于传统VPN传统VP...

MFC -- 网络通信编程_mfc编程教程

要买东西的时候,店家常常说,你要是真心买的,还能给你便宜,你看真心就是不怎么值钱。。。----网易云热评一、创建服务端1、新建一个控制台应用程序,添加源文件server2、添加代码框架#includ...

35W快充?2TB存储?iPhone14爆料汇总,不要再漫天吹15了

iPhone14都还没发布,关于iPhone15的消息却已经漫天飞,故加紧整理了关于iPhone14目前已爆出的消息。本文将从机型、刘海、屏幕、存储、芯片、拍照、信号、机身材质、充电口、快充、配色、价...

SpringCloud Alibaba(四) - Nacos 配置中心

1、环境搭建1.1依赖<!--nacos注册中心注解@EnableDiscoveryClient--><dependency><groupI...

Nacos注册中心最全详解(图文全面总结)

Nacos注册中心是微服务的核心组件,也是大厂经常考察的内容,下面我就重点来详解Nacos注册中心@mikechen本篇已收于mikechen原创超30万字《阿里架构师进阶专题合集》里面。微服务注册中...

网络技术领域端口号备忘录,受益匪浅 !

你好,这里是网络技术联盟站,我是瑞哥。网络端口是计算机网络中用于区分不同应用程序和服务的标识符。每个端口号都是一个16位的数字,范围从0到65535。网络端口的主要功能是帮助网络设备(如计算机和服务器...