什么是着色器？

在计算机图形学领域，着色器(Shader) 是一种特殊类型的计算机程序，最初用于做阴影，在图像中产生适当的光照、明暗，现在主要用于产生特殊效果，也用于视频后期处理。（维基百科）

Cocos2dx中的Shader

Cocos2d-x 使用的着色器语言是 OpenGL ES Shading Language v1.0，描述 GLSL 语言不在本文的范围之内。想了解更多，请参考规范文档。在 Cocos2d-x 中，所有的可渲染的 Node 对象都使用着色器。比如，Sprite 对象使用为 2D 精灵优化过的着色器，Sprite3D 使用为 3D 对象优化过的着色器。

cocos2dx引擎为我们提供了一些常用的shader,在frameworks\cocos2d-x\cocos\renderer目录下。

自定义Shader

为cocos2dx节点设置自定义shader：

1	sprite:setGLProgramState(programState)

在programState中包含两部分：顶点(vert)着色器和片源(frag)着色器。可以通过shader名称进行加载，也可以直接在lua中进行编写然后加载。

-- 通过文件加载shader
local programState = cc.GLProgramState:getOrCreateWithGLProgramName(shaderName)

-- 加载shader字符串
local glProgram = cc.GLProgram:createWithByteArrays(vert, frag)
local programState = cc.GLProgramState:getOrCreateWithGLProgram(glProgram)

看看顶点/片源着色器的结构

// 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-lua 初识shader之一：置灰

赏

支付宝

微信

关闭

cocos2dx-自定义着色器(1)

什么是着色器？

Cocos2dx中的Shader

自定义Shader

看看顶点/片源着色器的结构

参考

评论