javascript - WebGL 不绘制简单的三 Angular 形

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