Матрицы Webgl переводят обертку вместо перемещения ⇐ Javascript

[Anonymous]

Итак, я попытался создать свои собственные матрицы Webgl. Вращение и масштаб работал должным образом, за исключением перевода. По какой -то причине он обернулся (большой на дне и маленький сверху). Вы можете проверить это, изменив Translate.y на functions.js . Я также сделал свою функцию, чтобы упростить код WebGL, так что, возможно, это может испортить эту матрицу?




webglmatrix.js
function GLMatrix4(){
this.Translate = {
x:0,
y:0,
z:0
}
this.Scale = {
x:1,
y:1,
z:1
}
this.Rotate = {
x:0,
y:0,
z:0
}
this.Create = function(){
var m4 = new Float32Array(16)
m4[0] = 1
m4[5] = 1
m4[10] = 1
m4[15] = 1
return m4
}
this.MatrixMulit4 = function(m1,m2){
var r1 = m1[0]*m2[0] + m1[1]*m2[4] + m1[2]*m2[8] + m1[3]*m2[12]
var r2 = m1[0]*m2[1] + m1[1]*m2[5] + m1[2]*m2[9] + m1[3]*m2[13]
var r3 = m1[0]*m2[2] + m1[1]*m2[6] + m1[2]*m2[10] + m1[3]*m2[14]
var r4 = m1[0]*m2[3] + m1[1]*m2[7] + m1[2]*m2[11] + m1[3]*m2[15]
var r5 = m1[4]*m2[0] + m1[5]*m2[4] + m1[6]*m2[8] + m1[7]*m2[12]
var r6 = m1[4]*m2[1] + m1[5]*m2[5] + m1[6]*m2[9] + m1[7]*m2[13]
var r7 = m1[4]*m2[2] + m1[5]*m2[6] + m1[6]*m2[10] + m1[7]*m2[14]
var r8 = m1[4]*m2[3] + m1[5]*m2[7] + m1[6]*m2[11] + m1[7]*m2[15]
var r9 = m1[8]*m2[0] + m1[9]*m2[4] + m1[10]*m2[8] + m1[11]*m2[12]
var r10 = m1[8]*m2[1] + m1[9]*m2[5] + m1[10]*m2[9] + m1[11]*m2[13]
var r11 = m1[8]*m2[2] + m1[9]*m2[6] + m1[10]*m2[10] + m1[11]*m2[14]
var r12 = m1[8]*m2[3] + m1[9]*m2[7] + m1[10]*m2[11] + m1[11]*m2[15]
var r13 = m1[12]*m2[0] + m1[13]*m2[4] + m1[14]*m2[8] + m1[15]*m2[12]
var r14 = m1[12]*m2[1] + m1[13]*m2[5] + m1[14]*m2[9] + m1[15]*m2[13]
var r15 = m1[12]*m2[2] + m1[13]*m2[6] + m1[14]*m2[10] + m1[15]*m2[14]
var r16 = m1[12]*m2[3] + m1[13]*m2[7] + m1[14]*m2[11] + m1[15]*m2[15]
return new Float32Array([r1,r2,r3,r4,r5,r6,r7,r8,r9,r10,r11,r12,r13,r14,r15,r16])
}
this.getMatrix = function(){
var Scale = this.Create()
Scale[0] = this.Scale.x
Scale[5] = this.Scale.y
Scale[10] = this.Scale.z

var Translate = this.Create()
Translate[3] = this.Translate.x
Translate[7] = this.Translate.y
Translate[11] = this.Translate.z

var RotateX = this.Create()
RotateX[5] = Math.cos(this.Rotate.x)
RotateX[6] = -Math.sin(this.Rotate.x)
RotateX[9] = Math.sin(this.Rotate.x)
RotateX[10] = Math.cos(this.Rotate.x)

var RotateY = this.Create()
RotateY[0] = Math.cos(this.Rotate.y)
RotateY[2] = Math.sin(this.Rotate.y)
RotateY[8] = -Math.sin(this.Rotate.y)
RotateY[10] = Math.cos(this.Rotate.y)

var RotateZ = this.Create()
RotateZ[0] = Math.cos(this.Rotate.z)
RotateZ[1] = -Math.sin(this.Rotate.z)
RotateZ[4] = Math.sin(this.Rotate.z)
RotateZ[5] = Math.cos(this.Rotate.z)

var res1 = this.MatrixMulit4(RotateX,Scale)
var res2 = this.MatrixMulit4(RotateY,res1)
var res3 = this.MatrixMulit4(RotateZ,res2)
var res4 = this.MatrixMulit4(Translate,res3)
return res4
}
}

webgl.js
function SimpleGL(gl){
this.shaderArr = []
this.sProgram = undefined
this.makeBuffer = function(arr){
var buffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
gl.bufferData(gl.ARRAY_BUFFER, arr, gl.STATIC_DRAW)
return buffer
}
this.addShader = function(str,type){
var shader = gl.createShader(type)
gl.shaderSource(shader, str)
gl.compileShader(shader)
this.shaderArr.push(shader)
}
this.makeShaderProgram = function(){
var shaderProgram = gl.createProgram()
for(var i=0;i

Подробнее здесь: https://stackoverflow.com/questions/794 ... ad-of-move