如何使我的 WebGL 坐标系 "Top Left" 定向？

Question

为了计算效率，我使用片段着色器实现了一个简单的二维元球算法。要渲染的圆圈数据是左上方向的。

除了 WebGL 坐标系的原点（左下角）让我很为难：显然，渲染输出沿水平轴镜像。

在 https://webglfundamentals.org/webgl/lessons/webgl-2d-rotation.html（和其他人）之后，我尝试使用顶点着色器旋转物体。不幸的是没有任何成功。

实现WebGL坐标系重定向最简单的方法是什么？

如果有任何提示和指点，我将不胜感激，谢谢！ :)

请在此处找到一个有效（无效 ;)）示例： https://codesandbox.io/s/gracious-fermat-znbsw?file=/src/index.js

Answer 1

由于您在像素着色器中使用 gl_FragCoord，因此无法从顶点着色器执行此操作，因为 gl_FragCoord 是 canvas 坐标，但颠倒了。你可以很容易地在 javascript 中将它反转到 WebGL

  gl.uniform3fv(gl.getUniformLocation(program, `u_circles[${i}]`), [
    circles[i].x,
    canvas.height - circles[i].y - 1,
    circles[i].r
  ]);

如果您想在着色器中执行此操作并继续使用 gl_FragCoord，那么您应该使用制服将 canvas 的高度传递给着色器，并在那里进行 y 的转换像

vec2 screenSpace = vec2(gl_FragCoord.x, canvasHeight - gl_FragCoord.y - 1);

-1 是因为坐标从 0 开始。