体积云Shader编写思路

智方科技

于 2024-11-14 15:49:32 发布

阅读量1.2k

点赞数 31

分类专栏： 3D Tiles数据转换文章标签： 3d TilesBuilder cesium 智慧城市 webgl

本文链接：https://blog.csdn.net/ismartcube/article/details/143773026

版权

3D Tiles数据转换专栏收录该内容

16 篇文章

订阅专栏

《体积云Shader编写思路》

TilesBuilder： TilesBuilder提供一个高效、兼容、优化的数据转换工具，一站式完成数据转换、数据发布、数据预览操作。
请添加图片描述

在体积云的渲染中，我们的目标是模拟云层的密度、法线以及与光照的交互效果。通过光线步进算法（Ray Marching），我们逐步计算每一段云层的表现，从而得到最终的视觉效果。以下是编写体积云Shader的详细思路：

1. 云层密度与法线计算

首先，我们需要确定每个位置的云层密度和法线。云层的密度通常是通过噪声函数来模拟的，法线的方向则依赖于云层的高度和位置。

密度计算：
云层密度是根据位置变化的，可以通过噪声函数计算出位置的云层厚度。随着高度的变化，云层的厚度和密度可能会变化，通常高于一定高度的云层密度较低，低于某个高度则更浓密。
法线计算：
法线决定了光照的方向。云层的法线方向通常是根据当前高度与周围云层的关系来确定的。例如，云层高度较高时，法线可能向上；较低时，法线可能向下。

2. 光线步进算法

体积云的渲染依赖于光线步进算法（Ray Marching），在这一步骤中，我们从相机位置发射一条光线，通过不断地步进沿光线方向检查云层的密度，计算最终的渲染结果。

步进过程：
我们在光线方向上从起点（相机位置）开始，按步长（步进距离）计算光线与云层的交点。每次步进时，我们获取当前位置的云层密度，并根据密度计算光照和阴影。如果密度超过某个阈值，就进行光照计算，否则继续步进。
光照计算：
在每个步进位置，如果密度较大，我们需要计算光照效果。这包括了阳光的直接照射、阴影处理以及漫反射和高光效果。通过计算当前点的法线方向与阳光的角度，结合阴影效果，得到当前点的亮度。
1. 计算当前点的阴影（例如，通过在阳光方向上偏移一定距离，检查该点是否被遮挡）。
2. 根据法线计算与阳光的夹角，进而决定点的亮度。
3. 调整光照的强度，考虑漫反射和地面反射的影响。
透明度计算：
云层的透明度取决于云的密度，密度越大，透明度越低。在每个步进位置，根据云层的密度，调整透明度。随着光线穿越更厚或更薄的云层，透明度会自然变化，产生更加真实的视觉效果。

3. 计算光照和阴影

在体积云的光照计算中，云层的阴影和光照交互非常重要。为了更真实地表现云层，我们需要计算每个步进点是否处于阳光的照射下，并根据光照方向和密度计算最终的亮度。

阴影：
通过采样云层中某一位置附近的光照，确定云层是否处于阳光照射下。如果光照值低于某个阈值，说明该位置处于阴影中，光照效果应被削弱。
漫反射与高光：
漫反射表现为云层向各个方向的光散射，特别是在天空和地面之间的反射。高光则模拟了光线在云层表面反射的强烈光斑效果。

4. 合成最终结果

通过步进过程和光照计算后，我们会得到每个步进点的颜色和透明度。最终，通过加权混合所有步进点的颜色值，得到最终的云层渲染效果。

混合与透明度：
每个步进位置的颜色会根据透明度与先前的颜色进行加权混合。这样，光线穿越云层时，颜色会逐渐变化，形成逼真的云层效果。
提前退出：
在步进过程中，如果遇到已达到最大透明度或最大步进距离的条件，应该提前退出步进过程，以避免不必要的计算，提高渲染效率。

5.以下是伪代码

// 云层密度和法线计算
vec4 calculateCloudsDensityAndNormal(vec3 position) {
    float density = computeDensityAtPosition(position);  // 计算当前位置的云层密度
    vec3 normal = computeCloudNormal(position);           // 计算当前位置的云层法线
    return vec4(density, normal);                         // 返回密度和法线
}

// 光线步进算法（Ray Marching）
vec4 renderClouds(vec3 rayOrigin, vec3 rayDirection, float tmin, float tmax) {
    vec4 accumulatedColor = vec4(0.0);  // 初始化累计颜色
    float t = tmin;  // 当前步进距离
    float lastT = -1.0;  // 上一次的步进位置
    
    // 光线步进，最多步进128次
    for (int i = 0; i < 128; i++) {
        vec3 position = rayOrigin + t * rayDirection;  // 计算当前光线位置
        vec4 cloudData = calculateCloudsDensityAndNormal(position);  // 获取当前位置的云密度和法线
        
        float density = cloudData.x;  // 获取密度
        vec3 normal = cloudData.yzw;  // 获取法线
        
        if (density > 0.001) {  // 如果密度足够大，进行光照计算
            // 计算阴影：检查阳光方向
            float shadow = calculateShadow(position);
            
            // 计算光照：简单的漫反射和高光
            float diff = max(dot(normal, sunDirection), 0.0);
            vec3 lightColor = computeLightColor(diff, shadow);
            
            // 计算透明度：密度越大，透明度越低
            float opacity = calculateOpacity(density, t);
            
            // 叠加颜色：累积当前颜色与透明度
            accumulatedColor = mix(accumulatedColor, vec4(lightColor, opacity), 1.0 - accumulatedColor.a);
        }
        
        // 增加步进距离
        t += max(0.2, 0.01 * t);  // 步进距离
        if (accumulatedColor.a > 0.95 || t > tmax) break;  // 提前退出条件：足够透明或超出最大距离
    }
    
    return clamp(accumulatedColor, 0.0, 1.0);  // 返回最终渲染结果，确保颜色在合理范围内
}

// 主渲染函数
void main() {
    vec3 rayOrigin = cameraPosition;  // 相机位置
    vec3 rayDirection = normalize(viewDirection);  // 光线方向
    
    // 调用渲染函数，计算云层效果
    vec4 finalColor = renderClouds(rayOrigin, rayDirection, 0.0, maxDistance);
    
    // 输出最终颜色
    gl_FragColor = finalColor;
}

请添加图片描述