Cocos2d-x 2.0 渲染到紋理深入分析

你的財神爺發表於2017-12-07

現在我們將重新認識一下RenderTexture。在TestCpp中它做為獨立的演示場景存在，名稱為RenderTextureTest。我們先來看一下最重要的類CCRenderTexture。它是用於管理渲染目標紋理的類，與紋理不同的是，它必須是屬於

開啟CCRenderTexture.h:

[cpp]view
 plain copy

//影象格式列舉，可以儲存為JPG和PNG兩種格式  

typedef enum eImageFormat  

{  

    kCCImageFormatJPEG      = 0,  

    kCCImageFormatPNG       = 1,  

} tCCImageFormat;  

//由結點派生  

class CC_DLL CCRenderTexture : public CCNode   

{  

    //精靈成員變數及存取介面  

    CC_PROPERTY(CCSprite*, m_pSprite, Sprite)  

public:  

    //構造  

    CCRenderTexture();  

    //析構  

    virtual ~CCRenderTexture();  

    //建立一個渲染目標紋理。引數指定大小，畫素格式和深度模板緩衝格式。內部呼叫create實現。  

    CC_DEPRECATED_ATTRIBUTE static CCRenderTexture * renderTextureWithWidthAndHeight(int w ,int h, CCTexture2DPixelFormat eFormat, GLuint uDepthStencilFormat);  

    //建立一個渲染目標紋理。引數指定大小，畫素格式。內部呼叫create實現。  

    CC_DEPRECATED_ATTRIBUTE static CCRenderTexture * renderTextureWithWidthAndHeight(int w, int h, CCTexture2DPixelFormat eFormat);  

    //建立一個渲染目標紋理。引數指定大小.。內部呼叫create實現。  

    CC_DEPRECATED_ATTRIBUTE static CCRenderTexture * renderTextureWithWidthAndHeight(int w, int h);  

    //第一個函式的create實現。  

    static CCRenderTexture * create(int w ,int h, CCTexture2DPixelFormat eFormat, GLuint uDepthStencilFormat);  

    //第二個函式的create實現。  

    static CCRenderTexture * create(int w, int h, CCTexture2DPixelFormat eFormat);  

    //第三個函式的create實現。  

    static CCRenderTexture * create(int w, int h);  

    //初始化，引數為大小和畫素格式。  

    bool initWithWidthAndHeight(int w, int h, CCTexture2DPixelFormat eFormat);  

    //初始化，引數為大小和畫素格式,深度模板緩衝格式。  

    bool initWithWidthAndHeight(int w, int h, CCTexture2DPixelFormat eFormat, GLuint uDepthStencilFormat);  

    //開始渲染到當前目標紋理。  

    void begin();  

    //清空顏色緩衝的值為指定值。  

    void beginWithClear(float r, float g, float b, float a);  

    //清空顏色緩衝和深度的值為指定值。  

    void beginWithClear(float r, float g, float b, float a, float depthValue);  

    //清空顏色緩衝和深度，模版值緩衝的值為指定值。  

    void beginWithClear(float r, float g, float b, float a, float depthValue, int stencilValue);  

    //LUA中呼叫的結束函式。  

    inline void endToLua(){ end();};  

    //結束渲染到當前目標紋理。  

    void end();  

    //清空目標紋理的顏色為指定色  

    void clear(float r, float g, float b, float a);  

    //清空目標紋理的深度值  

    void clearDepth(float depthValue);  

    //清空目標紋理的模板緩衝值  

    void clearStencil(int stencilValue);  

    //由目標紋理的資料產生出CCImage例項。  

    CCImage* newCCImage();  

    //儲存目標紋理到相應圖片檔案。  

    bool saveToFile(const char *szFilePath);  

    //儲存目標紋理到相應圖片檔案,指定影象格式。  

    bool saveToFile(const char *name, tCCImageFormat format);  

    //監聽訊息，儲存目標紋理。  

    void listenToBackground(CCObject *obj);  

protected:  

    //FBO物件，即幀緩衝區，一幀中畫素資料儲存的緩衝區域。可參看http://www.cnblogs.com/aokman/archive/2010/11/14/1876987.html  

    GLuint       m_uFBO;  

    //深度緩衝。  

    GLuint       m_uDepthRenderBufffer;  

    //儲存舊的FBO物件。  

    GLint        m_nOldFBO;  

    //使用的紋理。  

    CCTexture2D* m_pTexture;  

    //用於儲存當前紋理資料的可變紋理物件。  

    CCImage*     m_pUITextureImage;  

    //畫素格式  

    GLenum       m_ePixelFormat;  

};

然後是CPP：

[cpp]view
 plain copy

//構造  

CCRenderTexture::CCRenderTexture()  

: m_pSprite(NULL)  

, m_uFBO(0)  

, m_uDepthRenderBufffer(0)  

, m_nOldFBO(0)  

, m_pTexture(0)  

, m_pUITextureImage(NULL)  

, m_ePixelFormat(kCCTexture2DPixelFormat_RGBA8888)  

{  

    //設定監聽EVENT_COME_TO_BACKGROUND事件，如果響應呼叫CCRenderTexture::listenToBackground函式。  

    CCNotificationCenter::sharedNotificationCenter()->addObserver(this,  

                                                                             callfuncO_selector(CCRenderTexture::listenToBackground),  

                                                                             EVENT_COME_TO_BACKGROUND,  

                                                                             NULL);  

}  

//析構  

CCRenderTexture::~CCRenderTexture()  

{  

    //釋放FBO  

    glDeleteFramebuffers(1, &m_uFBO);  

    //釋放深度緩衝  

    if (m_uDepthRenderBufffer)  

    {  

        glDeleteRenderbuffers(1, &m_uDepthRenderBufffer);  

    }  

    //釋放  

    CC_SAFE_DELETE(m_pUITextureImage);  

    //移除監聽響應函式。  

    CCNotificationCenter::sharedNotificationCenter()->removeObserver(this, EVENT_COME_TO_BACKGROUND);  

}  

//監聽訊息，儲存目標紋理。  

void CCRenderTexture::listenToBackground(cocos2d::CCObject *obj)  

{  

//如果使用可變紋理。  

#if CC_ENABLE_CACHE_TEXTURE_DATA  

    //釋放上一個m_pUITextureImage  

    CC_SAFE_DELETE(m_pUITextureImage);  

    // 產生當前渲染目標的CCImage  

    m_pUITextureImage = newCCImage();  

    //如果成功則將紋理m_pTexture中資料填充到可變紋理。  

    if (m_pUITextureImage)  

    {  

        const CCSize& s = m_pTexture->getContentSizeInPixels();  

        VolatileTexture::addDataTexture(m_pTexture, m_pUITextureImage->getData(), kTexture2DPixelFormat_RGBA8888, s);  

    }   

    else  

    {  

        CCLOG("Cache rendertexture failed!");  

    }  

#endif  

}  

//取得精靈成員  

CCSprite * CCRenderTexture::getSprite()  

{  

    return m_pSprite;  

}  

//設定精靈成員。  

void CCRenderTexture::setSprite(CCSprite* var)  

{  

    m_pSprite = var;  

}  

//建立一個渲染目標紋理。引數指定大小，畫素格式。內部呼叫create實現。  

CCRenderTexture * CCRenderTexture::renderTextureWithWidthAndHeight(int w, int h, CCTexture2DPixelFormat eFormat)  

{  

    return CCRenderTexture::create(w, h, eFormat);  

}  

//上面的create實現。   

CCRenderTexture * CCRenderTexture::create(int w, int h, CCTexture2DPixelFormat eFormat)  

{  

    //建立一個渲染目標紋理。  

    CCRenderTexture *pRet = new CCRenderTexture();  

    //呼叫相應的初始化函式。  

    if(pRet && pRet->initWithWidthAndHeight(w, h, eFormat))  

    {  

        //成功後交由記憶體管理器進行管理。  

        pRet->autorelease();  

        return pRet;  

    }  

    //不成功則釋放置空返回NULL。  

    CC_SAFE_DELETE(pRet);  

    return NULL;  

}  

//建立一個渲染目標紋理。引數指定大小，畫素格式和深度模板緩衝格式。內部呼叫create實現。  

CCRenderTexture * CCRenderTexture::renderTextureWithWidthAndHeight(int w ,int h, CCTexture2DPixelFormat eFormat, GLuint uDepthStencilFormat)  

{  

    return CCRenderTexture::create(w, h, eFormat, uDepthStencilFormat);  

}  

//上面的create實現。  

CCRenderTexture * CCRenderTexture::create(int w ,int h, CCTexture2DPixelFormat eFormat, GLuint uDepthStencilFormat)  

{  

    //建立一個渲染目標紋理。  

    CCRenderTexture *pRet = new CCRenderTexture();  

    //呼叫相應的初始化函式。  

    if(pRet && pRet->initWithWidthAndHeight(w, h, eFormat, uDepthStencilFormat))  

    {  

        pRet->autorelease();  

        return pRet;  

    }  

    CC_SAFE_DELETE(pRet);  

    return NULL;  

}  

//建立一個渲染目標紋理。引數指定大小。內部呼叫create實現。  

CCRenderTexture * CCRenderTexture::renderTextureWithWidthAndHeight(int w, int h)  

{  

    return CCRenderTexture::create(w, h);  

}  

//上面的create實現。  

CCRenderTexture * CCRenderTexture::create(int w, int h)  

{  

    //建立一個渲染目標紋理。  

    CCRenderTexture *pRet = new CCRenderTexture();  

    //呼叫相應的初始化函式。  

    if(pRet && pRet->initWithWidthAndHeight(w, h, kCCTexture2DPixelFormat_RGBA8888, 0))  

    {  

        pRet->autorelease();  

        return pRet;  

    }  

    CC_SAFE_DELETE(pRet);  

    return NULL;  

}  

//初始化，引數為大小和畫素格式格式。  

bool CCRenderTexture::initWithWidthAndHeight(int w, int h, CCTexture2DPixelFormat eFormat)  

{  

    return initWithWidthAndHeight(w, h, eFormat, 0);  

}  

    //初始化，引數為大小和畫素格式,深度模板緩衝格式。  

bool CCRenderTexture::initWithWidthAndHeight(int w, int h, CCTexture2DPixelFormat eFormat, GLuint uDepthStencilFormat)  

{  

    //有效性判斷。  

    CCAssert(m_ePixelFormat != kCCTexture2DPixelFormat_A8, "only RGB and RGBA formats are valid for a render texture");  

    //  

    bool bRet = false;  

    //使用do –while結構來保證出錯及時中斷退出  

    do   

    {  

        //寬高要乘以縮放值。  

        w *= (int)CC_CONTENT_SCALE_FACTOR();  

        h *= (int)CC_CONTENT_SCALE_FACTOR();  

        //儲存當前的FBO物件。  

        glGetIntegerv(GL_FRAMEBUFFER_BINDING, &m_nOldFBO);  

        //建立臨時變數儲存紋理的真實大小。  

        unsigned int powW = 0;  

        unsigned int powH = 0;  

        //看是否支援紋理的非2冪次方，做相應的處理。  

        if( CCConfiguration::sharedConfiguration()->supportsNPOT() ) {  

        //如果支援就用w,h做為紋理大小。  

            powW = w;  

            powH = h;  

        } else {  

        //如果不支援要轉換為2的冪次方大小。  

            powW = ccNextPOT(w);  

            powH = ccNextPOT(h);  

        }  

        //為畫素申請記憶體。每畫素4位元組。  

        void *data = malloc((int)(powW * powH * 4));  

        //記憶體申請失敗則中斷退出。  

        CC_BREAK_IF(! data);  

        //清空記憶體為0。  

        memset(data, 0, (int)(powW * powH * 4));  

        //儲存畫素格式。  

        m_ePixelFormat = eFormat;  

        //建立一個新的紋理。  

        m_pTexture = new CCTexture2D();  

        //由上面的畫素資料和大小，畫素格式資訊填充紋理。  

        if (m_pTexture) {  

                m_pTexture->initWithData(data, (CCTexture2DPixelFormat)m_ePixelFormat, powW, powH, CCSizeMake((float)w, (float)h));  

                free( data );  

        } else {  

                free( data );  // ScopeGuard (a simulated Finally clause) would be more elegant.  

                break;  

        }  

        //取得當前的FBO物件。  

        GLint oldRBO;  

        glGetIntegerv(GL_RENDERBUFFER_BINDING, &oldRBO);  

        // 建立新的FBO並繫結。  

        glGenFramebuffers(1, &m_uFBO);  

        glBindFramebuffer(GL_FRAMEBUFFER, m_uFBO);  

        //設定將幀緩衝區顏色資料輸出到紋理。  

        glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, m_pTexture->getName(), 0);  

        //如果有使用深度緩衝。  

        if (m_uDepthRenderBufffer != 0)   

        {  

            //建立一個渲染目標深度緩衝區並繫結。  

            glGenRenderbuffers(1, &m_uDepthRenderBufffer);  

            glBindRenderbuffer(GL_RENDERBUFFER, m_uDepthRenderBufffer);  

          //設定當前渲染目標緩衝氏的畫素格式和大小。  

            glRenderbufferStorage(GL_RENDERBUFFER, uDepthStencilFormat, (GLsizei)powW, (GLsizei)powH);  

            //設定將幀緩衝區深度資料輸出到這個新建立的深度緩衝區。  

            glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT, GL_RENDERBUFFER, m_uDepthRenderBufffer);  

            //如果深度緩衝格式是24位深度，8位模版緩衝，則設定將幀緩衝區的模版資料輸出到這個新建立的深度緩衝區中。  

            if (uDepthStencilFormat == CC_GL_DEPTH24_STENCIL8)  

                glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_STENCIL_ATTACHMENT, GL_RENDERBUFFER, m_uDepthRenderBufffer);  

        }  

        // 檢查上面操作是否正常執行。  

        CCAssert(glCheckFramebufferStatus(GL_FRAMEBUFFER) == GL_FRAMEBUFFER_COMPLETE, "Could not attach texture to framebuffer");  

        //設定紋理不使用抗距齒模糊。  

        m_pTexture->setAliasTexParameters();  

        //由紋理建立精靈成員。  

        m_pSprite = CCSprite::createWithTexture(m_pTexture);  

        //釋放紋理。  

        m_pTexture->release();  

        //精靈設定Y映象並放入到當前結點下。  

        m_pSprite->setScaleY(-1);  

        this->addChild(m_pSprite);  

        //設定ALPHA混合方案。  

        ccBlendFunc tBlendFunc = {GL_ONE, GL_ONE_MINUS_SRC_ALPHA };  

        m_pSprite->setBlendFunc(tBlendFunc);  

        //還原所用的  

        glBindRenderbuffer(GL_RENDERBUFFER, oldRBO);  

        glBindFramebuffer(GL_FRAMEBUFFER, m_nOldFBO);  

        bRet = true;  

    } while (0);  

    return bRet;  

}  

//開始渲染到當前目標紋理。  

void CCRenderTexture::begin()  

{  

    // 儲存當前矩陣  

    kmGLPushMatrix();  

    //取得紋理的大小。  

    const CCSize& texSize = m_pTexture->getContentSizeInPixels();  

    // 取得裝置的視窗大小，計算出視口和投影矩陣  

    CCDirector *director = CCDirector::sharedDirector();  

    CCSize size = director->getWinSizeInPixels();  

    float widthRatio = size.width / texSize.width;  

    float heightRatio = size.height / texSize.height;  

    glViewport(0, 0, (GLsizei)texSize.width, (GLsizei)texSize.height);  

    kmMat4 orthoMatrix;  

    kmMat4OrthographicProjection(&orthoMatrix, (float)-1.0 / widthRatio,  (float)1.0 / widthRatio,  

        (float)-1.0 / heightRatio, (float)1.0 / heightRatio, -1,1 );  

    kmGLMultMatrix(&orthoMatrix);  

    //取得當前的FBO  

    glGetIntegerv(GL_FRAMEBUFFER_BINDING, &m_nOldFBO);  

    glBindFramebuffer(GL_FRAMEBUFFER, m_uFBO);  

}  

//清空顏色緩衝。  

void CCRenderTexture::beginWithClear(float r, float g, float b, float a)  

{  

    //開始渲染到目標紋理。  

    this->begin();  

    //臨時變數，用於儲存當前幀的色彩緩衝的清空值資料。  

    GLfloat    clearColor[4];  

glGetFloatv(GL_COLOR_CLEAR_VALUE,clearColor);   

    //按指定清空值數值清空色彩緩衝區。  

    glClearColor(r, g, b, a);  

    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);  

    //恢復色彩緩衝的清空值資料。  

    glClearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);       

}  

//清空顏色緩衝和深度緩衝的值為指定值。  

void CCRenderTexture::beginWithClear(float r, float g, float b, float a, float depthValue)  

{  

    //開始渲染到目標紋理。  

    this->begin();  

    //臨時變數，用於儲存當前幀的各緩衝的清空值資料。  

    GLfloat clearColor[4];  

    GLfloat depthClearValue;  

    glGetFloatv(GL_COLOR_CLEAR_VALUE,clearColor);  

    glGetFloatv(GL_DEPTH_CLEAR_VALUE, &depthClearValue);  

    //按指定清空值數值清空各繪衝區。  

    glClearColor(r, g, b, a);  

    glClearDepth(depthValue);  

    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);  

    //恢復各緩衝的清空值資料。  

    glClearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);  

    glClearDepth(depthClearValue);  

}  

//清空顏色緩衝和深度，模版值緩衝的值為指定值。  

void CCRenderTexture::beginWithClear(float r, float g, float b, float a, float depthValue, int stencilValue)  

{  

    //開始渲染到目標紋理。  

    this->begin();  

    //臨時變數，用於儲存當前幀的各緩衝的清空值資料。  

    GLfloat clearColor[4];  

    GLfloat depthClearValue;  

    int stencilClearValue;  

    glGetFloatv(GL_COLOR_CLEAR_VALUE,clearColor);  

    glGetFloatv(GL_DEPTH_CLEAR_VALUE, &depthClearValue);  

    glGetIntegerv(GL_STENCIL_CLEAR_VALUE, &stencilClearValue);  

    //按指定清空值數值清空各繪衝區。  

    glClearColor(r, g, b, a);  

    glClearDepth(depthValue);  

    glClearStencil(stencilValue);  

    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT | GL_STENCIL_BUFFER_BIT);  

    // 恢復各緩衝的清空值資料。  

    glClearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);  

    glClearDepth(depthClearValue);  

    glClearStencil(stencilClearValue);  

}  

//結束渲染到當前目標紋理。  

void CCRenderTexture::end()  

{  

    //還原舊的FBO  

    glBindFramebuffer(GL_FRAMEBUFFER, m_nOldFBO);  

    //恢復矩陣  

    kmGLPopMatrix();  

    //取得裝置。  

    CCDirector *director = CCDirector::sharedDirector();  

    //取得視窗大小。  

    CCSize size = director->getWinSizeInPixels();  

    // 還原視口及投影矩陣。  

    glViewport(0, 0, GLsizei(size.width * CC_CONTENT_SCALE_FACTOR()), GLsizei(size.height * CC_CONTENT_SCALE_FACTOR()));  

    if ( director->getProjection() == kCCDirectorProjection3D && CC_CONTENT_SCALE_FACTOR() != 1 )  

    {  

        glViewport((GLsizei)(-size.width/2), (GLsizei)(-size.height/2), (GLsizei)(size.width * CC_CONTENT_SCALE_FACTOR()), (GLsizei)(size.height * CC_CONTENT_SCALE_FACTOR()));  

    }  

    director->setProjection(director->getProjection());  

}  

//清空目標紋理的顏色為指定色  

void CCRenderTexture::clear(float r, float g, float b, float a)  

{  

    //開始渲染到目標紋理並清空目標紋理的顏色為指定色。  

    this->beginWithClear(r, g, b, a);  

    //結束渲染到目標紋理。  

    this->end();  

}  

//清空目標紋理的深度值為指定值。  

void CCRenderTexture::clearDepth(float depthValue)  

{  

    //開始渲染到目標紋理。  

    this->begin();  

    // 取得當前深度緩衝清空值。  

    GLfloat depthClearValue;  

    glGetFloatv(GL_DEPTH_CLEAR_VALUE, &depthClearValue);  

    //設定新深度清空值並清空模板緩衝。  

    glClearDepth(depthValue);  

    glClear(GL_DEPTH_BUFFER_BIT);  

    //還用深度緩衝清空值。  

    glClearDepth(depthClearValue);  

    //結束渲染到目標紋理。  

    this->end();  

}  

//清空目標紋理的模版緩衝值為指定色  

void CCRenderTexture::clearStencil(int stencilValue)  

{  

    // 取得當前模板緩衝清空值。  

    int stencilClearValue;  

    glGetIntegerv(GL_STENCIL_CLEAR_VALUE, &stencilClearValue);  

    //設定新模板清空值並清空模板緩衝。  

    glClearStencil(stencilValue);  

    glClear(GL_STENCIL_BUFFER_BIT);  

    //還原模板緩衝清空值。  

    glClearStencil(stencilClearValue);  

}  

//儲存目標紋理到相應圖片檔案。  

bool CCRenderTexture::saveToFile(const char *szFilePath)  

{  

    bool bRet = false;  

    //取得當前渲染目標紋理產生的CCImage。  

    CCImage *pImage = newCCImage();  

    if (pImage)  

    {   //儲存到圖片。  

        bRet = pImage->saveToFile(szFilePath, kCCImageFormatJPEG);  

    }  

    //釋放pImage  

    CC_SAFE_DELETE(pImage);  

    return bRet;  

}  

//儲存目標紋理到相應圖片檔案，可以指定畫素格式。  

bool CCRenderTexture::saveToFile(const char *fileName, tCCImageFormat format)  

{  

    bool bRet = false;  

    //只允許JPG和PNG格式  

    CCAssert(format == kCCImageFormatJPEG || format == kCCImageFormatPNG,  

             "the image can only be saved as JPG or PNG format");  

    //取得當前渲染目標紋理產生的CCImage。  

    CCImage *pImage = newCCImage();  

    if (pImage)  

    {  

        //取得路徑。  

        std::string fullpath = CCFileUtils::sharedFileUtils()->getWriteablePath() + fileName;  

        //儲存到圖片。  

        bRet = pImage->saveToFile(fullpath.c_str(), true);  

    }  

    //釋放pImage  

    CC_SAFE_DELETE(pImage);  

    //返回成敗。  

    return bRet;  

}  

//由目標紋理的資料產生出CCImage例項。/  

CCImage* CCRenderTexture::newCCImage()  

{  

    //有效性判斷。  

    CCAssert(m_ePixelFormat == kCCTexture2DPixelFormat_RGBA8888, "only RGBA8888 can be saved as image");  

    if (NULL == m_pTexture)  

    {  

        return NULL;  

    }  

    //取得紋理的大小。  

    const CCSize& s = m_pTexture->getContentSizeInPixels();  

    //取得寬高。   

    int nSavedBufferWidth = (int)s.width;  

    int nSavedBufferHeight = (int)s.height;  

    //定義臨時指標變數。  

    GLubyte *pBuffer = NULL;  

    GLubyte *pTempData = NULL;  

    CCImage *pImage = new CCImage();  

    //do-while流程結構保證出錯及時退出。  

    do  

{  

        //建立最終結果的畫素資料陣列的記憶體。  

        CC_BREAK_IF(! (pBuffer = new GLubyte[nSavedBufferWidth * nSavedBufferHeight * 4]));  

        //申請臨時畫素資料陣列的記憶體。  

        if(! (pTempData = new GLubyte[nSavedBufferWidth * nSavedBufferHeight * 4]))  

        {  

            delete[] pBuffer;  

            pBuffer = NULL;  

            break;  

        }  

        //開始渲染到目標紋理。  

        this->begin();  

        //設定畫素按位元組對齊。  

        glPixelStorei(GL_PACK_ALIGNMENT, 1);  

        //將畫素寫入到pTempData中。  

        glReadPixels(0,0,nSavedBufferWidth, nSavedBufferHeight,GL_RGBA,GL_UNSIGNED_BYTE, pTempData);  

        this->end();  

        //將pTempData從下往上拷到pBuffer中，為什麼呢？因為前面initWithWidthAndHeight中精靈成員設定了Y映象，所以影象是上下反的。   

        for (int i = 0; i < nSavedBufferHeight; ++i)  

        {  

            memcpy(&pBuffer[i * nSavedBufferWidth * 4],   

                &pTempData[(nSavedBufferHeight - i - 1) * nSavedBufferWidth * 4],   

                nSavedBufferWidth * 4);  

        }  

        //填充pImage  

        pImage->initWithImageData(pBuffer, nSavedBufferWidth * nSavedBufferHeight * 4, CCImage::kFmtRawData, nSavedBufferWidth, nSavedBufferHeight, 8);  

    } while (0);  

    //釋放申請的記憶體  

    CC_SAFE_DELETE_ARRAY(pBuffer);  

    CC_SAFE_DELETE_ARRAY(pTempData);  

    return pImage;  

}

這個渲染目標紋理的核心功能類解析完之後，我們就沒有什麼還不可以理解的了。現在我們來開啟RenderTextureTest.h:

[cpp]view
 plain copy

//演示用的層，做為基類使用  

class RenderTextureTest : public CCLayer  

{  

public:  

    //載入當前層時的處理  

    virtual void onEnter();  

    //取得標題。  

    virtual std::string title();  

    //取得副標題。  

    virtual std::string subtitle();  

    //重新啟動當前演示  

    void restartCallback(CCObject* pSender);  

    //下一個演示  

    void nextCallback(CCObject* pSender);  

    //上一個演示  

    void backCallback(CCObject* pSender);  

};

對應CPP:

[cpp]view
 plain copy

//場景索引  

static int sceneIdx = -1;   

//最大的演示層數量，四個  

#define MAX_LAYER    4  

//建立相應的演示層  

CCLayer* createTestCase(int nIndex)  

{  

    //根據索引建立相應的演示層例項。  

    switch(nIndex)  

    {  

    case 0: return new RenderTextureSave();  

    case 1: return new RenderTextureIssue937();  

    case 2: return new RenderTextureZbuffer();      

    case 3: return new RenderTextureTestDepthStencil();  

    }  

    return NULL;  

}  

//下一個演示例項  

CCLayer* nextTestCase()  

{  

    sceneIdx++;  

    sceneIdx = sceneIdx % MAX_LAYER;  

    CCLayer* pLayer = createTestCase(sceneIdx);  

    pLayer->autorelease();  

    return pLayer;  

}  

//上一個演示例項  

CCLayer* backTestCase()  

{  

    sceneIdx--;  

    int total = MAX_LAYER;  

    if( sceneIdx < 0 )  

        sceneIdx += total;      

    CCLayer* pLayer = createTestCase(sceneIdx);  

    pLayer->autorelease();  

    return pLayer;  

}  

//重新執行當前的演示例項。  

CCLayer* restartTestCase()  

{  

    CCLayer* pLayer = createTestCase(sceneIdx);  

    pLayer->autorelease();  

    return pLayer;  

}  

//載入當前層時的處理。  

void RenderTextureTest::onEnter()  

{  

    //先呼叫基類的相應函式。  

    CCLayer::onEnter();  

    //取得螢幕大小  

    CCSize s = CCDirector::sharedDirector()->getWinSize();  

    //建立相應的文字標籤。  

    CCLabelTTF* label = CCLabelTTF::create(title().c_str(), "Arial", 26);  

    //將文字標籤放到當前層下。  

    addChild(label, 1);  

    //將文字標籤放置在螢幕中央上部。  

    label->setPosition( ccp(s.width/2, s.height-50) );  

    //取得副標題。  

    std::string strSubtitle = subtitle();  

    if( ! strSubtitle.empty() )   

    {  

        //如果副標題文字有效，建立相應的文字標籤顯示副標題。  

        CCLabelTTF* l = CCLabelTTF::create(strSubtitle.c_str(), "Thonburi", 16);  

        //將副標題放入當前層下並放在主標題之下位置。  

        addChild(l, 1);  

        l->setPosition( ccp(s.width/2, s.height-80) );  

    }      

    //建立用於控制動畫演示的選單項  

    //用於點選返回上一個動畫演示的選單項。  

    CCMenuItemImage *item1 = CCMenuItemImage::create("Images/b1.png", "Images/b2.png", this, menu_selector(RenderTextureTest::backCallback) );  

    //用於點選重新執行當前動畫演示的選單項。  

    CCMenuItemImage *item2 = CCMenuItemImage::create("Images/r1.png","Images/r2.png", this, menu_selector(RenderTextureTest::restartCallback) );  

    //用於點選重新執行下一個動畫演示的選單項。  

    CCMenuItemImage *item3 = CCMenuItemImage::create("Images/f1.png", "Images/f2.png", this, menu_selector(RenderTextureTest::nextCallback) );  

    //由上面三個選單項建立選單。  

    CCMenu *menu = CCMenu::create(item1, item2, item3, NULL);  

    //設定選單和各選單項的位置。  

    menu->setPosition( CCPointZero );  

    item1->setPosition( ccp( s.width/2 - item2->getContentSize().width*2, item2->getContentSize().height/2) );  

    item2->setPosition( ccp( s.width/2, item2->getContentSize().height/2) );  

    item3->setPosition( ccp( s.width/2 + item2->getContentSize().width*2, item2->getContentSize().height/2) );  

    //將選單放入到當前層下。  

    addChild(menu, 1);  

}  

//響應重啟當前演示的函式。  

void RenderTextureTest::restartCallback(CCObject* pSender)  

{  

    //建立一個新的場景，建立一個新的當前演示層並放入到這個場景中。  

    CCScene* s = new RenderTextureScene();  

    s->addChild(restartTestCase());   

    //執行建立的場景。  

    CCDirector::sharedDirector()->replaceScene(s);  

    s->release();  

}  

//響應進行下一個演示的函式。  

void RenderTextureTest::nextCallback(CCObject* pSender)  

{  

    //建立一個新的場景，建立下一個演示層並放入到這個場景中。  

    CCScene* s = new RenderTextureScene();  

    s->addChild( nextTestCase() );  

    //執行建立的場景。  

    CCDirector::sharedDirector()->replaceScene(s);  

    s->release();  

}  

//響應進行上一個演示的函式。  

void RenderTextureTest::backCallback(CCObject* pSender)  

{  

    //建立一個新的場景，建立上一個演示層並放入到這個場景中。  

    CCScene* s = new RenderTextureScene();  

    s->addChild( backTestCase() );  

    //執行建立的場景。  

    CCDirector::sharedDirector()->replaceScene(s);  

    s->release();  

}   

//取得標題。  

std::string RenderTextureTest::title()  

{  

    return "No title";  

}  

//取得副標題。  

std::string RenderTextureTest::subtitle()  

{  

    return "";  

}

第一個演示：儲存渲染目標紋理。

說明：在螢幕上觸屏移動，可以不斷的使用隨機頂點色的火球點圖片精靈來做為刷子繪製線條。點選右邊的“Clear”可以將螢幕清為隨機色。而這些影象都是輸出到紋理的。點選“SaveImage”可以儲存這個紋理為PNG或JPG。

截圖：

程式碼:

[cpp]view
 plain copy

//由上面的類派生出的類，可以將目標紋理儲存成為圖片。  

class RenderTextureSave : public RenderTextureTest  

{  

public:  

    //構造  

    RenderTextureSave();  

    //析構  

    ~RenderTextureSave();  

    //取得標題  

    virtual std::string title();  

    //取得副標題。  

    virtual std::string subtitle();  

    //響應觸屏時移動事件  

    virtual void ccTouchesMoved(CCSet* touches, CCEvent* event);  

    //清除圖片影象  

    void clearImage(CCObject *pSender);  

    //儲存紋理到圖片  

    void saveImage(CCObject *pSender);  

private:  

    //目標紋理  

    CCRenderTexture *m_pTarget;  

    //代表刷子的精靈  

    CCSprite *m_pBrush;  

};

對應CPP:

[cpp]view
 plain copy

//構選  

RenderTextureSave::RenderTextureSave()  

{  

    //取得螢幕大小  

    CCSize s = CCDirector::sharedDirector()->getWinSize();  

    //建立一個目標紋理，用於把場景渲染到其中。  

    m_pTarget = CCRenderTexture::create(s.width, s.height, kCCTexture2DPixelFormat_RGBA8888);  

    //佔用它，對其引用計數器加一。  

    m_pTarget->retain();  

    //設定目標紋理的位置放在螢幕中央。  

    m_pTarget->setPosition(ccp(s.width / 2, s.height / 2));  

    //將目標紋理放入到當前層下。  

    this->addChild(m_pTarget, -1);  

    //建立一個刷子的精靈，載入的是火球的圖片。  

    m_pBrush = CCSprite::create("Images/fire.png");  

    //佔用它，對其引用計數器加一。  

    m_pBrush->retain();  

    //設定精靈為紅色  

    m_pBrush->setColor(ccRED);  

    //設定透明度為20%  

    m_pBrush->setOpacity(20);  

    //設定當前層響應觸屏事件。  

    this->setTouchEnabled(true);  

    //建立一個選單項文字的字型，大小為16。  

    CCMenuItemFont::setFontSize(16);  

    //建立兩個選單項文字，分別為“儲存影象”和“清空影象”。  

    CCMenuItem *item1 = CCMenuItemFont::create("Save Image", this, menu_selector(RenderTextureSave::saveImage));  

    CCMenuItem *item2 = CCMenuItemFont::create("Clear", this, menu_selector(RenderTextureSave::clearImage));  

    //由這兩個選單項建立選單，並放入當前層下。  

    CCMenu *menu = CCMenu::create(item1, item2, NULL);  

    this->addChild(menu);  

    //設定選單項按縱向排列。  

    menu->alignItemsVertically();  

    //設定選單的位置。  

    menu->setPosition(ccp(s.width - 80, s.height - 30));  

}  

//取得標題。  

string RenderTextureSave::title()  

{  

    return "Touch the screen";  

}  

//取得副標題。  

string RenderTextureSave::subtitle()  

{  

    return "Press 'Save Image' to create an snapshot of the render texture";  

}  

//清除圖片影象。  

void RenderTextureSave::clearImage(cocos2d::CCObject *pSender)  

{  

    //對目標紋理呼叫clear即可以將其清空為相應的顏色。  

    //這裡對,R,G,B,A的色彩分量做了0~1間的隨機，產生出隨機的色彩。  

    m_pTarget->clear(CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1());  

}  

//儲存影象。  

void RenderTextureSave::saveImage(cocos2d::CCObject *pSender)  

{  

    //建立一個計數器，用來統計儲存的次數。  

    static int counter = 0;  

    //要儲存檔案的名稱。  

    char png[20];  

    sprintf(png, "image-%d.png", counter);  

    char jpg[20];  

    sprintf(jpg, "image-%d.jpg", counter);  

    //對目標紋理呼叫saveToFile將紋理上的影象儲存為PNG和JPG兩種格式的圖片。  

    m_pTarget->saveToFile(png, kCCImageFormatPNG);  

    m_pTarget->saveToFile(jpg, kCCImageFormatJPEG);  

    //取得紋理對應的CCImage例項指標  

    CCImage *pImage = m_pTarget->newCCImage();  

    //將PNG圖片和CCImage例項中的資訊載入到紋理管理器中。  

    CCTexture2D *tex = CCTextureCache::sharedTextureCache()->addUIImage(pImage, png);  

    //刪除pImage  

    CC_SAFE_DELETE(pImage);  

    //由紋理tex建立精靈sprite。  

    CCSprite *sprite = CCSprite::createWithTexture(tex);  

    //設定縮放值為原來0.3倍  

    sprite->setScale(0.3f);  

    //將精靈放到當前層下。  

    addChild(sprite);  

    //設定精靈位置。  

    sprite->setPosition(ccp(40, 40));  

    sprite->setRotation(counter * 3);  

    //列印日誌  

    CCLOG("Image saved %s and %s", png, jpg);  

    //計數器加一  

    counter++;  

}  

//析構  

RenderTextureSave::~RenderTextureSave()  

{  

    //對佔用的目標紋得和刷子精靈的引用計數減一。  

    m_pBrush->release();  

    m_pTarget->release();  

    //紋理管理器釋放不用的紋理。  

    CCTextureCache::sharedTextureCache()->removeUnusedTextures();  

}  

//響應觸屏時移動事件  

void RenderTextureSave::ccTouchesMoved(CCSet* touches, CCEvent* event)  

{  

    //取得觸點  

    CCTouch *touch = (CCTouch *)touches->anyObject();  

    //取得觸點的當前位置。  

    CCPoint start = touch->getLocation();  

    //取得觸點的上一個位置。  

    CCPoint end = touch->getPreviousLocation();  

    // 開始渲染到目標紋理  

    m_pTarget->begin();  

    //取得當前位置和上一個位置的距離。   

    float distance = ccpDistance(start, end);  

    //如果距離大於1畫素。  

    if (distance > 1)  

    {  

        int d = (int)distance;  

        //則在上一個位置和當前位置間連一條線，每個畫素渲染一下刷子精靈。  

        for (int i = 0; i < d; i++)  

        {  

            //計算X和Y方向的偏移。  

            float difx = end.x - start.x;  

            float dify = end.y - start.y;  

            //通過偏移計算斜率。  

            float delta = (float)i / distance;  

            //通過直線公式計數出連像上第i個位置的畫素位置設定給精靈。  

            m_pBrush->setPosition(ccp(start.x + (difx * delta), start.y + (dify * delta)));  

             //設定一個隨機的旋轉值給精靈。  

            m_pBrush->setRotation(rand() % 360);  

             //在給一個限定範圍的隨機縮放大小給精靈。  

            float r = (float)(rand() % 50 / 50.f) + 0.25f;  

            m_pBrush->setScale(r);  

            /*m_pBrush->setColor(ccc3(CCRANDOM_0_1() * 127 + 128, 255, 255));*/  

            // Use CCRANDOM_0_1() will cause error when loading libtests.so on android, I don't know why.  

            //設定一個隨機的顏色給精靈。  

            m_pBrush->setColor(ccc3(rand() % 127 + 128, 255, 255));  

            // Call visit to draw the brush, don't call draw..  

            //將精靈繪製出來。  

            m_pBrush->visit();  

        }  

    }  

    //結束渲染到紋理，則由精靈構成的連線影象就被渲染到紋理中了。  

    m_pTarget->end();  

}

第二個演示：渲染小球到目標紋理。

說明：將縱向排列的兩個小球的精靈渲染到目標紋理上，在場景中左邊一列顯示兩個小球，右邊一列顯示目標紋理。

截圖：

程式碼:

[cpp]view
 plain copy

//由上面的類派生出的類，。  

class RenderTextureIssue937 : public RenderTextureTest  

{  

public:  

    //構造  

    RenderTextureIssue937();  

    //取得標題  

    virtual std::string title();  

    //取得副 標題  

    virtual std::string subtitle();  

};

對應CPP:

[cpp]view
 plain copy

//構造  

RenderTextureIssue937::RenderTextureIssue937()  

{  

    //建立一個色層做為背景放入到當前層下。  

    CCLayerColor *background = CCLayerColor::create(ccc4(200,200,200,255));  

    addChild(background);  

    //建立第一個精靈  

    CCSprite *spr_premulti = CCSprite::create("Images/fire.png");  

    spr_premulti->setPosition(ccp(16,48));  

    //建立第二個精靈。  

    CCSprite *spr_nonpremulti = CCSprite::create("Images/fire.png");  

    spr_nonpremulti->setPosition(ccp(16,16));  

    //建立一個渲染目標紋理。  

    CCRenderTexture *rend = CCRenderTexture::create(32, 64, kCCTexture2DPixelFormat_RGBA8888);  

    //如果失敗則返回  

    if (NULL == rend)  

    {  

        return;  

    }  

    //開始渲染影象到目標紋理。  

    rend->begin();  

    //先渲染第一個精靈。  

    spr_premulti->visit();  

    //再渲染第二個精靈。  

    spr_nonpremulti->visit();  

    //結束渲染到紋理。  

    rend->end();   

    //取得螢幕大小。  

    CCSize s = CCDirector::sharedDirector()->getWinSize();  

    //設定第一個精靈的位置。  

    spr_premulti->setPosition(ccp(s.width/2-16, s.height/2+16));  

    //設定第二個精靈的位置。  

    spr_nonpremulti->setPosition(ccp(s.width/2-16, s.height/2-16));  

    //設定目標紋理的位置。  

    rend->setPosition(ccp(s.width/2+16, s.height/2));  

    //將上面三個結點都放到當前層之下。  

    addChild(spr_nonpremulti);  

    addChild(spr_premulti);  

    addChild(rend);  

}  

//取得標題。  

std::string RenderTextureIssue937::title()  

{  

    return "Testing issue #937";  

}  

//取得副標題。  

std::string RenderTextureIssue937::subtitle()  

{  

    return "All images should be equal...";  

}

第三個演示：渲染不同Z值的精靈到目標紋理。

說明：在螢幕上建立了一系列不同Z值的文字標籤和精靈，當觸屏按下鬆開後將螢幕畫面繪製到目標紋理，建立一個精靈使用這個目標紋理並在螢幕上執行一個顯示到漸隱的動畫。

截圖：

程式碼:

[cpp]view
 plain copy

//由上面的類派生出的類，。  

class RenderTextureZbuffer : public RenderTextureTest  

{  

public:  

    //構造  

    RenderTextureZbuffer();  

    //響應觸屏的一些事件  

    //按下並移動事件的響應  

    virtual void ccTouchesMoved(CCSet* touches, CCEvent* event);  

    //按下事件的響應  

    virtual void ccTouchesBegan(CCSet* touches, CCEvent* event);  

    //抬起事件的響應  

    virtual void ccTouchesEnded(CCSet* touches, CCEvent* event);  

    //取得標題。  

    virtual std::string title();  

    //取得副標題。  

    virtual std::string subtitle();  

    //渲染螢幕快照  

    void renderScreenShot();  

private:  

    //使用的精靈批次優化處理結點。  

    cocos2d::CCSpriteBatchNode *mgr;;  

    //用到的若干精靈。  

    cocos2d::CCSprite *sp1;  

    cocos2d::CCSprite *sp2;  

    cocos2d::CCSprite *sp3;  

    cocos2d::CCSprite *sp4;  

    cocos2d::CCSprite *sp5;  

    cocos2d::CCSprite *sp6;  

    cocos2d::CCSprite *sp7;  

    cocos2d::CCSprite *sp8;  

    cocos2d::CCSprite *sp9;  

};

對應CPP:

[cpp]view
 plain copy

//構造  

RenderTextureZbuffer::RenderTextureZbuffer()  

{  

    //設定當前層響應觸屏事悠揚。  

    this->setTouchEnabled(true);  

    //取得螢幕大小。  

    CCSize size = CCDirector::sharedDirector()->getWinSize();  

    //建立文字標籤。  

    CCLabelTTF *label = CCLabelTTF::create("vertexZ = 50", "Marker Felt", 64);  

    //設定文字標籤的位置並放入到當前層下。  

    label->setPosition(ccp(size.width / 2, size.height * 0.25f));  

    this->addChild(label);  

    //建立第二個文字標籤。  

    CCLabelTTF *label2 = CCLabelTTF::create("vertexZ = 0", "Marker Felt", 64);  

    //設定文字標籤的位置並放入到當前層下。  

    label2->setPosition(ccp(size.width / 2, size.height * 0.5f));  

    this->addChild(label2);  

    //建立第三個文字標籤。  

    CCLabelTTF *label3 = CCLabelTTF::create("vertexZ = -50", "Marker Felt", 64);  

    //設定文字標籤的位置並放入到當前層下。  

    label3->setPosition(ccp(size.width / 2, size.height * 0.75f));  

    this->addChild(label3);  

    //分別對三個文字標籤設定不同的頂點Z值。  

    label->setVertexZ(50);  

    label2->setVertexZ(0);  

    label3->setVertexZ(-50);  

    //由circle.plist   

    CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile("Images/bugs/circle.plist");  

    //建立相應的精靈批次優化結點。  

    mgr = CCSpriteBatchNode::create("Images/bugs/circle.png", 9);  

    this->addChild(mgr);  

    //建立9個精靈  

    sp1 = CCSprite::createWithSpriteFrameName("circle.png");  

    sp2 = CCSprite::createWithSpriteFrameName("circle.png");  

    sp3 = CCSprite::createWithSpriteFrameName("circle.png");  

    sp4 = CCSprite::createWithSpriteFrameName("circle.png");  

    sp5 = CCSprite::createWithSpriteFrameName("circle.png");  

    sp6 = CCSprite::createWithSpriteFrameName("circle.png");  

    sp7 = CCSprite::createWithSpriteFrameName("circle.png");  

    sp8 = CCSprite::createWithSpriteFrameName("circle.png");  

    sp9 = CCSprite::createWithSpriteFrameName("circle.png");  

    //將其加入到批次優化結點中，給予不同的Z值。  

    mgr->addChild(sp1, 9);  

    mgr->addChild(sp2, 8);  

    mgr->addChild(sp3, 7);  

    mgr->addChild(sp4, 6);  

    mgr->addChild(sp5, 5);  

    mgr->addChild(sp6, 4);  

    mgr->addChild(sp7, 3);  

    mgr->addChild(sp8, 2);  

    mgr->addChild(sp9, 1);  

    //對這九個精靈設定不同的頂點Z值。  

    sp1->setVertexZ(400);  

    sp2->setVertexZ(300);  

    sp3->setVertexZ(200);  

    sp4->setVertexZ(100);  

    sp5->setVertexZ(0);  

    sp6->setVertexZ(-100);  

    sp7->setVertexZ(-200);  

    sp8->setVertexZ(-300);  

    sp9->setVertexZ(-400);  

    //設定第九個放大2倍，頂點色為黃色。  

    sp9->setScale(2);  

    sp9->setColor(ccYELLOW);  

}  

//取得標題。  

string RenderTextureZbuffer::title()  

{  

    return "Testing Z Buffer in Render Texture";  

}  

//取得副標題。  

string RenderTextureZbuffer::subtitle()  

{  

    return "Touch screen. It should be green";  

}  

//按下事件的響應  

void RenderTextureZbuffer::ccTouchesBegan(cocos2d::CCSet *touches, cocos2d::CCEvent *event)  

{  

    //遍歷所有的觸點。  

    CCSetIterator iter;  

    CCTouch *touch;  

    for (iter = touches->begin(); iter != touches->end(); ++iter)  

    {  

        //將九個精靈放在觸點位置。  

        touch = (CCTouch *)(*iter);  

        CCPoint location = touch->getLocation();  

        sp1->setPosition(location);  

        sp2->setPosition(location);  

        sp3->setPosition(location);  

        sp4->setPosition(location);  

        sp5->setPosition(location);  

        sp6->setPosition(location);  

        sp7->setPosition(location);  

        sp8->setPosition(location);  

        sp9->setPosition(location);  

    }  

}  

//按下並移動事件的響應。  

void RenderTextureZbuffer::ccTouchesMoved(CCSet* touches, CCEvent* event)  

{  

    //遍歷所有的觸點。  

    CCSetIterator iter;  

    CCTouch *touch;  

    for (iter = touches->begin(); iter != touches->end(); ++iter)  

    {//將九個精靈放在觸點位置。  

        touch = (CCTouch *)(*iter);  

        CCPoint location = touch->getLocation();  

        sp1->setPosition(location);  

        sp2->setPosition(location);  

        sp3->setPosition(location);  

        sp4->setPosition(location);  

        sp5->setPosition(location);  

        sp6->setPosition(location);  

        sp7->setPosition(location);  

        sp8->setPosition(location);  

        sp9->setPosition(location);  

    }  

}  

//抬起事件的響應  

void RenderTextureZbuffer::ccTouchesEnded(CCSet* touches, CCEvent* event)  

{  

    //渲染螢幕快照  

    this->renderScreenShot();  

}  

//渲染螢幕快照  

void RenderTextureZbuffer::renderScreenShot()  

{  

    //建立一個512,512大小的渲染目標紋理。  

    CCRenderTexture *texture = CCRenderTexture::create(512, 512);  

    //如果無效直接返回。  

    if (NULL == texture)  

    {  

        return;  

    }   

    //設定錨點為左下角。  

    texture->setAnchorPoint(ccp(0, 0));  

    //開始渲染到目標紋理。  

    texture->begin();  

    //將當前層渲染一遍。  

    this->visit();  

    //結束渲染到目標紋理。  

    texture->end();  

    //建立一個精靈。  

    CCSprite *sprite = CCSprite::createWithTexture(texture->getSprite()->getTexture());  

    //設定精靈的位置，透明度，Y方向翻轉。  

    sprite->setPosition(ccp(256, 256));  

    sprite->setOpacity(182);  

    sprite->setFlipY(1);  

    //將精靈放入到當前層的最前面。  

    this->addChild(sprite, 999999);  

    //設定為綠色。  

    sprite->setColor(ccGREEN);  

    //讓精靈執行一個動畫序列，表現為漸漸消失。  

    sprite->runAction(CCSequence::create(CCFadeTo::create(2, 0),  

                                          CCHide::create(),  

                                          NULL));  

}

第四個演示：測試模版緩衝目標紋理。

說明：

關於模版緩衝可以先看一下博文：

http://www.cnblogs.com/aokman/archive/2010/12/13/1904723.html

本例是開啟模版測試，然後繪製球精靈，但只寫A通過模版測試，對通過的畫素位置設定模版值為1,之後向右上移動1/4大小球的位置，對模版值為0的區域設定通過來繪製球精靈，這樣的效果約會有1/4缺失。

注意：不幸的是，經測試所有版本似乎都無效，我不知道是不是哪裡存在BUG，還是我的錯誤。

截圖：

現實是這樣的：

按程式碼的做法我用Photoshop做了一個結果圖，本應是這樣：

程式碼:

[cpp]view
 plain copy

//由上面的基類派生出的類，。  

class RenderTextureTestDepthStencil : public RenderTextureTest  

{  

public:  

    //構造  

    RenderTextureTestDepthStencil();  

    //取得標題。  

    virtual std::string title();  

    //取得副標題。  

    virtual std::string subtitle();  

};

對應CPP:

[cpp]view
 plain copy

//構造  

RenderTextureTestDepthStencil::RenderTextureTestDepthStencil()  

{  

    //取得螢幕大小。  

    CCSize s = CCDirector::sharedDirector()->getWinSize();  

    //建立一個精靈，設定其位置，10倍放大。  

    CCSprite *sprite = CCSprite::create("Images/fire.png");  

    sprite->setPosition(ccp(s.width * 0.25f, 0));  

    sprite->setScale(10);  

    //建立一個目標紋理，用於儲存深度緩衝。  

    CCRenderTexture *rend = CCRenderTexture::create(s.width, s.height, kCCTexture2DPixelFormat_RGBA4444, CC_GL_DEPTH24_STENCIL8);  

    //設定模版緩衝的掩碼值。  

    glStencilMask(0xFF);  

    //清空目標紋理的深度緩衝和模板緩衝為0。  

    rend->beginWithClear(0, 0, 0, 0, 0, 0);  

    //開啟模版測試。  

    glEnable(GL_STENCIL_TEST);  

    //設定繪製影象的畫素部分總是可以通過模版測試  

    glStencilFunc(GL_ALWAYS, 1, 0xFF);  

    //設定更新操作為:  

    //1，模板測試失敗時保持當前的模板值不變。  

    //2，模板測試通過，深度測試失敗時保持當前的模板值不變。  

    //3，模板測試通過，深度測試通過時將當前的模板值設定為參考值。  

    glStencilOp(GL_KEEP, GL_KEEP, GL_REPLACE);  

    //設定對顏色緩衝區的R，G，B，A位是否執行寫入操作。這裡只寫A。  

    glColorMask(0, 0, 0, 1);  

    //將精靈渲染一遍。  

    sprite->visit();  

    //設定精靈位置向右上偏移一些  

    sprite->setPosition(ccpAdd(sprite->getPosition(), ccpMult(ccp(sprite->getContentSize().width * sprite->getScale(), sprite->getContentSize().height * sprite->getScale()), 0.5)));  

    //設定比較條件，如果畫素參考值不等於模板值通過測試。  

    glStencilFunc(GL_NOTEQUAL, 1, 0xFF);  

    //設定對顏色緩衝區的R，G，B，A位執行寫入操作。  

    glColorMask(1, 1, 1, 1);  

    //精靈再渲染一遍。  

    sprite->visit();  

    //結束渲染到目標紋理。  

    rend->end();  

    //關閉模版緩衝測試。  

    glDisable(GL_STENCIL_TEST);  

    //設定目標紋理的位置。  

    rend->setPosition(ccp(s.width * 0.5f, s.height * 0.5f));  

    //將目標紋理放到當前層下。  

    this->addChild(rend);  

}  

//標題。  

std::string RenderTextureTestDepthStencil::title()  

{  

    return "Testing depthStencil attachment";  

}  

//取得副標題。  

std::string RenderTextureTestDepthStencil::subtitle()  

{  

    return "Circle should be missing 1/4 of its region";  

}

上面這個例子如果真存在問題，希望Cocos2d-x開發組能有看到並做下修改。最後程式碼餘下的就是場景了：

[cpp]view
 plain copy

//演示用的場景  

class RenderTextureScene : public TestScene  

{  

public:  

    //執行場景時的處理  

    virtual void runThisTest();  

};

對應CPP:

[cpp]view
 plain copy

//執行演示場景。  

void RenderTextureScene::runThisTest()  

{  

    //建立下一個演示層放入到當前的場景中。  

    CCLayer* pLayer = nextTestCase();  

    addChild(pLayer);  

    //執行當前場景。  

    CCDirector::sharedDirector()->replaceScene(this);  

}

渲染到紋理，就是這麼個東西了。很有用的技術，希望各位好好掌握。

cocos2d-x 優化(紋理渲染優化、資源快取、記憶體優化)
2020-04-07
優化快取記憶體
OpenGL的渲染成紋理技術(轉)
2007-08-12
SDL3 入門（5）：紋理渲染
2024-07-14
D3D中的一項高階技術---渲染到紋理(轉)
2007-08-12
3D
【原始碼解讀】Android Opengl OES 紋理怎麼渲染到 GL_TEXTURE_2D？
2021-09-29
原始碼Android
Cocos2d-x 的“HelloWorld” 深入分析
2012-08-22
Substance Painter技巧：使用Maya中Arnold渲染Substance紋理的指南
2020-08-08
AI
Android OpenGL ES 2.0 手把手教學（6）- 紋理
2019-05-03
Android
實時渲染不是夢：通過共享記憶體優化Flutter外接紋理的渲染效能
2019-12-19
記憶體優化Flutter
Webgl 紋理
2018-07-14
Web
圖形學之紋理後續/WebGL多紋理處理
2021-10-14
Web
法線紋理
2024-09-07
紋理優化：讓你的紋理也 “瘦” 下來
2020-11-04
優化
Shader從入門到跑路：自定義紋理輸入
2020-03-12
Unity安卓共享紋理
2020-07-13
Unity安卓
OpenGL 紋理詳解
2023-11-06
用Compute Shader處理影像資料後在安卓機上不能正常顯示渲染紋理
2024-03-20
安卓
解密影片魔法：將ExternalOES紋理轉化為TEXTURE_2D紋理
2023-12-22
解密
WebGL 紋理顏色原理
2019-01-28
Web
vue2.0的虛擬DOM渲染
2018-08-09
Vue
【React深入】深入分析虛擬DOM的渲染原理和特性
2019-04-17
React
服務端渲染到前端渲染，再到“服務端渲染”
2019-02-16
服務端前端
【Cocos2d-x】整合wxSqlite3到Cocos2d-x
2016-11-14
SQLite
使用WebGL 2.0更快地渲染 3D
2017-03-21
Web3D
深入vue2.0底層思想–模板渲染
2017-07-19
Vue
【譯】建立紋理文字的技巧
2019-01-30
效能優化：紋理檔案
2020-12-13
優化
影像特徵計算——紋理特徵
2020-11-24
特徵
OpenGL/OpenGL ES入門：紋理應用 - 紋理座標及案例解析(金字塔)
2019-05-26
Shader從入門到跑路：顏色自定義輸出、紋理取樣
2020-03-27
3 分鐘搞定 Vue 2.0 服務端渲染
2019-03-03
Vue服務端
CUDA一維紋理記憶體
2020-10-27
記憶體
第四個OpenGL程式，texture 紋理
2024-04-06
blender紋理繪製克隆工具使用
2024-05-29
4.QOpenGLWidget-對三角形進行紋理貼圖、紋理疊加
2020-10-19
three.js 著色器材質之紋理
2020-08-10
JS
Unity iOS 使用 ASTC 格式紋理實踐
2020-08-26
UnityiOSAST
萬萬沒想到——flutter這樣外接紋理
2019-03-04
Flutter

Cocos2d-x 2.0 渲染到紋理深入分析

相關文章