Three.js: Multiple shaders/materials

[thomasmattheussen]

Hi,

I was looking through the API and source code, but didn't find any way to apply multiple materials/shaders to an object. Isn't it possible to, for example, add a shader for reflection and another shader for specular or diffuse or...

Or do we have to write all that functionality in ONE shader?

[chandlerprall]

It's best to put everything you want in one shader. To apply multiple materials you would have to send the object + shader to the GPU multiple times. Getting all the effects you want in one draw pass will be substantially more efficient.

[thomasmattheussen]

Okay... Would be nice for shader reusability though...

[chandlerprall]

Three's built in shaders are put together by defining the various chunks and then piecing them together. Perhaps that method can help you?

[thomasmattheussen]

I see... Maybe Three could somehow "bridge" that method in the future when someone wants to apply multiple shaders...?

[chandlerprall]

That functionality was actually removed a couple versions ago.

[thomasmattheussen]

So there's probably a good reason why they removed it :) So I guess it would be best for me not to try to implement it then :)

[mrdoob]

On the meantime you'll have to write the shader yourself. But I want to have some system to ease the pain of doing this eventually.

[zz85]

there's a THREE.SceneUtils.createMultiMaterialObject, but probably not for multiple shaders...

var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [ new THREE.MeshLambertMaterial( { color: color } ), new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } ) ] );

[gravi2]

@mrdoob: are shader chunks still the best way to use multiple custom+inbuilt shaders?

[tschw]

@gravi2

I have some code in the making that adds meta information to the shader chunks so they can be arranged into arbitrary graphs with multiple instances per chunk. The data model is extensible, so you can easily hook your own routines into any point of the existing shading system, and also get a lot more flexibility out of the existing components by rearranging them, for example reading any material parameter from a texture, uniform, varying or constant, use any number of UV layers with any mapping, move code between vertex and fragment stage, ...

[stuartpb]

Yeah, is there any better way to do this in the core three.js system, four years later?