Question

我为停车灯创建了一个发光效果，并找到了一个可以始终面向相机的着色器：

uniform vec3 viewVector;
uniform float c;
uniform float p;
varying float intensity;
void main() {
    vec3 vNormal = normalize( normalMatrix * normal );
    vec3 vNormel = normalize( normalMatrix * -viewVector );
    intensity = pow( c - dot(vNormal, vNormel), p );
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

这个解决方案很简单，几乎可以使用。它对相机的运动做出反应，这将是很棒的。但这个元素是汽车的孩子。汽车本身在移动，当它旋转时，材料停止直接指向相机。

我不想使用SpritePlugin或LensFlarePlugin，因为它们会使我的游戏速度降低20fps，所以我会坚持使用这种轻量级解决方案。

我找到了Direct 3d的解决方案，您必须从转换矩阵中删除旋转数据，但我不知道如何在THREE.js中执行此操作

我想这不是通过汽车转换添加计算，而是必须有一种简化此着色器的方法。

如何简化此着色器以使材质始终面向相机？

从以下链接：＆＃34;要进行球形广告牌，只需通过设置标识矩阵＆＃34;即可删除所有旋转。怎么做THREE.js中的ShaderMaterial？ http://www.geeks3d.com/20140807/billboarding-vertex-shader-glsl/

我认为这里的问题是在ShaderMaterial传递到着色器之前拦截转换矩阵，但我不确定。

可能不相关，但这里也是片段着色器：

uniform vec3 glowColor;
varying float intensity;
void main() {
    vec3 glow = glowColor * intensity;
    gl_FragColor = vec4( glow, 1.0 );
}

编辑：目前我找到了一种解决方法，即通过设置相反的四元数来消除父对象的轮播影响。不完美，它发生在CPU而不是GPU

this.quaternion._x = -this.parent.quaternion._x;
this.quaternion._y = -this.parent.quaternion._y;
this.quaternion._z = -this.parent.quaternion._z;
this.quaternion._w = -this.parent.quaternion._w;

Answer 1

您正在寻找广告牌的实施吗？（让2D精灵始终面对相机）如果是这样，你需要做的就是：

"vec3 billboard(vec2 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 p = right * v.x + up * v.y;", 
    "   return p;",
"}"

v是距离中心的偏移量，基本上是面向z轴的平面中的4个顶点。例如。 (1.0, 1.0), (1.0, -1.0), (-1.0, 1.0), and (-1.0, -1.0).

像这样使用它：

"vec3 worldPos = billboard(a_offset, u_view);"
// then do whatever else.

THREE.JS GLSL精灵始终在镜头前

1 个答案: