关于opengl es：WebGL翻译问题

WebGL translation issue

我是WebGL的新手。我正在尝试矩阵运算，以尝试各种运算，例如旋转，反射，缩放和平移。我正在使用《交互式计算机图形学，一种使用WebGL的自上而下的方法(第七版)》一书和帮助程序库来加载着色器。

所有这些都可以正常工作，除了翻译。我正在绘制一个简单的2D三角形(现在使用剪辑坐标来使事情保持简单)，并尝试将三角形平移远离x轴的原点-0.5和y轴的-0.5。

这是顶点着色器中的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13

但是，三角形是倾斜的并且没有按我预期的那样平移。

这是我的js文件中的代码：
var gl;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

这是翻译后的：
enter image description here

此方法有效：

顶点着色器：

1
2
3
4
5
6
7

...和js文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

var gl;
var translationMatrix;
var translationMatrixLoc;

window.onload = function init()
{
var canvas = document.getElementById("gl-canvas" );
gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) {
alert("WebGL isn't available" );
}

var vertices = [-0.2, -0.2, 0, 0.2, 0.2, -0.2];

gl.viewport( 0, 0, canvas.width, canvas.height );
gl.clearColor( 1.0, 1.0, 1.0, 1.0 );

// Load shaders and initialize attribute buffers
var program = initShaders( gl,"vertex-shader","fragment-shader" );

gl.useProgram( program );

// Load the data into the GPU
var bufferId = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, bufferId );
gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW );

// Associate out shader variables with our data buffer
var vPosition = gl.getAttribLocation( program,"vPosition" );
gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPosition );

// Works for translation
translationMatrix = mat4();
var d = vec3(-0.5, -0.5, 0.0);
translationMatrix = mult(translationMatrix, translate(d));

// Debug print the matrix contents
matToStr(translationMatrix);

/*
// It prints out as
1, 0, 0, -0.5
0, 1, 0, -0.5
0, 0, 1, 0
0, 0, 0, 1
*/

translationMatrixLoc = gl.getUniformLocation(program,"translationMatrix");
gl.uniformMatrix4fv(translationMatrixLoc, false, flatten(translationMatrix));

render();
};

function render()
{
gl.clear( gl.COLOR_BUFFER_BIT );
gl.drawArrays( gl.TRIANGLES, 0, 3 );
}

function matToStr(matrix) {
var output ="";
for (var i = 0; i<4; i++) {
output = output + matrix[i] +"\
\
";
}
console.log(output);
}

enter image description here

为什么会这样呢？当我在.js文件中创建转换矩阵并将其作为统一变量发送到顶点着色器时，它将起作用。