Preface / 前言
Shader 编辑器 已经发布，更新一段时间了，期间也收到不少用户的反馈，有一部分声音，是关于 如何使用编辑器 这一点的。
虽然编辑器内置了比较多的文档，但是大部分是基于功能点的，有不少对于 Shader 本身也不是很熟悉的朋友，还是难上手。
因此就有了今天开始的一系列教程。
这一系列教程的特点:
1.结合 Creator 和 Shader 编辑器，可视化的讲解 Shader2.每次都针对极少功能点（技术点）3.每次都很短（5分钟内结束）4.不展开，不深入，点到为止，让读者知道: 有这回事儿 >>> 是这么做 >>> 大致是这个原理5.尽可能降低理解成本（因此部分说明不一定准确，但一定可以帮助理解）
Lesson 0x01 - Rendering an Image / 渲染图片
让我们从最简单的开始，在 Cocos Creator 中渲染一张静态图片开始。
Working in Creator / Creator 编辑器操作
想要在 Creator 显示一张图片，非常简单，只需要这几个步骤:
1.在场景 cc.Sccene 中创建一个节点 cc.Node2.在 cc.Node 上添加一个 cc.Component 对象: cc.Sprite3.给 cc.Sprite 的属性 SpriteFrame 附值，拖上一张图片即可
到这里，编辑器中就会显示我们使用的图片。
Under the Hood / 内部原理
看似简单几个操作，整个实现原理其实包含了引擎的全套渲染机制。
这里，只讲述和 Shader 相关的极核心部分。
Where is the Shader / Shader 在哪里
1.cc.Sprite 组件上有个 Material / 材质 ，点击后可以定位到文件2. 点击 材质文件，可以看到对应的一个 Effect / 效果 文件
3. 点击 效果文件 可以看到里面一大段代码，暂时只要知道一件事情:
我们找的
Shader代码就在里面，是它帮助我们最终看到了渲染出的图片
What is inside the Shader / Shader 写了些什么
虽然这个 特效文件 中的代码已经很简单，但是对于新手阅读还是不友好，这里我略微修改下，核心只要看一行代码:
gl_FragColor = texture2D(texture, v_uv0);
What dose the Shader means / Shader 的含义
简单解释，就这一行代码:
把需要
渲染的图片的色彩信息取出来，输出，最终用于渲染到屏幕上
Working in ShaderEditor / Shader 编辑器操作
在 Shader 编辑器中，一个新建的项目，你可以看到自带了两个面板，分别是:
MainTexture / 主纹理 和 Output / 输出。
MainTexture / 主纹理 对应的就是上面代码中的 texture / 纹理 变量，再进一步说，就是最终要渲染的图片。
Output / 输出 面板上可以看到 gl_FragColor 字样，它对应的，自然就是代码中的 gl_FragColor 。
到这里，上面的代码中就差一个 texture2D 函数了。
在编辑中，这个函数叫 TextureToRGBA ，意义很明确，从纹理中提取出色彩信息。
因此创建一个 TextureToRGBA 组件，将面板之间的输入输出相连 (这里为了简略演示，uv 部分没有连线，这种情况下，编辑器会自动默认使用 v_uv0 这个属性值) 。
可以看到，连接之后，编辑器中的 Output 就会显示所用的图片了。
Lesson Summary / 课程总结
1.Creator 中的和渲染相关的技术点 Material / 材质 + Effect / 效果2.Shader 代码就藏在 .effect 效果文件中3.Shader 编辑器 中有很多内置组件(面板)，对应的就是 Shader 代码中的各种 函数 或是 变量4.Shader 编辑器 中有通过连接组件(面板)，实现 编写代码 的效果
后面的计划是继续更新教程，结合两个编辑器，用可视化的方式，来寓教于乐的学习一些 Shader 相关，或是说图形学的基本操作，让更多的朋友可以有一定的提升:
Lv.1 大概可以看看 Shader 了
====== 不停的看，不停的看，不停的看 ======
Lv.10 看的差不多了，大概可以改改玩玩了
====== 不停的改，使劲儿的改，不停报错，使劲儿的修 ======
Lv.20 改得贼溜，差不多可以自己加几行代码了
====== 不停的加，使劲儿的加，效果越来越酷炫 ======
Lv.30 给张白纸，可以自己直接手撸特效了
......
当然，这些都是 yy ，作者自己估计也就 Lv.20 左右的水平，不过有了 Shader 编辑器 可以通过可视化的方式来做一些尝试性的修改，对于学习，制作都是有很大帮助的。
第一篇就到这儿，有空继续更新 ~~~
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
