Three.js 生物发光效果着色器 | 三维可视化 / AI 提示词

📋 AI 提示词

prompt
1
创建一个生物发光效果着色器,模拟海洋生物发光效果,包含发光生物体和脉冲效果,提供三种生物类型可选。

🖼️ 效果预览

生物发光效果着色器

🎮 案例演示

立即体验


📖 效果拆解

层次 视觉效果 技术实现
基础 八面体几何体 OctahedronGeometry
核心特效 多层生物发光 3层不同频率的发光场叠加
增强细节 生物体粒子 25个动态发光的生物体粒子
视觉效果 脉冲效果 可调节的生物发光脉冲节奏
交互控制 生物类型切换 绿色、蓝色、黄色三种发光颜色

🔧 核心技术点

顶点着色器

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 uGlowIntensity;
uniform float uBioActivity;
uniform float uPulseFrequency;

void main() {
    vUv = uv;
    vPosition = position;
    vNormal = normal;
    
    // 生物发光效果
    float glow = sin(position.x * 3.0 + uTime * uGlowIntensity) * 
                cos(position.y * 4.0 + uTime * uGlowIntensity * 0.8) *
                sin(position.z * 3.0 + uTime * uGlowIntensity * 0.6);
    
    // 生物活性
    float activity = sin(position.x * 5.0 + uTime * uBioActivity * 2.0) *
                    cos(position.z * 5.0 + uTime * uBioActivity * 2.0);
    
    // 脉冲频率
    float pulse = sin(position.x * uPulseFrequency * 6.0) *
                 cos(position.y * uPulseFrequency * 8.0);
    
    vec3 newPosition = position + normal * (glow + activity * 0.5 + pulse * 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 bioluminescence(vec2 uv, float intensity) {
    float bioField = 0.0;
    
    // 多层生物发光
    bioField += sin(uv.x * 4.0 + uTime * 0.3) * 
               cos(uv.y * 6.0 + uTime * 0.5);
    bioField += sin(uv.x * 6.0 + uTime * 0.7) * 
               cos(uv.y * 8.0 + uTime * 0.9) * 0.7;
    bioField += sin(uv.x * 8.0 + uTime * 1.1) * 
               cos(uv.y * 10.0 + uTime * 1.3) * 0.4;
    
    return bioField * intensity;
}

生物体效果

glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
float organisms(vec2 uv, float density) {
    float organismField = 0.0;
    for(int i = 0; i < 25; i++) {
        vec2 organismPos = vec2(
            noise(vec2(float(i) * 0.234, 0.567)),
            noise(vec2(float(i) * 0.567, 0.891))
        );
        float dist = distance(uv, organismPos);
        float organismSize = noise(vec2(float(i) * 0.891, 0.234)) * 0.04 + 0.02;
        float organismLife = mod(uTime * 1.8 + float(i) * 10.0, 6.28);
        float organismIntensity = sin(organismLife) * 0.7 + 0.3;
        organismField += exp(-dist * 50.0) * organismIntensity * density;
    }
    return organismField;
}

Uniforms

javascript
1
2
3
4
5
6
7
8
9
10
uniforms: {
    uTime: { value: 0.0 },
    uGlowIntensity: { value: 0.9 },
    uBioActivity: { value: 0.8 },
    uOrganismDensity: { value: 0.7 },
    uLightColor: { value: 1.2 },
    uPulseFrequency: { value: 0.6 },
    uBioType: { value: 0 },
    uShowOrganisms: { value: true }
}

💡 调试与优化

问题类型 表现形式 解决方案
着色器编译失败 黑屏或报错 检查 GLSL 语法和 uniform 定义
性能问题 帧率下降 减少噪声迭代次数或降低细分
晶体效果不明显 纹理太淡 调整生长速度和密度参数
动画卡顿 旋转不流畅 检查 GSAP 配置

🚀 扩展思路

变体效果 核心改动 难度
多面体生长 使用不同的基础几何体
动态生长 添加生长动画过渡 ⭐⭐
彩色晶体 添加多色折射效果 ⭐⭐
发光晶体 添加自发光材质 ⭐⭐

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