WebGL/GLSL - Как работает ShaderToy?

Я недавно стучал вокруг Shadertoy - https://www.shadertoy.com/, чтобы узнать больше о OpenGL и GLSL в частности.

Из того, что я понимаю до сих пор, пользователь OpenGL сначала должен подготовить всю используемую геометрию и настроить сервер OpenGL (количество разрешенных огней, хранение текстур и т.д.). После этого пользователь должен предоставить по крайней мере одну программу вершинного шейдера и одну программу фрагментарного шейдера перед компиляцией программы OpenGL.

Однако, когда я просматриваю образцы кода в Shadertoy, я вижу только одну программу шейдера, и большая часть используемой геометрии представляется непосредственно в коде GLSL.

Как это работает?

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

Может ли кто-нибудь объяснить, как работает Шадертой?

Ответ 1

ShaderToy - это инструмент для написания пиксельных шейдеров.

Что такое пиксельные шейдеры?

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

Таким образом, атрибуты всегда одинаковы, а также вершинный шейдер:

positions = [ [-1,1], [1,1], [-1,-1], [1,-1] ]
uv = [ [0.0, 0.0], [1.0, 0.0], [0.0, 1.0], [1.0, 1.0] ]

И этот квадрат отображается как TRIANGLE_STRIP. Кроме того, вместо того, чтобы явно указывать UVs, некоторые предпочитают использовать встроенную переменную gl_FragCoord встроенного фрейм-шейдера, которая затем делится, например, на uniform vec2 uScreenResolution.

Vertex shader:

attribute vec2 aPos;
attribute vec2 aUV;
varying vec2 vUV;

void main() {
    gl_Position = vec4(aPos, 0.0, 1.0);
    vUV = aUV;
}

И фрагментарный шейдер будет выглядеть примерно так:

uniform vec2 uScreenResolution;
varying vec2 vUV;

void main() {
    // vUV is equal to gl_FragCoord/uScreenResolution
    // do some pixel shader related work
    gl_FragColor = vec3(someColor);
}

ShaderToy может предоставить вам несколько униформ по умолчанию, iResolution (aka uScreenResolution), iGlobalTime, iMouse,... которые вы можете использовать в своем пиксельном шейдере.

Для кодирования геометрии непосредственно в шейдер фрагмента (ака пиксельный шейдер) разработчик использует что-то, называемое трассировкой лучей. Это довольно сложная область программирования, но одним словом: Вы представляете свою геометрию через некоторые математические формулы, а затем в пиксельном шейдере, когда вы хотите проверить, является ли какой-то пиксель частью вашей геометрии, вы используете эту формулу для извлечения этой информации. Google-бит немного должен дать вам много ресурсов, чтобы читать от того, что и как трассировщики лучей построены точно, и это может помочь: Как сделать трассировку лучей в современном OpenGL?

Надеюсь, что это поможет.

Ответ 2

ShaderToy отображает простой GLSL, который запрограммирован для обработки всего освещения, геометрии и т.д., это не геометрия вершин, это большая часть его, 3D-материал или вы можете делать 2D-шейдеры и т.д.

Любая цветная и пространственная математика может быть запрограммирована на языке GLSL. Комбинации передовых алгоритмов делают изоповерхности, фигуры, а затем текстуры проекта на изоповерхности, а также raycasting, отправляют воображаемые линии от зрителя до расстояния, перехватывают что-либо на этом пути, существует множество методов raycasting для 3D.

посетите www.iquilezles.org за идею о различных инструментах, которые используются в графике shadertoy/glsl

Ответ 3

Он просто в основном подталкивает исходный код пиксельного шейдера GLSL непосредственно на графическую карту. Реальная магия происходит в невероятно умных алгоритмах, которые люди используют для создания потрясающих эффектов, таких как марширование лучей, лучевое кастинг, трассировка лучей. лучше всего посмотреть на другие живые песочницы GLSL, такие как: http://glsl.heroku.com/ и http://webglplayground.net/. В основном он создает окно, обычно два треугольника, которые представляют экран, затем шейдер работает на каждом пикселе точно так же, как лучей. Я смотрел на них некоторое время, и алгоритмы, которые люди используют, - это раздувание ума, вам понадобятся некоторые серьезные математические отбивные и посмотрите исходный код "демо-кодирования", чтобы обернуть вокруг себя голову. Многие на игрушке с шейдером, просто взорвать свой ум! Итак, чтобы обобщить, вам просто нужно изучить кодирование и алгоритмы шейдеров GLSL. Нет простого решения.

Ответ 4

Традиционно в компьютерной графике геометрия создается с использованием вершин и визуализируется с использованием некоторых форм материалов (например, текстур с освещением). В GLSL вершинный шейдер обрабатывает вершины, а шейдер фрагмента (пикселя) обрабатывает материалы.

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

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

Есть еще несколько способов определить фигуры. Например. объемные данные (вокселы), кривые поверхности и т.д. Текст компьютерной графики должен охватывать некоторые из них.