Opengl es webGL中的二维图形

更新：此代码实际上有效。我的bug是对

glViewport

的一次偶然呼叫；在webGL中，这似乎是浏览器窗口锚定的，而不是画布相关的，它将所有内容都推离了屏幕。因此，本问题中的代码显示了如何为WebGL创建正确的正交投影：

webGL没有

2D

。我从以下地方复制并转置了OpenGL矩阵：

然后，我使用

createOrtho2D（0，canvas.offsetWidth，canvas.offsetHeight，0）

设置投影均匀性

例如，

createOrtho2D（01024768,0）

=

我用gl.uniformMatrix4fv（this.program.mvp，false，mvp）上传这个并在顶点着色器中使用

gl_Position=mvp*vec4（顶点，z，1.0）应用它

但是，这不起作用：


点10,10在屏幕上不可见
点10100就在屏幕的顶部

我出了什么错？
我想一定是别的什么地方出了错。如果我将（10,10,0,1）乘以所示的正交矩阵，得到（-0.98,0.974,0,1），它应该位于NDC屏幕的左上角。可能是您的统一创建/上载代码或着色器中的其他内容导致了此问题。您的矩阵看起来不错，如果我没有遗漏某些内容，它与我用于投影矩阵的内容相同。顺便说一句，我建议使用。没有理由重新发明轮子
function createOrtho2D(left,right,bottom,top) {
    var near = -1, far = 1, rl = right-left, tb = top-bottom, fn = far-near;
    return [        2/rl,                0,              0,  0,
                       0,             2/tb,              0,  0,
                       0,                0,          -2/fn,  0,
        -(right+left)/rl, -(top+bottom)/tb, -(far+near)/fn,  1];
}

[ 0.001953125,                      0,  0,  0, 
            0, -0.0026041666666666665,  0,  0, 
            0,                      0, -1,  0, 
           -1,                      1,  0,  1]