1. Синус косинус
синусоидальное движение:y = sin(x)
косинусное движение:y = cos(x)
Анимированная демонстрация:
Даваяsin()а такжеcos()Добавьте немного обработки, чтобы создать более интересные эффекты:
2. Плавный шаг
Интерполяция Эрмита между двумя значениямиlink, его значение всегда равно 0~1.
описывать:существуетedge0а такжеedge1Возьмите плавную разницу между ними, особенно полезно, когда нам нужен плавный градиент. Текущее значение меньшеedge0, значение0. Текущее значение больше, чемedge1, Значение1. В этом промежутке взятьedge0а такжеedge1значение разницы.
Применимая сцена 1: Поскольку его значение всегда находится между 0 и 1, разница между edge0 и edge1 будет определять только крутизну или гладкость кривой, поэтому мы можем контролировать их разницу, чтобы внести некоторые изменения в скорость анимации. Например:
zoom(uv, smoothstep(0.0, nQuick, progress));
Скорость масштабирования определяется путем управления значением nQuick выше.
Применимая сцена 2:smoothstepсуществуетedge0,edge1для0, эквивалентноstep:
smoothstep(0.0, 0.0, x);
Итак, как нам добиться эффекта движения края, подобного шагу (краю, x), просто сделайте то же самое:
smoothstep(0.0, 0.0, x-edge);
Операция smoothstep() также может создавать различные варианты кривых:
y = smoothstep(0.0,1.0,x) - smoothstep(1.0, 2.0, x);
использовать:
float smoothstep(float edge0, float edge1, float x)
vec2 smoothstep(vec2 edge0, vec2 edge1, vec2 x)
vec3 smoothstep(vec3 edge0, vec3 edge1, vec3 x)
vec4 smoothstep(vec4 edge0, vec4 edge1, vec4 x)
vec2 smoothstep(float edge0, float edge1, vec2 x)
vec3 smoothstep(float edge0, float edge1, vec3 x)
vec4 smoothstep(float edge0, float edge1, vec4 x)
Это эквивалентно:
genType t; /* Or genDType t; */
t = clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
return t * t * (3.0 - 2.0 * t);
Визуальное представление:y = smoothstep(0.0,1.0,x);
3. зажим
Ограничьте значение между двумя другими значениями.link
иллюстрировать:clamp()вернутьminValприбытьmaxValЗначение в пределах диапазона. Расчет возвращаемого значения: MIN (MAX (X, MinVal), MaxVal).
использовать:
float clamp(float x, float minVal, float maxVal)
vec2 clamp(vec2 x, vec2 minVal, vec2 maxVal)
vec3 clamp(vec3 x, vec3 minVal, vec3 maxVal)
vec4 clamp(vec4 x, vec4 minVal, vec4 maxVal)
vec2 clamp(vec2 x, float minVal, float maxVal)
vec3 clamp(vec3 x, float minVal, float maxVal)
vec4 clamp(vec4 x, float minVal, float maxVal)
Визуальное представление:y = clamp(x,0.,1.);
Четыре, шаг
Сгенерируйте ступенчатую функцию путем сравнения двух значений.link
иллюстрировать:step()поставивxа такжеedgeСравните, чтобы сгенерировать ступенчатую функцию. для возвращаемого значенияi,еслиx[i] < edge[i]затем вернуться0.0, иначе возврат1.0.
Применимая сцена:step()имеет одну из своих главных характеристик, т.черное и белое. край представляет собой черную или белую границу, менееedgeчерный (0), больше, чемedgeОн белый (1). Когда мы используем его таким образом, мы можем судить, существует ли пиксель в нормализованной системе координат:
step(0.0, p.y) * step(p.y, 1.0) * step(0.0, p.x) * step(p.x, 1.0)
Когда он равен 0, это означает, что пиксель выходит за границы по горизонтали или вертикали; когда он равен 1, это означает, что он находится в пределах системы координат. когда мы ставим его иmix(texture2D_1, texture2D_2, step())Когда функции используются вместе, могут быть получены две соединенные карты текстуры, либо черные, либо белые (часть карты текстуры, выходящая за границу, будет заменена картой текстуры 2).
использовать:
float step(float edge, float x)
vec2 step(vec2 edge, vec2 x)
vec3 step(vec3 edge, vec3 x)
vec4 step(vec4 edge, vec4 x)
vec2 step(float edge, vec2 x)
vec3 step(float edge, vec3 x)
vec4 step(float edge, vec4 x)
Визуальное представление:y = step(0.5,x);
Пять, мод
Вычисляет значение первого аргумента со вторым модулем.
иллюстрировать:xуказывает значение требуемого модуля,yУказывает значение, для которого нужно получить модуль. Формула расчета:x - y * floor(x / y).
использовать:
float mod(float x, float y)
vec2 mod(vec2 x, vec2 y)
vec3 mod(vec3 x, vec3 y)
vec4 mod(vec4 x, vec4 y)
vec2 mod(vec2 x, float y)
vec3 mod(vec3 x, float y)
vec4 mod(vec4 x, float y)
Визуальное представление:y = mod(x,1.)
Шесть, дробь
Вычисляет дробную часть параметра.
иллюстрировать:fract()вернутьxдробная часть . Формула расчетаx - floor(x).
Применимая сцена: Если мы находимся в нормализованной системе координат,fract(uv)Это может сделать точку пикселя всегда в системе координат и не будет выходить за границу. В качестве примера возьмем панорамирование сверху вниз.fract()Панорамирование сверху вниз можно зацикливать бесконечно, от начала до конца.
использовать:
float fract(float x)
vec2 fract(vec2 x)
vec3 fract(vec3 x)
vec4 fract(vec4 x)
Визуальное представление:y = fract(x)
Семь, этаж
Найдите ближайший меньше или равный параметруцелое число.
иллюстрировать:floor()Возвращает значение, равное наименьшему целому числу, меньшему или равномуx.
использовать:
float floor(float x)
vec2 floor(vec2 x)
vec3 floor(vec3 x)
vec4 floor(vec4 x)
Визуальное представление:y = floor(x)
8. Потолок
Найдите ближайшее значение, большее или равное параметруцелое число.
иллюстрировать:ceil()Возвращает значение, равное ближайшему целому числу, большему или равномуx.
использовать:
float ceil(float x)
vec2 ceil(vec2 x)
vec3 ceil(vec3 x)
vec4 ceil(vec4 x)
Визуальное представление:y = ceil(x);
Девять, знак
Извлеките знак параметра.
иллюстрировать:еслиxменьше, чем0.0,ноsign()вернуть-1.0,еслиxравный0.0, затем вернуться0.0,еслиxбольше, чем0.0, затем вернуться+1.0.
Применимая сцена:sign()Очень эффективно судить о направлении движения, потому что его значение только-1,0,1, так что мы можем пройти
vec2 direction = vec2(0.0, 1.0); // x, y 代表方向
sign(direction)
Чтобы судить о горизонтальном и вертикальном направлениях, положительное число — это положительное направление, а отрицательное число — обратное направление.1ценность .
использовать:
float sign(float x)
vec2 sign(vec2 x)
vec3 sign(vec3 x)
vec4 sign(vec4 x)
Визуальное представление:y = sign(x);
Десять, смешать
Ограничьте значение между двумя другими значениями и выполните смешивание, часто используемое для смешивания цветов:
иллюстрировать:mix()существуетxа такжеyВыполните линейную интерполяцию между ними, используя веса между ними. Возвращаемое значение рассчитывается какx*(1-a)+y*a. Это можно понять так,aРешенныйx,yпропорция, напримерa < 0.5,Такxимеет большую долю,a > 0.5,yбольшей пропорции. когдаa = 0.5час,xа такжеyдолю каждой половины.
сцены, которые будут использоваться: у нас часто есть анимация, которая должна идти вперед и назад в единицу времени, например, сначала увеличение, а затем уменьшение. Это можно легко сделать с помощью следующей формулы (масштаб — это коэффициент увеличения):
mix(scale, 1.0, 2.0 * abs(progress - 0.5))
Приведенную выше формулу можно выполнить, сначала увеличив масштаб доscale(когда прогресс0.5максимум), а затем уменьшите масштаб до1.
использовать:
float mix(float x, float y, float a)
vec2 mix(vec2 x, vec2 y, vec2 a)
vec3 mix(vec3 x, vec3 y, vec3 a)
vec4 mix(vec4 x, vec4 y, vec4 a)
vec2 mix(vec2 x, vec2 y, float a)
vec3 mix(vec3 x, vec3 y, float a)
vec4 mix(vec4 x, vec4 y, float a)
Визуальное представление:y = mix(0.,1.,x);