Cocos2d-x 自定义着色器入门（1）｜默然的博客

本文以 Cocos2d-x 3.x 的 Lua API 为例，说明自定义 Shader 的组成、加载方式和默认纹理着色器结构。

什么是着色器？

在计算机图形学领域，着色器（Shader）是一类运行在 GPU 上的程序。它最初主要用于光照和阴影计算，现在也广泛用于颜色处理、模糊、描边等屏幕后期效果。

Cocos2d-x 中的 Shader

Cocos2d-x 3.x 的移动端渲染通常使用 OpenGL ES Shading Language。GLSL 语法不在本文展开，可参考 OpenGL ES 入口 和 GLSL ES 1.00 规范。

引擎中的可渲染节点都依赖着色器。例如，Sprite 使用适合 2D 纹理渲染的程序，Sprite3D 使用面向 3D 渲染的程序。Cocos2d-x 自带的常用 Shader 位于 frameworks\cocos2d-x\cocos\renderer 目录。

加载并应用自定义 Shader

为节点设置 GLProgramState：

sprite:setGLProgramState(programState)

programState 关联由顶点（vert）着色器和片元（frag）着色器组成的 GLProgram。既可以通过已注册名称加载，也可以从 Lua 字符串创建：

-- 通过已注册名称加载 Shader
local programState = cc.GLProgramState:getOrCreateWithGLProgramName(shaderName)

-- 从 Shader 源码字符串创建
local glProgram = cc.GLProgram:createWithByteArrays(vert, frag)
local programState = cc.GLProgramState:getOrCreateWithGLProgram(glProgram)

getOrCreateWithGLProgram 可能返回共享的状态对象。如果同一个 GLProgram 用在多个节点上，而各节点需要不同的 uniform 值，应为节点创建或克隆独立的 GLProgramState，避免相互覆盖。

顶点与片元着色器结构

下面是 Cocos2d-x 默认纹理着色器的精简结构：

// cocos2dx源码中 ccShader_PositionTextureColor.vert
attribute vec4 a_position;      // 内置的默认坐标
attribute vec2 a_texCoord;      // 内置的默认纹理坐标
attribute vec4 a_color;         // 内置的默认颜色

#ifdef GL_ES                        // OpenGL下降低精度，提高性能
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_MVPMatrix * a_position;
    v_fragmentColor = a_color;
    v_texCoord = a_texCoord;
}


// ccShader_PositionTextureColor.frag
#ifdef GL_ES
precision lowp float;
#endif

varying vec4 v_fragmentColor;
varying vec2 v_texCoord;

void main()
{
    // texture2D方法从采样器中进行纹理采样，得到当前片段的颜色值。CC_Texture0即为一个采样器
    vec4 p = texture2D(CC_Texture0, v_texCoord);
    // gl_FragColor是shader的内建变量，表示当前片段的颜色
    gl_FragColor = v_fragmentColor * p;
}

相关阅读

• Cocos2d-x Shader 图片灰度化（2）
• Cocos2d-x Shader uniform 变量（3）
• Cocos2d-x：着色器和材质
• Cocos2d-Lua 初识 Shader 之一：置灰