作者对于 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.