如何在Three.JS中实现实例广告牌？

Question

我需要一个实例网格让所有实例都面向相机。

uniform vec2 size;
uniform vec3 center;

vec3 billboard(vec3 v, mat4 view) {
    vec3 up = vec3(view[0][1], view[1][1], view[2][1]);
    vec3 right = vec3(view[0][0], view[1][0], view[2][0]);
    vec3 pos = center + right * v.x * size.x + up * v.y * size.y;
    return pos;
}

void main() {
   vec3 worldPos = billboard(position, viewMatrix);
   gl_Position = projectionMatrix * modelViewMatrix * vec4(worldPos, 1.0);
}

这是我目前用来渲染一个广告牌的代码。 这不会显示任何内容。 在最后一行的vec4构造函数中传递'position'会按预期呈现形状，所以我知道计算有问题。

我一直在尝试遵循这个教程： http ： //www.opengl-tutorial.org/intermediate-tutorials/billboards-particles/billboards/ 1，特别是解决方案＃2，但是，我没有太多运气搞清楚这一点。

这里的答案看起来也很有希望，但我无法做任何事情。 THREE.JS GLSL精灵总是前置于相机 1

这个问题的解决方案： THREE.js - Billboard Vertex Shader在正确的轨道上，但对我的用例不准确。

我的理解是，在对几何体或网格进行任何平移之后，需要发送中心位置，以便在世界空间中进行正确的计算。

Three.js在顶点着色器中传递相机位置。 我在想根据摄像机位置和广告牌中心位置之间的减法，可以对每个顶点应用一些变换。 这会对性能产生影响吗？

最后，假设这将是实例，使用Sprite对象或网格并将LookAt设置到摄像机位置每帧都不是一个选项。

谢谢你的帮助！

Answer 1

我刚刚解决了！

不同之处在于我不希望所有广告牌都与摄像机前向矢量平行。 在大多数情况下看起来很好，但是在广告牌不靠近摄像机前向矢量的情况下，由于广告牌面向摄像机位置以外的其他位置，所以看起来不对。

顶点着色器：

uniform vec2 size;
uniform vec3 center;

vec3 look = normalize(cameraPosition - center);
vec3 cameraUp = vec3(view[0][1], view[1][1], view[2][1]);
vec3 billboardRight = cross(cameraUp, look);
vec3 billboardUp = cross(look, billboardRight);
vec3 pos = center + billboardRight * v.x * size.x + billboardUp * v.y * size.y;
return pos;

JS：

        const fullWidth = 0.75;
        const fullHeight = 0.25;

        containerShape.moveTo(0, 0);
        containerShape.lineTo(0, fullHeight);
        containerShape.lineTo(fullWidth, fullHeight);
        containerShape.lineTo(fullWidth, 0);
        containerShape.lineTo(0, 0);

        const containerGeo = new ShapeBufferGeometry(containerShape);
        containerGeo.translate(-fullWidth / 2, -fullHeight / 2, 0);

        const containerMaterial = new ShaderMaterial({
            uniforms: {
                size: {
                    value: new Vector2(fullWidth, fullHeight),
                },
                center: {
                    value: new Vector3(1, 0.5, 1),
                },
            },
        });

这应该是一切。 尽管缺少图像和断开链接，但是： http ： //nehe.gamedev.net/article/billboarding_how_to/18011/让我超越了终点线。

编辑4/12/19我发现了一个非常严重的神器与上述解决方案： http ： //prntscr.com/nayjic 。 如果您愿意接受沿一个轴固定广告牌，下面的代码可以解决问题。 如果不将广告牌向上矢量设置为固定值，我无法修复故障。

如果摄像头位于广告牌上方（ http://prntscr.com/naz4iy ），那么您可以更轻松地告诉广告牌并非真正“看”相机。 如果有人有解决方案，请发布！

            vec3 billboard(vec3 v, mat4 view) {
                vec3 look = cameraPosition - instanceOffset;
                look.y = 0.0;
                look = normalize(look);
                // vec3 cameraUp = vec3(view[0][1], view[1][1], view[2][1]);
                vec3 billboardUp = vec3(0, 1, 0);
                vec3 billboardRight = cross(billboardUp, look);
                vec3 pos = instanceOffset + billboardRight * v.x * size.x + billboardUp * v.y * size.y;
                return pos;
            }