cocos之Shader

 Shader

纹理和管线

纹理的概念

在现实生活中，物体都是有边界的，比如一颗石头，有一层表面，当我们给它拍个照片，就能变成一张二维的图片了，那么这个图片就是石头的纹理。

可是石头是立体的，并不是二维的，立体这种东西，是我们人对石头的一种感觉，如果把石头拿在手里，转动这个石头或者转动我们的位置，我们可以看到这个石头的多个面，于是给我们一种立体的概念。

计算机图形学要将这种感觉给绘制出来，形成3d效果，那么就需要一系列的数据结构来描述这种东西。纹理这个概念就这样被提出来，石头的每一个面，都是纹理。

管线的概念

可以想象，一个石头的纹理也是很多的。。。计算机都要画呀画，好累。。。纹理是一个平面的东西，GPU用它来作为绘制的单位

于是，生产显卡的那帮人，就想着，要是一下子就能绘制10000个纹理就好了，因此提出了管线的概念。管线指可以独立绘制纹理的单元，一个显卡有16管线，就表示它能同时渲染16个纹理，这个参数也是衡量显卡性能的标志。

管线渲染流程

可编程管线
上面的链接说了渲染流程，所以我就不说一个管线怎么渲染纹理的了啊

可编程管线

就是cpu向gpu发送渲染的内容时，同时带一段程序过去，让管线可以根据程序来进行一些额外的操作。

一段shader程序

看看一段shader程序吧，来自cocos2dx的cpptest资源里的，看人家第一行的注释，也是从别人那边抄的

// Shader from http://www.iquilezles.org/apps/shadertoy/#ifdef GL_ESprecision highp float;#endif uniform vec2 center;uniform vec2 resolution; void main(void){    float time = CC_Time[1];    vec2 p = 2.0 * (gl_FragCoord.xy - center.xy) / resolution.xy;     // animate    float tt = mod(time,2.0)/2.0;    float ss = pow(tt,.2)*0.5 + 0.5;    ss -= ss*0.2*sin(tt*6.2831*5.0)*exp(-tt*6.0);    p *= vec2(0.5,1.5) + ss*vec2(0.5,-0.5);      float a = atan(p.x,p.y)/3.141593;    float r = length(p);     // shape    float h = abs(a);    float d = (13.0*h - 22.0*h*h + 10.0*h*h*h)/(6.0-5.0*h);     // color    float f = step(r,d) * pow(1.0-r/d,0.25);     gl_FragColor = vec4(f,0.0,0.0,1.0);}

C语言程序员是不是看着是不是很熟悉，shader语言很像是C语言

cocos2dx怎么把程序送到GPU去？

很简单，直接调用setShaderProgram即可

bool C01S10Shader::init(){    LayerBack::init();     // 这是一个正常的精灵，用来对比的    Sprite* sprite = Util::addSprite("Images/grossini.png", this);    sprite->setPosition(50, winSize.height/2);     {        // 这个是要用shader处理的精灵，addSprite函数是我自己写的，没放上来，就是创建一个精灵，放在this指针的中间        _sprite = Util::addSprite("Images/grossini.png", this);         // "Shaders/example_edgeDetection.fsh"        // 读取shader程序，shader程序是写在一个文件里的        auto fileUtiles = FileUtils::getInstance();        auto fragmentFullPath = fileUtiles->fullPathForFilename("Shaders/example_bloom.fsh");        auto fragSource = fileUtiles->getStringFromFile(fragmentFullPath);        // 通过shader程序字符串去创建一个GLProgam对象        auto glprogram = GLProgram::createWithByteArrays(ccPositionTextureColor_noMVP_vert, fragSource.c_str());         CCLOG("%s\n", ccPositionTextureColor_noMVP_vert);        // 设置到这个精灵去，将来这个精灵被渲染时，这段程序也会被带过去，GPU对这个精灵对应的纹理，进行额外的操作        _sprite->setGLProgram(glprogram);    }     return true;}