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

我需要定位THREE.MESH的一个实例来始终面对相机。我知道我可以使用[THREE.Mesh] .lookAt（）方法，但是我试图在我的GLSL上进行更多的操作，并希望能够在顶点着色器中做到这一点。THREE.js - 广告牌顶点着色器

我读过NeHe's Billboarding tutorial，这对我很有意义。那么，除了将这些方向向量应用于每个顶点的位之外。

我觉得我很接近得到这方面的工作，但因为它代表的那一刻，我的顶点着色器正在更像是一个狂欢90比视频广告牌：

下面是我的顶点着色器（片段着色器只是指定了vec4的颜色）。它利用各种默认制服/属性是three.js所提供，下面以防万一有人不熟悉three.js所读取该:)

cameraPosition（VEC 3）上市，
position（顶点位置，另一个VEC 3）
projectionMatrix（相机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); 
}

在此先感谢。

来源

2014-02-26 SquareFeet

只要做到这一点：'mesh.quaternion = camera.quaternion;'并使用任何three.js材料（http://jsfiddle.net/RZ4XE/3/）...或使用THREE.Sprite。 – WestLangley

谢谢 - 这确实能解决问题，但它并不能帮助我完成GLSL并充分理解矩阵变换。 – SquareFeet

是的，我知道....只是告诉你如何让three.js为你做这项工作。 :-) – WestLangley

显然，这个工作：

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

实际上，我试图找出如何做轴对准广告牌。

来源

2015-05-07 09:51:40

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

回答

相关问题