cocos cretor shader effect-the book of shader前言

前言

说来惭愧，半年前开始接触cocso creator shader的时候，看了官方教程，看了大神写的例子，搞懂了一些语法概念。可是当时看一遍有种似懂非懂的感觉，那种感觉就是听过很多道理，任然过不好一生。在cocos论坛里有大神也分享过自己的shader教程例子，那些什么内外发光，高新模糊什么的滤镜效果，当时看的时候感觉懂了，可是一到自己想写点自己的东西，就完成无从下手。

就这样，后面过了一段时间后，学习shader这件事，慢慢的就沉下去了，完成没动力去学了。
过了几个月，因为某些原因，心血来潮了，又想重新拾起。这次改变了方向，我发现了你搜索cocos shader教程的时候，是很少教程的，来来回回都那么几个，怎么说呢，那些教程并没有到非常基础的地步。还有，cocos shader其实只是作为来让你实现编写渲染效果的一个载体，真正要学的其实是 OpenGL ,下面我给大家分享几个基础的关于渲染的教程。如果有时间，我会写几篇关于shader的基础知识文章。

学前必备知识

如果你刚学shader，对于渲染一无所知，那可以先看看这些教程先

1. CocosCreatorShader官方教程
2. OpenGl初学教程
3. 渲染流程
4. 渲染管线流程

The Book of Shaders

偶然的发现了这本书，作为一部Fragment Shaders（片段着色器）的入门指南，它将一步一步地带你领略其中的纷繁与抽象

关于shader的一些内外发光，滤镜高斯模糊，马赛克什么的效果cocos论坛里有大神写，也给大家分享下：

1. Cocos Creator Shader Effect 系列

2. 新年的礼物 Cocos Creator Shader Effect 系列

在这里我希望把《TheBookOfShader》这本书的一些例子尽可能的放到cocos creator shader effect来。作为自己的学习笔记，可以更加有助于我学习shader，加深理解。也希望可以帮助到大家更好的学习shader。

本教程系列除了照搬书本例子来转载之外，还另外加入自己的一些讲解。因为可能学霸看来，有些代码，数学计算可以一看就懂，但对于大多数小白来说，还需要花长时间的思考理解，本系列出来的意义就是节省下小白的思考理解时间，试图用自己浅显易懂的文字这句代码，这个公式为什么能这样，效果是如何出来的。还把书中的例子尽可能的呈现在cocos creator上，我也会公开源码，到时大家可以参考。

下面就让我们来开始一段Shader之旅吧。

开始

这本书是关于这个革命性的计算机技术，片段着色器（fragment shaders），它将数字生成的图像提到了新的层次

这本书是为谁而写的？

这本书是写给有代码经验和线性代数、三角学的基本知识的创意编程者、游戏开发者和工程师的，还有那些想要提升他们的作品的图像质量到一个令人激动的新层次的人。（如果你想要学习编程，我强烈推荐你先学习Processing，等你玩起来processing，再回来看这个）。

这本书会教你如何使用 shaders（着色器）并把它整合进你的项目里，以提升作品的表现力和图形质量。因为GLSL（OpenGL的绘制语言）的shaders 在很多平台都可以编译和运行，你将可以把在这里学的运用到任何使用OpenGL, OpenGL ES 和 WebGL 的环境中。也就是说，你将可以把学到的知识应用到Processing，openFrameworks，Cinder，Three.js和iOS/Android游戏中。

什么是 Fragment Shader(片段着色器)？

如果你曾经有用计算机绘图的经验，你就知道在这个过程中你需要画一个圆，然后一个长方形，一条线，一些三角形……直到画出你想要的图像。这个过程很像用手写一封信或一本书 —— 都是一系列的指令，需要你一件一件完成。

如果你曾经有用计算机绘图的经验，你就知道在这个过程中你需要画一个圆，然后一个长方形，一条线，一些三角形……直到画出你想要的图像。这个过程很像用手写一封信或一本书 —— 都是一系列的指令，需要你一件一件完成

Shaders 也是一系列的指令，但是这些指令会对屏幕上的每个像素同时下达。也就是说，你的代码必须根据像素在屏幕上的不同位置执行不同的操作。就像活字印刷，你的程序就像一个 function（函数），输入位置信息，输出颜色信息，当它编译完之后会以相当快的速度运行。

为什么 shaders 运行特别快？

为了回答这个问题，不得不给大家介绍并行处理（parallel processing）的神奇之处。

想象你的 CPU 是一个大的工业管道，然后每一个任务都是通过这个管道的某些东西 —— 就像一个生产流水线那样。有些任务要比别的大，也就是说要花费更多时间和精力去处理。我们就称它要求更强的处理能力。由于计算机自身的架构，这些任务需要串行；即一次一个地依序完成。现代计算机通常有一组四个处理器，就像这个管道一样运行，一个接一个地处理这些任务，从而使计算机流畅运行。每个管道通常被称为线程。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

视频游戏和其他图形应用比起别的程序来说，需要高得多的处理能力。因为它们的图形内容需要操作无数像素。想想看，屏幕上的每一个像素都需要计算，而在 3D 游戏中几何和透视也都需要计算。

让我们回到开始那个关于管道和任务的比喻。屏幕上的每个像素都代表一个最简单的任务。单独来看完成任何一个像素的任务对 CPU 来说都很容易，那么问题来了，屏幕上的每一个像素都需要解决这样的小任务！也就是说，哪怕是对于一个老式的屏幕（分辨率 800x600）来说，都需要每帧处理480000个像素，即每秒进行14400000次计算！是的，这对于微处理器就是大问题了！而对于一个现代的 2800x1800 视网膜屏，每秒运行60帧，就需要每秒进行311040000次计算。图形工程师是如何解决这个问题的？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

这个时候，并行处理就是最好的解决方案。比起用三五个强大的微处理器（或者说“管道”）来处理这些信息，用一大堆小的微处理器来并行计算，就要好得多。这就是图形处理器（GPU : Graphic Processor Unit)的来由。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

设想一堆小型微处理器排成一个平面的画面，假设每个像素的数据是乒乓球。14400000个乒乓球可以在一秒内阻塞几乎任何管道。但是一面800x600的管道墙，每秒接收30波480000个像素的信息就可以流畅完成。这在更高的分辨率下也是成立的 —— 并行的处理器越多，可以处理的数据流就越大。

另一个 GPU 的魔法是特殊数学函数可通过硬件加速。非常复杂的数学操作可以直接被微芯片解决，而无须通过软件。这就表示可以有更快的三角和矩阵运算 —— 和电流一样快。

GLSL是什么？

GLSL 代表 openGL Shading Language，openGL 着色语言，这是你在接下来章节看到的程序所遵循的具体标准。根据硬件和操作系统的不同，还有其他的着色器（shaders)。这里我们将依照Khronos Group的规则来执行。

关于坐标系的问题

下面我们先看一个简单的渐变例子:

书中的效果图

cocos上的效果图

可以看到同一个效果，在书中是正常的指数渐变，可是在cocos上就是倒过来的。

其原因是因为书中的代码是以左下角为原点的坐标系统（这个和OpenGL是一样的），而我们在cocos上用到的v_uv0的坐标系统原点是在左上角的，所有这就导致了图像是倒置的。