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

原创已于 2022-01-28 14:10:39 修改 · 500 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#贴图 #unity #游戏引擎

于 2021-08-19 17:28:23 首次发布

THREE 专栏收录该内容

18 篇文章

订阅专栏

这篇博客探讨了WebGL的原生实现，特别是关于立方体贴图和环境映射的概念。同时，它还介绍了Three.js库中用于处理间接漫反射和间接高光的片段着色器代码，涉及到Phong和PBR材质的环境映射应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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中使用

在这里插入图片描述