Войти
ПрограммированиеФорумГрафика

Glsl от вершинного к фрагментному.

Страницы: 1 2 3 Следующая »
#0
18:06, 28 мар 2017

Всем привет.

Встала задача создать поверхность типа "Лава."
Не на объекте, просто бекграундом.
Использую LibGdx и полез в шейдеры.

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

 uniform vec2 uvScale;
 varying vec2 vUv;
 void main() {
        vUv = uvScale * uv;
        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
        gl_Position = projectionMatrix * mvPosition;
     }

    

Так же нашел 2 текстуры непосредственно самой лавы и текстуру "облака".

Залез сюда, и как ни странно смог реализовать это:
vs:

attribute vec4 a_position;
uniform mat4 cam;
void main() {
    gl_Position = cam* a_position;
}

fs:

precision mediump float;
uniform vec2 resolution;
uniform float time;
void main()  {
  vec2 uv = gl_FragCoord.xy / resolution.xy;
  gl_FragColor = vec4(uv,0.5+0.5*sin(time),1.0);
}

И я не совсем понимаю что тут происходит.
a_position - лично мной ни где не устанавливается, хотя знаю что является позицией вершины (какой вершины ? сколько их ? откуда они сюда попали ?)
cam - Комбинированная проекция и матрица представлений. (передаю)
resolution - размеры экрана в пикселях(передаю)
time - передаю.
gl_FragCoord - система координат
gl_FragColor - каждый пиксель или тексель.

gl_FragColor выполняется на каждую вершину или void main() весь ?
Сколько вообще в данном примере было передано вершин ?

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

    private void showRaster() {
        worldBatch.setProjectionMatrix(WORLD_VIEWPORT.getCamera().combined);
        worldBatch.begin();
        shaderFX();
//        worldBatch.draw(LEFT_WALL, display.getX() - WORLD_W / 2, display.getY() - WORLD_H / 2, WORLD_W, WORLD_H);
        worldBatch.setShader(null);
        level.show(worldBatch);
        hero.show(worldBatch);
        worldBatch.end();
    }

    private void shaderFX() {
        shader.showLava(worldBatch);
    }

шейдер устанавливается в shader.showLava(worldBatch); (по сему не видно)

То есть получается что вершины как раз берутся из спрайта ? (как задать свои вершины не используя спрайт ? рисовать шейдерами в буфере ? как определить размер, вершины,  начальные координаты буфера ? как вообще создать этот буфер, где его найти )) ?)

Так как не могу понять откуда берется вершина a_position, так же и не соображу откуда gl_FragColor  знает какой именно пиксель/тексель красить (они идут по порядку или интерполируются по всякому ? )

P.S. енто не все... просто уже забыл чего я еще не знаю (всё не знаю).
Темы про OGLESSL все читал - все хорошо но вот эти мелкие недочеты (самые простое) - в них все упирается.


Как чередовать пиксели(1=red,2=green,3=red,4=green...) Или строки пикселей(1 строка=red, 2 строка=green, 3 строка=red, 4 строка=green.....) ... (что бы понять каким образом, в каком порядке красятся пиксели)


#1
20:05, 28 мар 2017

У тебя в принципе с пониманием шейдеров проблема? или что то не работает?
Просто если ты хочешь перетащить шейдер именно из shadertoy, то тебе надо его на какую то геометрию натянуть. В shadertoy это делается автоматом за тебя включая VS, там рисуется прямоугольник размером с экран.

vito-Z80
> они идут по порядку или интерполируются по всякому
Параллельно.

#2
20:14, 28 мар 2017

foxes
С shadertoy стандартный (new который) я смог реализовать.
Я не понимаю какую вершину он передает и откуда (и сколько их), не понимаю в каком порядке красятся пиксели
Примеров уйма можно найти, но понять как работает чет ни где не нашел.
В вершинном шейдере (скопипастено откудато)

gl_Position = cam* a_position;

получаем позиция ( так понимаю начало координат или ограничение области отрисовки пикселей? )
матрица перемножается на вектор a_position, который ни где не задается - откуда он взялся и что в  нем ? [0,0,0,0]?
Дальше во фрагментном шейдере используется resolution, который я передаю в экранных координатах, в то время как матрицу в мировых координатах (как работает непонял)

#3
20:21, 28 мар 2017

foxes
> Параллельно.
Как понять параллельно ? За один фрагментный шейдер рисуется ведь только одна точка а не две, что бы они шли параллельно. Или имеется ввиду что сначала все координаты X на координате Y=0, потом все координаты X на координате Y=1 и тд вверх ?

Вообще не пойму:
В вершинном шейдере должно быть минимум 3 вершины что бы нарисовать что то во фрагментном ? Или как получатся, в vs приходит одна вершина и от нее можно прокрасить все пиксели экрана ? откуда fs знает сколько красить и где конец ?

#4
20:24, 28 мар 2017

вершинный шейдер тебе в данном случае не потребуется.

чтобы mainImage из shadertoy работал тебе нужно дописать в шейдер это:

// эти параметры нужно передавать в шейдер в ручную, если ты их используешь.
uniform float iGlobalTime;
uniform vec2 iResolution;

void main(void)
{
    vec2 fragCoord = gl_FragCoord.xy;
    vec4 color;
    mainImage(color,fragCoord);
    gl_FragColor = color;
}

vito-Z80
> Как понять параллельно ?
Очень просто, сколько хватит ядер в видеокарте столько пикселей обрабатываются параллельно. gl_FragCoord передаются координаты пикселя чтобы было понятно какой именно пиксель экрана обрабатывается.

#5
20:29, 28 мар 2017

foxes
> фрагментный шейдер теме в данном случае не потребуется.
это и есть фрагменнтный шейдер ... вроде.
и он же не будет  работать без вершинного (только в shadertoy  будет).
foxes
> Очень просто, сколько хватит ядер в видеокарте столько пикселей обрабатываются
> параллельно. gl_FragCoord передаются координаты пикселя чтобы было понятно
> какой именно пиксель экрана обрабатывается.
Понял, я не про это... есть область (триангл, ректанг без разницы) как закрасить определенный пиксель в площади фигуры в нужный цвет. Сделать этот пиксель отдельной вершиной ?

Я же в первом посте все написал. С shadertoy у меня работает данный пример в моей проге (не без вершинного естественно) но в вершинном идет перемножение матрицы на вектор4 матрицу я передаю из программы, ветор4 я не передаю - откуда он его берет ? и что в нем ?

#6
20:33, 28 мар 2017

vito-Z80
> это и есть фрагменнтный шейдер ... вроде.
> и он же не будет  работать без вершинного (только в shadertoy  будет).
опечатка.

vito-Z80
> как закрасить определенный пиксель в площади фигуры в нужный цвет.
Это пиксель по определенным координатам экрана или фиксированная точка на поверхности фигуры?

#7
20:38, 28 мар 2017

foxes
> Это пиксель по определенным координатам экрана или фиксированная точка на
> поверхности фигуры.
фиксированная точка на поверхности фигуры
хотя и по определенным координатам экрана тоже хотелось бы узнать. )

Кстати gl_FragCoord он дает новую координату и размер текскля каждому fs или что ?
а gl_Position определяет начало координат и высоту/ширину области отрисовки ?

#8
20:46, 28 мар 2017

vito-Z80
> фиксированная точка на поверхности фигуры
Исходя из особенностей работы условия в шейдерах лучше бы это делать просто текстурой.
vito-Z80
> хотя и по определенным координатам экрана тоже хотелось бы узнать. )
просто пишешь условие. if (gl_FragCoord.x=10 && gl_FragCoord.y=10) как то так. Ну или просто рисуешь там геометрическую фигуру.

vito-Z80
> Кстати gl_FragCoord он дает новую координату и размер текскля каждому fs или
> что ?
gl_FragCoord я уже написал, ни каких текстелей там не передается.
gl_Position - это координата вершины геометрии, используется для расчета проекции геометрии на экран.
обычно для заглушки пишется gl_Position = ftransform();

под видео ссылка на еxe и shadertoy

Запустить видео по клику - Как делать игрыЗапустить видео по клику - Как делать игры

исходники к сожалению на asme.

#9
21:02, 28 мар 2017

foxes
короче я так понял мне надо вкурить матрицы с векторами для начала - без них я не разберусь, верно ?
Условие писать на gl_FragCoord.xy ? (читал что условия вообще не желательно использовать так же как и циклы)foxes
> gl_Position - это координата вершины геометрии, используется для расчета
> проекции геометрии на экран.
Но ведь вершин может быть много, к примеру у треугольника 3 и расположены они в хаотичном порядке, как оно просчитывает какой именно пиксель где рисовать ?
> обычно для заглушки пишется gl_Position = ftransform();
заглушка нужны что бы залить весь экран ? без верши, то есть видимую область ?

#10
21:05, 28 мар 2017

vito-Z80
> короче я так понял мне надо вкурить матрицы с векторами для начала - без них я
> не разберусь, верно ?
Попробуй но в данном случае это тебе не понадобиться в полной мере.
Для начала тебе просто нужно вывести хоть какую то геометрию на экран без шейдера.

vito-Z80
> Но ведь вершин может быть много, к примеру у треугольника 3 и расположены они в
> хаотичном порядке, как оно просчитывает какой именно пиксель где рисовать ?
Проекция на экран считается, для каждой вершины (gl_Position), перед этим каждая вершина (gl_Vertex) обрабатывается вершинным шейдером.

vito-Z80
> заглушка нужны что бы залить весь экран ? без верши, то есть видимую область ?
Это расчет по умолчанию, так как он обычно считать должен.
Эквивалентно:
gl_Position = gl_ProjectionMatrix * gl_ModelViewMatrix * gl_Vertex;

#11
21:18, 28 мар 2017

foxes
> Попробуй но в данном случае это тебе не понадобиться в полной мере.
Ну если я не могу понять как просчитывается каждая точка во fs.
Вообще много не понимаю. Вот если задать 3 вершины в vs то fs сделает треугольник, 2 вершины = линия, 1 вершина = точка, заглушка gl_Position = ftransform(); = вся область экрана ? Верно или нет ?
> gl_Position = gl_ProjectionMatrix * gl_ModelViewMatrix * gl_Vertex;
вот она и проблема - я не понимаю что из них что и для чего. Матрица проекции, матрица вида или модели ?

foxes
> просто пишешь условие. if (gl_FragCoord.x=10 && gl_FragCoord.y=10) как то так.
> Ну или просто рисуешь там геометрическую фигуру.
А если мне надо не по экранным координатам точку вычислить а по мировым ?

Вообще хотел сделать что то типа лавы на весь экран. треугольная текстура (бесшовная) заполняет треугольники по алгоритму триангуляции Делоне.
Мне нужно будет передавать все вершины всех треугольников в vs, как тогда fs определит что надо брать по 3 вершины что бы лепить текстуру на треугольник, а то возьмет 2 вершины и от них плясать будет или вообще одну. Или только по 3 и принимает для отрисовки ?
Вообщем не понятна передача/взаимодействие между vs  и fs. Понятно что нужно будет массив этих вершин (массивы в glsl вроде как только одномерные) вот как fs допетрит что ему треугольник пихают который нужно текстурировать, а не линию ?

> Для начала тебе просто нужно вывести хоть какую то геометрию на экран без
> шейдера.
Я на фреймфорке пишу, там типа shape.rectangle(0,0,10,10); - сложнее и нету. (но даже это вроде через шейдеры делается (в глубине там дальше))
Почему шейдеры. Пишу (пытаюсь) для андроид, там чет с производительностью кот наплакал, почитал что шейдеры это быстро + спецэффекты.

#12
21:23, 28 мар 2017

vito-Z80
> Вот если задать 3 вершины в vs то fs сделает треугольник, 2 вершины = линия, 1
> вершина = точка, заглушка gl_Position = ftransform(); = вся область экрана ?
> Верно или нет ?
Нет не верно. Вершина, независимо от их количества это не точка и не линия и не многоугольник - это элемент фигуры имеющая параметры: позиция в пространстве, нормаль для освещения, текстурные координаты, цвет.
Вершинный шейдер обрабатывает вершины по одной, только одну.
Вид фигур, "точка", "линия", "треугольник" из которых состоит геометрия, задается при ее отрисовке.
По 4 вершинам, можно нарисовать 2 треугольника, 6 линий, 4 точки.

foxes
> Для начала тебе просто нужно вывести хоть какую то геометрию на экран без
> шейдера.

Знакомимся с OpenGL

#13
21:33, 28 мар 2017

foxes
> Вершинный шейдер обрабатывает вершины по одной - только одну.
Да читал, но юмора не понял )). Как fs найдет пути построения треугольника с одной вершиной ? Для треугольника ( что бы его нарисовать или даже закрасить) ведь нужны 3 точки которые замыкаются.
Вершина = позиция в пространстве (координаты расположения грубо говоря), уберем цвет, координаты текстуры и прочее. То есть получается вершина это и есть одна из точек треугольника, и что бы fs построил треугольник (который мы хотим, по нашим координатам) он ведь должен опираться на все 3 вершины. Если даже будут 2 вершины - fs построит линию между ними и тормознется. Что я не понимаю подскажите пожалуйста ? :(

foxes
> Знакомимся с OpenGL
glsl это отголосок от OpenGL. OpenGL производительнее ?
Я пишу на жабе, есть поддержка шейдеров - решил разобраться, но яма растет :(

#14
21:38, 28 мар 2017

vito-Z80
> ведь нужны 3 точки которые замыкаются.
Минимум для одного треугольника, но не для шейдера, он не считает треугольники, это лишь часть обработки данных.

vito-Z80
> Если даже будут 2 вершины - fs построит линию между ними и тормознется
Фрагментный шейдер ни чего не построит, он просто обработает конечный пиксель, это фильтр для данных.

Ты когда обычно рисуешь пиксель на экране выполняешь команду на подобии SetPixel(10,10,green); - реализация SetPixel это и будет фрагментный шейдер.

Страницы: 1 2 3 Следующая »
ПрограммированиеФорумГрафика

Тема в архиве.