Use onBeforeCompile to customize shader for instancing

Replacing shaders in THREE.ShaderLib is a bad practice, as it interferes with normal operation of built-in materials. When materials need to be customized, it's better to use onBeforeCompile.

examples/webgl_buffergeometry_instancing_lambert.html

@@ -34,7 +34,7 @@
 		import { OrbitControls } from './jsm/controls/OrbitControls.js';
 		import { Curves } from './jsm/curves/CurveExtras.js';
 
-		THREE.ShaderLib.customDepthRGBA = { // this is a cut-and-paste of the depth shader -- modified to accommodate instancing for this app
+		var customDepthToRGBAShader = { // this is a cut-and-paste of the depth shader -- modified to accommodate instancing for this app
 
 			uniforms: THREE.ShaderLib.depth.uniforms,
 
@@ -94,87 +94,80 @@
 
 		};
 
-		THREE.ShaderLib.lambert = { // this is a cut-and-paste of the lambert shader -- modified to accommodate instancing for this app
-
-			uniforms: THREE.ShaderLib.lambert.uniforms,
-
-			vertexShader:
-				`
-				#define LAMBERT
-
+		// this is a cut-and-paste of the lambert shader -- modified to accommodate instancing for this app
+		var customLambertVertexShader =
+			`
+			#define LAMBERT
+
+			#ifdef INSTANCED
+				attribute vec3 instanceOffset;
+				attribute vec3 instanceColor;
+				attribute float instanceScale;
+			#endif
+
+			varying vec3 vLightFront;
+			varying vec3 vIndirectFront;
+
+			#ifdef DOUBLE_SIDED
+				varying vec3 vLightBack;
+				varying vec3 vIndirectBack;
+			#endif
+
+			#include <common>
+			#include <uv_pars_vertex>
+			#include <uv2_pars_vertex>
+			#include <envmap_pars_vertex>
+			#include <bsdfs>
+			#include <lights_pars_begin>
+			#include <color_pars_vertex>
+			#include <fog_pars_vertex>
+			#include <morphtarget_pars_vertex>
+			#include <skinning_pars_vertex>
+			#include <shadowmap_pars_vertex>
+			#include <logdepthbuf_pars_vertex>
+			#include <clipping_planes_pars_vertex>
+
+			void main() {
+
+				#include <uv_vertex>
+				#include <uv2_vertex>
+				#include <color_vertex>
+
+				// vertex colors instanced
 				#ifdef INSTANCED
-					attribute vec3 instanceOffset;
-					attribute vec3 instanceColor;
-					attribute float instanceScale;
-				#endif
-
-				varying vec3 vLightFront;
-				varying vec3 vIndirectFront;
-
-				#ifdef DOUBLE_SIDED
-					varying vec3 vLightBack;
-					varying vec3 vIndirectBack;
-				#endif
-
-				#include <common>
-				#include <uv_pars_vertex>
-				#include <uv2_pars_vertex>
-				#include <envmap_pars_vertex>
-				#include <bsdfs>
-				#include <lights_pars_begin>
-				#include <color_pars_vertex>
-				#include <fog_pars_vertex>
-				#include <morphtarget_pars_vertex>
-				#include <skinning_pars_vertex>
-				#include <shadowmap_pars_vertex>
-				#include <logdepthbuf_pars_vertex>
-				#include <clipping_planes_pars_vertex>
-
-				void main() {
-
-					#include <uv_vertex>
-					#include <uv2_vertex>
-					#include <color_vertex>
-
-					// vertex colors instanced
-					#ifdef INSTANCED
-						#ifdef USE_COLOR
-							vColor.xyz = instanceColor.xyz;
-						#endif
+					#ifdef USE_COLOR
+						vColor.xyz = instanceColor.xyz;
 					#endif
+				#endif
 
-					#include <beginnormal_vertex>
-					#include <morphnormal_vertex>
-					#include <skinbase_vertex>
-					#include <skinnormal_vertex>
-					#include <defaultnormal_vertex>
-
-					#include <begin_vertex>
-
-					// position instanced
-					#ifdef INSTANCED
-						transformed *= instanceScale;
-						transformed = transformed + instanceOffset;
-					#endif
+				#include <beginnormal_vertex>
+				#include <morphnormal_vertex>
+				#include <skinbase_vertex>
+				#include <skinnormal_vertex>
+				#include <defaultnormal_vertex>
 
-					#include <morphtarget_vertex>
-					#include <skinning_vertex>
-					#include <project_vertex>
-					#include <logdepthbuf_vertex>
-					#include <clipping_planes_vertex>
+				#include <begin_vertex>
+				// position instanced
 
-					#include <worldpos_vertex>
-					#include <envmap_vertex>
-					#include <lights_lambert_vertex>
-					#include <shadowmap_vertex>
-					#include <fog_vertex>
+				#ifdef INSTANCED
+					transformed *= instanceScale;
+					transformed = transformed + instanceOffset;
+				#endif
 
-				}
-				`,
+				#include <morphtarget_vertex>
+				#include <skinning_vertex>
+				#include <project_vertex>
+				#include <logdepthbuf_vertex>
+				#include <clipping_planes_vertex>
 
-			fragmentShader: THREE.ShaderLib.lambert.fragmentShader
+				#include <worldpos_vertex>
+				#include <envmap_vertex>
+				#include <lights_lambert_vertex>
+				#include <shadowmap_vertex>
+				#include <fog_vertex>
 
-		};
+			}
+			`;
 
 
 		//
@@ -292,15 +285,16 @@
 
 			} );
 
+			material.onBeforeCompile = function( shader ) {
+				shader.vertexShader = customLambertVertexShader;
+			};
 			material.defines = material.defines || {};
 			material.defines[ 'INSTANCED' ] = "";
 
 
 			// custom depth material - required for instanced shadows
 
-			var shader = THREE.ShaderLib[ 'customDepthRGBA' ];
-
-			var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
+			var uniforms = THREE.UniformsUtils.clone( customDepthToRGBAShader.uniforms );
 
 			var customDepthMaterial = new THREE.ShaderMaterial( {
 
@@ -309,8 +303,8 @@
 					'DEPTH_PACKING': THREE.RGBADepthPacking
 				},
 				uniforms: uniforms,
-				vertexShader: shader.vertexShader,
-				fragmentShader: shader.fragmentShader
+				vertexShader: customDepthToRGBAShader.vertexShader,
+				fragmentShader: customDepthToRGBAShader.fragmentShader
 
 			} );