Рекомендуемый способ сделать 2d HUD в webgl

Для игры в webgl, где важна производительность fps, каков наиболее эффективный способ сделать 2D HUD? Я могу думать о 3-х вариантах, но для меня неясно, какова стоимость исполнения каждого и которая будет рекомендована как наиболее эффективная.

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

A: рендеринг hud с полигонами в 3D с использованием орфографической камеры и смешение над исходной сценой. Преимущество - это продвинутые эффекты opengl, возможны по стоимости ручной конфигурации контейнеров.

B: создайте HUD в html/css и позвольте браузеру выполнять компоновку. В этом случае есть большой перфоманс с композицией браузера?

C: нарисуйте 2D-холст поверх 3D-холста и сделайте композицию для браузера. Возможно ли это, и у меня будут проблемы с распространением событий между холстами, такими как события мыши и фокус.

Большое спасибо!

Ответ 1

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

Вариант B - это, на мой взгляд, путь. Браузер неплохо подходит для композитинга, и хотя из-за этого будет совершенный хит, если вы не делаете действительно сумасшедший подробный HUD, я бы предположил, что хит будет незначительным по сравнению с другими частями вашего приложения (например, JS-логикой). Плюс это маршрут, который "волшебным образом" будет улучшаться со временем, а браузеры станут более эффективными в том, что они делают. ИМО является самым большим недостатком здесь, так что вы можете столкнуться с некоторыми ошибками рендеринга, если вы используете некоторые из последних и самых лучших эффектов CSS, чтобы создать свой HUD так, как вы этого хотите, но снова это должно исчезнуть со временем.

Вариант C, насколько мне известно, невозможно в пределах одного холста. У вас может быть отдельный 2D-холст, наложенный на ваш трехмерный, и нарисуйте его HUD, но в этот момент вы наследуете все проблемы A и B без каких-либо преимуществ. Я не вижу веских оснований рекомендовать его.

Я думаю, что одним из больших преимуществ WebGL для многих родных 3D-платформ является то, что он имеет тривиальный доступ к одной из наиболее широко используемых и наиболее гибких пользовательских интерфейсов на планете (HTML). Игнорирование этого преимущества будет колоссальным усилием с очень небольшим ощутимым преимуществом. Используйте инструменты, которые вам доступны, и не слишком беспокоитесь о потерянных миллисекундах из-за этого. Я обещаю вам, что перед вами будут проблемы с большим количеством проблем, когда вы будете работать, и ваше время и усилия будут гораздо лучше потрачены на это, чем пытаться изобрести это колесо.