Changing Color Based on Z position

Question

Hi, all! I have a cube, and I would like to change its renderer.material.color from one RGB to another RGB In between two points on the Z-axis in space. For instance, if my start parameter is 1.0 on the Z axis and my starting color is yellow, and my ending color is red at 2.0 on the Z-axis, when the cube is at the start (1.0), it is yellow. At 1.5 on the Z-axis the cube will be orange, and at 2.0 on the Z-axis the cube will be red. So I am asking if anyone knows how to link an RGB value to a position and turn it into a percentile and plug it into the RGB value.

Thanks! Happy gaming!- YA

Answer 1

Best Answer

Answer by Peter G · Feb 14, 2012 at 03:48 AM

You could do it in a shader.... if you want really accurate gradients on the object itself, and are willing to put excessive amounts of processing power into such a menial task.

Or, you could do it in a script and get a good looking result that's considerably cheaper. Every Update() you want to get the objects position and use that to interpolate from one color to the other.

Create a shader that takes an extra color parameter or just use the MainColor of a built-in one.

Create a simple script that does something like this:

   var leftBoundCol : Color;
      var rightBoundCol : Color;
 
      var leftBound : float;
      var rightBound : float;
 
      function Update () {
              var lerpParam = Mathf.InverseLerp(leftBound, rightBound , transform.position.z);
              renderer.material.color = Color.Lerp(leftBoundCol , rightBoundCol , lerpParam);
      }
 I think everything in this is pretty self-explanatory.  You set the endpoints, and the endpoint-colors.  Then, based on the objects, position between the two endpoints, it assigns the main color of the object to be something in-between the two.

This in turn changes the color of the entire object. If you were to do it in a shader, you could get per vertex or even per fragment changes in color, but as I mentioned earlier, that is considerably more expensive.

Doing it via script is one lerp per frame. Doing it in a shader is at least as many vertices as you have per frame. So unless its a cube, assume a few hundred to a few thousand lerps per second.

Add comment · Show 3 · Share

Youngapprentice · Feb 14, 2012 at 09:10 PM 0

Share

Thank you. Haha luckily I am using cubes. I am going for a retro stye so they will only be one color. :) Last thing: What is a Lerp?

Peter G · Feb 15, 2012 at 01:14 AM 0

Share

Lerp = Linear intER$$anonymous$$te. It linearly moves from the start value to the end value. There are a few ways of doing it, but here's and easy to understand way of explaining it:

 Actual Value = (1 - param) * initialValue + param * finalValue

When the parameter is 0, we are at the initial value. When the parameter is 1, we are at the final value. and When its somewhere in-between, we're somewhere in-between.

Youngapprentice · Feb 15, 2012 at 01:33 AM 0

Share

Thank you very much. You have no idea how much help you have been! Thank you!

Answer 2

Answer by akekajoo · Feb 14, 2012 at 04:23 AM

Off the top of my head, I think you would do something like this to blend between yellow and red based on a z-position between 1 and 2:

     renderer.material.color = Color.Lerp(
         Color.red, 
         Color.yellow, 
         2.0f - transform.position.z);

Add comment · Share

Changing Color Based on Z position

2 Replies

Your answer

Follow this Question

Related Questions