Cocos Creator:渲染排序组件

Cocos Creator:渲染排序组件
推荐:将NSDT场景编辑器加入你的3D工具链
3D工具集:NSDT简石数字孪生

渲染排序组件

对于大部分渲染情况来说,默认的排序已经满足需求。但是实际上由于半透明物体的特殊性,我们可能需要手动对这些物体进行排序。对于这种情况,可以使用 渲染排序组件

属性检查器 内点击 添加组件 按钮选择 Sorting 即可添加。

sorting
注意:该组件只对持有 MeshRendererSpriteRenderer 组件的节点生效。

属性

属性说明
Sorting Layer选择 排序图层
通过下拉框选择不同的排序图层,这些图层需要在 项目设置 -> 排序图层 内设置后才可以选择
sortring-layer
Sorting Order在相同图层内的排序优先级

示例

项目设置 -> 排序图层 内添加排序图层 Sorting Layer 1。

setting

按照示例中搭建如下的场景:

default

立方体和球体的材质需要选择使用半透明渲染队列:

technique

添加 Sorting 组件且属性保持默认。

图片需要使用 SpriteRenderer 组件(注意不是 Sprite 组件),着色器需要使用 builtin-sprite-renderer,并添加 Sorting 组件,保持属性默认:

layer1

此时可观察到这些节点的排序方式是按照默认顺序排序。

Sorting Layer 示例

调整后方 SpriteRenderer 节点的 Sorting Layer 如下图:

layer 2

由于自定义的层级是高于立方体和球体的层级 default 的,因此可以观察到下图的结果:

result

Sorting Order 示例

Sorting Order 属性可以调整同一个排序图层内物体渲染的优先级。

场景和上述的示例类似,但是将立方体的 Sorting 组件内的 Sorting Order 属性调整为 1:

order 1

此时,立方体在渲染队列内的优先级是高于球体的,因此可以观察下图的结果:

result

脚本示例

下面的代码演示了如何在运行时修改 Sorting Order 以及 Sorting Layer。

import { _decorator, Component, Sorting, SortingLayers } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('SortingSample')
export class SortingSample extends Component {

    @property(Sorting)
    sorting:Sorting | null = null;

    start() {
        this.sorting.sortingLayer = SortingLayers.getLayerIndexByName("Sorting Layer 1");
        this.sorting.sortingOrder = 1;
    }
}

排序层管理器(SortingLayers) 可以在运行时获取排序图层的名称和索引,但无法在运行时修改。

3D建模学习工作室 翻译整理,转载请注明出处!

上一篇:Cocos Creator:VSCode 着色器插件 (mvrlink.com)

下一篇:Cocos Creator:Billboard 组件 (mvrlink.com)

NSDT场景编辑器 | NSDT 数字孪生 | GLTF在线编辑器 | 3D模型在线转换 | UnrealSynth虚幻合成数据生成器 | 3D模型自动纹理化工具
2023 power by nsdt©鄂ICP备2023000829号