Javascript 正方形不'；不使用透视矩阵显示

我在开始使用WebGL时遇到问题。我不明白为什么，但它不起作用的原因是透视矩阵

因此，有一段代码不适用于透视矩阵：

<script type="x-shader/x-fragment" id="shader-fs">
    void main (void) {
        gl_FragColor = vec4(1,1,1,1);
    }
</script>
<script type="x-shader/x-vertex" id="shader-vs">
    attribute vec3 aVertexPosition;

    uniform mat4 pMatrix;
    uniform mat4 mvMatrix;

    void main(void) {
        gl_Position = pMatrix * mvMatrix * vec4(aVertexPosition, 1.0);
    }
</script>
<script type="text/javascript">
    function makePerspective(fovy, aspect, znear, zfar) {
        var ymax = znear * Math.tan(fovy * Math.PI / 360.0);
        var ymin = -ymax;
        var xmin = ymin * aspect;
        var xmax = ymax * aspect;

        return makeFrustum(xmin, xmax, ymin, ymax, znear, zfar);
    }

    function makeFrustum(left, right,
                         bottom, top,
                         znear, zfar) {
        var X = 2*znear/(right-left);
        var Y = 2*znear/(top-bottom);
        var A = (right+left)/(right-left);
        var B = (top+bottom)/(top-bottom);
        var C = -(zfar+znear)/(zfar-znear);
        var D = -2*zfar*znear/(zfar-znear);

        return [X, 0, A, 0,
                0, Y, B, 0,
                0, 0, C, D,
                0, 0, -1, 0];
    }

    function identity() {
        return [
            1,0,0,0,
            0,1,0,0,
            0,0,1,0,
            0,0,0,1
        ];
    }

    var canvas, gl;
    var win = {w: 0,h: 0};
    var shaderProgram, vertexPositionAttribute;
    var horizAspect = 480/640;
    var squareVerticesBuffer;

    function getShader(gl, id) {
        var shaderScript = document.getElementById(id);

        if (!shaderScript) {
            return null;
        }

        theSource = "";
        currentChild = shaderScript.firstChild;

        while (currentChild) {
            if (currentChild.nodeType == currentChild.TEXT_NODE) {
                theSource += currentChild.textContent;
            }

            currentChild = currentChild.nextSibling;
        }

        if (shaderScript.type == "x-shader/x-fragment") {
            shader = gl.createShader(gl.FRAGMENT_SHADER);
        }
        else if (shaderScript.type == "x-shader/x-vertex") {
            shader = gl.createShader(gl.VERTEX_SHADER);
        }
        else {
            return null;
        }

        gl.shaderSource(shader,theSource);
        gl.compileShader(shader);

        if (!gl.getShaderParameter(shader,gl.COMPILE_STATUS)) {
            alert("An error compiling the shader "+gl.getShaderInfoLog(shader));
            return null;
        }

        return shader;
    }
    function initShaders() {
        var fragmentShader = getShader(gl,"shader-fs");
        var vertexShader = getShader(gl,"shader-vs");

        shaderProgram = gl.createProgram();
        gl.attachShader(shaderProgram,fragmentShader);
        gl.attachShader(shaderProgram,vertexShader);
        gl.linkProgram(shaderProgram);

        if (!gl.getProgramParameter(shaderProgram,gl.LINK_STATUS)) {
            alert("Cannot init shaders!");
        }

        gl.useProgram(shaderProgram);

        vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
        gl.enableVertexAttribArray(vertexPositionAttribute);
    }
    function initBuffers() {
        squareVerticesBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);

        var vertices = [
            1,1,0,
            -1,1,0,
            1,-1,0,
            -1,-1,0,
        ];

        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices),gl.STATIC_DRAW);
    }
    function drawScene() {
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

        gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
        gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);

        var perspectiveMatrix = makePerspective(45,640/480,0.1,100); 
        /* if you set up the line above ^ to: [
                1,0,0,0,
                0,1,0,0,
                0,0,1,0,
                0,0,0,1
            ] it will work
        */
        var pUniform = gl.getUniformLocation(shaderProgram, "pMatrix");
        gl.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix));

        var mvMatrix = identity();

        var mvUniform = gl.getUniformLocation(shaderProgram, "mvMatrix");
        gl.uniformMatrix4fv(mvUniform, false, new Float32Array(mvMatrix));

        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    }

    function load() {
        canvas = document.getElementById("c");
        gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
        win.w = canvas.width; win.h = canvas.height;

        if (gl) { // Ok!
            gl.clearColor(0.0, 0.0, 0.0, 1.0);
            gl.enable(gl.DEPTH_TEST);
            gl.depthFunc(gl.LEQUAL);
            gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);

            initShaders();
            initBuffers();

            drawScene();
        }
        else { // Fallback to 2d!
            gl = canvas.getContext("2d");

            gl.font = "14px Arial";
            gl.textAlign = "center";
            gl.textBaseline = "bottom";
            gl.fillStyle = "#000";

            gl.fillText("You're browser doesn't support WebGL!",win.w/2,win.h/2);
        }
    }

    window.onload = load;
</script>

真空总管（真空）{
gl_FragColor=vec4（1,1,1,1）；
}
属性向量3；
均匀mat4矩阵；
一致mat4矩阵；
真空总管（真空）{
gl_位置=pMatrix*mvMatrix*vec4（1.0）；
}
函数makePerspective（fovy、aspect、znear、zfar）{
var ymax=znear*Math.tan（fovy*Math.PI/360.0）；
var-ymin=-ymax；
var xmin=ymin*aspect；
var xmax=ymax*纵横比；
返回makeFrustum（xmin、xmax、ymin、ymax、znear、zfar）；
}
函数makeFrustum（左、右、，
底部，顶部，
znear，zfar）{
var X=2*znear/（右-左）；
变量Y=2*znear/（上下）；
变量A=（右+左）/（右-左）；
var B=（顶部+底部）/（顶部-底部）；
var C=-（zfar+znear）/（zfar-znear）；
var D=-2*zfar*znear/（zfar-znear）；
返回[X，0，A，0，
0，Y，B，0，
0，0，C，D，
0, 0, -1, 0];
}
函数标识（）{
返回[
1,0,0,0,
0,1,0,0,
0,0,1,0,
0,0,0,1
];
}
德国劳埃德船级社；
var-win={w:0，h:0}；
var shaderProgram，vertexPositionAttribute；
var horizAspect=480/640；
var平方缓冲区；
函数getShader（gl，id）{
var shaderScript=document.getElementById（id）；
如果（！shaderScript）{
返回null；
}
来源=”；
currentChild=shaderScript.firstChild；
while（当前儿童）{
if（currentChild.nodeType==currentChild.TEXT\u节点）{
source+=currentChild.textContent；
}
currentChild=currentChild.nextSibling；
}
if（shaderScript.type==“x-shader/x-fragment”）{
着色器=gl.createShader（gl.FRAGMENT\u着色器）；
}
else if（shaderScript.type==“x-shader/x-vertex”）{
着色器=gl.createShader（gl.VERTEX\u着色器）；
}
否则{
返回null；
}
gl.shaderSource（着色器，源）；
gl.compileShader（着色器）；
if（！gl.getShaderParameter（着色器，gl.COMPILE_状态））{
警报（“编译着色器时出错”+gl.getShaderInfoLog（着色器））；
返回null；
}
返回着色器；
}
函数initShaders（）{
var fragmentShader=getShader（gl，“着色器fs”）；
var vertexShader=getShader（gl，“着色器vs”）；
shaderProgram=gl.createProgram（）；
gl.attachShader（着色器程序、碎片着色器）；
gl.attachShader（着色器程序、顶点着色器）；
gl.linkProgram（着色器程序）；
if（！gl.getProgramParameter（着色器程序，gl.LINK_状态））{
警报（“无法初始化着色器！”）；
}
gl.useProgram（shaderProgram）；
vertexPositionAttribute=gl.GetAttributeLocation（着色器程序，“避免曝光”）；
gl.EnableVertexAttributeArray（vertexPositionAttribute）；
}
函数initBuffers（）{
squareVerticesBuffer=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY_BUFFER，squareVerticesBuffer）；
变量顶点=[
1,1,0,
-1,1,0,
1,-1,0,
-1,-1,0,
];
gl.bufferData（gl.ARRAY\u BUFFER、新Float32Array（顶点）、gl.STATIC\u DRAW）；
}
函数drawsecene（）{
gl.clear（gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT）；
gl.bindBuffer（gl.ARRAY_BUFFER，squareVerticesBuffer）；
gl.VertexAttribute指针（vertexPositionAttribute，3，gl.FLOAT，false，0，0）；
var透视矩阵=makePerspective（45640/480,0.1100）；
/*如果将“^”上方的行设置为：[
1,0,0,0,
0,1,0,0,
0,0,1,0,
0,0,0,1
]它会起作用的
*/
var pUniform=gl.getUniformLocation（着色器程序，“pMatrix”）；
gl.uniformMatrix4fv（pUniform、false、新Float32Array（透视矩阵））；
var mvMatrix=identity（）；
var mvUniform=gl.getUniformLocation（着色器程序，“mvMatrix”）；
gl.uniformMatrix4fv（mvUniform、false、新Float32Array（mvMatrix））；
总图.绘图阵列（总图.三角带，0,4）；
}
函数加载（）{
canvas=document.getElementById（“c”）；
gl=canvas.getContext（“webgl”）| canvas.getContext（“实验性webgl”）；
win.w=canvas.width；win.h=canvas.height；
如果（gl）{//Ok！
gl.clearColor（0.0,0.0,0.0,1.0）；
总帐启用（总帐深度测试）；
德普丰克总帐（莱夸尔总帐）；
gl.clear（gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT |）；
initShaders（）；
initBuffers（）；
drawScene（）；
}
否则{//退回到2d！
gl=canvas.getContext（“2d”）；
gl.font=“14px Arial”；
gl.textAlign=“中心”；
gl.textb基线=“底部”；
gl.fillStyle=“#000”；
gl.fillText（“您的浏览器不支持WebGL！”，win.w/2，win.h/2）；
}
}
window.onload=加载；

---

我从中获取了代码。但是我不想使用

Sylvester

或

glMatrix

我已经找到了解决问题的方法！我错误地认为创建矩阵数组，接下来的每4个元素都是列而不是行。因此，转换矩阵为：

var arr = [
    1,0,0,0,
    0,1,0,0,
    0,0,1,0,
    vx,vy,vz,1,
];

不是这样的：

var arr = [
    1,0,0,vx,
    0,1,0,vy,
    0,0,1,vz,
    0,0,0,1,
];

---

这个东西叫做矩阵的转置。