---
title: "WEBGL_multi_draw | JavaScript maps SDK"
description: "Documentation for MapTiler SDK"
---

# Interface WEBGL\_multi\_draw

The **`WEBGL_multi_draw`** extension is part of the WebGL API and allows to render more than one primitive with a single function call. This can improve a WebGL application's performance as it reduces binding costs in the renderer and speeds up GPU thread time with uniform data.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/WEBGL_multi_draw)

interface WEBGL\_multi\_draw {  
    [multiDrawArraysInstancedWEBGL](#multidrawarraysinstancedwebgl-1)(  
        mode: number,  
        firstsList: number\[\] | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        firstsOffset: number,  
        countsList: number\[\] | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        countsOffset: number,  
        instanceCountsList: number\[\] | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        instanceCountsOffset: number,  
        drawcount: number,  
    ): void;  
    [multiDrawArraysInstancedWEBGL](#multidrawarraysinstancedwebgl-2)(  
        mode: number,  
        firstsList: [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number, any, any\> | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        firstsOffset: number,  
        countsList: [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number, any, any\> | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        countsOffset: number,  
        instanceCountsList:  
            | [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number, any, any\>  
            | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        instanceCountsOffset: number,  
        drawcount: number,  
    ): void;  
    [multiDrawArraysWEBGL](#multidrawarrayswebgl-1)(  
        mode: number,  
        firstsList: number\[\] | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        firstsOffset: number,  
        countsList: number\[\] | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        countsOffset: number,  
        drawcount: number,  
    ): void;  
    [multiDrawArraysWEBGL](#multidrawarrayswebgl-2)(  
        mode: number,  
        firstsList: [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number, any, any\> | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        firstsOffset: number,  
        countsList: [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number, any, any\> | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        countsOffset: number,  
        drawcount: number,  
    ): void;  
    [multiDrawElementsInstancedWEBGL](#multidrawelementsinstancedwebgl-1)(  
        mode: number,  
        countsList: number\[\] | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        countsOffset: number,  
        type: number,  
        offsetsList: number\[\] | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        offsetsOffset: number,  
        instanceCountsList: number\[\] | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        instanceCountsOffset: number,  
        drawcount: number,  
    ): void;  
    [multiDrawElementsInstancedWEBGL](#multidrawelementsinstancedwebgl-2)(  
        mode: number,  
        countsList: [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number, any, any\> | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        countsOffset: number,  
        type: number,  
        offsetsList: [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number, any, any\> | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        offsetsOffset: number,  
        instanceCountsList:  
            | [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number, any, any\>  
            | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        instanceCountsOffset: number,  
        drawcount: number,  
    ): void;  
    [multiDrawElementsWEBGL](#multidrawelementswebgl-1)(  
        mode: number,  
        countsList: number\[\] | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        countsOffset: number,  
        type: number,  
        offsetsList: number\[\] | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        offsetsOffset: number,  
        drawcount: number,  
    ): void;  
    [multiDrawElementsWEBGL](#multidrawelementswebgl-2)(  
        mode: number,  
        countsList: [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number, any, any\> | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        countsOffset: number,  
        type: number,  
        offsetsList: [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number, any, any\> | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        offsetsOffset: number,  
        drawcount: number,  
    ): void;  
}

##### Index

### Methods[](#methods)

[multiDrawArraysInstancedWEBGL](#multidrawarraysinstancedwebgl) [multiDrawArraysWEBGL](#multidrawarrayswebgl) [multiDrawElementsInstancedWEBGL](#multidrawelementsinstancedwebgl) [multiDrawElementsWEBGL](#multidrawelementswebgl)

## Methods[](#methods-1)

### multiDrawArraysInstancedWEBGL[](#multidrawarraysinstancedwebgl)

-   multiDrawArraysInstancedWEBGL(  
        mode: number,  
        firstsList: number\[\] | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        firstsOffset: number,  
        countsList: number\[\] | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        countsOffset: number,  
        instanceCountsList: number\[\] | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        instanceCountsOffset: number,  
        drawcount: number,  
    ): void[](#multidrawarraysinstancedwebgl-1)
    
    The **`WEBGL_multi_draw.multiDrawArraysInstancedWEBGL()`** method of the WebGL API renders multiple primitives from array data. It is identical to multiple calls to the gl.drawArraysInstanced() method.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/WEBGL_multi_draw/multiDrawArraysInstancedWEBGL)
    
    #### Parameters
    
    -   mode: number
    -   firstsList: number\[\] | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>
    -   firstsOffset: number
    -   countsList: number\[\] | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>
    -   countsOffset: number
    -   instanceCountsList: number\[\] | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>
    -   instanceCountsOffset: number
    -   drawcount: number
    
    #### Returns void
    
-   multiDrawArraysInstancedWEBGL(  
        mode: number,  
        firstsList: [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number, any, any\> | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        firstsOffset: number,  
        countsList: [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number, any, any\> | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        countsOffset: number,  
        instanceCountsList:  
            | [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number, any, any\>  
            | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        instanceCountsOffset: number,  
        drawcount: number,  
    ): void[](#multidrawarraysinstancedwebgl-2)
    
    The **`WEBGL_multi_draw.multiDrawArraysInstancedWEBGL()`** method of the WebGL API renders multiple primitives from array data. It is identical to multiple calls to the gl.drawArraysInstanced() method.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/WEBGL_multi_draw/multiDrawArraysInstancedWEBGL)
    
    #### Parameters
    
    -   mode: number
    -   firstsList: [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number, any, any\> | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>
    -   firstsOffset: number
    -   countsList: [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number, any, any\> | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>
    -   countsOffset: number
    -   instanceCountsList: [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number, any, any\> | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>
    -   instanceCountsOffset: number
    -   drawcount: number
    
    #### Returns void
    

### multiDrawArraysWEBGL[](#multidrawarrayswebgl)

-   multiDrawArraysWEBGL(  
        mode: number,  
        firstsList: number\[\] | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        firstsOffset: number,  
        countsList: number\[\] | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        countsOffset: number,  
        drawcount: number,  
    ): void[](#multidrawarrayswebgl-1)
    
    The **`WEBGL_multi_draw.multiDrawArraysWEBGL()`** method of the WebGL API renders multiple primitives from array data. It is identical to multiple calls to the gl.drawArrays() method.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/WEBGL_multi_draw/multiDrawArraysWEBGL)
    
    #### Parameters
    
    -   mode: number
    -   firstsList: number\[\] | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>
    -   firstsOffset: number
    -   countsList: number\[\] | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>
    -   countsOffset: number
    -   drawcount: number
    
    #### Returns void
    
-   multiDrawArraysWEBGL(  
        mode: number,  
        firstsList: [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number, any, any\> | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        firstsOffset: number,  
        countsList: [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number, any, any\> | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        countsOffset: number,  
        drawcount: number,  
    ): void[](#multidrawarrayswebgl-2)
    
    The **`WEBGL_multi_draw.multiDrawArraysWEBGL()`** method of the WebGL API renders multiple primitives from array data. It is identical to multiple calls to the gl.drawArrays() method.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/WEBGL_multi_draw/multiDrawArraysWEBGL)
    
    #### Parameters
    
    -   mode: number
    -   firstsList: [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number, any, any\> | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>
    -   firstsOffset: number
    -   countsList: [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number, any, any\> | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>
    -   countsOffset: number
    -   drawcount: number
    
    #### Returns void
    

### multiDrawElementsInstancedWEBGL[](#multidrawelementsinstancedwebgl)

-   multiDrawElementsInstancedWEBGL(  
        mode: number,  
        countsList: number\[\] | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        countsOffset: number,  
        type: number,  
        offsetsList: number\[\] | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        offsetsOffset: number,  
        instanceCountsList: number\[\] | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        instanceCountsOffset: number,  
        drawcount: number,  
    ): void[](#multidrawelementsinstancedwebgl-1)
    
    The **`WEBGL_multi_draw.multiDrawElementsInstancedWEBGL()`** method of the WebGL API renders multiple primitives from array data. It is identical to multiple calls to the gl.drawElementsInstanced() method.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/WEBGL_multi_draw/multiDrawElementsInstancedWEBGL)
    
    #### Parameters
    
    -   mode: number
    -   countsList: number\[\] | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>
    -   countsOffset: number
    -   type: number
    -   offsetsList: number\[\] | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>
    -   offsetsOffset: number
    -   instanceCountsList: number\[\] | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>
    -   instanceCountsOffset: number
    -   drawcount: number
    
    #### Returns void
    
-   multiDrawElementsInstancedWEBGL(  
        mode: number,  
        countsList: [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number, any, any\> | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        countsOffset: number,  
        type: number,  
        offsetsList: [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number, any, any\> | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        offsetsOffset: number,  
        instanceCountsList:  
            | [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number, any, any\>  
            | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        instanceCountsOffset: number,  
        drawcount: number,  
    ): void[](#multidrawelementsinstancedwebgl-2)
    
    The **`WEBGL_multi_draw.multiDrawElementsInstancedWEBGL()`** method of the WebGL API renders multiple primitives from array data. It is identical to multiple calls to the gl.drawElementsInstanced() method.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/WEBGL_multi_draw/multiDrawElementsInstancedWEBGL)
    
    #### Parameters
    
    -   mode: number
    -   countsList: [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number, any, any\> | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>
    -   countsOffset: number
    -   type: number
    -   offsetsList: [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number, any, any\> | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>
    -   offsetsOffset: number
    -   instanceCountsList: [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number, any, any\> | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>
    -   instanceCountsOffset: number
    -   drawcount: number
    
    #### Returns void
    

### multiDrawElementsWEBGL[](#multidrawelementswebgl)

-   multiDrawElementsWEBGL(  
        mode: number,  
        countsList: number\[\] | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        countsOffset: number,  
        type: number,  
        offsetsList: number\[\] | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        offsetsOffset: number,  
        drawcount: number,  
    ): void[](#multidrawelementswebgl-1)
    
    The **`WEBGL_multi_draw.multiDrawElementsWEBGL()`** method of the WebGL API renders multiple primitives from array data. It is identical to multiple calls to the gl.drawElements() method.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/WEBGL_multi_draw/multiDrawElementsWEBGL)
    
    #### Parameters
    
    -   mode: number
    -   countsList: number\[\] | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>
    -   countsOffset: number
    -   type: number
    -   offsetsList: number\[\] | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>
    -   offsetsOffset: number
    -   drawcount: number
    
    #### Returns void
    
-   multiDrawElementsWEBGL(  
        mode: number,  
        countsList: [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number, any, any\> | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        countsOffset: number,  
        type: number,  
        offsetsList: [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number, any, any\> | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>,  
        offsetsOffset: number,  
        drawcount: number,  
    ): void[](#multidrawelementswebgl-2)
    
    The **`WEBGL_multi_draw.multiDrawElementsWEBGL()`** method of the WebGL API renders multiple primitives from array data. It is identical to multiple calls to the gl.drawElements() method.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/WEBGL_multi_draw/multiDrawElementsWEBGL)
    
    #### Parameters
    
    -   mode: number
    -   countsList: [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number, any, any\> | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>
    -   countsOffset: number
    -   type: number
    -   offsetsList: [Iterable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Iterable/)<number, any, any\> | Int32Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>
    -   offsetsOffset: number
    -   drawcount: number
    
    #### Returns void