Поддержка смешанных материалов / текстур с использованием GLTF - PullRequest
Новая
       15

Поддержка смешанных материалов / текстур с использованием GLTF

1 голос
/ 31 марта 2019

Прежде чем приступить к решению проблемы, хочу подчеркнуть, что далеко не эксперт, когда речь заходит о методах трехмерного моделирования, текстурирования и рендеринга.Я знаю некоторые основы, но, пожалуйста, дайте мне знать, если мой подход к этому является неправильным.

Кроме того, простите за отсутствие встроенных изображений.StackOverflow требует, чтобы я сначала заработал 10 репутации ...

Проблема

В настоящее время я работаю над проектом, включающим конвейер, в котором модели создаются в Blender (2.80 Beta) , экспортируется как GLTF с использованием этих настроек экспорта , а затем импортируется в three.js 0.102.1 .Это прекрасно работает для большинства моделей.Однако, когда я хочу экспортировать свою модель местности, материалы не экспортируются (или, возможно, не импортируются), как ожидалось.

Пример изображения проблемы

С тех поррельеф, предпочтительнее использовать несколько текстур (или лучше материалов), смешивая их там, где они пересекаются.Конечно, это можно сделать, используя одну гигантскую текстуру для всей местности, но прелесть использования нескольких текстур в том, что вы просто повторяете их по всей местности и используете маску для определения смешивания.Вы сохраняете высокий уровень детализации, не создавая массивную единственную текстуру.

Почему я считаю, что GLTF является узким местом

Это не Блендер:

В Blender карта выглядитмелкие и смешанные материалы, как и предполагалось:
Смешивание травы и грязи

Используя следующую настройку узла:
График узла материала

Это не three.js:

Я создал подобную настройку материала в three.js, используя NodeMaterials: 

// MATERIAL
let mtl = new THREE.StandardNodeMaterial();
mtl.roughness = new THREE.FloatNode( .9 );
mtl.metalness = new THREE.FloatNode( 0 );

function createUv(scale, offset) {
    let uvOffset = new THREE.FloatNode( offset || 0 );
    let uvScale = new THREE.FloatNode( scale || 1 );

    let uvNode = new THREE.UVNode();
    let offsetNode = new THREE.OperatorNode(
        uvOffset,
        uvNode,
        THREE.OperatorNode.ADD
    );
    let scaleNode = new THREE.OperatorNode(
        offsetNode,
        uvScale,
        THREE.OperatorNode.MUL
    );

    return scaleNode;
}

let grass = new THREE.TextureNode( getTexture("grass"), createUv(35) );
let dirt = new THREE.TextureNode( getTexture("dirt"), createUv(35) );
let mask = new THREE.TextureNode( getTexture("mask"), createUv() );
let maskAlphaChannel = new THREE.SwitchNode(mask, "w");
let blend = new THREE.Math3Node(
    grass,
    dirt,
    maskAlphaChannel,
    THREE.Math3Node.MIX
);
mtl.color = blend;
mtl.normal = new THREE.NormalMapNode(
    new THREE.TextureNode( getTexture("dirtNormal"), createUv(35) )
);

let normalMask = new THREE.OperatorNode(
    new THREE.TextureNode( getTexture("mask"), createUv() ),
    new THREE.FloatNode(1),
    THREE.OperatorNode.MUL
);

mtl.normalScale = normalMask;

// build shader
mtl.build();

// set material
return mtl;

, что приводит к следующей, довольно прилично выглядящей местности (этов моем проекте three.js):
Правильно текстурированная местность
Правильное смешивание

Так что я думаю, что это GLTF?

OfКонечно, это может быть экспортер или импортер , который здесь не работает.

  • Импорт GLTF обратно в Blender дает тот же результат, что и three.js (черная местностьс белыми бликами, куда должна была попасть грязь), поэтому я сомневаюсь, что это проблема.
  • Я действительно в неведении, когда дело доходит до экспорта, поэтому проблема может заключаться здесь.

Кроме того, когда я пытался прочитать и понять спецификацию GLTF 2.0, я ничего не увиделв спецификациях материалов или текстур, которые допускали смешивание или смешивание любого вида.
Я также столкнулся с расширением KHR_technique_webgl, которое потенциально могло бы решить эту проблему, хотя я не уверен в специфике.

Заключение

Поскольку я действительно хотел бы избежать жестко запрограммированного решения или использования одной гигантской текстуры, GLTF все равно будет для меня подходящим вариантом.Итак, я что-то упустил в своем конвейере?Возможно ли использовать GLTF в этом случае в данный момент?Есть ли в работах что-нибудь, что поддерживало бы такие материалы?

Мы будем очень признательны за любые идеи.Спасибо.

Дополнительные ссылки:

1 Ответ

0 голосов
/ 31 марта 2019

К сожалению, нет формата, в который вы можете экспортировать, который сохранит пользовательский граф узлов из Blender и поместит его в движок реального времени, на момент написания этой статьи.Все, что вы сможете сделать, - это одна текстура на сокет Principled BSDF.В экспортере glTF есть опция, включающая преобразования текстур (вращение, масштабирование, повтор), если это помогает.

Для чего-то настраиваемого, подобного этому, я бы предложил добавить имена и настраиваемые свойства (текстовые или числовые) вваши материалы.Если в настройках экспорта включена опция «Экспорт пользовательских свойств / дополнений», они будут переданы в три js как material.userData, и вы сможете восстановить граф узлов из этого.

...