Cocos2D X shader 一渲染機制

cocos2d-x 從3.0開始引入了一種新的渲染機制，所有的opengl渲染**不再放到每乙個node的draw函式裡面，而是通過各種rendercommand封裝起來，然後新增到乙個渲染佇列裡面去，最後在每一幀結束時把所有的這些命令都渲染出來。過程如下圖所示：

引擎不再使用主線程，而是開闢新的執行緒對佇列中的任務統一進行渲染，這有助於並行性，利用多核處理器提公升渲染的效率。每個渲染任務都有個key值，渲染佇列依據key值排序，依據優先順序進行渲染。

具體key值的定義，可以閱讀這裡。

了解cocos2d-x的渲染機制後，用**實現自己想要渲染的圖形就變得容易了。首先是上節提到的rendercommand，他的作用是將渲染函式封裝到渲染佇列中去。cocos提供了

customcommand類（繼承自

rendercommand）來實現使用者自定義呼叫opengl命令。通過customcommand，我們就能繫結自己寫的opengl**函式了。但是，封裝之後，渲染指令並不會執行，這是因為我們還沒有向renderqueue傳送渲染指令。

cocos2d-x中node類定義了虛函式

virtual void visit(renderer *renderer, const mat4& parenttransform, uint32_t parentflags);來

遍歷所有子節點，並且迴圈遞迴得傳送它們的渲染指令。layer繼承自node，因此我們可以過載visit函式，使用customcommand來傳送自定義的渲染指令。

接下來就是定義自己的渲染函式（ondraw），使用opengl es 2.0來實現自己的圖形。

新建乙個測試工程，具體**如下：

標頭檔案

#include "cocos2d.h"
using_ns_cc;
class helloworld : public cocos2d::layer
;

原始檔：

bool helloworld::init()
//從cocos2d-x的shader快取中取出乙個帶有position和color頂點屬性的shader，然後傳給helloworld這個layer！！！
this->setglprogram(glprogramcache::getinstance()->getglprogram(glprogram::shader_name_position_color));
return true;
}void helloworld::visit(renderer* renderer, const mat4& parenttransform, uint32_t parentflags)
void helloworld::ondraw()
; //第三個點的座標
//指定每乙個頂點的顏色，顏色值是rgba格式的，取值範圍是0-1
float color = ; //第三個點的顏色， 藍色
//啟用名字為position和color的vertex attribute
gl::enablevertexattribs(gl::vertex_attrib_flag_position | gl::vertex_attrib_flag_color);
//分別給position和color指定資料來源
glvertexattribpointer(glprogram::vertex_attrib_position, 2, gl_float, gl_false, 0, vertercies);
glvertexattribpointer(glprogram::vertex_attrib_color, 4, gl_float, gl_false, 0, color);
//繪製三角形，所謂的draw call就是指這個函式呼叫
gldrawarrays(gl_********s, 0, 3);
//通知cocos2d-x 的renderer，讓它在合適的時候呼叫這些opengl命令
cc_increment_gl_drawn_batches_and_vertices(1, 3);
//如果出錯了，可以使用這個函式來獲取出錯資訊
check_gl_error_debug();
}

執行結果：

Cocos2D X shader 一渲染機制

cocos2d x 學習筆記一

Cocos2d x 學習日記一

解析cocos2d test專案（一）

Cocos2D X shader 一 渲染機制

cocos2d x 學習筆記 一

Cocos2d x 學習日記 一

解析cocos2d test專案（一）

相關推薦

Cocos2D X shader 一渲染機制

cocos2d x 學習筆記一

Cocos2d x 學習日記一