Three.js 全息投影效果着色器 | 三维可视化 / AI 提示词

📋 AI 提示词

prompt
1
创建一个科幻风格的全息投影效果着色器,包含扫描线、数据流、网格效果,支持三种全息颜色类型。

🖼️ 效果预览

全息投影效果着色器

🎮 案例演示

立即体验


效果描述

这是一个科幻风格的全息投影效果,通过多层正弦波叠加创造数据流动感,配合扫描线和网格效果营造未来科技感。

效果特性

  • 多层全息投影:3层不同频率的全息场叠加
  • 数据点效果:动态生成和移动的数据点
  • 网格扫描线:水平扫描线和垂直网格叠加
  • 三种颜色类型:绿色、蓝色、紫色全息可选
  • 发光脉冲:全息投影的发光脉冲动画

参数调节

参数 默认值 范围 说明
投影强度 0.9 0.1-1.2 全息投影的强度
扫描频率 0.8 0.1-1.0 扫描线的移动频率
数据密度 0.7 0.1-1.0 数据点的密度
发光强度 1.3 0.1-1.8 全息发光强度
数据流 0.6 0.1-0.9 数据流动的速度
显示网格 true boolean 是否显示网格效果

核心代码解析

顶点着色器

glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
uniform float uTime;
uniform float uProjectionIntensity;
uniform float uScanFrequency;
uniform float uDataStream;

void main() {
    vUv = uv;
    vPosition = position;
    vNormal = normal;

    // 全息投影效果
    float projection = sin(position.x * 3.0 + uTime * uProjectionIntensity) *
                      cos(position.y * 4.0 + uTime * uProjectionIntensity * 0.8) *
                      sin(position.z * 3.0 + uTime * uProjectionIntensity * 0.6);

    // 扫描频率
    float scan = sin(position.x * 5.0 + uTime * uScanFrequency * 2.0) *
                cos(position.z * 5.0 + uTime * uScanFrequency * 2.0);

    // 数据流效果
    float data = sin(position.x * uDataStream * 6.0) *
                cos(position.y * uDataStream * 8.0);

    vec3 newPosition = position + normal * (projection + scan * 0.5 + data * 0.3) * 0.15;

    gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
}

全息投影效果

glsl
1
2
3
4
5
6
7
8
9
10
11
float holographicProjection(vec2 uv, float intensity) {
    float hologramField = 0.0;

    // 多层全息投影
    hologramField += sin(uv.x * 4.0 + uTime * 0.3) *
                    cos(uv.y * 6.0 + uTime * 0.5);
    hologramField += sin(uv.x * 6.0 + uTime * 0.7) *
                    cos(uv.y * 8.0 + uTime * 0.9) * 0.7;
    hologramField += sin(uv.x * 8.0 + uTime * 1.1) *
                    cos(uv.y * 10.0 + uTime * 1.3) * 0.4;

    return hologramField * intensity;
}

全息数据点效果

glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
float hologramData(vec2 uv, float density) {
    float dataField = 0.0;
    for(int i = 0; i < 20; i++) {
        vec2 dataPos = vec2(
            noise(vec2(float(i) * 0.234, 0.567)),
            noise(vec2(float(i) * 0.567, 0.891))
        );
        float dist = distance(uv, dataPos);
        float dataSize = noise(vec2(float(i) * 0.891, 0.234)) * 0.04 + 0.02;
        float dataLife = mod(uTime * 1.8 + float(i) * 10.0, 6.28);
        float dataIntensity = sin(dataLife) * 0.7 + 0.3;
        dataField += exp(-dist * 50.0) * dataIntensity * density;
    }
    return dataField;
}

Uniforms

javascript
1
2
3
4
5
6
7
8
9
10
uniforms: {
    uTime: { value: 0.0 },
    uProjectionIntensity: { value: 0.9 },
    uScanFrequency: { value: 0.8 },
    uHologramDensity: { value: 0.7 },
    uGlowIntensity: { value: 1.3 },
    uDataStream: { value: 0.6 },
    uHologramType: { value: 0 },
    uShowGrid: { value: true }
}

技术亮点

  1. 多层场叠加:3层不同参数的全息场叠加创造复杂效果
  2. 噪声函数:使用噪声函数生成伪随机数据点位置
  3. 指数衰减:数据点使用指数衰减创造光晕效果
  4. 扫描线动画:sin函数创造水平扫描线效果
  5. 加法混合:AdditiveBlending创造发光叠加效果

调试技巧

  1. 颜色选择:不同全息类型适合不同科幻场景
  2. 数据密度:减少数据点数量可提升性能
  3. 扫描频率:过高频率可能产生视觉疲劳
  4. 网格可见性:复杂场景可关闭网格提升性能
  5. 旋转速度:通过scanFrequency控制旋转速度

扩展方向

  1. 全息字符:添加文字投影到全息效果中
  2. 交互式全息:支持鼠标/键盘控制全息显示内容
  3. 全息扫描仪:实现扫描物体生成全息模型
  4. 远程全息:实现两个用户间的全息视频通话
  5. 多全息投影:多个全息投影组合成复杂场景

本文档由 ThreeLab 编辑整理,专注 Three.js 着色器、Web 3D、GIS 可视化技术分享。如需转载,请注明出处。