WebGl矩阵翻译包装而不是移动

Question

，我尝试创建自己的WebGL矩阵。除翻译外，旋转和比例正常工作。由于某种原因，它已包裹（底部大，顶部很小）。您可以通过更改翻译。我还做出了简化WebGL代码的功能，因此可能会弄乱此矩阵吗？ Index.html

<canvas width="500px" height="500px" id="canvas"></canvas>
<script src="WebGLMatrix.js"></script>
<script src="WebGL.js"></script>
<script src="functions.js"></script>

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<this.shaderArr.length;i++){
            gl.attachShader(shaderProgram, this.shaderArr[i])
        }
        gl.linkProgram(shaderProgram)
        gl.useProgram(shaderProgram)
        this.sProgram = shaderProgram
    }
    this.linkAttribute = function(variable,buffer,readnum){
        var location = gl.getAttribLocation(this.sProgram, variable)
        gl.enableVertexAttribArray(location)
        gl.bindBuffer(gl.ARRAY_BUFFER,buffer)
        gl.vertexAttribPointer(location,readnum,gl.FLOAT,false,0,0)
    }
    this.linkMatrix4 = function(variable,mat4){
        var mat4Location = gl.getUniformLocation(this.sProgram,variable)
        gl.uniformMatrix4fv(mat4Location,false,mat4)
    }
}

functions.js

var c = document.getElementById('canvas')
var gl = c.getContext('webgl')
var webgl = new SimpleGL(gl)
var m4 = new GLMatrix4()

const vertices = new Float32Array([
    0, 0.5, 0,
   -.5, -0.5, 0,
    .5, -.5, 0
]);
const colors = new Float32Array([
    1,0,0,
    0,1,0,
    0,0,1
]);
const vertexShaderSource = `
    precision mediump float;
    attribute vec3 a_position;
    attribute vec3 a_color;
    varying vec3 vColor;
    uniform mat4 matrix;

    void main() {
        vColor = a_color;
        gl_Position = matrix * vec4(a_position, 1);
    }
`;
const fragmentShaderSource = `
    precision mediump float;
    varying vec3 vColor;

    void main() {
        gl_FragColor = vec4(vColor, 1.0);
    }
`;

const vertexBuffer = webgl.makeBuffer(vertices)
const colorBuffer = webgl.makeBuffer(colors)
webgl.addShader(vertexShaderSource,gl.VERTEX_SHADER)
webgl.addShader(fragmentShaderSource,gl.FRAGMENT_SHADER)
webgl.makeShaderProgram()
webgl.linkAttribute('a_position',vertexBuffer,3)
webgl.linkAttribute('a_color',colorBuffer,3)

m4.Translate.y = 1 //Supposed to be move up
webgl.linkMatrix4('matrix',m4.getMatrix())
gl.clearColor(0,0,0,1);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES,0,3);

我终于找到了！因此，基本上您只需要更改翻译中的索引：

从：

Translate[3] = this.Translate.x
Translate[7] = this.Translate.y
Translate[11] = this.Translate.z

Answer 1

TO：

Translate[12] = this.Translate.x
Translate[13] = this.Translate.y
Translate[14] = this.Translate.z

希望这将在以后帮助其他用户！