Unity3D NGUI动态生成模糊背景图

先上效果。

制作原理:模糊的部分是用UITexture,前面是一个UISprite。用主摄像机渲染出一张纹理,把这张纹理模糊处理,把这张纹理赋值给UITexture。

脚本代码

using UnityEngine;
using System.Collections;

[RequireComponent(typeof(UITexture))]
public class BlurTextureMaker : MonoBehaviour {

	public int iterations = 3;

	public float blurSpread = 0.6f;

	public Shader blurShader = null;

	static Material m_Material = null;

	public Camera camera;

	private UITexture mTexture;

	private RenderTexture mRT;
	protected Material material
	{
		get
		{
			if (m_Material == null)
			{
				m_Material = new Material(blurShader);
				m_Material.hideFlags = HideFlags.DontSave;
			}
			return m_Material;
		}
	}

	protected void Awake()
	{
		mTexture = GetComponent<UITexture>();
	}

	protected void Start()
	{
		// Disable if we don‘t support image effects
		if (!SystemInfo.supportsImageEffects)
		{
			enabled = false;
			return;
		}
		// Disable if the shader can‘t run on the users graphics card
		if (!blurShader || !material.shader.isSupported)
		{
			enabled = false;
			return;
		}

		int rtWidth = (int)(NGUITools.screenSize.x / 4);
		int rtHeight = (int)(NGUITools.screenSize.y / 4);

		mRT = RenderTexture.GetTemporary(rtWidth, rtHeight, 0, RenderTextureFormat.Default);

		mTexture.mainTexture = Generate();
	}

	protected void OnDestroy()
	{
		if (null != mRT)
		{
			RenderTexture.ReleaseTemporary(mRT);
		}
	}

	// Performs one blur iteration.
	public void FourTapCone(RenderTexture source, RenderTexture dest, int iteration)
	{
		float off = 0.5f + iteration * blurSpread;
		Graphics.BlitMultiTap(source, dest, material,
			new Vector2(-off, -off),
			new Vector2(-off, off),
			new Vector2(off, off),
			new Vector2(off, -off)
		);
	}

	// Downsamples the texture to a quarter resolution.
	private void DownSample4x(RenderTexture source, RenderTexture dest)
	{
		float off = 1.0f;
		Graphics.BlitMultiTap(source, dest, material,
			new Vector2(-off, -off),
			new Vector2(-off, off),
			new Vector2(off, off),
			new Vector2(off, -off)
		);
	}

	// Called by the camera to apply the image effect
	void RenderImage(RenderTexture source, RenderTexture destination)
	{
		int rtW = source.width / 4;
		int rtH = source.height / 4;
		RenderTexture buffer = RenderTexture.GetTemporary(rtW, rtH, 0);

		// Copy source to the 4x4 smaller texture.
		DownSample4x(source, buffer);

		// Blur the small texture
		for (int i = 0; i < iterations; i++)
		{
			RenderTexture buffer2 = RenderTexture.GetTemporary(rtW, rtH, 0);
			FourTapCone(buffer, buffer2, i);
			RenderTexture.ReleaseTemporary(buffer);
			buffer = buffer2;
		}
		Graphics.Blit(buffer, destination);

		RenderTexture.ReleaseTemporary(buffer);
	}

	public RenderTexture Generate()
	{
		int rtWidth = (int) (NGUITools.screenSize.x/4);
        int rtHeight = (int) (NGUITools.screenSize.y/4);

		var tex = RenderTexture.GetTemporary(rtWidth, rtHeight, 0, RenderTextureFormat.Default);

		camera.targetTexture = tex;
		camera.Render();
		camera.targetTexture = null;

		RenderImage(tex, mRT);

		RenderTexture.ReleaseTemporary(tex);

		return mRT;
	}

	[ContextMenu("Sample")]
	public void Sample()
	{
		var tex = GetComponent<UITexture>();
		tex.mainTexture = Generate();

	}
}

  

//Shader代码

Shader "Hidden/BlurEffectConeTap" {
	Properties { _MainTex ("", any) = "" {} }
	SubShader {
		Pass {
			ZTest Always Cull Off ZWrite Off Fog { Mode Off }
			SetTexture [_MainTex] {constantColor (0,0,0,0.25) combine texture * constant alpha}
			SetTexture [_MainTex] {constantColor (0,0,0,0.25) combine texture * constant + previous}
			SetTexture [_MainTex] {constantColor (0,0,0,0.25) combine texture * constant + previous}
			SetTexture [_MainTex] {constantColor (0,0,0,0.25) combine texture * constant + previous}
		}
	}
	CGINCLUDE
	#include "UnityCG.cginc"
	struct v2f {
		float4 pos : SV_POSITION;
		half2 uv : TEXCOORD0;
		half2 taps[4] : TEXCOORD1;
	};
	sampler2D _MainTex;
	half4 _MainTex_TexelSize;
	half4 _BlurOffsets;
	v2f vert( appdata_img v ) {
		v2f o;
		o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
		o.uv = v.texcoord - _BlurOffsets.xy * _MainTex_TexelSize.xy; // hack, see BlurEffect.cs for the reason for this. let‘s make a new blur effect soon
		o.taps[0] = o.uv + _MainTex_TexelSize * _BlurOffsets.xy;
		o.taps[1] = o.uv - _MainTex_TexelSize * _BlurOffsets.xy;
		o.taps[2] = o.uv + _MainTex_TexelSize * _BlurOffsets.xy * half2(1,-1);
		o.taps[3] = o.uv - _MainTex_TexelSize * _BlurOffsets.xy * half2(1,-1);
		return o;
	}
	half4 frag(v2f i) : SV_Target {
		half4 color = tex2D(_MainTex, i.taps[0]);
		color += tex2D(_MainTex, i.taps[1]);
		color += tex2D(_MainTex, i.taps[2]);
		color += tex2D(_MainTex, i.taps[3]);
		return color * 0.25;
	}
	ENDCG
	SubShader {
		 Pass {
			  ZTest Always Cull Off ZWrite Off
			  Fog { Mode off }      

			  CGPROGRAM
			  #pragma fragmentoption ARB_precision_hint_fastest
			  #pragma vertex vert
			  #pragma fragment frag
			  ENDCG
		  }
	}
	Fallback off
}

  

时间: 2024-10-16 12:47:46

Unity3D NGUI动态生成模糊背景图的相关文章

PHP实现动态生成饼状图、柱状图和折线图(转载)

PHP在图像操作方面的表现非常出色,我们只需借助可以免费得到的GD库便可以轻松实现图.表勾画.下面将分别介绍PHP实现的饼状图.折线图和柱状图以 及他们的使用方法,这几段代码的特点就是不需要再把它们复制到你的代码之中,只需要把计算得到的数据作为参数传入,即可得到相应的图形效果 代码中所有使用的函数的说明,请参见php开发文档 饼状图 设计思路 饼状图表对于查看一个值占总值的百分比是一个好的方法.我们就用PHP来实现一个饼形图表. 它的设计思想是: 1 接受参数,得到所有数值的和,得到每一个值占数

JAVA实现二维码生成加背景图

pom.xml依赖 <!-- 二维码生成 -->         <!-- https://mvnrepository.com/artifact/com.google.zxing/core -->         <dependency>             <groupId>com.google.zxing</groupId>             <artifactId>core</artifactId>   

PHP实现动态生成饼状图 (转载)

<?php //变量定义,画椭圆弧时的角度大小 define("ANGLELENGTH", 10); /** * 绘制图片 * @param $title 3D图的标题 * @param $dataArr 显示的数据数组 * @param $labelArr 对应数据的标签分类数组 * @param $colorArr 对应绘图颜色的数组 * @param $a 画布的基准宽度 * @param $b 画布的基准高度 * @param $v 3D柱的高度 * @param $fo

js 动态生成背景图 GeoPattern

以前有个想法,能不能用JS动态创建CANVAS绘制图案当网页背景,在网络发现有现成的别人已经实现的:GeoPattern 代码如下: <!DOCTYPE html> <html> <head> <title>js 生成随机背景图</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></s

NGUI 动态添加控件

本文链接地址: Unity3D NGUI动态创建按钮 本例仅以熟悉NGUI组件功能为目的,想快捷简便的创建按钮或其它游戏物体请参考 “Unity3D 动态实例化Prefab” 以动态创建服务器列表为例. public UIAtlas mAtlas; public UIFont mFont; public string mSriteName; public GameObject Playerlist; /// <summary> /// 动态加载一个NGUI按钮 /// </summary

Unity3D独立游戏开发日记(一):动态生成树木

目前写的独立游戏是一个沙盒类型的游戏.游戏DEMO视频如下: 提到沙盒类型的游戏,就有人给出了这样的定义: 游戏世界离现实世界越近,自由度.随机度越高才叫沙盒游戏.所谓自由度,就是你在游戏里想干啥就干啥,想开车就开车,想走路就走路.想盖房子就盖房子,没有城管来找你麻烦.那么随机度,就是每天发生的事情不能一样,做的任务也不会就一条线路可走. 在我的沙盒游戏里,地形上的树木,岩石等都是随机生成的,这样不同的人玩的地图都会不一样.当然如果最后能做到地形也随机生成那就更完美了. 下面我就讲下树木随机生成

highcharts 动态生成x轴和折线图

highchart 动态生成x轴和折线图 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"><link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico"> <meta name="viewport" c

css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题

最近在负责一个微信H5 App项目,遇到一个郁闷的问题,手机浏览器查看网页时图标都是模糊的,有锯齿,电脑浏览器显示则是正常.大概知道是分辨率适配等类型的问题,后来网上查找了一些办法,大部分的解决方案都是设计一套放大1倍的图标,再压缩显示. 我们都知道<img>标签可以通过固定宽高的方式来压缩大图,从而得到高清的显示效果,而图标一般用背景图来呈现,怎么搞呢?好吧,css3出了一个很牛逼的属性background-size可以直接设置背景图的宽高,直接解决了前者的疑惑. 那么问题来了,我们的网页不

Unity3D 创建动态的立方体图系统

Unity3D 创建动态的立方体图系统 这一篇主要是利用上一篇的Shader,通过脚本来完成一个动态的立方体图变化系统. 准备工作如下: 创建一个新的场景.一个球体.提供给场景一个平行光,准备2个立方体图. 添加两个空对象,并分别命名为Empty1和Empty2,给他们分配不同的位置. 给球体添加一个新的材质,并使用FresnelReflection Shader(上一篇). 最后,创建一个脚本,并命名为CubeDynamic.cs,把它赋给球体. A:下面开始编写脚本: //2个立方体图; p