Cocos Creator 3D 渲染管线超强解读！

作者对于 3.0 渲染管线的理解非常深入。这篇文章可以帮助开发者快速熟悉 3.0 的渲染管线，尽快熟悉下一代渲染架构。

——Cocos Minggo

  作者：Kunkka

大家好！我是一名来自腾讯的 Cocos 开发者，从 Cocos-iPhone，Cocos2d-x lua，Cocos Creator 到 Cocos Creator 3D，算下来我使用 Cocos 引擎有差不多10年了。此前比较少写博客，这是第一次在 Cocos 社区写技术分享，欢迎大家在评论区或社区原帖与我进行交流！

欢迎关注我的 Github

https://github.com/kunka

前言

Cocos Creator 3D 刚刚发布了 3.0 Preview 版，首次将 2D 和 3D 版本合并到了一起，经过多个版本迭代，渲染架构大幅升级与优化，非常值得深入学习和研究，以下是官网的性能与框架介绍：

• 多渲染后端框架，已支持 WebGL 1.0 和 WebGL 2.0

• 面向未来的底层渲染 API 设计

• 基于 Command Buffer 提交渲染数据

目前渲染相关文档并不完善，本文将从源码入手分析 Cocos Creator 3D 多渲染后端框架 GFX，引擎默认的前向渲染管线实现，以及如何实现自定义渲染管线。

目录

• 多渲染后端框架 GFX

  • WebGL 渲染过程

  • GFX 中的对象

  • GFX 渲染过程

• Cocos Creator 3D 渲染管线

  • 渲染架构 UML

  • 前向渲染管线

  • 自定义渲染管线

多渲染后端框架 GFX

GFX 是针对渲染层做的高级抽象和封装，以达到编写一次渲染代码，适配不同渲染后端的目的。

目前源码中可见引擎已经适配了以下几种渲染后端：

• WebGL

• WebGL2

• OpenGL ES2

• OpenGL ES3

• Metal

• Vulkan

❝

GFX 可以理解为实现 Cocos Creator 3D 引擎渲染的最基础接口，实现自定义渲染只能通过 GFX 提供的接口和规则来编写，以往在 Cocos 引擎中直接编写 GL 代码的方式已经成为过去。

❞

GFX 接口设计更贴近 Vulkan 等下一代渲染接口，为了说明 GFX 如何抽象渲染层，我们通过WebGL 渲染做一个对比，然后再用 GFX 接口来实现同样的功能。

WebGL 渲染过程

下面的示例代码展示了一次简单的 WebGL 渲染，目的是显示一张 2D 纹理：

function prepare(){
  // texture
  var texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texParameteri(/**...*/);
  gl.texImage2D(/** fill image data */);

  // shader
  var shader = someCreateShaderFunc("vert...", "frag...");
  gl.useProgram(shader);

  // vertex buffer
  var vb = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vb);
  gl.bufferData(/** fill vert data */;
  // bind attributes
  var attr = gl.getAttribLocation(shader, 'a_position');
  gl.enableVertexAttribArray(attr);
  gl.vertexAttribPointer(attr, /**...*/);
  var attr = gl.getAttribLocation(shader, 'a_texCoord');
  gl.enableVertexAttribArray(attr);
  gl.vertexAttribPointer(attr, /**...*/);

  // indices buffer
  var ib = gl.createBuffer();
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ib);
  gl.bufferData(/** fill indices data */;
}

prepare();
render();

function render(){
  // begin draw
  //gl.b