难以在WebGL中实现阴影

Question

我正在尝试使用本教程在我的WEBGL 2.0项目中实现阴影https://webgl2fundamentals.org/webgl/lessons/webgl-shadows.html目前，我得到的结果确实很糟糕：

基本上，一吨的地形被绘制在不应有的阴影中。光线投射是从您的相机朝向您所看的方向，因此假设您不应该看到任何阴影，因为光线投射与您的相机相同（我只是在进行测试，直到可以正常使用为止）

除了我使用glMatrix而不是它们的矩阵数学库（我认为应该没关系）之外，我的所有东西与我相信的教程相同。这是东西。我不使用模型视图矩阵来渲染任何东西，因此我的所有点都不在-1,1范围内。它们可以出去的距离最大为-3200 ... ect。我认为问题在于我如何创建纹理矩阵

textureMatrix = glMatrix.mat4.create();

glMatrix.mat4.translate(textureMatrix,textureMatrix,[0.5,0.5,0.5]);
glMatrix.mat4.scale(textureMatrix,textureMatrix,[0.5,0.5,0.5]);
glMatrix.mat4.multiply(textureMatrix,textureMatrix, projectionMatrix);

glMatrix.mat4.invert(lightMatrix,lightMatrix);
glMatrix.mat4.multiply(textureMatrix,textureMatrix, lightMatrix);

我正在使用与正常投影相同的矩阵进行光投影，这是一个问题吗？如果有人可以帮助，将不胜感激。

Answer 1

这可能是因为对于阴影体积的Z大小（视图中阴影体积的大小），灯光的Y位置（在示例中，它是眼睛与场景之间的距离要大得多）方向。）如果posY在线框内：

但是，如果您增加posY过多（即您的形状超出阴影体积，它们就会消失

因此，您应该增加阴影体积的大小（或以任何一种方式缩小您的场景。）您无法使用滑块进行模拟，因为它们只是使您可以控制X和Y二维尺寸：projWidth和projHeight。 >

即在教程页面的最后一个代码中，例如，最新参数（“ far”）从10更改为100

const lightProjectionMatrix = settings.perspective
    ? m4.perspective(
        degToRad(settings.fieldOfView),
        settings.projWidth / settings.projHeight,
        0.5,  // near
        10)   // far
    : m4.orthographic(
        -settings.projWidth / 2,   // left
         settings.projWidth / 2,   // right
        -settings.projHeight / 2,  // bottom
         settings.projHeight / 2,  // top
         0.5,                      // near
         100);                      // far
然后您可以增加更多的数量：