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 what kind of geometric primitives to render from a given set of vertex attributes.

gl.LINE_STRIP
gl.LINES
gl.POINTS
gl.TRIANGLE_STRIP
gl.TRIANGLES
first [in]

Type: Number

count [in]

Type: Number

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. All rights reserved.