201 lines
6.9 KiB
Markdown
201 lines
6.9 KiB
Markdown
# Cosos Creator 2.2.X shader 教程
|
||
## 前言
|
||
自己之前要做shader的一些效果，发现cocos相关文档很少，后面在论坛看帖子慢慢摸索了几周，也踩了几个坑耽误了一些功夫
|
||
现在把自己总结的一些笔记和大家分享讨论一下，有什么错误或者不足的欢迎提建议，自己也还是个刚入门的，希望可以帮到一些想着手的童鞋，也算是回馈社区
|
||
## 几个简单的效果
|
||
|
||
[查看demo代码](https://github.com/XuDaFei/CocosCreator-2.2.X-shader-demo)
|
||
|
||
|
||
## 新建 shader 资源
|
||
### 编辑器中:
|
||
在 Creator 中新建所需的 matrial、effect, 并且在 material 中设置对应的 effct 资源
|
||
|
||
### 代码中:
|
||
你需要在creator.d.ts 中添加几个接口来防止 ts 报错(不加只是爆红，不影响使用)
|
||
```typescript
|
||
export class Material extends Asset {
|
||
effectAsset: Asset; //材质对应的effect资源
|
||
define(name: string, val: any): void; //设置宏定义
|
||
setProperty(name:string, val: any); //设置变量
|
||
static getBuiltinMaterial(materialUrl: string): Material //获取系统的材质
|
||
{
|
||
}
|
||
}
|
||
export class EffectAsset extends Asset
|
||
{
|
||
}
|
||
```
|
||
设置材质的接口
|
||
```typescript
|
||
/** !#en
|
||
Base class for components which supports rendering features.
|
||
!#zh
|
||
所有支持渲染的组件的基类 */
|
||
export class RenderComponent extends Component
|
||
{
|
||
/** !#en The materials used by this render component.
|
||
!#zh 渲染组件使用的材质。 */
|
||
sharedMaterials: Material[];
|
||
/**
|
||
!#en Get the material by index.
|
||
!#zh 根据指定索引获取材质
|
||
@param index index
|
||
*/
|
||
getMaterial(index: number): Material;
|
||
/**
|
||
!#en Set the material by index.
|
||
!#zh 根据指定索引设置材质
|
||
@param index index
|
||
@param material material
|
||
*/
|
||
setMaterial(index: number,material: Material): void;
|
||
}
|
||
```
|
||
你可以用上面的几个接口来加载对应 effect 和 material，设置属性，设置对应的材质到对应的组件上
|
||
只要是继承了 RenderComponent 的组件，比如是Sprite, Label, Spine等，都可以设置和获取材质
|
||
|
||
## Effect 资源和 Matrial 资源
|
||
EffectAsset 就是保存我们自己编写的 shader 程序, 在引擎中对应着 EffectAsset 资源, 引擎读取渲染组件中的 effect 配置，并设置
|
||
对应渲染数据后调用WebGL的API进行渲染。
|
||
Creator 2.2 版本已经更新了 effect 文件的格式，关于 Matrial 和 Effect 的可以参考 [Cocos Creator 3D文档](https://docs.cocos.com/creator3d/manual/zh/material-system/overview.html)
|
||
这里用一个最简单的栗子来介绍一下
|
||
```yaml
|
||
CCEffect %{
|
||
techniques:
|
||
- passes:
|
||
- vert: vs //指向vert shader
|
||
frag: fs //指向frag shader
|
||
blendState: //渲染参数
|
||
targets:
|
||
- blend: true
|
||
rasterizerState:
|
||
cullMode: none
|
||
properties: //变量，会显示在 material 面板 上
|
||
texture: { value: white }
|
||
u_time: { value: 1.0 }
|
||
}%
|
||
|
||
CCProgram vs %{ //顶点着色器（GLSL 300 es格式）
|
||
#include <cc-global> //引用头文件，cc_matViewProj 变换矩阵就是在里面的变量
|
||
precision highp float; //定义精度
|
||
in vec3 a_position; //顶点位置
|
||
in vec2 a_uv0; //uv 坐标
|
||
out vec2 uv0; //插值输出到片元的uv 坐标
|
||
void main () {
|
||
gl_Position = cc_matViewProj * vec4(a_position, 1);
|
||
uv0 = a_uv0;
|
||
}
|
||
}%
|
||
|
||
CCProgram fs %{ //片元着色器
|
||
precision highp float; //定义精度
|
||
uniform sampler2D texture; //纹理
|
||
uniform ARGS { //除了系统的uniform ,其他uniform 变量都要定义在UBO(统一变量块)内
|
||
//时间 根据时间计算需要丢弃的像素颜色值范围，也就是溶解的范围
|
||
float u_time;
|
||
}
|
||
in vec2 uv0;
|
||
|
||
void main()
|
||
{
|
||
float time = u_time;
|
||
vec4 c = texture2D(texture,uv0); //用纹理和uv坐标采样到对应片元的颜色
|
||
float height = c.g;
|
||
if(height < time)
|
||
{
|
||
//丢弃像素，相当于溶解效果
|
||
discard;
|
||
}
|
||
if(height < time + 0.1) {
|
||
//这里可以对溶解边缘进行一些处理，比如透明度减少等
|
||
c.a = c.a-0.1;
|
||
}
|
||
//给片元（像素）赋值
|
||
gl_FragColor = c;
|
||
}
|
||
}%
|
||
```
|
||
Material 只需要在编辑器或者代码中设置对应的effect。在初始化和运行的时候设置对应的变量
|
||
|
||
## 运行
|
||
像溶解和流光等效果都需要在运行的代码中更新对应的时间参数，下面也举个小栗子
|
||
```typescript
|
||
const {ccclass,property} = cc._decorator;
|
||
|
||
@ccclass
|
||
export default class ShaderTime extends cc.Component
|
||
{
|
||
/**记录时间 */
|
||
private time: number;
|
||
/**精灵上的材质 */
|
||
private material: any;
|
||
private IsAdd: boolean;
|
||
|
||
/**时间参数 */
|
||
@property(cc.Float)
|
||
speed: number = 1.0;
|
||
|
||
start()
|
||
{
|
||
this.time = 0;
|
||
this.IsAdd = true;
|
||
this.material = this.node.getComponent(cc.Sprite).getMaterial(0); //获取材质
|
||
}
|
||
|
||
update(dt)
|
||
{
|
||
this.material.setProperty("u_time",this.time); //设置材质对应的属性
|
||
this.IsAdd ? this.time += dt * this.speed : this.time -= dt * this.speed;
|
||
if(this.time > 1.5)
|
||
{
|
||
this.IsAdd = false;
|
||
}
|
||
else if(this.time < -0.5)
|
||
{
|
||
this.IsAdd = true;
|
||
}
|
||
}
|
||
}
|
||
```
|
||
## 关于合图导致web和模拟器显示不一致的BUG
|
||
|
||
原因: Cocos 会把小于512*512的碎图自动合图以减少DrawCall，而effect中接收到的uv 坐标是整个合图的uv, 导致需要用到uv坐标的effect在自动合图下显示不正确。
|
||
解决办法：
|
||
- 关闭自动合图
|
||
ps: 在Cocos Creator 2.1.3和2.2.0 以上都支持单独取消某个纹理的合图
|
||
- 手动获取当前sprite 的纹理uv坐标传入到effect(无需取消自动合图)
|
||
```typescript
|
||
//获取UV位置到Effect
|
||
let frame = sprite.spriteFrame as any;
|
||
let l = 0,r = 0,b = 1,t = 1;
|
||
l = frame.uv[0];
|
||
t = frame.uv[5];
|
||
r = frame.uv[6];
|
||
b = frame.uv[3];
|
||
let u_UVoffset = new cc.Vec4(l,t,r,b);
|
||
let u_rotated = frame.isRotated() ? 1.0 : 0.0;
|
||
this._material.setProperty("u_UVoffset",u_UVoffset);
|
||
this._material.setProperty("u_rotated",u_rotated);
|
||
//在Effect 中接受u_UVoffset u_rotated 后重新设置UV
|
||
vec2 UVnormalize;
|
||
UVnormalize.x = (uv0.x-u_UVoffset.x)/(u_UVoffset.z-u_UVoffset.x);
|
||
UVnormalize.y = (uv0.y-u_UVoffset.y)/(u_UVoffset.w-u_UVoffset.y);
|
||
if(u_rotated > 0.5)
|
||
{
|
||
float temp = UVnormalize.x;
|
||
UVnormalize.x = UVnormalize.y;
|
||
UVnormalize.y = 1.0 - temp;
|
||
}
|
||
```
|
||
|
||
## 总结
|
||
有了材质和Effect以后，cocos使用shader 更加直观了。
|
||
移植一个需要shader 效果其实也只是在effect文件中设置好变量，修改一下shader 的代码片段语法，最后在代码或面板中设置参数即可
|
||
当然里面可能会有一些不兼容的属性或者一些细节的问题
|
||
|
||
## 学习Shader
|
||
- [OpenGL 教程](https://learnopengl-cn.github.io/intro/) 手把手教学,我自己之前也是看这个，良心教程！
|
||
- [WebGL 教程](https://webglfundamentals.org/webgl/lessons/zh_cn/)
|
||
- [GLSL语法](https://thebookofshaders.com/02/?lan=ch)
|