Unity UGUI RawImage RenderTexture完美解决方案

7 篇文章 0 订阅

前言

UGUI中使用RawImage加载RenderTexture是一种很常用的3D转2D的方案,常被用于角色立绘显示、特效显示等需求中。

流程

一般而言会有一个专门的相机对目标物体进行渲染,并把结果存储到RT(RenderTexture)中,然后在最终的RawImage中显示RT。
因此流程可以划分为两个阶段:

  • Model → \rightarrow RT
    这阶段Model使用的Shader是不固定的,千奇百怪。
  • RT → \rightarrow RawImage
    这阶段默认情况下RawImage使用的是UI/Default,由于这里只能给RawImage设置材质球,因此这里的Shader可控,可以自定义拓展。

通常会希望RT的背景是透明的,这也是符合大众审美的。因此渲染RT的相机通常会设置ClearFlags为SolidColor,且设置Background为(0,0,0,0)

遇到的问题

对于目标Model若其有使用Queue为Transparent或者AlphaTest的Surface Shader,那么从RT → \rightarrow RawImage的时候会发现使用这些Shader的模型部件(设为部件X)不可见。通过调整渲染RT的相机的Background的Alpha值虽然可以使这部分可见,但是也带来了不美观的背景。
笔者经过调试发现问题其实出在Model → \rightarrow RT 这个阶段,此阶段生成的RT虽然在Inspector面板内RGB模式下是视觉正常的,但是切换到A模式,会发现其Alpha通道已经丢失了上述提到的部件X的Alpha信息(这部分为什么会丢失,笔者暂时没有找到涉及到这一块的相关文档,还望知道的大佬不吝赐教)。导致后续通过RT → \rightarrow RawImage 部件X彻底不可见

解决方案

笔者目前针对这种情况总结出了两种解决方案:
1,使用两个相机,两个RT来渲染Model,通过这种方式可以算出目标Model的Alpha值,RT → \rightarrow RawImage的时候使用一个自定义的Shader,并用这个Alpha值来渲染。

2,在AnyPortrait 2D动画插件的官方文档Rendering to Render Texture中也提到了我上述提到的问题,其已经提供解决方案,通过扒代码,发现其是在Surface Shader中的#pragma中加入了keepalpha关键词。

比如Transparent/Diffuse的原始#pragma声明为:#pragma surface surf Lambert alpha:fade,调整为#pragma surface surf Lambert keepalpha finalcolor:ApplyForwardBlendMode, 并在Shader内添加函数ApplyForwardBlendMode

		//KeepAlpha - ForwardBlendMode
		void ApplyForwardBlendMode(Input IN, SurfaceOutput o, inout half4 color)
		{
#ifdef UNITY_PASS_FORWARDADD
			color.rgb *= color.a;
#endif
		}

同理Transparent/Cutout/Diffuse的#pragma surface surf Lambert alphatest:_Cutoff, 可以调整为#pragma surface surf Lambert keepalpha finalcolor:ApplyForwardBlendMode。

Unity中,可以使用RenderTexture来将场景渲染到纹理中,并将这个纹理映射到场景中的物体上。如果想要通过点击一个RawImage来获取RenderTexture的映射物体,可以按照以下步骤进行操作: 1. 首先,在场景中创建一个带有RawImage组件的GameObject,并将其位置和大小设置为合适的位置和大小。 2. 然后,在代码中获取这个RawImage组件,并添加一个事件监听器,用于处理鼠标点击事件。 ```c# RawImage rawImage = GetComponent<RawImage>(); rawImage.GetComponent<Button>().onClick.AddListener(OnClickRawImage); ``` 3. 在OnClickRawImage方法中,先使用RectTransformUtility.ScreenPointToLocalPointInRectangle方法将鼠标点击的屏幕坐标转换为RawImage的本地坐标。 ```c# void OnClickRawImage() { Vector2 localPosition; RectTransformUtility.ScreenPointToLocalPointInRectangle(rawImage.rectTransform, Input.mousePosition, null, out localPosition); } ``` 4. 然后,使用Camera.main来获取场景中的主摄像机,并将其渲染到一个RenderTexture中。 ```c# void OnClickRawImage() { Vector2 localPosition; RectTransformUtility.ScreenPointToLocalPointInRectangle(rawImage.rectTransform, Input.mousePosition, null, out localPosition); RenderTexture renderTexture = new RenderTexture(Screen.width, Screen.height, 0); Camera.main.targetTexture = renderTexture; Camera.main.Render(); Camera.main.targetTexture = null; } ``` 5. 接下来,使用RenderTexture.GetPixel方法来获取RawImage上点击位置的像素值。 ```c# void OnClickRawImage() { Vector2 localPosition; RectTransformUtility.ScreenPointToLocalPointInRectangle(rawImage.rectTransform, Input.mousePosition, null, out localPosition); RenderTexture renderTexture = new RenderTexture(Screen.width, Screen.height, 0); Camera.main.targetTexture = renderTexture; Camera.main.Render(); Camera.main.targetTexture = null; Color color = renderTexture.GetPixel((int)(localPosition.x + rawImage.rectTransform.rect.width / 2), (int)(localPosition.y + rawImage.rectTransform.rect.height / 2)); } ``` 6. 最后,可以使用这个像素值来查找场景中对应的物体。 ```c# void OnClickRawImage() { Vector2 localPosition; RectTransformUtility.ScreenPointToLocalPointInRectangle(rawImage.rectTransform, Input.mousePosition, null, out localPosition); RenderTexture renderTexture = new RenderTexture(Screen.width, Screen.height, 0); Camera.main.targetTexture = renderTexture; Camera.main.Render(); Camera.main.targetTexture = null; Color color = renderTexture.GetPixel((int)(localPosition.x + rawImage.rectTransform.rect.width / 2), (int)(localPosition.y + rawImage.rectTransform.rect.height / 2)); RaycastHit hit; if (Physics.Raycast(Camera.main.transform.position, Camera.main.transform.forward, out hit)) { GameObject hitObject = hit.collider.gameObject; } } ``` 这样,就可以通过点击RawImage来获取RenderTexture的映射物体了。需要注意的是,这个方法只能获取场景中最近的物体,如果有多个物体在同一位置上,则只能获取其中一个物体。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

iningwei

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值