WebGL没有绘制一个简单的三角形

我检查了gl.getError（），但它返回了0.帮助大家，它可能是非常简单的东西，这使得它成为最糟糕的挑选。WebGL没有绘制一个简单的三角形

//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。我还检查了一切，看看它是否到位，似乎都很好。不知道是什么原因引起的

来源

2014-01-27 cosmonia

您发送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库到一个更新的v版为：

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

查找富于变化的位置：http://pastebin.com/9m9N0eq8

来源

2014-01-28 17:22:27 Everton

WebGL没有绘制一个简单的三角形

回答

相关问题