// The type to draw
const GLenum POINTS                         = 0x0000;
const GLenum LINES                          = 0x0001;
const GLenum LINE_LOOP                      = 0x0002;
const GLenum LINE_STRIP                     = 0x0003;
const GLenum TRIANGLES                      = 0x0004;
const GLenum TRIANGLE_STRIP                 = 0x0005;
const GLenum TRIANGLE_FAN                   = 0x0006;

void drawArrays(GLenum mode,  // Draw the graph as specified by the mode parameter, above
                GLint first,  // Specify at which point to start drawing
                GLsizei count); // Specify how many vertices to draw
				
void drawElements(GLenum mode, // Draw the graph as specified by the mode parameter, above
                  GLsizei count, // Specify how many vertices to draw
                  GLenum type, // Specify the index value data type. The value can be: UNSIGNED_BYTE, UNSIGNED_SHORT, and UNSIGNED_INT Note the three
                  GLintptr offset); // Specifies the offset position to draw in the index array, in bytes
drawArraysInstancedANGLE(gl.TRIANGLES, 0.6, instanceCount)
Copy the code
  • drawCall
    • drawArrays
    • drawElements
    • drawArraysInstancedANGLE
    • drawArraysInstanced
    • drawElementsInstanced
    • drawElementsInstancedANGLE
  • render
    • mode, start, count
    • We don’t consider different objects, we only consider vertex data start, and total
function WebGLBufferRenderer( gl, extensions, info, capabilities ) {
	const isWebGL2 = capabilities.isWebGL2;
	let mode;
	function setMode( value ) {
		mode = value;
	}
	// Call the WebGLBufferRenderer#render() method to render. As follows, the final drawArrays() call is made to render the upper created geometry and material(together called mesh) into the CANVAS of the 3D scene.
	function render( start, count ) {
		gl.drawArrays( mode, start, count ); 
		info.update( count, mode, 1 );
	}
	function renderInstances( start, count, primcount ) {
		if ( primcount === 0 ) return;
		let extension, methodName;
		if ( isWebGL2 ) {
			extension = gl;
			methodName = 'drawArraysInstanced';
		} else {
			extension = extensions.get( 'ANGLE_instanced_arrays' );
			methodName = 'drawArraysInstancedANGLE';
			if ( extension === null ) {
				console.error(
					'THREE.WebGLBufferRenderer: using THREE.InstancedBufferGeometry but hardware does not support extension ANGLE_instanced_arrays.'
				);
				return;
			}
		}
		extension[ methodName ]( mode, start, count, primcount );
		info.update( count, mode, primcount );
	}
	//
	this.setMode = setMode;
	this.render = render;
	this.renderInstances = renderInstances;
}
Copy the code
function WebGLIndexedBufferRenderer( gl, extensions, info, capabilities ) {
	const isWebGL2 = capabilities.isWebGL2;
	let mode;
	function setMode( value ) {
		mode = value;
	}
	let type, bytesPerElement;
	function setIndex( value ) {
		type = value.type;
		bytesPerElement = value.bytesPerElement;
	}
	function render( start, count ) {
		gl.drawElements( mode, count, type, start * bytesPerElement );
		info.update( count, mode, 1 );
	}
	function renderInstances( start, count, primcount ) {
		if ( primcount === 0 ) return;
		let extension, methodName;
		if ( isWebGL2 ) {
			extension = gl;
			methodName = 'drawElementsInstanced';
		} else {
			extension = extensions.get( 'ANGLE_instanced_arrays' );
			methodName = 'drawElementsInstancedANGLE';
			if ( extension === null ) {
				console.error( 'THREE.WebGLIndexedBufferRenderer: using THREE.InstancedBufferGeometry but hardware does not support extension ANGLE_instanced_arrays.' );
				return;
			}
		}
		extension[ methodName ]( mode, count, type, start * bytesPerElement, primcount );
		info.update( count, mode, primcount );
	}
	//
	this.setMode = setMode;
	this.setIndex = setIndex;
	this.render = render;
	this.renderInstances = renderInstances;
}
Copy the code
gl.drawArrays(gl.TRIANGLES, 0, n);  //n is usually array /3
gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0); //n 一般是indices.length
Copy the code
ext = gl.getExtension("ANGLE_instanced_arrays");
ext.vertexAttribDivisorANGLE(aOffsetLocation, 1);
ext.vertexAttribDivisorANGLE(aColorLocation, 1);
ext.drawArraysInstancedANGLE(gl.TRIANGLES, 0.6, instanceCount);
Copy the code