如何在cocos2d-x实现高效的mask(遮罩)

cocos2d-x目前无法利用opengl es2.0的shader来实现mask效果，如果按照老外提供的renderTexture来实现性能就太差了。

遍寻网上后在cocoachina上找到一个深入了解OpenGL-模板测试，经过改造后终于可以在cocos2d-x中使用，与各位同仁分享一下。

先说下模板缓冲（stencil buffer），这在05年还算是一个比较普及的技术。cocos2d-x现在的版本是不支持stencil buffer的，但opengl es是支持的。

可以简单的动手改造一下：

1. 创建stencil buffer。在ES1Renderer.m文件中找到resizeFromLayer方法，将if (depthFormat_){}大括号中的代码替换成以下内容：

   if (depthFormat_) 
   	{
   		if( ! depthBuffer_ )
   			glGenRenderbuffersOES(1, &depthBuffer_);
   		
   		glBindRenderbufferOES(GL_RENDERBUFFER_OES, depthBuffer_);
   		if( multiSampling_ )
   			glRenderbufferStorageMultisampleAPPLE(GL_RENDERBUFFER_OES, samplesToUse_, depthFormat_,backingWidth_, backingHeight_);
   		else
   			glRenderbufferStorageOES(GL_RENDERBUFFER_OES, depthFormat_, backingWidth_, backingHeight_);
   		glFramebufferRenderbufferOES(GL_FRAMEBUFFER_OES, GL_DEPTH_ATTACHMENT_OES, GL_RENDERBUFFER_OES, depthBuffer_);
                   // add by frankyang at 2012/5/8
   		glFramebufferRenderbufferOES(GL_FRAMEBUFFER_OES, GL_STENCIL_ATTACHMENT_OES, GL_RENDERBUFFER_OES, depthBuffer_);
   	        // bind color buffer
   		glBindRenderbufferOES(GL_RENDERBUFFER_OES, colorRenderbuffer_);
   	}

   
   
2. 设置stencil buffer格式。在AppController.mm中找到的didFinishLaunchingWithOptions方法，将其中的depthFormat参数改为GL_DEPTH24_STENCIL8_OES，如下：  

      // Add the view controller's view to the window and display.
       		window = [[UIWindow alloc] initWithFrame: [[UIScreen mainScreen] bounds]];
       		EAGLView *__glView = [EAGLView viewWithFrame: [window bounds]
   								pixelFormat: kEAGLColorFormatRGBA8
   								//depthFormat: GL_DEPTH_COMPONENT16_OES
                                           			depthFormat:GL_DEPTH24_STENCIL8_OES
   								preserveBackbuffer: NO
                                                                   sharegroup:nil
                                                                   multiSampling:NO
                                                                   numberOfSamples:0];

   
   
3. 设置每帧渲染开始时清除stencil buffer。在CCDirector.cpp中找到drawScene方法，将其中

   		glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT)

   改成

   		glClear(GL_COLOR_BUFFER_BIT | GL_COLOR_DEPTH_BUFFER_BIT | GL_STENCIL_BUFFER_BIT)

   这样就可以正确清除stencil buffer。
4. 启动模板测试，设置模板函数。这里要用到三个函数：

glEnable(GL_STENCIL_TEST);
        glStencilFunc(GL_ALWAYS, 0x1, 0x1);
        glStencilOp(GL_REPLACE, GL_REPLACE, GL_REPLACE);

            第一个是启用模板测试，第二个是设置模板测试函数，第三个是设置模板缓冲操作方式。

            模板测试简单来说就是先往模板缓冲中写入模板值，然后渲染时根据模板测试结果来决定像素是否写入color buffer。

            具体解释大家可以看这个帖子 深入了解OpenGL-模板测试

            为了灵活的写入模板值，我借鉴了Quaz2D中maskLayer的概念，在要渲染的Layer前后插入MaskBeginLayer和MaskEndLayer。

            用MaskBeginLayer来填充模板缓冲,并设定好之后需要的模板测试函数；用MaskEndLayer来恢复模板测试状态。

    void MaskBeginLayer::visit()
    {        
        if (getChildrenCount() != 0) {
            glEnable(GL_ALPHA_TEST);
            glAlphaFunc(GL_GREATER, 0.0);
        
            glEnable(GL_STENCIL_TEST);
            glStencilFunc(GL_ALWAYS, 0x1, 0x1);
            glStencilOp(GL_REPLACE, GL_REPLACE, GL_REPLACE);
            
            CCLayer::visit();
            
            glDisable(GL_ALPHA_TEST);
            glStencilFunc(GL_NOTEQUAL, 0x1, 0x1);
            glStencilOp(GL_KEEP, GL_KEEP, GL_KEEP);
        }
    }

    void MaskEndLayer::visit()
    {
        glDisable(GL_STENCIL_TEST);
        
        CCLayer::visit();
    }

           这里要注意透明像素也会写入stencil buffer，所有特别用了alphatest。

         经过真机测试，这样实现mask性能是无损的。由于不影响alpha blend，使用起来比较灵活。唯一不好的是mask不支持渐变，要么全透，要么全部透。

         

         现在我在研究直接用alpha blend操作实现mask，性能一样无损，还可以支持渐变，但也有其局限性，且听下回分解。