Combined (blended) materials with canvas texture

Questions
, ,
1

I see that there is a canvas texture example at https://threejs.org/examples/#webgl_materials_texture_canvas that allows you to put a drawn texture onto an object. I’m using this technique, but I want to be able to put that texture on top of an existing material “look”. Ideally, I want to have the geometry have a metal look (stainless steel for example) and then blend in the drawn texture on top of the metal look.

I tried just generating an image at runtime based on the canvas where I created a background image, draw a background tiled texture into the image, and then draw the user’s image on top of it. Then I use that texture as a map for the material. While this works somewhat, it looks off and not real. I want a high quality base material look and it’s okay if the user’s drawn texture is not as crisp.

What I’d like to do essentially is have two materials for a single object/mesh and then blend the two materials together at runtime. I know there are ways to do this with two images that are static, but one of my images changes as the user draws.

Is there some way to do this that I’m missing? Or is there another technique that would be a better fit?

2

Hello michaelwells,

What material are you using for your object? If you use the MeshBasicMaterial from the sample listed above, you won’t be able to get the metal look you are looking for. If you need a reflection effect you can try to use an environment map (envMap) via a texturecube. Here is an example of that effect: https://threejs.org/examples/?q=car#webgl_materials_cars

You could start with the chrome effect and tune it to the stainless steel you are looking for.