THREE.js - 广告牌顶点着色器答案

【问题标题】：THREE.js - Billboard Vertex ShaderTHREE.js - 广告牌顶点着色器
【发布时间】：2015-05-07 17:51:40
【问题描述】：

我需要将 THREE.Mesh 的一个实例定向为始终面向相机。我知道我可以只使用 [THREE.Mesh].lookAt() 方法，但我正在尝试更多地处理我的 GLSL 切片，并希望能够在顶点着色器中执行此操作。

我已经阅读了NeHe's Billboarding tutorial，这对我来说很有意义。好吧，除了将这些方向向量应用于每个顶点的位之外。

我觉得我已经接近完成这项工作了，但就目前而言，我的顶点着色器看起来更像是 90 年代的狂欢视频，而不是广告牌：

到目前为止的进展小提琴：http://jsfiddle.net/RZ4XE/2/

下面是我的顶点着色器（片段着色器只是分配了一个 vec4 颜色）。它使用了 THREE.js 提供的各种默认制服/属性，如下所列，以防不熟悉 THREE.js 的人阅读此内容:)

cameraPosition (vec3),
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 );
}

提前致谢。

【问题讨论】：

只需这样做：mesh.quaternion = camera.quaternion; 并使用任何 three.js 材料（jsfiddle.net/RZ4XE/3）...或使用 THREE.Sprite。
谢谢 - 这确实解决了问题，但它对我掌握 GLSL 和完全理解矩阵变换没有帮助。
是的，我知道.... 只是向您展示如何让 three.js 为您完成工作。 :-)
是的，我很感激 :)

标签： javascript opengl-es three.js glsl webgl

【解决方案1】：

显然这是可行的：

gl_Position = projectionMatrix * (modelViewMatrix * vec4(0.0, 0.0, 0.0, 1.0) + vec4(position.x, position.y, 0.0, 0.0));

我实际上是想弄清楚如何制作轴对齐的广告牌。

【讨论】：