当浏览器不支持webgl2时，volumeshader无法运行，需降级为2d canvas渲染：预生成png切片逐帧绘制，或用three.js+shadermaterial模拟体渲染，动态切换渲染管线并优化高dpr显示。
当项目中需要使用 VolumeShader（体渲染着色器）但目标浏览器不支持 WebGL2 或缺少 3D 上下文时，Canvas 元素无法直接承载 volumetric 渲染逻辑，页面会白屏、报错或静默失败。
确认当前环境是否支持 WebGL2
第一步：在控制台执行以下代码，检查浏览器能力
const gl = document.createElement('canvas').getContext('webgl2');
如果返回 null，说明该浏览器不支持 WebGL2——VolumeShader 依赖的 texture3D、float textures、uniform buffer objects 等特性均不可用。此时不能强行调用 new VolumeShader()，否则会触发 TypeError: Cannot read property 'getExtension' of null。
降级为 2D Canvas 渲染体数据切片
适用于医学影像（如 CT/MRI）、科学可视化等需展示体积数据但无需实时交互的场景。
方法一：预生成 Z 轴切片图并逐帧绘制
将原始 volume 数据（如 512×512×128 的 float32 数组）离线转为 PNG 序列（每张为灰度图），按 Z 索引命名：slice_000.png～slice_127.png。
加载时用 Image 对象逐张解码，用 ctx.drawImage() 绘制到 2D canvas 上，配合 requestAnimationFrame 实现滑动浏览。
注意：此方式完全绕过 WebGL，兼容 IE11+、Safari 12+、Chrome 40+ 等所有支持 <canvas></canvas> 的浏览器。
用 Three.js + ShaderMaterial 模拟体渲染效果
前提：目标浏览器支持 WebGL1（即 getContext('webgl') 不返回 null）。
步骤一：创建单层 planeGeometry，贴上 2D texture（模拟最大强度投影 MIP）
步骤二：编写 fragment shader，用 ray-marching 近似实现体渲染光照模型
关键点：shader 中禁用 texture3D，改用 texture2D 查表 + 插值模拟深度方向采样；UV 坐标按 zIndex / totalZ 动态偏移，形成伪体积感。
这一步必须手动计算步进方向与衰减系数，不能依赖原生 VolumeShader 的自动采样逻辑。
【重要前提】 需提前将 volume 数据量化为 8bit 或 16bit 的 RGBA 纹理数组，并打包成多个 2D 纹理（例如每张存 32 层），避免单纹理超限被截断。
动态注入 fallback 渲染器
第一步：检测 WebGL2 可用性
第二步：若不可用，自动切换渲染管线
第三步：销毁原 WebGL2 相关实例（如 renderer、scene、volumeShader）→ 创建新 CanvasRenderer 实例 → 加载降级资源（PNG 切片或预烘焙 LUT 图）→ 启动 2D 渲染循环
第四步：监听 window.devicePixelRatio 变化，重新调整 canvas 物理尺寸，防止高 DPR 下模糊
第五步：调用 ctx.imageSmoothingEnabled = false 关闭插值，确保 CT 切片边缘锐利无晕染
