可以看到,整个 Cocos Shader 只有两个 Pass,一个用来水平模糊,一个用来竖直模糊。 为了不影响阅读,完整 Shader 放在了文末。 注意:Cocos Creator 3.8.0 版本如果新增了后效 Shader,需要重启编辑器才能识别。后面版本中会优化这个流程。 编写属性组件 Cocos Creator 3.8 中,只需要在节点上添加对应的后期效果组件,就...
功能:图片实现扫光效果 引擎:cocos Creator3.7.2 开发语言:ts ### 效果图 ###shader代码 ```effect // Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd. CCEffect %{ techniques: - passes: - vert: sprite-vs:vert frag: sprite-fs:frag depthStencilState: depthTest: false depthWrite: false...
在基于 OpenGL 系列驱动的硬件设备上,Shader 支持一种名为 GLSL(OpenGL Shading Language)的着色器语言。 为了适配工业化制作流,提升着色器片段的易用性,Creator 封装了基于 GLSL 的着色器 —Cocos Effect。 本章主要介绍 Cocos Effect 的工作方式和使用方式。 内容 本章节主要包含以下内容:...
如果再加上原图的话, normal = accum*(1.0-normal.a) + normal ,那么就是最终描边效果了。 三 创建描边effect和material文件 新建effect和material文件,分别命名为OutlineEffect.effect和OutlineMaterial.mtl OutlineMaterial.mtl文件保持默认即可,无需修改 OutlineEffect.effect的main函数修改如下,代码将图片边缘变成imgCo...
这一节会介绍所有“领域特定”的扩展语法,更多实际使用示例,可参考编辑器内提供的 builtin effect。 在标准 GLSL 语法上,Creator 引入了以下几种非常自然的 C 风格语法扩展。 Include 机制 类似C/C++ 的头文件 include 机制,你可以在任意 shader 代码(CCProgram 块或独立的头文件)中引入其他代码片段: ...
先看一下完成的渲染流程图,多看几遍,我们写的Shader代码就是实现红色环节的: 看完了么?啥也不说了,直接上注解: dissolve.effect (creator Shader文件), 我将文件按不同颜色分成了三个部分, 方便大家理解。 %{ // 描述开始 // shader 细节描述开始 ...
Effect 文件的调试,根据目前我自己的接触,并没有我们平常开发那样子,可以打印日志之类的操作。基本上是通过以下方式去进行辅助调试 一、关注 Inspector 的编译结果 在上篇文章Cocos Creator Shader Effect 系列 - 2 - Effect 文件解读中,我们大致对 Cocos Creator 的 Effect 文件进行了解读,但是如果大家是从 OpenGL ...
在《Cocos Creator Shader Effect 系列 - 1 - 材质,Effect,Inspector,纹理之间的关系》中,我们曾经提及过 Cocos Creator 的编辑器就会帮我们预编译并解析我们的绑定的 Effect 文件中的 可改变属性 当时没有细解这句话,现在可以了,因为我们已经了解 CCEffect 结构了!
先看一下完成的渲染流程图,多看几遍,我们写的Shader代码就是实现红色环节的: 看完了么?啥也不说了,直接上注解: dissolve.effect (creator Shader文件), 我将文件按不同颜色分成了三个部分, 方便大家理解。 %{ // 描述开始 // shader 细节描述开始 ...
我们的后效 Shader 就写好了。完整代码如下,表示未做修改。 现在我们来看看它的效果。 回到Cocos Creator 中,新建一个材质,起名为mat-post-color,然后把它的切换为刚刚写好的effect-post-color。 选中Post-Process节点,把它拖动到它的属性上。 调节参数,可以看到渲染效果跟着变化了。