WebGL不畫線

Question

我想在WebGL上下文中繪製一條線，但它不起作用。我可以清除畫布顏色，所以我知道該程序已編譯，但不知道錯誤在哪裏。

代碼的主要部分是

let canvas = document.getElementById("gl-canvas"); 

    let gl = WebGLUtils.setupWebGL(canvas); 
    if (!gl) { 
    alert("WebGL isn't available"); 
    } 
    let program = initShaders(gl, "vertex-shader", "fragment-shader"); 
    gl.useProgram(program); 
    gl.viewport(0, 0, canvas.width, canvas.height); 

    gl.clearColor(0, 0, 0, 0.5); 

    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 

    let color = gl.getAttribLocation(program, "color"); 
    let colorBuffer = gl.createBuffer(); 
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer); 
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1,0,0,1, 1,0,0,1]), gl.STATIC_DRAW); 
    gl.vertexAttribPointer(color, 4, gl.FLOAT, false, 0, 0); 
    gl.enableVertexAttribArray(color); 

    let vPosition = gl.getAttribLocation(program, "vPosition"); 
    let positionBuffer = gl.createBuffer(); 
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); 
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1,1,1,1, -1,-1,-1,1]), gl.STATIC_DRAW); 
    gl.vertexAttribPointer(vPosition, 4, gl.FLOAT, false, 0, 0); 
    gl.enableVertexAttribArray(vPosition); 

    gl.drawArrays(gl.LINES, 0, 1); 

完整的代碼可以發現here

Answer 1

的問題是你的drawArrays電話：

計數 指定的指數數被渲染。

每行需要兩個指標：起點和終點：

gl.drawArrays(gl.LINES, 0, 2);