Проблема реализации теней в WebGL

Question

Я пытаюсь внедрить тени в мой проект WEBGL 2.0, используя этот учебник https://webgl2fundamentals.org/webgl/lessons/webgl-shadows.html В настоящее время я получаю очень плохие результаты, подобные этому:

В основном тонна местности рисуется в тени, чего не должно быть. Световая проекция направлена ​​от вашей камеры в направлении, которое вы смотрите так гипотетически, что вы не должны видеть никаких теней, потому что световая проекция такая же, как у вашей камеры (я просто делаю это для тестирования, пока не смогу заставить это работать должным образом )

У меня есть все то же самое, что и учебник, который я считаю, за исключением того, что я использую glMatrix вместо их математической библиотеки матриц (не важно, я бы предположил). Вот вещь, хотя. Я не использую матрицу вида модели для всего, что я рендеринг, поэтому ни одна из моих точек не находится в диапазоне -1,1. Они могут go дойти до -3200 ... и т.д. Это всего одна большая территория, которую я sh выбил. Я думаю, что проблема заключается в том, как я создаю матрицу текстур

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];