我需要将 THREE.Mesh 的实例定向为始终面向相机。我知道我可以只使用 [THREE.Mesh].lookAt() 方法,但我正在尝试更多地处理我的 GLSL 部分,并希望能够在顶点着色器中执行此操作。
我已读完NeHe 的广告牌教程,这对我来说很有意义。好吧,除了将这些方向向量应用于每个顶点的位之外。
我觉得我已经非常接近实现这一目标,但就目前而言,我的顶点着色器看起来更像是 90 年代的狂欢视频,而不是广告牌:
到目前为止小提琴的进展:http://jsfiddle.net/RZ4XE/2/
下面是我的顶点着色器(片段着色器仅分配 vec4 颜色)。它利用了 THREE.js 提供的各种默认制服/属性,如下所示,以防不熟悉 THREE.js 的人阅读本文:)
-
cameraPosition
(向量3),
-
position
(顶点位置,另一个 vec3),
-
projectionMatrix
(相机投影矩阵,mat4),
-
modelViewMatrix
(camera.matrixWorldInverse * object.matrixWorld, mat4)
void main() {
vec3 look = normalize( cameraPosition - position );
if( length( look ) == 0.0 ) {
look.z = 1.0;
}
vec3 up = vec3( 0.0, 1.0, 0.0 );
vec3 right = normalize( cross( up, look ) );
up = normalize( cross( look, right ) );
mat4 transformMatrix;
transformMatrix[0][0] = right.x;
transformMatrix[0][1] = right.y;
transformMatrix[0][2] = right.z;
transformMatrix[1][0] = up.x;
transformMatrix[1][1] = up.y;
transformMatrix[1][2] = up.z;
transformMatrix[2][0] = look.x;
transformMatrix[2][1] = look.y;
transformMatrix[2][2] = look.z;
gl_Position = projectionMatrix * modelViewMatrix * transformMatrix * vec4( position, 1.0 );
}
提前致谢。
显然这有效:
gl_Position = projectionMatrix * (modelViewMatrix * vec4(0.0, 0.0, 0.0, 1.0) + vec4(position.x, position.y, 0.0, 0.0));
我实际上想弄清楚如何制作轴对齐的广告牌。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)