Cocos2d-lua 初识shader之一：置灰

一、什么是shader

 

 

shader译名为着色器，通俗来说，shader告诉电脑如何使用一种特殊的方式绘制物体。shader分为三种：顶点着色器、片段着色器、几何着色器。

顶点shader：3D图形都是由一个一个三角形组 成的，顶点shader就是计算顶点位置，并为后期像素渲染做准备的

片段shader：是以像素为单位，计算光 照、颜色的一系列算法。

 

二、Cocos中的shader

 

主要的图形软件库：DirectX和OpenGL都提供了API接口使shader可以对GPU进行编程，Cocos中封装了对OpenGL的调用接口。

OpenGL中顶点shader被称为vertex  shader，像素shader则称为fragment shader。

 

三、使用shader置灰

原理：将当前像素点颜色点乘一个值，已达到变暗的目的

 

    -- 顶点shader
    local vertex = [[
        attribute vec4 a_position; 
        attribute vec2 a_texCoord; 
        attribute vec4 a_color; 
        #ifdef GL_ES  
        varying lowp vec4 v_fragmentColor;
        varying mediump vec2 v_texCoord;
        #else                      
        varying vec4 v_fragmentColor; 
        varying vec2 v_texCoord;  
        #endif    
        void main() 
        {
            gl_Position = CC_PMatrix * a_position; 
            v_fragmentColor = a_color;
            v_texCoord = a_texCoord;
        }
    ]]

    -- 片段shader
    local fragment= [[
        #ifdef GL_ES 
        precision mediump float;  // shader默认精度为double，openGL为了提升渲染效率将精度设为float
        #endif 
        // varying变量为顶点shader经过光栅化阶段的线性插值后传给片段着色器
        varying vec4 v_fragmentColor;  // 颜色
        varying vec2 v_texCoord;       // 坐标
        void main(void) 
        { 
            // texture2D方法从采样器中进行纹理采样，得到当前片段的颜色值。CC_Texture0即为一个采样器
            vec4 c = texture2D(CC_Texture0, v_texCoord); 
            // c.rgb即是像素点的三种颜色，dot为点乘，vec3为经验值，可以随意修改
            float gray = dot(c.rgb, vec3(0.299, 0.587, 0.114)); 
            // shader的内建变量，表示当前片段的颜色
            gl_FragColor.xyz = vec3(gray); 
            // a为透明度
            gl_FragColor.a = c.a; 
        }
    ]]
    local pProgram = cc.GLProgram:createWithByteArrays(vertex , fragment)
    -- img为sprite
    img:setGLProgram(pProgram)

 

结果如下：

 

 

 

四、移除置灰

 

十分简单，在frag shader的main函数中代码修改为下行，即原样显示。

 

 

gl_FragColor = texture2D(CC_Texture0, v_texCoord);