1. three.js 中 meshbasic.glsl 文件中的片源着色器的主函数解析

他的具体代码如下

void main() {
	#include 
	#include 
	#include 
	#if defined ( USE_ENVMAP ) || defined ( USE_SKINNING )
		#include 
		#include 
		#include 
		#include 
		#include 
	#endif
	#include   // 对顶点数据进行处理，将 position 值，赋值给 vPosition 这个变量
	#include  // 对顶点数据进行变形的处理
	#include  // 对骨骼数据进行处理。
	#include  // 顶点数据进行，投影转换，在这里，物体的位置就已经定下来了，下面的都是，对顶点数据处理，给片源着色器来使用
	#include  // 对数深度缓冲区，来解决两个面，很近的时候，分不清那个是前面，那个是后面
	#include  // 裁剪平面
	#include 
	#include  // 环境纹理，顶点
	#include 
}
`;
export const fragment = /* glsl */`
void main() {
	#include  // 裁剪空间
	vec4 diffuseColor = vec4( diffuse, opacity ); // 漫反射
	#include  // 对数缓冲区的计算，片源着色器的
	#include 
	#include 
	#include 
	#include 
	#include 
	#include 
	ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) );
	// accumulation (baked indirect lighting only)
	#ifdef USE_LIGHTMAP
		vec4 lightMapTexel = texture2D( lightMap, vLightMapUv );
		reflectedLight.indirectDiffuse += lightMapTexel.rgb * lightMapIntensity * RECIPROCAL_PI;
	#else
		reflectedLight.indirectDiffuse += vec3( 1.0 );
	#endif
	// modulation
	#include 
	reflectedLight.indirectDiffuse *= diffuseColor.rgb;
	vec3 outgoingLight = reflectedLight.indirectDiffuse;
	#include 
	#include 
	#include 
	#include 
	#include 
	#include 
	#include 
}
`;
 
裁剪空间, 就是将不要的空间外的片源删除掉
 
#include  // 裁剪空间
 
漫反射颜色
 
vec4 diffuseColor = vec4( diffuse, opacity ); // 漫反射
 
对片源进行对数缓冲区计算
 
#include  // 对数缓冲区的计算，片源着色器的
 
#if defined( USE_LOGDEPTHBUF ) && defined( USE_LOGDEPTHBUF_EXT )
	gl_FragDepthEXT = vIsPerspective == 0.0 ? gl_FragCoord.z : log2( vFragDepth ) * logDepthBufFC * 0.5;
	// vIsPerspective 表示当前相机是不是透视投影相机
	// 如果是就返回 log2( vFragDepth ) * logDepthBufFC * 0.5
	// 如果不是 gl_FragCoord.z
#endif
 
纹理采样
 
#include 
 
#ifdef USE_MAP
	vec4 sampledDiffuseColor = texture2D( map, vMapUv );
	// 进行纹理采样, sampledDiffuseColor就是等到的结果
	#ifdef DECODE_VIDEO_TEXTURE
		// 如果使用的是视频纹理就，进行这样的操作
		// use inline sRGB decode until browsers properly support SRGB8_APLHA8 with video textures
		sampledDiffuseColor = vec4( mix( pow( sampledDiffuseColor.rgb * 0.9478672986 + vec3( 0.0521327014 ), vec3( 2.4 ) ), sampledDiffuseColor.rgb * 0.0773993808, vec3( lessThanEqual( sampledDiffuseColor.rgb, vec3( 0.04045 ) ) ) ), sampledDiffuseColor.w );
	
	#endif
	// 将得到的纹理颜色，跟漫反射的颜色，进行混合。
	diffuseColor *= sampledDiffuseColor;
#endif
`;
 
片源顶点颜色处理
 
#include 
 
export default /* glsl */`
#if defined( USE_COLOR_ALPHA )
	// 如果使用是顶点颜色，有透明度的
	diffuseColor *= vColor;
#elif defined( USE_COLOR )
	// 如果使用是顶点颜色，没有透明度的
	diffuseColor.rgb *= vColor;
#endif
`;
 
透明纹理贴图
 
#include 
 
export default /* glsl */`
#ifdef USE_ALPHAMAP
	diffuseColor.a *= texture2D( alphaMap, vAlphaMapUv ).g;
#endif
`;
 
他会对alphaMap 纹理进行，采样然后获取他的一个 g 值，来表示一个 强度；
在 alphatest 纹理进行处理
 
export default /* glsl */`
#ifdef USE_ALPHATEST
	if ( diffuseColor.a < alphaTest ) discard;
#endif
`;
 
如果这个强度值，小于 alphaTest，那么这个就会把删除掉
 
高光纹理贴图
 
export default /* glsl */`
float specularStrength;
#ifdef USE_SPECULARMAP
	vec4 texelSpecular = texture2D( specularMap, vSpecularMapUv );
	specularStrength = texelSpecular.r;
#else
	specularStrength = 1.0;
#endif
`;
 
也是对高光纹理贴图进行采样，然后再获取一个值，作为高光的强度，没有使用的话，默认就是 1的强度