在webgl中绘制一个简单的三角形后,我决定开始学习如何进行转换。因此,基本上,我认为我能做的最简单的事情是编写一个单位矩阵并将其乘以顶点位置。
因此,我将身份矩阵添加到了代码中
var identityMatrix = [1,0,0,0,
0,1,0,0,
0,0,1,0,
0,0,0,1];
然后我将着色器中的mat4变量添加为
'uniform mat4 id_matrix;'
并将其乘以位置(因此,我预计转换不会有任何变化,因为我将所有内容都乘以1)
gl_Position = id_matrix * vec4 (a_position,1);
最后,我在着色器中检索矩阵的位置,并用我的数据填充它
var shaderIdentityMatrix = gl.getUniformLocation(program, "id_matrix");
gl.uniformMatrix4fv(shaderIdentityMatrix,false,new Float32Array(identityMatrix));
但是这些更改之后,屏幕上什么也没有显示。我做错了假设吗?
这是完整的代码
<!DOCTYPE HTML>
<html>
<canvas id = "can" width="400" height="400">
</canvas>
<script>
var webgl_canvas = document.getElementById('can');
var gl = webgl_canvas.getContext('experimental-webgl');
var triangles = [-0.8,-0.8,0,0.8,-0.8,0,0,0.8,0];
var identityMatrix = [1,0,0,0,
0,1,0,0,
0,0,1,0,
0,0,0,1];
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(triangles), gl.STATIC_DRAW);
vertexBuffer.itemSize = 3;
vertexBuffer.numItems = 3;
var vertexShader_source = 'attribute vec3 a_position;' + 'uniform mat4 id_matrix;' + 'void main() { gl_Position = id_matrix * vec4 (a_position,1); }';
var fragmentShader_source = 'precision mediump float;' + 'void main() { gl_FragColor = vec4 (0.9,0,0.1,1); }';
//Compile shaders
var buildShader = function (shaderSource, typeOfShader) {
var shader = gl.createShader(typeOfShader);
gl.shaderSource(shader, shaderSource);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert (gl.getShaderInfoLog(shader));
}
return shader;
}
var compiledVertexShader = buildShader (vertexShader_source, gl.VERTEX_SHADER);
var compiledFragmentShader = buildShader (fragmentShader_source, gl.FRAGMENT_SHADER);
//setup GLSL program
program = gl.createProgram();
gl.attachShader(program,compiledVertexShader);
gl.attachShader(program,compiledFragmentShader);
gl.linkProgram(program);
//Draw
var shaderIdentityMatrix = gl.getUniformLocation(program, "id_matrix");
gl.uniformMatrix4fv(shaderIdentityMatrix,false,new Float32Array(identityMatrix));
var positionLocation = gl.getAttribLocation(program,"a_position");
gl.enableVertexAttribArray(positionLocation);
gl.useProgram(program);
gl.vertexAttribPointer(positionLocation, vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.drawArrays (gl.TRIANGLES, 0, vertexBuffer.numItems);
</script>
</html>
最佳答案
gl.uniformMatrix4fv
始终在当前使用的着色器程序上运行。由于调用此函数时未激活着色器程序,因此未设置任何内容。呼唤
gl.useProgram(program);
在UniformMatrix4fv语句之前应该可以解决您的问题。
提示:请始终检查javascript错误控制台。至少对我来说(Chrome)告诉我
WebGL: INVALID_OPERATION: uniformMatrix4fv: location is not from current program
这是在哪里寻找问题的好指标。
关于javascript - 在WEBGL中学习矩阵的第一步,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26606968/