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

Question

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

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

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;