【PBR】THREE中环境贴图实现原理

1.webgl原生
https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-cube-maps.html
https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-environment-maps.html

precision highp float;
 
// 从顶点着色器传入的。
varying vec3 v_worldPosition;
varying vec3 v_worldNormal;
 
// 纹理。
uniform samplerCube u_texture;
 
// 相机位置。
uniform vec3 u_worldCameraPosition;
 
void main() {
  vec3 worldNormal = normalize(v_worldNormal);
  vec3 eyeToSurfaceDir = normalize(v_worldPosition - u_worldCameraPosition);
  vec3 direction = reflect(eyeToSurfaceDir,worldNormal);
 
  gl_FragColor = textureCube(u_texture, direction);
}

2.three

lights_fragment_maps.glsl.js
这里面主要是three里面phong和pbr两个材质用到，涉及间接漫反射和间接高光的时候才执行

export default /* glsl */`
#if defined( RE_IndirectDiffuse )

	#ifdef USE_LIGHTMAP

		vec4 lightMapTexel= texture2D( lightMap, vUv2 );
		vec3 lightMapIrradiance = lightMapTexelToLinear( lightMapTexel ).rgb * lightMapIntensity;

		#ifndef PHYSICALLY_CORRECT_LIGHTS

			lightMapIrradiance *= PI; // factor of PI should not be present; included here to prevent breakage

		#endif

		irradiance += lightMapIrradiance;

	#endif

	#if defined( USE_ENVMAP ) && defined( STANDARD ) && defined( ENVMAP_TYPE_CUBE_UV )

		iblIrradiance += getLightProbeIndirectIrradiance( /*lightProbe,*/ geometry, maxMipLevel );

	#endif

#endif

#if defined( USE_ENVMAP ) && defined( RE_IndirectSpecular )

	radiance += getLightProbeIndirectRadiance( /*specularLightProbe,*/ geometry.viewDir, geometry.normal, material.specularRoughness, maxMipLevel );

	#ifdef CLEARCOAT

		clearcoatRadiance += getLightProbeIndirectRadiance( /*specularLightProbe,*/ geometry.viewDir, geometry.clearcoatNormal, material.clearcoatRoughness, maxMipLevel );

	#endif

#endif
`;

计算出irradiance（用于间接漫反射）、iblIrradiance（用于间接高光）后

在light_fragment_end.glsl中使用