Рендеринг нескольких графиков из буфера одной вершины - PullRequest
Новая
       43

Рендеринг нескольких графиков из буфера одной вершины

1 голос
/ 20 марта 2019

У меня есть буфер вершин, содержащий несколько (в данном случае 2) графов в следующей структуре: 

var vertices = [ 
  x0, y00, y10,
  x1, y01, y11,
  x2, y02, y12,
  ...
  xn, y0n, y1n
];

и его показатели 

var indices = [0, 1, 2, 3, ... n-1];

Вы можете заметить, что для каждого x значения есть 2 y значений, каждое из которых определяет график.

Я хочу визуализировать эти 2 графика, используя этот единственный буфер, без дублирования значений x.

В настоящее время в цикле рендеринга у меня есть это: 

    function render() {         
        gl.bindBuffer(gl.ARRAY_BUFFER, vBuff);  // bind our buffer                                                      

        // with this setup it renders only first graph:
        // x0, y00,  
        // x1, y01, 
        // x2, y02, 
        // ... 
        // xn, y0n
        gl.vertexAttribPointer(vertexPositionLocation, 2, gl.FLOAT, false, 4*3, 0);     
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);                                            
        gl.drawElements(gl.LINE_STRIP, indices.length, gl.UNSIGNED_SHORT, 0);

        // now how do I set up the vertexAttribPointer such that next draw call here 
        // would render second graph containing these points
        // x0, y10,  
        // x1, y11, 
        // x2, y12, 
        // ... 
        // xn, y1n      
        // ?
    }

1 Ответ

2 голосов
/ 20 марта 2019

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

    // first call
    gl.vertexAttribPointer(vertexPositionXLocation, 1, gl.FLOAT, false, 4*3, 0);
    gl.vertexAttribPointer(vertexPositionYLocation, 1, gl.FLOAT, false, 4*3, 4);
    gl.drawArrays(gl.LINE_STRIP, 0, numDataPoints);

    // second call
    gl.vertexAttribPointer(vertexPositionYLocation, 1, gl.FLOAT, false, 4*3, 8);
    gl.drawArrays(gl.LINE_STRIP, 0, numDataPoints);

Ваш вершинный шейдер будет выглядеть примерно так: 

attribute float vX;
attribute float vY;
void main () { gl_Position=vec4(vX,vY,0,1); }

Также обратите внимание, что я использовал drawArrays вместо drawElements, поскольку в любом случае вы подразумеваете, что у вас есть буфер линейного индекса.

...