Текстурирование по краям прямоугольной рамки - PullRequest
Новая
       74

Текстурирование по краям прямоугольной рамки

0 голосов
/ 19 декабря 2018

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

enter image description here

Моя первая попытка (левая картинка) с текстурой 4x4 с использованием линейной фильтрации.Вот код: 

// Normal direction branching
// M: coordinates, MN: normals of the model, sX,sY,sZ. size of the box
if( (abs(MN.x) > abs(MN.y)) && (abs(MN.x) > abs(MN.z)) ) {
  // X axis
  texCoords = M.yz / vec2(sY, sZ);
} else if( (abs(MN.z) > abs(MN.x)) && (abs(MN.z) > abs(MN.y)) ) {
  // Z axis
  texCoords = M.xy / vec2(sX, sY);
} else {
  // Y axis
  texCoords = M.xz / vec2(sX, sZ);
}
texCoords += vec2(0.5);

Я недоволен этим результатом из-за хорошо видимого артефакта по бокам коробки.После этого я попытался использовать функцию расстояния и текстуру 2x2 (центральное изображение), но я не могу параметризовать расстояние отображаемой текстуры от краев моего блока.Вот код моей второй попытки: 

float squared(vec2 pos) {
  float at = (atan(pos.x, pos.y) + PI) / (2.0 * PI);
  float st = floor(at * 4.0 + 0.5) / 4.0;
  float dist = length(pos) * cos((at - st) * 2.0 * PI);
  return smoothstep(0.3, 1.0, dist);
}
// Here goes the same direction branching as above
texCoords *= squared(texCoords);
texCoords += vec2(0.5);

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

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

Как я могу отобразить координаты текстуры вокруг граней моих блоков до определенного расстояния от краев?

1 Ответ

0 голосов
/ 02 января 2019

У этого вопроса есть одно возражение, поэтому я публикую здесь то, чего я достиг.

Это мой окончательный результат: 

float borderSize = 0.5;
vec2 edgeDist;
float insideDist;
float outsideDist;
float dist;
if( (abs(MN.x) > abs(MN.y)) && (abs(MN.x) > abs(MN.z)) ) {
    // X major axis
    edgeDist = abs(M.zy) - 0.5 * vec2(sZ, sY);
} else if( (abs(MN.z) > abs(MN.x)) && (abs(MN.z) > abs(MN.y)) ) {
    // Z major axis
    edgeDist = abs(M.xy) - 0.5 * vec2(sX, sY);
} else {
    // Y major axis
    edgeDist = abs(M.zx) - 0.5 * vec2(sZ, sX);
}
insideDist = max(edgeDist.x, edgeDist.y);
outsideDist = max(insideDist, borderSize);
dist = (outsideDist - insideDist) / (2.0 * borderSize);
eCoords = vec2(smoothstep(0.1, 1.0, dist));

Я все еще должен понять, возможно лиизбегайте разветвления оси, но, по крайней мере, я рад этому результату:

enter image description here

BTW:

первый пример этогоpicture использует текстуру 2x2, упомянутую в моем вопросе, в то время как второй пример использует ту же текстуру, которая перевернута по вертикали, и что голубоватый - это цвет материала, который протыкает прозрачную часть текстуры.

...