Проблема с отрисовкой WebGL / Box2D: разрыв между телами

Question

Я все еще новичок в графическом программировании и держу пари, что следующая проблема - просто неправильная конфигурация.

Я создаю игру, используя webgl для графики и box2dweb для физики. к сожалению, на рисунке показаны промежутки между физическими телами (слева - мой фактический рендеринг, справа - рендеринг с использованием отладочного рисунка box2dweb на другом холсте):

и box2d, и webgl используют одинаковую систему координат и размеры для блоков. нет конверсии красные рамки на самом деле являются текстурами, хотя это не имеет значения. красные прямоугольники - это динамические тела, зеленые - статичные тела.

очевидно, я не могу просто изменить размеры графики или физики. если бы я сделал графику больше, зеленые прямоугольники перекрывались бы, если бы физика стала меньше, были бы пробелы в физике.

вот еще один пример:

также, иногда, там нет пробела, как в следующем (просто немного сместил физические тела вправо)

черные квадраты просто нарисованы цветом (без текстур). Глядя на предыдущее изображение, я думаю, это связано с преобразованием координат плавающего мира в координаты экрана-пикселя, но я понятия не имею, какой будет возможность исправить это.

Большое спасибо за помощь

[Update]

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

mat4.ortho(-this.vpWidth * this.zoom, this.vpWidth * this.zoom, -this.vpHeight * this.zoom, this.vpHeight * this.zoom, 0.1, 100.0, this.pMatrix);

vpWidth и vpHeight - размеры холста (640 * 480). матрица проекции передается вершинному шейдеру и умножается на матрицу вида модели и положение вершины. я играл с коэффициентом увеличения. чем больше я увеличиваю, тем больше пропуски.

[Обновление 2]

хорошо. Я исследовал это немного больше. плохой цеппелин имел хороший намек. box2d имеет промежутки между телами, чтобы избежать туннелирования . хотя это не полное объяснение. Я посмотрел на код отладки-ничьей - он ничего не меняет. я сделал небольшой тест, увеличив масштаб как в webgl, так и для отладочной отрисовки со следующим результатом:

с 10-кратным увеличением имеют одинаковый зазор, но при "нормальном" зуме webgl рисует большие зазоры, чем холст 2d. что может быть объяснением? я предполагаю сглаживание , которое включено для canvas 2d, но не для webgl (я использую firefox - думаю, сегодня я сделаю тест chrome, чтобы увидеть, что происходит)

Answer 1

Если вы посмотрите руководство box2d , в главе 4.2 говорится, что движок box2d немного разводит полигоны, чтобы избежать туннелирования.Проверка кода отладки Box2d, чтобы увидеть, как они переводятся из box2d для отрисовки координат, может быть хорошей идеей, чтобы увидеть, как вы можете сделать то же самое в своем приложении.

Answer 2

Используя предоставленную вами матрицу, вы создадите область просмотра, у которой «виртуальный размер» будет в два раза больше размеров холста. Если вы пытаетесь найти соответствие пиксель за пикселем, попробуйте следующее (с увеличением 1,0):

mat4.ortho(-(this.vpWidth/2) * this.zoom, (this.vpWidth/2) * this.zoom, -(this.vpHeight/2) * this.zoom, (this.vpHeight/2) * this.zoom, 0.1, 100.0, this.pMatrix);

Таким образом, ваш холст 640 * 480 будет иметь экстенты от [-320, -240] до [320 * 240], что дает вам всего 640 * 480 единиц. Обратите внимание, что это, вероятно, не устранит пробелы полностью, поскольку, как отметил плохой zeppelin, box2d намеренно помещает их туда, но это должно сделать их менее заметными.

Другой вариант уменьшения видимых промежутков - нарисовать вашу геометрию, немного увеличенную по сравнению с физическим представлением, чтобы она отображалась с дополнительным пикселем или двумя по краям. Худшее, что может случиться, - это то, что геометрия может немного перекрываться, но вам решать, является ли это более нежелательным артефактом, чем разрывы.