Статьи

Babylon.js: использование нескольких материалов

Май 30, 2018

В предыдущей статье мы говорили об источниках света и о том, как они влияют на внешний вид объекта. Сегодня мы поговорим о более сложной концепции: мультиматериалы.

В другой статье мы видели, что объекты используют материалы, чтобы определить (в сочетании с источниками света), как они выглядят.

Мультиматериал используется для нанесения различных материалов на разные части одного и того же объекта, как вы можете видеть на этом снимке экрана (с www.babylonjs.com ):

образ

Чтобы иметь возможность определять мультиматериалы, вы должны сначала определить некоторые стандартные материалы:

    var material0 = new BABYLON.StandardMaterial("mat0", scene);
    material0.diffuseColor = new BABYLON.Color3(1, 0, 0);
    material0.bumpTexture = new BABYLON.Texture("normalMap.jpg", scene);

    
    var material1 = new BABYLON.StandardMaterial("mat1", scene);
    material1.diffuseColor = new BABYLON.Color3(0, 0, 1);

    
    var material2 = new BABYLON.StandardMaterial("mat2", scene);
    material2.emissiveColor = new BABYLON.Color3(0.4, 0, 0.4);

Затем вы можете создать мультиматериал, чтобы собрать их всех:

var multimat = new BABYLON.MultiMaterial("multi", scene);
multimat.subMaterials.push(material0);
multimat.subMaterials.push(material1);
multimat.subMaterials.push(material2);

Теперь вы можете влиять на мульти-материал для вашей сетки:

var sphere = BABYLON.Mesh.CreateSphere("Sphere0", 16, 3, scene);
sphere.material = multimat;

Но если вы сделаете это, вы увидите, что сфера будет использовать только первый субматериал (красный с неровной поверхностью). Это потому, что по умолчанию сетка предназначена для использования только одного материала.

Вы можете указать, какая часть сетки использует определенный материал, используя свойство subMeshes . По умолчанию каждая сетка состоит только из одной подсетки, которая покрывает всю сетку.

Чтобы определить несколько подмеш, вы просто должны использовать этот код:

sphere.subMeshes = [];
var verticesCount = sphere.getTotalVertices();

sphere.subMeshes.push(new BABYLON.SubMesh(0, 0, verticesCount, 0, 900, sphere));
sphere.subMeshes.push(new BABYLON.SubMesh(1, 0, verticesCount, 900, 900, sphere));
sphere.subMeshes.push(new BABYLON.SubMesh(2, 0, verticesCount, 1800, 2088, sphere));

В этом случае у нас будет 3 части:

  • Один, начиная с индекса 0 до индекса 900
  • Один, начиная с индекса 900 до индекса 1800
  • Один, начиная с индекса 1800 до индекса 3880

Подэлемент определяется с помощью:

  • Индекс материала для использования (этот индекс используется для поиска правильного материала внутри коллекции subMaterials для нескольких материалов)
  • Индекс первой вершины и количество используемых вершин (например, для оптимизации вещей для столкновений)
  • Индекс первого используемого индекса и количество индексов
  • Родительская сетка

Таким образом, с помощью приведенного ниже кода мы можем использовать первый материал в верхней части сферы, второй материал в средней части и последний материал в нижней части сферы.

Что дальше ?

Если вы хотите углубиться в babylon.js , вот несколько полезных ссылок:

37
Share: