Three.js 流体动力学效果着色器 | 三维可视化 / AI 提示词

📋 AI 提示词

prompt
1
创建一个流体动力学效果着色器,包含流动、湍流和涡旋效果,支持流速、粘度调节,提供三种流体类型可选。

🖼️ 效果预览

流体动力学效果着色器

🎮 案例演示

立即体验


效果描述

这是一个模拟流体动力学效果的视觉效果,通过多层流动场、湍流和涡旋效果创造逼真的流体动画。

效果特性

  • 多层流动场:3层不同频率的流动叠加
  • 湍流效果:20个动态湍流点
  • 涡旋系统:极坐标涡旋流动
  • 粘度模拟:不同粘度影响流动特性
  • 三种流体类型:水、油、熔岩可选

参数调节

参数 默认值 范围 说明
流速 0.8 0.1-1.2 流体流动的速度
粘度 0.6 0.1-1.0 流体的粘度
湍流强度 0.7 0.1-1.0 湍流的剧烈程度
发光强度 1.2 0.1-1.8 流体发光强度
波动频率 0.8 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 uFlowSpeed;
uniform float uViscosity;
uniform float uWaveFrequency;

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

    // 流体流动效果
    float flow = sin(position.x * 3.0 + uTime * uFlowSpeed) *
                cos(position.y * 4.0 + uTime * uFlowSpeed * 0.8) *
                sin(position.z * 3.0 + uTime * uFlowSpeed * 0.6);

    // 粘度效果
    float viscosity = sin(position.x * 5.0 + uTime * uViscosity * 2.0) *
                     cos(position.z * 5.0 + uTime * uViscosity * 2.0);

    // 波动频率
    float wave = sin(position.x * uWaveFrequency * 6.0) *
                cos(position.y * uWaveFrequency * 8.0);

    vec3 newPosition = position + normal * (flow + viscosity * 0.5 + wave * 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 fluidFlow(vec2 uv, float speed) {
    float flowField = 0.0;

    // 多层流体流动
    flowField += sin(uv.x * 4.0 + uTime * 0.3) *
                cos(uv.y * 6.0 + uTime * 0.5);
    flowField += sin(uv.x * 6.0 + uTime * 0.7) *
                cos(uv.y * 8.0 + uTime * 0.9) * 0.7;
    flowField += sin(uv.x * 8.0 + uTime * 1.1) *
                cos(uv.y * 10.0 + uTime * 1.3) * 0.4;

    return flowField * speed;
}

湍流效果

glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
float turbulence(vec2 uv, float intensity) {
    float turbField = 0.0;
    for(int i = 0; i < 20; i++) {
        vec2 turbPos = vec2(
            noise(vec2(float(i) * 0.123, 0.456)),
            noise(vec2(float(i) * 0.456, 0.789))
        );
        float dist = distance(uv, turbPos);
        float turbSize = noise(vec2(float(i) * 0.789, 0.123)) * 0.04 + 0.02;
        float turbLife = mod(uTime * 1.5 + float(i) * 8.0, 6.28);
        float turbIntensity = sin(turbLife) * 0.7 + 0.3;
        turbField += exp(-dist * 45.0) * turbIntensity * intensity;
    }
    return turbField;
}

涡旋效果

glsl
1
2
3
4
5
6
7
8
9
10
float vortices(vec2 uv, float intensity) {
    if(!uShowVortices) return 0.0;

    float vortexField = 0.0;

    // 涡旋流动
    float angle = atan(uv.y - 0.5, uv.x - 0.5);
    float radius = distance(uv, vec2(0.5, 0.5));
    vortexField += sin(angle * 8.0 + uTime * 2.0) *
                  cos(radius * 12.0 - uTime * 1.5) * intensity;

    return vortexField;
}

Uniforms

javascript
1
2
3
4
5
6
7
8
9
10
uniforms: {
    uTime: { value: 0.0 },
    uFlowSpeed: { value: 0.8 },
    uViscosity: { value: 0.6 },
    uTurbulence: { value: 0.7 },
    uGlowIntensity: { value: 1.2 },
    uWaveFrequency: { value: 0.8 },
    uFluidType: { value: 0 },
    uShowVortices: { value: true }
}

技术亮点

  1. 多层流动系统:3层不同频率的流动叠加创造复杂流体
  2. 湍流粒子:20个湍流点创造局部的湍流效果
  3. 极坐标涡旋:使用atan和distance创造螺旋涡旋
  4. 粘度模拟:粘度参数影响波的传播速度
  5. 类型颜色:三种流体类型具有独特的颜色

调试技巧

  1. 流速调节:高流速创造更活跃的流体效果
  2. 粘度影响:高粘度创造更平滑的流动
  3. 湍流数量:减少湍流计算点可提升性能
  4. 涡旋开关:复杂场景可关闭涡旋提升性能
  5. 流体类型:水流体适合清澈效果,油流体适合粘稠效果

扩展方向

  1. 流体交互:添加物体与流体的交互
  2. 多流体混合:实现不同流体混合效果
  3. 流体溅泼:添加溅泼粒子效果
  4. 流体容器:添加容器边界约束
  5. 流体物理:添加真实流体物理模拟

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