1. three.js 中ShaderChunk的, common.glsl 介绍

在three.js中，我们可以编写底层的shader代码，是通过 THREE.ShaderMaterial 来进行的。
但是three.js他也通过了一些 shader 代码片段，哎我们可以通过引入这些 shader代码片段，在自己的 THREE.ShaderMaterial中哈哈哈

现在我们讲一下，这个common.glsl 文件是干嘛的。
common.glsl 文件他主要是存放了一些常见变量，函数的文件。
例如

#define PI 3.141592653589793
#define PI2 6.283185307179586
#define PI_HALF 1.5707963267948966
#define RECIPROCAL_PI 0.3183098861837907
#define RECIPROCAL_PI2 0.15915494309189535
#define EPSILON 1e-6

从这可以看出来，是什么，他声明了 PI, PI2, PI_HALF, RECIPROCAL_PI,…
这个变量的含义就是，圆周率，2Π，1/2 Π …

还有，他是写了一个随机函数

highp float rand( const in vec2 uv ) {const highp float a = 12.9898, b = 78.233, c = 43758.5453;highp float dt = dot( uv.xy, vec2( a,b ) ), sn = mod( dt, PI );return fract( sin( sn ) * c );}

入射光的结构体

struct IncidentLight {vec3 color; // 入射光的颜色vec3 direction; // bool visible;
};
// 入射光的结构体

矩阵的转置

mat3 transposeMat3( const in mat3 m ) {mat3 tmp;tmp[ 0 ] = vec3( m[ 0 ].x, m[ 1 ].x, m[ 2 ].x );tmp[ 1 ] = vec3( m[ 0 ].y, m[ 1 ].y, m[ 2 ].y );tmp[ 2 ] = vec3( m[ 0 ].z, m[ 1 ].z, m[ 2 ].z );return tmp;}

将 rgb 的颜色转换成亮度

float luminance( const in vec3 rgb ) {// assumes rgb is in linear color space with sRGB primaries and D65 white point// 假设rgb在具有sRGB原色和D65白点的线性色彩空间中const vec3 weights = vec3( 0.2126729, 0.7151522, 0.0721750 );return dot( weights, rgb );}

判断矩阵是不是一个透视投影矩阵

bool isPerspectiveMatrix( mat4 m ) {return m[ 2 ][ 3 ] == - 1.0;}

将球体 三维坐标 映射到 二维平面上

vec2 equirectUv( in vec3 dir ) {// 在glsl中，equirectUv的作用是将一个dir映射到一个二维纹理坐标上// dir is assumed to be unit lengthfloat u = atan( dir.z, dir.x ) * RECIPROCAL_PI2 + 0.5;float v = asin( clamp( dir.y, - 1.0, 1.0 ) ) * RECIPROCAL_PI + 0.5;return vec2( u, v );}