Wayback Machinekoobas.hobune.stream
May JUN Jul
Previous capture 14 Next capture
2021 2022 2023
2 captures
13 Jun 22 - 14 Jun 22
sparklines
Close Help
  • 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
3
Question by monogon · Apr 26, 2014 at 10:17 AM · proceduraltexturinggradientbackgrounds

Gradient background

Hello guys,

I want to achieve gradient backgrounds (linear and radial) with colors that are changeable from script. These backgrounds do not neccessarily need to be 3D backgrounds.. I want something similar to after effects like when you have a 3D scene but with a 2D background that does not change with the camera movement. Is this even possible? Could you lead me to the right direction, please? It is for a scene that focuses on the objects. A camera can rotate around these objects and I want to have nicely colored backgrounds. I thought of a radial (or linear) alpha texture that I would blend with a solid color plane but I don't know how to begin as I am new to procedural textures.

Do you think working with skyboxes would be easier in this case? How would I achieve transition-free gradients then?

Thanks in advance!

Comment
Add comment · Show 1
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 monogon · Apr 26, 2014 at 12:24 PM 0
Share

Ok, I found this thread which clarifies the 2D-background image issue: http://answers.unity3d.com/questions/9729/how-can-i-display-a-flat-background-2d-image-not-a.html

Not the only question left is how I can generate gradient background texture during runtime.

3 Replies

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

Answer by robertbu · Apr 26, 2014 at 05:30 PM

As with most things in Unity, there are a variety of ways of creating gradients.

1) From a performance standpoint, the best way is probably a shader. Take a look at this package in the Asset Store:

https://www.assetstore.unity3d.com/#/content/9403

If you poke around you may be able to find free version of the two shaders you need.

2) If your gradients are one color...light to dark...you can use any shader that _Color property and a grayscale texture of the gradient.

3) For a horizontal or vertical gradient only, you can use vertex colors. Vertex colors require a shader that supports Vertex colors. Few of the shaders that come with Unity support vertex colors, but there are a number in the Unity Wiki. Or for an absolutely minimal shader you can use this one:

 Shader "Custom/Vertex Colored" {
     Properties {
     }
     SubShader {
         Pass {
             ColorMaterial AmbientAndDiffuse
         }
     } 
 }

Create Unity Quad (GameObject > CreateOther > Quad). Attach a material with a vertex shader to the quad and then attach this script:

 #pragma strict
 
 var startColor = Color.red;
 var endColor = Color.blue;
 
 function Start () {
     var mesh = GetComponent(MeshFilter).mesh;
     var colors = new Color[mesh.vertices.Length];
     colors[0] = startColor;
     colors[1] = endColor;
     colors[2] = startColor;
     colors[3] = endColor;
     mesh.colors = colors;
 }

4) You can create a procedural texture...that is generate the bitmap at runtime. Here is a link to get you started.

http://answers.unity3d.com/questions/589329/how-do-i-create-a-radial-gradient-texture-mask-usi.html

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 monogon · Apr 26, 2014 at 11:22 PM 0
Share

Thanks for the insight! I will check out some of these techniques.

avatar image dualite2 · Sep 30, 2014 at 06:59 AM 0
Share

How make disapear annoying log entry with this shader ? (shader wants tangents, wants texture coordinates and wants secondary texture coordinates) For easy thing I really regret opengl Begin / End...

avatar image
15

Answer by Eric5h5 · Apr 26, 2014 at 05:41 PM

Creating a linear gradient as a texture is trivial...all you need is to make a two-pixel texture, using the two colors in the gradient, and make sure bilinear filtering is on. The bilinear filtering creates the gradient for you.

Comment
Add comment · Show 6 · 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 monogon · Apr 26, 2014 at 11:20 PM 0
Share

Thanks for this! Would it be possible to apply a similar concept to radial gradients?

avatar image Eric5h5 · Apr 26, 2014 at 11:32 PM 1
Share

Sort of...if you use a 3x3 texture and put a pixel with a different color in the middle, you get a star/diamond gradient shape. But not circular.

avatar image HeaDiii · Apr 18, 2016 at 11:22 AM 0
Share

This works just beautiful :)

avatar image B4ttleCat · Jan 18, 2017 at 09:17 AM 0
Share

What an amazing little hack. Thank you!

avatar image JaPete · May 01, 2017 at 11:26 PM 0
Share

Eric5h5 - this works wonderfully,

How could I fade this imported image gradient, into another gradient.

A continuous loop of gradient (dark blue and $$anonymous$$l for example) fading slowly into another gradient (light blue and bright green).

Game slowly changes colors? Possible in C# ??

Show more comments
avatar image
0

Answer by JaPete · May 02, 2017 at 08:14 AM

Eric5h5 - this works wonderfully,

How could I fade this imported image gradient, into another gradient.

A continuous loop of gradient (dark blue and teal for example) fading slowly into another gradient (light blue and bright green).

Game slowly changes colors? Possible in C# ??

Comment
Add comment · 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

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.

Follow this Question

Answers Answers and Comments

27 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 avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

Substance question 2 Answers

Runtime cubemap generation from 1x256 gradient image? 1 Answer

How should I be procedurally texturing an object that has uvs? 0 Answers

is there a way to make a gradient material, white to black, in Unity3D? 2 Answers

procedurally generated gradient 2 Answers


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