ThreeJS renderBufferDirect source

• Set the scene

const _emptyScene = {
        background: null.fog: null.environment: null.overrideMaterial: null.isScene: true};if ( scene === null ) scene = _emptyScene; // renderBufferDirect second parameter used to be fog (could be null)
Copy the code

• The setProgram function gets the Program

const program = setProgram( camera, scene, material, object );
Copy the code

• SetMaterial + whether to render front to set the state of the state machine

state.setMaterial( material, frontFaceCW );
Copy the code

• The index and the position

// Get index and vertex data
let index = geometry.index;
const position = geometry.attributes.position;
Copy the code

• Calculate vertex drawStart, and drawCount is similar to webGL

// Calculate the number of vertices to draw
constdataCount = ( index ! = =null)? index.count : position.count;const rangeStart = geometry.drawRange.start * rangeFactor;
const rangeCount = geometry.drawRange.count * rangeFactor;
constgroupStart = group ! = =null ? group.start * rangeFactor : 0;
constgroupCount = group ! = =null ? group.count * rangeFactor : Infinity;
const drawStart = Math.max( rangeStart, groupStart );
const drawEnd = Math.min( dataCount, rangeStart + rangeCount, groupStart + groupCount ) - 1;
const drawCount = Math.max( 0, drawEnd - drawStart + 1 );
Copy the code

• Mesh point line Sprite

// Set the drawing mode and method
if ( object.isMesh ) {
        if ( material.wireframe === true ) {
                state.setLineWidth( material.wireframeLinewidth * getTargetPixelRatio() );
                renderer.setMode( _gl.LINES );
        } else{ renderer.setMode( _gl.TRIANGLES ); }}else if ( object.isLine ) {
        let lineWidth = material.linewidth;
        if ( lineWidth === undefined ) lineWidth = 1; // Not using Line*Material
        state.setLineWidth( lineWidth * getTargetPixelRatio() );
        if ( object.isLineSegments ) {
                renderer.setMode( _gl.LINES );
        } else if ( object.isLineLoop ) {
                renderer.setMode( _gl.LINE_LOOP );
        } else{ renderer.setMode( _gl.LINE_STRIP ); }}else if ( object.isPoints ) {
        renderer.setMode( _gl.POINTS );
} else if ( object.isSprite ) {
        renderer.setMode( _gl.TRIANGLES );
}
Copy the code

• Draw There are three ways to draw

if ( object.isInstancedMesh ) {
        renderer.renderInstances( drawStart, drawCount, object.count );
} else if ( geometry.isInstancedBufferGeometry ) {
        const instanceCount = Math.min( geometry.instanceCount, geometry._maxInstanceCount );
        renderer.renderInstances( drawStart, drawCount, instanceCount );
} else {
        renderer.render( drawStart, drawCount );
}
Copy the code

• The original

this.renderBufferDirect = function ( camera, scene, geometry, material, object, group ) {
        if ( scene === null ) scene = _emptyScene; // renderBufferDirect second parameter used to be fog (could be null)
        const frontFaceCW = ( object.isMesh && object.matrixWorld.determinant() < 0 );
        // Get the shader program
        const program = setProgram( camera, scene, material, object );
        // Sets the required state for drawing
        state.setMaterial( material, frontFaceCW );
        // Get index and vertex data
        let index = geometry.index;
        const position = geometry.attributes.position;
        // Determine whether there is index and vertex data
        if ( index === null ) {
                if ( position === undefined || position.count === 0 ) return;
        } else if ( index.count === 0 ) {
                return;
        }
        // Wireframes
        let rangeFactor = 1;
        if ( material.wireframe === true ) {
                index = geometries.getWireframeAttribute( geometry );
                rangeFactor = 2;
        }
        // Set the morph animation
        if ( material.morphTargets || material.morphNormals ) {
                morphtargets.update( object, geometry, material, program );
        }
        // Bind vertex data
        bindingStates.setup( object, material, program, geometry, index );
        let attribute;
        let renderer = bufferRenderer;
        if( index ! = =null ) {
                attribute = attributes.get( index );
                renderer = indexedBufferRenderer;
                renderer.setIndex( attribute );
        }
        // Calculate the number of vertices to draw
        constdataCount = ( index ! = =null)? index.count : position.count;const rangeStart = geometry.drawRange.start * rangeFactor;
        const rangeCount = geometry.drawRange.count * rangeFactor;
        constgroupStart = group ! = =null ? group.start * rangeFactor : 0;
        constgroupCount = group ! = =null ? group.count * rangeFactor : Infinity;
        const drawStart = Math.max( rangeStart, groupStart );
        const drawEnd = Math.min( dataCount, rangeStart + rangeCount, groupStart + groupCount ) - 1;
        const drawCount = Math.max( 0, drawEnd - drawStart + 1 );
        if ( drawCount === 0 ) return;
        // Set the drawing mode and method
        if ( object.isMesh ) {
                if ( material.wireframe === true ) {
                        state.setLineWidth( material.wireframeLinewidth * getTargetPixelRatio() );
                        renderer.setMode( _gl.LINES );
                } else{ renderer.setMode( _gl.TRIANGLES ); }}else if ( object.isLine ) {
                let lineWidth = material.linewidth;
                if ( lineWidth === undefined ) lineWidth = 1; // Not using Line*Material
                state.setLineWidth( lineWidth * getTargetPixelRatio() );
                if ( object.isLineSegments ) {
                        renderer.setMode( _gl.LINES );
                } else if ( object.isLineLoop ) {
                        renderer.setMode( _gl.LINE_LOOP );
                } else{ renderer.setMode( _gl.LINE_STRIP ); }}else if ( object.isPoints ) {
                renderer.setMode( _gl.POINTS );
        } else if ( object.isSprite ) {
                renderer.setMode( _gl.TRIANGLES );
        }
        if ( object.isInstancedMesh ) {
                renderer.renderInstances( drawStart, drawCount, object.count );
        } else if ( geometry.isInstancedBufferGeometry ) {
                const instanceCount = Math.min( geometry.instanceCount, geometry._maxInstanceCount );
                renderer.renderInstances( drawStart, drawCount, instanceCount );
        } else{ renderer.render( drawStart, drawCount ); }};Copy the code