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 length
float 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 );
}