一起来看,社区大佬揭开 Creator 2.1.2 材质系统的神秘面纱!_顶点着色器

本文已向 Cocos论坛社区大佬「lxb229」获得授权,感谢他的精彩分享!

 

 

 

粗解 Cocos Creator 2.1.2 Shader

 

最近空闲的时候,研究了一下 2.1.2 版本的 shader,这里单独提出来一个说明一下,希望对想了解 2.1.2 的童鞋有所帮助。

首先,新建一个Effect,从上往下说吧。

一起来看,社区大佬揭开 Creator 2.1.2 材质系统的神秘面纱!_3d_02

现在 2.1.2 的 Creator把 effect 做成了和 Component 类似的组件,在 properties 中,这里可以设置外部属性,在编译器中暴露出来。

在当前版本中,可以在properties中设置的类型有:float、vec2、vec3、color4。

一起来看,社区大佬揭开 Creator 2.1.2 材质系统的神秘面纱!_下载地址_03

第二,在顶点着色器 vs 中,属性名称有所变化,请看下图:

一起来看,社区大佬揭开 Creator 2.1.2 材质系统的神秘面纱!_游戏开发_04这里特别注意的是 uniform mat4 cc_matViewProj第三,在片元着色器 fs 中,基本和 2.0.x 的没有什么变化,只需要把外部属性对应在 properties 中即可,看下图所示:

一起来看,社区大佬揭开 Creator 2.1.2 材质系统的神秘面纱!_顶点着色器_05注意,在 properties 中类型为 color4 的,这里是vec4。

最后,就是调用的问题,现在因为 shader 还不稳定,所以官方也没有把 API 完善,有点问题。我只写了一个需要刷新 time 的外部属性的例子,你也可以照着写,像下面一样:

 

 

//ShaderTime.ts




const {ccclass, property} = cc._decorator;




@ccclass

export default class ShaderTime extends cc.Component {

_material: any;

@property

max = 65535;




start() {

this._material = this.node.getComponent(cc.Sprite).sharedMaterials[0];

}

private _start = 0;




protected update(dt) {

if (this.node.active && this._material) {

this._setShaderTime(dt);

}

}

private _setShaderTime(dt) {

let start = this._start;

if (start > this.max) start = 0;

start += 0.01;

this._material.effect.setProperty('time', start);

this._start = start;

}

}

哦,对了 Effect 设置好了,直接拖拽就可以用了,看下实际运行效果:

一起来看,社区大佬揭开 Creator 2.1.2 材质系统的神秘面纱!_游戏开发_06

注意:因为切圆的 shader 在浏览器上的图片顶点取值好像有问题(实测:在 8 * 8 以下 和 513*513 以上的图片尺寸,在 Web 上没问题),所以我重新放了一个外发光的 shader,供大家参考。

在Web显示有问题的解决方案 :

  1.  
// 关掉引擎的动态图集(慎用,这会导致游戏的其他drawcall 增高)

cc.dynamicAtlasManager.enabled = false;


本文工程下载地址:https://forum.cocos.com/uploads/default/original/3X/f/a/fa9f5a9ac9aa8a8db3d1781cb6d79b046e0a6252.zip

论坛原文地址:

https://forum.cocos.com/t/creator-2-1-2-shader/82058

 

    结语    

 

感谢 Cocos 论坛社区中的「lxb229」分享的精彩文章,让我们受益非浅,相信你还能从中获得更多的启发。「Creator星球游戏开发社区」感谢你的支持,也欢迎你来公众号上投稿,分享你的经验与技术,愿我们一起在前进的道路上,砥砺前行,共同成长!

 

ator星球游戏开发社区

长按二维码,关注我们!