超级浣熊的Shader入门教程 0x01 - 渲染图片

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 编辑器 可以通过可视化的方式来做一些尝试性的修改，对于学习，制作都是有很大帮助的。

第一篇就到这儿，有空继续更新 ~~~