Javascript WebGL三维透视图

我是WebGL新手，现在正在学习中的WebGL教程。我在画布上画了一个3d立方体，效果很好

然后我试着从三维透视图。在那之后，我的立方体拉伸了，它看起来像这样。（我使用

gl矩阵

进行矩阵计算）

const canvas=document.querySelector（“canvas”）；
const gl=canvas.getContext（“webgl”）；
常量vsSource=`
属性向量4；
属性向量4颜色；
均匀mat4 uModelViewMatrix；
均匀mat4映射矩阵；
均匀vec2溶液；
均匀浮动模糊因子；
可变的vec4颜色；
void main（）{
vec4位置=uModelViewMatrix*投影矩阵*；
vec4 zeroToOne=位置/vec4（uResolution，uResolution.x，1）；
vec4 zeroToTwo=zeroToOne*2.0；
vec4 clipSpace=zeroToTwo-1.0；
float zToDivideBy=1.0+clipSpace.z*uFudgeFactor；
gl_Position=vec4（vec3（clipSpace.xy/zToDivideBy，clipSpace.z）*vec3（1，-1,1），clipSpace.w）；
V颜色=A颜色；
}
`
常数fsSource=`
精密中泵浮子；
可变的vec4颜色；
void main（）{
gl_FragColor=vColor；
}
`
const program=initShaderProgram（vsSource，fsSource）
常量程序信息={
节目:节目,，
消耗：{
vertexPosition:gl.GetAttriblLocation（程序，“避免Exposition”），
颜色：gl.GetAttributeLocation（程序“aColour”）
},
统一位置：{
modelViewMatrix:gl.getUniformLocation（程序，“uModelViewMatrix”），
projectionMatrix:gl.getUniformLocation（程序，“uProjectionMatrix”），
决议：gl.getUniformLocation（程序，“uResolution”），
fudgeFactor:gl.getUniformLocation（程序，“uFudgeFactor”）
}
}
const model=mat4.create（）
mat4.translate（模型，模型，[400200400]）
const projectionMatrix=mat4.create（）
mat4.透视图（projectionMatrix，Math.PI/3,2,1,1000）
让buffers=initBuffers（）；
请求动画帧（drawScene）；
函数drawsecene（）{
总图视口（0，0，canvas.width，canvas.height）
gl.clearColor（0,0,0,1）
总帐净空深度（1）
总帐启用（总帐深度测试）
总帐depthFunc（总帐LEQUAL）
总图清除（总图颜色缓冲区位总图深度缓冲区位）
总账使用程序（programInfo.program）
{
常量numComponents=3；
常量类型=gl.FLOAT
常量normalize=false
常数步长=0
常数偏移=0
gl.bindBuffer（gl.ARRAY\u BUFFER，buffers.position）
gl.EnableVertexAttributeArray（programInfo.AttributeLocations.VertexAttributeArray）
gl.VertexAttribute指针（programInfo.attribLocations.VertexExpositions、numComponents、类型、规格化、步幅、偏移）
draw3DBox（0,0,0,100100100）
}
{
gl.bindBuffer（gl.ARRAY\u BUFFER，buffers.color）
gl.EnableVertexAttributeArray（programInfo.AttributeLocations.color）
gl.VertexAttribute指针（programInfo.AttriblLocations.color，4，gl.FLOAT，false，0，0）
设置颜色（）
}
gl.uniformMatrix4fv（programInfo.uniformLocations.modelViewMatrix，false，model）
gl.uniformMatrix4fv（programInfo.uniformLocations.projectionMatrix，false，projectionMatrix）
gl.uniform2f（programInfo.uniformLocations.resolution、canvas.width、canvas.height）
总账uniform1f（programInfo.uniformLocations.fudgeFactor，0.4）
总图绘图阵列（总图三角带，0,24）
requestAnimationFrame（绘图场景）
}
函数initShaderProgram（vsSource，fsSource）{
const vertexShader=loadShader（gl.VERTEX_着色器，vsSource）
常量fragmentShader=loadShader（gl.FRAGMENT\u着色器，fsSource）
const shaderProgram=gl.createProgram（）
gl.attachShader（着色器程序、顶点着色器）
gl.attachShader（着色器程序、碎片着色器）
总账链接程序（着色器程序）
if（！gl.getProgramParameter（着色器程序，gl.LINK_状态））{
console.log（“无法初始化着色器程序>>”，gl.getProgramInfoLog（着色器程序））
返回空
}
返回着色器程序
}
函数loadShader（类型、源）{
常量着色器=gl.createShader（类型）
gl.shaderSource（着色器，源）
gl.compileShader（着色器）
if（！gl.getShaderParameter（着色器，gl.COMPILE_状态））{
console.log（“[ERROR]编译着色器时出错>>”+gl.getShaderInfoLog（着色器））
gl.deleteShader（着色器）
返回空
}
返回着色器
}
函数initBuffers（）{
const positionBuffer=gl.createBuffer（）
gl.bindBuffer（gl.ARRAY\u BUFFER，positionBuffer）
const colorBuffer=gl.createBuffer（）
gl.bindBuffer（gl.ARRAY\u BUFFER，colorBuffer）
返回{
颜色：colorBuffer，
位置：位置缓冲区
}
}
功能绘图框（x、y、z、宽度、高度、深度）{
常量位置=新数组([
//正面
x-宽度/2，y-高度/2，z-深度/2，
x+宽度/2，y-高度/2，z-深度/2，
x-宽度/2，y+高度/2，z-深度/2，
x+宽度/2，y+高度/2，z-深度/2，
//对
x+宽度/2，y+高度/2，z-深度/2，
x+宽度/2，y-高度/2，z-深度/2，
x+宽度/2，y+高度/2，z+深度/2，
x+宽度/2，y-高度/2，z+深度/2，
//背
x+宽度/2，y-高度/2，z+深度/2，
x-宽度/2，y-高度/2，z+深度/2，
x+宽度/2，y+高度/2，z+深度/2，
x-宽度/2，y+高度/2，z+深度/2，
//底部
x+宽度/2，y+高度/2，z-深度/2，
x-宽度/2，y+高度/2，z-深度/2，
x+宽度/2，y+高度/2，z+深度/2，
x-宽度/2，y+高度/2，z+深度/2，
//左
x-宽度/2，y+高度/2，z+深度/2，
x-宽度/2，y+高度/2，z-深度/2，
x-宽度/2，y-高度/2，z+深度/2，
x-宽度/2，y-高度/2，z-深度/2，
//顶
x-宽度/2，y-高度/2，z-深度/2，
x+宽度/2，y-高度/2，z-深度/2，
x-宽度/2，y-高度/2，z+深度/2，
x+宽度/2，y-高度/2，z+深度/2，
]);
总帐缓冲数据（总帐数组缓冲区、新浮动数组（位置）、总帐静态绘图）
}
函数setcolors（）{
康斯特克鲁
    vec4 position = uModelViewMatrix * uProjectionMatrix * aVertexPosition;
    vec4 zeroToOne = position / vec4(uResolution, uResolution.x, 1);
    vec4 zeroToTwo = zeroToOne * 2.0;
    vec4 clipSpace = zeroToTwo - 1.0;

    float zToDivideBy = 1.0 + clipSpace.z * uFudgeFactor;

    gl_Position = vec4(vec3(clipSpace.xy / zToDivideBy , clipSpace.z) * vec3(1, -1, 1), clipSpace.w);

    gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;

    gl_Position = u_matrix * position;