所以我最近开始使用WebGL,更具体地说是编写GLSL着色器,并且在为我的"水"着色器编写片段着色器时遇到了困难,该着色器源自本教程.

我想要实现的是对我的顶点着色器生成的波形的阶梯着色(Toon着色,单元格着色......)效果,但片段着色器似乎将波对待,就像它们仍然是一个平面和整个网格一样绘制为一种纯色.

我在这里错过了什么？球体完美地工作,但是平坦的表面都是均匀的阴影.如果我使用立方体,我也有同样的问题.立方体上的每个面都独立着色,但整个面部都是纯色.

现场

这就是我设置测试场景的方法.我有两个使用相同材质的网格 - 球体,平面和光源.

问题

如您所见,着色器在球体上按预期工作.我为这个镜头启用了线框,以显示顶点着色器(perlin noise)在平面上工作得很漂亮.

但是当我关闭线框时,您可以看到片段着色器似乎在整个平面上均匀地接收相同水平的光线,从而创建了这个...

旋转平面以面向光源将改变材料的颜色,但是再次将颜色均匀地施加在平面的整个表面上.

片段着色器

在所有它的脚本孩子荣耀大声笑.

uniform vec3 uMaterialColor;
uniform vec3 uDirLightPos;
uniform vec3 uDirLightColor;
uniform float uKd;
uniform float uBorder;
varying vec3 vNormal;
varying vec3 vViewPosition;

void main() {

    vec4 color;

    // compute direction to light
    vec4 lDirection = viewMatrix * vec4( uDirLightPos, 0.0 );
    vec3 lVector = normalize( lDirection.xyz );

    //  N * L. Normal must be normalized, since it's interpolated.
    vec3 normal = normalize( vNormal );

    // check …