Shaders: add shader name (#27014)

* Add shader name

* Add shader name

* Add shader name

examples/jsm/materials/MeshGouraudMaterial.js

@@ -9,6 +9,8 @@ import { UniformsUtils, UniformsLib, ShaderMaterial, Color, MultiplyOperation }
 
 const GouraudShader = {
 
+	name: 'GouraudShader',
+
 	uniforms: UniformsUtils.merge( [
 		UniformsLib.common,
 		UniformsLib.specularmap,

examples/jsm/objects/Lensflare.js

@@ -132,6 +132,7 @@ class Lensflare extends Mesh {
 		const shader = LensflareElement.Shader;
 
 		const material2 = new RawShaderMaterial( {
+			name: shader.name,
 			uniforms: {
 				'map': { value: null },
 				'occlusionMap': { value: occlusionMap },
@@ -300,6 +301,8 @@ class LensflareElement {
 
 LensflareElement.Shader = {
 
+	name: 'LensflareElementShader',
+
 	uniforms: {
 
 		'map': { value: null },

examples/jsm/objects/ReflectorForSSRPass.js

@@ -111,6 +111,7 @@ class ReflectorForSSRPass extends Mesh {
 		const renderTarget = new WebGLRenderTarget( textureWidth, textureHeight, parameters );
 
 		const material = new ShaderMaterial( {
+			name: ( shader.name !== undefined ) ? shader.name : 'unspecified',
 			transparent: useDepthTexture,
 			defines: Object.assign( {}, ReflectorForSSRPass.ReflectorShader.defines, {
 				useDepthTexture
@@ -251,6 +252,8 @@ class ReflectorForSSRPass extends Mesh {
 
 ReflectorForSSRPass.ReflectorShader = {
 
+	name: 'ReflectorShader',
+
 	defines: {
 		DISTANCE_ATTENUATION: true,
 		FRESNEL: true,

examples/jsm/objects/Refractor.js

@@ -51,6 +51,7 @@ class Refractor extends Mesh {
 		// material
 
 		this.material = new ShaderMaterial( {
+			name: ( shader.name !== undefined ) ? shader.name : 'unspecified',
 			uniforms: UniformsUtils.clone( shader.uniforms ),
 			vertexShader: shader.vertexShader,
 			fragmentShader: shader.fragmentShader,
@@ -261,6 +262,8 @@ class Refractor extends Mesh {
 
 Refractor.RefractorShader = {
 
+	name: 'RefractorShader',
+
 	uniforms: {
 
 		'color': {

examples/jsm/objects/Sky.js

@@ -28,10 +28,10 @@ class Sky extends Mesh {
 		const shader = Sky.SkyShader;
 
 		const material = new ShaderMaterial( {
-			name: 'SkyShader',
-			fragmentShader: shader.fragmentShader,
-			vertexShader: shader.vertexShader,
+			name: shader.name,
 			uniforms: UniformsUtils.clone( shader.uniforms ),
+			vertexShader: shader.vertexShader,
+			fragmentShader: shader.fragmentShader,
 			side: BackSide,
 			depthWrite: false
 		} );
@@ -46,6 +46,8 @@ class Sky extends Mesh {
 
 Sky.SkyShader = {
 
+	name: 'SkyShader',
+
 	uniforms: {
 		'turbidity': { value: 2 },
 		'rayleigh': { value: 1 },

examples/jsm/objects/Water.js

@@ -67,6 +67,8 @@ class Water extends Mesh {
 
 		const mirrorShader = {
 
+			name: 'MirrorShader',
+
 			uniforms: UniformsUtils.merge( [
 				UniformsLib[ 'fog' ],
 				UniformsLib[ 'lights' ],
@@ -188,9 +190,10 @@ class Water extends Mesh {
 		};
 
 		const material = new ShaderMaterial( {
-			fragmentShader: mirrorShader.fragmentShader,
-			vertexShader: mirrorShader.vertexShader,
+			name: mirrorShader.name,
 			uniforms: UniformsUtils.clone( mirrorShader.uniforms ),
+			vertexShader: mirrorShader.vertexShader,
+			fragmentShader: mirrorShader.fragmentShader,
 			lights: true,
 			side: side,
 			fog: fog

examples/jsm/objects/Water2.js

@@ -88,6 +88,7 @@ class Water extends Mesh {
 		// material
 
 		this.material = new ShaderMaterial( {
+			name: shader.name,
 			uniforms: UniformsUtils.merge( [
 				UniformsLib[ 'fog' ],
 				shader.uniforms
@@ -205,6 +206,8 @@ class Water extends Mesh {
 
 Water.WaterShader = {
 
+	name: 'WaterShader',
+
 	uniforms: {
 
 		'color': {

examples/jsm/postprocessing/LUTPass.js

@@ -2,6 +2,8 @@ import { ShaderPass } from './ShaderPass.js';
 
 const LUTShader = {
 
+	name: 'LUTShader',
+
 	defines: {
 		USE_3DTEXTURE: 1,
 	},
@@ -29,7 +31,6 @@ const LUTShader = {
 
 	`,
 
-
 	fragmentShader: /* glsl */`
 
 		uniform float lutSize;

examples/jsm/postprocessing/OutputPass.js

@@ -24,6 +24,7 @@ class OutputPass extends Pass {
 		this.uniforms = UniformsUtils.clone( shader.uniforms );
 
 		this.material = new RawShaderMaterial( {
+			name: shader.name,
 			uniforms: this.uniforms,
 			vertexShader: shader.vertexShader,
 			fragmentShader: shader.fragmentShader

examples/jsm/shaders/ACESFilmicToneMappingShader.js

@@ -8,6 +8,8 @@
 
 const ACESFilmicToneMappingShader = {
 
+	name: 'ACESFilmicToneMappingShader',
+
 	uniforms: {
 
 		'tDiffuse': { value: null },

examples/jsm/shaders/AfterimageShader.js

@@ -6,6 +6,8 @@
 
 const AfterimageShader = {
 
+	name: 'AfterimageShader',
+
 	uniforms: {
 
 		'damp': { value: 0.96 },

examples/jsm/shaders/BasicShader.js

@@ -4,6 +4,8 @@
 
 const BasicShader = {
 
+	name: 'BasicShader',
+
 	uniforms: {},
 
 	vertexShader: /* glsl */`

examples/jsm/shaders/BlendShader.js

@@ -4,6 +4,8 @@
 
 const BlendShader = {
 
+	name: 'BlendShader',
+
 	uniforms: {
 
 		'tDiffuse1': { value: null },

examples/jsm/shaders/BokehShader.js

@@ -6,6 +6,8 @@
 
 const BokehShader = {
 
+	name: 'BokehShader',
+
 	defines: {
 		'DEPTH_PACKING': 1,
 		'PERSPECTIVE_CAMERA': 1,

examples/jsm/shaders/BokehShader2.js

@@ -11,6 +11,8 @@ import {
  */
 const BokehShader = {
 
+	name: 'BokehShader',
+
 	uniforms: {
 
 		'textureWidth': { value: 1.0 },
@@ -354,6 +356,8 @@ const BokehShader = {
 
 const BokehDepthShader = {
 
+	name: 'BokehDepthShader',
+
 	uniforms: {
 
 		'mNear': { value: 1.0 },

examples/jsm/shaders/BrightnessContrastShader.js

@@ -7,6 +7,8 @@
 
 const BrightnessContrastShader = {
 
+	name: 'BrightnessContrastShader',
+
 	uniforms: {
 
 		'tDiffuse': { value: null },

examples/jsm/shaders/ColorCorrectionShader.js

@@ -8,6 +8,8 @@ import {
 
 const ColorCorrectionShader = {
 
+	name: 'ColorCorrectionShader',
+
 	uniforms: {
 
 		'tDiffuse': { value: null },

examples/jsm/shaders/DOFMipMapShader.js

@@ -6,6 +6,8 @@
 
 const DOFMipMapShader = {
 
+	name: 'DOFMipMapShader',
+
 	uniforms: {
 
 		'tColor': { value: null },

examples/jsm/shaders/DepthLimitedBlurShader.js

@@ -7,11 +7,15 @@ import {
  */
 
 const DepthLimitedBlurShader = {
+
+	name: 'DepthLimitedBlurShader',
+
 	defines: {
 		'KERNEL_RADIUS': 4,
 		'DEPTH_PACKING': 1,
 		'PERSPECTIVE_CAMERA': 1
 	},
+
 	uniforms: {
 		'tDiffuse': { value: null },
 		'size': { value: new Vector2( 512, 512 ) },
@@ -22,6 +26,7 @@ const DepthLimitedBlurShader = {
 		'cameraFar': { value: 1000 },
 		'depthCutoff': { value: 10 },
 	},
+
 	vertexShader: /* glsl */`
 
 		#include <common>

examples/jsm/shaders/FXAAShader.js

@@ -12,6 +12,8 @@ import {
 
 const FXAAShader = {
 
+	name: 'FXAAShader',
+
 	uniforms: {
 
 		'tDiffuse': { value: null },

examples/jsm/shaders/FocusShader.js

@@ -6,6 +6,8 @@
 
 const FocusShader = {
 
+	name: 'FocusShader',
+
 	uniforms: {
 
 		'tDiffuse': { value: null },

examples/jsm/shaders/FreiChenShader.js

@@ -11,6 +11,8 @@ import {
 
 const FreiChenShader = {
 
+	name: 'FreiChenShader',
+
 	uniforms: {
 
 		'tDiffuse': { value: null },

examples/jsm/shaders/GodRaysShader.js

@@ -23,6 +23,8 @@ import {
 
 const GodRaysDepthMaskShader = {
 
+	name: 'GodRaysDepthMaskShader',
+
 	uniforms: {
 
 		tInput: {
@@ -74,6 +76,8 @@ const GodRaysDepthMaskShader = {
 
 const GodRaysGenerateShader = {
 
+	name: 'GodRaysGenerateShader',
+
 	uniforms: {
 
 		tInput: {
@@ -194,6 +198,8 @@ const GodRaysGenerateShader = {
 
 const GodRaysCombineShader = {
 
+	name: 'GodRaysCombineShader',
+
 	uniforms: {
 
 		tColors: {
@@ -251,6 +257,8 @@ const GodRaysCombineShader = {
 
 const GodRaysFakeSunShader = {
 
+	name: 'GodRaysFakeSunShader',
+
 	uniforms: {
 
 		vSunPositionScreenSpace: {

examples/jsm/shaders/HalftoneShader.js

@@ -7,6 +7,8 @@
 
 const HalftoneShader = {
 
+	name: 'HalftoneShader',
+
 	uniforms: {
 		'tDiffuse': { value: null },
 		'shape': { value: 1 },

examples/jsm/shaders/HorizontalTiltShiftShader.js

@@ -9,6 +9,8 @@
 
 const HorizontalTiltShiftShader = {
 
+	name: 'HorizontalTiltShiftShader',
+
 	uniforms: {
 
 		'tDiffuse': { value: null },

examples/jsm/shaders/HueSaturationShader.js

@@ -7,6 +7,8 @@
 
 const HueSaturationShader = {
 
+	name: 'HueSaturationShader',
+
 	uniforms: {
 
 		'tDiffuse': { value: null },

examples/jsm/shaders/KaleidoShader.js

@@ -10,6 +10,8 @@
 
 const KaleidoShader = {
 
+	name: 'KaleidoShader',
+
 	uniforms: {
 
 		'tDiffuse': { value: null },

examples/jsm/shaders/LuminosityHighPassShader.js

@@ -9,6 +9,8 @@ import {
 
 const LuminosityHighPassShader = {
 
+	name: 'LuminosityHighPassShader',
+
 	shaderID: 'luminosityHighPass',
 
 	uniforms: {

examples/jsm/shaders/LuminosityShader.js

@@ -5,6 +5,8 @@
 
 const LuminosityShader = {
 
+	name: 'LuminosityShader',
+
 	uniforms: {
 
 		'tDiffuse': { value: null }

examples/jsm/shaders/MMDToonShader.js

@@ -71,6 +71,8 @@ const mmd_toon_matcap_fragment = /* glsl */`
 
 const MMDToonShader = {
 
+	name: 'MMDToonShader',
+
 	defines: {
 		TOON: true,
 		MATCAP: true,

examples/jsm/shaders/MirrorShader.js

@@ -7,6 +7,8 @@
 
 const MirrorShader = {
 
+	name: 'MirrorShader',
+
 	uniforms: {
 
 		'tDiffuse': { value: null },

examples/jsm/shaders/NormalMapShader.js

@@ -9,6 +9,8 @@ import {
 
 const NormalMapShader = {
 
+	name: 'NormalMapShader',
+
 	uniforms: {
 
 		'heightMap': { value: null },

examples/jsm/shaders/OutputShader.js

@@ -1,5 +1,7 @@
 const OutputShader = {
 
+	name: 'OutputShader',
+
 	uniforms: {
 
 		'tDiffuse': { value: null },

examples/jsm/shaders/SAOShader.js

@@ -8,12 +8,16 @@ import {
  */
 
 const SAOShader = {
+
+	name: 'SAOShader',
+
 	defines: {
 		'NUM_SAMPLES': 7,
 		'NUM_RINGS': 4,
 		'DIFFUSE_TEXTURE': 0,
 		'PERSPECTIVE_CAMERA': 1
 	},
+
 	uniforms: {
 
 		'tDepth': { value: null },
@@ -34,6 +38,7 @@ const SAOShader = {
 		'kernelRadius': { value: 100.0 },
 		'randomSeed': { value: 0.0 }
 	},
+
 	vertexShader: /* glsl */`
 
 		varying vec2 vUv;

examples/jsm/shaders/SMAAShader.js

@@ -10,6 +10,8 @@ import {
 
 const SMAAEdgesShader = {
 
+	name: 'SMAAEdgesShader',
+
 	defines: {
 
 		'SMAA_THRESHOLD': '0.1'
@@ -115,6 +117,8 @@ const SMAAEdgesShader = {
 
 const SMAAWeightsShader = {
 
+	name: 'SMAAWeightsShader',
+
 	defines: {
 
 		'SMAA_MAX_SEARCH_STEPS': '8',
@@ -369,6 +373,8 @@ const SMAAWeightsShader = {
 
 const SMAABlendShader = {
 
+	name: 'SMAABlendShader',
+
 	uniforms: {
 
 		'tDiffuse': { value: null },

examples/jsm/shaders/SSAOShader.js

@@ -12,6 +12,8 @@ import {
 
 const SSAOShader = {
 
+	name: 'SSAOShader',
+
 	defines: {
 		'PERSPECTIVE_CAMERA': 1,
 		'KERNEL_SIZE': 32
@@ -183,6 +185,8 @@ const SSAOShader = {
 
 const SSAODepthShader = {
 
+	name: 'SSAODepthShader',
+
 	defines: {
 		'PERSPECTIVE_CAMERA': 1
 	},
@@ -244,6 +248,8 @@ const SSAODepthShader = {
 
 const SSAOBlurShader = {
 
+	name: 'SSAOBlurShader',
+
 	uniforms: {
 
 		'tDiffuse': { value: null },

examples/jsm/shaders/SSRShader.js

@@ -9,6 +9,8 @@ import {
 
 const SSRShader = {
 
+	name: 'SSRShader',
+
 	defines: {
 		MAX_STEP: 0,
 		PERSPECTIVE_CAMERA: true,
@@ -233,6 +235,8 @@ const SSRShader = {
 
 const SSRDepthShader = {
 
+	name: 'SSRDepthShader',
+
 	defines: {
 		'PERSPECTIVE_CAMERA': 1
 	},
@@ -300,6 +304,8 @@ const SSRDepthShader = {
 
 const SSRBlurShader = {
 
+	name: 'SSRBlurShader',
+
 	uniforms: {
 
 		'tDiffuse': { value: null },

examples/jsm/shaders/SobelOperatorShader.js

@@ -11,6 +11,8 @@ import {
 
 const SobelOperatorShader = {
 
+	name: 'SobelOperatorShader',
+
 	uniforms: {
 
 		'tDiffuse': { value: null },

examples/jsm/shaders/SubsurfaceScatteringShader.js

@@ -24,6 +24,8 @@ const meshphong_frag_body = ShaderChunk[ 'meshphong_frag' ].slice( ShaderChunk[
 
 const SubsurfaceScatteringShader = {
 
+	name: 'SubsurfaceScatteringShader',
+
 	uniforms: UniformsUtils.merge( [
 		ShaderLib[ 'phong' ].uniforms,
 		{

examples/jsm/shaders/TechnicolorShader.js

@@ -7,6 +7,8 @@
 
 const TechnicolorShader = {
 
+	name: 'TechnicolorShader',
+
 	uniforms: {
 
 		'tDiffuse': { value: null }

examples/jsm/shaders/TriangleBlurShader.js

@@ -14,6 +14,8 @@ import {
 
 const TriangleBlurShader = {
 
+	name: 'TriangleBlurShader',
+
 	uniforms: {
 
 		'texture': { value: null },

examples/jsm/shaders/UnpackDepthRGBAShader.js

@@ -5,6 +5,8 @@
 
 const UnpackDepthRGBAShader = {
 
+	name: 'UnpackDepthRGBAShader',
+
 	uniforms: {
 
 		'tDiffuse': { value: null },

examples/jsm/shaders/VelocityShader.js

@@ -10,6 +10,8 @@ import {
 
 const VelocityShader = {
 
+	name: 'VelocityShader',
+
 	uniforms: UniformsUtils.merge( [
 		UniformsLib.common,
 		UniformsLib.displacementmap,

examples/jsm/shaders/VerticalTiltShiftShader.js

@@ -9,6 +9,8 @@
 
 const VerticalTiltShiftShader = {
 
+	name: 'VerticalTiltShiftShader',
+
 	uniforms: {
 
 		'tDiffuse': { value: null },

examples/jsm/shaders/WaterRefractionShader.js

@@ -1,5 +1,7 @@
 const WaterRefractionShader = {
 
+	name: 'WaterRefractionShader',
+
 	uniforms: {
 
 		'color': {

examples/webgl2_multiple_rendertargets.html

@@ -193,6 +193,7 @@
 				scene.add( new THREE.Mesh(
 					new THREE.TorusKnotGeometry( 1, 0.3, 128, 32 ),
 					new THREE.RawShaderMaterial( {
+						name: 'G-Buffer Shader',
 						vertexShader: document.querySelector( '#gbuffer-vert' ).textContent.trim(),
 						fragmentShader: document.querySelector( '#gbuffer-frag' ).textContent.trim(),
 						uniforms: {
@@ -211,6 +212,7 @@
 				postScene.add( new THREE.Mesh(
 					new THREE.PlaneGeometry( 2, 2 ),
 					new THREE.RawShaderMaterial( {
+						name: 'Post-FX Shader',
 						vertexShader: document.querySelector( '#render-vert' ).textContent.trim(),
 						fragmentShader: document.querySelector( '#render-frag' ).textContent.trim(),
 						uniforms: {

examples/webgl_materials_cubemap_render_to_mipmaps.html

@@ -33,6 +33,9 @@
 			let camera, scene, renderer;
 
 			const CubemapFilterShader = {
+
+				name: 'CubemapFilterShader',
+
 				uniforms: {
 					cubeTexture: { value: null },
 					mipIndex: { value: 0 },
@@ -126,7 +129,7 @@
 				const geometry = new THREE.BoxGeometry( 5, 5, 5 );
 
 				const material = new THREE.ShaderMaterial( {
-					name: 'FilterCubemap',
+					name: CubemapFilterShader.name,
 					uniforms: THREE.UniformsUtils.clone( CubemapFilterShader.uniforms ),
 					vertexShader: CubemapFilterShader.vertexShader,
 					fragmentShader: CubemapFilterShader.fragmentShader,