Блог

Я ищу инструменты отладки и проверки WebGL — что-то вроде FireBug для WebGL.

Какие-либо рекомендации?

Только что нашел WebGL Inspector. Он утверждает, что является расширенным набором инструментов для отладки WebGL. Я лично еще не пробовал это.

http://benvanik.github.com/WebGL-Inspector/

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

В зависимости от используемой ОС вы можете использовать отладчики OpenGL / DirectX и подключить их к вашему браузеру.

WebGL Inspector — очень хороший инструмент, но имеет много сбоев в пользовательском интерфейсе. Я также могу порекомендовать отладчик Canvas и редактор шейдеров внутри инструментов отладчика FireFox (они отключены по умолчанию, и вы должны включить их в настройках)

Я опробовал WebGL Inspector, WebGL Insight и Spector.js .

Первые два, похоже, обладают наибольшим количеством функций, если вы можете заставить их работать. К сожалению, у WebGL Inspector есть проблемы с пакетами, и я использую webpack. На странице Github есть некоторые предостережения при установке, чтобы заставить его работать с пакетами, но это довольно неаккуратно.

Кто-то в разделе отзывов для WebGL Insight говорит, что это может сработать, только если ваш <canvas> файл загружен с самого начала. Я снова попытался переместить свое создание canvas в index.html в качестве разметки, но не смог заставить ее работать.

Spector.js был единственным, который работал у меня из коробки. Его набор функций более минимален, но вы можете, по крайней мере, видеть состояние для каждого фрейма и трассировки стека.