Three.js 火球效果

提示词

PROMPT
1
使用 Three.js 创建火球效果,使用自定义着色器实现火焰纹理和发光效果。

效果描述

这是一个展示如何创建火球效果的示例,使用自定义着色器实现火焰纹理和发光效果。

效果特性

  • 火球效果:创建火球效果
  • 自定义着色器:使用自定义着色器
  • 火焰纹理:使用 Perlin 噪声纹理
  • 发光效果:使用 UnrealBloomPass 发光
  • 颜色渐变:火球颜色渐变
  • 极坐标:使用极坐标变换

核心参数

参数 说明
颜色0 #000000 背景颜色
颜色1 #ff4500 火焰颜色1
颜色2 #ff8c00 火焰颜色2
颜色5 #ffff00 火焰颜色3
噪声纹理 Perlin噪声 火焰纹理

核心代码解析

顶点着色器

GLSL
1
2
3
4
5
6
7
8
9
10
varying vec3 vNormal;
varying vec3 camPos;
varying vec2 vUv;

void main() {
    vNormal = normal;
    vUv = uv;
    camPos = cameraPosition;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

片段着色器

GLSL
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
#define NUM_OCTAVES 5
#define M_PI 3.1415926535897932384626433832795
uniform vec4 resolution;
varying vec3 vNormal;
uniform sampler2D perlinnoise;
uniform sampler2D sparknoise;
uniform float time;
uniform vec3 color0;
uniform vec3 color1;
uniform vec3 color2;
uniform vec3 color3;
uniform vec3 color4;
uniform vec3 color5;
varying vec3 camPos;
varying vec2 vUv;

vec2 UnityPolarCoordinates(vec2 UV, vec2 Center, float RadialScale, float LengthScale){
    vec2 delta = UV - Center;
    float radius = length(delta) * 2. * RadialScale;
    float angle = atan(delta.x, delta.y) * 1.0/6.28 * LengthScale;
    return vec2(radius, angle);
}

void main() {
    vec2 olduv = gl_FragCoord.xy/resolution.xy;
    vec2 uv = vUv;
    vec2 imguv = uv;
    float scale = 1.;
    olduv *= 0.5 + time;
    olduv.y = olduv.y;
    vec2 p = olduv*scale;
    vec4 txt = texture2D(perlinnoise, olduv);
    float gradient = dot(normalize(-camPos), normalize(vNormal));
    float pct = distance(vUv, vec2(0.5));

    vec3 rgbcolor0 = rgbcol(color0);
    vec3 rgbcolor1 = rgbcol(color1);
    vec3 rgbcolor2 = rgbcol(color2);
    vec3 rgbcolor5 = rgbcol(color5);

    float y = smoothstep(0.16, 0.525, pct);
    vec3 backcolor = mix(rgbcolor0, rgbcolor5, y);

    gl_FragColor = vec4(backcolor, 1.);

    vec2 center = vec2(0.5);
    vec2 cor = UnityPolarCoordinates(vec2(vUv.x, vUv.y), center, 1., 1.);

    vec2 newUv = vec2(cor.x + time, cor.x*0.2+cor.y);
    vec3 noisetex = texture2D(perlinnoise, mod(newUv, 1.0)).rgb;
    vec3 noisetex2 = texture2D(sparknoise, mod(newUv, 1.0)).rgb;

    float tone0 = 1.0 - smoothstep(0.3, 0.6, noisetex.r);
    float tone1 = smoothstep(0.3, 0.6, noisetex2.r);

    float opacity0 = setOpacity(tone0, tone0, tone0, 0.29);
    float opacity1 = setOpacity(tone1, tone1, tone1, 0.49);

    if(opacity1 > 0.0){
        gl_FragColor = vec4(rgbcolor2, 0.)*vec4(opacity1);
    } else if(opacity0 > 0.0){
        gl_FragColor = vec4(rgbcolor1, 0.)*vec4(opacity0);
    }
}

技术亮点

  1. 火球效果:创建火球效果
  2. 自定义着色器:使用自定义着色器
  3. 火焰纹理:使用 Perlin 噪声纹理
  4. 发光效果:使用 UnrealBloomPass 发光
  5. 极坐标:使用极坐标变换

调试技巧

  1. 颜色参数:调整颜色参数改变火焰颜色
  2. 噪声参数:调整噪声参数改变火焰形状
  3. 时间参数:调整时间参数改变火焰速度
  4. 发光参数:调整发光参数改变发光强度
  5. 极坐标参数:调整极坐标参数改变火焰分布

扩展方向

  1. 多层火焰:创建多层火焰效果
  2. 不同颜色:使用不同颜色的火焰
  3. 复杂纹理:使用更复杂的纹理
  4. 交互控制:添加交互控制
  5. 动画效果:添加动画效果

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