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);