Почему я вижу эти странные обтравочные артефакты в WebGL?

Question

Я использую TWGL для создания плоского буфера NxN, который затем использую как me sh (twgl.primitives.createPlaneBufferInfo) с экструзией по оси Z относительно значений яркости в видео. Все выглядит довольно хорошо, за исключением того, что я получаю странные артефакты отсечения в (-X, -Y) и (X, Y) квадрантах. См. Прикрепленное изображение для примера ...

Я видел этот пост , который поднимает подобные вопросы и предлагает глубинную сортировку но не совсем понятно, как бы я это сделал, учитывая, что относительная глубина определяется на лету в шейдере. Есть также предложение отключить тестирование глубины и включить выборку лица, но это не работает. Я предполагаю, что должна быть какая-то альтернатива, поскольку то, что я делаю, не является чем-то необычным. Возможно, мне нужно генерировать меня sh по-другому? Для меня также не очевидно, почему это произошло бы только в двух из четырех квадрантов. Заранее спасибо!

Answer 1

После долгих экспериментов я наконец нашел проблему. Матрица перспективы, которую я генерировал, имела ноль в качестве 16-го элемента массива (другими словами, положение [4,4] в матрице X, Y, Z, W), что приводило к сглаживанию значений глубины.

Я генерировал свою перспективную матрицу с помощью twgl. Не уверен, почему реализация работает так (мне кажется, это ошибка):

_public.perspectiveMatrix = twgl.m4.perspective(_public.POV, width/height, 0.0, 100);

Это было проблемой, так как я устанавливал позицию в вершинном шейдере следующим образом:

gl_Position = perspectiveMatrixUniform * viewMatrixUniform * vec4((matrixUniform * vec3(position.xy, 1.0)).xy, (intensity.r + intensity.g + intensity.b)/3.0 + 0.01, 1.0); 

Если я добавлю следующую строку сразу после инициализации матрицы перспективы, все будет работать как положено:

_public.perspectiveMatrix[15] = 1.0;