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

他的具体代码如下

void main() {#include <uv_vertex>#include <color_vertex>#include <morphcolor_vertex>#if defined ( USE_ENVMAP ) || defined ( USE_SKINNING )#include <beginnormal_vertex>#include <morphnormal_vertex>#include <skinbase_vertex>#include <skinnormal_vertex>#include <defaultnormal_vertex>#endif#include <begin_vertex>  // 对顶点数据进行处理，将 position 值，赋值给 vPosition 这个变量#include <morphtarget_vertex> // 对顶点数据进行变形的处理#include <skinning_vertex> // 对骨骼数据进行处理。#include <project_vertex> // 顶点数据进行，投影转换，在这里，物体的位置就已经定下来了，下面的都是，对顶点数据处理，给片源着色器来使用#include <logdepthbuf_vertex> // 对数深度缓冲区，来解决两个面，很近的时候，分不清那个是前面，那个是后面#include <clipping_planes_vertex> // 裁剪平面#include <worldpos_vertex>#include <envmap_vertex> // 环境纹理，顶点#include <fog_vertex>}
`;export const fragment = /* glsl */`
void main() {#include <clipping_planes_fragment> // 裁剪空间vec4 diffuseColor = vec4( diffuse, opacity ); // 漫反射#include <logdepthbuf_fragment> // 对数缓冲区的计算，片源着色器的#include <map_fragment>#include <color_fragment>#include <alphamap_fragment>#include <alphatest_fragment>#include <alphahash_fragment>#include <specularmap_fragment>ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) );// accumulation (baked indirect lighting only)#ifdef USE_LIGHTMAPvec4 lightMapTexel = texture2D( lightMap, vLightMapUv );reflectedLight.indirectDiffuse += lightMapTexel.rgb * lightMapIntensity * RECIPROCAL_PI;#elsereflectedLight.indirectDiffuse += vec3( 1.0 );#endif// modulation#include <aomap_fragment>reflectedLight.indirectDiffuse *= diffuseColor.rgb;vec3 outgoingLight = reflectedLight.indirectDiffuse;#include <envmap_fragment>#include <opaque_fragment>#include <tonemapping_fragment>#include <colorspace_fragment>#include <fog_fragment>#include <premultiplied_alpha_fragment>#include <dithering_fragment>}
`;

裁剪空间, 就是将不要的空间外的片源删除掉

#include <clipping_planes_fragment> // 裁剪空间

漫反射颜色

vec4 diffuseColor = vec4( diffuse, opacity ); // 漫反射

对片源进行对数缓冲区计算

#include <logdepthbuf_fragment> // 对数缓冲区的计算，片源着色器的

#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 <map_fragment>

#ifdef USE_MAPvec4 sampledDiffuseColor = texture2D( map, vMapUv );// 进行纹理采样, sampledDiffuseColor就是等到的结果#ifdef DECODE_VIDEO_TEXTURE// 如果使用的是视频纹理就，进行这样的操作// use inline sRGB decode until browsers properly support SRGB8_APLHA8 with video texturessampledDiffuseColor = 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 <color_fragment>

export default /* glsl */`
#if defined( USE_COLOR_ALPHA )// 如果使用是顶点颜色，有透明度的diffuseColor *= vColor;#elif defined( USE_COLOR )// 如果使用是顶点颜色，没有透明度的diffuseColor.rgb *= vColor;#endif
`;

透明纹理贴图

#include <alphamap_fragment>

export default /* glsl */`
#ifdef USE_ALPHAMAPdiffuseColor.a *= texture2D( alphaMap, vAlphaMapUv ).g;#endif
`;

他会对alphaMap 纹理进行，采样然后获取他的一个 g 值，来表示一个 强度；
在 alphatest 纹理进行处理

export default /* glsl */`
#ifdef USE_ALPHATESTif ( diffuseColor.a < alphaTest ) discard;#endif
`;

如果这个强度值，小于 alphaTest，那么这个就会把删除掉

高光纹理贴图

export default /* glsl */`
float specularStrength;#ifdef USE_SPECULARMAPvec4 texelSpecular = texture2D( specularMap, vSpecularMapUv );specularStrength = texelSpecular.r;#elsespecularStrength = 1.0;#endif
`;

也是对高光纹理贴图进行采样，然后再获取一个值，作为高光的强度，没有使用的话，默认就是 1的强度