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

COCOS

共 1461字,需浏览 3分钟

 ·

2021-07-29 14:09

效果展示

时常有人问我怎么学习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


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

浏览 49
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报