Material cache non-unique hash - onBeforeCompile.toString

[ghost]

Description of the problem

Two different materials is being recognised as the same material here:

three.js/src/renderers/webgl/WebGLPrograms.js

Line 218 in c94018c

this.getProgramCode = function ( material, parameters ) {

let someString = 'a';
const materialA = new THREE.MeshBasicMaterial();
materialA.onBeforeCompile = function() {
  // do something with someString
}

someString = 'b';
const materialB = new THREE.MeshBasicMaterial();
materialB.onBeforeCompile = function() {
  // do something with someString
}

The hash of those materials will be the same when using onBeforeCompile.toString() but they do different things because of different variable values.

So the compiled version of materialA is equal to the compiled version of materialB when they are not equal.

Three.js version

• Dev
• r96
• ...

Browser

• All of them
• Chrome
• Firefox
• Internet Explorer

OS

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

Hardware Requirements (graphics card, VR Device, ...)

[pailhead]

This is not a bug this is a feature. Duplicate though:

#13192

Related:
#14232

Workarounds:
https://github.com/pailhead/three-refactor-chunk-material
https://medium.com/@pailhead011/extending-three-js-materials-with-glsl-78ea7bbb9270

Alternate proposal that has no issues with hashing:

#14231

[Mugen87]

This issue can be considered as a "Won't fix" (see #14245 (comment)).

@f1cognite Please use one of the existing workarounds to avoid the issue.