WebGLRender & NodeMaterials program caching errors

[aardgoose]

** Program caching issue with Node materials and the webgl renderer **

With certain NodeMaterials eg MeshBasicNodeMaterial and MeshPhongNodeMaterial, program caching can fail with various breakages: example test case added in the PR: examples\webgl_nodes_test.html based on webgl_nodes_materials_physical_clearcoat.html.

The root cause is that program parameters from programCache.getParameters() are relied on to generate a unique key value, however the parameters and key are derived in turn from the material's shaders.

In the NodeMaterials which derive from ShaderMaterial, all node materials have the default ShaderMaterial shaders at this point, and the real shaders are only built later via onBuild(). Depending on the material's other parameters it is possible to get duplicate cache keys for different NodeMaterials, and hence the wrong programs being used for some materials.

I have have removed the inherited shaders in NodeMaterial and moved the material.onBuild() call into getParameters() to ensure accurate customShaderID values are generated.

I am not sure if this is the best solution, but it fixes the problem.

@sunag

[github-actions]

📦 Bundle size

Full ESM build, minified and gzipped.

Filesize dev	Filesize PR	Diff
640 kB (158.8 kB)	640.4 kB (158.9 kB)	+317 B

🌳 Bundle size after tree-shaking

Minimal build including a renderer, camera, empty scene, and dependencies.

Filesize dev	Filesize PR	Diff
433.4 kB (105 kB)	433.7 kB (105.1 kB)	+317 B

[LeviPesin]

I think these properties are already created by ShaderMaterial?

[aardgoose]

They have the text for a minimal shader applied.

three.js/src/materials/ShaderMaterial.js

Lines 21 to 22 in 8d2430f

	this.vertexShader = default_vertex;
	this.fragmentShader = default_fragment;

setting these to null ensures the new 'shader missing' code in getParameters() is triggered and hence material.onBuild()

[sunag]

I think that another fix could be add a this.type in customProgramCacheKey().
it's common WebGLRenderer users use differents materials just with differents maps and color. Preserve the cacheKey can help for it.

three.js/examples/jsm/nodes/materials/NodeMaterial.js

Line 51 in 8d2430f

return getCacheKey( this );

customProgramCacheKey() {

	return this.type + getCacheKey( this );

}

[aardgoose]

I considered that, downsides it relies on authors coding it consistently and may miss changes of shader text and possible sharing of programs between different materials. Admittedly those may be corner cases, and there may be other consumers of the onBuild() mechanism.

[sunag]

Closing in favor of #26227
Thanks!