Add callback to identify customized programs

In case onBeforeCompile has conditional statements in it, the parameter values affecting the shader code can be returned from customProgramCode so the shader program is correctly fetched from cache or recompiled as needed.

src/materials/Material.d.ts

@@ -321,6 +321,11 @@ export class Material extends EventDispatcher {
 	 */
 	onBeforeCompile ( shader : Shader, renderer : WebGLRenderer ) : void;
 
+	/**
+	 * In case onBeforeCompile is used, this callback can be used to identify values of settings used in onBeforeCompile, so three.js can reuse a cached shader or recompile the shader as needed.
+	 */
+	customProgramCode(): string;
+
 	/**
 	 * Sets the properties based on the values.
 	 * @param values A container with parameters.

src/materials/Material.js

@@ -87,6 +87,12 @@ Material.prototype = Object.assign( Object.create( EventDispatcher.prototype ),
 
 	onBeforeCompile: function () {},
 
+	customProgramCode: function () {
+
+		return this.onBeforeCompile.toString();
+
+	},
+
 	setValues: function ( values ) {
 
 		if ( values === undefined ) return;

src/renderers/webgl/WebGLPrograms.js

@@ -257,12 +257,12 @@ function WebGLPrograms( renderer, extensions, capabilities ) {
 
 		}
 
-		array.push( material.onBeforeCompile.toString() );
-
 		array.push( renderer.gammaOutput );
 
 		array.push( renderer.gammaFactor );
 
+		array.push( material.customProgramCode() );
+
 		return array.join();
 
 	};