Three.js 数字水纹效果着色器

提示词

PROMPT
1
创建一个数字水纹效果着色器,包含像素化效果、数字水波、数据流、数字噪波和故障效果,支持像素大小和故障强度调节。

效果描述

这是一个结合数字美学和水波效果着色器,通过像素化处理和多层效果叠加创造赛博朋克风格的数字水纹效果。

效果特性

  • 像素化效果:floor函数实现的像素化处理
  • 数字水波:多层sin/cos叠加的水波效果
  • 数据流效果:垂直流动的数据流
  • 数字噪波:高频数字噪波
  • 故障效果:数字故障干扰效果
  • 二进制码:二进制码流动效果

参数调节

参数 默认值 范围 说明
像素大小 0.5 0.1-1.5 像素化的程度
数据流强度 0.8 0.1-1.5 数据流的可见度
故障效果 0.4 0.1-1.0 故障干扰的强度
数字颜色 #00ff88 - 数字效果的基础颜色

核心代码解析

像素化效果

GLSL
1
2
3
4
vec2 pixelate(vec2 uv, float pixelSize) {
    vec2 pixelUV = floor(uv * pixelSize * 100.0) / (pixelSize * 100.0);
    return pixelUV;
}

数字水波效果

GLSL
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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;
}

数据流效果

GLSL
1
2
3
4
5
6
7
8
9
10
11
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;
}

故障效果

GLSL
1
2
3
4
5
6
7
8
9
10
11
12
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

JAVASCRIPT
1
2
3
4
5
6
7
8
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) }
}

技术亮点

  1. 像素化处理:floor函数实现离散化效果
  2. 多层效果叠加:5种不同效果组合
  3. 数据流动:垂直方向的数据流效果
  4. 绿色主题:#00ff88营造数字氛围
  5. 发光效果:smoothstep创造发光边缘

调试技巧

  1. 像素大小:影响整体像素化程度
  2. 数据流强度:控制垂直流动的可见度
  3. 故障效果:影响干扰的强度
  4. 绿色主题:适合赛博朋克风格
  5. 分辨率:128x128细分保证细节

扩展方向

  1. 黑客帝国效果:添加经典的绿色代码雨
  2. 数字故障:增强故障效果
  3. 像素艺术:完全像素化的效果
  4. 数据可视化:添加真实数据流
  5. 赛博城市:添加城市背景

本文档由 ThreeLab 编辑整理,如需转载,请注明出处。