保姆级教程！如何将一个 Shader 迅速移植到 Cocos Creator？

效果展示

‍

时常有人问我怎么学习shader，其实白玉无冰学的也很浅，推荐几个曾经用过的在线学习网站。

• https://thebookofshaders.com/

• https://webglfundamentals.org

• https://learnopengl-cn.github.io/

里面有自带环境编辑，在线编写代码，边学边做。

了解了一些概念（顶点着色器/片元着色器/uniform/glsl 语法/内置函数/uv 坐标）后，参考Cocos官方文档和论坛帖子。

看看Cocos内置的effect语法怎么写的，动手改改其中的几个数值，看看效果。

在有需求要做的时候，网上搜一搜，大部分效果都能搜到，剩下的就是借鉴搬运了。

这次我们来讲讲如何把搜到的shader化为己有，在Cocos中实现其中的效果。

本次演示使用Cocos Creator 3.1.0版本，看完后，相信大家可以在其他任意版本都可移植！

本次借鉴的源代码如下：

https://github.com/akella/webgl-mouseover-effects/blob/master/js/step1.js

参考代码

实现

本次实现分以下三步：

• 创建模版

• 基本实现

• 脚本控制

模版

新建场景，在场景中添加一个 2D 的sprite节点，删除 3D 相机灯光。

新建场景

拖入图片资源，类型Type改为sprite-frame，去掉自动合图Packable(方便 uv 计算)。

拖入资源

为精灵拖一个图片资源。

拖入资源

新建effect。

effect

查找模版builtin-sprite，并拷贝到刚刚创建的effect。

builtin-sprite

新建材质matertial，并选择刚刚创建的effect，勾上USE TEXTURE。

拖入资源

为精灵选择材质。

拖入资源

看到图片，完成模版创建！

基础

接下来，开始编写effect。

我们先处理uniform部分，看看源头有几个uniform。

源头中的 uniform

参考builtin-standard.effect中定义uniform的部分。

builtin-standard.effect

在effect中定义uniform。

定义 uniform

写完后可以在编辑的材质中看到刚才定义的属性。

材质中的 uniform

接着就是抄一下片元着色器部分，大部分语法都是通用的。

材质中的 uniform

在编辑器中改改参数，可以看到初步效果。

初步效果

升级

接下来我们加入跟随鼠标变化的效果。

首先新建一个脚本，添加一个节点挂载这个脚本。

新建脚本

在脚本中添加一个精灵属性，并绑定场景中的精灵。

添加属性

接着编写脚本逻辑

• 添加鼠标监听事件

• 鼠标坐标转换

• 处理uniform变量传递(数值逻辑参考源文件)

  • resolution 是高宽比

  • uMouse 是鼠标以左上角为原点，相对宽高归一化的值

源头中的 uniform

最后再随便写一个按钮，切换精灵的图片，就达到最终的效果啦。

代码工程

https://github.com/baiyuwubing/cocos-creator-examples/tree/master/awesome-shader

---

点击【阅读原文】跳转至白玉无冰个人公众号本文首发地址，希望大家多多讨论交流，一起学习一起成长！

往期精彩