Резюме
Я пытаюсь применить карту смещения (карту высоты) к довольно простому объекту (шестиугольная плоскость), и у меня есть некоторые неожиданные результаты. Я использую оттенки серого, и поэтому у меня сложилось впечатление, что моя карта высот должна влиять только на значения Z моей сетки. Однако карта смещения, которую я создал, растягивает сетку в плоскостях X и Y. Кроме того, похоже, что он не использует созданное мной UV-отображение, к которому успешно применяются все остальные текстуры.
Модель и UV-карта
Вот эталонные изображения моего шестиугольного меша и соответствующей ему UV-карты в Blender.
Диффузные текстуры и текстуры смещения
Это текстуры карты диффузии и смещения, которые я применяю к своей сетке через Three.JS.
Рендеры
Когда я визуализирую плоскость без карты смещения, вы можете видеть, что шестиугольная плоскость остается внутри линий. Однако, когда я добавляю карту смещения, она явно влияет на положение вершин по осям X и Y, а не только на Z, хорошо расширяя плоскость по линиям.
Код
Вот соответствующий код Three.js:
// Textures
var diffuseTexture = THREE.ImageUtils.loadTexture('diffuse.png', null, loaded);
var displacementTexture = THREE.ImageUtils.loadTexture('displacement.png', null, loaded);
// Terrain Uniform
var terrainShader = THREE.ShaderTerrain["terrain"];
var uniformsTerrain = THREE.UniformsUtils.clone(terrainShader.uniforms);
//uniformsTerrain["tNormal"].value = null;
//uniformsTerrain["uNormalScale"].value = 1;
uniformsTerrain["tDisplacement"].value = displacementTexture;
uniformsTerrain["uDisplacementScale"].value = 1;
uniformsTerrain[ "tDiffuse1" ].value = diffuseTexture;
//uniformsTerrain[ "tDetail" ].value = null;
uniformsTerrain[ "enableDiffuse1" ].value = true;
//uniformsTerrain[ "enableDiffuse2" ].value = true;
//uniformsTerrain[ "enableSpecular" ].value = true;
//uniformsTerrain[ "uDiffuseColor" ].value.setHex(0xcccccc);
//uniformsTerrain[ "uSpecularColor" ].value.setHex(0xff0000);
//uniformsTerrain[ "uAmbientColor" ].value.setHex(0x0000cc);
//uniformsTerrain[ "uShininess" ].value = 3;
//uniformsTerrain[ "uRepeatOverlay" ].value.set(6, 6);
// Terrain Material
var material = new THREE.ShaderMaterial({
uniforms:uniformsTerrain,
vertexShader:terrainShader.vertexShader,
fragmentShader:terrainShader.fragmentShader,
lights:true,
fog:true
});
// Load Tile
var loader = new THREE.JSONLoader();
loader.load('models/hextile.js', function(g) {
//g.computeFaceNormals();
//g.computeVertexNormals();
g.computeTangents();
g.materials[0] = material;
tile = new THREE.Mesh(g, new THREE.MeshFaceMaterial());
scene.add(tile);
});
Гипотеза
В настоящее время я жонглирую тремя вариантами того, почему это может пойти не так:
- Карта UV не применяется к моей карте смещения.
- Я неправильно сделал карту смещения.
- Я пропустил важный шаг в процессе, который зафиксировал бы смещение только по оси Z.
И, конечно же, секретный вариант № 4, который не является ни одним из вышеперечисленных, и я просто правда понятия не имею, что делаю. Или любую смесь из вышеперечисленного.
Живой пример
Вы можете просмотреть живой пример здесь.
Если кто-нибудь, кто знает больше по этому вопросу, может направить меня, я был бы очень благодарен!
Редактировать 1. В соответствии с предложением я закомментировал computeFaceNormals() и computeVertexNormals(). Несмотря на небольшое улучшение, сетка все еще деформируется.
