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

[pwmarcz]

Yes, it would! I would just add a short warning to the description of onBeforeCompile as well.

[sjpt]

Can’t the cache use the results of the shader code as substituted by onBeforeCompile as (part of) the key in the case of non-trivial onBeforeCompile? That would have an overhead of long keys, but only in the case where onBeforeCompile was used, and would not burden the coder with the need for customProgramCacheKey.

Also would not burden the user with wasted debug time from the current unexpected behaviour. He would eventually find the relevant changed documentation (as I eventually found this issue thread) and be able to fix the code, but only after some time.