Изменить: Эскиз glitch.com, ссылка на который приведена ниже, теперь плавно переключается между тремя шейдерами. Всегда есть 2 активных шейдера (называемые foregroundShader
и backgroundShader
). Каждые changeEvery
кадров текущий foregroundShader
становится новым backgroundShader
, а для foregroundShader
выбирается новый шейдер. backgroundShader
всегда имеет альфа 1.0
(непрозрачный), тогда как значение альфа шейдера переднего плана линейно увеличивается с 0.0
до 1.0
в течение одного «эпизода» с использованием p5. js map()
работают следующим образом:
foregroundShader.setUniform(
"backgroundAlpha",
map(frameCount % changeEvery, 0, changeEvery-1, 0.0, 1.0)
);
Исходный ответ: Возможное решение для плавных переходов между двумя эскизами (я использовал шейдеры 1 и 2 из вашего примера в эскизе сбоя здесь ):
Визуализируйте оба шейдера друг над другом и задайте верхнему значение переменной альфа (прозрачности), например,
uniform float backgroundAlpha;
...
void main() {
// Calculate r g b values of your colors somehow
vec3 color = ...
// Concatenate the alpha (transparency value)
gl_FragColor = vec4(color.rgb, backgroundAlpha);
}
Затем вы можете установите значение backgroundAlpha от вашего sketch.js
до некоторого VALUE
, используя theShader.setUniform('backgroundAlpha', VALUE)
, где VALUE
может быть результатом любой функции (должно быть между 0
и 1
).
Тот же принцип должен работать и для трех шейдеров.
Обратите внимание, что первый вариант не работал с вашим скетчем с ошибкой, потому что вы использовали старую версию p5. js, которая все еще была a ошибка прозрачности . Однако он работал с использованием 1.0.0
(см. Изменения в файле index.html
).