Написание фрагментарных шейдеров: не могу понять, как формируются униформы

Question

Я пытаюсь создать пользовательские фильтры с помощью Phaser, но я не понимаю, как конкретно используются форма и vTextureCoord. Here's a JSFiddle (EDIT: Игнорируйте изображение, минимальный случай укладывает в квадрате градиента):

• Почему не верхний правый угол белый? Я установил как разрешение фильтра, так и размер спрайта до 256, но vTextureCoord только идет от [0,0] до [.5, .5] (или так кажется)
• Попробуйте перетащить спрайт: кажется, быть заблокирован стеной в верхней и левой границах. Это связано только с шейдером, поскольку сам игровой объект правильно перетаскивается. Как так?

Я вытащил мои волосы на этом во время последнего Ludum Dare, пытаясь выяснить позицию пикселя в спрайт (т.е. [0,0] в нижнем левом углу и [sprite.w, sprite.h ] в верхнем правом углу) ... Но я не мог найти надежный способ вычислить, что независимо от позиции и размера спрайта.

Благодарим за помощь!

---

EDIT: Как emackey отметил, похоже, либо Phaser или Pixi (не уверен, на каком уровне она обрабатывается?) Использует промежуточную структуру. Из-за этого uSampler я получаю не оригинальную текстуру, а модифицированную, то есть, например, сдвинутую/обрезанную, если спрайт находится за верхним левым углом экрана. uSampler и vTextureCoord работают хорошо, так что, пока я делаю простые вещи, такие как настройки цвета, все выглядит хорошо, но для просмотра с координатами текстуры это просто ненадежно.

Может ли гуру Phaser/Pixi объяснить, почему он работает именно так, и что я должен делать, чтобы получить четкие координаты и работать с моей фактической текстурой источника? I managed to hack a shader «фиксирование vTextureCoord» и подключение моей текстуры в iChannel0, но это немного взломано.

Спасибо.

Answer 1

Я не слишком знаком с Phaser, но мы можем пролить немного света на то, что действительно делает этот фрагментарный шейдер. Загрузите jsFiddle и замените GLSL основной корпус с этим:

void main() { 
    gl_FragColor = vec4(vTextureCoord.x * 2., vTextureCoord.y * 2., 1., 1.); 
    gl_FragColor *= texture2D(uSampler, vTextureCoord) * 0.6 + 0.4; 
} 

выше фильтр шейдер представляет собой сочетание оригинальной текстуры (с некоторыми серый добавить) и ваши цвета, так что вы можете увидеть и текстуру и Увс в то же время.

Вы правы, что vTextureCoord идет только 0.5, следовательно, выше * 2., но это не вся история: Попробуйте перетащить свой спрайт с верхней-левой. Текстура скользит, но координаты текстуры не двигаются!

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

Если вы запустите Chrome Canvas Inspector, вы увидите, что на самом деле есть несколько проходов, включая проход рендеринга к текстуре.Вы также можете увидеть, что в проходе фильтра используются координаты, которые, как представляется, являются отношением размера области фильтра к размеру игровой площади, которая в этом случае равна 0.5 по обоим измерениям.

Я не знаю Phaser достаточно хорошо, чтобы узнать, есть ли быстрое решение для любого из этого. Возможно, вы можете добавить в фильтр некоторые униформы, которые дадут шейдеру дополнительное преобразование, в котором он нуждается, если вы сможете понять, откуда это происходит. Или, возможно, есть способ привязать шейдер непосредственно к самому спрайту (есть нулевое поле с тем же именем), поэтому вы можете запустить свой GLSL-код там, а не в фильтре. Надеюсь, этот ответ, по крайней мере, объяснил «почему» из ваших двух вопросов выше.