Cocos3内置Effect(着色器)介绍

创建材质后Effect有很多下拉选项,介绍一下:

在 Cocos Creator 中,材质(Material) 是用于定义物体表面渲染效果的资源,而 Effect(效果文件) 是材质的核心,它定义了如何使用 Shader 代码来渲染物体。创建材质时,Effect 提供的下拉选项决定了材质的渲染行为和可配置参数。以下是 Effect 下拉选项的详细介绍:


1. Effect 下拉选项的分类

Effect 的下拉选项通常分为以下几类,具体取决于你使用的 Effect 文件:

(1) 内置 Effect

1、常用Effect

Cocos Creator 提供了一些内置的 Effect,适用于常见的渲染需求:

  • builtin-standard
    • 标准 PBR(物理渲染)材质,支持金属度、粗糙度、法线贴图等。
    • 适用于大多数 3D 模型,如角色、道具等。
  • builtin-unlit
    • 无光照材质,直接显示颜色或纹理,不受场景光照影响。
    • 适用于 UI、粒子、天空盒等。
  • builtin-sprite
    • 2D 精灵材质,支持透明度、颜色混合等。
    • 适用于 2D 游戏中的图片资源。
  • builtin-custom
    • 自定义 Effect,允许你通过编写 Shader 代码实现特殊效果。
2、其他内置着色器Effect

以下是 Cocos Creator 中内置着色器(Builtin Shaders)的详细介绍,按列表顺序说明其用途和典型应用场景:


1. builtin-billboard

  • 用途 :用于实现公告板(Billboard)效果,即物体始终面向摄像机。
  • 典型场景
    • 2D 精灵在 3D 场景中的渲染(如粒子特效、UI 元素)。
    • 树木、粒子等需要始终朝向摄像机的物体。
  • 特点:通过动态调整物体的旋转,使其法线始终对准摄像机,实现"平面朝向"效果。

2. builtin-camera-texture

  • 用途 :用于渲染摄像机纹理(如渲染到纹理、后处理效果)。
  • 典型场景
    • 镜像反射(通过渲染摄像机视角到纹理)。
    • 屏幕后处理(如模糊、色调映射)。
  • 特点:支持将摄像机的渲染结果作为纹理输入到其他 Shader 中。

3. builtin-clear-stencil

  • 用途 :用于清除模板缓冲区(Stencil Buffer)
  • 典型场景
    • 在渲染需要模板测试的物体前,重置模板缓冲区。
    • 配合 builtin-debug-renderer 调试模板缓冲区的值。
  • 特点:通常不直接用于可见物体,而是作为渲染流程的一部分。

4. builtin-debug-renderer

  • 用途 :用于调试渲染信息(如法线、深度、模板缓冲区)。
  • 典型场景
    • 可视化法线贴图、深度缓冲区或模板缓冲区。
    • 调试光照、阴影或后处理效果。
  • 特点:输出调试信息到屏幕,帮助开发者优化或排查问题。

5. builtin-geometry-renderer

  • 用途 :用于渲染几何图形(如线框、网格、自定义几何体)。
  • 典型场景
    • 显示模型的线框模式(Wireframe)。
    • 渲染自定义的几何形状(如箭头、辅助线)。
  • 特点:支持通过代码动态生成几何数据并渲染。

6. builtin-graphics

  • 用途 :用于动态绘制图形 (如通过 Graphics 组件绘制的线条、形状)。
  • 典型场景
    • 绘制 2D 图形(如矩形、圆形、路径)。
    • 实现动态生成的 UI 元素或特效。
  • 特点 :与 Graphics 组件配合使用,支持运行时修改图形属性。

7. builtin-occlusion-query

  • 用途 :用于遮挡查询(Occlusion Query),检测物体是否被其他物体遮挡。
  • 典型场景
    • 优化渲染性能,避免渲染不可见的物体。
    • 实现动态 LOD(Level of Detail)切换。
  • 特点:通过 GPU 查询统计像素通过深度测试的数量,判断物体是否可见。

8. builtin-particle

  • 用途 :用于粒子系统的默认渲染。
  • 典型场景
    • 火焰、烟雾、魔法特效等粒子效果。
    • 支持软粒子(Soft Particles)、扰动贴图等高级特性。
  • 特点:支持通过粒子属性(如颜色、大小、速度)动态控制渲染效果。

9. builtin-particle-gpu

  • 用途 :用于GPU 驱动的粒子系统,性能更高。
  • 典型场景
    • 大量粒子(如数万级别)的实时渲染。
    • 需要复杂粒子行为(如流体模拟)的场景。
  • 特点:通过计算着色器(Compute Shader)在 GPU 上更新粒子状态,减少 CPU 开销。

10. builtin-particle-trail

  • 用途 :用于粒子拖尾效果(如飞行轨迹、尾迹)。
  • 典型场景
    • 飞行道具的拖尾光效。
    • 角色移动时的残影效果。
  • 特点:支持动态生成拖尾几何体,并根据粒子生命周期调整透明度。

11. builtin-particle-trail

  • 用途 :用于渲染粒子拖尾效果,模拟物体移动时留下的轨迹(如飞行道具的光轨、角色的残影)。
  • 典型场景
    • 游戏中的技能特效(如魔法飞弹的尾焰)。
    • 角色快速移动时的动态残影。
  • 特点
    • 根据粒子系统的生命周期动态生成拖尾几何体。
    • 支持透明度和颜色渐变,增强拖尾的真实感。

12. builtin-particle-xr-trail

  • 用途 :专为 XR(扩展现实) 设备优化的粒子拖尾着色器。
  • 典型场景
    • VR/AR 应用中的交互特效(如手势拖尾、虚拟物体移动轨迹)。
  • 特点
    • 针对 XR 设备的性能优化(如减少渲染开销)。
    • 可能支持额外的 XR 特定功能(如立体渲染)。

13. builtin-reflection-deferred

  • 用途 :用于延迟渲染(Deferred Rendering) 中的反射效果。
  • 典型场景
    • 高质量场景渲染(如金属表面的环境反射)。
    • 需要精确控制反射计算的复杂光照环境。
  • 特点
    • 在延迟渲染管线中,将反射信息存储在 G-Buffer 中,后期处理时计算反射。
    • 适用于需要高性能反射的场景(如镜面、水面)。

14. builtin-spine

  • 用途 :专为 Spine 2D 骨骼动画 设计的着色器。
  • 典型场景
    • 2D 游戏中的角色动画(如角色换装、技能特效)。
    • 需要支持 Spine 运行时功能的场景(如网格变形、插槽替换)。
  • 特点
    • 支持 Spine 的网格渲染、骨骼权重和插槽系统。
    • 可与 Spine 编辑器直接兼容,保留动画的原始效果。

15. builtin-sprite

  • 用途 :用于渲染 2D 精灵(Sprite)
  • 典型场景
    • 2D 游戏中的角色、道具、UI 元素。
    • 需要支持透明度、颜色混合和九宫格缩放的场景。
  • 特点
    • 支持精灵的裁剪(Trim)、九宫格(9-Slice)和批处理(Batching)。
    • 可配置混合模式(如正常、叠加、乘法)。

16. builtin-sprite-renderer

  • 用途 :与 builtin-sprite 类似,但可能针对 SpriteRenderer 组件 做了额外优化。
  • 典型场景
    • 高效渲染大量 2D 精灵(如背景图层、粒子效果)。
  • 特点
    • 可能支持更高效的批处理或实例化渲染。
    • 适用于对性能敏感的 2D 场景。

17. builtin-standard

  • 用途 :标准的 PBR(物理渲染) 着色器,支持金属度/粗糙度工作流。
  • 典型场景
    • 3D 模型的高质量渲染(如角色、场景物体)。
    • 需要真实光照和材质表现的场景。
  • 特点
    • 支持金属度(Metallic)、粗糙度(Roughness)、法线贴图(Normal Map)等 PBR 参数。
    • 兼容物理光照和环境反射。

18. builtin-terrain

  • 用途 :用于渲染 地形(Terrain),如山脉、草地、雪地。
  • 典型场景
    • 开放世界游戏中的自然场景。
    • 需要高度图(Heightmap)和纹理混合的地形。
  • 特点
    • 支持多纹理混合(如草地、岩石、雪地的过渡)。
    • 可能支持地形LOD(Level of Detail)优化。

19. builtin-toon

  • 用途 :用于实现 卡通渲染(Toon Shading) 效果。
  • 典型场景
    • 日式动漫风格的游戏(如《原神》的卡通渲染角色)。
    • 需要非真实感渲染(NPR)的场景。
  • 特点
    • 通过颜色分段(Color Banding)实现卡通化的光照效果。
    • 支持轮廓线(Outline)和阴影色块。

20. builtin-unlit

  • 用途无光照着色器,直接显示颜色或纹理,不受场景光照影响。
  • 典型场景
    • UI 元素、全屏特效、天空盒。
    • 需要固定颜色或纹理的场景(如标志、图标)。
  • 特点
    • 性能极高,忽略所有光照计算。
    • 支持透明度和颜色混合。

21. builtin-wireframe

  • 用途 :用于渲染 线框模式(Wireframe),显示模型的网格结构。
  • 典型场景
    • 调试模型拓扑结构。
    • 实现科技感或工程风格的视觉效果。
  • 特点
    • 渲染模型的边线,而非表面。
    • 可配置线框颜色和粗细。

22. dcc/imported-metallic-roughness

  • 用途 :用于渲染从 DCC 工具(如 Blender、Maya) 导入的 PBR 材质,保留金属度/粗糙度信息。
  • 典型场景
    • 导入第三方工具制作的 3D 模型和材质。
    • 需要精确还原原始 PBR 效果的场景。
  • 特点
    • 支持导入的金属度/粗糙度贴图(如 MetallicRoughness.png)。
    • 兼容标准 PBR 工作流。

总结

  • 性能优先 :选择 builtin-unlitbuiltin-sprite
  • 高质量 3D 渲染 :选择 builtin-standardbuiltin-toon
  • 特殊效果 :选择 builtin-particle-trail(拖尾)、builtin-wireframe(线框)。
  • 工具兼容 :选择 builtin-spine(Spine 动画)或 dcc/imported-metallic-roughness(导入 PBR 材质)。

通过合理选择着色器,可以平衡渲染效果和性能需求,实现丰富的视觉表现。

(2) 自定义 Effect

如果你在项目中创建了自定义的 Effect 文件(.effect),它们也会出现在下拉选项中。自定义 Effect 可以实现:

  • 特殊光照效果(如卡通渲染、边缘光)。
  • 屏幕后处理效果(如模糊、色调映射)。
  • 自定义着色逻辑(如水波纹、溶解效果)。

2. Effect 选项的核心参数

选择不同的 Effect 后,材质的属性面板会显示对应的可配置参数。以下是常见参数的说明:

(1) 基础参数

  • Albedo(基础颜色)
    • 定义物体的基础颜色或纹理。
    • 适用于 builtin-standardbuiltin-unlit
  • Metallic(金属度)
    • 控制物体表面的金属质感(0 = 非金属,1 = 金属)。
    • 仅适用于 builtin-standard
  • Roughness(粗糙度)
    • 控制物体表面的光滑程度(0 = 光滑,1 = 粗糙)。
    • 仅适用于 builtin-standard
  • Normal Map(法线贴图)
    • 添加细节凹凸效果,增强表面质感。
    • 适用于 builtin-standard

(2) 光照相关参数

  • Emissive(自发光)
    • 定义物体自身的发光颜色或纹理。
    • 适用于需要发光效果的物体(如灯箱、火焰)。
  • Ambient Occlusion(环境光遮蔽)
    • 增强物体表面的阴影细节。
    • 适用于 builtin-standard

(3) 自定义参数

  • 如果 Effect 文件中定义了自定义参数(如 _Time_Color),它们会出现在材质属性面板中。
  • 例如,自定义 Effect 中可以定义一个 _WaveSpeed 参数来控制水波纹的流动速度。

3. 如何选择合适的 Effect

  • 3D 模型
    • 使用 builtin-standard,并配置金属度、粗糙度、法线贴图等参数。
  • 2D 精灵
    • 使用 builtin-sprite,并配置颜色、透明度等参数。
  • UI 或无光照效果
    • 使用 builtin-unlit,避免不必要的光照计算。
  • 特殊效果
    • 创建自定义 Effect,并通过 Shader 代码实现。

4. 自定义 Effect 的编写

如果内置 Effect 无法满足需求,可以创建自定义 Effect 文件(.effect)。

  • 说明
    • 这个 Effect 会将所有非透明像素的颜色替换为 _ReplaceColor
    • 在材质中,你可以通过下拉选项选择这个自定义 Effect,并调整 _ReplaceColor 参数。

5. 常见问题

  • 为什么下拉选项中没有我的自定义 Effect?
    • 确保自定义 Effect 文件位于项目的 assets 目录下,且文件名以 .effect 结尾。
    • 确保 Effect 文件的语法正确(可以通过 Cocos Creator 的开发者工具检查错误)。
  • 如何调试自定义 Effect?
    • 使用 Cocos Creator 的 "开发者工具" 查看 Shader 编译错误。
    • 简化 Effect 代码,逐步排查问题。

总结

  • Effect 的下拉选项决定了材质的渲染行为和可配置参数。
  • 内置 Effect 适用于常见需求,自定义 Effect 适用于特殊效果。
  • 选择 Effect 时,应根据物体的类型(3D/2D)和渲染需求(光照/无光照)来决定。
  • 自定义 Effect 需要编写 Shader 代码,并通过材质属性面板暴露可配置参数。

通过合理选择和配置 Effect,你可以实现丰富的视觉效果,提升游戏的品质和表现力。

相关推荐
寻找优秀的自己1 个月前
Cocos Creator 3.8.5 构建依赖环境配置文档
cocos
野生猿rang2 个月前
游戏开发之Cocos3着色器/shader快速入门
shader·cocos
aqiu~4 个月前
零基础学CocosCreator·第九季-网络游戏同步策略与ESC架构
cocos
寻找优秀的自己4 个月前
Cocos Creator 3.8 2D 游戏开发知识点整理
cocos
adminwxs5 个月前
【Cocos TypeScript 零基础 7.1】
前端·javascript·typescript·cocos
la_vie_est_belle6 个月前
《Cocos Creator游戏实战》非固定摇杆实现原理
游戏·cocos creator·游戏开发·cocos·非固定摇杆
末零7 个月前
Cocos编辑器
cocos
jc_caterpillar7 个月前
Cocos使用精灵组件显示相机内容
cocos
一丝晨光8 个月前
Web技术简史、前后端分离、游戏
前端·javascript·css·游戏·unity·前后端分离·cocos