如何在Chrome中正常渲染Plotly 3D曲面图形？

问题背景 #

基于Plotly官方3D曲面图实现的可视化，在Chrome浏览器中渲染异常（曲面显示错乱），已确认Chrome使用D3D11图形后端，且禁用了#ignore-gpu-blocklist选项。当前Chrome GPU状态及驱动修复方案如下：

图形功能状态 #

• Canvas: 硬件加速
• Canvas进程外光栅化: 已禁用
• 直接渲染显示合成器: 已禁用
• 合成: 硬件加速
• 多光栅线程: 已启用
• OpenGL: 已启用
• 光栅化: 所有页面均硬件加速
• 原始绘制: 已禁用
• 视频解码: 硬件加速
• 视频编码: 硬件加速
• Vulkan: 已禁用
• WebGL: 硬件加速
• WebGL2: 硬件加速
• WebGPU: 硬件加速

驱动程序缺陷修复方案 #

• clear_uniforms_before_first_program_use
• decode_encode_srgb_for_generatemipmap
• disable_accelerated_av1_encode
• disable_vp_scaling
• disable_vp_super_resolution
• enable_webgl_timer_query_extensions
• exit_on_context_lost
• disabled_extension_GL_KHR_blend_equation_advanced
• disabled_extension_GL_KHR_blend_equation_advanced_coherent

检测到的问题及修复 #

• 部分驱动无法在GPU进程沙箱中重置D3D设备 → 应用修复exit_on_context_lost
• 首次使用程序前清除uniform → 应用修复clear_uniforms_before_first_program_use
• 更新cc着色器前禁用KHR_blend_equation_advanced → 应用修复禁用相关GL扩展
• Windows系统srgb纹理生成Mipmap前解码编码 → 应用修复decode_encode_srgb_for_generatemipmap
• 站点隔离平台暴露WebGL disjoint_timer_query扩展 → 应用修复enable_webgl_timer_query_extensions
• 非Intel/NVIDIA GPU禁用视频处理器缩放 → 应用修复disable_vp_scaling
• Intel Gen9及更早GPU禁用视频处理器超分辨率 → 应用修复disable_vp_super_resolution
• 多GPU设备禁用硬件MFT Av1编码器 → 应用修复disable_accelerated_av1_encode

解决步骤 #

1. 切换图形后端至OpenGL #

打开chrome://flags/#use-angle，将选项从Default改为OpenGL，重启浏览器测试。D3D11与当前GPU驱动的兼容性问题是常见诱因，OpenGL后端可规避此类冲突。

2. 禁用GPU驱动自动修复 #

打开chrome://flags/#disable-gpu-driver-bug-workarounds，启用该选项并重启浏览器。当前Chrome应用的多个驱动修复可能干扰WebGL/Plotly的渲染逻辑。

3. 验证基础示例与Plotly版本 #

• 先测试Plotly官方最简3D曲面示例，排除自身代码问题：

  const data = [{ z: [[1,2,3],[4,5,6],[7,8,9]], type: 'surface' }];
  const layout = { title: 'Test Surface Plot' };
  Plotly.newPlot('myDiv', data, layout);
  

• 若最简示例正常，检查自身代码是否存在数据格式错误、自定义样式冲突或依赖包冲突；若最简示例也异常，尝试降级Plotly至稳定版（如v2.25.0）排查版本兼容性。

4. 更新GPU驱动 #

从显卡厂商官网（NVIDIA/AMD/Intel）下载安装最新驱动，当前检测到的驱动问题可通过官方更新直接解决，无需依赖Chrome的修复方案。

5. 测试Chrome金丝雀版或重置浏览器 #

• 下载Chrome金丝雀版测试，其包含最新渲染引擎修复，可能已解决D3D11/WebGL兼容性问题。
• 重置Chrome设置：打开chrome://settings/reset，选择“恢复原始默认设置”，排除插件、扩展或自定义配置的干扰。

6. 强制Plotly使用WebGL1 #

初始化Plotly时添加配置项，强制使用WebGL1渲染：

Plotly.newPlot('myDiv', data, layout, { renderer: 'webgl', webgl: { forceWebGl1: true } });

部分GPU对WebGL2的支持存在兼容性缺陷，切换至WebGL1可恢复正常渲染。

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