Отладка ELSL-шейдеров в WebGL

Question

Есть ли что-то примерно эквивалентное команде печати в WebGL или какое-то расширение, которое ее поддерживало, или даже API, который позволил бы мне написать поддержку для него?

Answer 1

Если вы хотите пройти через GLSL, я ничего не знаю. Если вы хотите пройти через API WebGL, вызовите WebGL inspector, а Web Tracing Framework оба сделают это

Для GLSL я ничего не знаю. Обычно для отладки GLSL I упростить

Шаг 1: Выведите сплошной цвет в шейдере фрагмента.

Я просто обычно идут в пиксельный шейдер и добавить

gl_FragColor = vec4(1,0,0,1); 
return; 

Если я вижу красный на экране в правильных местах, я могу предположить, вроде проблема в моем пиксельный шейдер не мой вершинных шейдеров.

Шаг 2: Отображение каждый фрагмент данных

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

дисплей нормалей

gl_FragColor = vec4(normal * 0.5 + 0.5, 1); 

дисплей некоторые текстуры Coords

gl_FragColor = vec4(texCoord, 0, 1); 

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

и т.д ...

Шаг 3: Упростить вершинного шейдера

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