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

引擎版本: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.mzph.cn/diannao/70719.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

akka现有的分布式定时任务框架总结

根据你的需求,以下是一些基于 Akka 实现的分布式定时任务框架,以及相关的 GitHub 项目推荐: 1. Openjob Openjob 是一个基于 Akka 架构的新一代分布式任务调度框架,支持多种定时任务、延时任务、工作流设计,采用无中…

微信小程序地图map全方位解析

微信小程序地图map全方位解析 微信小程序的 <map> 组件是一个功能强大的工具&#xff0c;可以实现地图展示、定位、标注、路径规划等多种功能。以下是全方位解析微信小程序地图组件的知识点&#xff1a; 一、地图组件基础 1. 引入 <map> 组件 在页面的 .wxml 文…

Python的PyTorch+CNN深度学习技术在人脸识别项目中的应用

人脸识别技术是一种基于人脸特征进行身份识别的生物识别技术&#xff0c;其核心原理包括人脸检测、人脸对齐、特征提取、特征匹配、身份识别。 一、应用场景 安防&#xff1a;门禁、监控。 金融&#xff1a;刷脸支付、身份验证。 社交&#xff1a;自动标注、美颜。 医疗&am…

《数据库索引设计与优化》译本错误纠正(1)

今天在学习《数据库索引设计与优化》第十一章第198页的时候遇到一个问题&#xff0c;即参数的文字描述与实际不符。我看的是从网络上找到的译本&#xff0c;许多喜欢白嫖的朋友可能也会像我一样遇到这种问题。 可以看到&#xff0c;上面对参数Z的描述是&#xff1a;Z上一次索引…

API测试工具:Swagger vs Postman 2025最新全面对比

随着微服务架构的普及和云原生应用的激增&#xff0c;高效的 API 开发、测试和文档管理工具变得越来越重要。在众多 API 工具中&#xff0c;Swagger 和 Postman 各自以不同的方式解决着 API 开发生命周期中的关键问题&#xff0c;本文将从多个维度深入对比这两款工具&#xff0…

如何查询SQL Server数据库服务器的IP地址

如何查询SQL Server数据库服务器的IP地址 作为数据库管理员或开发人员&#xff0c;了解如何查询SQL Server数据库服务器的IP地址是一项重要技能。本文将介绍几种简单而有效的方法&#xff0c;帮助你轻松获取这一信息。无论你是新手还是经验丰富的专业人士&#xff0c;这些方法…

centos 7 安装python3 及pycharm远程连接方法

安装openssl 使用pip3安装 virtualenv的时候会提示WARNING: pip is configured with locations that require TLS/SSL, however the ssl module in Python is not available. 这是因为缺少openssl 2.0以上版本 解决办法&#xff1a; 一、先确认版本 openssl version 二、安…

AI人工智能之机器学习sklearn-数据预处理和划分数据集

1、概要 本篇学习AI人工智能之机器学习sklearn数据预处理和划分数据集&#xff0c;从代码层面讲述如何进行数据的预处理和数据集划分。 2、简介 本片讲述数据预处理的标准化处理、归一化处理&#xff0c;以常用的两个类为例 标准化处理类 StandardScaler归一化处理类 MinMax…

智能硬件-01智能停车场

行业背景 随着现代人们生活水平的提高&#xff0c;私家车辆在不断增加&#xff0c;小区将面临着临时车用户要多于固定车用户的窘境&#xff0c;尤其是在早晚高峰时段车辆出入拥堵&#xff0c;对小区的车辆管理难度越来越大&#xff0c;对停车场收费员的岗位要求越来越高&#…

定长内存池的实现、测试及错误分析

背景 C/C 申请内存使用的是 malloc &#xff0c;malloc 其实就是一个大众货&#xff0c;什么场景下都可以用&#xff0c;但是什么场景下都可以用就意味着什么场景下都不会有很高的性能。 定长内存池解决固定大小的内存申请释放需求&#xff0c; 性能达到极致&#xff0c;不考…

vue3 下载文件 responseType-blob 或者 a标签

在 Vue 3 中&#xff0c;你可以使用 axios 或 fetch 来下载文件&#xff0c;并将 responseType 设置为 blob 以处理二进制数据。以下是一个使用 axios 的示例&#xff1a; 使用 axios 下载文件 首先&#xff0c;确保你已经安装了 axios&#xff1a; npm install axios然后在你…

Search API:让数据获取变得简单高效的搜索引擎代理商

Search API&#xff1a;让数据获取变得简单高效的搜索引擎代理商 在当今数字化时代&#xff0c;数据驱动的决策变得越来越重要&#xff0c;而获取精准、实时的数据是众多企业、研究机构和开发者的核心需求。然而&#xff0c;直接爬取搜索引擎或行业资讯网站可能会遇到诸多挑战&…

halcon三维对象处理例程总结(二)

目录 一、intersect_plane_object_model_3d二、interactive_intersection三、measure_plant四、moments_object_model_3d五、projective_trans_object_model_3d六、read_object_model_3d_generic_ascii一、intersect_plane_object_model_3d 计算三维物体模型与平面之间的相交部…

基于 Python 的项目管理系统开发

基于 Python 的项目管理系统开发 一、引言 在当今快节奏的工作环境中&#xff0c;有效的项目管理对于项目的成功至关重要。借助信息技术手段开发项目管理系统&#xff0c;能够显著提升项目管理的效率和质量。Python 作为一种功能强大、易于学习且具有丰富库支持的编程语言&…

2月24(信息差)

&#x1f30d;“任意舞蹈任意学”&#xff01;宇树机器人又进化了 传Meta有意合作抛出橄榄枝 &#x1f384;两部门&#xff1a;深入推进公路沿线充电基础设施建设 推动大功率充电技术标准应用 ✨小米15 Ultra、小米SU7 Ultra定档2月27日 雷军宣布&#xff1a;向超高端进发 1.…

mysql 迁移到人大金仓数据库

我是在windows上安装了客户端工具 运行数据库迁移工具 打开 在浏览器输入http://localhost:54523/ 账号密码都是kingbase 添加mysql源数据库连接 添加人大金仓目标数据库 添加好的两个数据库连接 新建迁移任务 选择数据库 全选 迁移中 如果整体迁移不过去可以单个单个或者几个…

C++和OpenGL实现3D游戏编程【连载23】——几何着色器和法线可视化

欢迎来到zhooyu的C++和OpenGL游戏专栏,专栏连载的所有精彩内容目录详见下边链接: 🔥C++和OpenGL实现3D游戏编程【总览】 1、本节实现的内容 上一节课,我们在Blend软件中导出经纬球模型时,遇到了经纬球法线导致我们在游戏中模型光照显示问题,我们在Blender软件中可以通过…

JUC并发—12.ThreadLocal源码分析

大纲 1.ThreadLocal的特点介绍 2.ThreadLocal的使用案例 3.ThreadLocal的内部结构 4.ThreadLocal的核心方法源码 5.ThreadLocalMap的核心方法源码 6.ThreadLocalMap的原理总结 1.ThreadLocal的特点介绍 (1)ThreadLocal的注释说明 (2)ThreadLocal的常用方法 (3)ThreadL…

Deepseek和Grok 3对比:写一段冒泡排序

1、这是访问Grok 3得到的结果 2、grok3输出的完整代码&#xff1a; def bubble_sort(arr):n len(arr) # 获取数组长度# 外层循环控制排序轮数for i in range(n):# 内层循环比较相邻元素&#xff0c;j的范围逐渐减少for j in range(0, n - i - 1):# 如果当前元素大于下一个元…

Java-01-源码篇-04集合-05-ConcurrentHashMap(1)

1.1 加载因子 加载因子&#xff08;Load Factor&#xff09;是用来决定什么时候需要扩容的一个参数。具体来说&#xff0c;加载因子 当前元素数量 / 桶的数量&#xff0c;当某个桶的元素个数超过了 桶的数量 加载因子 时&#xff0c;就会触发扩容。 我们都知道 ConcurrentHas…