Three.js 全息水幕效果着色器

提示词

PROMPT
1
创建一个全息水幕效果着色器，包含全息扫描线、数据流、网格效果、噪波和水幕效果，支持全息强度和扫描线速度调节。

效果描述

这是一个模拟全息投影水幕的效果着色器，通过扫描线、数据流和多层效果叠加创造科幻全息水幕效果。

效果特性

  • 全息扫描线：水平移动的扫描线效果
  • 数据流效果：动态的数据流动
  • 全息网格：网格图案效果
  • 全息噪波：高频噪波效果
  • 全息水幕：水幕波动效果
  • 扫描线高光：高亮的扫描线

参数调节

参数 默认值 范围 说明
全息强度 1.8 0.5-3.0 全息效果的强度
扫描线速度 1.0 0.3-2.0 扫描线移动的速度
数据流强度 0.7 0.1-1.5 数据流的可见度
全息颜色 #00ffff - 全息效果的基础颜色

核心代码解析

全息扫描线效果

GLSL
1
2
3
4
5
6
7
8
9
10
11
float hologramScanLines(vec2 uv, float time) {
    float scanLines = 0.0;
    
    // 创建扫描线效果
    for (int i = 0; i < 3; i++) {
        float speed = scanLineSpeed * (1.0 + float(i) * 0.3);
        scanLines += sin(uv.y * 100.0 + time * speed * 10.0) * 0.1;
    }
    
    return scanLines;
}

数据流效果

GLSL
1
2
3
4
5
6
7
8
9
10
11
12
float dataFlowEffect(vec2 uv, float time) {
    float flow = 0.0;
    
    // 创建数据流动效果
    for (int i = 0; i < 4; i++) {
        float offset = float(i) * 0.5;
        flow += sin(uv.x * 20.0 + time * 3.0 + offset) * 
               cos(uv.y * 15.0 + time * 2.0 + offset) * 0.08;
    }
    
    return flow * dataFlow;
}

全息网格效果

GLSL
1
2
3
4
5
6
7
8
9
float hologramGrid(vec2 uv, float time) {
    float grid = 0.0;
    
    // 创建网格图案
    grid += sin(uv.x * 30.0 + time * 2.0) * 0.05;
    grid += sin(uv.y * 30.0 + time * 1.5) * 0.05;
    
    return grid;
}

全息水幕效果

GLSL
1
2
3
4
5
6
7
8
9
10
11
12
float holographicWater(vec2 uv, float time) {
    float water = 0.0;
    
    // 创建水幕波动效果
    for (int i = 0; i < 3; i++) {
        float layer = float(i) * 0.2;
        water += sin(uv.x * 8.0 + time * 2.0 + layer) * 
                cos(uv.y * 6.0 + time * 1.5 + layer) * 0.15;
    }
    
    return water;
}

Uniforms

JAVASCRIPT
1
2
3
4
5
6
7
8
uniforms: {
    time: { value: 0 },
    resolution: { value: new THREE.Vector2(_width, _height) },
    hologramIntensity: { value: 1.8 },
    scanLineSpeed: { value: 1.0 },
    dataFlow: { value: 0.7 },
    hologramColor: { value: new THREE.Color(0x00ffff) }
}

技术亮点

  1. 扫描线效果：高频垂直扫描线
  2. 数据流动：动态的数据流效果
  3. 网格叠加：网格图案增强科技感
  4. 青色主题：#00ffff营造全息氛围
  5. 透明材质：transparent: true实现半透明效果

调试技巧

  1. 全息强度：影响整体效果的强度
  2. 扫描线速度：控制扫描线移动速度
  3. 数据流强度：影响数据流的可见度
  4. 青色主题：适合全息投影效果
  5. 透明度：0.9透明度创造半透明效果

扩展方向

  1. 全息投影：添加3D全息投影
  2. 数据可视化：添加真实数据
  3. 科幻界面：添加科幻UI元素
  4. 全息通信：添加通信效果
  5. 未来城市：添加城市全息图

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