Three.js 数字水纹效果着色器
提示词
创建一个数字水纹效果着色器,包含像素化效果、数字水波、数据流、数字噪波和故障效果,支持像素大小和故障强度调节。
效果描述
这是一个结合数字美学和水波效果着色器,通过像素化处理和多层效果叠加创造赛博朋克风格的数字水纹效果。
效果特性
- 像素化效果:floor函数实现的像素化处理
- 数字水波:多层sin/cos叠加的水波效果
- 数据流效果:垂直流动的数据流
- 数字噪波:高频数字噪波
- 故障效果:数字故障干扰效果
- 二进制码:二进制码流动效果
参数调节
| 参数 |
默认值 |
范围 |
说明 |
| 像素大小 |
0.5 |
0.1-1.5 |
像素化的程度 |
| 数据流强度 |
0.8 |
0.1-1.5 |
数据流的可见度 |
| 故障效果 |
0.4 |
0.1-1.0 |
故障干扰的强度 |
| 数字颜色 |
#00ff88 |
- |
数字效果的基础颜色 |
核心代码解析
像素化效果
vec2 pixelate(vec2 uv, float pixelSize) {
vec2 pixelUV = floor(uv * pixelSize * 100.0) / (pixelSize * 100.0);
return pixelUV;
}
数字水波效果
float digitalWave(vec2 uv, float time) {
float wave = 0.0;
for (int i = 0; i < 3; i++) {
float layer = float(i) * 0.2;
float frequency = 6.0 + float(i) * 2.0;
wave += sin(uv.x * frequency + time * 2.0 + layer) *
cos(uv.y * frequency + time * 1.5 + layer) * 0.15;
}
return wave;
}
数据流效果
float dataStreamEffect(vec2 uv, float time) {
float stream = 0.0;
for (int i = 0; i < 4; i++) {
float speed = 2.0 + float(i) * 0.5;
stream += sin(uv.y * 50.0 - time * speed * 5.0) * 0.05;
}
return stream * dataStream;
}
故障效果
float glitchEffectFunc(vec2 uv, float time, float glitch) {
float glitchValue = 0.0;
for (int i = 0; i < 2; i++) {
float offset = float(i) * 0.5;
glitchValue += sin(uv.x * 25.0 + time * 4.0 + offset) *
cos(uv.y * 20.0 + time * 3.0 + offset) * 0.08;
}
return glitchValue * glitch;
}
uniforms: {
time: { value: 0 },
resolution: { value: new THREE.Vector2(_width, _height) },
pixelSize: { value: 0.5 },
dataStream: { value: 0.8 },
glitchEffect: { value: 0.4 },
digitalColor: { value: new THREE.Color(0x00ff88) }
}
技术亮点
- 像素化处理:floor函数实现离散化效果
- 多层效果叠加:5种不同效果组合
- 数据流动:垂直方向的数据流效果
- 绿色主题:#00ff88营造数字氛围
- 发光效果:smoothstep创造发光边缘
调试技巧
- 像素大小:影响整体像素化程度
- 数据流强度:控制垂直流动的可见度
- 故障效果:影响干扰的强度
- 绿色主题:适合赛博朋克风格
- 分辨率:128x128细分保证细节
扩展方向
- 黑客帝国效果:添加经典的绿色代码雨
- 数字故障:增强故障效果
- 像素艺术:完全像素化的效果
- 数据可视化:添加真实数据流
- 赛博城市:添加城市背景
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。
💬 评论区
评论功能即将上线,敬请期待!