WebGL 黑洞着色器：广义相对论真实吸积盘效果

虚实粒子渲染

这里涉及到一种独特的渲染方法。为了模拟吸积盘等的绚丽场景，我们不能真的渲染几百万个粒子吧，那样我们的电脑可能就会爆炸了。 我们可以通过一个真实的粒子运动来推断它四周的粒子云的运动方式应该是类似的。这样就可以大大减少计算的数量达到更多的真实的粒子效果。

系统架构

class ParticleManager {
    // 三个核心缓冲区
    positions = new Float32Array(maxCount * 3); // 位置 (虚拟)
    velocities = new Float32Array(maxCount * 3); // 速度 (虚拟)
    colors = new Float32Array(maxCount * 3); // 颜色 (虚拟)

    // 虚实连接点：从实体位置初始化虚拟粒子
    emit(pos, vel, count, radius, spread, colorHex) {
        // 基于实体位置生成虚拟粒子云
        this.positions[idx] = pos.x + r * Math.sin(phi) * Math.cos(theta);
        // ... 速度继承 + 随机扩散
    }
}

着色器中的虚实融合

// 顶点着色器关键逻辑
void main() {
    vec3 physPos = position; // 虚拟粒子位置
    vec3 renderPos = physPos; // 渲染位置（可能被透镜扭曲）
    // 但计算红移时，考虑实体黑洞的位置
    for(int i = 0; i < uBHCount; i++) {
        vec3 bhPos = uBHPositions[i]; // 实体黑洞位置
        float r = distance(physPos, bhPos); // 虚粒子到实体的距离
        // 实体影响虚粒子的渲染效果
        totalGravPotential += uRs[i]/max(r, uRs[i]*1.01);
    }
    // 虚粒子颜色受实体引力影响而改变
    if(totalShift > 1.1) {
        finalColor = mix(baseColor, vec3(0.4,0.6,1.0), t);
    }
}

特殊效果：虚粒子的"实体化"模拟

// 吸积盘的内落效果
// 在粒子更新循环中
if(CONFIG.enableAccretion && dist < b.radius * 1.2) {
    b.absorbMass(CONFIG.PARTICLE_MASS); // 虚拟粒子被实体吸收
    this.lifetimes[i] = 0; // 虚拟粒子消失
    this.positions[idx] = 999999; // 移出视野
}

// 粒子坠入黑洞的视觉效果
// 在着色器中视界消隐
for(int i = 0; i < 2; i++) {
    float r = distance(physPos, uBHPositions[i]);
    float rs = uRs[i]; // 虚拟粒子在视界内透明度为 0（模拟被吞噬）
    vAlpha *= smoothstep(rs * 0.95, rs * 1.1, r);
}

广义相对论渲染

我采用了一种类似于星际穿越剧组渲染黑洞的方法。通过逆向解析光线弯曲来实现引力透镜和爱因斯坦环的近似效果。 我简化了一些物理原理。

简化假设：

• 平面近似：假设所有光线在同一平面内传播
• 弱场近似：使用线性叠加而非精确场方程
• 静态场：忽略黑洞运动带来的效应
• 单次散射：忽略光线绕行多圈的情况

首先是收集黑洞的信息：

// 从所有天体中找到黑洞
const bhs = bodies.filter(b => b.isBlackhole);
// 按质量排序（最重要的先处理）
bhs.sort((a,b) => b.mass - a.mass);
// 限制数量（性能优化）
const maxLensCount = 4; // 最多支持 4 个黑洞同时透镜
lensPass.uniforms.uCount.value = Math.min(bhs.length, maxLensCount);

坐标变换（世界坐标到屏幕坐标）因为计算效果是通过摄像机的视角进行计算的。

for(let i = 0; i < maxLensCount; i++) {
    if(i < bhs.length) {
        const bh = bhs[i];
        // 关键步骤：3D 世界坐标 → 2D 屏幕坐标
        // 1. 使用 Three.js 的 project() 方法
        const p = bh.position.clone().project(camera);
        // 此时 p.x, p.y 范围是 [-1, 1]，z 是深度
        // 2. 归一化到 [0,1] 范围
        lensPass.uniforms.uPositions.value[i].set(
            p.x * 0.5 + 0.5, // 映射到 [0,1]
            p.y * 0.5 + 0.5,
            p.z
        );
        // 3. 计算屏幕空间史瓦西半径
        // 物理半径 → 视角 → 屏幕像素
        const dist = camera.position.distanceTo(bh.position);
        const physicalRs = bh.calcSchwarzschildRadius(); // 2GM/c²
        const angularRs = physicalRs / dist; // 弧度
        const screenRs = angularRs * 2.0; // 经验缩放因子
        lensPass.uniforms.uRadii.value[i] = screenRs;
    } else {
        // 填充无效数据
        lensPass.uniforms.uRadii.value[i] = 0;
    }
}

着色器：

// lensing-fs
uniform sampler2D tDiffuse; // 输入纹理（已渲染的场景）
uniform vec2 uResolution; // 屏幕分辨率
uniform int uCount; // 黑洞数量（0-4）
uniform vec3 uPositions[4]; // 黑洞屏幕位置 (x,y,z)
uniform float uRadii[4]; // 屏幕空间史瓦西半径
uniform float uStrength; // 透镜强度参数
varying vec2 vUv;

void main() {
    // 初始化为原始 UV 坐标
    vec2 uv = vUv;
    vec2 finalUv = uv;
    float totalMask = 0.0; // 视界遮罩
    float photonRing = 0.0; // 光子环累积

    // 考虑屏幕宽高比（保证圆形扭曲）
    vec2 aspect = vec2(uResolution.x / uResolution.y, 1.0);

    // 遍历所有黑洞
    for(int i = 0; i < 4; i++) {
        if(i >= uCount) break; // 跳过无效黑洞

        // 获取当前黑洞参数
        vec2 center = uPositions[i].xy; // 屏幕位置 (x,y)
        float rs = uRadii[i]; // 屏幕空间史瓦西半径

        // 计算当前像素到黑洞的距离（考虑宽高比）
        vec2 dir = (uv - center) * aspect;
        float dist = length(dir);

        // 视界处理
        if(dist < rs) {
            // 像素在视界内，标记为完全屏蔽
            totalMask = 1.0;
        }

        // 扭曲计算
        if(dist > rs) {
            // 关键公式：偏转角度 ∝ 1/(距离 - rs)
            float deflection = (rs * uStrength * 0.12)/max(dist - rs, 0.001);
            // 限制最大偏转（防止过度扭曲）
            deflection = min(deflection, 0.5);

            // 计算扭曲方向：从黑洞指向像素
            vec2 offset = normalize(uv - center) * deflection;
            // 逆向采样：应用扭曲
            finalUv -= offset;

            // 光子环效果
            // 在 1.1 倍史瓦西半径附近添加发光效果
            float glow = exp(-(dist - rs * 1.1)*30.0/(rs + 0.001));
            photonRing += glow * 0.8;
        }
    }

    // 最终颜色合成
    // 1. 采样扭曲后的纹理
    vec4 color = texture2D(tDiffuse, finalUv);
    // 2. 添加光子环颜色（橙黄色）
    vec4 ringColor = vec4(1.0,0.7,0.3,1.0) * photonRing;
    // 3. 应用视界遮罩：视界内为纯黑色
    gl_FragColor = mix(color + ringColor, vec4(0.0,0.0,0.0,1.0), totalMask);
}

最关键的就是逆向扭曲算法: Q = P − Σ δ_i(P) 其中 δ_i(P) 是黑洞 i 在像素 P 处产生的偏转。 偏转函数： δ(r) = k ⋅ r_s / (r - r_s), r > r_s 其中： r: 像素到黑洞中心距离 r_s: 屏幕空间的施瓦西半径 k: 可调节系数

多重黑洞处理

δ_total(P) = Σ δ_i(P) 采用了线性叠加的方案，这里是和真实的大相径庭的，当黑洞相互靠近时，非线性效应显著，会产生复杂的焦散线和多重镜像。但是暂时没办法只能妥协。

最后较为复杂的实现点就这些，也是一些必要的简化部分。系统还有一些小 Bug 和缺失的功能，无伤大雅后面会慢慢补上。