Clone a ShaderMaterial and Have Different Uniforms for Different Copies of the Material

[Fyrestar]

@oldsegotia

the planes share the same material but have different uniform

const mesh2 = new THREE.Mesh(geometry, material.clone());

You’re cloning the material, they also by default have a custom set of uniforms as they are cloned too when cloning a ShaderMaterial.

You might be interested in this plugin i made for that purpose, to use a single material instance but use different uniform values on the fly derived from the mesh for instance. It saves you from cloning materials and all their properties just to change some parameters.

Chainable onBeforeCompile + Uniforms per Mesh

This little code will patch all material classes to have a chainable onBeforeCompile pattern, so when you assign a callback to onBeforeCompile it will be pushed into a plugins array property on the material instead overriding it. Assign null to reset or use removePlugin to remove a specific. Also addPlugin (same as assining) and hasPlugin is available. It doesn’t break the API and works without core modification, so WebGLPrograms.js will get a combined string of all functions. You can also set…

Recently also added a concept for shader code sharing to avoid having a copy of the shader string of every cloned ShaderMaterial, gonna add it in the next release. It essentially makes ShaderMaterials more lightweight like using in-built materials.