Expand Minimize

drawArrays method

Render geometric primitives from bound and enabled vertex data.

IE11

 

Syntax

WebGLRenderingContext.drawArrays(mode, first, count);

Parameters

mode [in]

Type: Number

Specifies the kind of geometric primitives to render from a given set of vertex attributes.

ValueMeaning
gl.POINTS

Draws a single dot per vertex. For example, 10 vertices produce 10 dots.

gl.LINES

Draws a line between a pair of vertices. For example, 10 vertices produce 5 separate lines.

gl.LINE_STRIP

Draws a line to the next vertex by a straight line. For example, 10 vertices produce 9 lines connected end to end.

gl.LINE_LOOP

Similar to gl.LINE_STRIP, but connects the last vertex back to the first. For example, 10 vertices produce 10 straight lines.

gl.TRIANGLES

Draws a triangle for each group of three consecutive vertices. For example, 12 vertices create 4 separate triangles.

gl.TRIANGLE_STRIP

Creates a strip of triangles where each additional vertex creates an additional triangle once the first three vertices have been drawn. For example, 12 vertices create 10 triangles.

gl.TRIANGLE_FAN

Similar to gl.TRIANGLE_STRIP, but creates a fan shaped output. For example 12 vertices create 10 triangles.

 

first [in]

Type: Number

The first element to render in the array of vector points.

count [in]

Type: Number

The number of vector points to render. For example, a triangle would be 3.

Return value

This method does not return a value.

Remarks

WebGL ErrorDescription
gl.INVALID_ENUMIf mode is not an accepted value.
gl.INVALID_VALUEIf count is negative.
gl.INVALID_FRAMEBUFFER_OPERATIONIf the currently bound WebGLFramebuffer is not framebuffer complete or the WebGLRenderbuffer is invalid.
gl.INVALID_OPERATIONThe vertex attribute is enabled but no buffer is bound or if first + count goes past the end of the vertex attribute array.

 

For Internet Explorer 11 using WebGL renderer 0.93 and later, GLSL point sizes up to 300 pixels are supported.

Examples

This example uses drawArrays to render either a line figure or an image. For more info on this example, see Get started with WebGL.


//  Clear color buffer and set it to light gray
    gl.clearColor(1.0, 1.0, 1.0, 0.5);
    gl.clear(this.gl.COLOR_BUFFER_BIT);
            
// This draws either the grid or the photo for stretching
    if (document.getElementById("renderLines").checked)
    {
      gl.bindBuffer(gl.ARRAY_BUFFER, this.texCoordBuffer2);

      gl.useProgram(this.lineprogram);

      gl.uniform2fv(gl.getUniformLocation(this.lineprogram, "p1"), p1);
      gl.uniform2fv(gl.getUniformLocation(this.lineprogram, "p2"), p2);

      gl.vertexAttribPointer(this.texCoordLocation2, 2, gl.FLOAT, false, 0, 0);

      gl.enableVertexAttribArray(this.texCoordLocation2);

      gl.drawArrays(gl.LINES, 0, resolution * resolution * 10);
    }
    else
    { 
      gl.bindBuffer(gl.ARRAY_BUFFER, this.texCoordBuffer);
      
      gl.useProgram(this.pictureprogram);


      gl.uniform2fv(gl.getUniformLocation(this.pictureprogram, "p1"), p1);
      gl.uniform2fv(gl.getUniformLocation(this.pictureprogram, "p2"), p2);

      gl.vertexAttribPointer(this.texCoordLocation, 2, gl.FLOAT, false, 0, 0);

      gl.enableVertexAttribArray(this.texCoordLocation);


      gl.drawArrays(gl.TRIANGLES, 0, resolution * resolution * 2 * 3);
    }


See also

WebGLRenderingContext

 

 

Show:
© 2014 Microsoft