Babylon.js：实例的渲染顺序

Question

目前我正在尝试 Babylon.js，因为到目前为止我只使用过 Threejs，并且多次向我推荐过 Babylon.js。

我开发了一个回合制策略游戏，其中玩家的游戏区域由不同材料（白色、黑色、棕色）的各个区域组成。

使用 Threejs，我将具有相同材质的不同字段合并到一个对象中，将绘制调用减少到 3。我在 Babylon.js 文档中读到，使用实例非常简单。这就是我以这种方式实现游戏场的原因：

加载以 gltf/glb 格式使用搅拌机导出的场网格。克隆它 3 次以应用 3 种不同的材料

import { SceneLoader, StandardMaterial, Color3, Vector3 } from 'babylonjs';

import 'babylonjs-loaders';

...

SceneLoader.ImportMesh('', 'models/', 'field.glb, scene, group => {

    group.forEach((mesh, i) => {

        if (mesh.name !== '__root__') {

            let brown = mesh.clone('FIELD_BROWN');

            let brownMaterial = new StandardMaterial("brownField", scene);

            brownMaterial.diffuseColor = new Color3.FromHexString("#824529");

            brown.material = brownMaterial;

            brown.isVisible = false;

            let black = mesh.clone('FIELD_BLACK');

            let blackMaterial = new StandardMaterial("blackField", scene);

            blackMaterial.diffuseColor = new Color3.FromHexString("#3E211B");

            black.material = blackMaterial;

            black.isVisible = false;

            mesh.name = 'FIELD_WHITE';

            let whiteMaterial = new StandardMaterial("whiteField", scene);

            whiteMaterial.diffuseColor = new Color3.FromHexString("#F8DBAF");

            mesh.material = whiteMaterial;

            mesh.isVisible = false;

        } else {

            mesh.isVisible = false;

        }

    });

});

在另一个函数中构建游戏场

import { Vector3, Color3 } from 'babylonjs';

...

playerField.grid.forEach((cell, i) => {

    let pivot;            });

生成的场景如下所示：

当我调整窗口大小时，所有棕色和黑色字段都消失了。

我也在控制台中看到了这个警告（256 次）：

[.WebGL-0x7fe20b9b3400]GL 错误：GL_INVALID_OPERATION：glDrawElementsInstancedANGLE：尝试访问属性 4 中超出范围的顶点

我是否使用了错误的概念，或者我是否对使用 Babylon.js 的工作方式有错误的心理模型？我认为这可能是渲染奥德的问题，但我对警告和消失的字段感到非常困惑。感谢您的任何帮助！