Material Tinting

HAWK12HT

Halo 5 Infinity uses something called material tinting. Is this RGB tint we are talking about or something else?

https://www.artstation.com/artwork/8v41w

Eric Chadwick

Probably they're using grayscale textures, and colorizing them in the shader. I'm doing a lot of this right now for a mobile game.

If you use a 2x multiply with the color, you can get a very nice range. Middle gray gives no change in brightness or color, but as you stray further into saturation or lightness, the texture is darkened/lightened/colored more and more. Some examples in my digital sketchbook.

HAWK12HT

ah ok cool, been doing similar too but directly to textures using color value in Shader Forge. Cheers 

Eric Chadwick

Yeah I'm using Shader Forge too. Here's a shot of the shader.
http://polycount.com/discussion/160691/sketchbook-eric-chadwick

I don't know if this is the technique they're using though.

HAWK12HT

Thank you for sharing this. As for me I am not working at such complex level  

Eric Chadwick

It only looks complex. The shader is really made of very simple pieces, duplicated a few times. The ideas are pretty straight forward. 

almighty_gir

Eric Chadwick said:

Probably they're using grayscale textures, and colorizing them in the shader. I'm doing a lot of this right now for a mobile game.

If you use a 2x multiply with the color, you can get a very nice range. Middle gray gives no change in brightness or color, but as you stray further into saturation or lightness, the texture is darkened/lightened/colored more and more. Some examples in my digital sketchbook.

You can bias it a little more nicely (though a tad more expensive, i think 5 instructions more?) by doing something like this:

float base = tex2D( grayscaleTex, uv).r; //ideally you'd actually want to sample this as a vec3 and have one channel for the value, and the other two for masking other colors.

vec3 c = base * color;
c *= lerp( c, vec3(1,1,1), someSlider ); //using a slider to bias the amount of contrast in the image by interpolating between your now colored texture and pure white can give you some really nice results.

Eric Chadwick

Thanks Lee. What does c represent? And what does " c *= " mean? I'm not used to writing shaders in a text editor, I mostly wire them in a gui, so I'm a bit hazy on concatenated instructions like this.

almighty_gir

oh i'm sorry man.

c here represents "color". and 'c *=' means to take what is currently c, and multiply it by what follows the '=' and then use that result from then onwards.

If i were to do this in a node based editor (i don't have one for unity, so i'll use unreal instead, hope that's okay) it would look something like this:


Sorry for the terrible example texture, that particular one is roughness/metallic/specular masks heh.

Eric Chadwick

Thanks Lee, this looks like it'll be fun to play with. I'll have a go of it after this milestone, for sure.

HAWK12HT

well that is interesting, I ll give it a shot too. Cheers

cptSwing

Eric Chadwick said:

Probably they're using grayscale textures, and colorizing them in the shader. I'm doing a lot of this right now for a mobile game.

If you use a 2x multiply with the color, you can get a very nice range. Middle gray gives no change in brightness or color, but as you stray further into saturation or lightness, the texture is darkened/lightened/colored more and more.

Aye, been doing it some for smartphone VR stuff as well, using vert colors to individualize grayscale (channelpacked) tiling textures - never used a 2x multiply though. Is it Vertex Color x Texture x Vertex Color again?

Eric Chadwick

No, it's a color swatch multiplied by 2, then the texture is multiplied with the result. I also divide the texture by 2, add a value (alpha of the color swatch), then multiply this with the new color result. The alpha allows a kind of brightness/contrast, for softness. While the color controls color and contrast. Works pretty well.

It works OK on iOS, but there's a lot else going on in the scene, and it's blending four layers. So we're looking at optimizations.