Javascript 创建新的模型矩阵Webgl

我是webgl新手，我一直在尝试创建两个围绕自己轴旋转的立方体，但现在，它们只根据一个轴旋转。我想知道我做错了什么，（我想这是因为我需要为旋转创建一个新的模型矩阵，但我不知道如何做）。谢谢大家!

//应用程序信息。
var-app=app |{}；
函数initGL（）
{
var gl=app.gl；
总帐启用（总帐深度测试）；
德普丰克总帐（莱夸尔总帐）；
总图视口（0,0，app.can.width，app.can.height）；
gl.clearColor（0,0,0,1.0）；
总账清除（app.gl.COLOR_BUFFER_BIT |总账深度_BUFFER_BIT）；
var vs=createShaderFromElement（app.gl，“vs”）；
var fs=createShaderRomeElement（app.gl，“fs”）；
app.progObject=buildProgram（app.gl，vs，fs）；
总账使用程序（app.progObject）；
}
函数initScene（）
{
var gl=app.gl；
//几何体缓冲区（顶点）
//
变量位置=[
//正面
-1.0, -1.0,  1.0,
1.0, -1.0,  1.0,
1.0,  1.0,  1.0,
1.0,  1.0,  1.0,
-1.0,  1.0,  1.0,
-1.0, -1.0,  1.0,
//背面
-1.0, -1.0, -1.0,
-1.0,  1.0, -1.0,
1.0,  1.0, -1.0,
1.0,  1.0, -1.0,
1.0, -1.0, -1.0,
-1.0, -1.0, -1.0,
//顶面
-1.0,  1.0, -1.0,
-1.0,  1.0,  1.0,
1.0,  1.0,  1.0,
1.0,  1.0,  1.0,
1.0,  1.0, -1.0,
-1.0,  1.0, -1.0,
//底面
-1.0, -1.0, -1.0,
1.0, -1.0, -1.0,
1.0, -1.0,  1.0,
1.0, -1.0,  1.0,
-1.0, -1.0,  1.0,
-1.0, -1.0, -1.0,
//右脸
1.0, -1.0, -1.0,
1.0,  1.0, -1.0,
1.0,  1.0,  1.0,
1.0,  1.0,  1.0,
1.0, -1.0,  1.0,
1.0, -1.0, -1.0,
//左脸
-1.0, -1.0, -1.0,
-1.0, -1.0,  1.0,
-1.0,  1.0,  1.0,
-1.0,  1.0,  1.0,
-1.0,  1.0, -1.0,
-1.0, -1.0, -1.0
];
app.nPoints=positions.length/3；
变量颜色=[
1,1,1,  1,1,1,  1,1,1, 1,1,1,  1,1,1,  1,1,1,
1,0,0,  1,0,0,  1,0,0, 1,0,0,  1,0,0,  1,0,0,
0,1,0,  0,1,0,  0,1,0, 0,1,0,  0,1,0,  0,1,0,
0,0,1,  0,0,1,  0,0,1, 0,0,1,  0,0,1,  0,0,1,
1,1,0,  1,1,0,  1,1,0, 1,1,0,  1,1,0,  1,1,0,
1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1
];
var-loc，缓冲区；
//创建和复制位置缓冲区。
loc=gl.GetAttriblLocation（app.progObject，“位置”）；
buffer=gl.createBuffer（）；
gl.EnableVertexAttributeArray（loc）；
gl.bindBuffer（gl.ARRAY\u BUFFER，BUFFER）；
gl.VertexAttributePointer（loc，3，gl.FLOAT，false/*无标准化*/，0/*步幅*/，0/*偏移*/）；
总账缓冲数据（总账数组缓冲区、新Float32Array（位置）、总账静态绘图）；
//创建和复制颜色缓冲区。
loc=gl.GetAttriblLocation（app.progObject，“颜色”）；
buffer=gl.createBuffer（）；
gl.EnableVertexAttributeArray（loc）；
gl.bindBuffer（gl.ARRAY\u BUFFER，BUFFER）；
gl.VertexAttributePointer（loc，3，gl.FLOAT，false/*无标准化*/，0/*步幅*/，0/*偏移*/）；
总账缓冲数据（总账数组缓冲区、新Float32Array（颜色）、总账静态绘图）；
//找制服。
app.pmLocation=gl.getUniformLocation（app.progObject，“projMatrix”）；
app.mmLocation=gl.getUniformLocation（app.progObject，“modelMatrix”）；
app.vmLocation=gl.getUniformLocation（app.progObject，“viewMatrix”）；
var mat4=glMatrix.mat4；
app.projMatrix=mat4.create（）；
app.modelMatrix=mat4.create（）；
app.viewMatrix=mat4.create（）；
mat4.透视图（app.projMatrix，Math.PI/4.0/*45度*/，1,0.1100）；
mat4.lookAt（app.viewMatrix，[0,0，-10]，[0,0,0]，[0,1,0]）；
}
函数动画（时间）
{
var gl=app.gl；
var mat4=glMatrix.mat4；
//转换为秒。
var秒=时间*1E-3；
var dtime=时间-app.oldTime；
var角度=dtime*0.001；
mat4.rotateY（应用模型矩阵，应用模型矩阵，角度）；
var mm1=mat4.create（）；
mat4.翻译（mm1，app.modelMatrix，[2,0,0]）；
app.oldTime=时间；
总账清除（app.gl.COLOR_BUFFER_BIT |总账深度_BUFFER_BIT）；
gl.uniformMatrix4fv（app.pmLocation，false，app.projMatrix）；
总账uniformMatrix4fv（app.mmLocation，false，mm1）；
总账uniformMatrix4fv（app.vmLocation，false，app.viewMatrix）；
总图绘制阵列（总图三角形，0，应用点）；
//浇注Desiner autre立方体、calculer autre模型矩阵
//et重新分配器…总图绘制阵列（总图三角形，0，应用程序点）；
mat4.rotateY（app.modelMatrix，app.modelMatrix，angle）
var mm2=mat4.create（）；
mat4.翻译（mm2，app.modelMatrix，[-2,0,0]）；
gl.uniformMatrix4fv（app.pmLocation，false，app.projMatrix）；
gl.uniformMatrix4fv（app.MM位置，假，mm2）；
总账uniformMatrix4fv（app.vmLocation，false，app.viewMatrix）；
总图绘制阵列（总图三角形，0，应用点）；
window.requestAnimationFrame（动画）；
}
函数fovChanged（id，值）
{
控制台日志（“视野角度：”，值）；
var label=document.getElementById（'output fov'）；
label.innerHTML=值；
}
函数已更改（id、值）
{
log（“远平面：”，值）；
var label=document.getElementById（'output far'）；
label.innerHTML=值；
}
函数init（）
{
[app.can，app.gl]=getContextGL（'can'）；
如果（app.can==null | | app.gl==null）
{
警报（“无法初始化画布或上下文”）；
返回；
}
app.can.width=app.can.height*（app.can.clientWidth/app.can.clientHeight）；
var rect=app.can.getBoundingClientRect（）；
app.scaleX=app.can.width/rect.width；
app.scaleY=app.can.height/rect.height；
initGL（）；
初始化场景（）；
app.oldTime=0；
动画（0）；
}

div
{
}
#主要部门
{
显示：内联块；
}
#视口，#管理器
{
浮动：左；
保证金：自动；
}
颜色
{
宽度：100px；
高度：50px；
}
蓝先生{
背景
mat = idenity
mat = mat * translation
mat = mat * rotation

mat = identity
translate(mat, ...)
rotate(mat, ...)

mat = translation(...);
rotate(mat, ...);