如何在一个使用WebGL的程序中使用不同的drawArrays类型?

时间:2017-02-22 07:35:44

标签: javascript webgl draw

我的作业很少有关于如何实际实现教授所要求的内容(我也是Javascript的新手,但我对c和c ++知之甚少)。 WebGL程序必须呈现3种不同类型的drawArray调用:POINTS,TRIANGLE_FAN和LINES。

我每个都有不同的数组,我知道如何一次绘制一种类型,但我不确定如何绘制3种不同的类型。

是否应将所有载体放入一个巨大的阵列?我尝试了这个方法,第一个TRIANGLE_FAN会正确绘制,但是再次使用其他两种类型调用drawArrays,并将偏移设置为' first'一行的索引,然后一个'点'#,给了我错误:

WebGL error INVALID_OPERATION in drawArrays(ONE, 36, 2)
WebGL error INVALID_OPERATION in drawArrays(NONE, 40, 1)

或者,为每种类型使用单独的数组,并为每种类型设置缓冲区,当有多个数组设置为' gl'时,如何使用drawArrays? - > (getWebGLContext(画布))?

作为参考,这是教授指定的:

    Write a WebGL program that displays a rotating pendulum.  The
    pendulum bob is free to rotate through 360 degrees about an anchor 
    point at the center of the canvas.  The pendulum has the following 
    three components.

    1)  The anchor point is a green square centered at the origin 
        (0,0) with point size = 5 pixels.

    2)  The bob is a blue hexagon of radius r = 0.1.  Render this with
        a triangle fan centered at the origin (along with a ModelView
        matrix that translates and rotates).

    3)  The bob is attached to the anchor point by a rigid red wire of
        length l = 0.8.

    Use global variables for the point size of the anchor, the radius
    of the bob, the length of the wire, and the angular velocity of 
    rotation in degrees per second.  Set the initial angular velocity
    to 45 and allow an interactive user to increase or decrease the
    value in multiples of 10 degrees per second with button presses.

1 个答案:

答案 0 :(得分:0)

这取决于你。只要您正确指定内容,WebGL就不在乎。在您的情况下,如果您将它们放在相同的缓冲区中,则需要为每个数据块指定偏移量。

最常见的方法是将每个绘制调用的数据放在自己的缓冲区中。

drawArrays的第一个参数是原始类型(POINT,LINE,TRIANGLES等),你没有提出任何问题

您可能需要查看一些tutorials on webgl