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

news2025/2/25 14:07:54

引擎版本: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.coloradmin.cn/o/2304918.html

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

相关文章

Android 老项目 jcenter 库失效

最近重新维护了一些老项目发现大部分jcenter库失效了, Could not resolve com.xx:2.1.3. 如果你也遇到了,不妨试试 替换为 aliyun的jcenter服务,就不用一个个找代替库了。 project 下的 build.gradle 文件添加: maven { url htt…

2025.2.23机器学习笔记:PINN文献阅读

2025.2.23周报 一、文献阅读题目信息摘要Abstract创新点网络架构架构A架构B架构C 实验结论后续展望 一、文献阅读 题目信息 题目: Physics-Informed Neural Networks for Modeling Water Flows in a River Channel期刊: IEEE TRANSACTIONS ON ARTIFICI…

Python Django系列—入门实例(二)

数据库配置 现在,打开 mysite/settings.py 。这是个包含了 Django 项目设置的 Python 模块。 默认情况下,​ DATABASES 配置使用 SQLite。如果你是数据库新手,或者只是想尝试 Django,这是最简单的选择。SQLite 包含在 Python 中…

【DeepSeek系列】05 DeepSeek核心算法改进点总结

文章目录 一、DeepSeek概要二、4个重要改进点2.1 多头潜在注意力2.2 混合专家模型MoE2.3 多Token预测3.4 GRPO强化学习策略 三、2个重要思考3.1 大规模强化学习3.2 蒸馏方法:小模型也可以很强大 一、DeepSeek概要 2024年~2025年初,DeepSeek …

独立开发者之Google Analytics使用教程

Google Analytics(GA)是Google提供的一款免费的网络分析服务,用于追踪和报告网站流量。以下是独立开发者如何使用Google Analytics的详细教程: 1. 创建Google Analytics账户 注册Google账户:如果你还没有Google账户&…

C++ 编程语言简介

C 是一种通用编程语言,它是作为 C 语言的增强而开发的,以包含面向对象的范例。它是一种命令式和编译语言。 C 是一种高级的通用编程语言,专为系统和应用程序编程而设计。它由贝尔实验室的 Bjarne Stroustrup 于 1983 年开发,作为…

计算机毕业设计SpringBoot+Vue.js明星周边产品销售网站(源码+文档+PPT+讲解)

温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 作者简介:Java领…

使用Windbg调试目标进程排查C++软件异常的一般步骤与要点分享

目录 1、概述 2、将Windbg附加到已经启动起来的目标进程上,或者用Windbg启动目标程序 2.1、将Windbg附加到已经启动起来的目标进程上 2.2、用Windbg启动目标程序 2.3、Windbg关联到目标进程上会中断下来,输入g命令将该中断跳过去 3、分析实例说明 …

ddd 文章总结分享,ddd实战代码分享, 领域驱动设计java实战源码大全,我看过的ddd java源码

1. 前段时间研究ddd, 收藏了很多相关知识,分享出来,希望能够帮助更多的小伙伴了解ddd, 什么是领域驱动设计,并分享在github发现的开源ddd代码 2. ddd 必须强烈点赞阿里两位大佬,一个为殷浩, 一个为cola作者 2.1.1 殷浩…

什么是MySql的主从复制(主从同步)?

主页还有其他面试题总结,有需要的可以去看一下,喜欢的就留个三连再走吧~ 1.什么是MySql的主从复制原理? 主从复制的核心就是二进制binlog(DDL(数据定义语言)语句和DML(数据操纵语言&#xff09…

蓝桥云课python代码

第一章语言基础 第一节编程基础 1 python开发环境 第一个Python程序 # 打印"Hello World" print("Hello World")# 打印2的100次方 print(2 ** 100)# 打印112 print("11",1 1)""" Hello World 126765060022822940149670320537…

c#丰田PLC ToyoPuc TCP协议快速读写 to c# Toyota PLC ToyoPuc读写

源代码下载 <------下载地址 历史背景与发展 TOYOPUC协议源于丰田工机&#xff08;TOYODA&#xff09;的自动化技术积累。丰田工机成立于1941年&#xff0c;最初是丰田汽车的机床部门&#xff0c;后独立为专注于工业机械与控制系统的公司。2006年与光洋精工&#xff08;Ko…

深入解析-无状态服务-StatefulSet (一)

一、有状态服务 VS 无状态服务 1.无状态服务介绍 1.数据方面&#xff1a;无状态服务不会在本地存储持久化数据.多个实例可以共享相同的持久化数据 2.结果方面&#xff1a;多个服务实例对于同一个用户请求的响应结果是完全一致的 3.关系方面&#xff1a;这种多服务实例之间是…

hackmyvm-buster

题目地址 信息收集 主机发现 ┌──(root㉿kali)-[/home/kali] └─# arp-scan -I eth1 192.168.56.0/24 Interface: eth1, type: EN10MB, MAC: 00:0c:29:34:da:f5, IPv4: 192.168.56.103 WARNING: Cannot open MAC/Vendor file ieee-oui.txt: Permission denied WARNING: C…

【原创】Windows11安装WSL“无法解析服务器的名称或地址”问题解决方法

原因分析 出现这个问题一开始以为WSL设置了某个服务器&#xff0c;但是通过运行 nslookup www.microsoft.com 出现下面的提示 PS C:\Windows\system32> nslookup www.microsoft.com 服务器: UnKnown Address: 2408:8000:XXXX:2b00:8:8:8:8非权威应答: 名称: e13678…

网页制作08-html,css,javascript初认识のhtml使用框架结构,请先建立站点!

框架一般由框架集和框架组成。 框架集就像一个大的容器&#xff0c;包括所有的框架&#xff0c;是框架的集合。 框架是框架集中一个独立的区域用于显示一个独立的网页文档。 框架集是文件html&#xff0c;它定义一组框架的布局和属性&#xff0c;包括框架的数目&#xff0c;框架…

【Vscode 使用】集合1

一、使用make工具管理工程 windows下&#xff0c;下载mingw64&#xff0c;配置好mingw64\bin 为 Win10系统全局变量后。 在mingw64/bin目录下找到mingw32-make.exe工具。复制一份改名为&#xff1a;make.exe&#xff0c;没错&#xff0c;就是那么简单&#xff0c;mingw64自带m…

文章精读篇——用于遥感小样本语义分割的可学习Prompt

题目&#xff1a;Learnable Prompt for Few-Shot Semantic Segmentation in Remote Sensing Domain 会议&#xff1a;CVPR 2024 Workshop 论文&#xff1a;10.48550/arXiv.2404.10307 相关竞赛&#xff1a;https://codalab.lisn.upsaclay.fr/competitions/17568 年份&#…

解决 kubeasz 安装k8s集群跨节点pod 无法使用cluster ip通讯问题

问题描述 使用kubeasz搭建k8s集群后使用的配置文件 # etcd cluster should have odd member(s) (1,3,5,...) [etcd] 192.168.xx.22# master node(s) [kube_master] 192.168.xx.22# work node(s) [kube_node] 192.168.xx.9 192.168.xx.22# [optional] harbor server, a privat…

Docker 搭建 Nginx 服务器

系列文章目录 Docker 搭建 Nginx 服务器 系列文章目录前言一、准备工作二、设置 Nginx 容器的目录结构三、启动一个临时的 Nginx 容器来复制配置文件四、复制 Nginx 配置文件到本地目录五、删除临时 Nginx 容器六、创建并运行 Nginx 容器&#xff0c;挂载本地目录七、修改 ngin…