3d WebGL和glMatrix最小示例，带有注视和透视变换

我是3d图形的新手，我正在尝试找出如何使用glMatrix数学库中的lookAt和perspective矩阵

在这一点上，我不想做任何花哨的事情，但我相信我遗漏了一些东西，以下是我代码的相关部分：

var lookAtMatrix=mat4.create();
var perspectiveMatrix=mat4.create();
var uniformMatrix=mat4.create();

let eye=vec3.fromValues(0,0,1);
let center=vec3.fromValues(0,0,0);
let up=vec3.fromValues(0,1,0);
mat4.lookAt(lookAtMatrix,eye,center,up);
mat4.perspective(perspectiveMatrix,.4*Math.PI,1,-1,10);
mat4.multiply(uniformMatrix,lookAtMatrix,uniformMatrix);
mat4.multiply(uniformMatrix,perspectiveMatrix,uniformMatrix);
gl.uniformMatrix4fv(matrixLocation,false,uniformMatrix);

当我运行这个时，我相信我应该得到一些东西来显示，但什么都没有显示。我希望看到两个红色三角形（如果不使用lookAt和perspective矩阵，我可以看到它们）。我相信我错过了一些简单的东西，所以任何帮助都将不胜感激。我在下面附上了完整的片段，这里是一把小提琴：

const vertexSource=`
属性向量4 a_位置；
均匀mat4u_矩阵；
void main（）{
gl_位置=u_矩阵*a_位置；
}`;
常量碎片源=`
精密中泵浮子；
void main（）{
gl_FragColor=vec4（255,0,0,1）；
}`;
函数加载（）{
var canvas=document.querySelector（“画布”）；
var gl=canvas.getContext（“webgl”）；
如果（！gl）{return；}
var vertexShader=gl.createShader（gl.VERTEX\u着色器）；
gl.shaderSource（vertexShader，vertexSource）；
gl.compileShader（顶点着色器）；
var fragmentShader=gl.createShader（gl.FRAGMENT\u着色器）；
gl.shaderSource（fragmentShader，fragmentSource）；
gl.compileShader（碎片着色器）；
var program=gl.createProgram（）；
gl.attachShader（程序，顶点着色器）；
gl.attachShader（程序、碎片着色器）；
总账链接程序（程序）；
matrixLocation=gl.getUniformLocation（程序，“u_矩阵”）；
positionLocation=gl.GetAttriblLocation（程序，“a_位置”）；
positionBuffer=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，positionBuffer）；
gl.bufferData（gl.ARRAY\U BUFFER，新浮点数组(
[0,0,0,  .5,.5,0,  .5,0,0,
0,.1,0,  .5,.6,0,  0,.6,-1]
)、总图、静态图）；
设缓冲长度=6；
总图视口（0，0，总图画布宽度，总图画布高度）；
总账清除（总账颜色缓冲位）；
//总账启用（总账消隐面）；
//gl.正面（gl.背面）；
总账启用（总账混合）；
gl.混合方程式（gl.FUNC_添加）；
gl.blendFunc（gl.SRC_ALPHA，gl.1减去gl.SRC_ALPHA）；
gl.useProgram（程序）；
var lookAtMatrix=mat4.create（）；
var perspectiveMatrix=mat4.create（）；
var uniformMatrix=mat4.create（）；
let eye=vec3.fromValues（0,0,1）；
设中心=vec3.fromValues（0,0,0）；
let-up=vec3.fromValues（0,1,0）；
注视（注视矩阵，眼睛，中心，向上）；
mat4.透视图（透视矩阵，.4*Math.PI，1，-1,10）；
mat4.乘法（uniformMatrix，lookAtMatrix，uniformMatrix）；
mat4.乘法（uniformMatrix，透视矩阵，uniformMatrix）；
gl.uniformMatrix4fv（矩阵位置，假，uniformMatrix）；
gl.EnableVertexAttributeArray（位置位置）；
gl.bindBuffer（gl.ARRAY\u BUFFER，positionBuffer）；
总帐VertexAttribute指针（位置位置，3，总帐浮动，假，0,0）；
总图数组（总图三角形，0，缓冲长度）；
}
加载（）
正文{
保证金：0；
背景色：小麦；
}
#html{
背景色：小麦；
}
帆布{
保证金：0；
位置：绝对位置；
宽度：90vw；
高度：90vh；
左：5vw；
顶部：5vh；
显示：块；
背景色：rgba（0,0,0,1）；
}
看起来我是以负值启动平截头体（相机后面的-1），当我改为.001时，它似乎工作了

更正后的代码如下所示：

var lookAtMatrix=mat4.create();
var perspectiveMatrix=mat4.create();
var uniformMatrix=mat4.create();

let eye=vec3.fromValues(0,0,1);
let center=vec3.fromValues(0,0,0);
let up=vec3.fromValues(0,1,0);
mat4.lookAt(lookAtMatrix,eye,center,up);
mat4.perspective(perspectiveMatrix,.6*Math.PI,1,.001,10);
mat4.multiply(uniformMatrix,lookAtMatrix,uniformMatrix);
mat4.multiply(uniformMatrix,perspectiveMatrix,uniformMatrix);
gl.uniformMatrix4fv(matrixLocation,false,uniformMatrix);