Creating a wooden texture with gradient diffuse color

I’ve been struggling with this for a while so I figured it was time to reach out and see if anyone could help point me in the right direction.

I created a “builder” app that lets users mix and match designs and colors. The main issue is that I haven’t had a lot of luck getting the material to look as realistic as I’d like. It’s meant to be wooden but I typically get a more plastic result.

On top of that, if possible, I would really like to be able to create a gradient of 3 colors that transitions at the connecting points of the 3 different models.

I put together a playground example of the progress I’ve made but isn’t there yet.

The first mesh is using PBR materials (I’ve only just managed to get them working) and the texture looks decent, but I haven’t been able to get the colorify plugin to apply different colors to the different meshes. I’m pretty sure I’m missing something simple there but it’s escaping me. It’s someone else’s code that I’m editing and trying to fit to my use.

The second mesh has a gradient applied to it but it goes from left to right instead of top to bottom, and there is no texture.

So my end goal, if it is doable, is to load 3 meshes, stack them vertically, apply one wooden texture to all 3 meshes, and then apply a gradient color to them to make it look like the wood has been stained.

Any help is hugely appreciated!

hi @Ynothna welcome to the forum

I can’t really help with materials look&feel but maybe @PatrickRyan has some advice here

@Ynothna I’m happy to dig into this, but won’t be able to look until later today. I will ping back when I have a chance.

No problem at all, I’ve been working on this project for over a year so it’s not a mad rush. I’ve managed to stumble along with Google and ChatGPT up until now, haha.

Thanks!

@Ynothna, in looking at your PG, there was just one simple thing that needed to be added. Since you want to pass a different color to the three sections, you need three materials, each one with a different color assigned to the colorify plugin on the material. This is because the pluginManager on the material is modifying the shader to multiply the diffuse color contribution by a custom color you provide in the code. Since you were using the same material for all three, each time you changed the custom color, it was changing it at the shader level. Since all three meshes were using the same material, they were all assigned whatever color was the last defined in code.

Here is the updated PG with the cloned materials. For the material looking more like wood, there are a couple of things you need to do. The first is that the roughness texture that you uploaded into the metallic property of the material needs to be used as a roughness texture. Setting useRoughnessFromMetallicTextureGreen = true will correctly assign the roughness authored in the material. You don’t need to set a specific roughness factor as the material’s roughness texture will have been authored to make the material feel correctly like wood. What was happening before is that the roughness texture was being used as metallic, so it was making the wood feel more metallic, and then you were setting a constant roughness factor for the entire surface. Both of these were contributing to the material feeling plastic. You should always think of metallic in PBR as an extreme value in most cases, either 0.0 or 1.0. The times you see values in a metallic texture that aren’t 0.0 or 1.0 would be small transitions from metallic to dielectric such as a piece of metal that has dirt on the surface. Where the surface transitions from metallic to dielectric will be values other than 0.0 or 1.0, but other than that, it’s best to keep them at the extreme ends of the range. This is because metallic surfaces contribute their base color to the specular reflections instead of white which makes things feel metallic. If you use large areas of grey in a metallic texture or set a grey value as the factor, you will get mixed color in your specular reflections which will look confusing to the viewer and make the material feel less like wood.

I also added a directional light in the scene so that you could see the surface detail in the normal texture better. You will want to make sure you have some directionality in your lighting if you have a lot of normal detail so that you can pick that up on the surface. Even light all around will kill the contribution from the normal texture. You don’t need to use a punctual light for this, you can use just IBL from your environment, but choosing the right IBL that highlights your material properties is very important.

You will probably also want to play with the tiling of your textures if your meshes are not the same proportion like you have here. This is because the UVs of the meshes all normalized in UV space so they use the entire texture. In this case, your top and bottom meshes are much taller than the center mesh so while the texture seams across the break in the meshes correctly, the surface quality changes due to the difference in the scale of the textures from one mesh to the next. This may take some work to balance your tiling and retaining consistent scale of surface detail and may mean you need to author a different texture set for the middle mesh.

Lastly, the one thing you should do if you really want to control the color of the wood would be to remove the color from the albedoTexture you are using for this material. Since there is already an oak color there, you are just tinting the oak color. If that is what you are going for, this is correct. But if you want true control over the color, you want to pass just a greyscale texture to the albedoTexture as you will be mutliplying it with your custom color. Simply taking the original into your favorite image editor and desaturating the texture is all you need. This way the texture details remain, but the color will be the one you define.

I hope this helps unblock you and get you closer to your final art target for the scene. Feel free to ping back with any additional questions or clarifications if I didn’t break it down enough.

3 Likes