Ich habe eine Textur in three.js geladen und dann an die Shader übergeben. Im Vertex-Shader berechne ich die Normalen und speichere den UV-Vektor in einer Variablen.
<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>
Wie berechne ich die T- und B-Vektoren?
textures
glsl
uv-mapping
three.js
Ramy Al Zuhouri
quelle
quelle
Antworten:
Erstens gibt es für jeden 3D-Scheitelpunkt unendlich viele Tangenten- und Bi-Tangentenvektoren. Das folgende Bild erklärt, warum es für jeden Scheitelpunkt unendlich viele Tangentenräume gibt. Tangente und Bitangente können in der gezeigten Ebene eine beliebige Richtung haben.
Also, um die nützlichste 1 richtig zu berechnen Tangentenraum , möchten wir, dass unser Tangentenraum so ausgerichtet wird, dass die x-Achse (die Tangente) der u-Richtung in der Bump-Map und die y-Achse (Bitangens) der v-Richtung entspricht In der Bump-Map sollten wir bereits eine Normalen des Scheitelpunkts haben, die bereits der Z-Richtung im Tangentenraum entspricht.
(1) am nützlichsten, weil wir am Ende wollen, dass normale Vektoren aus der Textur abgetastet werden
Das lässt sich am besten mit Bildern erklären, wir wollen unseren Tangentenraum wie
(u, v)
unten gezeigt ausgerichtet wird.Quelle des Bildes, obwohl nicht eng mit Computergrafik verbunden
In der Computergrafik verwenden Entwickler normalerweise
(u,v)
auch Texturkoordinaten. Wir nehmen an, dass T die Tangente und B die Bitangente ist undP0
unser Zielscheitelpunkt ist, der Teil des Dreiecks ist(P0,P1,P2)
.Denken Sie zunächst daran, was wir tun wollten, ist, Tangente und Bitanget zu berechnen, die:
Der Punkt ist, dass wir bereits angenommen haben, dass T und B in derselben Ebene liegen und jetzt U und V entsprechen. Wenn wir ihre Werte kennen, können wir das Produkt und den dritten Vektor kreuzen, um eine Transformationsmatrix von der Welt zum Tangentenraum zu konstruieren.
Vorausgesetzt, wir wissen, dass jeder 2D-Vektor als lineare Kombination zweier unabhängiger Vektoren 2 geschrieben werden kann und da wir bereits die im obigen Bild gezeigten Dreieckspunkte (Kanten) haben. Wir können schreiben:
(2) Auf diese Weise wird die Basismatrix abgeleitet
Die obige Gleichung kann in einer Matrixform geschrieben werden,
Durch Lösen der Matrixgleichung können wir T- und B-Werte bestimmen und eine Transformationsmatrix erstellen.
Der vollständige Quellcode in C ++
Den vollständigen Quellcode und die Ableitung finden Sie hier .
quelle