Ошибка WebGL 2.0: glDrawArrays: попытка доступа к вершинам вне диапазона в атрибуте 0

Question

Я учусь на WebGL техническую. К сожалению, я встретил некоторую ошибку. Я хочу нарисовать двухмерную форму для вертолета. Я написал код ниже. Именно то, что я хотел бы сделать, это сделать пропеллер в форме, называемой телом.

Обратите внимание, что я пытался создать новый буфер и связать его, но все равно не получилось. Я не думаю, что шаг до сих пор понят, но я хочу научиться решать его, даже если он прост.

// Vertex shader
var _vertexShader = `
    attribute vec4 _position;
    void main() {
        gl_Position = _position;
    }
`

// Fragment shader
var _fragmentShader = `
    precision mediump float;

    void main() {
        gl_FragColor = vec4(0.6, 0.8, 0.3, 1);
    }
`

// Create shader
function createShader(gl, type, source) {
    var shader = gl.createShader(type)
    gl.shaderSource(shader, source)
    gl.compileShader(shader)
    var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS)
    if (success) {
        return shader
    } else {
        console.log(gl.getShaderInfoLog(shader))
        gl.deleteShader(shader)
        // return false
    }
}

// Linking shader by program
function createProgram(gl, vertexShader, fragmentShader) {
    var program = gl.createProgram()
    gl.attachShader(program, vertexShader)
    gl.attachShader(program, fragmentShader)
    gl.linkProgram(program)
    var success = gl.getProgramParameter(program, gl.LINK_STATUS)
    if (success) {
        return program
    } else {
        console.log(gl.getProgramInfoLog(program))
        gl.deleteProgram(program)
        // return false
    }
}

function main() {
    // Get a WebGL context.
    var canvas = document.getElementById('canvas')
    var gl = canvas.getContext('webgl2')
    if (!gl) {
        alert('Not support.')
        return false
    }

    // Get the strings for our GLSL shaders.
    var vertexShader = createShader(gl, gl.VERTEX_SHADER, _vertexShader)
    var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, _fragmentShader)
    // Link the two shaders into a program.
    var program = createProgram(gl, vertexShader, fragmentShader)
    // Look up where the vertex data need to go.
    var positionLoc = gl.getAttribLocation(program, '_position')
    // Create a buffer and put the three 2d clip space points in it.
    var body_positionBuf = gl.createBuffer()
    // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = body_positionBuf).
    gl.bindBuffer(gl.ARRAY_BUFFER, body_positionBuf)
    var body_positions = new Float32Array(
        [
            // Body triangle (Right)
            -0.25,  0,
            0.25,  0,
            0, 0.5,
            // Body triangle (Left) 
            -0.15, 0,
            0.15, 0,
            0.15, -0.25,
            // Body square
            -0.15, 0,
            -0.15, -0.25,
            0.15, -0.25,
        ]   
    )

    var roter_positions = new Float32Array([
        0.15, 0.1,
        0.15, -0.1,
        -0.15, 0.1,

        -0.15, -0.1,
        -0.15, 0.1,
        0.15, 0.1,
    ])

    gl.bufferData(gl.ARRAY_BUFFER, body_positions, gl.STATIC_DRAW)
    // Code above this line is initialization code.
    // Code below this line is rendering code.

    // webglUtils.resizeCanvasToDisplaySize(gl.canvas)
    // Tell WebGL how to convert from clip space to pixels.
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height)

    // Clear the canvas.
    gl.clearColor(0, 0, 0, 0)
    gl.clear(gl.COLOR_BUFFER_BIT)
    
    // Tell it to use our program (pair of shaders).
    gl.useProgram(program)
    // Turn on the attribute.
    gl.enableVertexAttribArray(positionLoc)
    // Bind the position buffer.
    gl.bindBuffer(gl.ARRAY_BUFFER, body_positionBuf)

    // Tell the attribute how to get data out of body_positionBuf (ARRAY_BUFFER).
    var size = 2
    var type = gl.FLOAT
    var normalize = false
    var stride = 0
    var offset = 0 
    gl.vertexAttribPointer(positionLoc, size, type, normalize, stride, offset)
    // Draw.
    var drawType = gl.TRIANGLES
    var count = body_positions.length / 2
    gl.drawArrays(drawType, offset, count)
}

main()

<canvas id="canvas" width="500" height="250"></canvas>

Как я могу это сделать? Я не знаю .. Пожалуйста, помогите мне спасибо.

Answer 1

Первые координаты всех вершин, указанных в body_positions, охватывают вершины, указанные в roter_positions.
Изменить координаты вершины:

var roter_positions = new Float32Array([
    0.15, 0.6,
    0.15, 0.4,
    -0.15, 0.6,

    -0.15, 0.4,
    -0.15, 0.6,
    0.15, 0.6,
])

Обратите внимание, я рекомендую использовать матрицу модели, чтобы определить положение и ориентацию каждого объекта в отдельности. Но сначала решите свою проблему, а затем сделайте следующий шаг.

Если вы хотите использовать 2 буфера, вам нужно создать 2 объекта буфера и определить хранилище данных обоих объектов:

var body_positionBuf = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, body_positionBuf)
gl.bufferData(gl.ARRAY_BUFFER, body_positions, gl.STATIC_DRAW)

var roter_positionBuf = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, roter_positionBuf)
gl.bufferData(gl.ARRAY_BUFFER, roter_positions, gl.STATIC_DRAW)  

Наконец, вы можете нарисовать сетки в 2 разделенных буферах, с помощью 2 разделенных вызовов рисования. Вы должны определить массив общих данных атрибутов вершин перед каждым вызовом отрисовки:

gl.bindBuffer(gl.ARRAY_BUFFER, body_positionBuf)
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0)       
gl.drawArrays(gl.TRIANGLES, 0, body_positions.length / 2)

gl.bindBuffer(gl.ARRAY_BUFFER, roter_positionBuf)
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0)       
gl.drawArrays(gl.TRIANGLES, 0, roter_positions.length / 2)

См. Пример, когда я применил изменения к вашему исходному коду:

// Vertex shader
var _vertexShader = `
    attribute vec4 _position;
    void main() {
        gl_Position = _position;
    }
`

// Fragment shader
var _fragmentShader = `
    precision mediump float;

    void main() {
        gl_FragColor = vec4(0.6, 0.8, 0.3, 1);
    }
`

// Create shader
function createShader(gl, type, source) {
    var shader = gl.createShader(type)
    gl.shaderSource(shader, source)
    gl.compileShader(shader)
    var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS)
    if (success) {
        return shader
    } else {
        console.log(gl.getShaderInfoLog(shader))
        gl.deleteShader(shader)
        // return false
    }
}

// Linking shader by program
function createProgram(gl, vertexShader, fragmentShader) {
    var program = gl.createProgram()
    gl.attachShader(program, vertexShader)
    gl.attachShader(program, fragmentShader)
    gl.linkProgram(program)
    var success = gl.getProgramParameter(program, gl.LINK_STATUS)
    if (success) {
        return program
    } else {
        console.log(gl.getProgramInfoLog(program))
        gl.deleteProgram(program)
        // return false
    }
}

function main() {
    // Get a WebGL context.
    var canvas = document.getElementById('canvas')
    var gl = canvas.getContext('webgl2')
    if (!gl) {
        alert('Not support.')
        return false
    }

    // Get the strings for our GLSL shaders.
    var vertexShader = createShader(gl, gl.VERTEX_SHADER, _vertexShader)
    var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, _fragmentShader)
    // Link the two shaders into a program.
    var program = createProgram(gl, vertexShader, fragmentShader)
    // Look up where the vertex data need to go.
    var positionLoc = gl.getAttribLocation(program, '_position')
    // Create a buffer and put the three 2d clip space points in it.
    
    var body_positions = new Float32Array(
        [
            // Body triangle (Right)
            -0.25,  0,
            0.25,  0,
            0, 0.5,
            // Body triangle (Left) 
            -0.15, 0,
            0.15, 0,
            0.15, -0.25,
            // Body square
            -0.15, 0,
            -0.15, -0.25,
            0.15, -0.25,
        ]   
    )

    var roter_positions = new Float32Array([
        0.15, 0.6,
        0.15, 0.4,
        -0.15, 0.6,

        -0.15, 0.4,
        -0.15, 0.6,
        0.15, 0.6,
    ])

    var body_positionBuf = gl.createBuffer()
    gl.bindBuffer(gl.ARRAY_BUFFER, body_positionBuf)
    gl.bufferData(gl.ARRAY_BUFFER, body_positions, gl.STATIC_DRAW)

    var roter_positionBuf = gl.createBuffer()
    gl.bindBuffer(gl.ARRAY_BUFFER, roter_positionBuf)
    gl.bufferData(gl.ARRAY_BUFFER, roter_positions, gl.STATIC_DRAW)
    
    // webglUtils.resizeCanvasToDisplaySize(gl.canvas)
    // Tell WebGL how to convert from clip space to pixels.
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height)

    // Clear the canvas.
    gl.clearColor(0, 0, 0, 0)
    gl.clear(gl.COLOR_BUFFER_BIT)
    
    // Tell it to use our program (pair of shaders).
    gl.useProgram(program)
    // Turn on the attribute.
    gl.enableVertexAttribArray(positionLoc)
    // Bind the position buffer.
    
    gl.bindBuffer(gl.ARRAY_BUFFER, body_positionBuf)
    gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0)       
    gl.drawArrays(gl.TRIANGLES, 0, body_positions.length / 2)

    gl.bindBuffer(gl.ARRAY_BUFFER, roter_positionBuf)
    gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0)       
    gl.drawArrays(gl.TRIANGLES, 0, roter_positions.length / 2)
}

main();

<canvas id="canvas" width="500" height="250"></canvas>

---

Конечно, вы можете добавить 2 массива в 1 буфер. Вы должны создать буфер с хранилищем данных, которое будет достаточно большим для обоих массивов. Добавьте данные в буфер по gl.bufferData:

var body_bytes = body_positions.length * 4;
var roter_bytes = roter_positions.length * 4;

var common_positionBuf = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, common_positionBuf)
gl.bufferData(gl.ARRAY_BUFFER, body_bytes + roter_bytes, gl.STATIC_DRAW); 
gl.bufferSubData(gl.ARRAY_BUFFER, 0, body_positions);
gl.bufferSubData(gl.ARRAY_BUFFER, body_bytes, roter_positions);

Сетка может быть нарисована с помощью одиночного вызова:

gl.bindBuffer(gl.ARRAY_BUFFER, common_positionBuf)
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0) 
var no_of_vertices = (body_positions.length + roter_positions.length) / 2      
gl.drawArrays(gl.TRIANGLES, 0, no_of_vertices)

Если некоторые ресурсы программы необходимо будет изменить до рисования 2-го меша (например, униформа матрицы модели), то это можно сделать также двумя вызовами рисования:

gl.drawArrays(gl.TRIANGLES, 0, body_positions.length / 2)

// change resources here ...

gl.drawArrays(gl.TRIANGLES, body_positions.length / 2, roter_positions.length / 2)

См. Пример на основе вашего исходного кода из вопроса:

// Vertex shader
var _vertexShader = `
    attribute vec4 _position;
    void main() {
        gl_Position = _position;
    }
`

// Fragment shader
var _fragmentShader = `
    precision mediump float;

    void main() {
        gl_FragColor = vec4(0.6, 0.8, 0.3, 1);
    }
`

// Create shader
function createShader(gl, type, source) {
    var shader = gl.createShader(type)
    gl.shaderSource(shader, source)
    gl.compileShader(shader)
    var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS)
    if (success) {
        return shader
    } else {
        console.log(gl.getShaderInfoLog(shader))
        gl.deleteShader(shader)
        // return false
    }
}

// Linking shader by program
function createProgram(gl, vertexShader, fragmentShader) {
    var program = gl.createProgram()
    gl.attachShader(program, vertexShader)
    gl.attachShader(program, fragmentShader)
    gl.linkProgram(program)
    var success = gl.getProgramParameter(program, gl.LINK_STATUS)
    if (success) {
        return program
    } else {
        console.log(gl.getProgramInfoLog(program))
        gl.deleteProgram(program)
        // return false
    }
}

function main() {
    // Get a WebGL context.
    var canvas = document.getElementById('canvas')
    var gl = canvas.getContext('webgl2')
    if (!gl) {
        alert('Not support.')
        return false
    }

    // Get the strings for our GLSL shaders.
    var vertexShader = createShader(gl, gl.VERTEX_SHADER, _vertexShader)
    var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, _fragmentShader)
    // Link the two shaders into a program.
    var program = createProgram(gl, vertexShader, fragmentShader)
    // Look up where the vertex data need to go.
    var positionLoc = gl.getAttribLocation(program, '_position')
    // Create a buffer and put the three 2d clip space points in it.
    
    var body_positions = new Float32Array(
        [
            // Body triangle (Right)
            -0.25,  0,
            0.25,  0,
            0, 0.5,
            // Body triangle (Left) 
            -0.15, 0,
            0.15, 0,
            0.15, -0.25,
            // Body square
            -0.15, 0,
            -0.15, -0.25,
            0.15, -0.25,
        ]   
    )

    var roter_positions = new Float32Array([
        0.15, 0.6,
        0.15, 0.4,
        -0.15, 0.6,

        -0.15, 0.4,
        -0.15, 0.6,
        0.15, 0.6,
    ])

    var body_bytes = body_positions.length * 4;
    var roter_bytes = roter_positions.length * 4;

    var common_positionBuf = gl.createBuffer()
    gl.bindBuffer(gl.ARRAY_BUFFER, common_positionBuf)
    gl.bufferData(gl.ARRAY_BUFFER, body_bytes + roter_bytes, gl.STATIC_DRAW); 
    gl.bufferSubData(gl.ARRAY_BUFFER, 0, body_positions);
    gl.bufferSubData(gl.ARRAY_BUFFER, body_bytes, roter_positions);

    // webglUtils.resizeCanvasToDisplaySize(gl.canvas)
    // Tell WebGL how to convert from clip space to pixels.
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height)

    // Clear the canvas.
    gl.clearColor(0, 0, 0, 0)
    gl.clear(gl.COLOR_BUFFER_BIT)
    
    // Tell it to use our program (pair of shaders).
    gl.useProgram(program)
    // Turn on the attribute.
    gl.enableVertexAttribArray(positionLoc)
    // Bind the position buffer.
    
    gl.bindBuffer(gl.ARRAY_BUFFER, common_positionBuf)
    gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0) 
    var no_of_vertices = (body_positions.length + roter_positions.length) / 2      
    gl.drawArrays(gl.TRIANGLES, 0, no_of_vertices)
}

main();

<canvas id="canvas" width="500" height="250"></canvas>