Three.js 点云地球

提示词

PROMPT
1
使用 Three.js 创建点云地球效果,使用自定义着色器实现海洋波浪和点云渲染。

效果描述

这是一个展示如何创建点云地球效果的示例,使用自定义着色器实现海洋波浪和点云渲染。

效果特性

  • 点云地球:创建点云地球效果
  • 海洋波浪:使用 fBm 噪声实现海洋波浪
  • 自定义着色器:使用自定义着色器
  • 高度纹理:使用高度纹理
  • 颜色纹理:使用颜色纹理
  • 可见性计算:计算点云可见性

核心参数

参数 说明
点大小 可变 点云大小
波浪高度 可变 海洋波浪高度
波浪速度 可变 海洋波浪速度
高度纹理 地形纹理 高度纹理
颜色纹理 地形纹理 颜色纹理

核心代码解析

顶点着色器

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
65
66
67
68
69
70
71
72
73
uniform float size;
uniform sampler2D elevTexture;
uniform sampler2D alphaTexture;
uniform float uTime;
uniform float uWaveHeight;
uniform float uWaveSpeed;

varying vec2 vUv;
varying float vVisible;
varying float vAlpha;
varying float vElevation;

float random(vec3 st) {
    return fract(sin(dot(st.xyz, vec3(12.9898, 78.233, 45.164))) * 43758.5453123);
}

float noise(vec3 st) {
    vec3 i = floor(st);
    vec3 f = fract(st);

    float a = random(i);
    float b = random(i + vec3(1.0, 0.0, 0.0));
    float c = random(i + vec3(0.0, 1.0, 0.0));
    float d = random(i + vec3(1.0, 1.0, 0.0));
    float e = random(i + vec3(0.0, 0.0, 1.0));
    float f1 = random(i + vec3(1.0, 0.0, 1.0));
    float g = random(i + vec3(0.0, 1.0, 1.0));
    float h = random(i + vec3(1.0, 1.0, 1.0));

    vec3 u = f * f * (3.0 - 2.0 * f);

    return mix(mix(mix(a, b, u.x), mix(c, d, u.x), u.y),
               mix(mix(e, f1, u.x), mix(g, h, u.x), u.y), u.z);
}

float fbm(vec3 st) {
    float value = 0.0;
    float amplitude = 0.5;

    for (int i = 0; i < 5; i++) {
        value += amplitude * noise(st);
        st *= 2.0;
        amplitude *= 0.5;
    }
    return value;
}

void main() {
    vUv = uv;
    float alphaLand = 1.0 - texture2D(alphaTexture, vUv).r;
    vAlpha = alphaLand;
    vec3 newPosition = position;

    if(alphaLand < 0.5) {
        float waveHeight = uWaveHeight;
        float waveSpeed = uWaveSpeed;
        float displacement = (fbm(newPosition * 5.0 + uTime * waveSpeed) * 2.0 - 1.0) * waveHeight;
        vElevation = displacement;
        newPosition += normal * displacement;
    }

    vec4 mvPosition = modelViewMatrix * vec4(newPosition, 1.0);
    float elv = texture2D(elevTexture, vUv).r;
    vec3 vNormal = normalMatrix * normal;
    vVisible = step(0.0, dot(-normalize(mvPosition.xyz), normalize(vNormal)));
    mvPosition.z += 0.45 * elv;

    float dist = length(mvPosition.xyz);
    float pointSize = size * (1.0 - dist / 10.0);
    gl_PointSize = max(pointSize, 1.0);
    gl_PointSize = pointSize;
    gl_Position = projectionMatrix * mvPosition;
}

技术亮点

  1. 点云地球:创建点云地球效果
  2. 海洋波浪:使用 fBm 噪声实现海洋波浪
  3. 自定义着色器:使用自定义着色器
  4. 高度纹理:使用高度纹理
  5. 可见性计算:计算点云可见性

调试技巧

  1. 点大小:调整点大小改变点云显示
  2. 波浪高度:调整波浪高度改变海洋效果
  3. 波浪速度:调整波浪速度改变动画速度
  4. 高度纹理:调整高度纹理改变地形
  5. 颜色纹理:调整颜色纹理改变颜色

扩展方向

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

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