So, I tried creating my own WebGL Matrixes. Rotate and Scale worked properly, except for Translate. For some reason, it has wrapped (large on the bottom and small on the top). You can test this by changing the translate.y on the functions.js. I also made my function to simplify the WebGL code, so is it possibly messes this matrix up?
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);