Coder Social home page Coder Social logo

mob-sakai / staticbluredscreen Goto Github PK

View Code? Open in Web Editor NEW
190.0 14.0 29.0 246 KB

Non-realtime (=static) screen blur for Unity. Easy to use background for dialogs.

License: MIT License

C# 77.60% ShaderLab 10.65% Shell 11.75%
unity unity3d effects blur ui ugui background shader

staticbluredscreen's Introduction

StaticBluredScreen

NOTE: This project has been integrated into UIEffect, so we are NOT continuing development in this repository.



<< Description | WebGL Demo | Download | Usage | Change log >>







Overview

image

静的なブラースクリーンを表示します. ポストエフェクト等によるリアルタイムブラーとは異なり、ある時点でのレンダリング結果に対するブラーのみを提供します.

  1. ブラー処理用のCameraが不要です.
  2. ブラーは常時実行されません. テクスチャ更新を実行したあと1度だけ実行されます.
  3. 縮小バッファを利用することで、メモリサイズを小さく抑えます.
  4. スクリーン | ブラー | ダイアログ1 | ブラー | ダイアログ2 ... のように、重ねて表示できます.
  5. 激しい動きのあるオブジェクトがスクリーン上にある場合、ブラーテクスチャにズレが発生し得ます.

How To Work?

カメラに対し以下のコマンドバッファを1フレームだけ割り当てています.
縮小バッファを利用してブラーを適用し、出力先RTにコピーしているだけです.
その後、出力先RTをRawImage等で表示させると、ブラーが画面に適用されているように見えます.
ブラーが適用されるのはあくまで縮小バッファであり、レンダリング負荷がほとんどかからないことに注意してください.

// テンポラリRTに対するIDを生成.
int copyId = Shader.PropertyToID("_ScreenCopy");
int blurId = Shader.PropertyToID("_StaticBlur");

// ブラーシェーダを割り当てたマテリアルを生成.
Material materialBlur = new Material(shaderBlur);

// 出力先RTを生成.
RenderTexture rt = new RenderTexture(w, h);

// カメラのレンダリング結果をRTにコピー.
buffer = new CommandBuffer();
buffer.GetTemporaryRT(copyId, -1, -1, 0, FilterMode.Bilinear);
buffer.Blit(BuiltinRenderTextureType.CurrentActive, copyId);

// 縮小バッファを利用して、ブラーシェーダを適用.
buffer.GetTemporaryRT(blurId, w/4, h/4, 0, FilterMode.Bilinear);
buffer.Blit(copyId, blurId, materialBlur);

// 縮小バッファから出力先RTにコピー.
buffer.Blit(blurId, rtId);

// テンポラリRTを解放.
buffer.ReleaseTemporaryRT(blurId);
buffer.ReleaseTemporaryRT(copyId);

// コマンドバッファをカメラに追加.
_camera.AddCommandBuffer(CameraEvent.AfterImageEffects, buffer);

Requirement

  • Unity5.5+ (included Unity 2017.x)
  • No other SDK

Usage

  1. Download StaticBluredScreen.unitypackage and install to your project.
  2. Attach StaticBluredScreen component to GameObject.
  3. In playmode, call StaticBluredScreen.UpdateTexture.
  4. Enjoy!

image

Demo

demo

ダイアログを開くタイミングで静的なスクリーンブラーを生成し、アニメーションでフェードイン/アウトするデモです.
シーン内にカメラは1つしかありません.
ダイアログが2つ重なったとき、更にブラーを生成しています.

License

MIT
© UTJ/UCL

Author

mob-sakai

See Also

staticbluredscreen's People

Contributors

mob-sakai avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

staticbluredscreen's Issues

Smoothing blur

Hi, thank you for really good solution for blur on Unity UI.
But in your solution the blur is too hard and looks bad in comparison with the native iOS blur.
Is there any way to fix this?
I found this repository with "good" blur, but I don't know how to implement this in to your solution.
https://github.com/Jam3/glsl-fast-gaussian-blur

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.