• Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
1
Question by Matthew Scott · Dec 04, 2013 at 07:16 AM · texturemasknoisegradientradial

How do I create a Radial Gradient Texture Mask using code ._.

I know I could very easily whip one up in Photoshop in two seconds, BUT, I have set myself a challenge of creating EVERYTHING in this project by pure code. Essentially I need it for masking run-time generated noise via add/subtract/multiply for different effects. I've searched everywhere and the only solution I found was a very abstract application in a language I didn't even recognize. I know there is probably a very simple solution to this but it's one of those brain blocking problems I just can't seem to fathom out on my own.

I would have thought it was a simple matter of setting the pixel RGB's based upon the X Y index locations of each pixel location (linear gradient) but after further reading I have seen people use Mathf.PI and Mathf.Sin. I understand these concepts individually but have no idea how they come together to create this...

It would be fantastic if we could come up with a coded solution for this for everybody, it has lots of applications for people looking to create games procedurally.

alt text

radial_gradient.png (10.0 kB)
Comment
Add comment
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

3 Replies

· Add your reply
  • Sort: 
avatar image
4
Best Answer

Answer by Matthew Scott · Dec 05, 2013 at 08:31 AM

You were almost there!! Works wonderfully, what a beautifully simple solution. Here is my implementation of your theory...

 //TEXTURE SETTINGS
 var texWidth : int = 512;
 var texHeight : int = 512;
 
 //MASK SETTINGS
 var maskThreshold : float = 2.0;
 
 //REFERENCES
 var mask : Texture2D;
 
 function Start(){
     GenerateTexture();    
 }
 
 function GenerateTexture(){
 
     mask = new Texture2D(texWidth, texHeight, TextureFormat.RGBA32, true);
     var maskCenter : Vector2 = new Vector2(texWidth * 0.5, texHeight * 0.5);
        
     for(var y : int = 0; y < texture.height; ++y){
         for(var x : int = 0; x < texture.width; ++x){
 
             var distFromCenter : float = Vector2.Distance(maskCenter, new Vector2(x, y));
             var maskPixel : float = (0.5 - (distFromCenter / texWidth)) * maskThreshold;
             mask.SetPixel(x, y, Color(maskPixel, maskPixel, maskPixel, 1.0));
         }
     }
     mask.Apply();
 }

I added a threshold variable to control how "sharp" the gradient is which could be useful for randomisation!

Comment
Add comment · Show 2 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image Matthew Scott · Dec 05, 2013 at 08:44 AM 1
Share

Thanks flamy!

avatar image Fattie · Apr 04, 2014 at 04:57 AM 0
Share

it's so sweet, I wish you'd include your code for applying the mask, man! cheers..

avatar image
4

Answer by flamy · Dec 04, 2013 at 08:01 AM

If what I am guessing is correct, this should be fairly easy. Actually I have a concept that MIGHT work but havent actually tried it.

You need to create a Texture2D and manually set the pixels for it (link!) .

 Texture2D tex;
 
 tex = new Texture2D(WIDTH,HEIGHT);


In trignometry every point on the circumference of a circle can be represented as (cos(A)*RADIUS, sin(A)*RADIUS) Where A is the angle from the center of the circle and RADIUS is the radius of the circle. (Though this formula has absolutely nothing to do with what you want!! This explained the formula because u brought it up.
Well there are places this formula would be useful but here you can do it in a lot simpler way.)

Here center point is going to be the center of the Image, and we have to assume that every point in the texture is on a imaginary circle of certain radius. This pic should be more explainatory.

alt text

We are going to reduce the alpha as the radius increases. The radius of the circle can be found by finding distance between center of the image and the point.

the idea is to reduce the alpha every certain distance from center gradually. if the distance is 0 which is center, the alpha value should be 1, and as the distance increases, it should end up at 0 alpha (MAX_POSSIBLE_RADIUS , probably the width of the image)

 currentAlpha =  (1- (DistanceFromCenter/MAX_POSSIBLE_RADIUS))>=0 ?(1- (DistanceFromCenter/MAX_POSSIBLE_RADIUS) )?0;

When the distance is 0, the alpha will be max at center and 0 at the max distance (note that if the alpha is negative, im settin it to 0.)

Programatically you have to traverse through every pixel, find the distance from center and set the current alpha with above calculation.

 Texture2D tex;
 
 tex = new Texture2D(WIDTH,HEIGHT);

 Vector2 center = new Vector2( (int) WIDTH/2f,(int) HEIGHT/2f );
 for(int i=0;i<WIDTH;i++)
 {
      for(int j=0; j< HEIGHT;j++)
      {
          float DistanceFromCenter = Vector2.Distance( center , new Vector2(i,j) );

          currentAlpha =  (1- (DistanceFromCenter/MAX_POSSIBLE_RADIUS))>=0 ?(1- (DistanceFromCenter/MAX_POSSIBLE_RADIUS) )?0;

          Color myColr = new Color(1,1,1,currentAlpha);

          tex.SetPixel(x,y,myColor);
      }
 }



this is the concept i have in mind and shd work 90%. PS: This is an untested code, i wrote it just for the reference.

Hope it helps.


untitled.png (10.1 kB)
Comment
Add comment · Show 1 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image Matthew Scott · Dec 04, 2013 at 08:55 AM 0
Share

Thanks, flamy, it's a little late here to test this at the moment, but I'll implement it into my current script at some point tomorrow and see if I can get it working, I'll post my results on here...

avatar image
1

Answer by HunterAugust · May 16, 2016 at 07:56 AM

I know I'm necroing the crap out of this post. But I stumbled onto it and it helped a lot so I wanted to put up a code snippet that is complete.

 public class CreateTexture : MonoBehaviour
 {
     public TextureSize textureSize = TextureSize.bit256;
     public enum TextureSize
     {
         bit16 = 16,
         bit32 = 32,
         bit64 = 64,
         bit128 = 128,
         bit256 = 256,
         bit512 = 512,
     }
     public TextureWrapMode wrapMode = TextureWrapMode.Clamp;
     public FilterMode filterMode = FilterMode.Bilinear;
 
     public void GenerateTexture(int size , FilterMode filter, TextureWrapMode wrap)
     {
         Texture2D texture = new Texture2D(size, size);
         GetComponent<Renderer>().material.mainTexture = texture;
 
         Vector2 center = new Vector2(size / 2f, size / 2f);
 
         for (int y = 0; y < texture.height; y++)
         {
             for (int x = 0; x < texture.width; x++)
             {
                 float DistanceFromCenter = Vector2.Distance(center, new Vector2(x, y));
                 float currentAlpha = 1;
 
                 if((1 - (DistanceFromCenter / size)) >= 0)
                 {
                     currentAlpha = (1 - (DistanceFromCenter / size));
                 }
                 else
                 {
                     currentAlpha = 0;
                 }
 
                 Color color = new Color(currentAlpha, currentAlpha, currentAlpha, currentAlpha);
                 texture.SetPixel(x, y, color);
             }
         }
         texture.Apply();
         texture.filterMode = filterMode;
 
         SpriteRenderer s = GetComponent<SpriteRenderer>();
         s.sprite = Sprite.Create(texture,new Rect(0,0,texture.width,texture.height),new Vector2(.5f,.5f));
         s.sprite.name = "New Sprite";    
     }
 }

Then I also made a little editor script to keep things pretty... (and working in editor) alt text

 [CanEditMultipleObjects, CustomEditor(typeof(CreateTexture))]
 public class CreateTextureInspector : Editor
 {
     CreateTexture myTarget;
 
     public void OnEnable()
     {
         myTarget = (CreateTexture)target;
     }
 
     public override void OnInspectorGUI()
     {
         DrawDefaultInspector();
 
         if (GUILayout.Button("New Texture"))
         {
             myTarget.GenerateTexture((int)myTarget.textureSize, myTarget.filterMode, myTarget.wrapMode);
         }
     }
 }

Thanks a lot guys :)


capture.jpg (14.2 kB)
Comment
Add comment · Show 1 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image ed7k · Sep 23, 2019 at 07:38 PM 0
Share

Super helpful, works perfectly. Thanks for this!

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Welcome to Unity Answers

If you’re new to Unity Answers, please check our User Guide to help you navigate through our website and refer to our FAQ for more information.

Before posting, make sure to check out our Knowledge Base for commonly asked Unity questions.

Check our Moderator Guidelines if you’re a new moderator and want to work together in an effort to improve Unity Answers and support our users.

Follow this Question

Answers Answers and Comments

19 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

How can I make a scratch card type of effect in unity 1 Answer

Reading a masked texture? 0 Answers

Create Material with gradient on a sphere? 2 Answers

is it possible to make 2d real time coloring with masks (paint app) 1 Answer

Shader light fix? 1 Answer


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges