WebGL 3D绘图应用：网格量级切换与渐变过渡实现咨询

嘿，我懂你现在的痛点——做WebGL 3D绘图应用，处理大量数据点时，那个网格缩放的体验太割裂了对吧？现在的代码能实现缩放，但放大时旧的大网格还赖着不走，缩小时又一堆网格挤在一起，完全看不清。我给你捋个解决方案，核心是让网格层级随缩放平滑过渡，只显示当前量级下该看的网格。

核心思路 #

我们要基于当前的缩放级别（u_scale），动态判断哪些层级的网格该显示，并且给相邻层级添加平滑的透明度过渡，而不是生硬的显示/隐藏切换。具体来说：

• 定义多组网格层级（比如主网格、次级细分网格、更细的网格）
• 给每个层级设置缩放阈值，当缩放超过阈值时，逐步显示该层级，同时淡出上一层级
• 用平滑步进函数实现过渡，避免跳变

修改后的片段着色器代码 #

直接替换你原来的片段着色器，我会在代码里加注释解释关键改动：

precision highp float; 
varying vec3 pos; 
uniform float u_size; 
uniform float u_scale; 

// 自定义fmod函数（保留你原来的实现）
float my_fmod(float inp_val, float inp_m) { 
    float m = inp_m; 
    float val = inp_val + 201.0 * m; 
    return abs(val - float(int(val/m)) * m); 
} 

// 通用网格线计算函数，接受细分倍数参数
float gridline(float nPos0, float nPos1, float subdivideFactor, float lineWidth) {
    float gridInterval = 1.0 / subdivideFactor;
    // 检查两个轴是否在网格线位置
    bool onLine0 = my_fmod(nPos0, gridInterval) < lineWidth;
    bool onLine1 = my_fmod(nPos1, gridInterval) < lineWidth;
    return onLine0 || onLine1 ? 1.0 : 0.0;
} 

void main() { 
    // 基础配置
    float baseLineWidth = 0.015;
    float lineWidth = baseLineWidth / u_scale; // 线宽随缩放自适应
    vec3 gridColor = vec3(0., 0., 0.5);
    vec3 finalColor = vec3(0., 0., 0.); // 初始黑色背景

    // 1. 定义网格层级：细分倍数 + 对应缩放阈值
    // 比如：层级0=1倍细分（主网格，间隔1单位），层级1=5倍细分（间隔0.2），层级2=25倍细分（间隔0.04）
    const int levelCount = 3;
    const float subdivideLevels[levelCount] = float[](1.0, 5.0, 25.0);
    const float scaleThresholds[levelCount] = float[](1.0, 5.0, 25.0); // 达到该缩放值时，层级完全显示

    // 2. 计算每个层级的显示权重（0=完全隐藏，1=完全显示）
    float levelWeights[levelCount];
    for(int i=0; i<levelCount; i++){
        // 用smoothstep实现平滑过渡：从阈值的0.8倍开始淡入，到阈值时完全显示
        float fadeStart = scaleThresholds[i] * 0.8;
        float fadeEnd = scaleThresholds[i];
        levelWeights[i] = smoothstep(fadeStart, fadeEnd, u_scale);
        
        // 当前层级显示时，上一层级逐渐淡出（避免多层级同时高亮）
        if(i > 0){
            levelWeights[i-1] *= 1.0 - levelWeights[i];
        }
    }

    // 3. 根据当前面（x/y/z的正负面）绘制对应网格
    vec3 nPos = pos / u_scale; // 归一化位置
    float t1 = 1.0; // 基础网格透明度

    if (pos.x == -u_size || pos.x == u_size) {
        for(int i=0; i<levelCount; i++){
            float weight = levelWeights[i];
            if(weight < 0.01) continue; // 权重太低就跳过，优化性能
            // 绘制当前层级的网格
            float gridIntensity = gridline(nPos.y, nPos.z, subdivideLevels[i], lineWidth);
            finalColor += gridColor * t1 * gridIntensity * weight;
        }
    } else if (pos.y == -u_size || pos.y == u_size) {
        for(int i=0; i<levelCount; i++){
            float weight = levelWeights[i];
            if(weight < 0.01) continue;
            float gridIntensity = gridline(nPos.x, nPos.z, subdivideLevels[i], lineWidth);
            finalColor += gridColor * t1 * gridIntensity * weight;
        }
    } else if (pos.z == -u_size || pos.z == u_size) {
        for(int i=0; i<levelCount; i++){
            float weight = levelWeights[i];
            if(weight < 0.01) continue;
            float gridIntensity = gridline(nPos.x, nPos.y, subdivideLevels[i], lineWidth);
            finalColor += gridColor * t1 * gridIntensity * weight;
        }
    }

    // 输出最终颜色
    gl_FragColor = vec4(finalColor, 1.0);
}

关键改动解释 #

1. 通用网格线函数：把原来固定细分倍数的gridline改成接受参数的通用函数，方便复用在不同层级
2. 层级定义与权重计算：
   • 用数组定义多组细分层级和对应的缩放阈值，你可以根据需求增减层级
   • smoothstep函数实现了平滑的淡入淡出，避免生硬的网格切换
   • 层级权重的互斥处理，确保同一时间只有当前量级的网格是主要显示的，旧层级会逐渐淡出
3. 性能优化：跳过权重低于0.01的层级，减少不必要的计算
4. 自适应线宽：线宽随缩放比例调整，保证缩放时网格线的视觉粗细一致

额外建议 #

• 如果需要更细腻的过渡，可以增加更多层级（比如10倍、50倍细分）
• 可以给不同层级设置不同的颜色（比如主网格用深蓝色，细网格用浅蓝色），增强区分度
• 确保JS端传入的u_scale是正确的视图缩放值（比如相机的缩放倍数，或者从视图矩阵中提取的缩放分量）

内容的提问来源于stack exchange，提问作者FunnyFunkyBuggy