Analyse du code source du composant de rendu Cocos Creator

　　Dans le moteur cocos, tous les composants de rendu sont hérités de cc.RenderComponent, tels que cc.Sprite, cc.Label, etc. L'assembleur du composant est principalement responsable du traitement de mise à jour et du remplissage des données de composant. Étant donné que les composants de rendu différents sont également différents dans le contenu et le remplissage des données, chaque composant de rendu aura son propre objet Assembler et tous les objets Assembler sont hérités. Depuis cc.Assembler. Le matériau en tant que ressource enregistre principalement l'état de rendu du composant de rendu, la texture et le shader utilisés.

Tout d'abord, analysez d'abord l'assembleur, le code principal est le suivant:

　　

// classe de composant renderCompCtor // classe d'

 assemblage de composant assembleur

Assembler.register = function (renderCompCtor, assembler) { 
    renderCompCtor .__ assembler__ = assembler; 
}; 

Assembler.init = function (renderComp) { 
    let renderCompCtor = renderComp.constructor; 
    laissez assemblerCtor =   renderCompCtor .__ assembler__;
    while (! assemblerCtor) { 
        renderCompCtor = renderCompCtor. $ super;
        if (! renderCompCtor) { 
            cc.warn (`Impossible de trouver l'assembleur pour le composant de rendu: [$ {cc.js.getClassName (renderComp)}]`);
            retour ; 
        } 
        assemblerCtor =   renderCompCtor .__ assembler__; 
    } 
    if (assemblerCtor.getConstructor) { 
        assemblerCtor = assemblerCtor.getConstructor (renderComp); 
    } 
    
    if (! renderComp._assembler || renderComp._assembler.constructor! == assemblerCtor) { 
        let assembler = assemblerPool.get (assemblerCtor); 
        assembler.init (renderComp); 
        renderComp._assembler = assembleur; 
    } 
};

 

　　Le composant de rendu est enregistré dans le moteur via Assembler.register. Par exemple, le code d'enregistrement du composant de rendu graphique est Assembler.register (cc.Graphics, GraphicsAssembler), cc.Graphics est la classe graphique, GraphicsAssembler hérite de la classe Assembler et le composant de rendu contient_assembler,_assembler持有_renderData,_renderData和InputAssembler都是数据容器，_assembler是数据操作,_assembler可以创建和updateRenderData，更新verts,InputAssembler是在渲染时用到的，用于组织传入GPU的数据.

　　

　　Dans v2.x, RenderFlow divise plusieurs états de rendu en fonction de la fréquence des appels pendant le processus de rendu, tels que Transform, Render, Children, etc., et chaque état de rendu correspond à une fonction. Pendant le processus d'initialisation de RenderFlow, les branches de rendu correspondantes seront créées à l'avance en fonction de ces états, et ces branches lieront à leur tour les états correspondants. Par exemple, si un nœud a besoin de mettre à jour la matrice dans le cadre courant et doit se rendre lui-même, alors ce nœud mettra à jour son indicateur vers node._renderFlag = RenderFlow.FLAG_TRANSFORM | RenderFlow.FLAG_RENDER. Lors du rendu de ce noeud, RenderFlow entrera node._renderFlag dans la branche transform => render en fonction de l' état du noeud  , sans avoir besoin d'un jugement d'état supplémentaire.

　　L'objet cc.renderer est un objet global, un objet de rendu qui fournit une interface de rendu de base. Il contient des définitions de classe liées au rendu et des attributs globaux tels que device, InputAssembler, Pass, etc. Le noyau est composé de deux attributs, l'un est _froward est _ flow. _ flow est une classe cc.RenderFlow. Au cours du processus d'initialisation, une instance de RenderFlow est créée et transmise à la méthode _flow.init

initWebGL (canvas, opts) { 
        require ( './webgl/assemblers' ); 
        const ModelBatcher = require ('./ webgl / model-batcher' ); 

        this .Texture2D = gfx.Texture2D;
        ce .canvas = toile;
        this._flow = cc.RenderFlow; 
        
        if (CC_JSB && CC_NATIVERENDERER) {
             // les codes natifs vont créer une instance de Device, alors utilisez simplement l'instance globale. 
            this .device = gfx.Device.getInstance ();
            this .scene = new renderer.Scene (); 
            laissez builtins = _initBuiltins (ce .device);
            this ._forward = new renderer.ForwardRenderer ( this .device, builtins); 
            laissez nativeFlow = new renderer.RenderFlow ( ce .device, cette .scene, ce ._forward);
            this ._flow.init (nativeFlow); 
        } 
        else { 
            let Scene = require ('../../ renderer / scene / scene' ); 
            laissez ForwardRenderer = require ('../../ renderer / renderers / forward-renderer' );
            this .device = newgfx.Device (canvas, opts);
            this .scene = new Scene (); 
            let builtins = _initBuiltins ( ce .device);
            this._forward = new ForwardRenderer (this.device, builtins); 
            this._handle = new ModelBatcher (this.device, this.scene); 
            this._flow.init (this._handle, this ._forward); 
        } 
        config.addStage ( 'shadowcast' ); 
        config.addStage ( 'opaque' ); 
        config.addStage ( 'transparent' ); 
    },

 

render (ecScene, dt) {
         this .device.resetDrawCalls ();
        if (ecScene) {
             // marche la scène du composant d'entité pour générer des modèles 
            this._flow.render (ecScene, dt);
            this .drawCalls = this .device.getDrawCalls (); 
        } 
    },

RenderFlow.render = fonction (scène, dt) { 
    _batcher.reset (); 
    _batcher.walking = true; RenderFlow.visitRootNode (scène); 
    _batcher.terminate (); 
    _batcher.walking = false; 
    _forward.render (_batcher._renderScene, dt); 
};