在 WebGL 中实现阴影时遇到问题

Question

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

基本上，大量的地形被绘制在不应该出现的阴影中。光线投射是从你的相机朝向你正在看的方向，所以假设你不应该看到任何阴影，因为光线投射与你的相机相同（我这样做只是为了测试，直到我能正常工作)

除了我使用的是 glMatrix 而不是他们的矩阵数学库（我认为应该无关紧要），我相信我拥有与教程相同的所有内容。事情是这样的。我不对我正在渲染的任何东西使用模型视图矩阵，所以 none 我的点在 -1,1 范围内。它们可以远至 -3200...等等它只是一个大地形网格块。我认为问题在于我如何创建纹理矩阵

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

这可能是因为你的光的 Y 位置（在你的例子中，它是眼睛和场景之间的距离）对于你的阴影体积的 Z 大小（你的阴影体积的大小在视图方向。）这里如果 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

然后你可以增加 posY 更多:

没有您的完整代码，很难重现和帮助您。您不能尝试将您的场景注入教程代码吗？您可以使用相同的输入将视点与光源和方向绑定：（只需将 0.5 添加到 X 以查看一点阴影并确保它被正确计算。）

/*const cameraPosition = [settings.cameraX, settings.cameraY, 15];*/
const cameraPosition = [settings.posX+0.5, settings.posY, settings.posZ];
/*const target = [0, 0, 0]; */ 
const target = [settings.targetX, settings.targetY, settings.targetZ];

在 WebGL 中实现阴影时遇到问题

Trouble implementing shadows in WebGL

shadow

webgl