Using Material.onBeforeCompile on multiple materials causes cache conflicts

Description of the problem

Creating multiple materials using onBeforeCompile breaks when the source code of onBeforeCompile is exactly the same.

It looks like the compiled programs are cached based on the onBeforeCompile source code (looking at material.program.cacheKey).

Here is an example:

• jsfiddle (latest release branch)
• jsfiddle (dev branch)

The makeMaterial function is supposed to create two different materials (based on parameters), but the two objects render in the same color.

As a workaround, redefining material.defines works. In the above example, adding the following line to makeMaterial fixes the issue and makes the two object render differently:

material.defines = {'FOO': ''+r};

I realize that it might not be so easy to disambiguate the two materials, but maybe this could be documented as part of Material.onBeforeCompile?

Three.js version

• Dev
• r116

Browser

• All of them
• Chrome
• Firefox
• Internet Explorer

OS

• All of them
• Windows
• macOS
• Linux
• Android
• iOS