diff --git a/src/materials/Material.d.ts b/src/materials/Material.d.ts
index 407df0c9d97d87..76f53b4987eea1 100644
--- a/src/materials/Material.d.ts
+++ b/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.
diff --git a/src/materials/Material.js b/src/materials/Material.js
index ee22bec3fa1c79..f20778b50261ac 100644
--- a/src/materials/Material.js
+++ b/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;
diff --git a/src/renderers/webgl/WebGLPrograms.js b/src/renderers/webgl/WebGLPrograms.js
index e6dda01b17e5b2..cc48dfd5431b36 100644
--- a/src/renderers/webgl/WebGLPrograms.js
+++ b/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();
 
 	};