Search Unity

Quick tip to produce gaussian blur effect as seen on iOS Mobile using Allegorithmic SD5

Discussion in 'Community Learning & Teaching' started by subjectZero, May 1, 2016.

  1. subjectZero

    subjectZero

    Joined:
    Oct 19, 2014
    Posts:
    37
    Hey Peeps

    Here is a supper quick way to produce a gaussian blur effect as seen on iOS user interface designs.

    In Substance Designer just add a InputColor node and a Blur HQ node, connect them chronological, don't forget to add the final output to base color. on the inputColor node under attributes>Identifier change "input" to "ImageInput":

    Screen Shot 2016-05-03 at 10.19.17.png

    Next click on the blur hq node under "Instance Parameters" > expose the parameter and call it "BlurIntensity". Step 2: double click on the empty part of the graph and change the max value of "BlurIntensity" to 64.

    final one.png

    Also make your graph relative to parent, then the image texture you add will be the uv size it generates,this should save on memory cost (in my case i want the exact size). Then publish your graph and copy into your projects asset folder.

    In unity create a RawImage. and assign the new_graph_basecolor to the Texture input of the Rawimage.

    this.png

    just add your texture to your new shader and "presto".

    Screen Shot 2016-05-03 at 10.33.29.png


    Now you can adjust the blur intensity by dragging the slider and your input node is also exposed, both these values can be changed at runtime.

    Ive tested it on my iPhone 6 and it works perfectly.

    Hope this finds you if you need it.

    Rock on!

    P.S. Here is how you would change the value during runtime:
    Code (CSharp):
    1. using UnityEngine;
    2. using System.Collections;
    3.  
    4. public class SubstanceProfile : MonoBehaviour {
    5.  
    6.  
    7.     #region Public Fields
    8.  
    9.     public ProceduralMaterial myBlurGraph;
    10.  
    11.     #endregion
    12.  
    13.  
    14.  
    15.     public void LoadNewSubstanceTexture (Texture profileTexture){
    16.  
    17.  
    18.         Texture2D newTexture = profileTexture as Texture2D;
    19.  
    20.         myBlurGraph.SetProceduralTexture ("ImageInput", newTexture);
    21.         myBlurGraph.RebuildTextures();
    22.  
    23.     }
    24.  
    25.  
    26. }
    And here is what one can do with it:

    Screen Shot 2016-05-01 at 09.41.56.png
     
    Last edited: May 3, 2016
    theANMATOR2b likes this.
  2. Adam-Buckner

    Adam-Buckner

    Joined:
    Jun 27, 2007
    Posts:
    5,664
    Cool! Thanks for doing this.
     
    subjectZero likes this.
  3. subjectZero

    subjectZero

    Joined:
    Oct 19, 2014
    Posts:
    37
    Only a pleasure, the community has helped me out so much, I'm glad i can contribute a little.
    rock on!