ThreeJS WebGLRenderer renderObject source code

• // Iterate over the render list. If it is a camera array, iterate over the camera again, passing object, Scene, camera, Geometry, Material, and Group to renderObject for a single object.

function renderObjects( renderList, scene, camera ) { // Transparent and opaque objects
        // // 10. Force the overrideMaterial of the scene to unify the Render object.
        const overrideMaterial =
                scene.isScene === true ? scene.overrideMaterial : null;
        for ( let i = 0, l = renderList.length; i < l; i ++ ) {
                const renderItem = renderList[ i ];
                const object = renderItem.object;
                const geometry = renderItem.geometry;
                const material =
                        overrideMaterial === null ? renderItem.material : overrideMaterial;
                const group = renderItem.group;
                if ( camera.isArrayCamera ) {
                        const cameras = camera.cameras;
                        for ( let j = 0, jl = cameras.length; j < jl; j ++ ) {
                                const camera2 = cameras[ j ];
                                if( object.layers.test( camera2.layers ) ) { state.viewport( _currentViewport.copy( camera2.viewport ) ); currentRenderState.setupLightsView( camera2 ); renderObject( object, scene, camera2, geometry, material, group ); }}}else{ renderObject( object, scene, camera, geometry, material, group ); }}}Copy the code

• RenderObject a role, whether object to immediately render objects (object. IsImmediateRenderObject)
• Vertex Array Object (VAO) is not used to render objects immediately. The position, normal, UV, and color data of objects are directly captured and thrown into buffer for rendering. Normal objects save position, normal, UV, and color data in the first frame, and then bindVertexArrayOES in the next frame. Using VAO can reduce data transmission and improve performance in large scene rendering.
• The renderBufferDirect() method is an important one, where you can see the “minimum complete flow” of an object being rendered.

function renderObject( object, scene, camera, geometry, material, group ) {
        object.onBeforeRender( _this, scene, camera, geometry, material, group );
        object.modelViewMatrix.multiplyMatrices(
                camera.matrixWorldInverse,
                object.matrixWorld
        );
        object.normalMatrix.getNormalMatrix( object.modelViewMatrix );
        if ( object.isImmediateRenderObject ) {//
                const program = setProgram( camera, scene, material, object );
                state.setMaterial( material );
                bindingStates.reset();
                renderObjectImmediate( object, program );
        } else {

                _this.renderBufferDirect(
                        camera,
                        scene,
                        geometry,
                        material,
                        object,
                        group
                );
        }
        object.onAfterRender( _this, scene, camera, geometry, material, group );
}
Copy the code