У меня есть текстура, загруженная в three.js, затем переданная в шейдеры. В вершинном шейдере я вычисляю нормаль и сохраняю в переменную вектор uv.
<script id="vertexShader" type="x-shader/x-vertex">
varying vec3 N,P;
varying vec2 UV;
void main() {
gl_Position= projectionMatrix * modelViewMatrix * vec4(position,1.0);
P= position;
N= normalMatrix * vec3(normal);
UV= uv;
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
varying vec3 N,P;
varying vec2 UV;
uniform sampler2D texture;
void main() {
gl_FragColor= texture2D(texture,UV);
}
</script>
Как вычислить векторы T и B?
textures
glsl
uv-mapping
three.js
Рами Аль Зухури
источник
источник
Ответы:
Прежде всего, для каждой трехмерной вершины существуют бесконечные касательные и двух касательные векторы. Изображение ниже объясняет, почему существует бесконечное количество касательных пространств для каждой вершины, касательная и битангенс могут иметь любое направление в показанной плоскости.
Таким образом, чтобы правильно рассчитать наиболее полезное 1 касательное пространство, мы хотим, чтобы наше касательное пространство было выровнено так, чтобы ось x (касательная) соответствовала направлению u на карте рельефа, а ось y (битангенс) соответствовала направлению v на карте рельефа у нас уже должна быть нормаль вершины, которая уже соответствует направлению Z в касательном пространстве.
(1) наиболее полезно, потому что в конце мы хотим, чтобы нормальные векторы выбирались из текстуры
Это лучше всего объяснить с помощью рисунков, мы хотим, чтобы наше касательное пространство было выровнено, как
(u, v)
показано ниже.Источник изображения, хотя и не строго связан с компьютерной графикой
В компьютерной графике разработчики обычно используют
(u,v)
также известные как текстурные координаты. Мы будем предполагать, что T является касательной, а B является битангенсом иP0
является нашей целевой вершиной, которая является частью треугольника(P0,P1,P2)
.Сначала запомните, что мы хотели сделать, это вычислить тангенс и битанет, чтобы:
Дело в том, что мы уже предположили, что T и B лежат в одной плоскости и теперь соответствуют U и V, если мы можем знать их значения, мы можем скрестить произведение и третий вектор, чтобы построить матрицу преобразования из мира в касательное пространство.
Учитывая, что мы знаем, что любой 2D-вектор может быть записан как линейная комбинация двух независимых векторов 2, и поскольку у нас уже есть точки треугольника (ребра), показанные на изображении выше. Мы можем написать:
(2) на самом деле, именно так получается базисная матрица
Вышеупомянутое уравнение может быть записано в виде матрицы,
Решая уравнение матриц, мы можем определить значения T и B и построить матрицу преобразования.
Полный исходный код на C ++
Полный исходный код и вывод можно найти здесь .
источник