THREE.js - 广告牌顶点着色器 [英] THREE.js - Billboard Vertex Shader
问题描述
我需要将 THREE.Mesh 的一个实例定向为始终面向相机.我知道我可以只使用 [THREE.Mesh].lookAt() 方法,但我正在尝试更多地处理我的 GLSL 切片,并希望能够在顶点着色器中执行此操作.
我已经通读了NeHe 的广告牌教程,这对我来说很有意义.好吧,除了将这些方向向量应用于每个顶点的位之外.
我觉得我已经非常接近完成这项工作了,但就目前而言,我的顶点着色器看起来更像是 90 年代的狂欢视频,而不是广告牌:
到目前为止的进展小提琴:http://jsfiddle.net/RZ4XE/2/>
下面是我的顶点着色器(片段着色器只分配了一个 vec4 颜色).它利用了 THREE.js 提供的各种默认统一/属性,下面列出,以防不熟悉 THREE.js 的人正在阅读:)
cameraPosition
(vec3),position
(顶点位置,另一个vec3),projectionMatrix
(相机的projectionMatrix,mat4),modelViewMatrix
(camera.matrixWorldInverse * object.matrixWorld, mat4)void main() {vec3 look = normalize( cameraPosition - position );如果(长度(看)== 0.0){看.z = 1.0;}vec3 up = vec3( 0.0, 1.0, 0.0 );vec3 right = normalize( cross( up, look ) );up = normalize(cross(look, right));mat4 变换矩阵;变换矩阵[0][0] = right.x;变换矩阵[0][1] = right.y;变换矩阵[0][2] = right.z;变换矩阵[1][0] = up.x;变换矩阵[1][1] = up.y;变换矩阵[1][2] = up.z;变换矩阵[2][0] = look.x;变换矩阵[2][1] = look.y;变换矩阵[2][2] = look.z;gl_Position = 投影矩阵 * 模型视图矩阵 * 变换矩阵 * vec4(位置,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 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.
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.
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:
Progress so far fiddle: http://jsfiddle.net/RZ4XE/2/
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
(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 ); }
Thanks in advance.
Apparently this works:
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屋!