Use RenderFlow to drive scene visit process (cocos#3740)

* Use RenderFlow to drive scene visit process (cocos#3370)

* Use RenderFlow to drive scene visit process

* Fix tests

* Remove useless code

* Improve batcher walking setting

* Fix vec3 undefined issue

cocos2d/core/camera/CCCamera.js

@@ -27,6 +27,7 @@
 const AffineTrans = require('../utils/affine-transform');
 const renderEngine = require('../renderer/render-engine');
 const renderer = require('../renderer/index');
+const RenderFlow = require('../renderer/render-flow');
 const game = require('../CCGame');
 
 const mat4 = cc.vmath.mat4;
@@ -499,7 +500,7 @@ let Camera = cc.Class({
         // force update node world matrix
         this.node.getWorldMatrix(_mat4_temp_1);
         this.beforeDraw();
-        renderer._walker.visit(root);
+        RenderFlow.visit(root);
         renderer._forward.renderCamera(this._camera, renderer.scene);
     },
 

cocos2d/core/renderer/canvas/index.js

@@ -25,6 +25,6 @@
 
 module.exports = {
     ForwardRenderer: require('./forward-renderer'),
-    RenderComponentWalker: require('./canvas-render-walker'),
+    RenderComponentHandle: require('./render-component-handle'),
     _renderers: require('./renderers')
 };

cocos2d/core/renderer/canvas/canvas-render-walker.js → cocos2d/core/renderer/canvas/render-component-handle.js

@@ -23,11 +23,9 @@
  THE SOFTWARE.
  ****************************************************************************/
 
-const js = require('../../platform/js');
-const RenderFlow = require('../render-flow');
 require('./renderers');
 
-let RenderComponentWalker = function (device, defaultCamera) {
+let RenderComponentHandle = function (device, defaultCamera) {
     this._device = device;
     // let vx = this._device._vx;
     // let vy = this._device._vy;
@@ -37,36 +35,35 @@ let RenderComponentWalker = function (device, defaultCamera) {
     this.parentOpacity = 1;
     this.parentOpacityDirty = 0;
     this.worldMatDirty = 0;
-
-    RenderFlow.init(this);
+    this.walking = false;
 };
 
-RenderComponentWalker.prototype = {
-    constructor: RenderComponentWalker,
+RenderComponentHandle.prototype = {
+    constructor: RenderComponentHandle,
 
-    reset() {},
-
-    _commitComp (comp, assembler) {
-        let ctx = this._device._ctx;
-        let cam = this._camera;
-        ctx.setTransform(cam.a, cam.b, cam.c, cam.d, cam.tx, cam.ty);
-        ctx.scale(1, -1);
-        assembler.draw(ctx, comp);
-    },
-
-    visit (scene) {
+    reset() {
         let ctx = this._device._ctx;
         let canvas = this._device._canvas;
-        let color = cc.Camera.main.backgroundColor;
+        var color = cc.Camera.main ? cc.Camera.main.backgroundColor : cc.color();
         let rgba = `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a/255})`;
         ctx.fillStyle = rgba;
         ctx.setTransform(1, 0, 0, 1, 0, 0);
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         ctx.fillRect(0, 0, canvas.width, canvas.height);
         this._device._stats.drawcalls = 0;
+    },
+
+    terminate () {
+        this.walking = false;
+    },
 
-        RenderFlow.render(scene);
+    _commitComp (comp, assembler) {
+        let ctx = this._device._ctx;
+        let cam = this._camera;
+        ctx.setTransform(cam.a, cam.b, cam.c, cam.d, cam.tx, cam.ty);
+        ctx.scale(1, -1);
+        assembler.draw(ctx, comp);
     }
 };
 
-module.exports = RenderComponentWalker;
+module.exports = RenderComponentHandle;

cocos2d/core/renderer/index.js

@@ -24,9 +24,10 @@
  ****************************************************************************/
 
 const renderEngine = require('./render-engine');
-const math = renderEngine.math;
+const RenderFlow = require('./render-flow');
+const vec3 = cc.vmath.vec3;
 
-let _pos = math.vec3.create();
+let _pos = vec3.create();
 
 function _initBuiltins(device) {
     let defaultTexture = new renderEngine.Texture2D(device, {
@@ -92,14 +93,15 @@ cc.renderer = module.exports = {
      * @type {Number}
      */
     drawCalls: 0,
-    _walker: null,
+    // Render component handler
+    _handle: null,
     _cameraNode: null,
     _camera: null,
     _forward: null,
 
     initWebGL (canvas, opts) {
         require('./webgl/assemblers');
-        const RenderComponentWalker = require('./webgl/render-component-walker');
+        const ModelBatcher = require('./webgl/model-batcher');
 
         this.Texture2D = renderEngine.Texture2D;
 
@@ -114,7 +116,8 @@ cc.renderer = module.exports = {
 
         this.scene = new renderEngine.Scene();
 
-        this._walker = new RenderComponentWalker(this.device, this.scene);
+        this._handle = new ModelBatcher(this.device, this.scene);
+        RenderFlow.init(this._handle);
 
         if (CC_EDITOR) {
             this._cameraNode = new cc.Node();
@@ -159,7 +162,8 @@ cc.renderer = module.exports = {
         this._camera = {
             a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0
         };
-        this._walker = new canvasRenderer.RenderComponentWalker(this.device, this._camera);
+        this._handle = new canvasRenderer.RenderComponentHandle(this.device, this._camera);
+        RenderFlow.init(this._handle);
         this._forward = new canvasRenderer.ForwardRenderer();
     },
 
@@ -198,15 +202,15 @@ cc.renderer = module.exports = {
         this.device._stats.drawcalls = 0;
         if (ecScene) {
             // walk entity component scene to generate models
-            this._walker.visit(ecScene);
+            RenderFlow.visit(ecScene);
             // Render models in renderer scene
             this._forward.render(this.scene);
             this.drawCalls = this.device._stats.drawcalls;
         }
     },
 
     clear () {
-        this._walker.reset();
+        this._handle.reset();
         this._forward._reset();
     }
 };

cocos2d/core/renderer/render-flow.js

@@ -12,7 +12,8 @@ const POST_UPDATE_RENDER_DATA = 1 << 8;
 const POST_RENDER = 1 << 9;
 const FINAL = 1 << 10;
 
-let _walker = null;
+let _batcher;
+let _cullingMask = 0;
 
 function RenderFlow () {
     this._func = init;
@@ -51,7 +52,7 @@ function mul (out, a, b) {
 }
 
 _proto._worldTransform = function (node) {
-    _walker.worldMatDirty ++;
+    _batcher.worldMatDirty ++;
 
     let t = node._matrix;
     let position = node._position;
@@ -62,7 +63,7 @@ _proto._worldTransform = function (node) {
     node._renderFlag &= ~WORLD_TRANSFORM;
     this._next._func(node);
 
-    _walker.worldMatDirty --;
+    _batcher.worldMatDirty --;
 };
 
 _proto._color = function (node) {
@@ -77,12 +78,12 @@ _proto._color = function (node) {
 };
 
 _proto._opacity = function (node) {
-    _walker.parentOpacityDirty++;
+    _batcher.parentOpacityDirty++;
 
     node._renderFlag &= ~OPACITY;
     this._next._func(node);
 
-    _walker.parentOpacityDirty--;
+    _batcher.parentOpacityDirty--;
 };
 
 _proto._updateRenderData = function (node) {
@@ -94,22 +95,25 @@ _proto._updateRenderData = function (node) {
 
 _proto._render = function (node) {
     let comp = node._renderComponent;
-    _walker._commitComp(comp, comp._assembler, node._cullingMask);
+    _batcher._commitComp(comp, comp._assembler, node._cullingMask);
     this._next._func(node);
 };
 
 _proto._customIARender = function (node) {
     let comp = node._renderComponent;
-    _walker._commitIA(comp, comp._assembler, node._cullingMask);
+    _batcher._commitIA(comp, comp._assembler, node._cullingMask);
     this._next._func(node);
 };
 
 _proto._children = function (node) {
-    let parentOpacity = _walker.parentOpacity;
-    let opacity = (_walker.parentOpacity *= (node._opacity / 255));
+    let cullingMask = _cullingMask;
+    let batcher = _batcher;
 
-    let worldTransformFlag = _walker.worldMatDirty ? WORLD_TRANSFORM : 0;
-    let worldOpacityFlag = _walker.parentOpacityDirty ? COLOR : 0;
+    let parentOpacity = batcher.parentOpacity;
+    let opacity = (batcher.parentOpacity *= (node._opacity / 255));
+
+    let worldTransformFlag = batcher.worldMatDirty ? WORLD_TRANSFORM : 0;
+    let worldOpacityFlag = batcher.parentOpacityDirty ? COLOR : 0;
     let worldDirtyFlag = worldTransformFlag | worldOpacityFlag;
 
     let children = node._children;
@@ -126,7 +130,7 @@ _proto._children = function (node) {
         c._color._val = colorVal;
     }
 
-    _walker.parentOpacity = parentOpacity;
+    batcher.parentOpacity = parentOpacity;
 
     this._next._func(node);
 };
@@ -140,7 +144,7 @@ _proto._postUpdateRenderData = function (node) {
 
 _proto._postRender = function (node) {
     let comp = node._renderComponent;
-    _walker._commitComp(comp, comp._postAssembler, node._cullingMask);
+    _batcher._commitComp(comp, comp._postAssembler, node._cullingMask);
     this._next._func(node);
 };
 
@@ -204,38 +208,41 @@ function getFlow (flag) {
     return flow;
 }
 
+// 
+function init (node) {
+    let flag = node._renderFlag;
+    let r = flows[flag] = getFlow(flag);
+    r._func(node);
+}
+
+RenderFlow.flows = flows;
+RenderFlow.createFlow = createFlow;
+RenderFlow.visit = function (scene) {
+    _batcher.reset();
+    _batcher.walking = true;
+
+    _cullingMask = 1 << scene.groupIndex;
 
-function render (scene) {
     if (scene._renderFlag & WORLD_TRANSFORM) {
-        _walker.worldMatDirty ++;
+        _batcher.worldMatDirty ++;
         scene._calculWorldMatrix();
         scene._renderFlag &= ~WORLD_TRANSFORM;
 
         flows[scene._renderFlag]._func(scene);
 
-        _walker.worldMatDirty --;
+        _batcher.worldMatDirty --;
     }
     else {
         flows[scene._renderFlag]._func(scene);
     }
-}
 
-// 
-function init (node) {
-    let flag = node._renderFlag;
-    let r = flows[flag] = getFlow(flag);
-    r._func(node);
-}
-
-RenderFlow.flows = flows;
-RenderFlow.createFlow = createFlow;
-RenderFlow.render = render;
+    _batcher.terminate();
+};
 
-RenderFlow.init = function (walker) {
-    _walker = walker;
+RenderFlow.init = function (batcher) {
+    _batcher = batcher;
 
     flows[0] = EMPTY_FLOW;
-
     for (let i = 1; i < FINAL; i++) {
         flows[i] = new RenderFlow();
     }

cocos2d/core/renderer/webgl/assemblers/graphics/impl.js

@@ -217,7 +217,7 @@ cc.js.mixin(Impl.prototype, {
 
     requestRenderData () {
         let renderData = new IARenderData();
-        let meshbuffer = new MeshBuffer(renderer._walker, vfmtPosColor);
+        let meshbuffer = new MeshBuffer(renderer._handle, vfmtPosColor);
         renderData.meshbuffer = meshbuffer;
         this._renderDatas.push(renderData);
 

cocos2d/core/renderer/webgl/mesh-buffer.js

@@ -3,7 +3,7 @@ const gfx = renderEngine.gfx;
 
 let MeshBuffer = cc.Class({
     name: 'cc.MeshBuffer',
-    ctor (renderer, vertexFormat) {
+    ctor (batcher, vertexFormat) {
         this.byteStart = 0;
         this.byteOffset = 0;
         this.indiceStart = 0;
@@ -15,15 +15,15 @@ let MeshBuffer = cc.Class({
         this._vertexBytes = this._vertexFormat._bytes;
 
         this._vb = new gfx.VertexBuffer(
-            renderer._device,
+            batcher._device,
             vertexFormat,
             gfx.USAGE_DYNAMIC,
             new ArrayBuffer(),
             0
         );
 
         this._ib = new gfx.IndexBuffer(
-            renderer._device,
+            batcher._device,
             gfx.INDEX_FMT_UINT16,
             gfx.USAGE_STATIC,
             new ArrayBuffer(),
@@ -34,7 +34,7 @@ let MeshBuffer = cc.Class({
         this._iData = null;
         this._uintVData = null;
 
-        this._renderer = renderer;
+        this._batcher = batcher;
 
         this._initVDataCount = 256 * vertexFormat._bytes; // actually 256 * 4 * (vertexFormat._bytes / 4)
         this._initIDataCount = 256 * 6;
@@ -87,9 +87,9 @@ let MeshBuffer = cc.Class({
     },
 
     request (vertexCount, indiceCount) {
-        if (this._renderer._buffer !== this) {
-            this._renderer._flush();
-            this._renderer._buffer = this;
+        if (this._batcher._buffer !== this) {
+            this._batcher._flush();
+            this._batcher._buffer = this;
         }
 
         this.requestStatic(vertexCount, indiceCount);