Как написать Swirl на AGAL?

[Bletraut]

Собственно понять не могу как это сделать, как написать эффект закручивания на AGAL, в других-то языках всё понятно, имеем позицию пикселя и её двигаем. Но в агал нет позиции пикселя, как же быть? Прошу поделиться примерами и формулами если таковые имеются.

[Tails]

Можно получить координаты пикселя в формате от 0 до 1. (float) И уже из этого посчитать конкретный пиксель, из заранее переданных констант, ширина экрана или ширина области эффекта.

[Bletraut]

Можно получить координаты пикселя в формате от 0 до 1.

Это как?

[Tails]

Рекомендую эту статью: http://demiart.ru/forum/lofi/index.php/t190499.html (На вес золота)
Ещё эту: http://habrahabr.ru/post/130454/
И справочник: http://help.adobe.com/ru_RU/as3/dev/...ec56-8000.html

Теперь, когда обложились материалом, начать читать и изучать:
1. Сперва выполняется вершинный шейдер для каждого полигона, составляющего меш. В него передаются координаты, матрица.
2. Затем запускается пиксельная программа (шейдер) для каждого пиксела на экране, которые занимает меш.

В пиксельный шейдер, через промежуточные регистры v0..v7 из вершинного шейдера передаются интерполированные координаты. По этим координатам, вы можете, например, сделать выборку цвета пиксела из текстуры. Координаты выглядят таким образом, что крайний левый пиксел полигона равен нулю, а крайний правый пиксел будет равен единице по оси x, для y аналогично (В системе координат полигона, а не экрана). То-есть, вы получаете координаты пиксела на полигоне в формате 0-1.

Если ваш меш представляет собою всего 2 треугольника (плоскость, Quad) растянутый по ширине и высоте экрана, то вы де факто получите в пиксельном шейдере координаты от 0 до 1, соответствующие крайней левой и крайней правой стороне экрана по оси x. Соответственно, если вы передадите в свой шейдер константами текущее разрешение экрана, то внутри пиксельного шейдера сможете получить текущий, конкретный пиксель: screenWidth * v0.x

Как-то так оно работало. Где-то я мог чуть приврать, сам уже больше двух лет не работал с agal.
Очень рекомендую почитать статью по первой ссылке, всё просто и понятно объясняется.

[Bletraut]

Я знаю и понимаю содержание всех этих статей. Я не понимаю как я могу получить координаты любого пикселя, имея только четере вершины и соответственно 4 UV координаты. В пиксельные шейдер передаются UV из буффера, но там только 4 точки! Откуда он берет координаты остальных?

Добавлено через 3 минуты
Когда я писал шейдер тумана, то я брал координаты вершин и по ним вычислял цвет тумана. Но как мне закрутить пиксели если у меня только 4 вершины? А мне нужно сделать из них спираль...

Добавлено через 5 минут

то внутри пиксельного шейдера сможете получить текущий, конкретный пиксель: screenWidth * v0.x

А разве я не получу координату одной из 4 вершин, умноженную на ширину экрана?

[Bletraut]

Вот код моего шейдера, преобразовались только вершины.

			// Sin sistortion
			vertexCode = "mov vt0, va0\n";
			vertexCode += "mul vt1.x, vt0.x, vc4.x\n"; // v.x * stageWidth
			vertexCode += "sin vt1.x, vt1.x\n"; // sin(v.x * stageWidth)
			vertexCode += "add vt0.y, vt0.y, vt1.x\n"; // v.y + sin(v.x * stageWidth)
			vertexCode += "mov op, vt0\n";

[Tails]

Забудем про экран, в шейдере есть понятие полигон.
Если надо, чтобы эффект был на весь экран, просто растягиваем полигон на весь экран.
В пиксельном шейдере мы рисуем на полигоне, а не на экране, соответственно и координаты у нас в системе полигона, относительные (0-1), а не конкретные (0px-1280px).

У нас есть текущие x,y и текстура, которую нужно "закрутить".
Задача в том, чтоб вывести пикселы из текстуры, с определённым смещением.

В обычном выводе мы просто пишем:
(Синтаксис утрирован)
буфер = текстура(v0.xy);

А надо:
буфер = текстура(спираль(v0.xy, strength));

То-есть, задача сводится к тому, что-бы просто написать формулу этой самой спирали, которая будет принимать x, y, strength и возвращать новые x, y. Повторю, диапазон значений xy от нуля до единицы.

Допустим, для волны мы бы могли использовать синус:

function(x:Number, y:Number, strength:Number):Point {
    return new Point(Math.sin(x * strength, y)); // Вертикальная волна с амплитудой длиною в текстуру.
}

Я специально написал на as3, чтоб понятнее было. Сперва создаёте формулу, отлаживаете, а потом переносите на agal.
При этом, знать о том, что там с экраном, какое у него разрешение и т.п. пиксельной программе не нужно.

[Bletraut]

Тоже самое и при шейдере

			vertexCode += "mov op, va0\n"; 
 
			// Sin sistortion
			vertexCode += "mov vt0, va0\n";
			vertexCode += "mul vt1.x, vt0.x, vc4.x\n"; // v.x * stageWidth
			vertexCode += "sin vt1.x, vt1.x\n"; // sin(v.x * stageWidth)
			vertexCode += "mov vt2, va1\n"; // vt0 = uv
			vertexCode += "add vt2.y, vt2.y, vt1.x\n"; // u = u + sin(v.x * stageWidth)
 
			vertexCode += "mov v0, vt2\n"; // uv
 
			fragmentCode = "tex ft0, v0, fs0 <2d,nearest,clamp>\n";
			fragmentCode += "mov oc, ft0\n";

[Bletraut]

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

Это и есть полигон на весь экран, это пост-процессинг отрендеренной 3д сцены.

[Tails]

Оставь в покое вершинный шейдер.
Рисуем в пиксельном, читай выше что написано.