WebGL画布鼠标移动时崩溃，仅Webpack打包场景复现

针对你遇到的纯HTML+Script版本正常、Webpack打包后鼠标移动画布无警告崩溃的问题，以下是核心排查方向和解决方法：

1. GLSL文件导入格式错误 #

Webpack默认不会正确处理GLSL文件，若未配置合适loader，shader代码可能被转义、截断或添加额外字符，导致WebGL编译/链接失败（隐性崩溃，无表面报错）。

• 解决：使用raw-loader导入GLSL文件，确保代码原样输出。在Webpack配置中添加规则：

  module: {
    rules: [
      {
        test: /\.(glsl|frag|vert)$/,
        use: 'raw-loader',
        exclude: /node_modules/
      }
    ]
  }
  

• 验证：在代码中打印导入的shader内容，确认与原文件完全一致，无多余引号、转义符。

2. Canvas尺寸与鼠标坐标计算错误 #

打包后可能出现Canvas实际绘制尺寸（width/height属性）和CSS显示尺寸不匹配，鼠标坐标转换逻辑错误，导致绘制操作超出WebGL缓冲区范围，触发隐性崩溃。

• 解决：确保Canvas属性尺寸匹配显示尺寸（考虑设备像素比），鼠标坐标基于实际尺寸计算：

  function getMousePos(canvas, evt) {
    const rect = canvas.getBoundingClientRect();
    return {
      x: (evt.clientX - rect.left) * (canvas.width / rect.width),
      y: (evt.clientY - rect.top) * (canvas.height / rect.height)
    };
  }
  

• 排查：打印鼠标坐标和Canvas尺寸，确认坐标在[0, canvas.width]、[0, canvas.height]范围内。

3. 模块作用域与变量污染 #

纯静态版本依赖全局变量，但Webpack会将代码封装在模块作用域内，若代码中未正确声明WebGL相关变量（如gl、程序对象），会导致运行时变量异常，引发上下文崩溃。

• 解决：在模块内正确初始化WebGL资源，避免依赖全局作用域：

  const canvas = document.getElementById('canvas');
  const gl = canvas.getContext('webgl');
  if (!gl) {
    throw new Error('WebGL not supported');
  }
  // 所有WebGL操作基于模块内的gl变量
  

4. 代码压缩/混淆破坏逻辑 #

若Webpack开启了代码压缩（如TerserPlugin），可能误修改shader字符串或WebGL变量名，导致程序无法正确链接。

• 解决：暂时关闭压缩配置测试，或配置压缩工具忽略GLSL相关代码，比如在TerserPlugin中添加规则排除shader字符串。

5. WebGL资源频繁创建/销毁 #

若鼠标移动时重复创建WebGL资源（如缓冲区、程序对象），会触发浏览器回收WebGL上下文，表现为画布崩溃。

• 解决：WebGL资源仅初始化一次，鼠标移动时仅更新数据（如更新顶点缓冲区内容），而非重建资源。

额外验证步骤 #

监听WebGL上下文丢失事件，确认是否为上下文回收导致崩溃：

canvas.addEventListener('webglcontextlost', (e) => {
  console.error('WebGL上下文丢失:', e);
  e.preventDefault();
});

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