效果展示
效果分析
要实现如上图中星际穿越的效果，总的来说需要分三步走，步骤如下：
- 实现一个拥有无数星星的星空
- 让这些星星运动起来，实现人物视角向前移动的效果
- 星星运动加速，实现星星变为流星的效果
第一步：
首先我们需要将一个星星显示到屏幕上，然后直接循环即可。那么如何显示一个类似星星的形状呢？这里我们需要用到如下一张纹理图：
通过这个纹理图描绘出星星的形状。假设整个星空中最多存在10000颗星星，代码如下：
const fieldRadius = 20;
const fieldZLength = 40;
const corner = [], colorMix = [], geoIndex = [], posArr = [], uvArr = [];
const geo = new THREE.BufferGeometry(); //使用BufferGeometry性能比较高
//循环10000遍，即生成10000个星星的数据
for (let i = 0; i < 10000; i++) {
//设整个星空的区域范围在由[-fieldRadius, -fieldRadius, -fieldZLength/2]和[fieldRadius, fieldRadius, fieldZLength/2]两个点组成的Box范围内
const [ x, y, z ] = [
THREE.Math.mapLinear(Math.random(), 0, 1, -fieldRadius, fieldRadius),
THREE.Math.mapLinear(Math.random(), 0, 1, -fieldRadius, fieldRadius),
THREE.Math.mapLinear(Math.random(), 0, 1, -fieldZLength/2, fieldZLength/2)
]; //在星空范围内随机生成星星的初始坐标
/**
* webgl中纹理图片需要通过两个三角面组成的矩形来显示
* 这里需要将矩形的4个顶点坐标传入shader
* 暂时使用相同值，后面到顶点着色器中处理顶点的偏移
*/
const mix = Math.random();
for (let j = 0; j < 4; j++) {
posArr.push(x, y, z); //posArr用来存放顶点数据
corner.push(j); //corner表示顶点的索引值，顶点着色器中会用到
colorMix.push(mix); //colorMix主要用来产生随机的颜色
}
//uvArr用来存放顶点坐标对应的纹理坐标
uvArr.push(0, 1);
uvArr.push(1, 1);
uvArr.push(0, 0);
uvArr.push(1, 0);
const index = 4 * i;
//geoIndex存放所有三角面的顶点索引
geoIndex.push(index, index + 1, index + 2);
geoIndex.push(index + 1, index + 3, index + 2);
}
//以下将生成的顶点数据传到顶点着色器
geo.setAttribute("position", new THREE.BufferAttribute(new Float32Array(posArr), 3));
geo.setAttribute("uv", new THREE.BufferAttribute(new Float32Array(uvArr), 2));
geo.setAttribute("corner", new THREE.BufferAttribute(new Float32Array(corner), 1));
geo.setAttribute("colorMix", new THREE.BufferAttribute(new Float32Array(colorMix), 1));
geo.setIndex(geoIndex); //设置所有三角形顶点数据
geo.needsUpdate = true;
//创建shader材质
const material = new THREE.ShaderMaterial({
vertexShader: VS,
fragmentShader: FS,
uniforms: {
u_texture: { value: loader.load('./res/particle-sprite.png') }, //u_texture为上图所示的纹理图片
color1: { value: new THREE.Color(0x3068FF) }, //color1表示星星的颜色范围下限
color2: { value: new THREE.Color(0xF34F94) }, //color2表示星星的颜色范围上限
zMin: { value: -fieldZLength/2 }, //zMin是星空范围的最小z值
zMax: { value: fieldZLength }, //zMax是星空范围的最大z值
},
transparent: true //注意，这里transparent一定不能省略，否则无法显示透明度的变化
});
//通过geo网格和material材质创建mesh对象
const mesh = new THREE.Mesh(geo, material);
顶点着色器代码如下：
attribute float corner;
attribute float colorMix;
varying vec2 vUv;
varying vec3 vColor;
uniform float zMin;
uniform float zMax;
uniform vec3 color1;
uniform vec3 color2;
void main() {
vUv = uv;
vec3 pos = position;
vec4 worldPos = modelMatrix * vec4(pos, 1.0);
vec4 viewPosition = viewMatrix * worldPos;
/**
*由于我们传进来的4个顶点坐标为相同的值，这里需要对这4个顶点坐标做处理，使其可以组成一个矩形
*/
float offset = 0.1;
if (corner == 0.0) {
//第一个顶点，在矩形的左下方
viewPosition.xy += vec2(-offset, -offset);
}
if (corner == 1.0) {
//第二个顶点，在矩形的右下方
viewPosition.xy += vec2(offset, -offset);
}
if (corner == 2.0) {
//第三个顶点，在矩形的左上方
viewPosition.xy += vec2(-offset, offset);
}
if (corner == 3.0) {
//第四个顶点，在矩形的右上方
viewPosition.xy += vec2(offset, offset);
}
//通过我们js中随机产生的colorMix值，对color1和color2混合，传入片元中使用
vColor = mix(color1, color2, colorMix);
gl_Position = projectionMatrix * viewPosition;
`;
片元着色器代码如下：
varying vec2 vUv;
varying vec3 vColor;
uniform sampler2D u_texture;
void main() {
//通过插值后的vUv读取u_texture中的像素
vec4 texel = texture2D( u_texture, vUv );
//以像素的r值作为alpha值，使得形状与纹理形状一致
float alpha = texel.r;
//将混合后的颜色vColor和白色混合，得到星星最终的颜色
//以texel.r值作为混合因子，使得颜色越深的地方，更偏向白色
vec3 color = mix(vColor, vec3(1.0), texel.r);
gl_FragColor = vec4(color, alpha);
}
通过以上代码，即完成了第一步，我们得到了一个静态的星空，效果如下：
第二步：
现在我们得到了一个静态星空，下一步就要让这些星星运动起来，实现星星向后推移的效果，并且能够不断循环产生新的星星。
为了能够产生运动，我们需要添加一个不断变化的值u_time，代码如下：
const material = new THREE.ShaderMaterial({
vertexShader: VS,
fragmentShader: FS,
uniforms: {
···
u_time: { value: 0 },
},
···
});
···
function render() {
···
//在render函数中对u_time值逐帧增加0.01，使其不断变化
material.uniforms.u_time.value += 0.01;
}
然后我们在顶点着色器中接收u_time值，代码如下：
uniform float u_time;
void main() {
···
vec3 pos = position;
//将顶点坐标z加上u_time
pos.z += u_time;
//处理边界问题，当pos.z大于zMax时，将其重新放到zMin处，实现星星循环滚动效果
pos.z = mod(pos.z, zMax) + zMin;
}
通过以上简单的几行代码，我们就实现了让星星动起来的效果，如下图：
第三步：
在星星动起来之后，我们下一步要做的就是让星星呈流星状，且加速逃离的效果。
为了让星星呈流星状态，我们需要在顶点着色器中处理星星的纹理矩形的顶点坐标，代码如下：
//这里引入一个rotate函数，用于对二维矢量做旋转的操作
vec2 rotate(vec2 v, float a) {
float s = sin(a);
float c = cos(a);
mat2 m = mat2(c, -s, s, c);
return m * v;
}
void main() {
···
vec4 worldPos = modelMatrix * vec4(pos, 1.0);
vec4 worldOrigin = worldPos;
/**
* 这里我们通过将矩形的左边两个顶点的z值加大，右边两个顶点的z值减小来达到拉伸矩形的效果，从而实现流星效果
*/
float rayLength = 4.0; //定义偏移的长度
if (corner == 3.0 || corner == 1.0) {
//corner为1和3，表示右边两个顶点
worldPos.z -= rayLength;
}
if (corner == 0.0 || corner == 2.0) {
//corner为0和2表示左侧的两个顶点
worldPos.z += rayLength;
}
/**
* 由于矩形被拉伸，其正对摄像机的那一面会扭曲，无法正确显示流星的形状
* 这里我们根据worldOrigin的xy值求出正确状态所需要偏移的角度angle
*/
float angle = atan(-worldOrigin.y, -worldOrigin.x);
float offset = 0.1;
vec4 viewPosition = viewMatrix * worldPos;
//通过对每个顶点进行rotate处理得到正确的顶点偏移坐标
if (corner == 0.0) {
viewPosition.xy += rotate(vec2(-offset, -offset), angle);
}
if (corner == 1.0) {
viewPosition.xy += rotate(vec2(offset, -offset), angle);
}
if (corner == 2.0) {
viewPosition.xy += rotate(vec2(-offset, offset), angle);
}
if (corner == 3.0) {
viewPosition.xy += rotate(vec2(offset, offset), angle);
}
···
}
通过上面的操作，已经让星星变成流星状了，接下来我们只需加快整体的移动速度即可，代码如下：
function render() {
···
// 这里我们对u_time的增速加倍，实现加速效果
material.uniforms.u_time.value += 0.01 * 60;
}
至此，我们完成了所有部分，最终效果如下：
3469
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
