如何将WebGL坐标系调整为以左上角为原点的朝向？

以下是3种实现成本极低的坐标系重定向方案，按实现便捷度排序：

• 全局配置翻转（仅需1行代码）
  直接在WebGL上下文初始化完成后调用全局像素存储配置，全局生效，无需修改着色器代码：

  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
  

  该配置会自动翻转所有渲染输出、纹理上传的Y轴方向，直接匹配左上角为原点的坐标逻辑。

• 顶点着色器修改
  如果不想修改全局配置，可直接在顶点着色器的裁剪空间计算步骤翻转Y轴，无需额外引入矩阵变换：

  attribute vec2 a_position;
  uniform vec2 u_resolution;
  
  void main() {
    // 先将像素坐标转换为WebGL标准裁剪空间
    vec2 clipSpace = (a_position / u_resolution) * 2.0 - 1.0;
    // 直接翻转Y轴完成坐标系适配
    gl_Position = vec4(clipSpace * vec2(1, -1), 0.0, 1.0);
  }
  

  之前尝试旋转变换未生效的核心原因是旋转操作需要额外对齐原点和平移修正，完全不需要使用旋转，直接翻转Y轴的计算逻辑更简单、出错概率更低。

• 片元着色器修改
  如果顶点逻辑不想改动，可直接在片元着色器中修正片元坐标：

  uniform vec2 u_resolution;
  
  void main() {
    // 将默认左下角为原点的片元坐标转换为左上角原点
    vec2 topLeftPos = vec2(gl_FragCoord.x, u_resolution.y - gl_FragCoord.y);
    // 后续直接使用topLeftPos执行原有metaballs的计算逻辑即可
    // ...原有渲染逻辑
  }
  

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