Cocos Creator Shader入门实战(一):材质和Effect的了解

news/2025/2/25 1:59:46

引擎版本:3.8.5

环境: Windows


简介


在Cocos Creator中,游戏炫彩缤纷的效果是借助着色器(Shader)来实现的。

Cocos主要基于OpenGL ES,而Shader的编写则是在可编程渲染管线中基于修改:顶点着色器(Vertex)片段着色器(Fragment) 完成的。

Cocos官方,为了简化着色器的复杂配置,更多灵活性,以及能够通过编译器进行可视化管理等等,在Cocos Creator中,实现Shader主要借助两个文件:EffectAssetMaterial材质

两者都属于资源文件,简单的理解:

一、EffectAsset 负责Shader的编写、配置和各种属性定义等

二、Material材质 负责对EffectAsset的数据包装,并将一些属性数据可视化显示在属性检查器中,方便用户管理和操作。

可以认为:在Cocos Creator中,想实现各种不同的渲染效果;需要通过Effect配置属性和着色器编写,通过材质来实现对Effect的包装,进而显示出不同的效果。

两者是相辅相成的,缺一不可的。


学习的困惑


初次接触材质和Effect的时候,我一脸的茫然。

毕竟从事游戏开发,像OpenGL、渲染、Shader等这些专业的术语,即使不曾使用,在面试中也是无法摆脱的。

当我第一次看到Material材质的属性配置:
请添加图片描述

第一次看到Effect的属性配置:
请添加图片描述

即使有着官方文档的加持,我也是一脸的茫然,不知道这些到底代表着什么,以及如何使用。

再到后来,慢慢的明白:看似好像没有接触使用过它们,但实际上它们就像是空气一样,在你的周围弥漫。

因为不管怎样,游戏客户端中所展现的任何可视性的效果都是渲染。

如果从细节上来说,比如:

在Creator 2.4.x版本中,关于某个Sprite的属性显示:

请添加图片描述

在Creator 3.8.x版本中,关于某个Sprite的属性显示:
请添加图片描述

这些都是官方对渲染组件的默认配置,前者展示了默认的材质配置,而后者虽然没有显示出来,但依然会默认配置。

稍微延伸下,为什么CocosCreator针对于组件的设定,分为UI组件和渲染组件呢,原因也在这里。

困惑、畏难这些都是难免的,早晚都需要经历和学习,这里提前预祝您的成功。

注:当你慢慢开始学习的时候,你可能会想我一样:哦,原来是这样子!


编译器创建


接下来,我们继续说明材质Material和EffectAsset。在编译器中,它们都是支持编译器创建的。


材质的构建

主要有两种:

一、物理材质:Physics Material,主要用于记录物体的物理属性相关,被用于碰撞系统。

二、普通材质: Material,主要被用于管理Effect资源,并控制着色效果的展示。

请添加图片描述

以普通材质Material为例,创建后的属性如下图所示:

请添加图片描述

主要属性有:

  • sphere: 材质的预览效果,可选择box、sphere、capsule等进行预览
  • Light: 指的是是否启用光照效果
  • Effect: 指的是材质当前使用的着色器,可通过下拉框进行选择
  • Technique: 指的是材质使用着色器中的哪种技术
  • Pass… 指的是Effect中Technique所包含的Pass流程,每种Technique可以包含多个Pass
  • USE INSTANCING 指的是Effect中宏定义的开关

针对于Technique、Pass和宏定义这三个参数,是在Effect中使用 YAML语言配置的参数属性。


EffectAsset的构建

着色器资源的创建,编译器同样支持两种:

一、传统无光照着色器: Effect,同文字描述所言,没有光照效果的实现。

二、表面着色器:Surface Effect, 基于PBR的着色器。

PBR全称:Physically Based Rendering 基于物理的光照模型

CocosCreator 从 v3.0 开始提供了基于物理渲染(PBR)的光照着色器:builtin-standard.effect

它可根据现实中光线传播原理和能量守恒定律,模拟出近似于真实物理光照的效果,主要用于3D。

请添加图片描述

这里以构建无光照的着色器为例,创建后的属性如下:

请添加图片描述

主要属性部分有:

  • shaders : 当前的着色器名称相关
  • Precompile Combinations 预处理宏定义组合相关,通过on/off的开关来决定是否是否启用
  • GLSL 300 ES/100 Output 着色器的输出模式和预览

这里要说明下:

一、宏定义的组合可以更灵活的实现不同着色器效果的实现,并实现复用性。

二、300 ES 和 100 是引擎主要用于适配不同的WebGL版本和硬件支持。

前者基于WebGL 2.0标准,支持更多的图形功能、更复杂着色器功能实现和更高的性能化;而后者主要基于WebGL 1.0标准,功能有限,主要用于向下兼容旧的硬件和浏览器。

三、输出的代码是引擎根据Effect提供的配置参数,解析后生成的。

在实际的编写中,我们只需关注:

  • CCEffect属性的配置

  • CCProgram着色器片段的编写


写到最后

今天的文章暂且就告一段落,因为贪多嚼不烂。

另外,总结了几个小小的想法或者说是建议,主要有这么几点:

一、Shader的使用,由于游戏引擎的封装的便利性,很可能导致我们认为这是一门很遥远的技术,不是不用,而是没有关注过。

二、请不要过于的追求极致性,还有真正的了解,便开始了各种底层的学习,先模仿再创造,先完成再完美。

三、CocosShader效果的实现需要借助Material来,我们通过代码实现Effect效果也是通过获取材质来设置属性。

四、Effect的实现主要两部分: 一是通过CCEffect配置属性 二是通过CCProgram编写着色器片段。

理解可能有误,但依然希望能够帮助到您,感谢!


http://www.niftyadmin.cn/n/5864911.html

相关文章

Sliding Window Attention(滑动窗口注意力)解析: Pytorch实现并结合全局注意力(Global Attention )

Sliding Window Attention(滑动窗口注意力)解析 Sliding Window Attention(滑动窗口注意力) 是 Longformer (来源:https://arxiv.org/pdf/2004.05150)提出的 稀疏注意力机制,旨在解决 标准 Transformer 计算…

游戏设计模式阅读 - 游戏循环

游戏与普通程序最大的不同点在于: 游戏不像其他大多数软件,游戏即使在没有玩家输入时也继续运行。 如果你站在那里看着屏幕,游戏也不会冻结。动画会持续播放。视觉效果继续闪烁。 如果运气不好的话,怪物会继续暴揍你的角色。 那么…

WebXR教学 02 配置开发环境

默认操作系统为Windows 1.VS Code VS Code 是一款轻量级、功能强大的代码编辑器,适用于多种编程语言。 下载 步骤 1:访问 VS Code 官方网站 打开浏览器(如 Chrome、Edge 等)。 在地址栏输入以下网址: https://code.v…

Windows、Mac、Linux,到底该怎么选?

在当今数字化时代,电脑已成为我们生活和工作中不可或缺的工具。而操作系统作为电脑的核心,其选择直接影响着我们的使用体验。Windows、Mac 和 Linux 作为三大主流操作系统,各自有着独特的优势和不足。今天,就来给大家详细分析一下…

一文详解U盘启动UEFI/Legacy方式以及GPT/MBR关系

对于装系统的老手而说一直想研究一下装系统的原理,以及面对一些问题时的解决思路,故对以前的方法进行原理上的解释,主要想理解其底层原理。 引导模式 MBR分区可以同时支持UEFI和Legacy引导,我们可以看一下微pe制作的启动盘&#…

机器学习(李宏毅)——RL(强化学习)

一、前言 本文章作为学习2023年《李宏毅机器学习课程》的笔记,感谢台湾大学李宏毅教授的课程,respect!!! 二、大纲 What is RL?Three steps in MLPolicy GradientActor-CriticReward Shaping 三、What …

ike-scan:发现并指纹识别 IKE 主机(IPsec VPN 服务器)!全参数详细教程!Kali Linux教程!黑客教程!

简介 ike-scan 发现 IKE 主机,还可以使用重传退避模式对它们进行指纹识别。 ike-scan 执行两项操作: 1) 发现:确定哪些主机正在运行 IKE。这是通过显示响应 ike-scan 发送的 IKE 请求的主机来完成的。 2) 指纹识别:确定主机正…

在LangFlow中集成OpenAI Compatible API类型的大语言模型

一、背景与核心价值 从Dify换到这个langflow真的时各种的不适应啊。 就比如这个OpenAI Compatible API,这不应该是基本操作嘛? 算了,服了,习惯了就好了。咱闲言少叙,正片开始: LangFlow作为LangChain的可视化开发工具,其最大优势在于无需编写代码即可构建复杂的大模型…