具有修改顶点的平面上的片段着色器 [英] Fragment shader on plane with modified vertices

问题描述

我有一个PlaneGeometry，并且我为顶点随机设置动画以创建随机峰值. 我使用了FragmentShader:

I have a PlaneGeometry and I'm randomly animating the vertices in order to create random spikes. I use this FragmentShader :

void main() {
       vec3 light = vec3(cos(time),sin(time),1.0);
       light = normalize(light);
       float dProd = max(0.0, dot(vNormal, light));
        gl_FragColor = vec4(dProd,dProd,dProd,1.0);
        }

我希望每个尖峰的某些面都被涂成黑色，但我却得到了纯色.我在飞机上放置了一个球体，并应用了相同的着色器:

I expected to have some faces of each spike colored in black, but instead I got a solid color. I placed a Sphere on my plane and applied the same shader:

当我关闭线框时:

不确定我了解飞机上发生了什么吗?！我以为，由于每个峰值都有不同的法线，因此它们也应该具有不同的照明.

Not sure I understand what's happening on the plane?! I thought that since each spike has different normals, they should have different lighting as well.

实时演示

推荐答案

您的峰值"没有不同的顶点法线，因为您没有更改顶点法线.它们都是(0，1，0).您可以在控制台中检查一下自己.

Your "spikes" do not have different vertex normals because you didn't change the vertex normals; they are all ( 0, 1, 0 ). This is something you could have checked yourself in the console.

此外，当您修改一个四边形的顶点(平面的一个面)时，这四个顶点可能不再是平面的.这会引起您各种各样的问题. (Google非平面四边形.)

Also, when you modify the vertices of a quad ( a face of the plane ), the four vertices are likely no longer planar. This will cause you all sorts of problems. ( google non-planar quads. )

您可以通过首先对PlaneGeometry进行三角测量来避免这些问题:

You can avoid these problems by triangulating the PlaneGeometry first:

THREE.GeometryUtils.triangulateQuads( geometry );

请注意，此函数将重新计算顶点法线.请查看源代码，以便您了解它在做什么.

Be advised that this function recomputes vertex normals. Have a look at the source so you understand what it is doing.

three.js r.58

three.js r.58

这篇关于具有修改顶点的平面上的片段着色器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！