THREE.js - 广告牌顶点着色器 [英] THREE.js - Billboard Vertex Shader

问题描述

我需要将THREE.Mesh的实例定位为始终面向相机。我知道我可以使用[THREE.Mesh] .lookAt（）方法，但我正在尝试更多地使用我的GLSL印章，并且希望能够在顶点着色器中执行此操作。

I have the need to orientate an instance of THREE.Mesh to always face the camera. I know I could just use the [THREE.Mesh].lookAt() method, but I'm trying to work on my GLSL chops a bit more and want to be able to do this in a vertex shader.

我已阅读 NeHe的Billboarding教程 ，这对我来说很有意义。好吧，除了将这些方向向量应用到每个顶点之外的所有位置。

I've read through NeHe's Billboarding tutorial, and it makes sense to me. Well, all apart from the bit where one applies these orientation vectors to each vertex.

我觉得我非常接近于使这个工作，但是因为它在于那一刻，我的顶点着色器看起来更像是一个90年代的狂欢视频，而不是一个广告牌：

I feel like I'm very close to getting this working, but as it stands at the moment, my vertex shader is looking more like a 90s rave video than a billboard:

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

Progress so far fiddle: http://jsfiddle.net/RZ4XE/2/

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

Below is my vertex shader (the fragment shader just assigns a vec4 color). It's making use of various default uniforms / attributes that THREE.js provides, listed below just in case someone unfamiliar with THREE.js is reading this :)

• cameraPosition （vec3），


• position （顶点位置，另一个vec3），


• projectionMatrix （相机的projectionMatrix，mat4），



• modelViewMatrix （camera.matrixWorldInverse * object.matrixWorld，mat4）

• cameraPosition (vec3),
• position (vertex position, another vec3),
• projectionMatrix (camera's 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));

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

I'm actually trying to figure out how to do axis aligned billboards.

这篇关于THREE.js - 广告牌顶点着色器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！