WebGL不绘制简单的三角形

Question

我检查了gl.getError（），但它返回0。帮助伙计们，这可能很简单，这使得它最糟糕。

" source"

//how I generated buffers
this.genBuffers = function() {
  if(this.c == 0) {
    gl.bindBuffer(gl.ARRAY_BUFFER,this.vBuffer);
    gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(this.vertices),gl.STATIC_DRAW);
    this.vBuffer.vectorSize = 3;
    this.vBuffer.numElements = this.vertices.length/3;
    gl.bindBuffer(gl.ARRAY_BUFFER,this.nBuffer);
    gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(this.normals),gl.STATIC_DRAW);
    this.nBuffer.vectorSize = 3;
    this.nBuffer.numElements = this.normals.length/3;      
  }
}  
// PART OF SHADER FUNCTION
this.program = gl.createProgram();
this.loadShader= function(id) {
var shaderScript = document.getElementById(id);
var str = shaderScript.textContent;
var shader;
if (shaderScript.type == "frag") {
    shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type == "vert") {
    shader = gl.createShader(gl.VERTEX_SHADER);
} else {
    return null;
}
gl.shaderSource(shader, str);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    alert(gl.getShaderInfoLog(shader));
    return null;
}
return shader;  
}  
this.vert = this.loadShader(vertS);
this.frag = this.loadShader(fragS);
gl.attachShader(this.program, this.vert);
gl.attachShader(this.program, this.frag);
gl.linkProgram(this.program);
if (!gl.getProgramParameter(this.program, gl.LINK_STATUS)) {
    alert("Could not initialise shaders");
}
this.useProgram = function() {
gl.useProgram(this.program);
}
this.loadInput = function() {
  this.uMUniform = gl.getUniformLocation(this.program, "uMMatrix");
  this.uVUniform = gl.getUniformLocation(this.program, "uVMatrix");
  this.uPUniform = gl.getUniformLocation(this.program, "uPMatrix");
  this.aVertexAttribute = gl.getAttribLocation(this.program, "aVertex");
  this.aNormalAttribute = gl.getAttribLocation(this.program, "aNormal");
  gl.enableVertexAttribArray(this.aVertexAttribute);
  // gl.enableVertexAttribArray(this.aNormalAttribute);
}
this.setMatrixUniforms = function() {    
gl.uniformMatrix4fv(this.uMUniform, false, this.pipeline.mMatrix);
gl.uniformMatrix4fv(this.uVUniform, false, this.pipeline.vMatrix);
gl.uniformMatrix4fv(this.uVUniform, false, this.pipeline.vMatrix);  
}
this.render = function() {
gl.enable(gl.DEPTH_TEST);
gl.clearColor(Math.random(),Math.random(),Math.random(),1);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);  
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);  
  //mat4.translate(this.pipeline.vMatrix, [-1.5, 0.0, -7.0]);
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, this.pipeline.pMatrix);  
gl.bindBuffer(gl.ARRAY_BUFFER, this.mesh.vBuffer);
gl.vertexAttribPointer(this.aVertexAttribute, this.mesh.vBuffer.vectorSize, gl.FLOAT, false, 0, 0);
this.setMatrixUniforms();  
gl.drawArrays(gl.TRIANGLES, 0, this.mesh.vBuffer.numElements);
}

我立即检查了GL.GETERROR，但仍然没有错误。我还检查了其他所有内容，以查看它是否已经到位，似乎都很好。不知道是什么原因

Answer 1

您正在发送两次UVMATRIX统一：

this.setMatrixUniforms = function() {    
    gl.uniformMatrix4fv(this.uMUniform, false, this.pipeline.mMatrix);
    gl.uniformMatrix4fv(this.uVUniform, false, this.pipeline.vMatrix);
    gl.uniformMatrix4fv(this.uVUniform, false, this.pipeline.vMatrix);
}

您想要类似的东西：

this.setMatrixUniforms = function() {    
    gl.uniformMatrix4fv(this.uMUniform, false, this.pipeline.mMatrix);
    gl.uniformMatrix4fv(this.uVUniform, false, this.pipeline.vMatrix);
    gl.uniformMatrix4fv(this.uPUniform, false, this.pipeline.pMatrix);
}

您还需要将其他矩阵初始化为身份：

function Pipeline() {
    this.mMatrix = mat4.identity();
    this.vMatrix = mat4.identity();
    this.pMatrix = mat4.create();
}

为了拥有Mat4.Identity（），我将glmatrix库升级到了较新的版本：

<script src = "gl-matrix-1.3.7.js"></script>

在此处找到完整的更改：http：//pastebin.com/9m9n0eq8