MeshStandardMaterial texture to convert to basic

Hi threejs.discourse community !

I would like to make material that would react to lights, but only on several defined areas ( via texture ). Excluded areas, should behave like MeshBasicMaterial; totally ignoring lighting.

What should I look into ?
Thanks

Probably a custom material. You can either use .onBeforeCompile to get the library shader code of MeshBasicMaterial and change it to your liking or write your own shader code via ShaderMaterial.

In both cases you need to pass your texture as a uniform to the fragment shader and then use it to assign either a diffuse or light affected color from the library/your own code to the output color variable.

Using an emissiveMap on MeshStandardMaterial is one way to get that effect.

I’d also note that MeshBasicMaterial is much cheaper to render than MeshStandardMaterial. Especially if this material fills a lot of the screen it might be better to just have two materials rather than trying to merge them into one (expensive) material.

Thanks for your answers

Using an emissiveMap on MeshStandardMaterial is one way to get that effect.

I am going to perform some test using emissiveMap then. Would a black and white map work ? Or should I go with final the final diffuse color I expect ?

it might be better to just have two materials

How would you do that ? Will you go on a single geometry/mesh ? Or by having two geometries/meshes ?

I guess that excluding a large portion of a rendered geometry by using an alphaMap won’t prevent MeshStandardMaterial to process each transparent pixels, and therefore being more expensive. It will still depends on the whole geometry area, and not only for non discarded pixels, right ?

You can either split the geometry, or assign vertex groups. Each group can have a different material. Each group is also a separate draw call, and similar to using multiple geometries from a performance perspective.

I guess that excluding a large portion of a rendered geometry by using an alphaMap won’t prevent MeshStandardMaterial to process each transparent pixels, and therefore being more expensive.

A bit hard to predict and might depend on the GPU, but probably you’re still paying the cost of those transparent pixels, yes.

emissive color modulated by (green channel of) emissiveMap is mixed additively with color modulated by map and lighting, so if you just want to separate these two and don’t need transparency, you can apply two b&w inversed maps to each color, like so:

emissive_test

https://jsfiddle.net/tfoller/psrLcx8t/7/

The only problem area is the junction of the maps’ black & white.

Thanks for the demo @tfoller
It pretty nails down exactly what I was looking