MeshPhongMaterial: Add support for scene.environment IBL. (#32795)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: mrdoob

examples/screenshots/webxr_vr_sandbox.jpg

@@ -78,7 +78,7 @@
 				scene.add( torus );
 
 				const cylinderGeometry = new THREE.CylinderGeometry( 1, 1, 0.1, 50 );
-				const cylinderMaterial = new THREE.MeshStandardMaterial();
+				const cylinderMaterial = new THREE.MeshLambertMaterial();
 				const cylinder = new THREE.Mesh( cylinderGeometry, cylinderMaterial );
 				cylinder.position.z = - 2;
 				scene.add( cylinder );
@@ -96,7 +96,7 @@
 				scene.add( reflector );
 
 				const frameGeometry = new THREE.BoxGeometry( 2.1, 2.1, 0.1 );
-				const frameMaterial = new THREE.MeshPhongMaterial();
+				const frameMaterial = new THREE.MeshLambertMaterial( { color: 0x888888 } );
 				const frame = new THREE.Mesh( frameGeometry, frameMaterial );
 				frame.position.z = - 0.07;
 				reflector.add( frame );

examples/webxr_vr_sandbox.html

@@ -284,6 +284,14 @@ class MeshPhongMaterial extends Material {
 		 */
 		this.reflectivity = 1;
 
+		/**
+		 * Scales the effect of the environment map by multiplying its color.
+		 *
+		 * @type {number}
+		 * @default 1
+		 */
+		this.envMapIntensity = 1.0;
+
 		/**
 		 * The index of refraction (IOR) of air (approximately 1) divided by the
 		 * index of refraction of the material. It is used with environment mapping
@@ -392,6 +400,7 @@ class MeshPhongMaterial extends Material {
 		this.envMapRotation.copy( source.envMapRotation );
 		this.combine = source.combine;
 		this.reflectivity = source.reflectivity;
+		this.envMapIntensity = source.envMapIntensity;
 		this.refractionRatio = source.refractionRatio;
 
 		this.wireframe = source.wireframe;

src/materials/MeshPhongMaterial.js

@@ -2132,10 +2132,10 @@ class WebGLRenderer {
 
 			// always update environment and fog - changing these trigger an getProgram call, but it's possible that the program doesn't change
 
-			materialProperties.environment = ( material.isMeshStandardMaterial || material.isMeshLambertMaterial ) ? scene.environment : null;
+			materialProperties.environment = ( material.isMeshStandardMaterial || material.isMeshLambertMaterial || material.isMeshPhongMaterial ) ? scene.environment : null;
 			materialProperties.fog = scene.fog;
 
-			const usePMREM = material.isMeshStandardMaterial || ( material.isMeshLambertMaterial && ! material.envMap );
+			const usePMREM = material.isMeshStandardMaterial || ( material.isMeshLambertMaterial && ! material.envMap ) || ( material.isMeshPhongMaterial && ! material.envMap );
 			materialProperties.envMap = environments.get( material.envMap || materialProperties.environment, usePMREM );
 			materialProperties.envMapRotation = ( materialProperties.environment !== null && material.envMap === null ) ? scene.environmentRotation : material.envMapRotation;
 
@@ -2267,9 +2267,9 @@ class WebGLRenderer {
 			textures.resetTextureUnits();
 
 			const fog = scene.fog;
-			const environment = ( material.isMeshStandardMaterial || material.isMeshLambertMaterial ) ? scene.environment : null;
+			const environment = ( material.isMeshStandardMaterial || material.isMeshLambertMaterial || material.isMeshPhongMaterial ) ? scene.environment : null;
 			const colorSpace = ( _currentRenderTarget === null ) ? _this.outputColorSpace : ( _currentRenderTarget.isXRRenderTarget === true ? _currentRenderTarget.texture.colorSpace : LinearSRGBColorSpace );
-			const usePMREM = material.isMeshStandardMaterial || ( material.isMeshLambertMaterial && ! material.envMap );
+			const usePMREM = material.isMeshStandardMaterial || ( material.isMeshLambertMaterial && ! material.envMap ) || ( material.isMeshPhongMaterial && ! material.envMap );
 			const envMap = environments.get( material.envMap || environment, usePMREM );
 			const vertexAlphas = material.vertexColors === true && !! geometry.attributes.color && geometry.attributes.color.itemSize === 4;
 			const vertexTangents = !! geometry.attributes.tangent && ( !! material.normalMap || material.anisotropy > 0 );
@@ -2595,7 +2595,7 @@ class WebGLRenderer {
 
 			}
 
-			if ( ( material.isMeshStandardMaterial || material.isMeshLambertMaterial ) && material.envMap === null && scene.environment !== null ) {
+			if ( ( material.isMeshStandardMaterial || material.isMeshLambertMaterial || material.isMeshPhongMaterial ) && material.envMap === null && scene.environment !== null ) {
 
 				m_uniforms.envMapIntensity.value = scene.environmentIntensity;
 

src/renderers/WebGLRenderer.js

@@ -1,7 +1,7 @@
 export default /* glsl */`
 #if defined( RE_IndirectDiffuse )
 
-	#ifdef LAMBERT
+	#if defined( LAMBERT ) || defined( PHONG )
 
 		irradiance += iblIrradiance;
 

src/renderers/shaders/ShaderChunk/lights_fragment_end.glsl.js

@@ -12,7 +12,7 @@ export default /* glsl */`
 
 	#if defined( USE_ENVMAP ) && defined( ENVMAP_TYPE_CUBE_UV )
 
-		#if defined( STANDARD ) || defined( LAMBERT )
+		#if defined( STANDARD ) || defined( LAMBERT ) || defined( PHONG )
 
 			iblIrradiance += getIBLIrradiance( geometryNormal );
 

src/renderers/shaders/ShaderChunk/lights_fragment_maps.glsl.js

@@ -66,7 +66,8 @@ const ShaderLib = {
 			{
 				emissive: { value: /*@__PURE__*/ new Color( 0x000000 ) },
 				specular: { value: /*@__PURE__*/ new Color( 0x111111 ) },
-				shininess: { value: 30 }
+				shininess: { value: 30 },
+				envMapIntensity: { value: 1 }
 			}
 		] ),
 

src/renderers/shaders/ShaderLib.js

@@ -70,8 +70,10 @@ uniform float opacity;
 #include <aomap_pars_fragment>
 #include <lightmap_pars_fragment>
 #include <emissivemap_pars_fragment>
+#include <cube_uv_reflection_fragment>
 #include <envmap_common_pars_fragment>
 #include <envmap_pars_fragment>
+#include <envmap_physical_pars_fragment>
 #include <fog_pars_fragment>
 #include <bsdfs>
 #include <lights_pars_begin>

src/renderers/shaders/ShaderLib/meshphong.glsl.js

@@ -63,6 +63,12 @@ function WebGLMaterials( renderer, properties ) {
 			refreshUniformsCommon( uniforms, material );
 			refreshUniformsPhong( uniforms, material );
 
+			if ( material.envMap ) {
+
+				uniforms.envMapIntensity.value = material.envMapIntensity;
+
+			}
+
 		} else if ( material.isMeshStandardMaterial ) {
 
 			refreshUniformsCommon( uniforms, material );

src/renderers/webgl/WebGLMaterials.js

@@ -51,9 +51,9 @@ function WebGLPrograms( renderer, environments, extensions, capabilities, bindin
 
 		const fog = scene.fog;
 		const geometry = object.geometry;
-		const environment = ( material.isMeshStandardMaterial || material.isMeshLambertMaterial ) ? scene.environment : null;
+		const environment = ( material.isMeshStandardMaterial || material.isMeshLambertMaterial || material.isMeshPhongMaterial ) ? scene.environment : null;
 
-		const usePMREM = material.isMeshStandardMaterial || ( material.isMeshLambertMaterial && ! material.envMap );
+		const usePMREM = material.isMeshStandardMaterial || ( material.isMeshLambertMaterial && ! material.envMap ) || ( material.isMeshPhongMaterial && ! material.envMap );
 		const envMap = environments.get( material.envMap || environment, usePMREM );
 		const envMapCubeUVHeight = ( !! envMap ) && ( envMap.mapping === CubeUVReflectionMapping ) ? envMap.image.height : null;