Three.js 冰面反射效果着色器

提示词

PROMPT
1
创建一个冰面反射效果着色器，包含冰面反射、折射效果和冰晶效果，支持反射强度、冰层厚度和折射率调节。

效果描述

这是一个模拟冰面反射和折射的效果着色器，通过多层反射和折射效果创造逼真的冰面视觉效果。

效果特性

  • 冰面反射：多层sin/cos叠加的反射图案
  • 折射效果：光线在冰中的折射
  • 冰晶效果：六边形冰晶图案
  • 边缘发光：边缘的高光效果
  • 透明材质：半透明的冰面效果

参数调节

参数 默认值 范围 说明
反射强度 1.2 0.5-2.0 反射效果的强度
冰层厚度 0.5 0.1-1.0 冰层的厚度
折射率 1.3 1.0-2.0 光线的折射率
冰面颜色 #aaccff - 冰面的基础颜色

核心代码解析

冰面反射函数

GLSL
1
2
3
4
5
6
7
8
9
10
11
12
13
14
float iceReflection(vec2 uv, float time) {
    float reflection = 0.0;
    
    // 创建冰面反射图案
    for (int i = 0; i < 3; i++) {
        float frequency = float(i + 1) * 8.0;
        float speed = 0.5 + float(i) * 0.3;
        
        reflection += sin(uv.x * frequency + time * speed) * 
                    cos(uv.y * frequency + time * speed) * 0.2;
    }
    
    return reflection * 0.5 + 0.5;
}

折射效果

GLSL
1
2
3
4
5
6
7
8
9
10
vec3 refractionEffect(vec2 uv, float index) {
    vec2 distortedUV = uv + sin(uv * 15.0 + time) * 0.02 * index;
    
    // 创建折射颜色变化
    float r = sin(distortedUV.x * 10.0 + time) * 0.3 + 0.7;
    float g = sin(distortedUV.y * 10.0 + time * 1.2) * 0.3 + 0.7;
    float b = sin((distortedUV.x + distortedUV.y) * 5.0 + time * 0.8) * 0.3 + 0.7;
    
    return vec3(r, g, b) * 0.4;
}

冰晶效果

GLSL
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
float iceCrystalEffect(vec2 uv, float thickness) {
    float crystal = 0.0;
    
    // 创建冰晶图案
    for (int i = 0; i < 4; i++) {
        float angle = float(i) * 1.57; // 90度间隔
        float x = uv.x * cos(angle) - uv.y * sin(angle);
        float y = uv.x * sin(angle) + uv.y * cos(angle);
        
        crystal += sin(x * 20.0 + time * 2.0) * 
                 sin(y * 20.0 + time * 2.0) * 0.1;
    }
    
    return crystal * thickness;
}

Uniforms

JAVASCRIPT
1
2
3
4
5
6
7
8
uniforms: {
    time: { value: 0 },
    resolution: { value: new THREE.Vector2(_width, _height) },
    reflectionIntensity: { value: 1.2 },
    iceThickness: { value: 0.5 },
    refractionIndex: { value: 1.3 },
    iceColor: { value: new THREE.Color(0xaaccff) }
}

技术亮点

  1. 多层反射：3层不同频率的反射
  2. 折射模拟：UV偏移模拟光线折射
  3. 六边形冰晶：90度间隔创造六边形图案
  4. 浅蓝色主题：#aaccff营造冰面氛围
  5. 透明材质：transparent: true实现半透明效果

调试技巧

  1. 反射强度：影响整体反射的强度
  2. 冰层厚度：控制冰晶效果的强度
  3. 折射率：影响折射的程度
  4. 浅蓝色主题：适合冰面效果
  5. 透明度：0.9透明度创造半透明效果

扩展方向

  1. 真实折射：使用折射贴图
  2. 冰霜效果：添加冰霜纹理
  3. 冰裂效果：添加冰裂纹
  4. 冰雪场景：添加雪景背景
  5. 冰雕艺术：添加冰雕模型

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